/* ==========================================================================
   Clincog v2 — Checkout (WooCommerce)
   Escopo: body.woocommerce-checkout — restyle da marcação existente.
   Nenhum campo é criado, removido ou reordenado: só aparência.

   Marcação de origem:
   - .cclw_opc_main.checkout-three-column-layout  → grid de 3 colunas (plugin CCLW)
   - .thwcfd-field-wrapper                        → campos (Checkout Field Editor)
   - .payment_method_asaas-credit-card / -pix     → gateway Asaas
   ========================================================================== */

body.woocommerce-checkout {
	--cko-navy: #110e22;
	--cko-navy-2: #1e1a3c;
	--cko-teal: #1bf8dd;
	--cko-mint: #82fff0;
	--cko-mint-soft: #eafaf5;
	--cko-green: #0fbf9f;
	--cko-ink: #110e22;
	--cko-muted: #6b7280;
	--cko-placeholder: #a8b0be;
	--cko-line: #dfe3ec;
	--cko-field-border: #d9dee8;
	--cko-bg: #f4f6fa;
	--cko-white: #ffffff;
	--cko-req: #e24a6e;
	--cko-radius: 12px;
	--cko-radius-sm: 8px;
	--cko-font: 'Hanken Grotesk', 'Inter', sans-serif;
	--cko-font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
	--cko-font-mono: 'JetBrains Mono', ui-monospace, monospace;
	--cko-shadow: 0 1px 2px rgba(17, 14, 34, .04), 0 8px 24px rgba(17, 14, 34, .06);
}

/* --------------------------------------------------------------------------
   Cabeçalho da página (eyebrow + título), impresso por clincog-v2-checkout.php

   O header/footer são os v2 (page-checkout.php → get_header('v2')), então o
   banner do tema não existe mais nesta página. As regras abaixo só ficam como
   rede de segurança caso a página caia no template padrão do tema.
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .top_site_main .page-title-wrapper {
	display: none;
}

body.woocommerce-checkout .top_site_main {
	min-height: 0;
	height: auto;
	padding-bottom: 0;
	background-image: none;
	background-color: var(--cko-navy);
}

/* Área do conteúdo dentro do <main> do header v2 */
body.woocommerce-checkout .clincog-v2__main .clincog-checkout {
	padding-bottom: 0;
	background: var(--cko-white);
}

body.woocommerce-checkout .entry-content .woocommerce .clincog-checkout-head {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 24px 8px;
	font-family: var(--cko-font);
}

body.woocommerce-checkout .entry-content .woocommerce .clincog-checkout-head__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cko-green);
}

body.woocommerce-checkout .entry-content .woocommerce .clincog-checkout-head__title {
	margin: 0;
	font-family: var(--cko-font-display);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--cko-navy);
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Área de conteúdo
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content .woocommerce {
	font-family: var(--cko-font);
	color: var(--cko-ink);
}

