/* ═══════════════════════════════════════════════════════════════════════════
   journey.css — P0 + P1 layout components
   Depende de tokens.css (carregado antes).
   tokens.css já provê: .evx-screen, .evx-card, .evx-btn*, .evx-input,
   .evx-chip, @keyframes evx-pulse/spin/shimmer/fade-in/bolt-pulse/progress-flow
   /low-pulse/shine, .evx-placeholder

   TODO p2-p8 estilos: as classes usadas pelas telas p2-p8 (evx-phase-p2,
   evx-qr-*, evx-tracking-*, evx-receipt-*, etc.) precisam ser portadas na
   próxima rodada — aquelas telas continuam quebradas propositalmente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fontes (Inter Tight + JetBrains Mono) ─────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ─── Safe area (PWA notch) ─────────────────────────────────────────────── */
.evx-safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── Full-height shell — footer gruda no rodapé adaptando-se à viewport ─ */
html, body { height: 100%; }
body.journey-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}
.evx-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Teto + centralização: abaixo de --app-max-w continua ocupando tudo (mobile intacto);
     acima, vira um app centralizado em vez de esticar campos por 1400px. */
  max-width: var(--app-max-w);
  margin-inline: auto;
  width: 100%;
}

/* Acima do teto, uma borda lateral fecha o app: sem ela a faixa branca do header termina
   no vazio e parece corte, não limite. Abaixo do teto não existe borda nenhuma. */
@media (min-width: 421px) {
  .evx-screen { border-inline: 1px solid var(--border-subtle); }
}

/* Overlays são position:fixed e NÃO respeitam o container — sem isto ficariam da largura
   da tela enquanto o app fica estreito, cada um num alinhamento. Com left/right em 0,
   margin-inline:auto + max-width centraliza. */
.evx-legal-overlay,
.evx-connector-overlay,
.evx-loading-overlay,
.evx-qr-overlay {
  max-width: var(--app-max-w);
  margin-inline: auto;
}

/* ─── Tenant header ──────────────────────────────────────────────────────── */
/* JSX: padding compact '56px 20px 12px' / normal '60px 20px 14px', sticky top, bg-card, border-bottom subtle */
.evx-tenant-header {
  padding: 4px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 56px;
}
.evx-tenant-header--compact {
  padding: 4px 20px;
  min-height: 48px;
}
/* Logo — centralizada, grande mas dentro de header fino */
.evx-tenant-logo {
  display: block;
  height: 52px;
  max-height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: center;
}

/* Logo container (icon + text column) */
.evx-tenant-logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.evx-tenant-logo-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.1;
}
.evx-tenant-logo-tagline {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  line-height: 1.1;
}

/* Back button slot (36px round) */
.evx-header-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.evx-header-spacer {
  width: 36px;
  flex-shrink: 0;
}

/* ─── Screen footer ──────────────────────────────────────────────────────── */
/* JSX: padding 20px 20px 24px, text-center, 11px, tertiary */
.evx-screen-footer {
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-top: auto;
}
/* Botão de suporte PADRÃO — presente no footer de todas as telas da journey. */
.evx-footer-support {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 auto 14px; padding: 9px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  transition: background .15s, border-color .15s, color .15s;
}
.evx-footer-support:hover {
  color: var(--tenant-primary);
  border-color: var(--tenant-primary);
}
.evx-footer-support svg { flex: none; }
.evx-screen-footer p {
  margin: 0;
}
.evx-screen-footer p + p {
  margin-top: 2px;
}
.evx-screen-footer strong {
  font-weight: 600;
  color: var(--text-secondary);
}

/* ─── Screen content padding wrapper ────────────────────────────────────── */
/* JSX: padding: '16px 20px 0', flex: 1 */
.evx-screen-content {
  padding: 16px 20px 0;
  flex: 1;
}

/* ─── Page header (supra + h1) ───────────────────────────────────────────── */
.evx-page-header {
  margin-bottom: 14px;
}
.evx-supratitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--tenant-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.evx-page-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  color: var(--text-primary);
}

/* ─── Section label ──────────────────────────────────────────────────────── */
/* JSX: fontSize 12, fontWeight 600, color text-secondary, margin 16px 0 8px */
.evx-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── Station strip — card escuro ────────────────────────────────────────── */
/* JSX p1-access.jsx:39-123: linear-gradient(135deg, #0E1614 0%, #1F302C 100%), border-radius 18px */
.evx-station-strip {
  border-radius: 18px;
  background: linear-gradient(135deg, #0E1614 0%, #1F302C 100%);
  color: #fff;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}

/* halo verde sutil no canto superior direito */
.evx-station-strip__halo {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,232,155,0.18), transparent 70%);
  pointer-events: none;
}

