@import url('/assets/tools/aurora-ui.css');

/* ── Calculadora de custos da API do WhatsApp ──────────── */

#wa .wa-linhas { display:flex; flex-direction:column; }
#wa .wa-linha {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--ft-line);
}
#wa .wa-linha:first-child { padding-top:4px; }
#wa .wa-linha:last-child { border-bottom:0; padding-bottom:4px; }
#wa .wa-linha-txt { min-width:0; }
#wa .wa-linha-txt b { display:block; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
#wa .wa-linha-txt small { display:block; font-size:12.5px; line-height:1.5; color:var(--stone); margin-top:3px; max-width:52ch; }
#wa .wa-linha-in { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
#wa .wa-linha-in .ft-input { width:130px; text-align:right; }
#wa .wa-preco { font-family:var(--font-mono); font-size:11px; color:var(--stone-light); white-space:nowrap; }
@media (max-width:560px) {
  #wa .wa-linha { flex-direction:column; align-items:stretch; gap:10px; }
  #wa .wa-linha-in { align-items:stretch; }
  #wa .wa-linha-in .ft-input { width:100%; }
  #wa .wa-preco { text-align:right; }
}

/* Régua da janela de 24h */
#wa input[type="range"] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:rgba(37,99,235,.12); outline:none; cursor:pointer; margin:8px 0 2px;
}
#wa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#3B77F0,#2058D8); border:2px solid #fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.45);
}
#wa input[type="range"]::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; border:2px solid #fff;
  background:linear-gradient(180deg,#3B77F0,#2058D8); cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.45);
}

/* Segmentado dentro do painel escuro */
#wa .wa-seg-dk { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); }
#wa .wa-seg-dk button { color:#8FA0B5; }
#wa .wa-seg-dk button:hover { color:#E8EDF4; }
#wa .wa-seg-dk button[aria-pressed="true"] {
  background:rgba(255,255,255,.10); color:#F1F5FA;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
}

/* Comparação entre as duas regras */
#wa .wa-delta {
  margin-top:18px; padding:13px 15px; border-radius:12px; font-size:13px; line-height:1.55;
  background:rgba(255,158,158,.08); border:1px solid rgba(255,158,158,.22); color:#FFC9C9;
}
#wa .wa-delta b { color:#FF9E9E; font-variant-numeric:tabular-nums; }
#wa .wa-delta-ok { background:rgba(94,214,162,.08); border-color:rgba(94,214,162,.22); color:#B6E9D2; }
#wa .wa-delta-ok b { color:#5ED6A2; }

/* Nichos */
#wa .ft-chip[aria-pressed="true"] { font-weight:600; }