/* Shopex Checkout + Cart Styles */
/* ===== SHARED: Coupon hidden, conversion highlights, payment badges ===== */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wc-block-components-totals-coupon,
.woocommerce-form-coupon-toggle,
.checkout_coupon { display: none !important; }

.spx-conv-highlights{margin-top:var(--s-4,16px);padding-top:var(--s-4,16px);border-top:1px solid var(--c-border,#e9ecef)}
.spx-conv-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.75rem;color:var(--c-text-secondary,#6c757d)}
.spx-conv-icon{width:16px;height:16px;flex-shrink:0;color:var(--c-success,#2b8a3e)}
.spx-conv-badge{display:inline-block;background:var(--c-primary,#0b3d7a);color:#fff;font-size:.5625rem;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:4px;letter-spacing:.03em;vertical-align:middle}
.spx-conv-payments{display:flex;align-items:center;gap:6px;margin-top:var(--s-3,12px);padding-top:var(--s-3,12px);border-top:1px solid var(--c-border,#e9ecef);flex-wrap:wrap}
.spx-pay-badge{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 6px;border:1px solid var(--c-border,#e9ecef);border-radius:4px;background:#fff}
.spx-pay-badge img{height:16px;width:auto;object-fit:contain;display:block}
.spx-lock-icon{width:15px;height:15px;flex-shrink:0;fill:currentColor}

/* ===== CART (WC Blocks) ===== */
.spx-delivery-label {
    font-size:.6875rem!important;font-weight:600!important;letter-spacing:.06em!important;
    text-transform:uppercase!important;color:var(--c-text,#212529)!important;
    padding:21px 0 4px!important;margin:0!important;display:block!important;line-height:1!important;
}
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-wrapper {
    border-top:none!important;padding:0!important;margin:0!important;
}
.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item {
    border-top:none!important;padding:4px 0!important;margin:0!important;
}
.wc-block-cart__submit-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button {
    background:var(--c-cta,#2b8a3e)!important;color:var(--c-cta-text,#fff)!important;border:none!important;
    border-radius:var(--radius,8px)!important;font-size:1rem!important;
    font-weight:700!important;padding:16px 24px!important;width:100%!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    transition:background .2s!important;box-shadow:0 2px 8px rgba(var(--c-cta-rgb),.3)!important;
}
@media(hover:hover){
    .wc-block-cart__submit-button:hover,
    .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
    .woocommerce a.button.checkout-button:hover{background:var(--c-cta-hover,#237032)!important;box-shadow:0 4px 12px rgba(var(--c-cta-rgb),.4)!important}
}
.wc-block-cart__submit-button:active,
.woocommerce .wc-proceed-to-checkout a.checkout-button:active{background:var(--c-cta-hover,#237032)!important}
.wc-block-cart__submit-container{width:100%!important}
.wc-block-cart__submit-button .wc-block-components-button__text {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    gap:6px!important;white-space:nowrap!important;width:100%!important;
}

/* ===== CLASSIC CHECKOUT (.spx-checkout) ===== */
.spx-checkout-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6,24px);align-items:start;
}
/* <768px = mobile + tablet portrait: coluna única. O resumo do pedido
   cai pra baixo dos campos — flow natural: cliente preenche, vê total,
   paga. Em ≥768px a sidebar é sticky para sempre lembrar o cliente do
   que está comprando. */
@media(max-width:899px){.spx-checkout-grid{grid-template-columns:1fr}}

/* Sections */
.spx-checkout-section {
    background:var(--c-bg,#fff);border:1px solid var(--c-border,#e9ecef);
    border-radius:var(--radius,8px);padding:var(--s-5,20px) var(--s-5,20px) var(--s-4,16px);
    margin-bottom:var(--s-4,16px);
}
.spx-checkout-section-title {
    display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:700;
    color:var(--c-text,#212529);margin:0 0 var(--s-4,16px);padding:0;
}
.spx-section-icon{width:20px;height:20px;flex-shrink:0;color:var(--c-primary,#0b3d7a)}

/* Sidebar */
.spx-checkout-sidebar-inner {
    position:sticky;top:20px;background:var(--c-surface,#f8f9fa);
    border:1px solid var(--c-border,#e9ecef);border-radius:var(--radius,8px);
    padding:var(--s-5,20px);
}
.spx-checkout-order-title {
    margin-bottom:var(--s-3,12px)!important;padding-bottom:var(--s-3,12px);
    border-bottom:1px solid var(--c-border,#e9ecef);
}
.spx-order-count{margin-left:auto;font-size:.75rem;font-weight:400;color:var(--c-text-muted,#adb5bd)}

/* Clearfix for floated fields */
.spx-checkout .woocommerce-billing-fields__field-wrapper::after,
.spx-checkout .spx-checkout-fields::after,
.spx-checkout-section::after{content:'';display:table;clear:both}

/* Notices container (login toggle, coupon) */
.spx-ck-notices{margin-bottom:var(--s-3,12px)}
.spx-ck-notices:empty{display:none}

/* Login toggle - discrete inline link */
.spx-ck-notices .woocommerce-form-login-toggle .woocommerce-info {
    background:none!important;border:none!important;box-shadow:none!important;
    padding:0!important;margin:0!important;font-size:.8125rem;
    color:var(--c-text-secondary,#6c757d);text-align:center;
}
.spx-ck-notices .woocommerce-form-login-toggle .woocommerce-info::before{display:none!important}
.spx-ck-notices .woocommerce-form-login-toggle .showlogin {
    color:var(--c-primary,#0b3d7a);font-weight:600;text-decoration:underline;
    text-decoration-thickness:1px;text-underline-offset:2px;
}
.spx-ck-notices .woocommerce-form-login-toggle .showlogin:hover{color:var(--c-primary-hover,#082c5a)}

/* Login form */
.spx-ck-notices .woocommerce-form-login {
    background:var(--c-bg,#fff);border:1px solid var(--c-border,#e9ecef);
    border-radius:var(--radius,8px);padding:var(--s-5,20px);
    margin:var(--s-3,12px) 0;max-width:480px;
}
.spx-ck-notices .woocommerce-form-login p:first-child {
    font-size:.8125rem;color:var(--c-text-secondary,#6c757d);
    margin:0 0 var(--s-3,12px);line-height:1.5;
}
.spx-ck-notices .woocommerce-form-login .form-row{margin-bottom:var(--s-3,12px)}
.spx-ck-notices .woocommerce-form-login .form-row label {
    display:block;font-size:.8125rem;font-weight:600;
    color:var(--c-text,#212529);margin-bottom:4px;
}
.spx-ck-notices .woocommerce-form-login .form-row label .required{color:var(--c-danger,#e03131)}
.spx-ck-notices .woocommerce-form-login input.input-text,
.spx-ck-notices .woocommerce-form-login .woocommerce-Input {
    width:100%;padding:11px 14px;border:1.5px solid var(--c-border,#dee2e6);
    border-radius:10px;font-size:.9375rem;color:var(--c-text,#212529);
    background:var(--c-bg,#fff);transition:border-color .2s,box-shadow .2s;outline:none;
    font-family:inherit;box-sizing:border-box;height:auto;line-height:1.5;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.spx-ck-notices .woocommerce-form-login input.input-text:focus,
.spx-ck-notices .woocommerce-form-login .woocommerce-Input:focus {
    border-color:var(--c-primary,#0b3d7a);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.1),0 1px 2px rgba(0,0,0,.04);
}
.spx-ck-notices .woocommerce-form-login .form-row-first{float:left;width:48.5%}
.spx-ck-notices .woocommerce-form-login .form-row-last{float:right;width:48.5%}
.spx-ck-notices .woocommerce-form-login .clear{clear:both}
@media(max-width:520px){
    .spx-ck-notices .woocommerce-form-login .form-row-first,
    .spx-ck-notices .woocommerce-form-login .form-row-last{width:100%;float:none}
}
.spx-ck-notices .woocommerce-form-login .password-input{position:relative;display:block}
.spx-ck-notices .woocommerce-form-login .show-password-input {
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;padding:4px;
    color:var(--c-text-muted,#adb5bd);
}
.spx-ck-notices .woocommerce-form-login__rememberme {
    display:flex!important;align-items:center;gap:6px;
    font-size:.8125rem;color:var(--c-text-secondary,#6c757d);cursor:pointer;
}
.spx-ck-notices .woocommerce-form-login__rememberme input[type="checkbox"]{accent-color:var(--c-primary,#0b3d7a)}
.spx-ck-notices .woocommerce-form-login__submit {
    background:var(--c-primary,#0b3d7a)!important;color:#fff!important;border:none!important;
    border-radius:var(--radius,8px)!important;font-size:.875rem!important;
    font-weight:700!important;padding:10px 24px!important;cursor:pointer;
    transition:background .2s;font-family:inherit!important;
}
@media(hover:hover){.spx-ck-notices .woocommerce-form-login__submit:hover{background:var(--c-primary-hover,#082c5a)!important}}
.spx-ck-notices .woocommerce-form-login__submit:active{background:var(--c-primary-hover,#082c5a)!important}
.spx-ck-notices .woocommerce-form-login .lost_password {
    margin:var(--s-2,8px) 0 0;
}
.spx-ck-notices .woocommerce-form-login .lost_password a {
    font-size:.75rem;color:var(--c-text-muted,#adb5bd);text-decoration:underline;
    text-decoration-thickness:1px;text-underline-offset:2px;
}
.spx-ck-notices .woocommerce-form-login .lost_password a:hover{color:var(--c-primary,#0b3d7a)}

/* Hide duplicate WC headings */
.spx-checkout .woocommerce-billing-fields h3,
.spx-checkout .woocommerce-shipping-fields h3,
.spx-checkout .woocommerce-additional-fields h3,
.spx-checkout #order_review_heading { display:none }

/* Form fields */
.spx-checkout .form-row{margin-bottom:var(--s-3,12px)}
.spx-checkout .form-row label{display:block;font-size:.8125rem;font-weight:600;color:var(--c-text,#212529);margin-bottom:4px}
.spx-checkout .form-row label .required{color:var(--c-danger,#e03131)}

/* ==========================================================================
   INPUTS — font-size 16px é OBRIGATÓRIO em mobile para impedir o auto-zoom
   do iOS Safari ao focar inputs (qualquer tamanho < 16px dispara zoom in,
   exigindo que o usuário faça pinch-zoom out depois — friction grave que
   custa conversão em qualquer e-commerce mobile). Desktop pode usar fonte
   menor sem prejuízo. Mantemos o salto via media query.
   ========================================================================== */
.spx-checkout .form-row input.input-text,
.spx-checkout .form-row textarea,
.spx-checkout .form-row select,
.spx-checkout .select2-container .select2-selection--single {
    width:100%;
    padding:13px 14px;             /* Mobile: touch target ~48px */
    border:1.5px solid var(--c-border,#dee2e6);
    border-radius:10px;
    font-size:16px;                /* CRÍTICO em mobile — previne iOS zoom */
    color:var(--c-text,#212529);
    background:var(--c-bg,#fff);
    transition:border-color .2s,box-shadow .2s;outline:none;
    font-family:inherit;box-sizing:border-box;height:auto;line-height:1.5;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    -webkit-appearance:none;       /* Remove visual inconsistente de iOS */
    appearance:none;
}

/* Desktop: pode usar fonte menor sem prejudicar UX (não há auto-zoom) */
@media(min-width:768px) {
    .spx-checkout .form-row input.input-text,
    .spx-checkout .form-row textarea,
    .spx-checkout .form-row select,
    .spx-checkout .select2-container .select2-selection--single {
        font-size:.9375rem;        /* 15px */
        padding:11px 14px;
    }
}
.spx-checkout .form-row input.input-text:focus,
.spx-checkout .form-row textarea:focus,
.spx-checkout .form-row select:focus {
    border-color:var(--c-primary,#0b3d7a);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.1),0 1px 2px rgba(0,0,0,.04);
}
.spx-checkout .form-row input.input-text::placeholder{color:var(--c-text-muted,#adb5bd);font-weight:400}
.spx-checkout .select2-container .select2-selection--single{height:48px!important;display:flex!important;align-items:center!important;border-radius:10px!important}
@media(min-width:768px){.spx-checkout .select2-container .select2-selection--single{height:44px!important}}
.spx-checkout .select2-container .select2-selection__rendered{padding:0!important;line-height:1.5!important;color:var(--c-text,#212529)!important}
.spx-checkout .select2-container .select2-selection__arrow{height:48px!important}
@media(min-width:768px){.spx-checkout .select2-container .select2-selection__arrow{height:44px!important}}


/* Select2/SelectWoo compatibility
   WooCommerce e Extra Checkout Fields for Brazil renderizam o <select> original
   com .select2-hidden-accessible e, em seguida, criam o dropdown visual .select2.
   Se o CSS do Select2 for removido ou carregar depois, os dois podem aparecer.
   Esta proteção mantém o select original acessível, mas invisível. */
.spx-checkout select.select2-hidden-accessible,
.spx-checkout .select2-hidden-accessible {
    border:0!important;
    clip:rect(0 0 0 0)!important;
    -webkit-clip-path:inset(50%)!important;
    clip-path:inset(50%)!important;
    height:1px!important;
    margin:-1px!important;
    overflow:hidden!important;
    padding:0!important;
    position:absolute!important;
    width:1px!important;
    white-space:nowrap!important;
}
.spx-checkout .form-row .select2-container,
.spx-checkout .form-row .selectWoo-container { width:100%!important; max-width:100%!important; }

/* Layout base: first/last lado a lado no desktop */
.spx-checkout .form-row-first,.spx-checkout .form-row-last{width:48.5%}
.spx-checkout .form-row-first{float:left}
.spx-checkout .form-row-last{float:right}
.spx-checkout .form-row-wide{clear:both}
/* Mobile (<768px): tudo em coluna única — atende mobile-first e padroniza
   o ponto de quebra com o resto do site (REAME diz tablet=640, desktop=1024,
   mas para checkout 768px equilibra: tablet portrait usa coluna única
   confortável, tablet landscape ganha o layout desktop). */
@media(max-width:767px){
    .spx-checkout .form-row-first,
    .spx-checkout .form-row-last{width:100%;float:none}
}

/* ==========================================================================
   PER-FIELD LAYOUT (desktop ≥768px)

   Estratégia:
   - Email (top, full): definido no CSS injetado no <head> (Seção 10 do PHP)
   - First/Last name: usa form-row-first/last nativo do WC (50/50)
   - CPF | Phone (PF) ou CNPJ | Phone (PJ): pareados via head CSS
   - Razão Social: full quando PJ (head CSS)
   - CEP: full width — fica isolado para dar destaque ao ViaCEP autocomplete
     (o cliente digita CEP, vê os campos abaixo se preencherem sozinhos —
     micro-momento de "magia" que reforça confiança)
   - Address 1 (78%) | Number (22%): regra abaixo
   - Complemento | Bairro: pareados via head CSS
   - City | State: 50/50 nativo do WC já cobre

   Mobile (<768px): tudo full width — coluna única.
   ========================================================================== */

/* Country: escondido (sempre Brasil) */
.spx-checkout #billing_country_field,
.spx-checkout #shipping_country_field{display:none!important}

/* Shipping section escondida (mesma de billing — copy via PHP) */
.spx-checkout .woocommerce-shipping-fields,
.spx-checkout #spx-step-shipping{display:none!important}
.spx-hidden{display:none!important}

/* CEP: full width — dá foco ao autocomplete ViaCEP */
.spx-checkout #billing_postcode_field{clear:both!important;width:100%!important;float:none!important}

/* Address (80%) + Number (20%) lado a lado no desktop */
@media(min-width:768px) {
    .spx-checkout #billing_address_1_field{float:left!important;width:78%!important;clear:both}
    .spx-checkout #billing_number_field{float:right!important;width:20%!important;clear:none!important}
    /* City (50%) | State (50%) */
    .spx-checkout #billing_city_field{float:left!important;width:48.5%!important;clear:both!important}
    .spx-checkout #billing_state_field{float:right!important;width:48.5%!important;clear:none!important}
}

/* Mobile: address fields full width */
@media(max-width:767px){
    .spx-checkout #billing_address_1_field,
    .spx-checkout #billing_number_field,
    .spx-checkout #billing_city_field,
    .spx-checkout #billing_state_field{width:100%!important;float:none!important;clear:both!important}
}

/* Ship to different address */
.spx-checkout .woocommerce-shipping-fields #ship-to-different-address {
    display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:.875rem;font-weight:600;cursor:pointer;
}
.spx-checkout .woocommerce-shipping-fields #ship-to-different-address label{cursor:pointer;margin:0}

/* Order review table */
.spx-checkout .woocommerce-checkout-review-order-table{width:100%;border:none;border-collapse:collapse;font-size:.8125rem;margin-bottom:var(--s-3,12px)}
.spx-checkout .woocommerce-checkout-review-order-table thead{display:none}
.spx-checkout .woocommerce-checkout-review-order-table td,
.spx-checkout .woocommerce-checkout-review-order-table th{border:none;padding:8px 0;vertical-align:top}
.spx-checkout .woocommerce-checkout-review-order-table .cart_item td{padding:10px 0;border-bottom:1px solid var(--c-border,#e9ecef)}
.spx-checkout .woocommerce-checkout-review-order-table .cart_item .product-name{font-weight:500;color:var(--c-text,#212529);padding-right:12px;font-size:.8125rem;line-height:1.4}
.spx-checkout .woocommerce-checkout-review-order-table .product-name .product-quantity{color:var(--c-text-muted,#adb5bd);font-weight:400}
.spx-checkout .woocommerce-checkout-review-order-table .cart_item .product-total{text-align:right;white-space:nowrap;font-weight:600;color:var(--c-text,#212529)}
.spx-checkout .woocommerce-checkout-review-order-table tfoot tr{border-top:1px solid var(--c-border,#e9ecef)}
.spx-checkout .woocommerce-checkout-review-order-table tfoot th{text-align:left;font-weight:500;color:var(--c-text-secondary,#6c757d);font-size:.8125rem}
.spx-checkout .woocommerce-checkout-review-order-table tfoot td{text-align:right;font-weight:600}
.spx-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.spx-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{font-size:1rem;font-weight:700;color:var(--c-text,#212529);padding-top:12px}

/* Shipping in order review */
.spx-checkout .woocommerce-checkout-review-order-table .shipping td,
.spx-checkout .woocommerce-checkout-review-order-table .shipping th{font-size:.8125rem}
.spx-checkout .woocommerce-checkout-review-order-table .shipping ul{list-style:none;padding:0;margin:0}
.spx-checkout .woocommerce-checkout-review-order-table .shipping li{padding:2px 0}

/* Payment methods */
.spx-checkout .woocommerce-checkout-payment{background:transparent!important;border:none!important;padding:0!important;margin-top:var(--s-3,12px)}
.spx-checkout .wc_payment_methods{list-style:none;padding:0!important;margin:0 0 var(--s-3,12px)!important;border:none!important}
.spx-checkout .wc_payment_method {
    background:var(--c-bg,#fff);border:1.5px solid var(--c-border,#e9ecef);
    border-radius:var(--radius-sm,6px);padding:0;margin-bottom:8px!important;
    transition:border-color .2s,background .2s;list-style:none!important;
    display:block;position:relative;cursor:pointer;
}
.spx-checkout .wc_payment_method:has(input:checked){border-color:var(--c-primary,#0b3d7a);background:rgba(var(--c-primary-rgb),.02)}
.spx-checkout .wc_payment_method > input[type="radio"]{
    accent-color:var(--c-primary,#0b3d7a);margin:0;cursor:pointer;
    position:absolute;left:14px;top:22px;transform:translateY(-50%);
    z-index:3;pointer-events:none;
}
.spx-checkout .wc_payment_method > label {
    display:flex!important;align-items:center;gap:8px;font-size:.875rem!important;
    font-weight:600!important;color:var(--c-text,#212529)!important;cursor:pointer;margin:0!important;
    padding:12px 14px 12px 42px;min-width:0;width:100%;min-height:44px;
    position:relative;z-index:2;
}
.spx-checkout .wc_payment_method label img{max-height:22px;width:auto}
.spx-checkout .wc_payment_method .payment_box {
    width:100%;margin:0;padding:10px 14px 12px;background:var(--c-surface,#f8f9fa)!important;
    border-radius:0 0 var(--radius-sm,6px) var(--radius-sm,6px);font-size:.8125rem;color:var(--c-text-secondary,#6c757d);
    border-top:1px solid var(--c-border,#e9ecef);
}
.spx-checkout .wc_payment_method .payment_box::before{display:none!important}
.spx-checkout .woocommerce-terms-and-conditions-wrapper{margin:var(--s-3,12px) 0;font-size:.75rem;color:var(--c-text-secondary,#6c757d)}
.spx-checkout .woocommerce-privacy-policy-text p{font-size:.75rem;color:var(--c-text-muted,#adb5bd);margin:4px 0}

/* Place order button */
.spx-checkout #place_order {
    background:var(--c-cta,#2b8a3e)!important;color:var(--c-cta-text,#fff)!important;border:none!important;
    border-radius:var(--radius,8px)!important;font-size:1rem!important;
    font-weight:700!important;letter-spacing:.02em!important;padding:16px 24px!important;
    width:100%!important;cursor:pointer;transition:background .2s!important;
    box-shadow:0 2px 8px rgba(var(--c-cta-rgb),.3)!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    gap:8px!important;font-family:inherit!important;
    text-transform:uppercase!important;
}
/* Defesa em profundidade — caso algum gateway sobrescreva o label do botão,
   o filho .spx-btn-text também herda o uppercase. */
.spx-checkout #place_order .spx-btn-text {
    text-transform:uppercase;
    letter-spacing:.02em;
}
@media(hover:hover){.spx-checkout #place_order:hover{background:var(--c-cta-hover,#237032)!important;box-shadow:0 4px 12px rgba(var(--c-cta-rgb),.4)!important}}
.spx-checkout #place_order:active{background:var(--c-cta-hover,#237032)!important}

/* Place order - loading state */
.spx-checkout #place_order.spx-processing{
    pointer-events:none!important;opacity:.85!important;position:relative!important;
}
.spx-checkout #place_order.spx-processing .spx-btn-text{opacity:0}
.spx-checkout #place_order.spx-processing .spx-btn-spinner{display:flex!important}
.spx-btn-spinner{
    display:none!important;position:absolute!important;inset:0!important;
    align-items:center!important;justify-content:center!important;gap:8px!important;
    color:#fff!important;font-size:.875rem!important;font-weight:600!important;
}
.spx-btn-spinner svg{width:20px;height:20px;animation:spx-spin .7s linear infinite}
@keyframes spx-spin{to{transform:rotate(360deg)}}

/* Full-page overlay for checkout processing */
.spx-checkout-overlay{
    position:fixed;inset:0;z-index:99999;
    background:rgba(255,255,255,.85);backdrop-filter:blur(2px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;opacity:0;pointer-events:none;transition:opacity .3s;
}
.spx-checkout-overlay.is-active{opacity:1;pointer-events:all}
.spx-checkout-overlay-spinner{
    width:40px;height:40px;border:3px solid var(--c-border,#e9ecef);
    border-top-color:var(--c-primary,#0b3d7a);border-radius:50%;
    animation:spx-spin .7s linear infinite;
}
.spx-checkout-overlay-text{
    font-size:.9375rem;font-weight:600;color:var(--c-text,#212529);
    text-align:center;line-height:1.5;
}
.spx-checkout-overlay-sub{
    font-size:.8125rem;color:var(--c-text-secondary,#6c757d);margin-top:-8px;
}

/* Checkout highlights spacing */
.spx-checkout-highlights{margin-top:var(--s-4,16px)}

/* WC notices */
.spx-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info{border-radius:var(--radius-sm,6px);font-size:.875rem;margin-bottom:var(--s-3,12px)}

/* Loading overlay */
.spx-checkout .blockUI.blockOverlay{background:rgba(255,255,255,.7)!important}

/* ===== CONVERSION-OPTIMIZED CHECKOUT ELEMENTS ===== */

/* Hide main site header/nav/footer on checkout for distraction-free experience */
.woocommerce-checkout .site-header,
.woocommerce-checkout .subheader,
.woocommerce-checkout .mega-nav,
.woocommerce-checkout .site-footer{display:none!important}
.woocommerce-checkout #wpadminbar ~ .site-header{display:none!important}
/* Remove the default page title (we have our own header) */
.woocommerce-checkout .container > h1{display:none!important}

/* Clean checkout header */
.spx-ck-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--s-4,16px) 0;margin-bottom:var(--s-4,16px);
    border-bottom:1px solid var(--c-border,#e9ecef);
}
.spx-ck-logo{font-size:1.25rem;font-weight:800;color:var(--c-text,#212529);text-decoration:none;letter-spacing:-.02em;display:inline-flex;align-items:center}
.spx-ck-logo:hover{color:var(--c-text,#212529)}
.spx-ck-logo img{display:block}
.spx-ck-secure{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--c-success,#2b8a3e)}
.spx-ck-lock{width:16px;height:16px;color:var(--c-success,#2b8a3e)}

/* Progress steps */
.spx-ck-steps {
    display:flex;align-items:center;justify-content:center;
    gap:0;padding:var(--s-3,12px) 0 var(--s-5,20px);
}
.spx-ck-step {
    display:flex;align-items:center;gap:6px;padding:6px 12px;
    border-radius:20px;font-size:.75rem;font-weight:600;
    color:var(--c-text-muted,#adb5bd);transition:all .3s;
}
.spx-ck-step-num {
    width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.6875rem;font-weight:700;
    background:var(--c-border,#e9ecef);color:var(--c-text-muted,#adb5bd);
    transition:all .3s;
}
.spx-ck-step.is-active .spx-ck-step-num{background:var(--c-primary,#0b3d7a);color:#fff}
.spx-ck-step.is-active{color:var(--c-text,#212529)}
.spx-ck-step.is-done .spx-ck-step-num{background:var(--c-success,#2b8a3e);color:#fff}
.spx-ck-step.is-done{color:var(--c-success,#2b8a3e)}
.spx-ck-step-line{width:40px;height:2px;background:var(--c-border,#e9ecef);flex-shrink:0}
.spx-ck-step-line.is-done{background:var(--c-success,#2b8a3e)}
.spx-ck-step-label{display:none}
@media(min-width:520px){.spx-ck-step-label{display:inline}}

/* ==========================================================================
   COLLAPSIBLE ORDER SUMMARY (mobile only)

   Em mobile o resumo do pedido fica acima do botão de pagar (no fluxo da
   página, já que sidebar vira coluna única). Para carrinhos com muitos
   itens isso vira muita rolagem antes do CTA. O toggle permite recolher
   APENAS a lista de itens — totais (subtotal, frete, total) e o botão
   continuam visíveis. Pattern padrão de Amazon, Magalu, Shopee mobile.
   ========================================================================== */
.spx-ck-summary-toggle{
    display:none;
    align-items:center;gap:10px;
    width:100%;padding:14px 16px;
    background:var(--c-bg,#fff);
    border:1px solid var(--c-border,#e9ecef);
    border-radius:var(--radius,8px);
    cursor:pointer;text-align:left;
    font-size:.875rem;font-weight:600;
    color:var(--c-text,#212529);
    font-family:inherit;
    margin-bottom:var(--s-3,12px);
}
.spx-ck-summary-total{margin-left:auto;font-weight:700;color:var(--c-text,#212529)}
.spx-ck-summary-content{display:block;overflow:hidden}

/* Mobile: toggle visível, items recolhidos por padrão */
@media(max-width:899px){
    .spx-ck-summary-toggle{display:flex}
    .spx-ck-summary-content{
        max-height:0;
        transition:max-height .3s ease-out;
    }
    .spx-ck-summary-content.is-open{
        max-height:3000px;  /* alto o suficiente para qualquer carrinho */
    }
}

/* Cart items mini preview */
.spx-ck-items{padding:0 0 var(--s-3,12px)}
.spx-ck-item {
    display:flex;align-items:center;gap:12px;padding:8px 0;
}
.spx-ck-item-thumb{position:relative;flex-shrink:0}
.spx-ck-item-thumb img{width:56px;height:56px;object-fit:contain;border:1px solid var(--c-border,#e9ecef);border-radius:var(--radius-sm,6px);background:#fff}
.spx-ck-item-qty {
    position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;
    padding:0 5px;background:var(--c-text-secondary,#6c757d);color:#fff;
    font-size:.625rem;font-weight:700;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
}
.spx-ck-item-info{flex:1;min-width:0}
.spx-ck-item-name{font-size:.75rem;color:var(--c-text,#212529);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spx-ck-item-price{font-size:.8125rem;font-weight:600;color:var(--c-text,#212529);white-space:nowrap;flex-shrink:0}
.spx-ck-divider{display:none}

/* Hide duplicate cart_item rows from WC review table (keep tfoot totals) */
.spx-checkout .woocommerce-checkout-review-order-table thead,
.spx-checkout .woocommerce-checkout-review-order-table tbody{display:none!important}

/* Trust signals near CTA */
.spx-ck-trust{margin-top:var(--s-3,12px);padding-top:var(--s-3,12px);border-top:1px solid var(--c-border,#e9ecef)}
.spx-ck-trust-item {
    display:flex;align-items:center;gap:6px;padding:3px 0;
    font-size:.6875rem;color:var(--c-text-secondary,#6c757d);
}
.spx-ck-trust-icon{width:14px;height:14px;flex-shrink:0;color:var(--c-success,#2b8a3e)}

/* Payment badges at bottom */
.spx-ck-payments {
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    margin-top:var(--s-3,12px);padding-top:var(--s-3,12px);
    border-top:1px solid var(--c-border,#e9ecef);
}

/* ===== CPF/CEP field validation ===== */
.field-error {
    display: block;
    color: #cc1818;
    font-size: 13px;
    margin-top: 4px;
}
input.loading {
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOw==');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 35px !important;
}

/* ==========================================================================
   FRETE DINÂMICO CORREIOS — estilos movidos do plugin (Fix #6 da auditoria)
   Mantém o plugin focado em lógica e libera estes estilos para cache.

   NOTA: para usar com frete PAGO (Sedex, PAC, etc), remover o display:none
   abaixo do .wc-block-components-totals-item__value — hoje está oculto
   porque a loja só usa frete grátis.
   ========================================================================== */

.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__label {
    font-weight: normal !important;
    color: var(--c-text, #212529) !important;
}
.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__value {
    display: none !important;
}

#fdc-preco-final-card {
    background: var(--c-surface, #f8f9fa);
    border: 1px solid var(--c-border, #e9ecef);
    border-radius: var(--radius, 8px);
    padding: 12px 14px;
    margin-top: 10px;
    font-family: var(--f-sans, inherit);
    font-size: .8125rem;
    line-height: 1.5;
}
#fdc-preco-final-card .fdc-topo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
#fdc-preco-final-card .fdc-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--c-success, #2b8a3e);
}
#fdc-preco-final-card .fdc-titulo {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--c-text, #212529);
    display: block;
    margin-bottom: 2px;
}
#fdc-preco-final-card .fdc-desc {
    color: var(--c-text-secondary, #6c757d);
    font-size: .75rem;
}
#fdc-preco-final-card .fdc-cta-text {
    margin: 0;
    padding: 8px 10px;
    background: var(--c-surface, #f8f9fa);
    border: 1px solid var(--c-border, #e9ecef);
    border-radius: var(--radius-sm, 4px);
    font-size: .75rem;
    color: var(--c-text-secondary, #6c757d);
    text-align: center;
}
#fdc-preco-final-card .fdc-cta-text strong {
    color: var(--c-primary, #0b3d7a);
}

/* ==========================================================================
   TRUSTBAR MINIMALISTA — uma linha sutil abaixo do botão "Finalizar"
   Lock + texto. Sem fundo, sem borda destacada, só
   um separador tracejado em cima. O peso visual é mínimo pra não competir
   com o botão verde.
   ========================================================================== */

.spx-ck-trustbar {
    margin: var(--s-4, 16px) 0 0;
    padding-top: var(--s-4, 16px);
    border-top: 1px dashed var(--c-border, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .75rem;
    color: var(--c-text-secondary, #6c757d);
    line-height: 1.4;
    text-align: center;
}
.spx-ck-trustbar-lock {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--c-text-secondary, #6c757d);
}
.spx-ck-trustbar-sep {
    color: var(--c-text-muted, #adb5bd);
    margin: 0 2px;
}


/* ==========================================================================
   DISCRETE CHECKOUT FOOTER
   Replaces the hidden site-footer on checkout pages.
   ========================================================================== */
.spx-ck-footer {
    margin-top: var(--s-6, 32px);
    padding: var(--s-4, 16px) 0 var(--s-5, 20px);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 6px;
    font-size: .75rem; line-height: 1.5;
    color: var(--c-text-muted, #adb5bd);
}
.spx-ck-footer-divider {
    width: 100%; max-width: 100%; height: 1px;
    background: var(--c-border, #e9ecef);
    margin: 0 0 var(--s-3, 12px);
}
.spx-ck-footer-copy {
    color: var(--c-text-secondary, #6c757d); font-weight: 500;
}
.spx-ck-footer-extra {
    color: var(--c-text-muted, #adb5bd); font-size: .6875rem;
    max-width: 640px;
}
.spx-ck-footer-extra p { margin: 2px 0; }
.spx-ck-footer-extra a { color: var(--c-text-secondary, #6c757d); text-decoration: underline; }
.spx-ck-footer-badges {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .6875rem; color: var(--c-success, #2b8a3e); font-weight: 600;
    margin-top: 4px;
}
.spx-ck-footer-badges svg { width: 12px; height: 12px; }

/* Texto de privacidade do WooCommerce (LGPD): visível, estilizado acima (.woocommerce-privacy-policy-text p). */

/* ==========================================================================
   CHECKOUT MOBILE FIXES — telas muito pequenas (< 380px)
   Evita estouro de campos, botões e iframes de gateway no container.
   (Mesclado do antigo css-patches.css, que ficava órfão sem carregar.)
   ========================================================================== */
@media (max-width: 380px) {
    .spx-checkout-section {
        padding: 14px 12px 12px;
    }

    .spx-checkout .form-row input.input-text,
    .spx-checkout .form-row textarea,
    .spx-checkout .form-row select,
    .spx-checkout .form-row .select2-container {
        font-size: 16px !important; /* Evita zoom automático do iOS no focus */
    }

    .spx-ck-steps .spx-ck-step {
        padding: 4px 6px;
    }
    .spx-ck-step-line {
        width: 20px;
    }

    .spx-ck-summary-toggle {
        padding: 12px 10px;
        font-size: .8125rem;
        gap: 6px;
    }

    /* Botão de finalizar pedido: sem estouro de texto */
    #place_order,
    .spx-checkout .button.alt {
        font-size: .8125rem !important;
        padding: 14px 12px !important;
        white-space: normal !important;
        word-break: break-word;
    }

    /* Trust bar abaixo do botão */
    .spx-ck-trustbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        font-size: .625rem;
    }
}

/* Sem scroll horizontal em nenhuma página de checkout */
.spx-checkout,
.spx-checkout-grid,
.spx-checkout-main,
.spx-checkout-sidebar {
    max-width: 100%;
    overflow-x: hidden;
}

/* Métodos de pagamento: labels sem estouro em telas estreitas */
@media (max-width: 480px) {
    .wc_payment_methods label {
        font-size: .8125rem;
        line-height: 1.4;
    }
    .wc_payment_methods .payment_box {
        padding: 12px;
    }

    /* Tabela de totais do pedido */
    .woocommerce-checkout-review-order-table tfoot td,
    .woocommerce-checkout-review-order-table tfoot th {
        padding: 8px 4px;
        font-size: .8125rem;
    }
}