/* row: bolt icon + name/address + Online chip */
.evx-station-strip__title-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.evx-station-strip__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(91,232,155,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5BE89B;
}
.evx-station-strip__info {
  flex: 1;
  min-width: 0;
}
.evx-station-strip__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.evx-station-strip__address {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.evx-station-strip__id {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.evx-station-strip__online {
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(91,232,155,0.16);
  color: #5BE89B;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.evx-station-strip__online-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5BE89B;
  box-shadow: 0 0 6px #5BE89B;
}

/* stats grid 3 colunas */
.evx-station-strip__stats {
  position: relative;
  display: grid;
  /* auto-fit: 3 blocos quando o tipo da estação é desconhecido, 4 quando é conhecido —
     sem precisar de duas classes. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 6px;
}
/* Abaixo de 390px os quatro blocos não cabem numa linha: o "/kWh" do preço era cortado na
   borda (medido: vaza em 380, cabe em 390). Duas linhas de dois mantêm a simetria e tudo
   legível. */
@media (max-width: 389px) {
  .evx-station-strip__stats {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }
}
.evx-station-strip__stat {
  padding: 8px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
}
.evx-station-strip__stat-label {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evx-station-strip__stat-value {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;   /* com 4 blocos, "R$ 1,69" quebrava em duas linhas e o bloco do
                            preço ficava mais alto que os vizinhos */
}
.evx-station-strip__stat-value--green {
  color: #5BE89B;
}
/* AC/DC em corpo maior: é a informação que o motorista procura primeiro para saber se a
   recarga é rápida. Pedido de cliente em teste. */
.evx-station-strip__stat-value--kind {
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.evx-station-strip__stat-unit {
  font-size: 8px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.evx-station-strip__stat-unit--sm {
  font-size: 10px;
}

/* connectors chips row */
.evx-station-strip__connectors {
  position: relative;
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
  /* Simetria: um conector fica centralizado; dois se afastam para as bordas do card. */
  justify-content: center;
}
.evx-station-strip__connectors:has(> :nth-child(2)) {
  justify-content: space-between;
}
/* Abaixo de 360px os dois chips não cabem lado a lado e quebram linha — aí
   space-between deixaria os dois encostados à esquerda, cada um na sua linha. Empilhados,
   o simétrico é centralizar. */
@media (max-width: 359px) {
  .evx-station-strip__connectors:has(> :nth-child(2)) { justify-content: center; }
}

/* activation fee row — abaixo dos chips */
.evx-station-strip__activation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
}
.evx-station-strip__activation-label {
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 600;
}
.evx-station-strip__activation-value {
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.evx-station-strip__activation-value--free {
  color: #5BE89B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.evx-station-strip__connector {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.evx-station-strip__connector--available {
  background: rgba(91,232,155,0.12);
  color: #5BE89B;
  border: 1px solid rgba(91,232,155,0.2);
}
.evx-station-strip__connector--preparing {
  background: rgba(156,211,240,0.14);
  color: #9CD3F0;
  border: 1px solid rgba(156,211,240,0.25);
}
.evx-station-strip__connector--busy {
  background: rgba(255,184,77,0.12);
  color: #FFB84D;
  border: 1px solid rgba(255,184,77,0.2);
}
.evx-station-strip__connector--fault {
  background: rgba(255,118,118,0.12);
  color: #FF7676;
  border: 1px solid rgba(255,118,118,0.2);
}
.evx-station-strip__connector--maintenance {
  background: rgba(156,211,240,0.12);
  color: #9CD3F0;
  border: 1px solid rgba(156,211,240,0.2);
}
.evx-station-strip__connector-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* footer code row */
.evx-station-strip__footer {
  position: relative;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.evx-station-strip__code-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.evx-station-strip__code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
}

/* ─── Status hero (P0 dark card com halo colorido) ───────────────────────── */
/* JSX p1-status.jsx:131-221: mesmo gradiente do strip + halo na cor do status */
.evx-status-hero {
  border-radius: 18px;
  background: linear-gradient(135deg, #0E1614 0%, #1F302C 100%);
  color: #fff;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.evx-status-hero__halo {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
}
/* badge de status no topo do hero */
.evx-status-hero__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.evx-status-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: evx-pulse 1.6s ease infinite;
}
/* title row: bolt icon + name + address */
.evx-status-hero__title-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.evx-status-hero__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
}
.evx-status-hero__station-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: rgba(255,255,255,0.95);
}
.evx-status-hero__station-address {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* conectores dentro do hero (coluna) */
.evx-status-hero__connectors {
  position: relative;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evx-status-hero__connector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
}
.evx-status-hero__connector-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.evx-status-hero__connector-info {
  flex: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.evx-status-hero__connector-info strong {
  font-weight: 600;
}
.evx-status-hero__connector-info span {
  color: rgba(255,255,255,0.5);
  margin-left: 6px;
}
.evx-status-hero__connector-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
}

/* footer do hero */
.evx-status-hero__footer {
  position: relative;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.evx-status-hero__code-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.evx-status-hero__code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
}

/* ─── P0 status message card (branco, acima do hero) ─────────────────────── */
/* JSX p1-status.jsx:245-273: evx-card, padding '20px 18px', text-center, borderRadius 18 */
.evx-status-card {
  padding: 20px 18px;
  text-align: center;
  border-radius: 18px;
  margin-bottom: 14px;
}
.evx-status-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-status-card__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
  color: var(--text-primary);
}
.evx-status-card__subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.5;
}
/* Progresso agregado da carga ativa (tela de estação ocupada — B2). */
.evx-p0-progress { margin-top: 14px; }
.evx-p0-progress-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--bg-muted);
}
.evx-p0-progress-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--tenant-primary); transition: width .4s ease;
}
.evx-p0-progress-text {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 7px; font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.evx-p0-progress-text strong { color: var(--text-primary); font-weight: 700; }
.evx-p0-progress-pct { color: var(--text-tertiary); }
/* Valores da estação na tela de ocupada (preço/kWh + taxa). */
.evx-p0-pricing { display: flex; gap: 10px; margin-top: 12px; }
.evx-p0-price-item {
  flex: 1; padding: 11px 13px; border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.evx-p0-price-label {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.evx-p0-price-val {
  display: block; margin-top: 3px; font-size: 16px; font-weight: 700;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.evx-p0-price-val small { font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-left: 2px; }
.evx-status-card__bullets {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: 12px;
  text-align: left;
}
.evx-status-card__bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.evx-status-card__bullet-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* incident id / maintenance time strips */
.evx-status-meta {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.evx-status-meta__label {
  font-size: 11px;
  color: var(--text-tertiary);
}
.evx-status-meta__value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.evx-status-maintenance {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.evx-status-maintenance__text {
  flex: 1;
}
.evx-status-maintenance__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.evx-status-maintenance__sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* P0 action buttons */
.evx-status-actions {
  margin-top: 18px;
}
.evx-status-actions .evx-btn + .evx-btn {
  margin-top: 8px;
}

/* ─── Method grid + tiles ─────────────────────────────────────────────────── */
/* JSX components.jsx:390 */
.evx-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Fatia B — lista de métodos de pagamento (PIX / Cartão) com respiro do card acima e do card de dados abaixo */
.evx-method-label {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.evx-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

/* JSX components.jsx:321-384 */
.evx-method-tile {
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--border-default);
  border-radius: 14px;
  /* Linha única: ícone e nome lado a lado. Era coluna com 90px de altura mínima e uma
     tagline ("Pagamento na hora, sem cartão") que só ocupava espaço — o nome do método já
     diz o que ele é. O espaço vertical é caro nesta tela, que tem formulário abaixo. */
  padding: 10px 28px 10px 10px;   /* direita maior: o radio é absoluto naquele canto */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.15s ease;
  cursor: pointer;
  width: 100%;
}
.evx-method-tile.is-selected {
  background: var(--tenant-primary-soft);
  border-color: var(--tenant-primary);
}
.evx-method-tile--full-width {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  min-height: 56px;
}

.evx-method-tile-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-method-tile.is-selected .evx-method-tile-icon {
  background: rgba(255,255,255,0.65);
  color: var(--tenant-primary);
}

.evx-method-tile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.evx-method-tile-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.evx-method-tile-title {
  /* nowrap: o nome fica ao lado do ícone, numa linha só, em meia largura de tela. */
  font-size: 13px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.evx-method-tile-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--tenant-primary);
  background: var(--bg-card);
  border: 1px solid var(--tenant-primary);
  padding: 1px 5px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.evx-method-tile-tagline {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.35;
}

/* radio indicator — abs top-right on column mode, static on row mode */
.evx-method-tile-radio {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* centralizado: o tile agora tem uma linha só */
  right: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evx-method-tile.is-selected .evx-method-tile-radio {
  border-color: var(--tenant-primary);
}
.evx-method-tile--full-width .evx-method-tile-radio {
  position: static;
}
.evx-method-tile-radio__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tenant-primary);
  display: none;
}
.evx-method-tile.is-selected .evx-method-tile-radio__dot {
  display: block;
}

/* ─── Data card (CPF + phone) ────────────────────────────────────────────── */
/* JSX p1-access.jsx:229: evx-card, padding 16, flex column, gap 12, borderRadius 18 */
.evx-data-card {
  background: var(--bg-card);
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evx-input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}
.evx-input-helper {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.4;
}

/* badge "Cadastro encontrado" */
.evx-recognized-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--status-success);
  font-weight: 700;
}
.evx-recognized-badge.is-visible {
  display: inline-flex;
}

/* Feedback de input inválido (CPF / phone com formato OK mas valor inválido) */
.evx-input.is-invalid {
  border-color: var(--status-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.evx-input-error {
  display: none;
  margin-top: 4px;
  font-size: 11px;
  color: var(--status-danger);
  font-weight: 600;
}
.evx-input-error.is-visible {
  display: block;
}

/* ─── Terms card ─────────────────────────────────────────────────────────── */
/* JSX p1-access.jsx:261-300: evx-card, marginTop 14, padding '12px 14px', borderRadius 16, flex row, gap 10 */
.evx-terms-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* custom checkbox */
.evx-checkbox-square {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 2px solid var(--border-strong);
  background: transparent;
  padding: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.evx-checkbox-square.is-checked {
  border-color: var(--tenant-primary);
  background: var(--tenant-primary);
}
.evx-terms-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.evx-terms-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--tenant-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── CTA row ────────────────────────────────────────────────────────────── */
/* JSX p1-access.jsx:302-314: marginTop 16, marginBottom 12 */
.evx-cta-row {
  padding-top: 16px;
  padding-bottom: 12px;
}

/* ─── Reveal animation ───────────────────────────────────────────────────── */
/* @keyframes evx-fade-in já existe em tokens.css */
.evx-reveal {
  animation: evx-fade-in 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL MODAL — bottom-sheet Termos / Privacidade (fiel a legal-modal.jsx)
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes evx-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.evx-legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(14, 22, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: evx-fade-in 0.18s ease;
}
.evx-legal-overlay[hidden] { display: none; }
body.evx-legal-open { overflow: hidden; }

.evx-legal-sheet {
  background: var(--bg-page);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  height: 92dvh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: evx-sheet-up 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.evx-legal-handle {
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.evx-legal-handle span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
}

.evx-legal-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-page);
  border-bottom: 1px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.18s ease, padding 0.18s ease;
}
.evx-legal-header.is-condensed {
  padding: 8px 18px 10px;
  border-bottom-color: var(--border-subtle);
}
.evx-legal-titles { flex: 1; min-width: 0; }
.evx-legal-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  transition: font-size 0.18s ease;
}
.evx-legal-header.is-condensed .evx-legal-title { font-size: 15px; }
.evx-legal-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  transition: opacity 0.18s ease, max-height 0.18s ease;
}
.evx-legal-header.is-condensed .evx-legal-subtitle {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
}
.evx-legal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.evx-legal-close:hover { background: var(--bg-muted); }

.evx-legal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 18px 16px;
  -webkit-overflow-scrolling: touch;
}

.evx-legal-intro {
  background: var(--tenant-primary-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 18px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  border-left: 3px solid var(--tenant-primary);
}

.evx-legal-toc {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--bg-card);
}
.evx-legal-toc-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.evx-legal-toc-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.evx-legal-num {
  width: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.evx-legal-num--accent {
  color: var(--tenant-primary);
  font-weight: 600;
}

.evx-legal-section { margin-bottom: 18px; }
.evx-legal-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.evx-legal-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.evx-legal-section-body {
  margin: 0;
  padding-left: 26px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.evx-legal-contact {
  margin-top: 22px;
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.evx-legal-contact-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-card);
  color: var(--tenant-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.evx-legal-contact-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.evx-legal-footer-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.evx-legal-actions {
  flex-shrink: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.evx-legal-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
.evx-legal-buttons {
  display: flex;
  gap: 8px;
}
.evx-legal-buttons .evx-btn { flex: 1; height: 48px; }
.evx-legal-buttons .evx-btn-primary { flex: 2; }
.evx-legal-buttons .evx-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   P2-PIX — formulário de configuração de recarga
   Classes: evx-station-strip--compact, evx-connector-picker/tile,
   evx-amount-presets/preset, evx-amount-dropdown/*, evx-amount-input,
   evx-amount-helper, evx-breakdown/*, evx-cta-area
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Station strip compacto ─────────────────────────────────────────────── */
/* Versão fina (só nome + status, sem stats grid) */
.evx-station-strip--compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-bottom: 18px;
}
.evx-station-strip-compact__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tenant-primary-soft);
  /* -dark, não o tom cheio: #00A651 sobre o soft dá 2.89:1 e não alcança o 3:1 que o WCAG
     pede para elemento gráfico; o escuro da mesma paleta dá 4.02:1. */
  color: var(--tenant-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evx-station-strip-compact__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.evx-station-strip-compact__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evx-station-strip-compact__code {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.evx-chip--success {
  background: var(--status-success-soft);
  color: var(--status-success);
}
.evx-chip--info {
  background: var(--status-info-soft);
  color: var(--status-info);
}
.evx-chip--warning {
  background: var(--status-warning-soft);
  color: var(--status-warning);
}
.evx-chip--danger {
  background: var(--status-danger-soft);
  color: var(--status-danger);
}
.evx-chip--muted {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}
.evx-chip--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
}

/* ─── Connector summary (resumo na área da estação) ───────────────────────── */
.evx-connector-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: default;
}
.evx-connector-summary--interactive { cursor: pointer; }
.evx-connector-summary--interactive:hover { border-color: var(--tenant-primary); }
.evx-connector-summary:disabled { opacity: 1; }
.evx-connector-summary__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tenant-primary-soft);
  /* -dark, não o tom cheio: #00A651 sobre o soft dá 2.89:1 e não alcança o 3:1 que o WCAG
     pede para elemento gráfico; o escuro da mesma paleta dá 4.02:1. */
  color: var(--tenant-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evx-connector-summary__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.evx-connector-summary__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.evx-connector-summary__meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.evx-connector-summary__chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ─── Connector modal (bottom-sheet; 2+ conectores) ───────────────────────── */
.evx-connector-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(14, 22, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: evx-fade-in 0.18s ease;
}
.evx-connector-overlay[hidden] { display: none; }
.evx-connector-sheet {
  background: var(--bg-page);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: evx-sheet-up 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.evx-connector-sheet__handle {
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.evx-connector-sheet__handle span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
}
.evx-connector-sheet__header {
  padding: 6px 18px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.evx-connector-sheet__title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
.evx-connector-sheet__body {
  padding: 0 18px 22px;
  overflow-y: auto;
}

/* Cupom embutido no bloco de cálculo */
.evx-breakdown-voucher { padding: 2px 0; }

/* ─── Connector picker ────────────────────────────────────────────────────── */
/* Grid 2-col de tiles de conector; similar ao MethodTile mas com power */
.evx-connector-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Tile de conector */
.evx-connector-tile {
  display: block;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-default);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
  user-select: none;
}
.evx-connector-tile:hover:not(.evx-connector-tile--disabled) {
  border-color: var(--tenant-primary);
}
/* radio input oculto — estado visual é controlado por :has(:checked) */
.evx-connector-tile__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Tile selecionado */
.evx-connector-tile:has(.evx-connector-tile__input:checked) {
  background: var(--tenant-primary-soft);
  border-color: var(--tenant-primary);
}
/* Tile desabilitado */
.evx-connector-tile--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.evx-connector-tile__type-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.evx-connector-tile__power {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.evx-connector-tile:has(.evx-connector-tile__input:checked) .evx-connector-tile__power {
  color: var(--tenant-primary);
}
.evx-connector-tile__status {
  font-size: 10px;
  margin-top: 4px;
  color: var(--text-tertiary);
}
.evx-connector-tile__status--available {
  color: var(--status-success);
}
.evx-connector-tile__status--busy {
  color: var(--status-warning);
}
.evx-connector-tile__status--preparing {
  color: var(--status-info);
}
.evx-connector-tile__status--fault {
  color: var(--status-danger);
  font-weight: 700;
}
.evx-connector-tile__status--maintenance {
  color: var(--text-tertiary);
}
.evx-connector-tile__current {
  color: var(--text-tertiary);
}

/* ─── Amount presets (chips rápidos) ──────────────────────────────────────── */
.evx-amount-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.evx-amount-preset {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.evx-amount-preset:hover {
  border-color: var(--tenant-primary);
  color: var(--tenant-primary);
}
.evx-amount-preset--active {
  background: var(--tenant-primary);
  border-color: var(--tenant-primary);
  color: #fff;
}

/* ─── Amount dropdown ─────────────────────────────────────────────────────── */
.evx-amount-dropdown {
  position: relative;
}
.evx-amount-dropdown__trigger {
  width: 100%;
  min-height: 64px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
  font-family: var(--font-sans);
}
.evx-amount-dropdown__trigger:focus-visible {
  outline: 2px solid var(--tenant-primary);
  outline-offset: 2px;
}
.evx-amount-dropdown__trigger[aria-expanded="true"] {
  border-color: var(--tenant-primary);
}
.evx-amount-dropdown__trigger--selected {
  border-color: var(--border-default);
}
.evx-amount-dropdown__label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.evx-amount-dropdown__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-tertiary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.evx-amount-dropdown__value--selected {
  color: var(--text-primary);
}
.evx-amount-dropdown__chevron {
  color: var(--text-secondary);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.evx-amount-dropdown__trigger[aria-expanded="true"] .evx-amount-dropdown__chevron {
  transform: rotate(180deg);
}
/* Painel dropdown */
.evx-amount-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border-default);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  z-index: 30;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}
.evx-amount-dropdown__option {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  transition: background 0.1s ease;
}
.evx-amount-dropdown__option:hover {
  background: var(--bg-subtle);
}
.evx-amount-dropdown__option[aria-selected="true"] {
  background: var(--tenant-primary-soft);
  border-left-color: var(--tenant-primary);
  color: var(--tenant-primary);
  font-weight: 700;
}
.evx-amount-dropdown__option--custom {
  min-height: 48px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  font-size: 15px;
  font-weight: 600;
}
/* Painel de valor customizado — só aparece quando user escolhe "Outro valor" no dropdown.
   HTML attribute "hidden" precisa ter display:none com prioridade maior que display:flex. */
.evx-amount-custom-panel {
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-radius: 12px;
  border: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.evx-amount-custom-panel[hidden] {
  display: none !important;
}
.evx-amount-custom-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evx-amount-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  border: 1.5px solid var(--tenant-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-sans);
}
.evx-amount-custom-actions {
  display: flex;
  gap: 8px;
}
.evx-amount-custom-actions .evx-btn {
  flex: 1;
  height: 40px;
  font-size: 13px;
}

/* ─── Amount helper ──────────────────────────────────────────────────────── */
/* Linha de estimativa abaixo do dropdown */
.evx-amount-helper {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 0 2px;
}

/* ─── Form input hint ────────────────────────────────────────────────────── */
.evx-input-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: block;
}
.evx-section-label__req {
  color: var(--status-danger);
  margin-left: 2px;
}

/* ─── Notice (aviso inline) ──────────────────────────────────────────────── */
.evx-notice {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.evx-notice--warning {
  background: var(--status-warning-soft);
  color: var(--status-warning);
  border: 1px solid rgba(217,119,6,0.20);
}

/* ─── Breakdown (collapsible) ────────────────────────────────────────────── */
.evx-breakdown {
  margin-top: 16px;
  background: var(--bg-subtle);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.evx-breakdown__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}
.evx-breakdown__summary::-webkit-details-marker { display: none; }
.evx-breakdown[open] .evx-breakdown__chevron {
  transform: rotate(180deg);
}
.evx-breakdown__chevron {
  color: var(--text-tertiary);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.evx-breakdown__body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.evx-breakdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.evx-breakdown-row[hidden] {
  display: none !important;
}
.evx-breakdown-row:last-child {
  border-bottom: none;
}
.evx-breakdown-row__sub {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.evx-breakdown-row__free {
  color: var(--status-success);
  font-weight: 600;
}
/* Linha total */
.evx-breakdown-row--total {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--border-default);
  border-bottom: none;
  font-size: 14px;
  color: var(--text-primary);
}
.evx-breakdown-total {
  font-size: 22px;
  font-weight: 800;
  color: var(--tenant-primary);
  font-variant-numeric: tabular-nums;
}

/* ─── Beneficiary field ──────────────────────────────────────────────────── */
.evx-beneficiary-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evx-beneficiary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.evx-beneficiary-feedback {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--status-success);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Voucher field ──────────────────────────────────────────────────────── */
.evx-voucher-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evx-voucher-input-row {
  display: flex;
  gap: 8px;
}
.evx-voucher-input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  font-size: 15px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border-radius: 10px;
  border: 1.5px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-primary);
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s ease;
}
.evx-voucher-input:focus {
  border-color: var(--tenant-primary);
}
.evx-voucher-input.is-error {
  border-color: var(--status-danger);
}
.evx-voucher-apply-btn {
  height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1.5px solid var(--tenant-primary);
  background: transparent;
  color: var(--tenant-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  opacity: 0.5;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.evx-voucher-apply-btn:not(:disabled) {
  background: var(--tenant-primary-dark);  /* texto claro por cima: 4,45:1 (o tom cheio dava 3,19:1) */
  color: #fff;
  opacity: 1;
  cursor: pointer;
}
.evx-voucher-error {
  font-size: 11px;
  color: var(--status-danger);
  margin-top: 4px;
}
/* Card de cupom aplicado */
.evx-voucher-applied {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,166,81,0.08);
  border: 1px solid rgba(0,166,81,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.evx-voucher-applied-code {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.evx-voucher-applied-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.evx-voucher-remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evx-voucher-remove:hover {
  color: var(--text-secondary);
  background: var(--bg-subtle);
}

/* ─── Breakdown card (versão completa P2-PIX) ────────────────────────────── */
.evx-breakdown-card {
  background: var(--bg-subtle);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-subtle);
}
.evx-breakdown-card .evx-breakdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.evx-breakdown-card .evx-breakdown-row:last-child {
  border-bottom: none;
  padding-top: 10px;
}
.evx-breakdown-row__label {
  font-size: 13px;
  color: var(--text-secondary);
}
.evx-breakdown-row__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.evx-breakdown-row__sub {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.evx-breakdown-row--success .evx-breakdown-row__label {
  color: var(--status-success);
}
.evx-breakdown-row--success .evx-breakdown-row__value {
  color: var(--status-success);
}
.evx-breakdown-divider {
  height: 1px;
  background: var(--border-default);
  margin: 2px 0;
}
.evx-breakdown-total {
  font-size: 24px;
  font-weight: 800;
  color: var(--tenant-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ─── CTA area ───────────────────────────────────────────────────────────── */
.evx-cta-area {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evx-cta-secondary {
  text-align: center;
}
.evx-link {
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.evx-link:hover {
  color: var(--text-secondary);
}

/* ─── P3 — loading entre PIX-pago e RemoteStart-OCPP ─────────────────────── */
/* Versão correta: wrapper-content que vive DENTRO do .evx-screen do JourneyShell.
   Não usar .evx-screen--center (com 100vh) aqui — causa aninhamento de viewport
   e empurra footer pra fora quando htmx faz swap. */
.evx-screen-content--center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.evx-p3-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 320px;
}
.evx-p3-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.evx-p3-content {
  transition: opacity 0.3s ease;
}
.evx-p3-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-primary);
  margin: 0;
  line-height: 1.25;
  transition: color 0.3s ease;
}
.evx-p3-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 6px 0 0;
  line-height: 1.5;
  max-width: 280px;
}
.evx-p3-elapsed-chip {
  padding: 6px 12px;
  background: var(--bg-subtle);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  animation: evx-fade-in 0.3s ease;
}
.evx-p3-elapsed-chip[hidden] { display: none; }
.evx-p3-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
}
@keyframes evx-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.evx-error-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  /* auto nos QUATRO lados: centra o card no espaço livre entre header e rodapé, e também
     na horizontal — com `width:100%` + `max-width` dentro de um flex column sem
     `align-items`, o card ficava encostado à esquerda. Quando o conteúdo é mais alto que a
     tela, `auto` colapsa para 0 e o row-gap abaixo garante o respiro. */
  margin: auto;
  max-width: 340px;
  width: 100%;
  text-align: center;
  animation: evx-fade-in 0.4s ease;
}
/* Telas de erro ocupam o CENTRO da tela, sempre. O rodapé da journey usa
   `margin-top:auto` para colar embaixo; aqui isso competiria com o `margin:auto` do card e
   o empurraria para cima do centro. Escopado por :has para não tocar nas demais telas. */
.evx-screen:has(> .evx-error-shell) { row-gap: 16px; }
.evx-screen:has(> .evx-error-shell) > .evx-screen-footer { margin-top: 0; }
.evx-error-shell[hidden] { display: none; }
/* Ícone em badge circular danger (substitui o emoji solto) */
.evx-error-icon {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--status-danger-soft);
  color: var(--status-danger);
  border: 1px solid rgba(220, 38, 38, 0.18);
  margin-bottom: 4px;
}
.evx-error-icon svg { display: block; }
.evx-error-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}
.evx-error-msg {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 300px;
}
.evx-error-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}

/* Tela rica de cartão recusado (journeyCardDeclinedBody) — "Possíveis causas" + código. */
.evx-error-icon--danger { color: var(--status-danger); background: var(--status-danger-soft); }
.evx-causes-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin-top: 4px;
  text-align: left;
}
.evx-causes-card__title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.evx-cause-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.evx-cause-row--last { border-bottom: none; }
.evx-cause-bullet { color: var(--status-danger); flex-shrink: 0; font-weight: 700; }
.evx-cause-t { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.evx-cause-s { font-size: 12px; color: var(--text-secondary); }
.evx-decline-code {
  margin-top: 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  text-align: center;
  width: 100%;
}

/* Fragment de reconexão do poll htmx (handler.go handlePoll erro transitório).
   Antes: texto cru "Reconectando..." sem classe estilizada. Agora: pill discreta
   com spinner; o fragment também re-tenta sozinho (hx-trigger) e some ao recuperar. */
.evx-poll-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto;
  padding: 10px 16px;
  max-width: 320px;
  border-radius: var(--r-full);
  background: var(--status-warning-soft);
  border: 1px solid rgba(217, 119, 6, 0.22);
  color: var(--status-warning);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  animation: evx-fade-in 0.3s ease;
}
.evx-poll-error::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(217, 119, 6, 0.30);
  border-top-color: var(--status-warning);
  animation: evx-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .evx-poll-error::before { animation: none; }
}

/* ─── P4 — QR Code PIX (fiel ao protótipo p3-p4-loading-qr.jsx) ─────────── */
.evx-p4-supratitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.evx-p4-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
  line-height: 1.2;
  color: var(--text-primary);
}
.evx-p4-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.5;
}
.evx-p4-subtitle strong { color: var(--text-primary); font-weight: 700; }
/* Summary row: Total à esquerda, expira em à direita (mesma linha). */
.evx-p4-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.4;
}
.evx-p4-summary-total {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.evx-p4-summary-total strong {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 15px;
}
.evx-p4-summary-expire {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  color: var(--text-tertiary);
  font-size: 12px;
}
.evx-p4-summary-expire strong { color: var(--text-primary); font-weight: 700; }
.evx-p4-countdown-inline { font-variant-numeric: tabular-nums; }
.evx-p4-countdown-inline.is-urgent { color: var(--status-danger); }

.evx-p4-qr-card {
  background: #fff;
  border-radius: 28px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 24px rgba(14,22,20,0.06);
}
.evx-p4-qr-frame {
  position: relative;
  /* Padding 8px — pequeno respiro entre o SVG do QR e a borda verde. O SVG
     gerado por qr-styled.js já desenha os finder patterns arredondados
     internamente (rx = cellSize * 1.4 igual protótipo), então não dependemos
     de overflow:hidden nem clipping pra ter cantos redondos. */
  padding: 8px;
  background: #fff;
  border-radius: 22px;
  border: 2px solid var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  /* overflow hidden serve só pro fallback (img PNG gerada pelo Cacique caso
     o JS falhe) — mantém os cantos do retângulo da img clipados pela curva. */
  overflow: hidden;
}
/* Fallback img (mostrado só se JS quebrar — qr-styled.js remove esta img
   e injeta o SVG estilizado no lugar). */
.evx-p4-qr-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
/* SVG renderizado por qr-styled.js — preenche 100% do frame interno. */
.evx-p4-qr-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Logo da Amazônia Plug no centro do QR.
   - position absolute em cima da img do QR
   - 18% do QR (40px num QR de 220px) = dentro da margem ECC level M (~15-25%)
   - placa branca arredondada com borda fina pra contraste e leitura segura */
.evx-p4-qr-frame { position: relative; }
.evx-p4-qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px #fff;
  pointer-events: none;
}
.evx-p4-qr-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.evx-p4-qr-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: #f5f5f5;
  border-radius: 8px;
}
.evx-p4-qr-help {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.evx-p4-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.evx-p4-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}
.evx-p4-divider-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.evx-p4-codebox {
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  /* Trunca em 1 linha — o user copia via botão "Copiar código PIX" abaixo,
     não precisa ler o código inteiro inline. Visual fica mais limpo. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.evx-p4-copy-btn {
  width: 100%;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.evx-p4-copy-btn.is-copied .evx-p4-copy-icon { color: var(--status-success); }
.evx-p4-copy-btn.is-copied .evx-p4-copy-label { color: var(--status-success); }

.evx-p4-alert {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-top: 14px;
  margin-bottom: 18px;
  align-items: flex-start;
}
.evx-p4-alert--warning {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: rgba(245, 158, 11, 1);
}
.evx-p4-alert--success {
  background: rgba(0, 166, 81, 0.10);
  border: 1px solid rgba(0, 166, 81, 0.28);
  color: var(--status-success);
}
.evx-p4-alert[hidden] { display: none; }
.evx-p4-alert-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.evx-p4-alert-msg { font-size: 12px; opacity: 0.85; margin-top: 2px; line-height: 1.4; }

.evx-p4-poll-row {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.evx-p4-poll-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.evx-p4-poll-right {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.evx-p4-mini-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,255,167,0.18);
  border-top-color: var(--brand-primary);
  animation: evx-spin 0.9s linear infinite;
}
@keyframes evx-spin { to { transform: rotate(360deg); } }

.evx-p4-support {
  margin-top: 18px;
  text-align: center;
}

/* WhatsApp chip dismissable (já tinha, mas garantia) */
.evx-chip-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.32);
  color: #25D366;
  border-radius: 999px;
  font-size: 12px;
  margin: 12px 20px 0;
  animation: evx-fade-in 0.4s ease;
}

