/* Checkout: variáveis reais do tema (Yampi/Bubblestore), extraídas ao vivo
   de Referencias/checkout.html (bloco :root injetado pelo provedor com as
   cores configuradas pela loja). */
:root {
  --default-radius: 5px;
  --texts-font-family: Rubik, sans-serif;
  --titles-font-family: Rubik, sans-serif;
  --titles-uppercase: initial;
  --btn-uppercase: initial;
  --texts-font-regular: 400;
  --texts-font-medium: 500;
  --texts-font-bold: 700;
  --titles-font-regular: 400;
  --titles-font-medium: 500;
  --titles-font-bold: 700;
  --btn-primary-bg-color: #40cd28;
  --btn-primary-txt-color: #FFFFFF;
  --btn-secondary-bg-color: #3483fa;
  --btn-secondary-txt-color: #FFFFFF;
  --btn-tertiary-txt-color: #0086ff;
  --stopwatch-txt-color: #333333;
  --stopwatch-timer-color: #FF2626;
  --stopwatch-bg-color: #f8fcff;
  --header-bg-color: #0086ff;
  --header-el-color: #FFFFFF;
  --discount-tag-bg-color: #0086ff;
  --discount-tag-txt-color: #FFFFFF;
  --step-tag-bg-color: #333333;
  --step-tag-txt-color: #FFFFFF;
  --desktop-active-color: #999999;
  --title-color: #666666;
  --description-color: #666666;
  --cart-total-color: #40cd28;
  --progress-bar-bg-color: #36B376;
  --progress-bar-text-color: #FFFFFF;
  --footer-border-color: transparent;
  --footer-bg-color: #0086ff;
  --footer-txt-color: #FFFFFF;
  --footer-mobile-position: left;
  --color_borda-icons: #e1e1e1;
  /* Largura do campo CPF: a referência salva não tinha essa variável
     definida explicitamente (sem valor, o campo cai pra width:auto = 100%)
     — 48% é um valor razoável e comum pra esse padrão de campo (CPF ao
     lado de outro campo da mesma largura), não uma medida capturada. */
  --form-input-group-cpf: 48%;
}

/* =====================================================================
   Bloco de CSS customizado REAL da loja, extraído integralmente de
   Referencias/checkout.html (o <style> com o comentário "/* MEGA CERTO */").
   Esse bloco é a causa real da maioria das diferenças reportadas: sem ele,
   nosso HTML usa as classes certas mas nenhuma delas ganha cor/formato,
   porque a cor/formato vem DESSE bloco, não do app.css genérico da Yampi.
   Removidas apenas regras que dependem de features que não implementamos
   nesta etapa (frete com múltiplas opções, cartão de crédito, order bump).
   ===================================================================== */
* { font-family: 'Hind Madurai', sans-serif !important; }

.container { max-width: 1240px !important; }

header {
  --header-height: 175px !important;
  margin: -5px 0;
  background-color: var(--header-bg-color);
  color: var(--header-el-color);
}
header .holder-logo, header .flex-holder { height: 80px !important; }
header .holder-logo .logo .img-logo { max-width: 190px; height: 35px; width: auto; }
header .item-security { color: var(--header-el-color); }
header .item-security svg { width: 89px !important; fill: var(--header-el-color) !important; }

/* Regras reais extraídas de Referencias/checkout.html — o bar preto do
   cronômetro é um <div> de bloco comum (sem display:inline-block), por
   isso ocupa a largura toda do .container; uma tentativa anterior usava
   inline-block, o que encolhia o bar para uma pílula pequena centralizada
   em vez da barra preta larga da referência real. */
