/* =========================================================================
   checkout-skin.css — BM Checkout v2 redesign (E3) — v1.0.0
   Skin do miolo (override templates) + tokens. Reskin do header estatico do
   3417 fica como TODO (precisa dos seletores do DOM renderizado).
   Escopo: .bmx-checkout (form override) e .bmx-bump (order bump).
   ========================================================================= */

:root{
  /* v0.6.0 — as --bmx-* passam a CONSUMIR o design system (tokens.css).
     Fallback preservado: se tokens.css nao carregar, o valor antigo vale. */
  --bmx-navy:      var(--bm-brand-navy, #001C3C);
  --bmx-gold:      var(--bm-accent-on-fill, #C0A45A);
  --bmx-amber:     var(--bm-accent-amber, #E09B2D);
  --bmx-offer:     var(--bm-cta-offer, #FF6600);
  --bmx-ink:       #0D0D0D;
  --bmx-body-text: var(--bm-text-secondary, #4F5B6B);
  --bmx-white:     #fff;
  --bmx-page:      #ECEAE2; --bmx-co:#FAF8F3; --bmx-line:rgba(0,28,60,0.14);
  --bmx-amber-tint:rgba(224,155,45,0.10); --bmx-radius:var(--bm-radius-md, 8px);
  --bmx-ms:'Montserrat',sans-serif; --bmx-rb:'Roboto',sans-serif;
}

/* ---- Self-host (woff2 a adicionar em assets/fonts/ — fallback seguro) ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700italic.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/roboto-500.woff2') format('woff2');}

/* ---- Container off-white ---- */
.bmx-checkout .bmx-co{background:var(--bmx-co);border:1px solid var(--bmx-line);border-radius:16px;padding:1.25rem;max-width:480px;margin:0 auto;font-family:var(--bmx-rb);}
.bmx-checkout .bmx-sect-label{font-family:var(--bmx-ms);font-weight:600;font-size:13px;color:var(--bmx-navy);margin:18px 0 10px;}
.bmx-checkout .bmx-no-address{font-size:12px;color:var(--bmx-body-text);margin:2px 0 0;}

/* ---- "Seu pedido" (review-order-opc restilizado, estrutura preservada) ---- */
.bmx-review{width:100%;border:0;background:transparent;}
.bmx-review thead{display:none;}
.bmx-review tr.cart_item{display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--bmx-line);padding:10px 0;}
.bmx-review tr.cart_item td{border:0;padding:0;}
.bmx-review td.product-name{display:flex;align-items:flex-start;gap:12px;flex:1;}
.bmx-review .bmx-thumb-lg img{width:80px;height:80px;border-radius:var(--bmx-radius);object-fit:cover;display:block;}
.bmx-review .bmx-prod-desc{
    margin-top:2px;
    font-size:13px;
    line-height:1.35;
    font-weight:400;
    font-family:var(--bmx-ms);
    color:var(--bmx-body-text);
}
.bmx-review .product-details{font-family:var(--bmx-ms);font-weight:600;color:var(--bmx-navy);}
.bmx-review td.product-total{font-family:var(--bmx-ms);font-weight:700;color:var(--bmx-navy);white-space:nowrap;}
.bmx-review .product-quantity .qty{width:54px;text-align:center;}
.bmx-review tfoot tr{display:flex;justify-content:space-between;padding:6px 0;}
.bmx-review tfoot tr.order-total{border-top:1px solid var(--bmx-line);margin-top:6px;padding-top:10px;font-family:var(--bmx-ms);font-weight:700;color:var(--bmx-navy);}
.bmx-review tfoot th{font-family:var(--bmx-ms);font-weight:500;color:var(--bmx-body-text);text-align:left;}

/* ---- Pagamento (abas) ---- */
.bmx-checkout #payment ul.payment_methods{list-style:none;margin:0;padding:0;}
.bmx-checkout #payment li.wc_payment_method{border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);background:var(--bmx-white);padding:12px;margin-bottom:8px;}
.bmx-checkout #payment li.wc_payment_method label{font-family:var(--bmx-ms);font-weight:600;color:var(--bmx-navy);}
.bmx-checkout #payment li.wc_payment_method input[type=radio]:checked + label{color:var(--bmx-navy);}
/* selecionado em ambar */
.bmx-checkout #payment li.wc_payment_method:has(input:checked){border:2px solid var(--bmx-amber);background:var(--bmx-amber-tint);}

/* ---- Order bump (caixa tracejada laranja) ---- */
.bmx-bump{border:1px dashed var(--bmx-offer);border-radius:12px;padding:14px;margin:8px 0;background:rgba(255,102,0,0.035);}
.bmx-bump .bmx-sect-label{font-family:var(--bmx-ms);font-weight:600;font-size:13px;color:var(--bmx-navy);margin:0 0 10px;}
.bmx-bump .bmx-selo{display:inline-block;font-family:var(--bmx-ms);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;background:var(--bmx-offer);color:var(--bmx-navy);padding:2px 9px;border-radius:999px;margin-left:6px;}
.bmx-bump .bump-item{display:block;border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);padding:12px;margin-bottom:8px;cursor:pointer;background:var(--bmx-white);}
.bmx-bump .bump-top{display:flex;gap:12px;align-items:flex-start;}
.bmx-bump .bump-item:has(.bump-cb:checked){border:2px solid var(--bmx-amber);background:var(--bmx-amber-tint);}
.bmx-bump .bump-cb{width:20px;height:20px;flex:none;margin:0;accent-color:var(--bmx-amber);}
.bmx-bump .bump-thumb img{width:64px;height:64px;border-radius:var(--bmx-radius);object-fit:cover;display:block;}
.bmx-bump .bump-body{flex:1;display:flex;flex-direction:column;}
.bmx-bump .bump-title{font-family:var(--bmx-ms);font-weight:600;font-size:15px;color:var(--bmx-navy);}
.bmx-bump .bump-invite{font-family:var(--bmx-ms);font-weight:600;font-size:13px;line-height:1.1;color:var(--bmx-navy);max-width:92px;}
.bmx-bump .bump-line{margin-top:4px;}
.bmx-bump .bump-price{text-align:right;line-height:1.15;flex:0 0 auto;}
.bmx-bump .bump-now{display:block;font-family:var(--bmx-ms);font-weight:700;font-size:19px;color:var(--bmx-navy);}
.bmx-bump .bump-now .amount{color:var(--bmx-navy);}
.bmx-bump .bump-was{font-family:var(--bmx-ms);display:block;font-size:13px;color:var(--bmx-body-text);}
.bmx-bump .bump-was .amount{color:var(--bmx-body-text);text-decoration:line-through;}
.bmx-bump .bump-vd{font-size:13px;color:var(--bmx-navy);text-decoration:underline;cursor:pointer;}
.bmx-bump .bump-desc{font-family:var(--bmx-ms);margin-top:4px;font-size:12.5px;color:var(--bmx-body-text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bmx-bump .bump-desc.open{-webkit-line-clamp:unset;overflow:visible;}
.bmx-bump .bmx-bump-note{font-size:12px;color:var(--bmx-body-text);margin:2px 0 0;}

/* ---- CTA finalizar (pele dourada no botao nativo) ---- */
.bmx-checkout #place_order{width:100%;background:var(--bmx-gold);color:var(--bmx-navy);border:none;border-radius:var(--bmx-radius);padding:15px;font-family:var(--bmx-ms);font-weight:700;font-size:16px;cursor:pointer;}
.bmx-checkout #place_order:hover{filter:brightness(0.96);color:var(--bmx-navy);}

/* =========================================================================
   TODO (BLOQUEADO) — Reskin do header/trust estatico do 3417.
   Os blocos (logo, "Loja Binaural Max", selos, aviso) estao em post_content
   SEM classes (inline-style). Precisa dos seletores do DOM renderizado
   (wrappers Elementor) para vestir como o mockup (faixa navy, logo dourado).
   Preencher apos receber o HTML renderizado do topo da new-checkout.
   ========================================================================= */

/* ===== Header (decisao b) + realce + hide-statics — Missao correcoes 30/06 ===== */
.bmx-co-header{background:var(--bmx-navy);text-align:center;padding:16px 18px 14px;border-radius:16px 16px 0 0;}
.bmx-co-header .bmx-logo{height:38px;width:auto;}
.bmx-co-header .bmx-brand{font-family:var(--bmx-ms);font-weight:700;font-style:italic;color:var(--bmx-gold);letter-spacing:.5px;}
.bmx-co-header .bmx-tag{font-size:10px;color:#cfd6e0;}
.bmx-co-header .bmx-secure{font-size:10px;color:rgba(255,255,255,.65);margin-top:2px;}
.bmx-secnote{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--bmx-body-text);margin:10px 0;}
.bmx-trust{text-align:center;font-size:11px;color:var(--bmx-body-text);margin-top:12px;}

/* realce do item marcado — NAO depende de :has (JS adiciona .on; render server-side tambem) */
.bump-item.on{border:2px solid var(--bmx-amber);background:var(--bmx-amber-tint);}

/* HIDE-STATICS — ocultar header/selos/avisos estaticos do 3417 (duplicados pelo template).
   Preencher {{SELETOR_ESTATICOS}} com o wrapper Elementor do topo (View Source — Prof.).
   Manter COMENTADO ate confirmar; escopar ao maximo. */
/* {{SELETOR_ESTATICOS}}{display:none !important;} */

/* HIDE-STATICS ATIVO (View Source 30/06) — só os 2 containers estáticos do topo (NÃO o wrapper do shortcode) */
.elementor-element-a4e5d90, /* logo do topo */
.elementor-element-4ca2e0a  /* "Loja Binaural Max" + selo google-safe-browsing */
{ display: none !important; }

/* ===================== LOTE 1 — CSS-only (fidelidade ao mockup) · 30/06 =====================
   Escopo: .bmx-checkout / .bmx-co. Sem markup, sem template, sem tocar interno do MP (D6). */

/* #1 — coluna unica ~420px (neutraliza col2-set do WC; esconde shipping vazio) */
.bmx-checkout .bmx-co{max-width:420px;overflow:hidden;}
.bmx-co .col2-set,.bmx-co #customer_details{display:block;width:100%;float:none;}
.bmx-co .col2-set .col-1{width:100%;float:none;max-width:none;padding:0;}
.bmx-co .col2-set .col-2{display:none;}

/* #2 — header flush (compensa o padding 1.25rem do .bmx-co; card ja tem overflow:hidden acima) */
.bmx-co .bmx-co-header{margin:-1.25rem -1.25rem 1.25rem;}

/* #3 — header fino: marca 13px + letter-spacing, tagline italico */
.bmx-co-header .bmx-brand{font-size:13px;letter-spacing:.5px;}
.bmx-co-header .bmx-tag{font-style:italic;}

/* #11 + #12 — secnote em caixa + trust em navy/peso/icone dourado (selo = Lote 2) */
.bmx-co .bmx-secnote{background:rgba(0,28,60,.04);border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);padding:10px 12px;color:var(--bmx-navy);font-weight:500;align-items:flex-start;}
.bmx-co .bmx-secnote i{color:var(--bmx-gold);font-size:18px;flex:none;margin-top:1px;}
.bmx-co .bmx-trust{color:var(--bmx-navy);font-weight:500;}
.bmx-co .bmx-trust i{color:var(--bmx-gold);}

/* #7 — inputs limpos full-width (SO nos dados do cliente — fora do box do MP / D6) */
.bmx-co #customer_details .form-row{margin:0 0 7px;padding:0;width:100%;float:none;}
.bmx-co #customer_details .form-row-first,.bmx-co #customer_details .form-row-last,.bmx-co #customer_details .form-row-wide{width:100%;float:none;}
.bmx-co #customer_details .form-row label{display:block;font-family:var(--bmx-ms);font-weight:500;font-size:12px;color:var(--bmx-navy);margin:0 0 2px;}
.bmx-co #customer_details .input-text,.bmx-co #customer_details textarea,.bmx-co #customer_details select{width:100%;height:40px;padding:0 12px;border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);background:var(--bmx-white);color:var(--bm-text-primary, #001C3C);font-family:var(--bmx-ms);font-weight:500;font-size:14px;}
.bmx-co #customer_details textarea{height:auto;padding:10px 12px;}
.bmx-co #customer_details .input-text:focus,.bmx-co #customer_details textarea:focus,.bmx-co #customer_details select:focus{outline:none;border-color:var(--bmx-amber);box-shadow:none;}

/* ============ LOTE 2 — UX entorno (A/B/C) · 30/06 · escopo .bmx-co ============ */

/* --- A: "Seu pedido" — tfoot em tokens + linha que nao estoura (~420px) --- */
.bmx-co .bmx-review tfoot th,.bmx-co .bmx-review tfoot td{background:none;border:0;padding:6px 0;}
.bmx-co .bmx-review tfoot tr.cart-subtotal th,.bmx-co .bmx-review tfoot tr.cart-subtotal td{color:var(--bmx-body-text);font-weight:400;}
.bmx-co .bmx-review tfoot tr.order-total td,.bmx-co .bmx-review tfoot tr.order-total .woocommerce-Price-amount{color:var(--bmx-navy);font-family:var(--bmx-ms);font-weight:700;font-size:18px;}
.bmx-co .bmx-review td.product-name{flex-wrap:wrap;position:relative;gap:6px;}
.bmx-co .bmx-review td.product-name .product-remove{order:4;position:absolute;top:0;right:0;font-size:12px;}
.bmx-co .bmx-review td.product-name .bmx-thumb-lg{order:1;flex:0 0 auto;}
.bmx-co .bmx-review td.product-name .product-details{order:2;flex:1 1 120px;min-width:0;padding-right:6px;}
.bmx-co .bmx-review td.product-name .product-quantity{order:3;flex:1 1 100%;margin-top:8px;}
.bmx-co .bmx-review td.product-total{flex:0 0 auto;white-space:nowrap;align-self:flex-start;display:flex;align-items:center;gap:8px;}

/* --- B: acordeao — payment_box recolhido por padrao (JS/WC mostra o selecionado; realce ja via :has) --- */
.bmx-co #payment .payment_box{display:none;}
.bmx-co #payment li.wc_payment_method{cursor:pointer;}

/* --- C: avisos (opcao 1) — some duplicata nossa, encolhe os tres, compacta termos (#terms MANTIDO) --- */
.bmx-co .bmx-secnote{display:none;}
.bmx-co .woocommerce-privacy-policy-text{font-size:11px;line-height:1.4;color:var(--bmx-body-text);margin:8px 0;}
.bmx-co .bmx-trust{font-size:11px;margin-top:10px;}
.bmx-co .woocommerce-terms-and-conditions-wrapper{margin:8px 0;}
.bmx-co p.validate-required label.checkbox,.bmx-co .woocommerce-terms-and-conditions-checkbox-text{font-size:12px;line-height:1.4;}

/* #16 — ocultar bloco "100% SEGURO" + frase MP redundante do rodape (3417) */
.elementor-element-e410ea9{display:none !important;}

/* ============ MOBILE (<=480px) - 02/07 - nao regride desktop ============ */
@media (max-width:480px){
  /* item 1 - metodos de pagamento: radio alinhado + label menor */
  .bmx-checkout #payment li.wc_payment_method{display:flex;flex-wrap:wrap;align-items:center;}
  .bmx-checkout #payment li.wc_payment_method > label{font-size:13px;}
  .bmx-checkout #payment li.wc_payment_method .payment_box{flex:1 1 100%;}
  /* item 3 - privacidade = tamanho/cor do descritivo do produto (.bmx-prod-desc) */
  .bmx-co .woocommerce-privacy-policy-text{font-size:13px;color:var(--bmx-body-text);}
  /* item 4 - cadeado (icone do trust) dobro do tamanho */
  .bmx-co .bmx-trust i{font-size:22px;}
  /* item 8 - imagem do order bump dobro do tamanho */
  .bmx-bump .bump-thumb img{width:72px;height:72px;}
  /* item 6 - foto maior + preco na linha abaixo da qty (6A CSS-only) */
  .bmx-co .bmx-review .bmx-thumb-lg img{width:120px;height:120px;}
  .bmx-co .bmx-review tr.cart_item{flex-wrap:wrap;}
  .bmx-co .bmx-review td.product-name{flex:1 1 100%;}
  .bmx-co .bmx-review td.product-total{flex:1 1 100%;margin-top:4px;align-self:auto;justify-content:flex-end;}
}


/* ============ item A - login como bloco com botao (GLOBAL) ============ */
.bmx-login-toggle{max-width:420px;margin:0 auto 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;background:rgba(0,28,60,.04);border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);padding:10px 12px;font-family:var(--bmx-rb);}
.bmx-login-toggle .bmx-login-text{flex:1 1 auto;font-family:var(--bmx-ms);font-weight:500;font-size:13px;color:var(--bmx-navy);}
.bmx-login-toggle .bmx-login-btn{flex:0 0 auto;background:var(--bmx-gold);color:var(--bmx-navy);font-family:var(--bmx-ms);font-weight:700;font-size:13px;text-decoration:none;padding:8px 16px;border-radius:var(--bmx-radius);}

/* ============ item B - cupom abaixo do total (GLOBAL, dentro do card) ============ */
.bmx-co .bmx-coupon{margin:12px 0 0;}
.bmx-co .bmx-coupon .bmx-coupon-invite{font-family:var(--bmx-ms);font-weight:500;font-size:12px;color:var(--bm-text-primary, #001C3C);margin:0 0 6px;}
.bmx-co .bmx-coupon .bmx-coupon-row{display:flex;gap:8px;}
.bmx-co .bmx-coupon .bmx-coupon-input{flex:1 1 auto;height:40px;padding:0 12px;border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);background:var(--bmx-white);color:var(--bm-text-primary, #001C3C);font-family:var(--bmx-ms);font-weight:500;font-size:14px;}
.bmx-co .bmx-coupon .bmx-coupon-input:focus{outline:none;border-color:var(--bmx-amber);}
.bmx-co .bmx-coupon .bmx-coupon-apply{flex:0 0 auto;background:#E7ECF2;color:var(--bmx-navy);font-family:var(--bmx-ms);font-weight:600;font-size:13px;border:1px solid var(--bmx-line);border-radius:var(--bmx-radius);padding:0 16px;cursor:pointer;}
.bmx-co .bmx-coupon .bmx-coupon-msg{margin-top:6px;font-size:12px;}
.bmx-co .bmx-coupon .bmx-coupon-msg:empty{display:none;}

/* ============ Parte 2 card (titulo + remover) ============ */
/* item 1 - titulo 'Detalhes de cobranca' compacto e centralizado */
.bmx-co .woocommerce-billing-fields > h3{font-family:var(--bmx-ms);font-weight:600;font-size:14px;color:var(--bmx-navy);text-align:center;margin:6px 0 8px;}
/* item 3 - x de remover ao lado esquerdo do preco (link preservado) */
.bmx-co .bmx-review td.product-total .product-remove{order:0;flex:0 0 auto;font-size:14px;line-height:1;}
.bmx-co .bmx-review td.product-total .product-remove a.remove{color:var(--bmx-body-text);text-decoration:none;font-weight:400;}

/* ============ bump: checkbox+preco em linha propria abaixo (mockup aprovado) ============ */
.bmx-bump .bump-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bmx-line);}
.bmx-bump .bump-add{display:flex;align-items:center;gap:8px;}
.bmx-bump .bump-vd{display:inline-block;margin-top:2px;}

/* boleto: hover coerente com o CTA (sem !important; nao conflita com o inline) */
.bmx-checkout .bmx-boleto-wrap .bmx-boleto-btn{background:#C0A45A;color:#001C3C;font-size:16px;}
.bmx-boleto-btn:hover{filter:brightness(0.96);}

/* cartao (MP custom): fundo dourado + icone ~1.5px menor (pedido Prof.) */
.bmx-co #payment li.payment_method_woo-mercado-pago-custom{background:var(--bmx-gold);}
.bmx-co #payment li.payment_method_woo-mercado-pago-custom > label{color:var(--bmx-navy);font-size:calc(1em + 1px);}
.bmx-co #payment li.payment_method_woo-mercado-pago-custom label img{height:22px;width:auto;}

/* --- Links dentro do checkout: marinho, hover dourado (v0.6.0) --- */
.bmx-co .woocommerce-privacy-policy-text a,
.bmx-co .woocommerce-terms-and-conditions-wrapper a,
.bmx-co .woocommerce-privacy-policy-link,
.bmx-co label a{
  color:var(--bm-text-primary, #001C3C);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .15s ease;
}
.bmx-co .woocommerce-privacy-policy-text a:hover,
.bmx-co .woocommerce-terms-and-conditions-wrapper a:hover,
.bmx-co .woocommerce-privacy-policy-link:hover,
.bmx-co label a:hover{
  color:var(--bm-accent-brand, #7D6A2E);
}