/* ─── P2 → P4 loading overlay ────────────────────────────────────────────── */
/* Aparece via JS quando htmx submete o form de P2 ("Gerar QR Code PIX").
   Cobre a tela inteira com spinner + texto, dando sensação de loading antes
   do swap pra P4. Mínimo 1.2s visível garantido pelo JS. */
.evx-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(7, 16, 14, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.evx-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.evx-loading-overlay__spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(0,255,167,0.18);
  border-top-color: var(--brand-primary);
  animation: evx-spin 0.9s linear infinite;
}
.evx-loading-overlay__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-primary);
  margin: 0;
}
.evx-loading-overlay__sub {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
}

/* ─── P4 Expired — link expirado (fiel ao protótipo LinkExpiredScreen) ───── */
.evx-p4-expired-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 14px;
}
.evx-p4-expired-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(209, 67, 67, 0.10);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-danger);
}
.evx-p4-expired-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.evx-p4-expired-msg {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.evx-p4-expired-steps {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
}
.evx-p4-expired-steps-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.evx-p4-expired-step {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.evx-p4-expired-step:last-child { border-bottom: none; }
.evx-p4-expired-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tenant-primary-dark);  /* texto claro por cima: 4,45:1 (o tom cheio dava 3,19:1) */
  color: var(--tenant-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.evx-p4-expired-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.evx-p4-expired-step-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.evx-p4-alert--info {
  background: rgba(0, 168, 232, 0.10);
  border: 1px solid rgba(0, 168, 232, 0.28);
  color: rgba(0, 168, 232, 1);
}

/* ─── P2 submit error toast ─────────────────────────────────────────────── */
/* Aparece quando htmx submit do P2 retorna 5xx ou erro de rede.
   Persistente até o user fechar (×) ou auto-dismiss em 8s.  */
.evx-submit-error-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10000;
  min-width: 280px;
  max-width: 92vw;
  padding: 14px 16px 14px 14px;
  background: rgba(209, 67, 67, 0.95);
  color: #fff;
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  animation: evx-toast-in 0.28s ease;
  font-size: 13px;
  line-height: 1.45;
}
.evx-submit-error-toast.is-leaving {
  animation: evx-toast-out 0.32s ease forwards;
}
.evx-submit-error-toast svg {
  flex-shrink: 0;
  color: #fff;
}
.evx-submit-error-text {
  flex: 1;
}
.evx-submit-error-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin: -4px -4px 0 0;
  opacity: 0.85;
}
.evx-submit-error-close:hover { opacity: 1; }
@keyframes evx-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes evx-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 20px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   P2-CC (Cartão de Crédito) + P7 (Recarga em Andamento)
   Classes ausentes — adicionadas aqui SEM mexer nos .templ existentes.
   Referência: design/jornada-cliente/project/app/screens/p2-method.jsx
               design/jornada-cliente/project/app/screens/p7-p8.jsx
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Phase wrapper base ─────────────────────────────────────────────────── */
.evx-phase {
  animation: evx-fade-in 0.22s ease;
}
.evx-phase-p2-cc { /* P2 cartão — sem override extra, herda evx-phase */ }
.evx-phase-p7    { /* P7 recarga em andamento — sem override extra */ }

