/*
 * Alternative-stations map switch.
 *
 * Replaces the old "ВКЛ/ВИКЛ" pill: a labelled switch chip that states what it
 * controls, how many pins it affects, and whether it is on — without the user
 * having to hover a tooltip. Appearance lives here; positioning, z-index and
 * page-state visibility stay in trips-*.css / planner-route-details.css.
 */

.evb-alt-chip {
    --evb-alt-pin-fill: #facc15;
    --evb-alt-pin-stroke: #eab308;
    --evb-alt-bolt: #111827;
    --evb-alt-track: #111827;
    --evb-alt-knob: 15px;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    min-height: 44px;
    padding: 0 8px 0 11px;
    border: 1px solid rgba(17, 24, 39, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    color: #111827;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.evb-alt-locations-control:not([hidden]) .evb-alt-chip {
    animation: evb-alt-chip-in .3s cubic-bezier(.22, .68, 0, 1) both;
}

.evb-alt-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(17, 24, 39, .26);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}

.evb-alt-chip:active {
    transform: translateY(0) scale(.985);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
}

/* The old rule killed the outline on :focus, leaving keyboard users blind. */
.evb-alt-chip:focus {
    outline: none;
}

.evb-alt-chip:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .55);
    outline-offset: 2px;
    border-color: rgba(17, 24, 39, .26);
}

/* --- icon: mirrors the station pin it switches on the map --- */

.evb-alt-chip__icon {
    display: inline-flex;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}

.evb-alt-chip__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.evb-alt-chip__pin {
    fill: var(--evb-alt-pin-fill);
    stroke: var(--evb-alt-pin-stroke);
    transition: fill .2s ease, stroke .2s ease;
}

.evb-alt-chip__bolt {
    fill: var(--evb-alt-bolt);
    transition: fill .2s ease;
}

/* --- label (collapsible on narrow screens) --- */

.evb-alt-chip__label {
    display: inline-flex;
    overflow: hidden;
    max-width: 160px;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111827;
    transition: max-width .26s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, color .2s ease;
}

.evb-alt-chip__count {
    display: inline-flex;
    min-width: 24px;
    height: 21px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(17, 24, 39, .09);
    color: #111827;
    font-size: 11.5px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}

.evb-alt-chip__count.is-bumped {
    animation: evb-alt-count-bump .42s cubic-bezier(.32, .72, 0, 1);
}

/* --- switch --- */

.evb-alt-chip__track {
    position: relative;
    display: inline-block;
    flex: 0 0 34px;
    width: 34px;
    height: 21px;
    border-radius: 999px;
    background: var(--evb-alt-track);
    transition: background .22s ease;
}

.evb-alt-chip__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: var(--evb-alt-knob);
    height: var(--evb-alt-knob);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
    transform: translateX(13px);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}

/* --- off state --- */

.evb-alt-chip.is-off {
    --evb-alt-pin-fill: transparent;
    --evb-alt-pin-stroke: #9ca3af;
    --evb-alt-bolt: #9ca3af;
    --evb-alt-track: #d1d5db;

    background: rgba(255, 255, 255, .93);
    border-color: rgba(17, 24, 39, .1);
}

.evb-alt-chip.is-off .evb-alt-chip__label {
    color: #6b7280;
}

.evb-alt-chip.is-off .evb-alt-chip__count {
    background: #eef0f3;
    color: #9ca3af;
}

.evb-alt-chip.is-off .evb-alt-chip__knob {
    transform: translateX(0);
}

.evb-alt-chip__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@keyframes evb-alt-chip-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes evb-alt-count-bump {
    0% { transform: scale(1); }
    38% { transform: scale(1.24); }
    100% { transform: scale(1); }
}

/*
 * Narrow screens: the chip lives as icon + count + switch and briefly expands
 * its label when it first appears, so the shorthand stays learnable.
 */
@media (max-width: 768px) {
    .evb-alt-chip {
        gap: 8px;
        padding: 0 7px 0 10px;
        border-radius: 13px;
    }

    .evb-alt-chip__label {
        max-width: 0;
        opacity: 0;
    }

    .evb-alt-chip.is-hinting .evb-alt-chip__label {
        max-width: 160px;
        opacity: 1;
    }

    .evb-alt-chip.is-hinting {
        gap: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evb-alt-chip,
    .evb-alt-chip__label,
    .evb-alt-chip__knob,
    .evb-alt-chip__track,
    .evb-alt-chip__pin,
    .evb-alt-chip__bolt,
    .evb-alt-chip__count {
        transition-duration: .01ms;
    }

    .evb-alt-locations-control:not([hidden]) .evb-alt-chip,
    .evb-alt-chip__count.is-bumped {
        animation: none;
    }

    .evb-alt-chip:hover,
    .evb-alt-chip:active {
        transform: none;
    }
}

@media (forced-colors: active) {
    .evb-alt-chip {
        border: 1px solid ButtonBorder;
    }

    .evb-alt-chip__track {
        background: ButtonBorder;
        border: 1px solid ButtonBorder;
    }

    .evb-alt-chip.is-off .evb-alt-chip__track {
        background: Canvas;
    }

    .evb-alt-chip__knob {
        background: ButtonText;
    }
}