/* ==========================================================================
   AlvejaPro — CHECKOUT (identidade da proposta A "Laboratório")
   Mobile-first: a base é o celular (320–430px); o desktop cresce nos @media.
   Marinho = títulos, passos e identidade. VERDE = só ação e dinheiro
   (botão, preço, total, PIX). Vermelho = só desconto (e erro de campo).
   Celular: campos com 16px (abaixo disso o iPhone dá zoom ao focar),
   alvos de toque >= 44px, texto corrido >= 15px, margem lateral de 16px.
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* o JS troca os estados por [hidden]; nada de display: pode vencer isso */

:root {
  --bg: #F5F7FA;  --bg-2: #ECF1F6;  --surface: #FFFFFF;
  --ink: #0E1A2B; --ink-2: #3B495C; --ink-3: #5B6B7F;
  --ink-4: #7A8899;                 /* placeholder e ícone de campo */
  --line: #D8E0E9; --line-2: #E6EBF1; --tint: #EEF3F9;
  --navy: #0B2545; --navy-2: #12325A; --navy-3: #1C4572; --navy-deep: #071A33;
  --on-navy: #EAF0F7; --on-navy-2: #A9BBD0;
  --o2: #0EA5E9; --o2-ink: #0369A1;
  --buy: #15803D; --buy-2: #116A33; --buy-tint: #EAF5EE; --buy-line: #A7D7B8;
  --save: #B42318; --save-tint: #FDEDEB;
  --warn: #B45309;
  --focus: rgba(28, 69, 114, .18);
  --r: 12px; --r-sm: 8px;
  --gut: 16px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2 { font-weight: 600; color: var(--navy); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--o2-ink); outline-offset: 3px; }
.ck-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ===== HEADER (faixa marinho, igual ao topo da landing) ===== */
.ck-top { background: var(--navy); color: var(--on-navy); padding-top: env(safe-area-inset-top, 0px); }
.ck-top-in {
  display: flex; align-items: center; gap: 4px;
  max-width: 552px; height: 56px; margin: 0 auto; padding: 0 var(--gut) 0 6px;
}
.ck-back {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  color: #fff; text-decoration: none; border-radius: 10px;
}
.ck-back .ck-i { width: 24px; height: 24px; stroke-width: 2; }
.ck-back:active { background: rgba(255,255,255,.08); }
.ck-brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.ck-mark { width: 28px; height: 28px; flex: none; }
.ck-wordmark { font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1; color: #fff; }
.ck-wordmark span { font-weight: 400; color: var(--on-navy-2); }
.ck-safe { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--on-navy-2); white-space: nowrap; }
.ck-safe .ck-i { width: 16px; height: 16px; }

/* ===== PÁGINA ===== */
.ck-wrap { max-width: 552px; margin: 0 auto; padding: 0 var(--gut) calc(48px + env(safe-area-inset-bottom, 0px)); }
.ck-h1 { font-size: 23px; margin: 20px 0 14px; }

/* ===== CARD ===== */
.ck-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 16px; margin-bottom: 14px;
}

/* ===== RESUMO DO PEDIDO ===== */
.buy-title { font-size: 15px; font-weight: 600; color: var(--navy-3); margin-bottom: 12px; }
.buy-row { display: flex; gap: 14px; align-items: center; }
.buy-row img {
  width: 84px; height: 84px; flex: none; object-fit: contain; border-radius: 10px;
  background: radial-gradient(70% 70% at 50% 45%, #fff 0, #E9EEF4 100%);
}
.buy-info { min-width: 0; flex: 1; }
.buy-info strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--navy); letter-spacing: -.01em; }
.buy-meta { font-size: 15px; color: var(--ink-3); margin-top: 2px; }
.buy-prices { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 6px; }
.buy-old { font-size: 15px; color: var(--ink-3); text-decoration: line-through; }
.buy-now { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--buy-2); line-height: 1.15; }