/* ─── Page subtitle ──────────────────────────────────────────────────────── */
/* JSX p2-method.jsx & p7-p8.jsx: fontSize 13, color text-secondary, lineHeight 1.5 */
.evx-page-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 18px;
  line-height: 1.5;
}

/* ─── Form layout ────────────────────────────────────────────────────────── */
.evx-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  position: relative;  /* âncora para evx-card-brand absolute */
}
.evx-form-row {
  display: flex;
  gap: 10px;
}
.evx-form-col {
  flex: 1;
  min-width: 0;
}
.evx-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}
.evx-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
  margin-top: 3px;
  line-height: 1.4;
}

/* ─── Card number input ──────────────────────────────────────────────────── */
/* Reserva espaço à direita para o badge de bandeira (evx-card-brand) */
.evx-input-card {
  padding-right: 52px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-size: 16px;
}
/* Span vazia populada por JS com a bandeira detectada (Visa, Master, etc.) */
.evx-card-brand {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  pointer-events: none;
  line-height: 28px;
}

/* ─── Connector grid + cards (selector de conector) ─────────────────────── */
/* JSX p2-method.jsx:17-47: grid horizontal, selected = bg tenant-primary */
.evx-connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.evx-connector-card {
  display: block;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-default);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
}
/* Radio escondido — estado visual via :has */
.evx-connector-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.evx-connector-card:has(input[type="radio"]:checked) {
  background: var(--tenant-primary-soft);
  border-color: var(--tenant-primary);
}
.evx-connector-card:hover {
  border-color: var(--tenant-primary);
}
.evx-connector-label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.evx-connector-power {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.evx-connector-card:has(input[type="radio"]:checked) .evx-connector-power {
  color: var(--tenant-primary);
}

/* ─── Select wrapper + select ────────────────────────────────────────────── */
.evx-select-wrapper {
  position: relative;
}
.evx-select-wrapper::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-tertiary);
  pointer-events: none;
}
.evx-select {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  font-size: 16px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.evx-select:focus {
  border-color: var(--tenant-primary);
  box-shadow: 0 0 0 4px var(--tenant-primary-soft);
}

/* ─── Tokenização / salvar cartão ────────────────────────────────────────── */
/* JSX p2-method.jsx:793-811: checkbox opt-in LGPD + link "Ver política" */
.evx-tokenization-group {
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}
.evx-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
}
.evx-checkbox-label input[type="checkbox"] {
  accent-color: var(--tenant-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.evx-link-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--tenant-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline;
}
.evx-link-inline:hover { color: var(--tenant-primary-dark); }

/* ─── Button modifiers ───────────────────────────────────────────────────── */
.evx-btn-full {
  width: 100%;
}
/* Outline danger — usado no botão "Encerrar recarga" de P7 */
.evx-btn-outline-danger {
  background: transparent;
  color: var(--status-danger);
  border: 1.5px solid var(--status-danger);
  box-shadow: none;
}
.evx-btn-outline-danger:hover { background: var(--status-danger-soft); }

/* ─── Footer links ───────────────────────────────────────────────────────── */
/* Links de rodapé do card ("Trocar método" / "Ajuda WhatsApp") */
.evx-footer-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.evx-footer-links a {
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
}
.evx-footer-links a:hover { color: var(--text-secondary); }

/* ─── Text utilities ─────────────────────────────────────────────────────── */
.evx-text-muted { color: var(--text-tertiary); }
.evx-text-sm    { font-size: 11px; line-height: 1.4; }

/* ─── Modal (native <dialog>) ────────────────────────────────────────────── */
/* Suporta dialog.showModal() + backdrop nativo */
.evx-modal {
  border: none;
  border-radius: var(--r-xl);
  padding: 0;
  max-width: min(90vw, 380px);
  width: 100%;
  box-shadow: var(--shadow-lg);
  background: var(--bg-card);
}
.evx-modal::backdrop {
  background: rgba(14, 22, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* evx-modal-content usa evx-card como classe extra (já tem bg branco + sombra) */
.evx-modal-content {
  padding: 24px 20px 20px;
  border-radius: inherit;
}
.evx-modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.evx-modal-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 18px;
}
.evx-modal-actions {
  display: flex;
  gap: 8px;
}
.evx-modal-actions .evx-btn {
  flex: 1;
  height: 48px;
}

/* ─── Summary box (P2 pricing breakdown legado) ──────────────────────────── */
.evx-summary-box {
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-subtle);
}
.evx-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.evx-summary-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.evx-divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 2px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   P7 — Recarga em Andamento
   Design ref: p7-p8.jsx:10-318 · hero escuro + bateria vertical + telemetria
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Offline banner ─────────────────────────────────────────────────────── */
.evx-offline-banner {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--status-warning-soft);
  border: 1px solid rgba(217,119,6,0.22);
  color: var(--status-warning);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.evx-offline-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.evx-offline-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-warning);
  flex: 0 0 auto;
  animation: evx-offline-pulse 1.4s ease-in-out infinite;
}
@keyframes evx-offline-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.evx-offline-banner__msg {
  margin: 6px 0 0;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-secondary);
}
.evx-offline-banner__msg strong { color: var(--status-warning); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .evx-offline-banner__dot { animation: none; } }

/* ─── P7 main card — tema escuro (dark-mode contextual) ─────────────────── */
/* JSX p7-p8.jsx:206-235: dark gradient hero + bateria + telemetria tudo num card */
.evx-card.evx-p7-main {
  background: linear-gradient(145deg, #0D2620 0%, #0E1614 55%, #11201E 100%);
  border-color: rgba(91,232,155,0.14);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  color: #fff;
  padding: 20px;
}
.evx-card.evx-p7-main .evx-page-title {
  color: #fff;
  text-align: center;
}
.evx-card.evx-p7-main .evx-page-subtitle {
  color: rgba(255,255,255,0.60);
  text-align: center;
  font-size: 12px;
}

/* ─── Bateria — widget vertical centralizado ─────────────────────────────── */
/* Estrutura do templ:
   evx-battery-widget
     evx-battery-body   (barril — ordem 1)
       evx-battery-fill.evx-bolt  (height: %)
     evx-battery-pole   (nó terminal — forçado no topo via order: 0)
     span.evx-battery-percent    (texto abaixo — order: 2)
*/
.evx-battery-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin: 8px auto 20px;
}
/* Polo (terminal superior) */
.evx-battery-pole {
  order: 0;
  width: 42px;
  height: 8px;
  background: rgba(255,255,255,0.72);
  border-radius: 4px 4px 0 0;
  flex-shrink: 0;
}
/* Barril */
.evx-battery-body {
  order: 1;
  width: 108px;
  height: 154px;
  border-radius: 0 0 14px 14px;
  border: 2.5px solid rgba(255,255,255,0.72);
  border-top: none;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  /* Linhas de segmento (10 divisões horizontais) */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent calc(10% - 1px),
    rgba(255,255,255,0.08) calc(10% - 1px),
    rgba(255,255,255,0.08) 10%
  );
}
/* Preenchimento — cresce de baixo pra cima com height: % vindo do templ */
.evx-battery-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, #00C85A 0%, #5BE89B 100%);
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Animação de "carga pulsando" — usa keyframe evx-bolt-pulse de tokens.css */
.evx-battery-fill.evx-bolt {
  animation: evx-bolt-pulse 2.2s ease-in-out infinite;
}
/* Percentual abaixo do barril */
.evx-battery-percent {
  order: 2;
  display: block;
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  line-height: 1;
}

