/**
 * MobiEV Calc — estilos próprios do plugin.
 *
 * O layout, o espaçamento e a tipografia vêm do Tailwind do tema (§10). Aqui
 * ficam só as coisas que utilitário não resolve bem:
 *
 *   1. cores que dependem do RESULTADO (economia, empate, custo maior) — usar
 *      classe dinâmica do Tailwind seria arriscar CSS ausente (§10.4/§45);
 *   2. o slider, que precisa de pseudo-elementos por navegador;
 *   3. estados de etapa, valor rápido e combustível selecionado;
 *   4. o degradê do painel de resultado.
 *
 * Todas as regras são escopadas em `.mobievcalc` e usam o prefixo `mobievcalc__`
 * (§10.5) — nada vaza para o tema. Os tokens repetem os do tema com fallback,
 * para que o componente continue apresentável fora do Sage.
 */

.mobievcalc {
  --mvc-blue: #0066b3;
  --mvc-blue-dark: #004a87;
  --mvc-blue-light: #3fa9f5;
  --mvc-green: #a4d233;
  --mvc-green-dark: #7aa61f;
  --mvc-ink: #0a1a2b;
  --mvc-muted: #5c6b80;
  --mvc-border: #e2e8f0;
  --mvc-amber: #d97706;
  --mvc-slate: #475569;

  /* Cor de acento do resultado — trocada pelo status. */
  --mvc-accent: var(--mvc-green);
  --mvc-hero-from: #06253f;
  --mvc-hero-to: var(--mvc-blue-dark);

  /* Mesma sinalização do acento, mas para texto sobre fundo CLARO: o verde do
     painel escuro não tem contraste suficiente na barra de ação branca. */
  --mvc-accent-strong: #4d7c0f;
}

.mobievcalc[data-status='higher_electric_cost'] {
  --mvc-accent: #fbbf24;
  --mvc-accent-strong: #b45309;
}

.mobievcalc[data-status='equal'],
.mobievcalc[data-status='invalid'] {
  --mvc-accent: #94a3b8;
  --mvc-accent-strong: #475569;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.mobievcalc__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--mvc-green);
  box-shadow: 0 0 0 3px rgba(164, 210, 51, 0.25);
}

/* A descrição continua no HTML (SEO e leitor de tela) mas só aparece onde há
   espaço vertical sobrando. No celular ela custava três linhas antes do primeiro
   campo. Não dá para fazer isso com utilitário: `sm:block` não está no CSS
   compilado do tema e este plugin não recompila Tailwind. */
.mobievcalc .mobievcalc__lede {
  display: none;
}

