/* 99Pay — camada de design compartilhada (mesmos tokens da home).
   Carregada depois dos estilos de cada página para padronizar o visual. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --y:#ffdd00;
  --ink:#111111;
  --mut:#6b6b6b;
  --soft:#f5f5f5;
  --line:#e9e9e9;
  --w:#ffffff;

  --primary:#ffdd00;
  --primary-deep:#ffdd00;
  --accent:#ffdd00;
  --primary-light:#f5f5f5;
  --primary-subtle:#f5f5f5;
  --bg:#f5f5f5;
  --card:#ffffff;
  --text:#111111;
  --text-mid:#3a3a3a;
  --text-light:#6b6b6b;
  --border:#e9e9e9;
}

html{background:var(--soft)}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif!important;
  color:var(--ink);
  background:var(--soft);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body *{font-family:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Cabeçalho ---------- */
.header{
  background:var(--w)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}
.header-logo{height:30px!important;width:auto;mix-blend-mode:normal}
.menu-icon{border-radius:12px!important;background:var(--soft)!important;color:var(--ink)!important;border:0!important}
.user-avatar,.avatar{background:var(--y)!important;color:var(--ink)!important}

/* ---------- Tipografia ---------- */
h1,.page-title,.step-title,.section-title,.status-title,.main-title,.uh-title{
  font-size:22px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  color:var(--ink);
  text-wrap:balance;
}
h2{font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.015em}
h3{font-size:15px;line-height:1.35;font-weight:700}
.page-subtitle,.step-desc,.section-subtitle,.status-subtitle,.uh-sub,.subtitle{
  font-size:14px!important;
  line-height:1.5!important;
  color:var(--mut)!important;
  text-wrap:pretty;
}
.section-label,.form-label,label{letter-spacing:.01em}
.section-label{font-size:11px!important;color:var(--mut)!important;letter-spacing:.08em!important}
small,.small{font-size:12px}

/* ---------- Ícones em destaque ---------- */
.header-icon-box,.step-icon,.label-icon-box,.ss-contact-icon,.icon-box,.feature-icon{
  background:var(--y)!important;
  color:var(--ink)!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.header-icon-box svg,.step-icon svg,.icon-box svg,.feature-icon svg{color:var(--ink)!important;stroke:currentColor}

/* ---------- Botões ---------- */
.btn-primary,.btn-submit,.btn-next,.btn-continue,.btn-cta,.cta-btn,.cta-button,.btn-main,.btn-confirm,.btn-pay,.btn-pix,.btn-action{
  border-radius:999px!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  color:var(--ink)!important;
  min-height:52px;
  box-shadow:none!important;
  text-transform:none!important;
}
.btn-primary:hover,.btn-submit:hover,.btn-next:hover,.btn-continue:hover,.btn-cta:hover,.cta-btn:hover,.cta-button:hover,.btn-main:hover,.btn-confirm:hover,.btn-pay:hover{
  transform:none!important;
  box-shadow:0 8px 20px -8px rgba(17,17,17,.35)!important;
}
.btn-primary svg,.btn-submit svg,.btn-next svg,.btn-continue svg,.btn-cta svg,.cta-btn svg{color:var(--ink);stroke:currentColor}
.btn-back,.btn-secondary,.btn-outline{
  border-radius:999px!important;
  font-weight:600!important;
  background:var(--w)!important;
  border:1.5px solid var(--line)!important;
  color:var(--ink)!important;
}
.btn-submit .spinner,.btn-primary .spinner,.btn-next .spinner{border-color:rgba(17,17,17,.2)!important;border-top-color:var(--ink)!important}

/* ---------- Cards ---------- */
.card,.info-card,.form-card,.main-card,.result-card,.summary-card,.offer-card,.status-card,.receipt,.receipt-card,.cotacao-card,.choice-card,.option-card,.plan-card{
  border-radius:20px!important;
  border-color:var(--line)!important;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 12px 32px -20px rgba(17,17,17,.18)!important;
}
.choice-card.selected,.choice-card.active,.option-card.selected,.option-card.active,.plan-card.selected,.plan-card.active{
  border-color:var(--ink)!important;
  background:var(--w)!important;
  box-shadow:0 0 0 1px var(--ink)!important;
}

/* ---------- Campos ---------- */
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=date],select,textarea,.form-input{
  border-radius:14px!important;
  border:1.5px solid var(--line)!important;
  background:var(--w)!important;
  color:var(--ink)!important;
  font-size:15px!important;
  transition:border-color .15s,box-shadow .15s;
}
input[type=text]:focus,input[type=tel]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=date]:focus,select:focus,textarea:focus,.form-input:focus{
  border-color:var(--ink)!important;
  box-shadow:0 0 0 3px rgba(255,221,0,.45)!important;
  outline:none!important;
}
input::placeholder,textarea::placeholder{color:#a3a3a3}
.radio-circle{border-color:#cfcfcf!important}

/* ---------- Avisos ---------- */
.alert,.warning,.notice,.info-box{border-radius:16px!important}

/* ---------- Rodapé (igual à home) ---------- */
.ss-footer{padding:40px 20px 48px!important;background:var(--soft)!important;border-top:1px solid var(--line);text-align:center;font-size:13px!important;color:var(--mut)!important}
.ss-footer-logo{display:flex;justify-content:center;margin-bottom:14px}
.ss-footer-logo img{height:30px;width:auto;mix-blend-mode:multiply}
.ss-footer-company{color:var(--ink)!important;font-weight:600}
.ss-footer-links a{color:var(--ink)!important;font-weight:600}
.ss-footer-badges span{border-radius:999px!important;background:var(--w)!important;border:1px solid var(--line)!important;color:var(--ink)!important;font-size:12px!important;font-weight:600}

/* ---------- Modais (igual à home) ---------- */
.ss-dialog{border:0!important;border-radius:20px!important;color:var(--ink)!important;background:var(--w)!important;box-shadow:0 30px 80px -20px rgba(17,17,17,.4)!important}
.ss-dialog::backdrop{background:rgba(17,17,17,.5)}
.ss-dialog-head{border-bottom:1px solid var(--line)!important}
.ss-dialog-head h2{font-size:17px!important;font-weight:800!important;color:var(--ink)!important}
.ss-dialog-close{border-radius:50%!important;background:var(--soft)!important;color:var(--ink)!important}
.ss-dialog-body{font-size:14px!important;color:var(--mut)!important}
.ss-dialog-body h3,.ss-contact-item h4{color:var(--ink)!important}

@media (min-width:960px){
  h1,.page-title,.step-title,.section-title,.status-title,.main-title,.uh-title{font-size:24px!important}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}