body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-login-toggle,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-login,
body.woocommerce-checkout .entry-content .woocommerce .checkout_coupon {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Faixas "Já é cliente?" / "cupom de desconto" */
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 12px;
	padding: 14px 20px;
	background: var(--cko-mint);
	border: 0;
	border-radius: var(--cko-radius-sm);
	color: var(--cko-navy);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

body.woocommerce-checkout .entry-content .woocommerce .woocommerce-info a {
	color: var(--cko-navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Grid de 3 colunas
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content .woocommerce .cclw_opc_main.checkout-three-column-layout {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	align-items: start;
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px 64px;
	background: transparent;
}

body.woocommerce-checkout .entry-content .woocommerce .grid-col-checkout {
	float: none;
	width: auto;
	min-width: 0;
	padding: 0;
}

/* Faixa cinza atrás das colunas */
body.woocommerce-checkout .entry-content .woocommerce form.checkout {
	position: relative;
	background: var(--cko-bg);
}

/* --------------------------------------------------------------------------
   Cards (Dados do cliente / Seu pedido / Pagamento / Informações adicionais)
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content .woocommerce #customer_address_details,
body.woocommerce-checkout .entry-content .woocommerce #cclw_additional_fields,
body.woocommerce-checkout .entry-content .woocommerce #cclw_order_details_table,
body.woocommerce-checkout .entry-content .woocommerce #cclw_payment_section {
	margin: 0 0 24px;
	background: var(--cko-white);
	border: 1px solid var(--cko-line);
	border-radius: var(--cko-radius);
	box-shadow: var(--cko-shadow);
	overflow: hidden;
}

body.woocommerce-checkout .entry-content .woocommerce .title-col-checkout {
	margin: 0;
	padding: 0;
	background: linear-gradient(90deg, var(--cko-navy) 0%, var(--cko-navy-2) 100%);
	border: 0;
}

body.woocommerce-checkout .entry-content .woocommerce .title-col-checkout h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 20px;
	background: transparent;
	color: var(--cko-white);
	font-family: var(--cko-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
}

body.woocommerce-checkout .entry-content .woocommerce .title-col-checkout h2 i {
	font-size: 15px;
	color: var(--cko-teal);
}

/* Conteúdo interno dos cards */
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-additional-fields__field-wrapper,
body.woocommerce-checkout .entry-content .woocommerce #payment.woocommerce-checkout-payment,
body.woocommerce-checkout .entry-content .woocommerce .cclw_order_review_table {
	padding: 20px;
	background: transparent;
	border: 0;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content .woocommerce form.checkout .form-row {
	margin: 0 0 14px;
	padding: 0;
}

/* custom-checkout.css trava os rótulos em height/max-height 22px (!important),
   o que corta o "(opcional)" quando o rótulo quebra em duas linhas. */
body.woocommerce-checkout #customer_address_details .form-row label,
body.woocommerce-checkout #cclw_additional_fields .form-row label {
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
	line-height: 1.3 !important;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--cko-navy);
	font-family: var(--cko-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

/* "(opcional)" na mesma linha do rótulo, para os pares manterem a mesma altura */
body.woocommerce-checkout .entry-content .woocommerce form.checkout .form-row label .optional {
	display: inline;
	margin-left: 4px;
	color: var(--cko-muted);
	font-size: 12px;
	font-weight: 500;
}

body.woocommerce-checkout .entry-content .woocommerce #order_comments_field label .optional {
	display: block;
	margin-left: 0;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .required,
body.woocommerce-checkout .entry-content .woocommerce form.checkout abbr.required {
	color: var(--cko-req);
	border: 0;
	text-decoration: none;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .input-text,
body.woocommerce-checkout .entry-content .woocommerce form.checkout input[type="text"],
body.woocommerce-checkout .entry-content .woocommerce form.checkout input[type="tel"],
body.woocommerce-checkout .entry-content .woocommerce form.checkout input[type="email"],
body.woocommerce-checkout .entry-content .woocommerce form.checkout input[type="password"],
body.woocommerce-checkout .entry-content .woocommerce form.checkout input[type="number"],
body.woocommerce-checkout .entry-content .woocommerce form.checkout input[type="date"],
body.woocommerce-checkout .entry-content .woocommerce form.checkout select,
body.woocommerce-checkout .entry-content .woocommerce form.checkout textarea {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	background: var(--cko-white);
	border: 1px solid var(--cko-field-border);
	border-radius: var(--cko-radius-sm);
	box-shadow: none;
	color: var(--cko-ink);
	font-family: var(--cko-font);
	font-size: 15px;
	line-height: 44px;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout textarea {
	height: auto;
	min-height: 110px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23110e22' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout ::placeholder {
	color: var(--cko-placeholder);
	opacity: 1;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .input-text:focus,
body.woocommerce-checkout .entry-content .woocommerce form.checkout select:focus,
body.woocommerce-checkout .entry-content .woocommerce form.checkout textarea:focus {
	outline: none;
	border-color: var(--cko-green);
	box-shadow: 0 0 0 3px rgba(15, 191, 159, .18);
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .woocommerce-invalid .input-text,
body.woocommerce-checkout .entry-content .woocommerce form.checkout .woocommerce-invalid select {
	border-color: var(--cko-req);
}

/* O pareamento das colunas (quais campos ficam lado a lado e com que largura)
   continua vindo do custom-checkout.css do plugin — nada é redistribuído aqui. */

/* select2 (País / Estado) alinhado ao restante */
body.woocommerce-checkout .entry-content .woocommerce .select2-container--default .select2-selection--single {
	height: 46px;
	background: var(--cko-white);
	border: 1px solid var(--cko-field-border);
	border-radius: var(--cko-radius-sm);
}

body.woocommerce-checkout .entry-content .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 38px 0 14px;
	color: var(--cko-ink);
	font-size: 15px;
	line-height: 44px;
}

body.woocommerce-checkout .entry-content .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 8px;
}

body.woocommerce-checkout .entry-content .woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .entry-content .woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--cko-green);
	box-shadow: 0 0 0 3px rgba(15, 191, 159, .18);
}

/* Campo de senha com botão "olho" */
body.woocommerce-checkout .entry-content .woocommerce form.checkout .woocommerce-password-hint,
body.woocommerce-checkout .entry-content .woocommerce form.checkout .woocommerce-password-strength {
	margin-top: 8px;
	font-size: 13px;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .password-input {
	display: block;
	position: relative;
	width: 100%;
}

body.woocommerce-checkout .entry-content .woocommerce form.checkout .show-password-input {
	top: 15px;
	right: 14px;
	color: var(--cko-muted);
}

/* Notas do pedido — rótulo com "(opcional)" já vem do WooCommerce */
body.woocommerce-checkout .entry-content .woocommerce #order_comments_field label {
	margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Coluna 2 — Seu pedido
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content .woocommerce .cclw_order_review_table .shop_table,
body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary thead th {
	padding: 0 0 12px;
	border: 0;
	background: transparent;
	color: var(--cko-muted);
	font-family: var(--cko-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary thead th.total,
body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary thead th.removepro {
	text-align: right;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary td {
	padding: 12px 8px 12px 0;
	border: 0;
	border-top: 1px solid var(--cko-line);
	background: transparent;
	vertical-align: middle;
	font-size: 14px;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary tr:first-child td {
	border-top: 0;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary td.thumb img {
	width: 56px;
	height: 56px;
	border-radius: var(--cko-radius-sm);
	object-fit: cover;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary td.name,
body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary .more_details_slide {
	color: var(--cko-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary td.total,
body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary td.removepro {
	text-align: right;
}

body.woocommerce-checkout .entry-content .woocommerce table.onestepcheckout-summary td.total .amount {
	font-family: var(--cko-font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--cko-navy);
}

/* Controle de quantidade */
body.woocommerce-checkout .entry-content .woocommerce .wrapper_qty {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--cko-field-border);
	border-radius: 999px;
}

body.woocommerce-checkout .entry-content .woocommerce .wrapper_qty input,
body.woocommerce-checkout .entry-content .woocommerce .wrapper_qty .qty {
	width: 34px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cko-navy);
	font-family: var(--cko-font-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
	box-shadow: none;
}

/* Os botões +/- vêm pintados pelo custom-checkout.css do plugin (com
   !important), por isso a sobrescrita usa a mesma raiz #cclw_order_details_table. */
body.woocommerce-checkout #cclw_order_details_table .cclw_order_review_table button.cclwminus,
body.woocommerce-checkout #cclw_order_details_table .cclw_order_review_table button.cclwplus {
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--cko-navy) !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 30px !important;
	text-align: center;
	text-decoration: none;
	box-shadow: none !important;
}

body.woocommerce-checkout #cclw_order_details_table .cclw_order_review_table button.cclwminus:hover,
body.woocommerce-checkout #cclw_order_details_table .cclw_order_review_table button.cclwplus:hover {
	background: var(--cko-mint-soft) !important;
	color: var(--cko-navy) !important;
}

body.woocommerce-checkout .entry-content .woocommerce a.cclw_remove {
	color: var(--cko-req);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-checkout .entry-content .woocommerce a.cclw_remove:hover {
	opacity: .75;
}

/* Totais */
body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals {
	margin-top: 4px;
	padding-top: 4px;
	border: 0;
}

body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals .cart-subtotal,
body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals .order-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--cko-line);
}

body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals p.left-corner {
	margin: 0;
	color: var(--cko-muted);
	font-size: 14px;
	font-weight: 500;
}

body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals .right-corner .amount {
	font-family: var(--cko-font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--cko-navy);
}

body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals .order-total p.left-corner {
	color: var(--cko-navy);
	font-size: 17px;
	font-weight: 800;
}

body.woocommerce-checkout .entry-content .woocommerce .cclw_cart_totals .order-total .amount {
	font-size: 22px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Coluna 3 — Opções de pagamento (Asaas)
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	background: transparent;
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--cko-field-border);
	border-radius: var(--cko-radius-sm);
	color: var(--cko-navy);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method > input.input-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method > label::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--cko-field-border);
	border-radius: 50%;
	background: var(--cko-white);
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method > input.input-radio:checked + label {
	background: var(--cko-mint-soft);
	border-color: var(--cko-green);
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method > input.input-radio:checked + label::before {
	border-color: var(--cko-green);
	box-shadow: inset 0 0 0 3px var(--cko-white);
	background: var(--cko-green);
}

body.woocommerce-checkout .entry-content .woocommerce ul.wc_payment_methods > li.wc_payment_method > label img {
	max-height: 22px;
	width: auto;
	margin-left: auto;
}

/* O box do gateway vem cinza (#eee) do WooCommerce/tema, com !important. */
body.woocommerce-checkout .entry-content .woocommerce #payment div.payment_box {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--cko-ink);
	font-size: 14px;
}

body.woocommerce-checkout .entry-content .woocommerce #payment div.payment_box::before,
body.woocommerce-checkout .entry-content .woocommerce #payment div.payment_box::after {
	content: none !important;
	display: none !important;
}

body.woocommerce-checkout .entry-content .woocommerce .payment_box > p:first-child {
	margin: 0 0 14px;
	color: var(--cko-muted);
	font-size: 14px;
}

body.woocommerce-checkout .entry-content .woocommerce .asaas-cc-form-wrapper .form-row {
	margin-bottom: 14px;
}

body.woocommerce-checkout .entry-content .woocommerce #assas-cc-expiration-label_field label {
	margin-bottom: 2px;
}

body.woocommerce-checkout .entry-content .woocommerce #asaas-cc-installments_field {
	margin-top: 4px;
}

/* Termos, privacidade e botão */
body.woocommerce-checkout .entry-content .woocommerce .form-row.place-order {
	margin: 16px 0 0;
	padding: 0;
}

body.woocommerce-checkout .entry-content .woocommerce .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-terms-and-conditions p {
	margin: 0 0 12px;
	color: var(--cko-muted);
	font-size: 13px;
	line-height: 1.5;
}

body.woocommerce-checkout .entry-content .woocommerce .woocommerce-privacy-policy-link,
body.woocommerce-checkout .entry-content .woocommerce .woocommerce-terms-and-conditions-link {
	color: var(--cko-navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-checkout .entry-content .woocommerce .woocommerce-terms-and-conditions-checkbox-text {
	color: var(--cko-ink);
	font-size: 13px;
	font-weight: 500;
}

body.woocommerce-checkout .entry-content .woocommerce .validate-required .woocommerce-form__input-checkbox,
body.woocommerce-checkout .entry-content .woocommerce .form-row.place-order input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	accent-color: var(--cko-green);
	vertical-align: -2px;
}

body.woocommerce-checkout .entry-content .woocommerce #place_order,
body.woocommerce-checkout .entry-content .woocommerce .form-row.place-order .button {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 14px;
	padding: 0 20px;
	background: var(--cko-teal);
	border: 0;
	border-radius: var(--cko-radius-sm);
	box-shadow: none;
	color: var(--cko-navy);
	font-family: var(--cko-font);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 52px;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

body.woocommerce-checkout .entry-content .woocommerce #place_order:hover {
	background: var(--cko-green);
	color: var(--cko-white);
}

body.woocommerce-checkout .entry-content .woocommerce #place_order:disabled,
body.woocommerce-checkout .entry-content .woocommerce #place_order[disabled] {
	background: #d7dbe3;
	color: #8b93a3;
	cursor: not-allowed;
}

/* ==========================================================================
   Sobrescritas de especificidade — custom-checkout.css (plugin CCLW)

   Aquele arquivo estiliza tudo por ID (#customer_address_details p.form-row,
   #cclw_payment_section #place_order, …). Seletor com ID ganha de qualquer
   número de classes, então estas regras repetem os mesmos IDs para valer.
   Nada aqui cria ou reordena campo: só altura, espaçamento e cor.
   ========================================================================== */

/* Cards: o plugin aplica padding:10px no card inteiro; o respiro vem dos
   wrappers internos (20px), então o card fica sem padding próprio. */
body.woocommerce-checkout .grid-col-checkout #customer_address_details,
body.woocommerce-checkout .grid-col-checkout #cclw_additional_fields,
body.woocommerce-checkout .grid-col-checkout #cclw_order_details_table,
body.woocommerce-checkout .grid-col-checkout #cclw_payment_section {
	padding: 0;
}

/* Linhas: o plugin trava min/max-height em 71px, o que descola os rótulos
   dos campos e ignora o espaçamento vertical. */
body.woocommerce-checkout #customer_address_details p.form-row,
body.woocommerce-checkout #customer_address_details div.form-row,
body.woocommerce-checkout #cclw_additional_fields p.form-row,
body.woocommerce-checkout #cclw_additional_fields div.form-row,
body.woocommerce-checkout #cclw_payment_section .form-row {
	min-height: 0;
	max-height: none;
	padding: 0;
	margin: 0 0 14px;
}

/* Sem a altura fixa de 71px, os pares (floats) desalinham quando um rótulo
   quebra em duas linhas. Flex-wrap alinha as duplas pelo topo e preserva as
   larguras percentuais que o plugin define campo a campo. */
body.woocommerce-checkout #customer_address_details .woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px 20px 6px;
}

body.woocommerce-checkout #customer_address_details .woocommerce-billing-fields__field-wrapper > .form-row {
	float: none;
}