.buy-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 34px; padding: 5px 10px; border-radius: 7px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.chip-save { background: var(--save-tint); color: var(--save); }
.chip-save span { white-space: nowrap; }
.chip-ship { background: var(--tint); color: var(--navy); }
.chip-ship .ck-i { width: 17px; height: 17px; color: var(--navy-3); }

.buy-ship { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.buy-ship li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.buy-ship .ck-i { margin-top: 1px; color: var(--navy-3); }
.buy-ship b { font-weight: 600; color: var(--ink); }

/* ===== PASSOS ===== */
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.step-num {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 600;
  display: grid; place-items: center;
}
.step-title { font-size: 19px; }

/* ===== CAMPOS ===== */
.fld { margin-bottom: 14px; min-width: 0; }
.fld:last-child { margin-bottom: 0; }
.ck-label { display: block; font-size: 15px; font-weight: 500; margin: 0 0 6px 1px; color: var(--ink); }
.ck-label .opt { font-weight: 400; color: var(--ink-3); }
.ck-help { font-size: 15px; line-height: 1.4; color: var(--ink-3); margin: 6px 1px 0; }
.ck-input { position: relative; border-radius: 10px; }
.ck-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; fill: none; stroke: var(--ink-4); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.ck-input input, .ck-input select {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px 12px 46px;
  border: 1px solid #C5D0DC; border-radius: 10px;
  font-family: inherit; font-size: 16px; line-height: 1.4;   /* 16px: sem zoom automático no iPhone */
  background-color: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.ck-input input:not(:placeholder-shown) { border-color: #B3C0CE; }
.ck-input input::placeholder { color: var(--ink-4); opacity: 1; }
.ck-input input:focus, .ck-input select:focus {
  outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 3px var(--focus);
}
/* campos sem ícone (lado a lado) */
.row-2 .ck-input input { padding-left: 14px; }
.ck-input.is-select select { padding: 12px 34px 12px 14px; cursor: pointer; }
.ck-input select:invalid { color: var(--ink-4); }
.ck-input select option { color: var(--ink); }
.ck-chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

/* UF | Cidade e Número | Complemento lado a lado (cabe em 320px) */
.row-2 { display: grid; gap: 0 10px; margin-bottom: 14px; }
.row-2 .fld { margin-bottom: 0; display: flex; flex-direction: column; }
.row-2 .ck-label { flex: 1; }   /* rótulo que quebra em 2 linhas (320px) empurra o campo: os dois campos ficam alinhados */
.row-uf { grid-template-columns: 92px minmax(0, 1fr); }
.row-num { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.ck-card .row-2:last-child { margin-bottom: 0; }

/* ===== Validação inline (marca de ok / erro) ===== */
.ck-input.ok input, .ck-input.ok select { border-color: #9FB3C8; }
.ck-input.bad input, .ck-input.bad select { border-color: var(--save); box-shadow: 0 0 0 3px rgba(180,35,24,.10); }
.ck-input.ok input { padding-right: 38px; }
.ck-input.ok:not(:has(select))::after {
  content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--navy-3); font-weight: 600; font-size: 17px; pointer-events: none;
}
/* aviso suave de celular (classes criadas pelo checkout.js) — mais legível que o padrão injetado */
.ck-input.phone-warn input { border-color: #D97706; }
.fld .phone-hint { margin: 6px 1px 0; font-size: 15px; line-height: 1.4; color: var(--warn); }

/* spinner de busca do CEP */
.ck-input input.loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23D8E0E9' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%231C4572' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ===== PAGAMENTO ===== */
.pay-method {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--buy); background: var(--buy-tint);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px;
}
.pix-badge {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  background: var(--buy); color: #fff; display: grid; place-items: center;
}
.pix-badge .ck-i { width: 24px; height: 24px; stroke-width: 1.9; }
.pay-method-info { flex: 1; min-width: 0; }
.pay-method-info strong { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
.pay-method-info span { display: block; color: var(--ink-2); font-size: 15px; }
.pay-check {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--buy);
  display: grid; place-items: center;
}
.pay-check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.pay-trust { display: grid; gap: 8px; margin-bottom: 16px; }
.pay-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.pay-trust .ck-i { margin-top: 1px; color: var(--navy-3); }

.pay-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line-2); padding-top: 14px; margin-bottom: 14px;
}
.pay-total span { color: var(--ink-2); font-size: 16px; font-weight: 500; }
.pay-total small { display: block; font-size: 15px; font-weight: 400; color: var(--ink-3); }
.pay-total strong { font-size: 27px; font-weight: 600; letter-spacing: -.02em; color: var(--buy-2); white-space: nowrap; }

.ck-pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px; border: none; cursor: pointer;
  background: var(--buy); color: #fff; font-family: inherit; font-weight: 600; font-size: 17px;
  letter-spacing: .04em; border-radius: 10px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(5,46,22,.28), 0 10px 22px -10px rgba(21,128,61,.6);
  transition: background-color .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ck-pay-btn:hover { background: var(--buy-2); }
.ck-pay-btn:active { transform: translateY(1px); }
.ck-pay-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.ck-pay-btn:focus-visible { outline-color: var(--navy); }

.ck-error { color: var(--save); font-size: 15px; font-weight: 500; line-height: 1.4; margin-top: 10px; text-align: center; min-height: 1em; }
.ck-error:empty { margin-top: 0; }
/* erro de validação: o checkout.js leva o MESMO #form-error para logo abaixo do campo (fica na tela) */
.ck-error.is-field { text-align: left; margin: 6px 1px 0; min-height: 0; }
.ck-error.is-field:empty { display: none; }
.row-2 + .ck-error.is-field { margin: -8px 1px 14px; }          /* embaixo da linha UF|Cidade ou Número|Complemento */
.row-2 + .ck-error.is-field:last-child { margin-bottom: 0; }

/* GERAR PIX carregando: girando e com cor cheia (o .65 de opacidade parecia botão travado) */
.ck-pay-btn.is-loading:disabled { opacity: 1; cursor: progress; }
.btn-spin {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-spin { animation-duration: 2s; } }
.pay-secure { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--ink-3); font-size: 15px; margin-top: 10px; }
.pay-secure .ck-i { width: 16px; height: 16px; }
.pay-promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pay-promise li { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--navy); }
.pay-promise .ck-i { color: var(--navy-3); }

