:root {
    --brand-navy: #14238c; --brand-red: #d0121c; --brand-red-dark: #a80e16; --brand-tint: #c9cfee; --seat-unavailable: #adb5bd;
    --bs-primary: var(--brand-navy); --bs-primary-rgb: 20, 35, 140; --bs-link-color: var(--brand-navy); --bs-link-hover-color: var(--brand-red);
}
body { background: #f4f6fb; color: #1d2433; }
.brand-nav { background: #fff; border-bottom: 4px solid var(--brand-red); box-shadow: 0 2px 8px rgba(20, 35, 140, .08); }
.brand-title { font-weight: 700; color: var(--brand-navy); letter-spacing: .02em; }
.brand-nav .nav-link { color: var(--brand-navy); font-weight: 500; }
.brand-nav .nav-link:hover { color: var(--brand-red); }
.btn-primary { --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy); --bs-btn-hover-bg: #0f1b6e; --bs-btn-hover-border-color: #0f1b6e; --bs-btn-active-bg: #0f1b6e; --bs-btn-active-border-color: #0f1b6e; }
.btn-outline-primary { --bs-btn-color: var(--brand-navy); --bs-btn-border-color: var(--brand-navy); --bs-btn-hover-bg: var(--brand-navy); --bs-btn-hover-border-color: var(--brand-navy); --bs-btn-active-bg: var(--brand-navy); }
.btn-success { --bs-btn-bg: var(--brand-red); --bs-btn-border-color: var(--brand-red); --bs-btn-hover-bg: var(--brand-red-dark); --bs-btn-hover-border-color: var(--brand-red-dark); --bs-btn-active-bg: var(--brand-red-dark); --bs-btn-active-border-color: var(--brand-red-dark); --bs-btn-disabled-bg: var(--brand-red); --bs-btn-disabled-border-color: var(--brand-red); }
.form-check-input:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.form-control:focus, .form-select:focus { border-color: var(--brand-navy); box-shadow: 0 0 0 .25rem rgba(20, 35, 140, .18); }
.nav-tabs .nav-link.active { color: var(--brand-navy); border-top: 3px solid var(--brand-red); font-weight: 600; }
.nav-tabs .nav-link { color: #4a5578; }
.card, .list-group-item { border-color: #e1e5f0; border-radius: .75rem; }
.list-group { border-radius: .75rem; box-shadow: 0 1px 4px rgba(20, 35, 140, .06); }
.hero { background: #fff; border-radius: 1rem; padding: 3rem 1.5rem; border-top: 4px solid var(--brand-navy); box-shadow: 0 2px 10px rgba(20, 35, 140, .08); }
details > summary { cursor: pointer; }

.seatmap-bus { background: #fff; border: 1px solid #dee2e6; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.seat-grid { display: grid; column-gap: .35rem; row-gap: .5rem; justify-content: center; }

/* Coach body: rounded nose, driver/door area, tapered rear */
.bus-shell {
    max-width: 22rem; margin: 0 auto; padding: 0 .75rem .75rem;
    background: linear-gradient(#f1f3f5, #e9ecef); border: 3px solid #495057;
    border-radius: 3.5rem 3.5rem 1rem 1rem;
}
.bus-front { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem .5rem .6rem; font-size: .75rem; color: #495057; border-bottom: 2px dashed #adb5bd; margin-bottom: .75rem; }
.bus-door { border: 1px solid #adb5bd; border-radius: .25rem; padding: .1rem .5rem; background: #fff; }
.bus-driver { font-weight: 600; }
.bus-rear { height: .6rem; margin-top: .75rem; border-radius: .5rem; background: #ced4da; }
.row-num { align-self: center; text-align: center; font-size: .7rem; color: #868e96; }

.seat {
    position: relative; min-width: 2.5rem; min-height: 2.75rem; /* comfortable touch target */
    border-radius: .6rem .6rem .35rem .35rem; border: 2px solid var(--brand-navy); background: #fff; color: var(--brand-navy);
    font-weight: 600; font-size: .85rem; padding: .35rem 0 0;
}
/* headrest */
.seat::before {
    content: ""; position: absolute; top: -.3rem; left: 22%; right: 22%; height: .35rem;
    border-radius: .3rem .3rem 0 0; background: currentColor; opacity: .55;
}
.seat:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 2px; }
.seat.reserved, .seat.blocked { background: #adb5bd; border-color: #adb5bd; color: #fff; cursor: not-allowed; }
.seat.held { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-navy); cursor: not-allowed; }
.seat.selected, .seat.mine-held { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.seat.mine-reserved { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.seat.moving { outline: 3px dashed var(--brand-red); }

.legend span { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-size: .85rem; }
.legend i { display: inline-block; width: 1rem; height: 1rem; border-radius: .25rem; }