/* "Nome de usuário" e "Criar uma senha" ficam em .woocommerce-account-fields,
   fora do wrapper dos campos de cobrança — sem isso encostam nas bordas. */
body.woocommerce-checkout #customer_address_details .woocommerce-account-fields {
	display: block;
	padding: 0 20px 20px;
}

body.woocommerce-checkout #customer_address_details .woocommerce-account-fields .form-row {
	width: 100%;
	min-height: 0;
	max-height: none;
	padding: 0;
	margin: 0 0 14px;
}

body.woocommerce-checkout #customer_address_details .woocommerce-account-fields input.input-text {
	height: 46px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--cko-field-border);
	border-radius: var(--cko-radius-sm);
	font-size: 15px;
}

/* Campos de texto: o plugin fixa 35px / 13px. */
body.woocommerce-checkout #customer_address_details input.input-text,
body.woocommerce-checkout #cclw_additional_fields input.input-text,
body.woocommerce-checkout #cclw_payment_section input.input-text {
	height: 46px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--cko-field-border);
	border-radius: var(--cko-radius-sm);
	font-family: var(--cko-font);
	font-size: 15px;
	line-height: 44px;
}

body.woocommerce-checkout #customer_address_details textarea,
body.woocommerce-checkout #cclw_additional_fields textarea {
	height: auto !important;
	min-height: 110px !important;
	padding: 12px 14px;
	border: 1px solid var(--cko-field-border);
	border-radius: var(--cko-radius-sm);
	font-family: var(--cko-font);
	font-size: 15px;
	line-height: 1.5;
}