@media (min-width: 1024px) {
  .mobievcalc .mobievcalc__lede {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Barra de ação do celular (valor ao vivo + navegação)

   A primeira versão punha o valor numa faixa grudada no TOPO. Funcionava, mas
   cobria justamente o campo em edição — o formulário passava por baixo dela. A
   barra desceu para o rodapé e absorveu a navegação: o polegar alcança o
   "Continuar", o número fica sempre à vista, e o espaço é RESERVADO com padding
   para que nenhum dado ou opção da calculadora fique preso atrás dela.

   A visibilidade é decidida AQUI, e não por utilitário do Tailwind: uma regra
   `.mobievcalc .mobievcalc__mini` (0,2,0) venceria um `lg:hidden` (0,1,0) e o
   valor nunca sumiria no desktop. Dentro da media query, o mesmo CSS serve ao
   caminho Blade e ao de reserva, que não tem Tailwind nenhum.
   -------------------------------------------------------------------------- */

.mobievcalc .mobievcalc__mini {
  display: none;
}

@media (max-width: 1023px) {
  .mobievcalc .mobievcalc__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mvc-border);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 -8px 24px rgba(0, 40, 80, 0.14);
  }

  /* A barra de comparação do EVCompare é fixa no rodapé, mede 117 px no celular
     e tem z-index 9999. A barra da calculadora sobe para ficar ACIMA dela — o
     plugin alterna `style.display` no elemento, sem classe no body, então o
     `:has()` olha para o próprio inline style. */
  body:has([data-evc-compare-bar][style*='flex']) .mobievcalc .mobievcalc__actions {
    bottom: var(--evc-bar-height, 117px);
  }

  .mobievcalc .mobievcalc__mini {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobievcalc .mobievcalc__mini-value {
    color: var(--mvc-accent-strong);
  }

  /* Espaço reservado no FIM DA PÁGINA, não dentro da calculadora: reservar no
     meio do documento abriria um vão branco entre a calculadora e o rodapé. A
     conta é a mesma — a última linha da página precisa poder subir acima da
     barra. Como o rodapé do tema é escuro, o espaço extra some dentro dele. */
  body:has(.mobievcalc) .mv-foot {
    padding-bottom: 92px;
  }

  body:has(.mobievcalc):has([data-evc-compare-bar][style*='flex']) .mv-foot {
    padding-bottom: calc(92px + var(--evc-bar-height, 117px));
  }

  /* Fora do tema do mobiev (sem `.mv-foot` na página) não há rodapé escuro para
     absorver a reserva: aí ela volta para a própria calculadora. */
  body:not(:has(.mv-foot)) .mobievcalc {
    padding-bottom: 92px;
  }

  /* Na barra estreita, "Voltar" fica só com o ícone e "Recomeçar" só aparece na
     última etapa, onde o "Continuar" já saiu de cena e sobra espaço. */
  .mobievcalc .mobievcalc__actions .mobievcalc__btn-text {
    display: none;
  }

  .mobievcalc .mobievcalc__actions [data-mvc-action='prev'] {
    padding-inline: 10px;
  }

  .mobievcalc .mobievcalc__actions .mobievcalc__btn-reset {
    display: none;
  }

  .mobievcalc[data-step='4'] .mobievcalc__actions .mobievcalc__btn-reset:not([hidden]) {
    display: inline-flex;
  }
}

.mobievcalc .mobievcalc__mini-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mvc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobievcalc .mobievcalc__mini-value {
  margin: 1px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Indicador de etapas
   -------------------------------------------------------------------------- */

.mobievcalc__step-bar {
  background: var(--mvc-border);
  transition: background-color 0.25s ease;
}

.mobievcalc__step-label {
  color: var(--mvc-muted);
  transition: color 0.25s ease;
}

.mobievcalc__step[data-state='current'] .mobievcalc__step-bar {
  background: var(--mvc-blue);
}

.mobievcalc__step[data-state='current'] .mobievcalc__step-label {
  color: var(--mvc-blue);
}

.mobievcalc__step[data-state='done'] .mobievcalc__step-bar {
  background: var(--mvc-green);
}

.mobievcalc__step[data-state='done'] .mobievcalc__step-label {
  color: var(--mvc-green-dark);
}

.mobievcalc__step:disabled {
  opacity: 0.55;
}

.mobievcalc__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: currentColor;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.mobievcalc__step[data-state='done'] .mobievcalc__step-number::after {
  content: '✓';
}

.mobievcalc__step[data-state='done'] .mobievcalc__step-number {
  font-size: 0;
}

.mobievcalc__step[data-state='done'] .mobievcalc__step-number::after {
  font-size: 11px;
}

/* No celular quatro rótulos lado a lado não cabem — mas ficar sem rótulo
   nenhum, como estava, tira a orientação de quem está no meio do caminho. A
   saída é mostrar só o da etapa atual. Os outros continuam no HTML, escondidos
   à moda `sr-only` (e não com `display:none`), para o leitor de tela seguir
   lendo "1 Uso", "2 Combustão"… */
@media (max-width: 639px) {
  .mobievcalc .mobievcalc__step-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
  }

  .mobievcalc .mobievcalc__step[data-state='current'] .mobievcalc__step-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Duas travas de largura, medidas no navegador antes de virarem arquivo

   Com os valores rápidos em linha rolável, o conteúdo passou a ter um
   min-content largo — e dois lugares deixavam esse min-content vazar para fora
   da tela (413 px de documento numa viewport de 390):

     1. item de grid nasce com `min-width: auto`, então a trilha cresce até o
        min-content do filho em vez de deixar o filho encolher. É exatamente a
        armadilha do `1fr` corrigida no maisvendidos em 27/07/2026;
     2. `<fieldset>` vem do agente do usuário com `min-inline-size: min-content`,
        que ignora o contêiner. Sem isso, a etapa inteira empurra o painel.

   Só as duas juntas devolvem `scrollWidth == clientWidth`; cada uma sozinha
   deixa resto. Testadas por injeção de CSS na página real antes de escrever
   aqui.
   -------------------------------------------------------------------------- */

.mobievcalc .mobievcalc__grid > * {
  min-width: 0;
}

.mobievcalc .mobievcalc__step-panel {
  min-inline-size: 0;
}

/* Cada campo é um card branco sobre o painel: antes eles corriam soltos no
   mesmo fundo e, no celular, um campo terminava onde o outro começava sem nada
   marcando a fronteira. O card também dá ao erro um lugar visível. */
.mobievcalc .mobievcalc__field-card {
  padding: 14px;
  border: 1px solid var(--mvc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 40, 80, 0.04);
}

.mobievcalc .mobievcalc__field-label {
  display: block;
}

.mobievcalc__field[data-invalid='true'] .mobievcalc__input-wrap {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.mobievcalc__field[data-invalid='true'].mobievcalc__field-card {
  border-color: rgba(185, 28, 28, 0.35);
}

/* Alvo de toque e legibilidade do número: 52 px de altura mínima e 20 px de
   fonte no celular — abaixo de 16 px o iOS dá zoom sozinho ao focar, o que
   desloca a página inteira. */
.mobievcalc .mobievcalc__input-wrap {
  min-height: 52px;
  border-color: #cbd5e1;
}

/* Só no celular: no desktop o `text-lg` do tema já resolve, e 20 px aqui é
   sobretudo para o iOS não dar zoom ao focar um campo menor que 16 px. */
@media (max-width: 1023px) {
  .mobievcalc .mobievcalc__input-wrap input {
    font-size: 20px;
  }
}

/* A unidade vira chip, separado do número por uma divisória: assim ela não é
   confundida com o valor digitado. */
.mobievcalc .mobievcalc__suffix {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid var(--mvc-border);
  border-radius: 0 11px 11px 0;
  background: #f1f5f9;
}

/* Valores rápidos: 40 px de alvo e, no celular, uma linha só que rola no dedo —
   quebrar em três fileiras empurrava o botão "Próximo" para fora da tela. */
.mobievcalc .mobievcalc__quick {
  display: inline-flex;
  align-items: center;
  /* O flex descarta o espaço em branco entre os filhos anônimos: sem o gap,
     "500 km" e "R$ 6,30" viram "500km" e "R$6,30". */
  gap: 0.25em;
  min-height: 40px;
}

@media (max-width: 1023px) {
  .mobievcalc .mobievcalc__quick-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .mobievcalc .mobievcalc__quick-row::-webkit-scrollbar {
    display: none;
  }

  .mobievcalc .mobievcalc__quick {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* Quando o navegador rola um campo (ou a legenda da etapa) para dentro da tela
   ao receber foco, ele não sabe do cabeçalho fixo do tema (67 px, `.mv-nav`) nem
   da barra de ação do rodapé. Sem estas margens, a pessoa toca no campo e ele
   para atrás de um dos dois. Vale para o input, não só para o card: quem recebe
   o foco é o input. */
@media (max-width: 1023px) {
  .mobievcalc .mobievcalc__field-card,
  .mobievcalc [data-mvc-field],
  .mobievcalc [data-mvc-slider],
  .mobievcalc .mobievcalc__step-panel legend {
    scroll-margin-top: calc(var(--mv-nav-height, 67px) + 16px);
    scroll-margin-bottom: 120px;
  }
}

/* Em telas estreitas o painel e o card somavam 34 px de moldura horizontal de
   cada lado; o campo é mais importante que a borda. */
@media (max-width: 479px) {
  .mobievcalc .mobievcalc__panel {
    padding: 14px;
  }

  .mobievcalc .mobievcalc__field-card {
    padding: 12px;
  }
}


.mobievcalc__quick[data-active='true'] {
  border-color: var(--mvc-blue);
  background: rgba(0, 102, 179, 0.08);
  color: var(--mvc-blue-dark);
}

.mobievcalc__fuel[data-active='true'] {
  border-color: var(--mvc-blue);
  background: rgba(0, 102, 179, 0.08);
  color: var(--mvc-blue-dark);
}

/* O rádio é sr-only: o foco precisa aparecer no rótulo, senão a navegação por
   teclado fica invisível. */
.mobievcalc__fuel:focus-within {
  outline: 2px solid var(--mvc-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */

.mobievcalc__slider {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  background: transparent;
  cursor: pointer;
}

.mobievcalc__slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 9999px;
  background: #dbe3ec;
}

.mobievcalc__slider::-moz-range-track {
  height: 8px;
  border-radius: 9999px;
  background: #dbe3ec;
}

/* Polegar de 24 px: o mínimo de alvo de toque da WCAG 2.2 (2.5.8). */
.mobievcalc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px; /* (8 - 24) / 2 — centra o polegar na trilha de 8 px */
  border: 3px solid #fff;
  border-radius: 9999px;
  background: var(--mvc-blue);
  box-shadow: 0 2px 6px rgba(0, 40, 80, 0.25);
}

.mobievcalc__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 9999px;
  background: var(--mvc-blue);
  box-shadow: 0 2px 6px rgba(0, 40, 80, 0.25);
}

.mobievcalc__slider:focus-visible {
  outline: 2px solid var(--mvc-blue);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.mobievcalc__btn-primary {
  background: linear-gradient(135deg, var(--mvc-blue) 0%, var(--mvc-blue-dark) 100%);
}

.mobievcalc__btn-primary:hover {
  background: linear-gradient(135deg, var(--mvc-blue-light) 0%, var(--mvc-blue) 100%);
  transform: translateY(-1px);
}

.mobievcalc__btn-primary:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Painel de resultado
   -------------------------------------------------------------------------- */

.mobievcalc__result-hero {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--mvc-hero-from) 0%, var(--mvc-hero-to) 100%);
  border-bottom: 3px solid var(--mvc-accent);
}

.mobievcalc__badge {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.mobievcalc__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--mvc-accent);
}

.mobievcalc__figure {
  color: var(--mvc-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mobievcalc__result-tile {
  background: rgba(255, 255, 255, 0.1);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Gráfico
   -------------------------------------------------------------------------- */

.mobievcalc__track {
  background: var(--mvc-border);
}

.mobievcalc__bar {
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobievcalc__bar--combustion {
  background: linear-gradient(90deg, #94a3b8 0%, var(--mvc-slate) 100%);
}

.mobievcalc__bar--electric {
  background: linear-gradient(90deg, var(--mvc-green) 0%, var(--mvc-green-dark) 100%);
}

.mobievcalc__side--combustion [data-mvc-side-label] {
  color: var(--mvc-slate);
}

.mobievcalc__side--electric [data-mvc-side-label] {
  color: var(--mvc-green-dark);
}

.mobievcalc__side {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   CTA e metodologia
   -------------------------------------------------------------------------- */

.mobievcalc__cta {
  background: var(--mvc-green);
  color: #22340a;
}

.mobievcalc__cta:hover {
  background: var(--mvc-green-dark);
  color: #fff;
}

.mobievcalc__methodology summary::-webkit-details-marker {
  display: none;
}

.mobievcalc__methodology[open] .mobievcalc__chevron {
  transform: rotate(180deg);
}

.mobievcalc__chevron {
  transition: transform 0.2s ease;
}

.mobievcalc__note-dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--mvc-green);
}

/* --------------------------------------------------------------------------
   Movimento reduzido (§29.1)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mobievcalc *,
  .mobievcalc *::before,
  .mobievcalc *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .mobievcalc__btn-primary:hover {
    transform: none;
  }
}