/* ─── Telemetria (grade 2×N) ─────────────────────────────────────────────── */
/* JSX p7-p8.jsx:264-305: grid 2-col de itens com label uppercase + valor verde */
.evx-telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.evx-telemetry-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evx-telemetry-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evx-telemetry-value {
  font-size: 14px;
  font-weight: 700;
  color: #5BE89B;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ─── Stop group ─────────────────────────────────────────────────────────── */
.evx-stop-group {
  margin-top: 4px;
}
/* Botão "Encerrar recarga" — borda e texto danger com adaptação pro card escuro */
.evx-card.evx-p7-main .evx-btn-outline-danger {
  color: rgba(255, 90, 90, 0.92);
  border-color: rgba(255, 90, 90, 0.38);
}
.evx-card.evx-p7-main .evx-btn-outline-danger:hover {
  background: rgba(255, 90, 90, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   P5 — Aguardando plug-in (S5_PLUG_IN)
   Classes usadas em activation/p5_coordination.templ:
   evx-card-centered, evx-cable-icon, evx-low-pulse, evx-spinner, evx-spin,
   evx-status-icon, evx-status-note
   ═══════════════════════════════════════════════════════════════════════════ */
.evx-phase-p5 { /* herda evx-phase — fade-in na entrada */ }

/* Card centralizado — conteúdo empilhado no eixo vertical e centrado */
.evx-card-centered {
  padding: 32px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Ícone de cabo — emoji grande com pulso suave */
.evx-cable-icon {
  font-size: 52px;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

/* Classe de animação de pulso lento — aplica o keyframe já definido */
.evx-low-pulse {
  animation: evx-low-pulse 2.4s ease-in-out infinite;
}

/* Spinner — anel animado usando o mesmo padrão do P4 */
.evx-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(0, 166, 81, 0.15);
  border-top-color: var(--tenant-primary);
  flex-shrink: 0;
}

/* Classe que dispara a animação de giro contínuo */
.evx-spin {
  animation: evx-spin 0.85s linear infinite;
}

/* Ícone de status (aviso, offline, etc.) — tamanho médio, sem animação */
.evx-status-icon {
  font-size: 40px;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

/* Nota de rodapé discreta no card */
.evx-status-note {
  font-size: 11px;
  line-height: 1.45;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   P7 — Novos elementos: chip AC/DC, header com chip, linha de início
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header row: título + chip AC/DC lado a lado, centralizados */
.evx-p7-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
/* Quando o título está dentro do header row, reseta a margem padrão */
.evx-p7-header .evx-page-title {
  margin-bottom: 0;
}

/* Chip AC/DC — pill pequena sobre o card escuro */
.evx-kind-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.evx-kind-chip--dc {
  background: rgba(91, 232, 155, 0.16);
  color: #5BE89B;
  border-color: rgba(91, 232, 155, 0.22);
}
.evx-kind-chip--ac {
  background: rgba(156, 211, 240, 0.14);
  color: #9CD3F0;
  border-color: rgba(156, 211, 240, 0.20);
}

/* Linha de data/hora de início — subtítulo discreto abaixo do subtitle */
.evx-p7-start-row {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.40);
  margin: -10px 0 14px;
  letter-spacing: 0.01em;
}

/* ───────────────────────────────────────────────────────────────────────────
   P7 v2 — Layout redesenhado (mockup p7-p8.jsx + screenshots)
   Novas classes que substituem evx-p7-main / evx-battery-widget / evx-telemetry-grid.
   Classes antigas mantidas para não quebrar regressão — apenas deixaram de ser usadas.
   ─────────────────────────────────────────────────────────────────────────── */

/* Wrapper do banner offline — provê padding horizontal fora do evx-screen-content */
.evx-p7-offline-wrap {
  padding: 12px 20px 0;
}

/* Cabeçalho de sessão — "Recarga Ativa" + meta (#TXID · estação) */
.evx-p7-session-header {
  margin-bottom: 14px;
}
.evx-p7-session-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.15;
}
.evx-p7-session-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.evx-p7-session-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tenant-primary);
  font-weight: 700;
  font-size: 12px;
}
.evx-p7-session-sep {
  color: var(--text-tertiary);
  user-select: none;
}
.evx-p7-session-station {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Hero card — dark gradient comum a DC e AC */
.evx-p7-hero {
  background: linear-gradient(150deg, #0D2820 0%, #0E1614 60%, #111F1C 100%);
  border: 1px solid rgba(91, 232, 155, 0.14);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  color: #fff;
  padding: 22px 18px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Brilho radial decorativo no topo do hero */
.evx-p7-hero__glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 232, 155, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

/* Círculo com raio pulsante — modo DC */
.evx-p7-hero__circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(91, 232, 155, 0.16);
  border: 2px solid rgba(91, 232, 155, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #5BE89B;
  animation: evx-bolt-pulse 2.4s ease-in-out infinite;
}

/* Percentual grande SoC */
.evx-p7-hero__percent {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.evx-p7-hero__unit {
  font-size: 26px;
  font-weight: 700;
  opacity: 0.75;
  vertical-align: baseline;
  margin-left: 1px;
}

/* ── SoC modo DC: número + barra de bateria (base + ganho da sessão + início) ─ */
/* inherits:true é essencial — --soc/--start são setados em .evx-p7-battery e lidos
   pelos FILHOS (__base/__gain/__startmark); com inherits:false eles pegariam o
   initial-value (0) e a barra ficaria estagnada no início. */
@property --soc   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --start { syntax: '<number>'; inherits: true; initial-value: 0; }

/* Cabeçalho: raio + número grande + legenda curta */
.evx-p7-soc-head {
  display: flex; align-items: baseline; justify-content: center;
  gap: 7px; margin-bottom: 14px;
}
.evx-p7-soc-bolt {
  display: flex; align-self: center; color: #5BE89B;
  animation: evx-bolt-pulse 2.4s ease-in-out infinite;
}
.evx-p7-soc-pct {
  font-size: 46px; font-weight: 900;
  letter-spacing: -0.04em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.evx-p7-soc-unit { font-size: 22px; font-weight: 700; opacity: 0.72; margin-left: 1px; }
.evx-p7-soc-cap {
  align-self: center;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

/* Barra: trilho + nub da bateria */
.evx-p7-battery {
  --soc: 0; --start: 0;
  display: flex; align-items: center; gap: 3px;
  margin: 9px 2px 0;
}
.evx-p7-battery__wrap { position: relative; flex: 1; }
.evx-p7-battery__track {
  position: relative;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.evx-p7-battery__cap {
  width: 4px; height: 11px;
  border-radius: 0 2px 2px 0;
  background: rgba(255, 255, 255, 0.22);
}
/* base 0→início: carga que o veículo já tinha (verde apagado) */
.evx-p7-battery__base {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--start) * 1%);
  background: rgba(91, 232, 155, 0.26);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ganho início→atual: o que carregou NESTA sessão (verde vivo + shine) */
.evx-p7-battery__gain {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--start) * 1%);
  width: calc((var(--soc) - var(--start)) * 1%);
  background: linear-gradient(90deg, #00C85A 0%, #5BE89B 100%);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.evx-p7-battery__shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100%);
  animation: evx-shine 2.6s ease-in-out infinite;
}
/* marcador vertical do ponto de início — pino (linha + bolinha) fora do clip do track */
.evx-p7-battery__startmark {
  position: absolute; top: -3px; bottom: -3px;
  left: calc(var(--start) * 1%);
  width: 2px; margin-left: -1px;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.evx-p7-battery__startmark::before {
  content: '';
  position: absolute; top: -5px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}
/* ponteiro do estado ATUAL — espelha o pino de início, mas verde mint e pulsante;
   desliza com --soc conforme a carga evolui (transition p/ o caso same-element). */
.evx-p7-battery__nowmark {
  position: absolute; top: -3px; bottom: -3px;
  left: calc(var(--soc) * 1%);
  width: 2px; margin-left: -1px;
  background: #5BE89B;
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(91, 232, 155, 0.6);
  z-index: 6;
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.evx-p7-battery__nowmark::before {
  content: '';
  position: absolute; top: -5px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%;
  background: #5BE89B;
  box-shadow: 0 0 6px rgba(91, 232, 155, 0.7);
  /* centralização via margin-left (não transform): evx-bolt-pulse anima transform:scale
     e sobrescreveria um translateX(-50%), jogando a bolinha pro lado. */
  animation: evx-bolt-pulse 1.8s ease-in-out infinite;
}
.evx-p7-battery--low .evx-p7-battery__nowmark { background: #FF8A8A; box-shadow: 0 0 6px rgba(255, 138, 138, 0.6); }
.evx-p7-battery--low .evx-p7-battery__nowmark::before { background: #FF8A8A; box-shadow: 0 0 6px rgba(255, 138, 138, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .evx-p7-battery__nowmark::before { animation: none; }
  .evx-p7-battery__nowmark { transition: none; }
}
/* SoC baixo (<20%): ganho vermelho de alerta */
.evx-p7-battery--low .evx-p7-battery__gain {
  background: linear-gradient(90deg, #DC2626 0%, #FF6B6B 100%);
}
.evx-p7-battery--low .evx-p7-soc-bolt { color: #FF8A8A; }
/* SoC alto (>=80%): mint brilhante */
.evx-p7-battery--high .evx-p7-battery__gain {
  background: linear-gradient(90deg, #34D77F 0%, #7CF0AD 100%);
}

/* Legenda: início · ganho da sessão */
.evx-p7-soc-legend {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin-top: 11px;
  font-size: 11.5px;
}
.evx-p7-soc-legend__start { color: rgba(255, 255, 255, 0.55); }
.evx-p7-soc-legend__dot { color: rgba(255, 255, 255, 0.3); }
.evx-p7-soc-legend__gain {
  color: #5BE89B; font-weight: 700;
  background: rgba(91, 232, 155, 0.12);
  border: 1px solid rgba(91, 232, 155, 0.22);
  padding: 2px 9px; border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .evx-p7-soc-bolt, .evx-p7-battery__shine { animation: none; }
  .evx-p7-battery__base, .evx-p7-battery__gain { transition: none; }
}

/* ── AC hero compacto: linha ícone + títulos, stats abaixo ────────────────── */
.evx-p7-ac-top {
  display: flex; align-items: center; gap: 12px;
  text-align: left; margin-bottom: 14px;
}
.evx-p7-ac-headings { min-width: 0; }

/* "Carregando" */
.evx-p7-hero__charging-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tipo de estação (ex: "Recarga rápida · DC") */
.evx-p7-hero__kind-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Hero AC — mesma dark card, layout diferente */
.evx-p7-hero--ac { /* modifier sobre .evx-p7-hero */ }

/* Ícone de raio — modo AC (badge à esquerda na linha compacta) */
.evx-p7-hero__bolt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: rgba(91, 232, 155, 0.16);
  border: 1px solid rgba(91, 232, 155, 0.22);
  border-radius: var(--r-md);
  margin: 0;
  color: #5BE89B;
}

/* Título principal — modo AC */
.evx-p7-hero__ac-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.2;
}

/* Subtítulo AC — "Estação AC · Recarga lenta" */
.evx-p7-hero__ac-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: 0;
  letter-spacing: 0.01em;
}

/* Mini stats 2-col dentro do hero AC */
.evx-p7-hero__mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.evx-p7-hero__mini-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  text-align: center;
}
.evx-p7-hero__mini-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 4px;
}
.evx-p7-hero__mini-value {
  font-size: 15px;
  font-weight: 800;
  color: #5BE89B;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Barra horizontal de SoC (DC mode, abaixo do hero) ── */
.evx-p7-hbar-wrap {
  margin: 0 0 12px;
}
.evx-p7-hbar {
  height: 14px;
  background: rgba(14, 22, 20, 0.07);
  border: 1.5px solid var(--border-default);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 4px;
}
/* Segmentos via pseudo-elemento — 10 divisões */
.evx-p7-hbar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0%,
    transparent calc(10% - 1.5px),
    rgba(255, 255, 255, 0.16) calc(10% - 1.5px),
    rgba(255, 255, 255, 0.16) 10%
  );
  pointer-events: none;
  z-index: 2;
}
.evx-p7-hbar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #00C85A 0%, #5BE89B 100%);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: inherit;
  z-index: 1;
}
/* SoC baixo: pulsa em vermelho */
.evx-p7-hbar__fill--low {
  background: linear-gradient(90deg, #DC2626 0%, #FF6B6B 100%);
  animation: evx-low-pulse 1.6s ease-in-out infinite;
}
/* Brilho animado para SoC >= 80% */
.evx-p7-hbar__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: evx-shine 2.4s ease-in-out infinite;
}
.evx-p7-hbar__labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Linha de ETA — conclusão prevista */
.evx-p7-eta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(0, 166, 81, 0.05);
  border: 1px solid rgba(0, 166, 81, 0.14);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.evx-p7-eta-row strong {
  color: var(--tenant-primary);
  font-weight: 700;
}

/* ── Value cards 2-col ── */
.evx-p7-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
/* Linha-história do cupom (P7): conta que pagou menos mas carrega o valor cheio. */
.evx-p7-coupon-story {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 12px; padding: 10px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary);
  background: var(--tenant-primary-soft);
  border: 1px solid var(--tenant-primary);
}
.evx-p7-coupon-story svg { flex: none; margin-top: 1px; color: var(--tenant-primary); }
.evx-p7-coupon-story strong { color: var(--text-primary); font-weight: 700; }
.evx-p7-value-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 14px 12px;
}
.evx-p7-value-card--accent {
  border-color: rgba(0, 166, 81, 0.28);
}
.evx-p7-value-card__label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 5px;
}
.evx-p7-value-card__amount {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.evx-p7-value-card--accent .evx-p7-value-card__amount {
  color: var(--tenant-primary);
}

/* ── Detalhes da Sessão (accordion) ── */
.evx-p7-details {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 14px;
}
.evx-p7-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 8px;
}
.evx-p7-details__summary::-webkit-details-marker { display: none; }
.evx-p7-details__summary-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-weight: 600;
}
.evx-p7-details__chevron {
  color: var(--text-tertiary);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
details[open] .evx-p7-details__chevron {
  transform: rotate(180deg);
}
.evx-p7-details__body {
  border-top: 1px solid var(--border-subtle);
  padding: 6px 0 4px;
}
.evx-p7-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.evx-p7-details__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
}
/* 🔴 Abaixo de 360px (iPhone SE) as duas colunas NÃO cabem: a track de grid tem
   min-width:auto e não encolhe, e os itens vazavam 35px para fora da tela. Empilhar em uma
   coluna resolve sem truncar nada.
   A tentativa anterior — minmax(0,1fr) + min-width:0 — parava o vazamento mas deixava a
   coluna encolher, e o rótulo passava a truncar ("RECARGA CONTRAT…") em 390px, onde antes
   cabia inteiro: trocava um defeito de tela rara por um de tela comum. */
@media (max-width: 359px) {
  .evx-p7-details__grid { grid-template-columns: 1fr; }
}
/* Item de largura completa (ex: Conector) */
.evx-p7-details__item--full {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
  padding-top: 10px;
  align-items: center;
}
.evx-p7-details__icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 1px;
}
.evx-p7-details__text {
  flex: 1;
  min-width: 0;
}
.evx-p7-details__label {
  font-size: 9px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evx-p7-details__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Chip "Charging" — verde pequeno à direita do conector */
.evx-p7-details__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--status-success-soft);
  color: var(--status-success);
  border: 1px solid rgba(0, 166, 81, 0.20);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Ações (botões) ── */
.evx-p7-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}