/* select2 (Tipo de Pessoa, Sexo, País, Estado): o woocommerce.css fixa
   `height: 35px !important` em .select2-selection--single, então aqui o
   !important é obrigatório — não é excesso de zelo. */
body.woocommerce-checkout #customer_address_details span.select2-selection,
body.woocommerce-checkout #cclw_payment_section span.select2-selection {
	height: 46px !important;
	min-height: 46px !important;
	padding: 0 !important;
	border: 1px solid var(--cko-field-border) !important;
	border-radius: var(--cko-radius-sm) !important;
	font-size: 15px !important;
}

body.woocommerce-checkout #customer_address_details .select2-selection__rendered,
body.woocommerce-checkout #cclw_payment_section .select2-selection__rendered {
	padding: 0 38px 0 14px !important;
	color: var(--cko-ink) !important;
	font-size: 15px !important;
	line-height: 44px !important;
}

body.woocommerce-checkout #customer_address_details .select2-selection__arrow,
body.woocommerce-checkout #cclw_payment_section .select2-selection__arrow {
	height: 44px !important;
	right: 8px;
}

body.woocommerce-checkout #customer_address_details .select2-container,
body.woocommerce-checkout #cclw_payment_section .select2-container {
	display: block !important;
	width: 100% !important;
}

/* Botão finalizar: o plugin usa #cclw_payment_section #place_order (2 IDs). */
body.woocommerce-checkout #cclw_payment_section #place_order {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 14px;
	padding: 0 20px;
	background: var(--cko-teal);
	border: 0;
	border-radius: var(--cko-radius-sm);
	color: var(--cko-navy);
	font-family: var(--cko-font);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 52px;
	text-transform: uppercase;
}

