.eh-buses {
    --ehb-border:#d9dde3;
    --ehb-soft:#f5f7f9;
    --ehb-text:#14181f;
    --ehb-muted:#667085;
    --ehb-good:#18794e;
    width:100%;
    overflow:hidden;
    border:1px solid var(--ehb-border);
    border-radius:14px;
    background:#fff;
    color:var(--ehb-text);
    font-family:inherit;
    box-sizing:border-box;
}
.eh-buses * { box-sizing:border-box; }

.eh-buses-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px 18px;
}
.eh-buses-header h2 {
    margin:0;
    font-size:clamp(1.55rem,4vw,2.2rem);
    line-height:1.1;
}
.eh-buses-kicker {
    margin:0 0 6px;
    color:var(--ehb-muted);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
}
.eh-buses-subtitle {
    margin:6px 0 0;
    color:var(--ehb-muted);
}
.eh-buses-scheduled {
    padding:5px 10px;
    border-radius:999px;
    background:var(--ehb-soft);
    color:var(--ehb-muted);
    font-size:.8rem;
    font-weight:800;
}
.eh-buses-controls {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 24px;
    border-top:1px solid var(--ehb-border);
    border-bottom:1px solid var(--ehb-border);
    background:var(--ehb-soft);
}
.eh-buses-controls label {
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.eh-bus-stop-select {
    min-width:220px;
    max-width:100%;
    padding:9px 34px 9px 11px;
    border:1px solid var(--ehb-border);
    border-radius:7px;
    background:#fff;
    font:inherit;
}
.eh-bus-table { width:100%; }
.eh-bus-row {
    display:grid;
    grid-template-columns:90px 90px minmax(180px,1fr) 110px;
    gap:16px;
    align-items:center;
    padding:14px 24px;
    border-bottom:1px solid var(--ehb-border);
}
.eh-bus-head {
    padding-top:10px;
    padding-bottom:10px;
    background:#fafbfc;
    color:var(--ehb-muted);
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.eh-bus-date {
    padding:8px 24px;
    border-bottom:1px solid var(--ehb-border);
    background:var(--ehb-soft);
    color:var(--ehb-muted);
    font-size:.75rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.eh-bus-time {
    font-size:1.28rem;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}
.eh-bus-service {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-width:42px;
    padding:5px 9px;
    border-radius:7px;
    background:var(--ehb-text);
    color:#fff;
    font-weight:800;
}
.eh-bus-destination {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
}
.eh-bus-destination small { color:var(--ehb-muted); }
.eh-bus-status {
    color:var(--ehb-muted);
    font-weight:700;
}
.eh-buses-empty,
.eh-buses-message {
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:30px 24px;
    text-align:center;
    color:var(--ehb-muted);
}
.eh-buses-footer {
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:11px 24px;
    background:var(--ehb-soft);
    color:var(--ehb-muted);
    font-size:.76rem;
}
.eh-buses-loading {
    opacity:.5;
    pointer-events:none;
}

@media (max-width:700px) {
    .eh-buses-header { padding:18px 16px 14px; }
    .eh-buses-controls {
        display:block;
        padding:12px 16px;
    }
    .eh-buses-controls label {
        display:block;
        margin-bottom:6px;
    }
    .eh-bus-stop-select { width:100%; }
    .eh-bus-head { display:none; }
    .eh-bus-row {
        grid-template-columns:66px 52px 1fr;
        grid-template-areas:
            "time service destination"
            "status status destination";
        gap:6px 10px;
        padding:14px 16px;
    }
    .eh-bus-time { grid-area:time; align-self:start; }
    .eh-bus-service { grid-area:service; align-self:start; }
    .eh-bus-destination { grid-area:destination; }
    .eh-bus-status {
        grid-area:status;
        font-size:.82rem;
    }
    .eh-bus-date { padding:8px 16px; }
    .eh-buses-footer { padding:10px 16px; }
}


/* v2 BODS live information */
.eh-buses-scheduled.is-live {
    background:#ecfdf3;
    color:#18794e;
}
.eh-bus-row.is-live {
    background:#fbfffc;
}
.eh-bus-time {
    display:flex;
    flex-direction:column;
    gap:2px;
}
.eh-bus-time > strong {
    font-size:1.28rem;
    line-height:1.1;
}
.eh-bus-time small {
    color:#18794e;
    font-size:.72rem;
    font-weight:700;
    white-space:nowrap;
}
.eh-live-status {
    display:flex;
    align-items:center;
    gap:7px;
    color:#18794e;
}
.eh-live-status.is-late {
    color:#9a6700;
}
.eh-live-status.is-on-time {
    color:#18794e;
}
.eh-live-dot {
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 3px rgba(24,121,78,.10);
}


.eh-bods-connection {
    padding:9px 24px;
    border-bottom:1px solid var(--ehb-border);
    background:#f8fafc;
    color:var(--ehb-muted);
    font-size:.82rem;
}
.eh-bods-connection.is-connected strong {
    color:#18794e;
}
.eh-bods-connection.is-error {
    background:#fff7ed;
}
.eh-bods-connection.is-error strong {
    color:#b42318;
}
@media (max-width:700px) {
    .eh-bods-connection { padding:9px 16px; }
}