/* ===== PIX ===== */
.pix-box, .success-box { text-align: center; }
#state-pix, #state-success { margin-top: 16px; }
.pix-box h2 { font-size: 23px; margin-top: 4px; }
.pix-sub { color: var(--ink-2); font-size: 16px; margin: 8px 0 18px; }
.pix-sub strong { font-weight: 600; color: var(--ink); }
/* valor e kit na tela do PIX: a cliente confere quanto vai pagar antes de abrir o banco */
.pix-valor {
  width: fit-content; max-width: 100%; margin: -6px auto 16px; padding: 8px 16px;
  background: var(--buy-tint); border: 1px solid var(--buy-line); border-radius: 10px;
  font-size: 15px; line-height: 1.35; color: var(--ink-2);
}
.pix-valor strong { font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--buy-2); }
.pix-valor span { display: block; font-size: 15px; color: var(--ink-3); }
.pix-qr { display: flex; justify-content: center; margin-bottom: 16px; }
.pix-qr img { width: 220px; height: 220px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; background: #fff; }

/* passo a passo do pagamento */
.pix-steps {
  counter-reset: pixstep; text-align: left; max-width: 340px; margin: 0 auto 16px; padding: 12px 14px;
  background: var(--tint); border: 1px solid var(--line-2); border-radius: 10px;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.pix-steps li { position: relative; padding-left: 32px; margin: 6px 0; }
.pix-steps li::before {
  counter-increment: pixstep; content: counter(pixstep);
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.pix-steps strong { font-weight: 600; color: var(--ink); }

/* copiar o código é a AÇÃO desta tela -> verde */
.pix-copy-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 10px 16px;
  margin-bottom: 10px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--buy); color: #fff; font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(5,46,22,.28);
  -webkit-tap-highlight-color: transparent;
}
.pix-copy-btn:hover { background: var(--buy-2); }
.pix-copy-btn.copied { background: var(--buy-2) !important; }
/* 16px: o checkout.js dá focus() no código ao copiar; abaixo de 16px o iPhone daria zoom */
.pix-code {
  display: block; width: 100%; border: 1px dashed #B3C0CE; border-radius: 10px; padding: 10px 12px;
  font-size: 16px; line-height: 1.4; resize: none; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg);
  word-break: break-all; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pix-code:hover, .pix-code:focus, .pix-code:active { outline: none; border-color: var(--buy); background: var(--buy-tint); }
.pix-code-hint { text-align: center; font-size: 15px; font-weight: 500; color: var(--ink-3); margin: 6px 0 2px; }
.pix-code-hint.ok { color: var(--buy-2); font-weight: 600; }
.pix-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-weight: 500; font-size: 16px; color: var(--ink); }
.pix-waiting strong { color: var(--navy); font-weight: 600; }
.pix-hint { color: var(--ink-3); font-size: 15px; margin-top: 8px; }
.spinner { width: 18px; height: 18px; flex: none; border: 3px solid var(--line); border-top-color: var(--navy-3); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pix-novo {
  display: block; width: 100%; min-height: 44px; margin: 10px auto 0; padding: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-family: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}

/* ===== SUCESSO ===== */
.success-check { width: 64px; height: 64px; border-radius: 50%; background: var(--buy); display: grid; place-items: center; margin: 4px auto 16px; }
.success-check svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.success-box h2 { font-size: 24px; }
.success-box p { color: var(--ink-2); font-size: 16px; margin: 10px 0 20px; }

/* ===== CELULAR PEQUENO (320–359px) ===== */
@media (max-width: 359px) {
  .ck-safe span { display: none; }           /* fica só o cadeado; o texto não cabe ao lado da marca */
  .ck-card { padding: 16px 14px; }
  .buy-row img { width: 72px; height: 72px; }
  .buy-now { font-size: 22px; }
  .pay-total strong { font-size: 24px; }
  .pix-box h2 { font-size: 21px; }
}

/* ===== TABLET / DESKTOP ===== */
@media (min-width: 600px) {
  .ck-card { padding: 22px 24px; }
  .ck-h1 { font-size: 26px; margin: 28px 0 16px; }
}
@media (min-width: 960px) {
  .ck-top-in, .ck-wrap { max-width: 1000px; }
  .ck-top-in { padding-left: 14px; }
  .ck-wrap { padding: 0 24px 64px; }
  /* formulário à esquerda, resumo fixo à direita */
  #state-form { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 28px; align-items: start; }
  .ck-h1 { grid-column: 1 / -1; }
  #state-form > .buy-card { grid-column: 2; grid-row: 2; position: sticky; top: 24px; }
  #checkout-form { grid-column: 1; grid-row: 2; }
  .ck-card { margin-bottom: 18px; }
  #state-pix, #state-success { max-width: 520px; margin: 32px auto 0; }
}

/* ===== acento rosa da embalagem (13/10/26): "Pro" do logo igual ao da landing (topo azul-marinho -> rosa claro) ===== */
.ck-wordmark span { color: #E8559E; }

/* ===== desconto em VERMELHO vivo (13/10/26): igual ao selo "Economize" da landing ===== */
.chip-save { background: #FEF2F2; color: #D41C1C; }
.chip-save #sum-save { font-weight: 700; }