body.woocommerce-checkout #cclw_payment_section #place_order:hover {
	background: var(--cko-green);
	color: var(--cko-white);
}

/* Cartão: Mês/Ano lado a lado (o plugin só aplica form-row-first/last dentro
   de #customer_address_details, então a coluna de pagamento empilhava tudo). */
body.woocommerce-checkout #cclw_payment_section .asaas-cc-form-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

body.woocommerce-checkout #cclw_payment_section .asaas-cc-form-wrapper > .form-row-wide {
	width: 100%;
}

body.woocommerce-checkout #cclw_payment_section .asaas-cc-form-wrapper > .form-row-first,
body.woocommerce-checkout #cclw_payment_section .asaas-cc-form-wrapper > .form-row-last {
	width: calc(50% - 8px);
	float: none;
}

/* CVV ocupa a linha inteira — a meia largura cortava o campo. */
body.woocommerce-checkout #cclw_payment_section #asaas-cc-security-code_field {
	width: 100%;
	max-width: none;
}

body.woocommerce-checkout #cclw_payment_section #assas-cc-expiration-label_field {
	margin-bottom: 6px;
}

/* Parcelas ocupa a linha inteira (o <select> vinha com largura própria). */
body.woocommerce-checkout #cclw_payment_section #asaas-cc-installments_field {
	width: 100%;
}