/* Botão vermelho sólido — "Encerrar Recarga" */
.evx-btn-danger-solid {
  background: var(--status-danger);
  color: #fff;
  border: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 14px rgba(220, 38, 38, 0.24);
}
.evx-btn-danger-solid:hover {
  background: #b91c1c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 6px 18px rgba(220, 38, 38, 0.30);
}
.evx-btn-danger-solid:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   P8 — Recibo final (redesign v2 — 2026-06-30)
   Design ref: Jornada-cliente-webapp2/app/screens/p7-p8.jsx § P8ReceiptScreen
   Multi-card layout: hero → resumo → troco PIX → fiscal → ações
   Nomenclatura: evx-p8-*
   ═══════════════════════════════════════════════════════════════════════════ */
.evx-phase-p8 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Badge de resultado (genérico, reusado em outras telas) ─────────────── */
.evx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 10px;
}
.evx-badge-success { background: var(--status-success-soft); color: var(--status-success); }
.evx-badge-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.evx-badge-info    { background: var(--status-info-soft);    color: var(--status-info);    }

/* Valor mono-espaçado (IDs, referências) */
.evx-text-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* ─── Utilitários reutilizáveis (cor semântica, espaçamento, layout) ────────── */
.evx-text-success { color: var(--status-success); }
.evx-text-danger { color: var(--status-danger); }
.evx-field-block { margin-top: 20px; }               /* espaçamento entre grupos de campo */
.evx-required-mark { color: var(--status-danger); margin-left: 2px; } /* asterisco obrigatório */
.evx-flex-1 { flex: 1; min-width: 0; }               /* item flex que encolhe sem estourar */
.evx-shrink-0 { flex-shrink: 0; }

.evx-text-info { color: var(--status-info); }
.evx-mb-0 { margin-bottom: 0; }
.evx-w-full { width: 100%; }
.evx-basis-full { flex-basis: 100%; }
.evx-text-left { text-align: left; }
.evx-disabled-look { opacity: 0.5; cursor: not-allowed; }
.evx-icon-top-nudge { flex-shrink: 0; margin-top: 2px; }   /* alinhamento fino de ícone */
.evx-stack-block { margin-top: 8px; margin-bottom: 14px; } /* bloco de mensagem/nota espaçado */
.evx-bg-info-soft { background: var(--status-info-soft); }

/* Tons de status (fundo suave + cor) — pílulas/notas de estado, reutilizável */
.evx-tone-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.evx-tone-danger { background: var(--status-danger-soft); color: var(--status-danger); }
.evx-tone-info { background: var(--status-info-soft); color: var(--status-info); }

/* Link com aparência de botão (centralizado, altura de botão, sem sublinhado) */
.evx-btn-link-center { display: flex; align-items: center; justify-content: center; height: 52px; text-decoration: none; }

/* Componentes específicos (evita inline no P2) */
.evx-breakdown-total-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.evx-voucher-applied-icon { color: var(--status-success); flex-shrink: 0; }

/* ─── Hero card — SVG status + métricas principais ───────────────────────── */
.evx-p8-hero-card {
  text-align: center;
  padding: 28px 20px 22px;
  border-radius: var(--r-2xl);
}
.evx-p8-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.evx-p8-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.3;
}
.evx-p8-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 280px;
  line-height: 1.5;
}

/* Status em UMA linha — ícone + título + badge (mínimo de vertical). */
.evx-p8-hero-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
}
.evx-p8-hero-line__icon {
  flex-shrink: 0;
  display: flex;
}
.evx-p8-hero-line__icon svg {
  width: 26px;
  height: 26px;
}
/* 🔴 O título QUEBRA, não corta. `text-overflow: ellipsis` transformava "Recarga encerrada
   por problema técnico" em "Recarga encerrada por proble…" — e esconder justamente o motivo
   do encerramento é perder a única informação que a linha tinha para dar. Reticências servem
   para nome de arquivo, não para o que aconteceu com a recarga do cliente. */
.evx-p8-hero-line__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Bloco "Uso e valores" — pago − devolvido = usado, troco inline. */
.evx-p8-calc-card {
  padding: 14px 18px;
  border-radius: var(--r-xl);
}
.evx-p8-calc-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.evx-p8-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.evx-p8-calc-row__label {
  font-size: 13px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.evx-p8-calc-row__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.evx-p8-calc-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 2px 0;
}
.evx-p8-calc-row--refund .evx-p8-calc-row__label { color: var(--status-success); }
.evx-p8-calc-row__value--refund { color: var(--status-success); }
/* 🔴 O estorno PENDENTE é âmbar, não verde — e vale para o rótulo E para o valor.
   O valor herdava `--value--refund` (verde) mesmo na linha pendente, então o recibo pintava
   de "concluído" um estorno que ainda estava em processamento. A cor é lida antes do texto,
   e aqui ela afirmava o contrário dele. Mesma escolha no PDF (receipt/pdf.go), porque o
   cliente compara os dois documentos. */
.evx-p8-calc-row--pending .evx-p8-calc-row__label,
.evx-p8-calc-row--pending .evx-p8-calc-row__value--refund { color: var(--status-warning); }
.evx-p8-calc-row--pending .evx-p8-refund-spinner { border-top-color: var(--status-warning); }
.evx-p8-calc-row--total .evx-p8-calc-row__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.evx-p8-calc-row--total .evx-p8-calc-row__value {
  font-size: 18px;
  font-weight: 800;
}
.evx-p8-calc-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 10px 0 0;
  line-height: 1.4;
}

/* Recibo em seções — alinhado ao layout do PDF (Estação → Cliente → Sessão → Uso e
   valores → Prestador → Administradora → Rodapé). Um card com seções divididas. */
.evx-p8-receipt-card {
  padding: 0;
  overflow: hidden;
}
.evx-p8-section {
  padding: 14px 18px;
}
.evx-p8-section + .evx-p8-section {
  border-top: 1px solid var(--border-subtle);
}
.evx-p8-section__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.evx-p8-section--values {
  background: var(--bg-subtle);
}
.evx-p8-receipt-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.7;
}

/* Stats row: energia | total cobrado */
.evx-p8-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.evx-p8-hero-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.evx-p8-hero-stat__label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.evx-p8-hero-stat__value {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.evx-p8-hero-divider {
  width: 1px;
  height: 36px;
  background: var(--border-default);
  flex-shrink: 0;
  margin: 0 12px;
}

/* ─── Card padrão de seção ───────────────────────────────────────────────── */
.evx-p8-section-card {
  padding: 16px 18px;
  border-radius: var(--r-xl);
}

/* Header de card: icon tile + título */
.evx-p8-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.evx-p8-card-hdr__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Icon tile — quadrado arredondado com ícone SVG */
.evx-p8-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.evx-p8-icon-tile--success {
  background: var(--status-success-soft);
  color: var(--status-success);
}

/* Rows: label + valor com separadores internos */
.evx-p8-rows {
  display: flex;
  flex-direction: column;
}
.evx-p8-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.evx-p8-row--last {
  border-bottom: none;
}
.evx-p8-row__label {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.evx-p8-row__value {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}
.evx-p8-row__value--muted {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* ─── Troco / Estorno PIX — DESTAQUE VERDE ───────────────────────────────── */
/* Este card SÓ aparece quando HasRefund=true (PIX).
   Cartão com borda verde esquerda + fundo levemente verde,
   e o valor devolvido em destaque grande.                                     */
.evx-p8-refund-card {
  padding: 0;
  border-radius: var(--r-xl);
  border-left: 4px solid var(--status-success) !important;
  overflow: hidden;
}
/* Estado "processando devolução" — enquanto o estorno não liquidou (auto-poll). */
.evx-p8-refund-card--pending {
  border-left-color: var(--status-info) !important;
}
.evx-p8-refund-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--status-info-soft);
  border-top-color: var(--status-info);
  animation: evx-spin 0.7s linear infinite;
  display: inline-block;
}
.evx-p8-card-hdr--success {
  background: var(--status-success-soft);
  padding: 12px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 166, 81, 0.12);
}
.evx-p8-refund-hdr-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tag "PIX" ao lado do título */
.evx-p8-refund-pix-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--status-success);
  border-radius: var(--r-full);
  padding: 2px 8px;
  line-height: 1.6;
}

/* Texto explicativo dentro do card de troco */
.evx-p8-refund-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding: 12px 18px 4px;
  margin: 0;
}

/* Bloco de destaque: label + valor grande em verde */
.evx-p8-refund-amount-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 16px;
}
.evx-p8-refund-amount__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.evx-p8-refund-amount__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--status-success);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ─── Dados fiscais — nota no rodapé do card ─────────────────────────────── */
.evx-p8-fiscal-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

/* ─── Ações ──────────────────────────────────────────────────────────────── */
.evx-p8-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}
/* Aviso de reutilização no recibo: estação segue ocupada pelo cabo do próprio usuário. */
.evx-p8-reuse-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 12px; padding: 11px 13px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.evx-p8-reuse-note svg { flex: none; margin-top: 1px; color: var(--tenant-primary); }
.evx-p8-reuse-note strong { color: var(--text-primary); font-weight: 600; }
.evx-p8-actions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.evx-p8-actions__btn {
  height: 46px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   P4 — Botão dev "Simular pagamento"
   ═══════════════════════════════════════════════════════════════════════════ */

/* Separador + botão dev — só aparece quando DevSimulateEnabled=true */
.evx-p4-dev-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.evx-p4-dev-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.evx-btn-dev {
  background: transparent;
  border: 1.5px dashed var(--status-warning);
  color: var(--status-warning);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-md);
  height: 42px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.evx-btn-dev:hover { background: var(--status-warning-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   P5 v2 — Pagamento confirmado / Como Conectar
   Design ref: Jornada-cliente-webapp2/app/screens/p5-p6.jsx
               Jornada-cliente-webapp2/uploads/P5-Pronto pera ativar.jpeg
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Top success card ───────────────────────────────────────────────────── */
.evx-p5-success-card {
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 14px;
  border-radius: var(--r-2xl);
}

/* Círculo verde com checkmark SVG */
.evx-p5-check-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--status-success-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  animation: evx-fade-in 0.4s ease;
}

/* "Pagamento Aprovado!" */
.evx-p5-success-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Pílula verde com valor reservado */
.evx-p5-amount-strip {
  background: var(--tenant-primary-soft);
  border-radius: var(--r-md);
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tenant-primary);
  margin-top: 12px;
}

/* ─── P5: hero + polling vivo + card do conector (aderência ao mockup) ─────── */
.evx-p5-hero { padding: 26px 20px 20px; text-align: center; border-radius: 24px; margin-bottom: 14px; }
.evx-p5-hero-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tenant-primary-soft); color: var(--tenant-primary); }
.evx-p5-hero-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.evx-p5-hero-sub { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.5; }

.evx-p5-polling { padding: 14px 16px; border-radius: 20px; margin-bottom: 14px; }
.evx-p5-polling-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.evx-p5-polling-spinner { display: block; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--border-subtle); border-top-color: var(--tenant-primary);
  animation: evx-spin 0.8s linear infinite; }
