/* EVBOOST — форма запуску сесії на картці локації + віджет активної сесії. */

:root {
    --evb-charging-ink: #111827;
    --evb-charging-muted: #6b7280;
    --evb-charging-line: #e5e7eb;
    --evb-charging-accent: #ffd000;
    --evb-charging-green: #16a34a;
    --evb-charging-red: #d92d20;
    --evb-charging-shadow: 0 22px 60px rgba(15, 23, 42, .22);
}

/* ───────────────────────────── спільні елементи ───────────────────────────── */

.evb-charging-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}

.evb-charging-btn.is-primary {
    width: 100%;
    color: var(--evb-charging-ink);
    background: var(--evb-charging-accent);
}

.evb-charging-btn.is-primary:hover:not(:disabled) {
    color: #fff;
    background: var(--evb-charging-ink);
}

.evb-charging-btn.is-stop {
    flex: 1 1 auto;
    color: #fff;
    background: var(--evb-charging-red);
}

.evb-charging-btn.is-stop:hover:not(:disabled) {
    background: #b42318;
}

.evb-charging-btn.is-ghost {
    color: var(--evb-charging-ink);
    background: #fff;
    border-color: var(--evb-charging-line);
}

.evb-charging-btn.is-ghost:hover {
    border-color: var(--evb-charging-ink);
}

.evb-charging-btn:disabled,
.evb-charging-btn.is-loading {
    opacity: .55;
    cursor: not-allowed;
}

.evb-charging-link {
    padding: 0;
    border: 0;
    background: none;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.evb-charging-note {
    margin: 8px 0 0;
    color: var(--evb-charging-muted);
    font-size: 12px;
    line-height: 1.4;
}

.evb-charging-note.is-error {
    color: var(--evb-charging-red);
    font-weight: 700;
}

.evb-charging-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(17, 24, 39, .15);
    border-top-color: var(--evb-charging-ink);
    border-radius: 50%;
    display: inline-block;
    animation: evb-charging-spin .8s linear infinite;
}

@keyframes evb-charging-spin {
    to { transform: rotate(360deg); }
}

.evb-charging-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--evb-charging-green);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
    animation: evb-charging-pulse 1.6s ease-out infinite;
    flex: 0 0 auto;
}

@keyframes evb-charging-pulse {
    70% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.evb-charging-progress {
    height: 4px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .08);
    overflow: hidden;
}

.evb-charging-progress span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: 999px;
    background: var(--evb-charging-accent);
    animation: evb-charging-slide 1.4s ease-in-out infinite;
}

@keyframes evb-charging-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

/* ─────────────────────── форма на картці локації ─────────────────────── */

.evb-location-charging-slot:empty {
    display: none;
}

.evb-charging-form {
    margin: 14px 16px 4px;
    padding: 16px;
    border: 1px solid var(--evb-charging-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--evb-charging-ink);
}

/* ─────────────── Роумінг: підказка над списком пістолетів ─────────────── */

.evb-roaming-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
    padding: 10px 12px;
    border: 1px solid #dbe7de;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fbf8, #f1f7f3);
}

.evb-roaming-hint__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--evb-charging-accent);
    color: #111827;
}

.evb-roaming-hint__icon svg { width: 15px; height: 15px; }

.evb-roaming-hint__text {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 1px;
    margin: 0;
}

.evb-roaming-hint__text strong {
    color: var(--evb-charging-ink);
    font-size: 12.5px;
    font-weight: 900;
}