body.woocommerce-checkout #cclw_payment_section select#asaas-cc-installments {
	width: 100%;
	max-width: none;
}

/* Formas de pagamento: o plugin estiliza por #cclw_payment_section #payment. */
body.woocommerce-checkout #cclw_payment_section #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.woocommerce-checkout #cclw_payment_section #payment ul.payment_methods li {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: transparent;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Ícones dos títulos

   A marcação traz <i class="far fa-user"> etc. do Font Awesome, que o tema
   antigo carregava. Com o header v2 a fonte não vem, e o glifo vira um
   quadrado dentro de um chip com borda. Trocamos pelo Material Symbols
   Rounded, que o header v2 já carrega.
   -------------------------------------------------------------------------- */

body.woocommerce-checkout .title-col-checkout h2 i {
	display: none !important;
}

body.woocommerce-checkout .title-col-checkout h2::before {
	font-family: 'Material Symbols Rounded';
	font-size: 20px;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	color: var(--cko-teal);
}

body.woocommerce-checkout #customer_address_details .title-col-checkout h2::before {
	content: 'person';
}

body.woocommerce-checkout #cclw_order_details_table .title-col-checkout h2::before {
	content: 'shopping_bag';
}

body.woocommerce-checkout #cclw_payment_section .title-col-checkout h2::before {
	content: 'credit_card';
}

body.woocommerce-checkout #cclw_additional_fields .title-col-checkout h2::before {
	content: 'info';
}

/* ==========================================================================
   Pedido recebido (endpoint order-received — retorno do Pix e do cartão)

   Mesma página /checkout/, então page-checkout.php e este CSS já se aplicam.
   A marcação é a do WooCommerce + gateway Asaas; nada é criado aqui.
   ========================================================================== */