.holder-countdown { padding: 0 !important; margin: 0px auto 20px auto !important; background: transparent !important; }
.holder-countdown p { font-size: 18px !important; margin: 0; }
.holder-countdown .countdown-text { color: #333; }
.holder-countdown .countdown-timer {
  background: #000;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900;
  padding: 7px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  line-height: 2;
  text-align: center;
}
.holder-countdown .countdown-timer span.bold { color: #ffda00 !important; }
.holder-countdown .countdown-text + .countdown-timer { margin: 1em 0px !important; }
.holder-countdown .countdown-timer .--icon { display: inline-block; position: relative; top: 5px; }
.holder-countdown .countdown-timer .--icon, .holder-countdown .countdown-timer .--icon svg { height: 25px; width: 25px; }
.holder-countdown .countdown-timer svg { fill: currentColor; }

body { background: #f1f1f1 !important; }
a { text-decoration: none; color: #0086ff; }
.c-green-2, .green { color: #40cd28 !important; }

/* Identificação/Entrega/Pagamento: texto de descrição real vem por CSS
   (o texto literal no HTML fica invisível de propósito, igual ao real). */
.box-customer .desc, .box-payment .desc, .box-addresses .desc { font-size: 0 !important; }
.box-customer .desc::after {
  content: "Serve para enviarmos o código de rastreio da sua compra e lhe ajudar sempre que precisar";
  color: var(--description-color); line-height: 1.4;
}
.box-addresses .desc::before {
  content: "Informe o endereço que você quer receber sua compra";
  color: var(--description-color); line-height: 1.4;
}
.box-payment .desc::before {
  content: "Escolha uma forma de pagamento e finalize sua compra agora para garantir o desconto e envio imediato!";
  color: var(--description-color); line-height: 1.4;
}
.box-customer .desc::after, .box-addresses .desc::before, .box-payment .desc::before {
  font-size: 18px !important; color: #333 !important;
}

/* Etapa ativa: borda e número azuis (achado real — a cor padrão do
   app.css genérico é cinza; a loja sobrescreve pra azul). */
.holder-cols-checkout .box-checkout.active { cursor: default; border-color: #0086ff; }
.holder-cols-checkout .box-checkout.active .holder-number { background: #0086ff !important; border-color: #0086ff !important; }
.holder-cols-checkout .box-checkout.active .title { color: #000 !important; }
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) {
  background: #fcfffc; border: 1px solid #e6f7dd;
}
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .title { color: #40cd28 !important; }
.holder-cols-checkout .box-checkout:not(.active):not(.disabled):not(.box-resume):not(.box-payment) .holder-number { background-color: #40cd4f; }
.holder-cols-checkout .box-checkout .box-title .holder-number { border-radius: 60%; }

/* Ícone de concluído + botão de editar (lápis) na etapa já preenchida —
   e o texto-resumo (nome/e-mail/CPF, ou endereço) que substitui o
   formulário enquanto a etapa não está ativa. */
.box-checkout .box-title { position: relative; }
.box-checkout .step-check { color: #40cd28; font-size: 18px; margin-left: 8px; }
.box-checkout .step-edit-btn {
  position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer;
  color: #999; font-size: 16px; padding: 6px; line-height: 1; border-radius: 4px;
}
/* O próprio CSS do FontAwesome (.fa-solid) força display:inline-block
   incondicional no ícone, o que vence o [hidden] padrão do navegador —
   mesmo com o atributo "hidden" certo no JS, o check ainda aparecia
   (confirmado ao vivo: display computado ficava inline-block mesmo com
   hidden=true). */
.box-checkout .step-check[hidden],
.box-checkout .step-edit-btn[hidden] { display: none; }
.box-checkout .step-edit-btn:hover { color: #555; background: rgba(0, 0, 0, 0.04); }
.box-checkout .box-summary { padding: 0 30px 20px; }
.box-checkout .step-summary__line { font-size: 15px; color: #333; margin: 4px 0; }

/* Linha CEP+Cidade e Número+Bairro lado a lado. */
.form-row.two-col { display: flex; gap: 16px; }
.form-row.two-col .form-group { flex: 1; min-width: 0; }

/* Check verde dentro do campo quando o valor já é válido. */
.holder-input.has-check { position: relative; }
.holder-input.has-check input { padding-right: 36px; }
.holder-input.has-check .field-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #40cd28; font-size: 15px; pointer-events: none;
}
/* Mesmo bug do FontAwesome de antes: .fa-solid força display incondicional,
   vencendo o [hidden] padrão — precisa da regra explícita de novo aqui. */
.holder-input.has-check .field-check[hidden] { display: none; }

/* "Cidade" é só exibição (preenchida pelo ViaCEP, sem edição manual) —
   mesma altura/aparência de um input comum, mas com fundo levemente
   diferente pra indicar que não é editável. */
.holder-input.display-only {
  display: flex; align-items: center; justify-content: space-between;
  background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 12px; height: 48px;
}
.holder-input.display-only .field-check { position: static; transform: none; }
#city-display-text { font-size: 16px; color: #333; }

.label-optional { color: #999; font-weight: 400; font-size: 13px; }

.cep-success-banner {
  background: #e9f8ec; color: #1e7a34; border-radius: 8px; padding: 14px 16px;
  margin: 4px 0 20px; text-align: center; font-size: 14px; line-height: 1.5;
}

/* Estado "buscando CEP..." reaproveita o .error-block (mesmo lugar da
   mensagem de erro), mas sem o vermelho — não é um erro, é só um status
   temporário enquanto o ViaCEP responde. */
.error-block.is-loading { color: #888 !important; }

/* Fase 2 da Entrega: endereço confirmado + escolha de frete. */
.address-link { margin: 0 0 14px; }
.link-btn { background: none; border: none; padding: 0; color: #0086ff; font-size: 14px; cursor: pointer; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }

.saved-address-card {
  display: flex; align-items: flex-start; gap: 12px; border: 1px solid #ddd; border-radius: 6px;
  padding: 14px 16px; margin-bottom: 24px;
}
.saved-address-card__radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #222; margin-top: 3px; flex-shrink: 0;
  position: relative;
}
.saved-address-card__radio:after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #222;
}
.saved-address-card__info { flex: 1; min-width: 0; }
.saved-address-card__line { margin: 0; font-size: 14px; color: #222; line-height: 1.4; }
.saved-address-card__line--muted { color: #888; font-size: 13px; margin-top: 2px; }
.saved-address-card__action {
  background: none; border: none; color: #999; cursor: pointer; padding: 4px; font-size: 14px; flex-shrink: 0;
}
.saved-address-card__action:hover { color: #555; }

.shipping-title { font-size: 15px; font-weight: 700; color: #222; margin: 0 0 12px; }
.shipping-option {
  display: flex; align-items: center; gap: 12px; border: 1px solid #ddd; border-radius: 6px;
  padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s ease-in-out;
}
.shipping-option:has(input:checked) { border-color: #0086ff; background: #f5faff; }
/* O reset global do app.css remoto (Yampi) tira a aparência nativa de
   input — sem isso o radio virava um retângulo em vez de círculo
   (confirmado ao vivo). -webkit-appearance/appearance:radio restaura o
   controle nativo do navegador. */
.shipping-option input[type="radio"] {
  -webkit-appearance: radio; appearance: radio;
  width: 18px; height: 18px; flex-shrink: 0; accent-color: #0086ff; margin: 0;
}
.shipping-option > i { color: #0086ff; font-size: 18px; flex-shrink: 0; }
.shipping-option__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shipping-option__info strong { font-size: 14.5px; color: #222; }
.shipping-option__eta { font-size: 12.5px; color: #888; margin-top: 2px; }
.shipping-option__price { font-size: 15px; font-weight: 700; color: #40cd28; white-space: nowrap; }

.trust-checklist { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trust-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #333; line-height: 1.5; }
.trust-checklist li i { color: #40cd28; margin-top: 3px; flex-shrink: 0; }

/* Botão "Continuar"/"Comprar Agora": o texto visível vem de um
   pseudo-elemento (o texto literal do HTML fica invisível de propósito,
   igual ao mecanismo real) — junto com a cor/tamanho reais do botão. */
.btn-primary {
  height: 62px;
  font-size: 22px;
  font-weight: 600;
  border-radius: 5px;
  text-align: center;
  padding: 0.5em;
  width: 100%;
  background-color: var(--btn-primary-bg-color);
  color: var(--btn-primary-txt-color);
  border: none;
  cursor: pointer;
  transition: filter .2s ease-in-out;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-send { font-size: 0; display: flex; align-content: center; justify-content: center; align-items: center; }
.btn-send[data-testid="submit-address"]:before,
.btn-send[data-testid="submit-cep-address"]:before {
  content: "Continuar"; font-family: 'Hind Madurai', sans-serif; font-size: 24px;
}
.btn-send[data-testid="buy-now-pix"]:before {
  content: "\f023 \ Comprar Agora"; font-family: 'hind madurai', 'FontAwesome'; font-size: 24px;
}

.form-horizontal .label-control, .form-horizontal input { font-size: 16px !important; }
/* Bug real: o app.css só dá espaçamento entre .form-group quando o form
   tem a classe "form-horizontal" (margin:9px 0) — nosso form-customer não
   tinha essa classe nem eu tinha adicionado um espaçamento próprio, então
   os campos ficavam colados uns nos outros (só a label com margin-bottom
   de 6px separava, sem gap entre o fim de um input e a label seguinte). */
.box-checkout .form-group { margin-bottom: 20px; }
.box-checkout .form-group:last-of-type { margin-bottom: 0; }

/* Pagamento */
.holder-cols-checkout .payments .payment.selected { background: #fbfdff; border-color: #e3f3ff; }
.box-payment .box-content:before {
  content: "\f023\ Pagamento 100% seguro";
  font-size: 16px; display: block; margin-top: 15px;
  font-family: 'hind madurai', 'FontAwesome';
  color: #0c5460 !important; background-color: #d1ecf1;
  text-align: center; padding: 10px 0; border: 1px solid #bee5eb; border-radius: 5px;
}

/* Resumo (cart-resume): regras reais de Referencias/checkout.html. */
.cart-resume { background: #f4f6f8; border-radius: 4px; padding: 20px; }
/* [hidden] tem baixa especificidade (regra da UA) — sem :not(), a regra de
   display:flex abaixo ganha e a linha de desconto/cupom continua visível
   mesmo com o atributo hidden (bug real encontrado nesta rodada). */
.cart-resume .detail[hidden] { display: none !important; }
.cart-resume .detail:not([hidden]) { align-items: baseline; color: #333; display: flex; font-size: 12px; justify-content: space-between; line-height: 1; padding: 9px 0; }
.cart-resume .detail.total { color: var(--cart-total-color); padding-bottom: 6px; padding-top: 12px; }
.cart-resume .detail.total .value { font-size: 22px; text-align: end; }
/* Regra real do bloco custom do merchant (não vem do app.css genérico do
   CDN — por isso não aparecia mesmo tendo removido minha supressão).
   Aviso: nosso backend ainda só processa Pix manual
   (netlify/functions/confirm-payment.js retorna 501 pra cartão/boleto),
   então esse texto aparece na tela mas não reflete uma capacidade real de
   parcelamento no cartão ainda — restaurado só por fidelidade visual. */
.cart-resume .detail.total .value:after {
  content: 'em até 12x no cartão';
  color: #333;
  display: block;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  top: 2px;
}

.holder-container-resume { display: flex; flex-direction: column; margin-top: 20px; }
.item-holder { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.item-holder:last-child { border-bottom: none; }
.holder-container-resume .item-image { flex-shrink: 0; }
.holder-container-resume .item-image img { max-height: 100px !important; width: 100px !important; border-radius: 4px; object-fit: cover; }
.holder-container-resume .item-detail { flex: 1; font-size: 12px; }
.item-detail .item-row { display: flex; justify-content: space-between; align-items: baseline; }
.holder-container-resume .item-name { margin-bottom: 0 !important; color: #333 !important; font-weight: 500; font-size: 14px; }
.item-detail .item-variation { display: block; color: #666; font-weight: 700; font-size: 12px; margin-top: 4px; }
.holder-container-resume .item-price { font-weight: 900; }
.holder-container-resume .item-holder-quantity-price { margin-top: 5px !important; }
.item-quantity-selector-holder { margin-top: 11px; max-width: 180px; position: relative; }
.item-quantity-selector-holder:before {
  content: "Quantidade"; display: block; font-size: 14px; font-weight: 900; text-transform: uppercase; margin: 0 0 6px;
}
.item-quantity-selector-holder .qty-control { display: flex; align-items: center; border: 1px solid #e9e9e9; border-radius: 4px; width: fit-content; }
.item-quantity-selector-holder .qty-control button { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; font-size: 16px; }
.item-quantity-selector-holder .qty-control span { width: 30px; text-align: center; }

/* Cupom: classes reais (icon-promocode vem do app.css real via url()
   relativo, que resolve certo por app.css estar hospedado no CDN da
   Yampi — não precisa de asset próprio). .btn-tertiary já existe no
   app.css real; não precisamos inventar um .btn-promocode. */
.holder-promocode .flex { display: flex; gap: 8px; align-items: center; }
/* O botão real (.btn-tertiary) estava puxando flex-grow do app.css real
   e sobrando pouco espaço pro input (~46-119px, cortando "Código do
   cupom" pela metade). Forçamos o wrapper do input a crescer e o botão a
   não crescer, com !important pra vencer a regra real do botão. */
.holder-promocode .flex > div:first-child { flex: 1 1 0% !important; min-width: 0 !important; width: auto !important; }
.holder-promocode .flex > button.btn-tertiary { flex: none !important; width: auto !important; white-space: nowrap !important; }
.holder-promocode input.input-promocode { width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 4px; padding: 0 12px 0 32px; box-sizing: border-box; }
.holder-promocode .icon-promocode { margin-bottom: -29px; margin-left: 11px; margin-top: 12px; pointer-events: none; position: relative; display: inline-block; }
.holder-promocode .btn.btn-tertiary { white-space: nowrap; background: transparent; border: none; color: #0086ff; padding: 0 8px; cursor: pointer; font-weight: 700; }

/* Blocos de confiança: dentro do card na coluna direita, real. */
/* Valores reais extraídos do bloco custom (eu tinha inventado 56px/13px/
   #666 — bem menores/mais claros que o real 90px/16px/#333, por isso o
   bloco ficava visualmente "encolhido" comparado à referência). */
.container-testimonials { margin-top: 20px; }
.container-testimonials .box-testimonial { border: none !important; padding: 0 !important; margin-bottom: 1em; display: flex; gap: 16px; }
.container-testimonials .box-testimonial__photo { width: 90px; flex-shrink: 0; }
.container-testimonials .box-testimonial__photo img { width: 100%; }
.container-testimonials .box-testimonial__infos { width: 100% !important; }
.container-testimonials .box-testimonial__infos .infos__name { font-size: 18px !important; color: #333 !important; line-height: 24px; margin: 0.4em 0; display: inline-block; font-weight: 700; }
.container-testimonials .box-testimonial__infos .infos__text { font-size: 16px; color: #333 !important; line-height: 24px; }

/* Rodapé */
footer { padding: 2em 0; margin-bottom: 0; }
footer .container { border-top: none !important; text-align: center; }
footer .payment-methods-holder .-title { font-size: 18px !important; font-weight: 800; margin-bottom: 1em; }
.store-info-holder, .contact-holder { color: #9fd2ff; display: flex !important; flex-direction: column; align-items: center; }

.checkout-error { background: #fdecea; color: #a02622; border: 1px solid #f5c6cb; border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; }
.error-block { color: #d9534f; font-size: 12px; margin-top: 4px; min-height: 14px; }
.holder-input.invalid input { border-color: #d9534f !important; }
.box-checkout .box-content[hidden] { display: none; }
/* Pagamento: só existe Pix por enquanto — sem cartão/boleto nem
   desabilitados, um único card explicando o Pix igual à referência.
   O banner "Pagamento 100% seguro" já existe de verdade via
   .box-payment .box-content:before (mais acima neste arquivo). */
.payment-pix-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-top: 16px; }
.payment-pix-card__option {
  display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 16px; font-weight: 600;
  color: #222; cursor: default; border-bottom: 1px solid #eee;
}
.payment-pix-card__option input { position: absolute; opacity: 0; pointer-events: none; }
.payment-pix-card__radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #222; position: relative; flex-shrink: 0;
}
.payment-pix-card__radio:after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #222; }
.payment-pix-card__option i { color: #222; }
.payment-pix-card__body { padding: 16px; }
.payment-pix-card__notice { font-size: 13.5px; color: #444; line-height: 1.5; margin: 0 0 12px; }
.payment-pix-card__value {
  background: #f5f5f5; border-radius: 6px; padding: 12px; text-align: center; font-size: 15px;
  color: #333; margin-bottom: 16px;
}
.payment-pix-card__value strong { color: #222; }
.payment-pix-card__cta {
  width: 100%; height: 56px; background: #2fb01f; color: #fff; border: none; border-radius: 6px;
  font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 10px;
}
.payment-pix-card__cta:hover { background: #279c1a; }
.payment-pix-card__cta:disabled { opacity: .6; cursor: not-allowed; }

/* Layout de 3 colunas: o app.css real já resolve isso sozinho via
   float:left + largura em % nas regras ".holder-cols-checkout .col-checkout"
   (32.61% / 37.891% / 29.49%, com o espaçamento entre colunas vindo do
   padding do col-2, não de gap) e ".holder-cols-checkout .box-checkout"
   (margin-bottom:24px, empilhando box-customer/box-addresses dentro do
   col-1). Uma tentativa anterior de forçar flex+gap aqui quebrava a soma
   das larguras reais (99,99% + 2×24px de gap > 100% do container),
   fazendo a col-3 (RESUMO) quebrar linha para baixo do col-1 em vez de
   ficar ao lado do col-2 — por isso foi removida. O breakpoint mobile
   também já existe no CSS real em max-width:1060px.