/* AVELTRIM_RECARGA_VISUAL_20261102_V1 — Só aparência da tela do carregador; sem este arquivo, volta o visual anterior. */

/* ---------- Aviso ---------- */
.av-recarga .cx-notice{display:grid;grid-template-columns:36px 1fr auto;column-gap:14px;align-items:center;box-shadow:0 1px 2px rgba(18,26,29,.04)}
.av-recarga .cx-notice::before{content:"";grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;background:var(--av-leaf-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7f31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9'/%3E%3Cpath d='M10 20a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center / 19px no-repeat}
.av-recarga .cx-notice strong{grid-column:2;margin:0}
.av-recarga .cx-notice p{grid-column:2;margin:2px 0 0;color:var(--av-muted);font-size:.94rem}
.av-recarga .cx-notice a{grid-column:3;grid-row:1 / span 2;white-space:nowrap;font-size:.92rem;font-weight:600}

/* ---------- Foto e carregador formam um cartão só ---------- */
.av-recarga #ready .cx-photo{aspect-ratio:16/8;margin:0;border-radius:18px 18px 0 0}
.av-recarga #ready .charger-hero{border-radius:18px;margin-bottom:14px;background:linear-gradient(150deg,var(--av-carbon) 55%,#17302a);padding:24px}
.av-recarga #ready .cx-photo + .charger-hero{border-radius:0 0 18px 18px}
.av-recarga #ready .charger-hero h1{font-size:1.75rem;letter-spacing:-.02em}
.av-recarga #ready .charger-hero .facts{position:relative;z-index:1;gap:10px}
.av-recarga #ready .charger-hero .facts div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:14px 16px}
.av-recarga #ready .charger-hero .facts small{margin-bottom:4px}
.av-recarga #ready #balance{color:#9be3a6}

/* ---------- Cartão de ações ---------- */
.av-recarga #ready>section.card{border-radius:18px;padding:24px;box-shadow:0 1px 2px rgba(18,26,29,.04),0 8px 24px rgba(18,26,29,.05)}
.av-recarga #ready>section.card>h2{font-size:1.2rem;margin:0 0 14px}
.av-recarga #ready .connectors{margin:0 0 12px}
.av-recarga #ready .connector{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name status" "spec status";column-gap:12px;row-gap:2px;align-items:center;width:100%;padding:14px 16px;text-align:left;transition:border-color .15s,background .15s}
.av-recarga #ready .connector strong{grid-area:name;font-size:1.05rem}
.av-recarga #ready .connector small{grid-area:spec;margin:0;color:var(--av-muted);font-size:.88rem}
.av-recarga #ready .connector span{grid-area:status;padding:6px 11px;border-radius:999px;background:var(--av-paper);color:var(--av-muted);font-size:.84rem;font-weight:650;box-shadow:none;text-align:center}
.av-recarga #ready .connector[data-status="Available"] span,.av-recarga #ready .connector[data-status="Preparing"] span{background:#fff;color:var(--av-leaf-deep);border:1px solid var(--av-leaf-line)}
.av-recarga #ready .connector[data-status="Charging"] span{background:var(--av-amber-wash);color:var(--av-amber)}
.av-recarga #ready .connector[data-status="Faulted"] span{background:var(--av-red-wash);color:var(--av-red)}
.av-recarga #ready #startMessage{margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:.92rem;line-height:1.45}
.av-recarga #ready #startMessage:not([class*="info"]):not([class*="success"]):not([class*="error-box"]){background:var(--av-paper);color:var(--av-muted)}

/* Botões: iniciar em destaque; adicionar saldo como segunda ação, com ícones. */
.av-recarga #ready #startButton{min-height:58px;margin:0;font-size:1.08rem;font-weight:700;box-shadow:0 6px 16px rgba(39,154,52,.24);transition:transform .12s,box-shadow .12s}
.av-recarga #ready #startButton:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(39,154,52,.3)}
.av-recarga #ready #startButton:disabled{box-shadow:none}
.av-recarga #ready #addBalance{margin-top:20px}
.av-recarga #ready #addBalance,.av-recarga #ready #addBalanceCard{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff!important;border:1px solid var(--av-line)!important;font-weight:600;transition:border-color .15s,background .15s}
.av-recarga #ready #addBalanceCard[hidden]{display:none}
.av-recarga #ready #addBalance:hover,.av-recarga #ready #addBalanceCard:hover{border-color:var(--av-leaf)!important;background:var(--av-leaf-wash)!important}
.av-recarga #ready #addBalance::before,.av-recarga #ready #addBalanceCard::before{content:"";flex:none;width:21px;height:21px;background:center / contain no-repeat}
.av-recarga #ready #addBalance::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7f31' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 9-9 9-9-9z'/%3E%3Cpath d='M8 12l2.5-2.5a2.1 2.1 0 0 1 3 0L16 12l-2.5 2.5a2.1 2.1 0 0 1-3 0z'/%3E%3C/svg%3E")}
.av-recarga #ready #addBalanceCard::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7f31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E")}
.av-recarga #ready .cx-report{display:block;width:100%;min-height:40px;margin-top:10px;background:none!important;border:0!important;box-shadow:none;color:var(--av-muted);font-size:.9rem;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.av-recarga #ready .cx-report:hover{color:var(--av-ink)}

/* Valores sugeridos na janela do cartão, lado a lado. */
.av-recarga #cardSuggestions button{flex:1 1 0;width:auto;min-width:88px;min-height:44px;margin:0;font-size:.95rem}

/* ---------- Computador: foto e carregador à esquerda, ações à direita ---------- */
@media (min-width:920px){
  .av-recarga main:has(>#ready:not([hidden])){width:min(1040px,calc(100% - 48px));margin-top:24px}
  .av-recarga:has(#ready:not([hidden])) header.account-header{padding-left:max(24px,calc((100% - 1040px)/2));padding-right:max(24px,calc((100% - 1040px)/2))}
  .av-recarga #ready:not([hidden]){display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:20px;align-items:start}
  .av-recarga #ready>*{grid-column:1}
  .av-recarga #ready>section.card{grid-column:2;grid-row:1 / span 8;margin:0;position:sticky;top:16px}
}

/* ---------- Telas estreitas ---------- */
@media (max-width:480px){
  .av-recarga .cx-notice{grid-template-columns:36px 1fr}
  .av-recarga .cx-notice a{grid-column:2;grid-row:auto;margin-top:4px}
  .av-recarga #ready .charger-hero,.av-recarga #ready>section.card{padding:20px}
  .av-recarga #ready .charger-hero h1{font-size:1.5rem}
  .av-recarga #ready .charger-hero .facts div{padding:12px}
  .av-recarga #ready .charger-hero .facts strong{font-size:1rem;white-space:nowrap}
  .av-recarga #ready #addBalance,.av-recarga #ready #addBalanceCard{padding-left:8px;padding-right:8px;gap:8px;font-size:.94rem}
  .av-recarga #ready .connector span{font-size:.8rem;padding:5px 9px}
}