body.woocommerce-order-received .woocommerce-order {
	max-width: 900px;
	margin: 0 auto;
	padding: 48px 24px 64px;
	font-family: var(--cko-font);
	color: var(--cko-ink);
}

body.woocommerce-order-received .woocommerce-thankyou-order-received {
	margin: 0 0 28px;
	font-family: var(--cko-font-display);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--cko-navy);
	text-transform: none;
}

/* Resumo (número, data, e-mail, total, método) */
body.woocommerce-order-received ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 32px;
	padding: 20px;
	border: 1px solid var(--cko-line);
	border-radius: var(--cko-radius);
	background: var(--cko-white);
	box-shadow: var(--cko-shadow);
	list-style: none;
}

/* O clearfix do tema (.order_details::before) vira célula do grid e empurra
   tudo uma coluna para a direita. */
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after {
	content: none !important;
	display: none !important;
}

/* O tema dá float e largura fixa a esses itens, o que quebra o grid. */
body.woocommerce-order-received ul.woocommerce-order-overview li {
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--cko-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: left !important;
	text-transform: uppercase;
	list-style: none !important;
	overflow-wrap: anywhere;
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	color: var(--cko-navy);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/* Seções */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
	margin: 0 0 24px;
	padding: 24px;
	border: 1px solid var(--cko-line);
	border-radius: var(--cko-radius);
	background: var(--cko-white);
	box-shadow: var(--cko-shadow);
}

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
	margin: 0 0 18px;
	font-family: var(--cko-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--cko-navy);
	text-transform: none;
}

/* --- Bloco Pix (gateway Asaas) --- */
body.woocommerce-order-received .asaas-pix-instructions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-order-received .js-pix-qr-code {
	flex: 0 0 auto;
	width: 200px;
	height: 200px;
	padding: 8px;
	border: 1px solid var(--cko-line);
	border-radius: var(--cko-radius-sm);
	background: var(--cko-white);
}

body.woocommerce-order-received .asaas-pix-instructions__list {
	flex: 1 1 260px;
	margin: 0;
	padding-left: 20px;
	list-style: decimal;
}

/* O tema zera o marcador dos <li>; sem isso os passos perdem a numeração. */
body.woocommerce-order-received .asaas-pix-instructions__list li {
	float: none !important;
	width: auto !important;
	list-style: decimal !important;
}

/* O tema derruba o corpo dessas listas para ~8px e caixa alta. */
body.woocommerce-order-received .asaas-pix-instructions__list li,
body.woocommerce-order-received .woocommerce-order-details ul.order_details > li {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	color: var(--cko-ink);
	font-size: 15px !important;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none !important;
}

/* Código copia-e-cola */
body.woocommerce-order-received .woocommerce-order-details__asaas-pix-payload {
	margin: 16px 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--cko-line);
	border-radius: var(--cko-radius-sm);
	background: var(--cko-bg);
	color: var(--cko-muted);
	font-family: var(--cko-font-mono);
	font-size: 12px;
	line-height: 1.5;
	word-break: break-all;
	overflow-wrap: anywhere;
	/* Vinha com nowrap + overflow: scroll, cortando o código numa linha só.
	   E com height fixo de 40px (uma linha): sem height auto, o código quebra
	   em duas linhas mas a segunda vaza para fora da borda da caixa. */
	white-space: normal !important;
	overflow: visible !important;
	display: block !important;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

body.woocommerce-order-received .woocommerce-order-details__asaas-pix-button {
	display: inline-block;
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--cko-radius-sm);
	background: var(--cko-teal);
	color: var(--cko-navy);
	font-family: var(--cko-font);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 48px;
	text-transform: uppercase;
	cursor: pointer;
}

body.woocommerce-order-received .woocommerce-order-details__asaas-pix-button:hover {
	background: var(--cko-green);
	color: var(--cko-white);
}

/* --- Tabela do pedido --- */
body.woocommerce-order-received table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--cko-line);
	background: transparent;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}

