/* =====================================================================
   CHECKOUT.CSS — "Brasil + Android antigo + iPhone velho" (Ultra compat)
   Objetivo: NÃO QUEBRAR em nenhum celular comum do Brasil.
   - Fallbacks fortes (sem depender de clamp/grid/blur)
   - Botões grandes / leitura para público mais velho
   - Nada de overflow lateral
   ===================================================================== */

/* ---------- Variáveis ---------- */
:root{
  --gold:#d4a373;
  --gold2:#b08d55;
  --bg:#fdfbf7;
  --text:#1f1f1f;
  --muted:#5b5b5b;
  --ok:#1b5e20;
  --warn:#e65100;

  --card:#fff;
  --line:#ececec;

  --radius:16px;

  /* tamanhos base (fallback) */
  --fs-body:16px;
  --fs-h1:28px;
  --fs-sub:16px;
}

/* clamp só onde houver suporte */
@supports (font-size: clamp(16px, 2vw, 18px)){
  :root{
    --fs-body: clamp(16px, 1.9vw, 18px);
    --fs-h1:   clamp(1.55rem, 3.2vw, 2.0rem);
    --fs-sub:  clamp(1.0rem, 2.2vw, 1.12rem);
  }
}

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden; /* evita quebra lateral */
}

body{
  margin:0;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
  padding: 12px;

  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* iOS: evita “zoom” em inputs pequenos (mantém >=16px) */
input, textarea, select, button{
  font-size: 16px;
  font-family: inherit;
}

/* imagens/video nunca estouram */
img, video{ max-width:100%; height:auto; }

/* links */
a{ color: inherit; }

/* ---------- Layout ---------- */
.page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* suporte a dvh sem quebrar */
@supports (height: 100dvh){
  .page{ min-height: 100dvh; }
}

.card{
  width:100%;
  max-width:620px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  overflow:hidden;
}

/* ---------- Header ---------- */
.header{
  padding: 18px 18px 10px 18px;
  text-align:center;
}

.header h1{
  margin:0;
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-size: var(--fs-h1);
  color: var(--gold);
  line-height: 1.1;
}

.subtitle{
  margin: 6px 0 0 0;
  font-size: var(--fs-sub);
  color:#666;
}

/* ---------- Form ---------- */
form{
  padding: 0 16px 18px 16px;
}

/* ---------- Summary ---------- */
.summary{
  margin-top: 8px;
  background: #fff9f0;
  border: 1px dashed rgba(212,163,115,.7);
  border-radius: 16px;
  padding: 14px;
}

.summaryTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.summaryTitle{
  font-weight: 800;
  color:#444;
  font-size: 0.95rem;
}

.summaryName{
  margin-top: 4px;
  font-weight: 900;
  font-size: 1.12rem;
  color:#222;
}

.summarySeal{ font-size: 1.35rem; }

.warmText{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(212,163,115,.25);
  font-weight: 800;
  color:#222;
}

/* ---------- Stepper ---------- */
.stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px 6px 14px;
  flex-wrap: wrap;
}

.sStep{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color:#777;
  background:#fff;
  border:1px solid var(--line);
  padding: 10px 12px;
  border-radius: 999px;
}

.sStep .dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f7f7f7;
  border:1px solid #e6e6e6;
  color:#555;
  font-weight: 900;
  flex: 0 0 auto;
}