.evx-p5-polling-label { font-size: 12px; color: var(--text-secondary); }
.evx-p5-polling-auto { margin-left: auto; font-size: 10px; color: var(--text-tertiary); }
.evx-p5-polling-dots { display: flex; gap: 4px; }
.evx-p5-polling-dots span { flex: 1; height: 3px; border-radius: 2px;
  background: var(--bg-muted); animation: evx-p5-dot 5s ease-in-out infinite; }
.evx-p5-polling-dots span:nth-child(2) { animation-delay: 1s; }
.evx-p5-polling-dots span:nth-child(3) { animation-delay: 2s; }
.evx-p5-polling-dots span:nth-child(4) { animation-delay: 3s; }
.evx-p5-polling-dots span:nth-child(5) { animation-delay: 4s; }
@keyframes evx-p5-dot {
  0%, 100% { background: var(--bg-muted); }
  10%, 50% { background: var(--tenant-primary); }
}

.evx-p5-connector { padding: 16px; border-radius: 20px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 14px; }
.evx-p5-connector-badge { position: relative; width: 56px; height: 56px; flex: none; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #00A651 0%, #008A43 100%); }
.evx-p5-connector-pulse { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--status-success);
  border: 2px solid var(--bg-card); animation: evx-pulse 1.5s ease-in-out infinite; }
.evx-p5-connector-info { flex: 1; min-width: 0; }
.evx-p5-connector-label { font-size: 10px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em; }
.evx-p5-connector-name { font-size: 15px; font-weight: 700; margin-top: 2px; }
.evx-p5-connector-elapsed { font-size: 11px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; flex: none; }

/* ─── Instructions card ──────────────────────────────────────────────────── */
.evx-p5-how-card {
  padding: 18px;
  border-radius: var(--r-xl);
  margin-bottom: 14px;
}

.evx-p5-how-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.evx-p5-how-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evx-p5-how-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Status banner (dentro do how-card) ─────────────────────────────────── */
.evx-p5-status-banner {
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.45;
}
.evx-p5-status-banner--info {
  background: var(--status-info-soft);
  color: var(--status-info);
  border: 1px solid rgba(3, 105, 161, 0.14);
}
.evx-p5-status-banner--success {
  background: var(--status-success-soft);
  color: var(--status-success);
  border: 1px solid rgba(0, 166, 81, 0.20);
}
.evx-p5-status-banner--warning {
  background: var(--status-warning-soft);
  color: var(--status-warning);
  border: 1px solid rgba(217, 119, 6, 0.20);
}
.evx-p5-status-banner--danger {
  background: var(--status-danger-soft);
  color: var(--status-danger);
  border: 1px solid rgba(220, 38, 38, 0.20);
}
.evx-p5-banner-icon  { flex-shrink: 0; margin-top: 2px; }
.evx-p5-banner-main  { font-weight: 600; }
.evx-p5-banner-sub   { font-size: 12px; opacity: 0.85; margin-top: 2px; }

/* Spinner pequeno dentro do banner (herda currentColor da variação) */
.evx-p5-banner-spinner {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.10);
  border-top-color: currentColor;
  flex-shrink: 0;
  margin-top: 2px;
  animation: evx-spin 0.85s linear infinite;
}

/* ─── Steps container ────────────────────────────────────────────────────── */
.evx-p5-steps { /* wrapper sem margem extra — banner já tem mb=14px */ }

.evx-p5-step {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.evx-p5-step--last {
  border-bottom: none;
}
.evx-p5-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.evx-p5-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.evx-p5-step-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

/* ─── Inline alert (ex: cabo há +10 min) ────────────────────────────────── */
.evx-p5-alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.evx-p5-alert--warning {
  background: var(--status-warning-soft);
  border: 1px solid rgba(217, 119, 6, 0.22);
  color: var(--status-warning);
}
.evx-p5-alert--info {
  background: var(--status-info-soft);
  border: 1px solid rgba(3, 105, 161, 0.15);
  color: var(--status-info);
}
.evx-p5-alert-icon  { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.evx-p5-alert-title { font-weight: 700; }
.evx-p5-alert-body  { font-size: 12px; opacity: 0.90; margin-top: 2px; }

/* ─── Connector indicator (visual, não clicável) ──────────────────────────── */
/* Estilizado como botão primário mas sem ação — informa qual conector usar */
.evx-p5-escape {
  margin-top: 12px;
  border: 1px solid var(--status-warning);
}

/* Header compacto: pagamento aprovado + conector numa barra fina colorida (topo). */
.evx-p5-approved {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tenant-primary-dark);  /* texto claro por cima: 4,45:1 (o tom cheio dava 3,19:1) */
  color: #fff;
  border-radius: var(--r-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 12px rgba(0, 166, 81, 0.22);
}
.evx-p5-approved-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.evx-p5-approved-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.evx-p5-approved-label {
  font-size: 13px;
  opacity: 0.92;
}
.evx-p5-approved-amount {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.evx-p5-approved-connector {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Sessão reaberta — reassegura pagamento válido (tom informativo). */
.evx-p5-reopened {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--status-info-soft);
  border: 1px solid var(--status-info);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.evx-p5-reopened-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.3;
}

/* Passos de resolução sempre visíveis (estados anormais) — simples, pra leitura fácil. */
.evx-p5-fix {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.evx-p5-fix-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}
.evx-p5-fix-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.3;
}

.evx-p5-connector-indicator {
  background: var(--tenant-primary-dark);  /* texto claro por cima: 4,45:1 (o tom cheio dava 3,19:1) */
  color: #fff;
  border-radius: var(--r-lg);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  cursor: default;
  user-select: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 166, 81, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   P6 v2 — Iniciando recarga (tela de transição passiva)
   Design ref: Jornada-cliente-webapp2/app/screens/p5-p6.jsx
               Jornada-cliente-webapp2/uploads/P6- ativacao Solicitada.jpeg
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Card principal (único) ─────────────────────────────────────────────── */
.evx-p6-main-card {
  padding: 28px 20px 24px;
  text-align: center;
  border-radius: var(--r-2xl);
  margin-bottom: 14px;
}

/* Spinner wrapper (centra o anel) */
.evx-p6-spinner-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* Spinner grande — anel fino, tenant-primary */
.evx-p6-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(0, 166, 81, 0.12);
  border-top-color: var(--tenant-primary);
  animation: evx-spin 0.9s linear infinite;
}

.evx-p6-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text-primary);
  line-height: 1.2;
}
.evx-p6-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Divisor horizontal */
.evx-p6-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 20px 0;
}

/* ─── Seção status da estação ────────────────────────────────────────────── */
.evx-p6-status-section { text-align: left; }

.evx-p6-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.evx-p6-section-head svg { color: var(--text-tertiary); flex-shrink: 0; }

/* Linha de detalhe: ícone + label/value */
.evx-p6-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.evx-p6-detail-row:last-child,
.evx-p6-detail-row--last {
  border-bottom: none;
}
.evx-p6-detail-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 3px;
}
.evx-p6-detail-text { flex: 1; min-width: 0; }
.evx-p6-detail-label {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.evx-p6-detail-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Chip "Preparando" — âmbar */
.evx-p6-chip-preparing {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--status-warning-soft);
  color: var(--status-warning);
  border: 1px solid rgba(217, 119, 6, 0.24);
  margin-top: 4px;
}

/* ─── Caixa de info (azul) ───────────────────────────────────────────────── */
.evx-p6-info-box {
  padding: 14px 16px;
  background: var(--status-info-soft);
  border-radius: var(--r-md);
  border: 1px solid rgba(3, 105, 161, 0.14);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--status-info);
  line-height: 1.45;
  margin-bottom: 14px;
}

/* ═══ P0-S + P4-expired — alinhamento ao design (2026-06-30) ══════════════ */

/* P4-expired: variante danger do alert inline (dentro do hero card) */
.evx-p4-alert--danger {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: var(--status-danger);
}

/* Seção "Dica" no P4-expired (ref: screenshot Link-expirado) */
.evx-p4-tip {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.evx-p4-tip__icon {
  color: var(--status-info);
  flex-shrink: 0;
  margin-top: 1px;
}
.evx-p4-tip__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}
.evx-p4-tip__body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Link de suporte (WhatsApp / support URL) em área de CTA */
.evx-link-support {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.evx-link-support:hover { color: var(--tenant-primary); }

/* P0: espaço inferior na área de ações (evita conteúdo colado no rodapé) */
.evx-status-actions { padding-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Energy hero — motivo compartilhado das telas de espera/ativação (P3, P6).
   Rima com o hero de P7 (mesma dark card + glow verde), mas no estado
   "energia se acumulando": anel com sweep girando + raio pulsando no centro.
   Dá vida/continuidade ao trecho PIX pós-pagamento: P3 → P5 → P6 → P7.
   ═══════════════════════════════════════════════════════════════════════════ */
.evx-energy-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #0D2820 0%, #0E1614 60%, #111F1C 100%);
  border: 1px solid rgba(91, 232, 155, 0.14);
  border-radius: var(--r-2xl);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.06);
  color: #fff;
  padding: 30px 22px 26px;
  text-align: center;
  animation: evx-fade-in 0.4s ease;
}

/* Brilho radial no topo — respira devagar */
.evx-energy-hero__glow {
  position: absolute;
  top: -70px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,232,155,0.16) 0%, transparent 65%);
  pointer-events: none;
  animation: evx-glow-breathe 3.2s ease-in-out infinite;
}
@keyframes evx-glow-breathe {
  0%,100% { opacity: .65; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Anel: trilho fino + sweep verde girando (indicador de "trabalhando") */
.evx-energy-ring {
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
}
.evx-energy-ring::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(91,232,155,0.14);
}
.evx-energy-ring::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(91,232,155,0.85) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: evx-spin 1.4s linear infinite;
}
/* Núcleo com raio pulsando */
.evx-energy-ring__core {
  position: absolute; inset: 14px;
  border-radius: 50%;
  background: rgba(91,232,155,0.14);
  border: 1px solid rgba(91,232,155,0.28);
  display: flex; align-items: center; justify-content: center;
  color: #5BE89B;
  animation: evx-bolt-pulse 2.2s ease-in-out infinite;
}

.evx-energy-hero__title {
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.2;
  margin: 0 0 6px; color: #fff;
  text-wrap: balance;
}
.evx-energy-hero__sub {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,0.62);
  margin: 0 auto; max-width: 300px;
}

/* Pontos de energia fluindo — progresso indeterminado, discreto */
.evx-energy-dots {
  display: flex; justify-content: center; gap: 7px;
  margin-top: 16px;
}
.evx-energy-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5BE89B;
  animation: evx-low-pulse 1.3s ease-in-out infinite;
}
.evx-energy-dots span:nth-child(2) { animation-delay: .18s; }
.evx-energy-dots span:nth-child(3) { animation-delay: .36s; }

/* Chip de tempo/hint sobre o dark hero */
.evx-energy-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 11px; color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums;
}
.evx-energy-chip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .evx-energy-hero,
  .evx-energy-hero__glow,
  .evx-energy-ring::after,
  .evx-energy-ring__core,
  .evx-energy-dots span { animation: none; }
  .evx-energy-ring::after { opacity: .6; }
}

/* ── P3: hero de espera pós-pagamento ────────────────────────────────────── */
.evx-p3-hero { max-width: 340px; width: 100%; }
.evx-p3-hint-row {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 14px;
  text-align: center;
}

/* ── P6: hero de ativação + card de status separado ──────────────────────── */
.evx-p6-hero { margin-bottom: 14px; }
.evx-p6-status-card { padding: 16px 18px 6px; margin-bottom: 14px; }

