/* ============================================================
   COTAÇÃO — PROTEBEMBR (VERSÃO REFINADA - GRANULAÇÃO FINA)
   Substitua css/cotacao.css pelo conteúdo inteiro abaixo.
   ============================================================ */

/* ========== ROOT + THEME ========== */
:root{
  --blue1:#0A2B72;
  --blue2:#1955D0;
  --blue3:#3A7BFF;
  --muted:#70798a;
  --gray:#e6e9ef;
  --white:#fff;
  --card-radius:14px;
  --shadow-soft:0 14px 44px rgba(10,30,60,0.06);
  --shadow-quiet:0 6px 18px rgba(6,18,58,0.06);

  --page-bg:#f4f8fb;
  --surface:#fff;
  --text:#071227;

  --gap:20px;
  --step-width: 920px; /* card width desktop mais largo */
  --step-padding: 20px;
  --anim-fast: 180ms;
  --anim-base: 260ms;
  --anim-smooth-cubic: cubic-bezier(.2,.9,.2,1);
}
:root.dark{
  --page-bg:linear-gradient(180deg,#020617,#07102a);
  --surface:rgba(255,255,255,0.03);
  --text:#e6eef7;
  --muted:rgba(230,235,255,0.65);
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  background:var(--page-bg);
  color:var(--text);
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{ margin:0 auto;padding:28px;max-width: 1240px;}
main{flex:1 0 auto}

/* HEADER */
.site-header{background:var(--blue1);padding:12px 0;border-bottom:4px solid rgba(10,30,60,0.05)}
.header-inner{display:flex;align-items:center;justify-content:space-between; gap:16px}
.logo{height:48px}
.theme-toggle{background:transparent;border:1px solid transparent;padding:8px;border-radius:10px;color:inherit;display:inline-flex;gap:8px;align-items:center}

/* CARD / STEPS */
.card{
  width: 100%;
  background:var(--surface);
  border-radius:var(--card-radius);
  padding:var(--step-padding);
  box-shadow:var(--shadow-soft);
  margin-bottom:22px;
  border:1px solid rgba(0,0,0,0.03);
  transition: box-shadow var(--anim-fast) var(--anim-smooth-cubic), transform var(--anim-fast) var(--anim-smooth-cubic);
}
.card:focus-within { box-shadow: 0 20px 50px rgba(8,28,80,0.08); transform: translateY(-2px); }
.step-panel.card { box-sizing: border-box; padding: var(--step-padding) }

/* TITLES */
h1{margin:4px 0 18px;font-size:2rem;font-weight:800}
h2{margin:0 0 14px;font-size:1.35rem;font-weight:800}
h3{margin:0 0 8px}

/* INPUTS / BUTTONS */
label{display:block;margin-top:8px;color:var(--muted);font-size:0.95rem}
input{width:100%;padding:12px;border-radius:10px;margin-top:6px;background:transparent;border:1px solid var(--gray);font-size:1rem}
input::placeholder{color:#bfc9d8}
input:focus{outline:none;border-color:var(--blue3);box-shadow:0 10px 28px rgba(58,123,255,0.10)}
.error{color:#b00020;margin-top:8px;font-weight:600}

.btn{
  padding:9px 14px;border-radius:10px;cursor:pointer;border:1px solid transparent;font-weight:800;font-size:0.95rem;
  transition: transform var(--anim-fast) var(--anim-smooth-cubic), box-shadow var(--anim-fast);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{background:linear-gradient(160deg,var(--blue2),var(--blue3));color:#fff;box-shadow:0 8px 20px rgba(30,90,220,0.12)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(30,90,220,0.16)}
.btn-outline{background:transparent;border:1px solid rgba(7,18,39,0.06);color:var(--blue1)}
.btn-cta{background:linear-gradient(160deg,var(--blue2),var(--blue3));color:#fff}
.btn-line{display:flex;gap:10px;margin-top:14px}
.btn-line-right{justify-content:flex-end}
.btn-bottom-space{margin-top:26px}

/* STEP2: preview + model cards */
.step2-grid{display:flex;gap:var(--gap);flex-direction:column}
.preview-panel{width:320px;min-width:0}
.veic-banner{background:var(--surface);padding:14px;border-radius:12px;box-shadow:var(--shadow-quiet);display:flex;align-items:center;gap:12px}
.veic-logo{max-width:72px;max-height:72px;object-fit:contain;border-radius:8px;display:block}
.veic-basic{font-weight:800;color:var(--blue1);font-size:1rem}
.veic-fipe{font-size:13px;color:var(--muted)}

/* model cards grid */
#model-cards { display:grid;; gap: var(--model-grid-gap); grid-template-columns: repeat(1,1fr); margin: 8px 0 18px; padding:0; box-sizing:border-box; max-height: calc((var(--model-card-h) * 4) + (var(--model-grid-gap) * 3) ); gap: 20px}
@media (min-width:600px){#model-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){#model-cards{grid-template-columns:repeat(3,1fr)}}

.model-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,0.03);background:var(--surface);box-shadow:0 8px 20px rgba(10,30,60,0.04);cursor:pointer;transition:transform var(--anim-fast) var(--anim-smooth-cubic), box-shadow var(--anim-fast); min-width: 300px;}
.model-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 44px rgba(10,30,60,0.06); }
.model-card.selected{outline:3px solid rgba(25,85,208,0.12);box-shadow:0 26px 60px rgba(9,40,120,0.07)}
.model-logo-wrap{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.04)}
.model-logo{max-width:48px;max-height:48px;object-fit:contain}
.model-card-body strong{display:block;font-size:14px;color:#153b64;margin-bottom:6px}
.model-card-meta{font-size:12px;color:#667;margin-bottom:4px}
.model-card-fipe{font-size:13px;color:#2b4460;font-weight:600}
.model-card-inner {display: flex;gap: 20px;}
/* STEP3 layout */
.step3-top{display:grid;grid-template-columns:1fr 440px;gap:28px;align-items:start}
@media (max-width:960px){ .step3-top { grid-template-columns: 1fr; } }

/* resumo + price */
.resumo-card{background:linear-gradient(180deg,#f7fbff,#ffffff);padding:18px;border-radius:12px;flex:1;border:1px solid #e9eef8;min-width:0}
.price-panel{width:320px;flex:0 0 320px}
.price-card{
  background:linear-gradient(160deg,var(--blue2),var(--blue3));
  color:#fff;padding:20px;border-radius:12px;text-align:center;box-shadow:0 18px 46px rgba(6,18,58,0.12);
  transition: transform var(--anim-base) var(--anim-smooth-cubic), opacity var(--anim-base) var(--anim-smooth-cubic);
  will-change: transform, opacity;
}
.price-card.update-anim{ transform: translateY(-6px) scale(1.02); opacity: 0.98; }
.price-value{font-size:1.6rem;font-weight:900;white-space:nowrap;display:inline-block}
.price-adesao{font-size:0.88rem;margin-top:8px;opacity:0.95}

/* Plan tabs */
.plan-select-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.plan-padrao,.plan-upgrade{display:flex;gap:10px;align-items:center;padding:6px 8px}
.plan-padrao .label,.plan-upgrade .label{font-weight:700;color:var(--muted);font-size:0.95rem}
.plan-padrao .btn,.plan-upgrade .btn{padding:7px 12px;border-radius:10px;cursor:pointer;border:1px solid rgba(7,18,39,0.06);background:#fff;color:var(--blue1);font-weight:700;transition:box-shadow var(--anim-fast)}
.plan-padrao .btn.selected,.plan-upgrade .btn.selected{background:linear-gradient(90deg,var(--blue2),var(--blue3));color:#fff;border-color:transparent;box-shadow:0 10px 28px rgba(25,85,208,0.12)}
.diff-span{white-space:nowrap;margin-left:8px;font-weight:700;font-size:0.92rem;color:var(--blue2)}

/* plan details area and rows */
.plan-details-area{border-radius:10px;background:#fff;padding:14px;border:1px solid rgba(10,30,60,0.03);box-shadow:0 8px 22px rgba(0,0,0,0.03)}
.plan-details-grid{display:flex;flex-direction:column;gap:12px}
.plan-detail-row{
  display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#fbfeff,#fff);border-radius:10px;border:1px solid rgba(10,30,60,0.04);padding:14px 16px;min-height:64px;box-shadow:0 8px 20px rgba(8,20,30,0.03);
  transition: transform var(--anim-fast) var(--anim-smooth-cubic), box-shadow var(--anim-fast), background var(--anim-fast);
}
.plan-detail-row .label{color:var(--muted);font-weight:700}
.plan-detail-row .value{font-weight:800;color:#0b1b2b;white-space:nowrap;display:inline-block}

/* DIFF BADGE */
.diff-badge{
  display:inline-block;padding:6px 10px;border-radius:10px;background:linear-gradient(180deg,rgba(25,85,208,0.12),rgba(25,85,208,0.08));color:var(--blue2);font-weight:800;font-size:0.86rem;margin-right:8px;white-space:nowrap;
  transform-origin:center; transition: transform var(--anim-fast) var(--anim-smooth-cubic), opacity var(--anim-fast);
}
.diff-badge.negative{ background: linear-gradient(180deg, rgba(220,60,60,0.10), rgba(220,60,60,0.06)); color:#d43f3f; }
.diff-badge.enter{ transform: translateY(-4px) scale(0.98); opacity:0; }
.diff-badge.show { transform: translateY(0) scale(1); opacity:1; }

/* benefits panel */
#beneficios-padrao-box{flex:1 1 auto;padding:22px;border-radius:14px;box-shadow:0 18px 46px rgba(10,30,60,0.06);min-width:0;background:#fff;border:1px solid rgba(0,0,0,0.04)}
#benefits-padrao-wrap ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(1,1fr);gap:10px}
#benefits-padrao-wrap ul li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);line-height:1.35}

/* confirm layout */
.confirm-row-2cards{display:flex;gap:20px;margin-bottom:20px}
.confirm-card{background:var(--surface);flex:1 1 360px;padding:18px;border-radius:12px;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,0.04);min-width:0}
.confirm-card.full{flex:1 1 100%}

/* responsive tweaks */
@media (max-width:1100px){
  .step3-top{grid-template-columns:1fr}
  .price-panel{width:100%;flex:0 0 auto}
  .step-panel.card { max-width: 100%; }
  .step3{flex-direction: column;}
}

/* small view */
@media (max-width:600px){
  h1{font-size:1.4rem}
  .model-logo{max-width:36px}
  .plan-detail-row{padding:10px;min-height:52px}
  .price-value{font-size:1.1rem}
}

/* helper scrollbars */
#model-cards::-webkit-scrollbar{width:10px}
#model-cards::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#cfe1ff,#9fbdfc);border-radius:10px}
#model-cards::-webkit-scrollbar-track{background:transparent}

/* utility */
.resumo-card,.model-card,.veic-info .veic-title{overflow-wrap:break-word;word-break:break-word}

/* hide legacy comparativo if present */
#plano-diferencas { display: none !important; }

/* footer restore */
.site-footer {
  background: transparent !important;
  padding: 18px 22px !important;
  border-top: 1px solid rgba(10,30,60,0.04) !important;
  color: var(--muted) !important;
  position: static !important;
  box-shadow: none !important;
}
.site-footer .footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.footer-dev { text-align:center;font-size:0.85rem;color:var(--muted);margin-top:8px }

/* safety: collapse duplicate benefit panels if any */
.beneficios-panel + .beneficios-panel { display:none !important; }

#wa-button{ position:fixed; right:22px; bottom:22px; z-index:9999; display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; padding:12px 16px; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 12px 36px rgba(37,211,102,0.22); }



/* ========================
   FIX: botões de ação (Step bottom)
   ======================== */

/* Garante que o painel do step tenha contexto para posicionamento absoluto dos botões */
.step-panel.card {
  position: relative; /* permite posicionamento absoluto dos botões dentro do card */
  padding-bottom: 78px; /* espaço extra para os botões absolutizados (ajuste se necessário) */
}

/* Container dos botões à direita (versão absolutizada dentro do card) */
.btn-line.btn-line-right {
  position: absolute;
  right: var(--step-padding);
  bottom: var(--step-padding);
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 5; /* garante acima do conteúdo */
  margin: 0; /* limpar margens herdadas */
}

/* Força tamanho mínimo e aparência consistente dos botões de ação */
.btn {
  min-width: 96px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(10,30,80,0.04);
}

/* Botão principal com cor e leve destaque */
.btn-primary {
  min-width: 110px;
  height: 44px;
  padding: 0 18px;
}

/* Pequeno ajuste no outline (Voltar) */
.btn-outline {
  background: #fff;
  border: 1px solid rgba(10,30,60,0.06);
  color: var(--blue1);
}

/* Em telas pequenas colocamos os botões em fluxo (empilhados) */
@media (max-width: 960px) {
  .step-panel.card { padding-bottom: 26px; position: static; }
  .btn-line.btn-line-right {
    position: static;
    margin-top: 14px;
    justify-content: flex-start;
  }
  .btn { min-width: 0; height: 40px; padding: 8px 12px; }
  .btn-primary { height: 40px; min-width: 96px; }
}

/* Correção de acessibilidade/foco */
.btn:focus {
  outline: 3px solid rgba(25,85,208,0.14);
  outline-offset: 2px;
}

/* ---------- plan-detail-row (ajuste visual solicitado) ---------- */
.plan-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,#fbfeff,#fff);
  border-radius:12px;
  border:1px solid rgba(10,30,60,0.04);
  padding:20px 20px;        /* aumentei o padding */
  min-height:90px;         /* maior que antes */
  box-shadow:0 10px 30px rgba(8,20,30,0.04);
  transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms;
}

/* Label / Value */
.plan-detail-row .label{ color:var(--muted); font-weight:800; font-size:0.98rem; }
.plan-detail-row .value{ font-weight:900; color:#071227; font-size:1.05rem; white-space:nowrap; display:flex; align-items:center; gap:12px; }

/* classe específica para o valor base (fixo, em preto) */
.plan-detail-row .base-value { font-weight:900; color:#071227; font-size:1.05rem; }

/* badge de diff (já existente, levemente ajustada) */
.diff-badge {
  display:inline-block;
  background: linear-gradient(90deg,var(--blue2),var(--blue3));
  color: #fff;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  font-size:0.85rem;
  box-shadow:0 8px 20px rgba(25,85,208,0.12);
}


.diff-badge.negative{ background: linear-gradient(90deg,#d43f3f,#e05a5a); }


/* Confirm summary grid */
#confirm-summary .confirm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
}
#confirm-summary .confirm-card{
  background:var(--surface);
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 12px 30px rgba(6,18,60,0.04);
}
.confirm-line{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.confirm-strong{ font-weight:900; color: #071227; }
.veh-row{ display:flex; gap:12px; align-items:center; }
.veh-info .veh-title{ font-weight:900; color:var(--blue1); }
.confirm-benefits{ list-style:none; padding:0; margin:8px 0 0 0; column-count:1; gap:6px; color:var(--muted); }
.confirm-benefits.small{ font-size:0.95rem; color:var(--muted); }
@media (max-width:1024px){
  #confirm-summary .confirm-grid{ grid-template-columns: 1fr; }
  #confirm-summary .confirm-card{ padding:14px; }
  .pd-item {display:flex; justify-content:space-between;}
}

/* ---------- Ajuste Plan Detail Rows (Step 3) ---------- */
#plan-details-grid { display:flex; flex-direction:column; gap:16px; }

/* Aumenta tamanho e espaço interno dos cards */
.plan-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  background:linear-gradient(180deg,#fbfeff,#fff);
  border-radius:14px;
  border:1px solid rgba(10,30,60,0.04);
  padding:22px 26px;       /* mais espaço */
  min-height:100px;        /* evita corte vertical */
  box-shadow:0 12px 32px rgba(8,20,30,0.04);
}

/* Label (esquerda) */
.plan-detail-row .label{
  color:var(--muted);
  font-weight:800;
  font-size:1.02rem;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Wrapper do lado direito (badge + valor) */
.plan-detail-row .value{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  min-width:160px;        /* garante espaço para o valor preto */
}

/* Valor base (fixo, em preto) */
.plan-detail-row .base-value{
  font-weight:900;
  color:#071227;
  font-size:1.05rem;
  white-space:nowrap;
}

/* Badge: evita que empurre o texto (mantém dimensão fixa e não quebra linha) */
.diff-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:0.88rem;
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(25,85,208,0.12);
  transform-origin:center;
}

.plan-detail-row{
  padding:22px 26px;
  min-height:100px;
  border-radius:14px;
  gap:16px;
  
}
  .plan-detail-row .label{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-detail-row .value{ min-width:160px; display:flex; gap:12px; white-space:nowrap; }
.plan-detail-row .base-value{ font-weight:900; color:#071227; }
.diff-badge{ white-space:nowrap; border-radius:999px; padding:6px 12px; }

  
/* visual tweaks responsivos */
@media (max-width:900px){
  .plan-detail-row{ padding:18px 16px; min-height:84px; }
  .plan-detail-row .value{ display:block; min-width:120px; }
  .plan-detail-row .label{ font-size:0.98rem; }
  .step3-top-banner {flex-direction: column;}
}



.plan-detail-row .label{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-detail-row .value{ min-width:160px; display:flex; gap:12px; justify-content:flex-end; white-space:nowrap; }
.plan-detail-row .base-value{ font-weight:900; color:#071227; }
.diff-badge{ white-space:nowrap; border-radius:999px; padding:6px 12px; }