.sStep.active{
  color:#111;
  border-color: rgba(212,163,115,.55);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.sStep.active .dot{
  background:#fff3e0;
  border-color:#ffd59a;
  color: var(--warn);
}

.sStep.done{
  color: var(--ok);
  border-color:#bfe7c5;
  background:#e8f5e9;
}

.sStep.done .dot{
  background:#e8f5e9;
  border-color:#bfe7c5;
  color: var(--ok);
}

.sLine{
  width: 26px;
  height: 2px;
  background:#e6e6e6;
  border-radius: 99px;
}

/* ---------- Blocks ---------- */
.block{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:#fff;
}

.blockTitle{
  font-weight: 900;
  color:#111;
  margin-bottom: 10px;
}

.labelBig{
  display:block;
  font-weight: 900;
  margin-top: 10px;
  margin-bottom: 6px;
  color:#222;
}

/* Inputs */
input, textarea{
  width:100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid #ddd;
  outline:none;
  margin-top: 6px;

  /* evita overflow por palavras gigantes */
  max-width:100%;
}

textarea{
  min-height: 110px;
  resize: vertical; /* melhor p/ mobile */
}

/* foco acessível */
input:focus, textarea:focus{
  border-color: rgba(212,163,115,.85);
  box-shadow: 0 0 0 4px rgba(212,163,115,.18);
}

/* ---------- Tip Box ---------- */
.tipBox{
  margin-top: 12px;
  background:#fff3e0;
  border: 1px solid #ffd59a;
  color: #3a2a12;
  border-radius: 16px;
  padding: 12px;
  font-weight: 900;
}

/* ---------- Buttons (base) ---------- */
button{
  border:0;
  cursor:pointer;
  font-weight: 900;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Botão continuar */
.nextBtn{
  width:100%;
  min-height: 56px;
  border-radius: 18px;
  font-size: 1.05rem;
  color:#fff;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow: 0 16px 28px rgba(212,163,115,.22);
  margin-top: 12px;
}

.nextBtn:active{
  filter: brightness(.92);
  transform: translateY(1px);
}

/* hidden */
.hidden{ display:none !important; }

/* ---------- Money Input ---------- */
.moneyRow{ position: relative; }

.moneyPrefix{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color:#555;
}

.moneyInput{
  width:100%;
  padding: 16px 14px 16px 48px;
  border-radius: 16px;
  border: 2px solid #a5d6a7;
  background:#f1f8e9;
  font-weight: 900;

  /* grande, legível p/ público velho */
  font-size: 26px; /* fallback */
  color: var(--ok);
  outline:none;
}

@supports (font-size: clamp(20px, 3vw, 28px)){
  .moneyInput{ font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
}

.moneyInput:focus{
  box-shadow: 0 0 0 4px rgba(27,94,32,.12);
}

/* ---------- Install Box ---------- */
.installBox{
  margin-top: 14px;
  border-radius: 16px;
  border: 2px solid #111;
  background:#fff;
  padding: 14px;
  position: relative;
  overflow:hidden;
}

.installBox::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 10px;
  background: linear-gradient(90deg,#ff3d00,#ffea00,#00c853);
  opacity:.95;
}

.installHead{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-top: 10px;
}

.installBadge{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background:#fff3e0;
  color: var(--warn);
  font-weight: 900;
  white-space: nowrap;
  flex: 0 0 auto;
}

.installTitle{ font-weight: 900; font-size: 1.02rem; color:#111; }
.installSub{ margin-top: 4px; color:#444; font-weight: 800; font-size: .95rem; }

/* Cards: grid quando dá, flex quando não dá */
.installCards{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.iCard{
  flex: 1 1 160px;
  min-width: 160px;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid #e7e7e7;
  background:#fafafa;
  text-align:center;
}

@supports (display:grid){
  .installCards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .iCard{
    min-width: 0;
  }
}

.iTop{ font-weight: 900; color:#444; }
.iValue{ margin-top: 6px; font-weight: 900; color:#111; font-size: 1.02rem; }
.iHint{ margin-top: 6px; color:#666; font-weight: 800; font-size: .9rem; }

.iCard.on{ background:#e8f5e9; border: 2px solid #66bb6a; }
.iCard.on .iValue{ color: var(--ok); }
.iCard.off{ opacity:.65; }

/* ---------- Progress ---------- */
.progress{
  margin-top: 12px;
  background:#f3f3f3;
  border-radius: 999px;
  overflow:hidden;
  height: 12px;
  border: 1px solid #eee;
}

.progress > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg,#ff3d00,#ffea00,#00c853);
  transition: width .2s ease;
}

.progressLabel{
  margin-top: 10px;
  font-weight: 800;
  color:#444;
  font-size: .92rem;
  opacity:.95;
}

/* ---------- Bless Text ---------- */
.blessText{
  margin-top: 10px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 800;
  color:#222;
  font-size: .95rem;
}

/* ---------- CTA ---------- */
.ctaArea{ margin-top: 12px; }
.ctaText{
  font-weight: 900;
  color:#111;
  margin-bottom: 10px;
}

/* Upgrade button */
.upgradeBtn{
  width:100%;
  min-height: 58px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 1.05rem;
  color:#fff;
  box-shadow: 0 16px 28px rgba(0,0,0,.14);
  margin-bottom: 10px;
  transition: transform .12s ease, filter .12s ease, box-shadow .18s ease;
}

/* cores por alvo (sólidas + gradient p/ ficar bonito) */
.upgradeBtn.cta150{ background: linear-gradient(135deg, #0d47a1, #1565c0); }
.upgradeBtn.cta250{ background: linear-gradient(135deg, #5e35b1, #7e57c2); }
.upgradeBtn.cta400{ background: linear-gradient(135deg, #b08d55, #d4a373); }
.upgradeBtn.cta500{ background: linear-gradient(135deg, #b71c1c, #e53935); }

.upgradeBtn:active{
  filter: brightness(0.86);
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* focus-visible só onde existe; fallback com focus */
.upgradeBtn:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.12), 0 16px 28px rgba(0,0,0,.14);
}
@supports selector(:focus-visible){
  .upgradeBtn:focus{ box-shadow: 0 16px 28px rgba(0,0,0,.14); }
  .upgradeBtn:focus-visible{
    outline:none;
    box-shadow: 0 0 0 4px rgba(0,0,0,.12), 0 16px 28px rgba(0,0,0,.14);
  }
}

/* animação leve — desliga p/ quem prefere reduzir */
@keyframes pulseFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
.pulse{ animation: pulseFloat 0.85s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none !important; }
}

/* ---------- Range ---------- */
.rangeWrap{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background:#fff;
}

.rangeTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color:#444;
  font-size: .95rem;
}

.rangeLabel{ color:#111; }

input[type="range"]{
  width:100%;
  margin-top: 10px;
  -webkit-appearance: none;
  background: transparent;
  height: 34px;
}

/* track + thumb (Android antigo WebKit) */
input[type="range"]::-webkit-slider-runnable-track{
  height: 12px;
  border-radius: 999px;
  background: #e9e9e9;
  border: 1px solid #ddd;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #111;
  margin-top: -7px;
}

/* Firefox */
input[type="range"]::-moz-range-track{
  height: 12px;
  border-radius: 999px;
  background: #e9e9e9;
  border: 1px solid #ddd;
}
input[type="range"]::-moz-range-thumb{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #111;
  border: none;
}

.rangeHint{
  margin-top: 8px;
  color:#666;
  font-weight: 800;
  font-size: .9rem;
}

/* ---------- Small actions ---------- */
.smallActions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.miniBtn{
  flex: 1 1 160px;
  min-width: 160px;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:#fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .2s ease;
}

@supports (display:grid){
  .smallActions{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .miniBtn{
    min-width: 0;
  }
}

.miniBtn:active{ transform: scale(.99); }

/* ---------- Sticky Pay ---------- */
.stickyPay{
  position: sticky;
  bottom: 0;
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #ffffff; /* fallback */
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
}

/* blur só quando suportado */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){
  .stickyPay{
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

.stickyInfo{ text-align:left; min-width: 0; }
.stickyLine1{ font-weight: 900; color:#666; font-size: .92rem; }
.stickyTotal{ font-weight: 900; color:#111; font-size: 1.15rem; margin-top: 2px; }
.stickyLine2{ margin-top: 2px; color:#666; font-weight: 900; font-size: .92rem; }

.payBtn{
  min-height: 58px;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#fff;
  box-shadow: 0 16px 28px rgba(212,163,115,.22);

  /* quebra o texto se precisar */
  white-space: normal;
  text-align:center;
}

.payBtn:active{
  filter: brightness(.92);
  transform: translateY(1px);
}

/* ---------- Footer bits ---------- */
.security{
  margin-top: 10px;
  color:#777;
  font-weight: 800;
  font-size: .9rem;
}

.editLinkWrap{
  margin-top: 12px;
  text-align:center;
}

.linkBtn{
  border:0;
  background:transparent;
  color:#777;
  font-weight: 900;
  cursor:pointer;
  padding: 8px 10px;
}

.backLink{
  display:block;
  margin-top: 14px;
  text-align:center;
  color:#777;
  text-decoration:none;
  font-weight: 900;
  padding: 10px 0;
}

/* =====================================================================
   MOBILE / TELAS PEQUENAS
   ===================================================================== */
@media (max-width: 520px){
  body{ padding: 10px; }
  form{ padding: 0 12px 16px 12px; }

  .installCards{ grid-template-columns: 1fr; }
  .smallActions{ grid-template-columns: 1fr; }

  .stickyPay{
    flex-direction: column;
    align-items: stretch;
  }
  .payBtn{ width:100%; }

  .sLine{ display:none; }

  .block{ padding: 12px; }
  .installBox{ padding: 12px; }

  .pulse{ animation-duration: 0.95s; }
}

/* =====================================================================
   TELAS MUITO PEQUENAS (aparelhos bem antigos)
   ===================================================================== */
@media (max-width: 360px){
  .header h1{ font-size: 24px; }
  .moneyInput{ font-size: 22px; }
  .iCard{ min-width: 0; }
  .miniBtn{ min-width: 0; }
}

/* =====================================================================
   TELAS GRANDES
   ===================================================================== */
@media (min-width: 900px){
  body{ padding: 18px; }
}

/* segurança: nada estoura */
.card, .block, .summary, .installBox, .rangeWrap, .stickyPay{
  max-width:100%;
}