.evb-roaming-hint__text small {
    color: var(--evb-charging-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

.evb-roaming-hint__count {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: #dff0e4;
    color: #17663a;
    font-size: 10.5px;
    font-weight: 850;
    white-space: nowrap;
}

.evb-roaming-hint.is-empty { background: #f7f8f9; border-color: #e4e7ea; }
.evb-roaming-hint.is-empty .evb-roaming-hint__icon { background: #e5e7eb; color: #6b7280; }

.evb-roaming-hint__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--evb-charging-accent);
    color: #111827;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

/* ───────────────────── Роумінг: картка пістолета ───────────────────── */

.evb-app-connector-card.is-roaming-action {
    height: auto;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.evb-app-connector-card.is-roaming-action:hover {
    border-color: #c7a900;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .09);
}

.evb-app-connector-card.is-roaming-action:focus-visible {
    outline: 3px solid rgba(250, 204, 21, .45);
    outline-offset: 2px;
}

/* Пістолет, який зараз не можна запустити, гасне, а не просто мовчить. */
.evb-app-connector-card.is-roaming-disabled { opacity: .62; }

/*
 * Дія — окремий рядок сітки на всю ширину картки. Раніше це була абсолютна
 * пігулка в правому нижньому куті, яка перекривала іконку конектора.
 */
.evb-roaming-connector-action {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 10px;
    border-top: 1px dashed #e3e7ea;
    border-radius: 0 0 8px 8px;
    background: #fcfdfc;
    color: #4b5b52;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.evb-roaming-connector-action svg { width: 13px; height: 13px; }

.evb-app-connector-card.is-roaming-selected {
    border-color: #d6aa00;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #fffdf4;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, .3);
}

.evb-app-connector-card.is-roaming-selected {
    border-bottom-color: transparent;
}

.evb-app-connector-card.is-roaming-selected .evb-roaming-connector-action {
    border-top-color: #efd88a;
    border-radius: 0;
    background: #ffd000;
    color: #111827;
}

/* Обрана картка носить колір свого стану, а не завжди жовтий «обрано». */
.evb-app-connector-card.is-roaming-selected.is-roaming-own {
    border-color: #93c5fd;
    background: #f7fbff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .22);
}

.evb-app-connector-card.is-roaming-selected.is-roaming-pending {
    border-color: #d8dce0;
    background: #fafbfc;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, .18);
}

.evb-app-connector-card.is-roaming-selected.is-roaming-own .evb-roaming-connector-action,
.evb-app-connector-card.is-roaming-selected.is-roaming-pending .evb-roaming-connector-action {
    background: inherit;
    color: inherit;
}

.evb-app-connector-card.is-roaming-own .evb-roaming-connector-action {
    border-top-color: #cfe2f6;
    background: #eaf3fd;
    color: #14539b;
}

.evb-app-connector-card.is-roaming-pending .evb-roaming-connector-action {
    background: #f4f5f6;
    color: #6b7280;
}

/* ──────────────── Роумінг: панель запуску під карткою ──────────────── */

/*
 * Панель — продовження обраної картки, а не окрема жовта коробка: спільна
 * рамка, жодного шва, тому вибір і дія читаються як один об'єкт.
 */
.evb-roaming-panel {
    display: grid;
    gap: 10px;
    /*
     * .evb-app-connectors — flex-колонка з gap: 7px. Панель має продовжувати
     * обрану картку без шва, тому цей проміжок вибирається назад.
     */
    margin: -7px 0 2px;
    padding: 12px;
    border: 1px solid #d6aa00;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fffdf4;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, .3), 0 10px 22px rgba(15, 23, 42, .06);
    animation: evb-roaming-panel-in .16s ease-out;
}

@keyframes evb-roaming-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .evb-roaming-panel { animation: none; }
}

.evb-roaming-money {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 7px;
    margin: 0;
}

.evb-roaming-money span {
    color: #7a6a3c;
    font-size: 11px;
    font-weight: 700;
}

.evb-roaming-money strong {
    color: var(--evb-charging-ink);
    font-size: 15px;
    font-weight: 900;
    /* Сума не має ламатися посеред числа. */
    white-space: nowrap;
}

.evb-roaming-money small {
    color: #7a6a3c;
    font-size: 10.5px;
    font-weight: 700;
}

.evb-roaming-money small::before {
    content: '·';
    margin-right: 5px;
}

.evb-roaming-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: filter .14s ease, transform .14s ease;
}

.evb-roaming-btn:hover { filter: brightness(.96); }
.evb-roaming-btn:active { transform: translateY(1px); }

.evb-roaming-btn:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .35);
    outline-offset: 2px;
}

.evb-roaming-btn.is-start { background: var(--evb-charging-accent); color: #111827; }
.evb-roaming-btn.is-topup { border: 1px solid #d6aa00; background: #fff; color: #6b5300; }
.evb-roaming-btn.is-stop { background: #dc2626; color: #fff; }

.evb-roaming-btn.is-loading { opacity: .72; pointer-events: none; }

.evb-roaming-panel__prereq {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: #6b5300;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.evb-roaming-panel__prereq svg { width: 14px; height: 14px; flex: 0 0 14px; }

.evb-roaming-panel__fineprint {
    margin: 0;
    color: #7a6a3c;
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.evb-roaming-panel__aside {
    margin: 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: #fff7db;
    color: #6b5300;
    font-size: 10.5px;
    line-height: 1.4;
}

.evb-roaming-panel__warning {
    margin: 0;
    color: #9a3412;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.4;
}

.evb-roaming-panel__status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.evb-roaming-panel__status p {
    display: grid;
    gap: 1px;
    margin: 0;
}

.evb-roaming-panel__status strong {
    color: var(--evb-charging-ink);
    font-size: 13px;
    font-weight: 900;
}

.evb-roaming-panel__status small {
    color: var(--evb-charging-muted);
    font-size: 11px;
    line-height: 1.35;
}

.evb-roaming-panel.is-own { border-color: #93c5fd; background: #f5faff; box-shadow: 0 0 0 2px rgba(59, 130, 246, .22); }
.evb-roaming-panel.is-pending { border-color: #d8dce0; background: #fafbfc; box-shadow: 0 0 0 2px rgba(148, 163, 184, .18); }

/*
 * Поки пістолет обрано, головна дія одна — «Почати зарядку». Кнопка
 * застосунку в нижній панелі картки локації відступає на другий план.
 */
.is-roaming-committing .evb-open-app-btn {
    background: #fff !important;
    border: 1px solid var(--evb-sheet-line, #dbe2ea) !important;
    color: #4b5563 !important;
    box-shadow: none !important;
}

@media (max-width: 390px) {
    .evb-roaming-hint { gap: 9px; padding: 9px 10px; }
    .evb-roaming-connector-action { font-size: 10.5px; }
    .evb-roaming-money strong { font-size: 14px; }
}

.evb-charging-form.is-loading {
    display: flex;
    justify-content: center;
    padding: 26px;
}

.evb-charging-form__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.evb-charging-form__text {
    margin: 0 0 12px;
    color: var(--evb-charging-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.evb-charging-connector-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.evb-charging-connector-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--evb-charging-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.evb-charging-connector-row:hover:not(.is-disabled) {
    border-color: var(--evb-charging-ink);
}

.evb-charging-connector-row:has(input:checked) {
    border-color: var(--evb-charging-ink);
    background: #fffbeb;
}

.evb-charging-connector-row.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.evb-charging-connector-row input {
    accent-color: var(--evb-charging-ink);
    width: 18px;
    height: 18px;
}

.evb-charging-connector-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.evb-charging-connector-title {
    font-size: 13px;
    font-weight: 800;
}

.evb-charging-connector-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--evb-charging-muted);
    font-size: 11.5px;
}

.evb-charging-connector-status {
    font-size: 11px;
    font-weight: 800;
    text-transform: lowercase;
    white-space: nowrap;
}

.evb-charging-connector-status.is-1 { color: var(--evb-charging-green); }
.evb-charging-connector-status.is-3 { color: #b45309; }
.evb-charging-connector-status.is-4 { color: var(--evb-charging-red); }
.evb-charging-connector-status.is-2 { color: var(--evb-charging-muted); }

.evb-charging-form .evb-charging-actions {
    display: flex;
    gap: 8px;
}

/* ────────────────────────────── віджет сесії ────────────────────────────── */

.evb-charging-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147482000;
    width: min(340px, calc(100vw - 32px));
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--evb-charging-ink);
}

.evb-charging-widget.is-collapsed {
    width: auto;
}

.evb-charging-card {
    padding: 16px;
    border: 1px solid var(--evb-charging-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--evb-charging-shadow);
    animation: evb-charging-in .22s ease;
}

@keyframes evb-charging-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.evb-charging-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.evb-charging-card__title {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.evb-charging-card__title strong {
    font-size: 13.5px;
    font-weight: 900;
}

.evb-charging-card__title span {
    color: var(--evb-charging-muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evb-charging-collapse {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: #f3f4f6;
    color: var(--evb-charging-ink);
    cursor: pointer;
}

.evb-charging-collapse svg {
    width: 16px;
    height: 16px;
}

.evb-charging-done {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(22, 163, 74, .12);
    color: var(--evb-charging-green);
    font-weight: 900;
}

.evb-charging-connector {
    margin-bottom: 10px;
    color: var(--evb-charging-muted);
    font-size: 12px;
    font-weight: 700;
}

.evb-charging-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--evb-charging-line);
    border-bottom: 1px solid var(--evb-charging-line);
}

.evb-charging-metrics > .evb-charging-metric {
    display: grid;
    gap: 2px;
    text-align: center;
}

.evb-charging-metric__value {
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.evb-charging-metric__label {
    color: var(--evb-charging-muted);
    font-size: 10px;
    font-weight: 700;
}

.evb-charging-soc {
    margin-top: 12px;
}

.evb-charging-soc__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    color: var(--evb-charging-muted);
    font-size: 11.5px;
}

.evb-charging-soc__head strong {
    color: var(--evb-charging-ink);
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.evb-charging-soc__track {
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.evb-charging-soc__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #16a34a, #86efac);
    transition: width .5s ease;
}

.evb-charging-card .evb-charging-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.evb-charging-hint {
    margin: 0;
    color: var(--evb-charging-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.evb-charging-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--evb-charging-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--evb-charging-shadow);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.evb-charging-pill__value {
    font-size: 14px;
    font-weight: 900;
}

.evb-charging-pill__unit {
    color: var(--evb-charging-muted);
    font-size: 11px;
    font-weight: 700;
}

.evb-charging-pill__timer {
    padding-left: 8px;
    border-left: 1px solid var(--evb-charging-line);
    font-size: 12.5px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .evb-charging-widget {
        right: 12px;
        left: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }

    .evb-charging-widget.is-collapsed {
        left: auto;
    }

    /* Поки відкрита картка локації, віджет не має перекривати її CTA. */
    body.evb-location-sheet-open .evb-charging-widget {
        display: none;
    }
}

/* ───────────────────── панель активної сесії в кабінеті ───────────────────── */

.evb-charging-panel {
    padding: 22px;
    border: 1px solid var(--evb-charging-line);
    border-radius: 20px;
    background: #fff;
}

.evb-charging-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.evb-charging-panel__head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
}

.evb-charging-panel__location {
    margin: 2px 0 0;
    color: var(--evb-charging-muted);
    font-size: 12.5px;
}

.evb-charging-panel .evb-charging-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px 0;
}

.evb-charging-panel .evb-charging-metric__value {
    font-size: 22px;
}

.evb-charging-panel .evb-charging-metric__label {
    font-size: 11px;
}

.evb-charging-panel .evb-charging-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.evb-charging-panel__empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 34px 20px;
    text-align: center;
}

.evb-charging-panel__empty strong {
    font-size: 15px;
    font-weight: 900;
}

.evb-charging-panel__empty p {
    margin: 0;
    color: var(--evb-charging-muted);
    font-size: 12.5px;
}

@media (max-width: 620px) {
    .evb-charging-panel {
        padding: 16px;
    }

    .evb-charging-panel .evb-charging-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 6px;
    }

    .evb-charging-panel .evb-charging-actions {
        flex-direction: column;
    }
}

/* Банер активної сесії в огляді кабінету. */

.evb-charging-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(22, 163, 74, .35);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(22, 163, 74, .08), rgba(22, 163, 74, 0));
    color: var(--evb-charging-ink);
    text-decoration: none;
}

.evb-charging-banner:hover {
    border-color: var(--evb-charging-green);
}

.evb-charging-banner__text {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.evb-charging-banner__text strong {
    font-size: 13.5px;
    font-weight: 900;
}

.evb-charging-banner__text span {
    color: var(--evb-charging-muted);
    font-size: 11.5px;
}

.evb-charging-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* Кілька паралельних сесій у віджеті. */

.evb-charging-card.is-multi {
    max-height: min(70vh, 620px);
    overflow-y: auto;
}

.evb-charging-session-list {
    display: grid;
    gap: 10px;
}

.evb-charging-session {
    padding: 12px;
    border: 1px solid var(--evb-charging-line);
    border-radius: 14px;
    background: #fbfcfe;
}

.evb-charging-session__head strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evb-charging-session .evb-charging-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 0;
}

.evb-charging-session .evb-charging-metric__value {
    font-size: 13.5px;
}

.evb-charging-session .evb-charging-actions {
    margin-top: 10px;
}

.evb-charging-btn.is-slim {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11.5px;
    flex: 0 0 auto;
}

.evb-charging-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--evb-charging-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

/* Конектор, на якому вже йде власна сесія користувача. */

.evb-charging-connector-row.is-own {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    border-color: rgba(22, 163, 74, .45);
    background: rgba(22, 163, 74, .06);
    cursor: default;
}

/* LIVE-мітка біля «Активної сесії» в меню акаунта. */

.evb-account-menu__live {
    min-height: 19px;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    background: #16a34a;
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .45px;
}

.evb-charging-panel-list {
    display: grid;
    gap: 16px;
}

.evb-roaming-wallet { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px; border: 1px solid #eadfb8; border-radius: 12px; background: #fff; }
.evb-roaming-wallet .evb-roaming-money { flex: 1; min-width: 0; }
.evb-roaming-wallet .evb-roaming-money small { flex-basis: 100%; }
.evb-roaming-wallet .evb-roaming-money small::before { content: none; }
.evb-roaming-wallet__topup { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #e2b600; border-radius: 10px; background: #fff4c2; color: #493a00; font: inherit; font-weight: 800; cursor: pointer; }
.evb-roaming-wallet__topup:hover { background: #ffe779; }
.evb-roaming-wallet__topup:focus-visible { outline: 2px solid #725700; outline-offset: 2px; }