body.woocommerce-order-received table.woocommerce-table--order-details thead th {
	color: var(--cko-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.woocommerce-order-received table.woocommerce-table--order-details td:last-child,
body.woocommerce-order-received table.woocommerce-table--order-details th:last-child {
	text-align: right;
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
	color: var(--cko-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

body.woocommerce-order-received table.woocommerce-table--order-details .amount {
	font-family: var(--cko-font-mono);
	font-weight: 600;
	color: var(--cko-navy);
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child .amount {
	font-size: 18px;
}

/* --- Endereço --- */
body.woocommerce-order-received .woocommerce-customer-details address {
	padding: 0;
	border: 0;
	font-size: 15px;
	font-style: normal;
	line-height: 1.6;
	color: var(--cko-ink);
}

@media (max-width: 782px) {
	body.woocommerce-order-received .woocommerce-order {
		padding: 32px 16px 48px;
	}

	body.woocommerce-order-received .woocommerce-order-details,
	body.woocommerce-order-received .woocommerce-customer-details {
		padding: 16px;
	}

	body.woocommerce-order-received .js-pix-qr-code {
		width: 168px;
		height: 168px;
	}

	body.woocommerce-order-received ul.woocommerce-order-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) {
	body.woocommerce-order-received ul.woocommerce-order-overview {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	body.woocommerce-checkout .entry-content .woocommerce .cclw_opc_main.checkout-three-column-layout {
		grid-template-columns: 1fr 1fr;
	}

	body.woocommerce-checkout .entry-content .woocommerce .grid-col-1 {
		grid-column: 1 / -1;
	}
}

@media (max-width: 782px) {
	body.woocommerce-checkout .entry-content .woocommerce .cclw_opc_main.checkout-three-column-layout {
		grid-template-columns: 1fr;
		padding: 24px 16px 48px;
		gap: 16px;
	}

	body.woocommerce-checkout .entry-content .woocommerce .grid-col-1 {
		grid-column: auto;
	}

	body.woocommerce-checkout .entry-content .woocommerce .clincog-checkout-head {
		padding: 32px 16px 8px;
	}

	body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-login-toggle,
	body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-coupon-toggle,
	body.woocommerce-checkout .entry-content .woocommerce .woocommerce-form-login,
	body.woocommerce-checkout .entry-content .woocommerce .checkout_coupon {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* As larguras por campo vêm do tema com !important (seletores de atributo
	   tipo div[class*="address_1"]) e do plugin por ID. Para empilhar tudo é
	   preciso repetir os IDs e manter o !important. */
	body.woocommerce-checkout #customer_address_details .form-row,
	body.woocommerce-checkout #cclw_additional_fields .form-row,
	body.woocommerce-checkout #cclw_payment_section .form-row,
	body.woocommerce-checkout #cclw_payment_section .asaas-cc-form-wrapper > .form-row-first,
	body.woocommerce-checkout #cclw_payment_section .asaas-cc-form-wrapper > .form-row-last {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Respiro menor dentro dos cards no mobile. */
	body.woocommerce-checkout #customer_address_details .woocommerce-billing-fields__field-wrapper {
		padding: 16px 16px 2px;
	}

	body.woocommerce-checkout #customer_address_details .woocommerce-account-fields {
		padding: 0 16px 16px;
	}

	body.woocommerce-checkout .entry-content .woocommerce .woocommerce-billing-fields__field-wrapper,
	body.woocommerce-checkout .entry-content .woocommerce .woocommerce-additional-fields__field-wrapper,
	body.woocommerce-checkout .entry-content .woocommerce #payment.woocommerce-checkout-payment,
	body.woocommerce-checkout .entry-content .woocommerce .cclw_order_review_table {
		padding: 16px;
	}
}

/* A tabela "Seu pedido" tem colunas com largura mínima (thumb + qtd + preço +
   remover). Em telas estreitas ela rola dentro do próprio card em vez de
   empurrar a página para o lado. */
body.woocommerce-checkout .entry-content .woocommerce .cclw_order_review_table {
	overflow-x: auto;
}

body.woocommerce-checkout #cclw_order_details_table .cclw_order_review_table table {
	min-width: 0;
}