/* ── P6: card de etapas da ativação (Solicitando → Aguardando → Energizando) ── */
.evx-p6-steps { padding: 4px 18px; margin-bottom: 14px; }
.evx-p6-step { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle); }
.evx-p6-step:last-child { border-bottom: none; }
.evx-p6-step-dot { width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: #fff; }
.evx-p6-step--done .evx-p6-step-dot { background: var(--status-success); }
.evx-p6-step--active .evx-p6-step-dot { background: var(--tenant-primary-soft);
  border: 2px solid var(--tenant-primary); }
.evx-p6-step-pulse { width: 8px; height: 8px; border-radius: 50%;
  background: var(--tenant-primary); animation: evx-pulse 1s ease-in-out infinite; }
.evx-p6-step-label { font-size: 13px; color: var(--text-primary); }
.evx-p6-step--done .evx-p6-step-label { color: var(--text-tertiary); text-decoration: line-through; }
.evx-p6-step--active .evx-p6-step-label { font-weight: 600; }

/* ── P6r: cartão de notificação de falha (atenção, não erro fatal) ───────── */
.evx-p6r-card {
  padding: 28px 22px 22px;
  text-align: center;
}
.evx-p6r-icon-wrap {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--status-warning);
  background: var(--status-warning-soft);
  border: 1px solid rgba(217, 119, 6, 0.22);
}
.evx-p6r-card .evx-page-title { text-align: center; }
.evx-p6r-card .evx-page-subtitle { text-align: center; margin-bottom: 4px; }
.evx-p6r-reassure {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px auto 18px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--status-success-soft);
  color: var(--status-success);
  font-size: 12.5px; font-weight: 600;
}
.evx-p6r-reassure svg { flex-shrink: 0; }

/* ── P2 cartão salvo (cliente recorrente / tokenizado) ─────────────────────── */
.evx-saved-card {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-elevated);
  padding: 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evx-saved-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.evx-card-brand-badge {
  font-weight: 700;
  font-size: 13px;
  color: var(--tenant-on-primary);
  background: var(--tenant-primary-dark);  /* texto claro por cima: 4,45:1 (o tom cheio dava 3,19:1) */
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .02em;
}
.evx-saved-card-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--text-primary);
  font-size: 15px;
}
.evx-saved-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ─── Alertas inline (evx-alert) — usados no P6r e telas de orientação ───────── */
.evx-alert {
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px;
}
.evx-alert--info    { background: var(--status-info-soft);    color: var(--status-info);    border: 1px solid rgba(3,105,161,0.18); }
.evx-alert--warning { background: var(--status-warning-soft); color: var(--status-warning); border: 1px solid rgba(217,119,6,0.20); }
.evx-alert--danger  { background: var(--status-danger-soft);  color: var(--status-danger);  border: 1px solid rgba(220,38,38,0.20); }

/* ─── P6r — falha de ativação retentável (reconstruído fiel ao mock) ─────────── */
.evx-p6r-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.evx-p6r-progress__label { font-size: 12px; font-weight: 600; color: var(--status-warning); text-transform: uppercase; letter-spacing: 0.08em; }
.evx-p6r-progress__dots { display: flex; gap: 4px; }
.evx-p6r-dot { width: 28px; height: 4px; border-radius: 2px; background: var(--bg-muted); }
.evx-p6r-dot--on { background: var(--status-warning); }

.evx-p6r-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin-bottom: 14px; border: 1px solid rgba(217,119,6,0.20); background: var(--status-warning-soft); }
.evx-p6r-head--fault { border-color: rgba(220,38,38,0.20); background: var(--status-danger-soft); }
.evx-p6r-head__icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--status-warning); }
.evx-p6r-head--fault .evx-p6r-head__icon { color: var(--status-danger); }
.evx-p6r-head__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--status-warning); }
.evx-p6r-head--fault .evx-p6r-head__title { color: var(--status-danger); }
.evx-p6r-head__sub { font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; }

.evx-p6r-sub { padding: 18px; margin-bottom: 14px; }
.evx-p6r-sub__row { display: flex; gap: 12px; align-items: flex-start; }
.evx-p6r-sub__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.evx-p6r-sub__icon--brand { background: var(--brand-primary-light); color: var(--brand-primary); }
.evx-p6r-sub__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.evx-p6r-sub__text { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; line-height: 1.5; }
.evx-p6r-sub__head { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--status-warning); }

.evx-p6r-step { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.evx-p6r-step--last { border-bottom: none; }
.evx-p6r-step__n { width: 26px; height: 26px; border-radius: 50%; background: var(--status-warning-soft); color: var(--status-warning); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.evx-p6r-step__t { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.evx-p6r-step__s { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.evx-p6r-fault { padding: 16px 18px; margin-bottom: 14px; border: 1px solid rgba(220,38,38,0.20); background: var(--status-danger-soft); }
.evx-p6r-fault__title { font-size: 15px; font-weight: 700; color: var(--status-danger); }
.evx-p6r-fault__text { font-size: 13px; color: var(--text-secondary); margin: 4px 0 8px; line-height: 1.5; }
.evx-p6r-fault__inc { font-size: 11px; color: var(--text-tertiary); }
.evx-p6r-refund { padding: 4px 18px; margin-bottom: 14px; }
.evx-p6r-refund__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); }
.evx-p6r-refund__row--last { border-bottom: none; }
.evx-p6r-refund__val { color: var(--status-success); font-weight: 700; }

/* ─── Card de diagnóstico (P3 timeout) ───────────────────────────────────────── */
.evx-diag-card { width: 100%; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 4px 18px; margin: 4px 0 12px; text-align: left; }
.evx-diag-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); }
.evx-diag-row--last { border-bottom: none; }

/* ── Convite da Central ──────────────────────────────────────────────────────
   Card que pede ao cliente para abrir a conversa no WhatsApp quando a mensagem
   da carga está retida pela janela de 24h.

   🎨 NÃO é âmbar. A primeira versão usava .evx-notice--warning e ficava idêntica
   ao alerta de "não feche a tela" logo acima — duas caixas amarelas empilhadas,
   o cliente não sabia qual era o quê, e o convite (que é uma OFERTA) parecia um
   problema. Agora é card neutro.

   🎨 O botão é OUTLINE, não sólido. Com dois botões verdes iguais na mesma tela,
   ele competia com "Copiar código PIX" — que é a ação principal do PIX. Hierarquia:
   sólido = o que a tela existe para fazer; outline = alternativa útil. */
.evx-convite {
  display: flex; flex-direction: column; gap: 8px;
  margin: 10px 0; padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.evx-convite__texto { margin: 0; font-size: 13px; color: var(--text-secondary); }
.evx-convite__botao {
  height: 40px; width: 100%; font-size: 14px; text-decoration: none;
  background: transparent;
  color: var(--tenant-primary);
  border: 1.5px solid var(--tenant-primary);
  box-shadow: none;
}
.evx-convite__botao:hover { background: var(--tenant-primary-soft); }

/* ── P4: aviso de não fechar, QR recolhido, contador no topo ─────────────────
   Reordenação pedida pelo dono (21/09): o que o cliente precisa FAZER vem antes
   do que ele precisa VER, e a tela cabe sem rolagem.

   🎨 O aviso usa o VERMELHO do legado (#dc2626), que é o que chama atenção de
   verdade — a versão âmbar passava despercebida. Mas com tratamento mais
   agradável que o original: sem a borda branca de 2px, cantos maiores, e o
   pulso trocado por um halo suave (e desligado em prefers-reduced-motion). */
.evx-p4-alert--warning.evx-p4-alert {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.25);
  animation: evx-p4-halo 2.4s ease-in-out infinite;
}
.evx-p4-alert--warning .evx-p4-alert-title { color: #fff; font-weight: 700; }
.evx-p4-alert--warning .evx-p4-alert-msg { color: rgba(255,255,255,0.92); }
.evx-p4-alert--warning svg { color: #fff; flex: 0 0 auto; }
.evx-p4-alert-expire { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,0.92); }
.evx-p4-alert-expire strong { color: #fff; font-variant-numeric: tabular-nums; }
@keyframes evx-p4-halo {
  0%, 100% { box-shadow: 0 2px 10px rgba(220, 38, 38, 0.25); }
  50%      { box-shadow: 0 2px 10px rgba(220, 38, 38, 0.25), 0 0 0 5px rgba(220, 38, 38, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .evx-p4-alert--warning.evx-p4-alert { animation: none; }
}

/* O QR estava colado no botão de copiar — pareciam um par, quando um é a ação
   principal e o outro uma alternativa. */
.evx-p4-qr-details { margin: 16px 0 10px; }
.evx-p4-qr-summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
  list-style: none;
}
.evx-p4-qr-summary::-webkit-details-marker { display: none; }
.evx-p4-qr-details[open] .evx-p4-qr-summary { margin-bottom: 10px; }

/* ─── Home (/ e /app) ─────────────────────────────────────────────────────
   Não é divulgada: o cliente entra pelo QR da estação. Quem cai aqui precisa de uma saída
   em um toque. Mesmo card centralizado das telas de erro — ver .evx-error-shell. */
.evx-entry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  margin: auto;            /* centra nos dois eixos (ver .evx-error-shell) */
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.evx-screen:has(> .evx-entry-card) { row-gap: 16px; }
.evx-screen:has(> .evx-entry-card) > .evx-screen-footer { margin-top: 0; }
.evx-entry-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* --tenant-primary (não literal): segue a cor do operador, como os botões. Antes estava
     var(--brand, #00964A) — token inexistente, então valia o literal: um verde #00964A ao
     lado do botão #00A651, duas marcas na mesma tela. */
  background: var(--tenant-primary-soft);
  /* -dark, não o tom cheio: #00A651 sobre o soft dá 2.89:1 e não alcança o 3:1 que o WCAG
     pede para elemento gráfico; o escuro da mesma paleta dá 4.02:1. */
  color: var(--tenant-primary-dark);
  margin-bottom: 2px;
}
.evx-entry-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}
.evx-entry-msg {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 300px;
}
/* Separador "ou" — a câmera é o caminho principal; o código é a alternativa. */
.evx-entry-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 6px 0 2px;
  /* --text-tertiary daria 3.83:1 em 11px — abaixo do 4.5:1 de texto normal. */
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.evx-entry-divider::before,
.evx-entry-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.evx-entry-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.evx-entry-form .evx-btn { margin-top: 8px; }

/* ─── Leitor de QR da home ────────────────────────────────────────────────
   Overlay em tela cheia. Nasce [hidden]; só abre no toque do botão. */
.evx-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--text-primary);   /* o escuro da paleta, não um preto próprio */
}
.evx-qr-overlay[hidden] { display: none; }
.evx-qr-frame {
  position: relative;
  width: min(78vw, 300px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--text-primary);
}
.evx-qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* a câmera não tem a proporção do quadro; cover evita barras */
  display: block;
}
/* Alvo: só orientação visual, sem recortar a leitura (decodificamos o frame inteiro). */
.evx-qr-alvo {
  position: absolute;
  inset: 12%;
  /* Branco puro é deliberado: esta borda fica sobre a IMAGEM DA CÂMERA, não sobre uma
     superfície do design system — token de texto não teria contraste garantido ali. */
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}
.evx-qr-status {
  margin: 0;
  max-width: 300px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-inverse);
}
.evx-qr-overlay .evx-btn { min-width: 160px; }

/* Plano B da home: só aparece quando a câmera falha (ver qr-scan.js). */
.evx-entry-fallback { width: 100%; }
.evx-entry-fallback[hidden] { display: none; }
.evx-entry-aviso {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--status-danger);
  text-align: center;
}

/* ── Preço promocional (P1) ───────────────────────────────────────────────────────────────
   Card âmbar dentro da faixa escura da estação, colado nos números: a comparação entre o
   preço de agora e o normal precisa acontecer num golpe de vista.

   Âmbar e não verde: nesta mesma faixa o verde já marca "Online" e "Disponível", e repeti-lo
   diluiria os três. Texto quase preto sobre âmbar passa em AA e continua legível no sol — a
   P1 é lida em pé, na rua, no celular. */
.evx-promo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFC24A, #FF8A1F);
  color: #2A1600;
  box-shadow: 0 2px 10px rgba(255,138,31,0.28);
}
.evx-promo__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(42,22,0,0.14);
}
.evx-promo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.evx-promo__text b { font-size: 12px; font-weight: 800; letter-spacing: -0.01em; }
.evx-promo__detail { font-size: 10.5px; font-weight: 600; opacity: 0.82; }

/* o bloco do preço acompanha o card, senão o destaque fica solto do número a que se refere */
.evx-station-strip__stat--promo {
  background: rgba(255,170,60,0.16);
  border-color: rgba(255,170,60,0.42);
}
.evx-station-strip__stat-value--promo { color: #FFC24A; }
.evx-station-strip__stat-was {
  font-size: 9px;
  margin-top: 1px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* Pulso discreto: chama o olho uma vez e para. Animação contínua numa tela de pagamento vira
   ruído e atrapalha quem só quer carregar. */
@keyframes evx-promo-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.evx-promo { animation: evx-promo-in 260ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .evx-promo { animation: none; }
}