/* Mobiliti customer website: the portal's "Departure Board" design. Tokens and shared components are copied from the portal's mobiliti.css. */
:root {
    --mb-navy-950: #070F1C;
    --mb-navy-900: #0B1626;
    --mb-navy-800: #0F1B2D;
    --mb-navy-700: #16263E;
    --mb-navy-600: #22385A;
    --mb-navy-400: #5B7091;
    --mb-navy-200: #B7C3D6;
    --mb-amber: #F5A524;
    --mb-amber-600: #E08E0B;
    --mb-amber-700: #A86400;
    --mb-amber-100: #FEF3D9;
    --mb-green: #12A150;
    --mb-red: #E5484D;
    --mb-blue: #2F80ED;

    --mb-sidebar-w: 264px;
    --mb-sidebar-w-condensed: 76px;
    --mb-topbar-h: 68px;
    --mb-radius: 14px;
    --mb-radius-sm: 10px;
    --mb-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mb-font-board: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    
    --mb-bg: #F2F4F8;
    --mb-surface: #FFFFFF;
    --mb-surface-2: #F7F8FB;
    --mb-line: #E4E8EF;
    --mb-text: #0F1B2D;
    --mb-muted: #66748B;
    --mb-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 6px 18px -8px rgba(15, 27, 45, .12);
    --mb-shadow-lg: 0 18px 40px -16px rgba(15, 27, 45, .35);

    
    --bs-body-font-family: var(--mb-font);
    --bs-body-bg: var(--mb-bg);
    --bs-body-color: var(--mb-text);
    --bs-secondary-color: var(--mb-muted);
    --bs-border-color: var(--mb-line);
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: .9rem;
    --bs-primary: var(--mb-amber);
    --bs-primary-rgb: 245, 165, 36;
    --bs-primary-text-emphasis: var(--mb-amber-700);
    --bs-primary-bg-subtle: var(--mb-amber-100);
    --bs-warning: var(--mb-amber);
    --bs-warning-rgb: 245, 165, 36;
    --bs-success: var(--mb-green);
    --bs-success-rgb: 18, 161, 80;
    --bs-danger: var(--mb-red);
    --bs-danger-rgb: 229, 72, 77;
    --bs-info: var(--mb-blue);
    --bs-info-rgb: 47, 128, 237;
    --bs-secondary-rgb: 34, 56, 90;
    --bs-link-color: #1F4E8C;
    --bs-link-color-rgb: 31, 78, 140;
    --bs-link-hover-color: var(--mb-amber-700);
    --bs-card-bg: var(--mb-surface);
}

/* From the portal */
.mb-tenant-card .mb-plate {font-family: var(--mb-font-board); font-size: .62rem; font-weight: 700; color: var(--mb-navy-900);
    background: #FFD24A; border: 1.5px solid #1a1a1a; border-radius: 4px; padding: .1rem .35rem; letter-spacing: .05em;}
.mb-stub {position: relative; display: flex; align-items: stretch; height: 100%;
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
    box-shadow: var(--mb-shadow); overflow: hidden; margin-bottom: 1.25rem;}
.mb-stub-main {flex: 1; padding: 1rem 1.1rem; min-width: 0;}
.mb-stub-side {position: relative; width: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border-left: 2px dashed var(--mb-line); font-size: 26px;}
.mb-stub-side::before, .mb-stub-side::after {content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--mb-bg); border: 1px solid var(--mb-line);}
.mb-stub-side::before {top: -9px;}
.mb-stub-side::after {bottom: -9px;}
.mb-stub-label {font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-muted);}
.mb-stub-value {font-family: var(--mb-font-board); font-size: 1.45rem; font-weight: 700; margin: .3rem 0 .15rem; letter-spacing: -.02em; color: var(--mb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mb-stub-hint {font-size: .74rem; color: var(--mb-muted);}
.mb-stub[data-tone="amber"] .mb-stub-side {color: var(--mb-amber-600); background: rgba(245, 165, 36, .08);}
.mb-stub[data-tone="green"] .mb-stub-side {color: var(--mb-green); background: rgba(18, 161, 80, .07);}
.mb-stub[data-tone="blue"] .mb-stub-side {color: var(--mb-blue); background: rgba(47, 128, 237, .07);}
.mb-stub[data-tone="red"] .mb-stub-side {color: var(--mb-red); background: rgba(229, 72, 77, .07);}
.mb-stub[data-tone="navy"] .mb-stub-side {color: var(--mb-navy-600); background: rgba(34, 56, 90, .07);}
.mb-stub[data-tone="violet"] .mb-stub-side {color: #7C5CFF; background: rgba(124, 92, 255, .08);}
.mb-board {background: var(--mb-navy-900); border-radius: var(--mb-radius); overflow: hidden; box-shadow: var(--mb-shadow-lg); margin-bottom: 1.25rem; color: #E6ECF5; border: 1px solid #1B2C47;}
.mb-board-head {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.25rem; background: linear-gradient(180deg, #13233A, var(--mb-navy-900)); border-bottom: 1px solid #1B2C47;}
.mb-board-title {font-family: var(--mb-font-board); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .82rem; color: var(--mb-amber); display: flex; align-items: center; gap: .55rem;}
.mb-board-title .mb-blink {width: 8px; height: 8px; border-radius: 50%; background: var(--mb-amber); animation: mb-blink 1.4s steps(2) infinite;}
.mb-board-clock {font-family: var(--mb-font-board); color: #fff; font-size: .95rem; letter-spacing: .08em;}
.mb-board table {width: 100%; border-collapse: collapse;}
.mb-board th {font-family: var(--mb-font-board); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #6F84A6; font-weight: 600; padding: .6rem 1rem; text-align: left; border-bottom: 1px solid #1B2C47; white-space: nowrap;}
.mb-board td {padding: .75rem 1rem; border-bottom: 1px solid rgba(27, 44, 71, .7); vertical-align: middle; font-size: .84rem;}
.mb-board tbody tr:nth-child(even) td {background: rgba(255, 255, 255, .015);}
.mb-board tbody tr:hover td {background: rgba(245, 165, 36, .05);}
.mb-board .mb-time {font-family: var(--mb-font-board); font-size: 1.15rem; font-weight: 700; color: var(--mb-amber); letter-spacing: .04em;}
.mb-board .mb-day {font-family: var(--mb-font-board); font-size: .66rem; color: #6F84A6; text-transform: uppercase; letter-spacing: .1em;}
.mb-board .mb-plate {font-family: var(--mb-font-board); font-size: .72rem; font-weight: 700; color: #111; background: #FFD24A; border: 1.5px solid #111; border-radius: 4px; padding: .1rem .4rem; white-space: nowrap;}
.mb-board .mb-muted {color: #8C9BB4; font-size: .74rem;}
.mb-board a {color: #fff;}
.mb-board .btn-board {font-family: var(--mb-font-board); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-amber); border: 1px solid rgba(245, 165, 36, .4); border-radius: 6px; padding: .3rem .55rem; white-space: nowrap;}
.mb-board .btn-board:hover {background: var(--mb-amber); color: var(--mb-navy-900);}
.mb-seats {display: flex; align-items: center; gap: .5rem; min-width: 130px;}
.mb-seats .mb-seat-bar {flex: 1; height: 6px; border-radius: 6px; background: #1A2A44; overflow: hidden;}
.mb-seats .mb-seat-bar span {display: block; height: 100%; border-radius: 6px; background: var(--mb-amber);}
.mb-seats small {font-family: var(--mb-font-board); color: #CFE0FF; font-size: .72rem; white-space: nowrap;}
.mb-board-empty {padding: 2.5rem 1rem; text-align: center; font-family: var(--mb-font-board); color: #6F84A6; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem;}
.mb-route {display: flex; align-items: center; gap: .55rem; min-width: 0;}
.mb-route-end {font-weight: 700; white-space: nowrap; font-size: .84rem;}
.mb-route-line {position: relative; flex: 1; min-width: 70px; height: 12px; display: flex; align-items: center; justify-content: space-between;}
.mb-route-line::before {content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--mb-amber), #5B7091);}
.mb-route-line i {position: relative; width: 6px; height: 6px; border-radius: 50%; background: #5B7091;}
.mb-route-line i:first-child, .mb-route-line i:last-child {width: 10px; height: 10px; background: var(--mb-navy-900); border: 2px solid var(--mb-amber);}
.mb-route-line i:last-child {border-color: #CFE0FF;}
.mb-route-via {font-size: .7rem; color: #6F84A6; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px;}
.card .mb-route-line i:first-child, .card .mb-route-line i:last-child {background: var(--mb-surface);}
.card .mb-route-via {color: var(--mb-muted);}
.mb-plate-sm {font-family: var(--mb-font-board); font-size: .66rem; font-weight: 700; color: #111; background: #FFD24A; border: 1.5px solid #111; border-radius: 4px; padding: 0 .3rem;}
.mb-seats-left {font-weight: 700;}
.mb-seats-left.low {color: var(--mb-red);}
.mb-coach {position: relative; margin: 0 auto; width: max-content; max-width: 100%;
    padding: 1.1rem 1rem 1.25rem; border-radius: 44px 44px 18px 18px;
    background: var(--mb-surface-2); border: 2px solid var(--mb-line);
    box-shadow: inset 0 0 0 6px var(--mb-surface);}
.mb-coach-front {display: flex; align-items: center; justify-content: space-between; padding: 0 .35rem .9rem; margin-bottom: .9rem; border-bottom: 2px dashed var(--mb-line);}
.mb-coach-front .mb-wheel {width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--mb-navy-800); color: var(--mb-amber); font-size: 22px;}
.mb-coach-front .mb-door {font-family: var(--mb-font-board); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mb-muted); padding: .35rem .5rem; border: 1px dashed var(--mb-line); border-radius: 6px;}
.mb-coach-rows {display: flex; flex-direction: column; gap: .45rem;}
.mb-coach-row {display: flex; align-items: center; gap: .45rem;}
.mb-coach-row .mb-row-no {width: 18px; font-family: var(--mb-font-board); font-size: .62rem; color: var(--mb-muted); text-align: center;}
.mb-aisle {width: 26px;}
.mb-seat {position: relative; width: 46px; height: 46px; border-radius: 10px 10px 8px 8px; border: 1.5px solid var(--mb-line);
    background: var(--mb-surface); color: var(--mb-text); font-family: var(--mb-font-board); font-size: .72rem; font-weight: 700;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; cursor: pointer; transition: transform .1s, background .15s, border-color .15s;}
.mb-seat::before {content: ""; position: absolute; left: 7px; right: 7px; top: 5px; height: 8px; border-radius: 4px; background: var(--mb-line);}
.mb-seat:hover {border-color: var(--mb-amber); transform: translateY(-1px);}
.mb-seat.is-taken {cursor: not-allowed; color: var(--mb-muted); background: repeating-linear-gradient(135deg, var(--mb-surface-2) 0 6px, transparent 6px 12px); border-style: dashed;}
.mb-seat.is-taken::before {background: transparent;}
.mb-seat.is-taken::after {content: "✕"; position: absolute; top: 4px; font-size: .8rem; color: var(--mb-muted);}
.mb-seat.is-taken:hover {transform: none; border-color: var(--mb-line);}
.mb-seat.is-selected {background: var(--mb-amber); border-color: var(--mb-amber-600); color: var(--mb-navy-900); box-shadow: 0 6px 14px -6px rgba(245, 165, 36, .9);}
.mb-seat.is-selected::before {background: rgba(15, 27, 45, .25);}
.mb-seat.is-vip {width: 54px;}
.mb-seat.is-current {border-color: var(--mb-blue); background: rgba(47, 128, 237, .12); color: var(--mb-blue);}
.mb-seat.is-current::before {background: rgba(47, 128, 237, .35);}
.mb-trip-banner .mb-route-end {color: #fff;}
.mb-trip-banner .mb-route-via {color: var(--mb-navy-200);}
.mb-seat-tag {display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mb-font-board); font-weight: 700; font-size: .78rem; background: var(--mb-amber); color: var(--mb-navy-900); padding: .2rem .55rem; border-radius: 7px;}
.mb-seat-chip {display: inline-block; min-width: 34px; text-align: center; font-family: var(--mb-font-board); font-weight: 700; font-size: .74rem; padding: .2rem .4rem; border-radius: 6px; border: 1.5px solid var(--mb-line); background: var(--mb-surface-2);}
.mb-pass-mid .mb-route-line {min-width: 0;}
@keyframes mb-blink { 50% { opacity: .15; } }

/* Website */
html { scroll-behavior: smooth; }
body { font-family: var(--mb-font); background: var(--mb-bg); color: var(--mb-text); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
code, .font-board { font-family: var(--mb-font-board); }
h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -.02em; }
a { text-decoration: none; }
.btn { font-weight: 700; border-radius: var(--mb-radius-sm); }
.btn-primary { --bs-btn-bg: var(--mb-amber); --bs-btn-border-color: var(--mb-amber); --bs-btn-color: var(--mb-navy-800); --bs-btn-hover-bg: var(--mb-amber-600); --bs-btn-hover-border-color: var(--mb-amber-600); --bs-btn-hover-color: var(--mb-navy-800); --bs-btn-active-bg: var(--mb-amber-600); --bs-btn-active-border-color: var(--mb-amber-600); --bs-btn-active-color: var(--mb-navy-800); --bs-btn-disabled-bg: var(--mb-amber); --bs-btn-disabled-border-color: var(--mb-amber); --bs-btn-disabled-color: var(--mb-navy-800); }
.btn-secondary { --bs-btn-bg: var(--mb-navy-800); --bs-btn-border-color: var(--mb-navy-800); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--mb-navy-600); --bs-btn-hover-border-color: var(--mb-navy-600); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--mb-navy-800); --bs-btn-border-color: var(--mb-line); --bs-btn-hover-bg: var(--mb-surface-2); --bs-btn-hover-color: var(--mb-navy-800); --bs-btn-hover-border-color: var(--mb-navy-400); --bs-btn-active-bg: var(--mb-navy-800); --bs-btn-active-border-color: var(--mb-navy-800); --bs-btn-active-color: #fff; }
.form-control, .form-select { border-radius: var(--mb-radius-sm); padding: .65rem .85rem; border-color: var(--mb-line); }
.form-control:focus, .form-select:focus { border-color: var(--mb-amber); box-shadow: 0 0 0 .2rem rgba(245, 165, 36, .2); }
.form-label { font-size: .78rem; font-weight: 700; color: var(--mb-muted); margin-bottom: .3rem; }
.card { border: 1px solid var(--mb-line); border-radius: var(--mb-radius); box-shadow: var(--mb-shadow); background: var(--mb-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--mb-line); padding: .9rem 1.1rem; }
.section { padding: 3.5rem 0; }
.section-title { font-size: 1.6rem; margin-bottom: .3rem; }
.eyebrow { font-family: var(--mb-font-board); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-amber-700); }

.site-top { background: var(--mb-navy-950); color: var(--mb-navy-200); font-size: .78rem; }
.site-top a, .site-top button { color: var(--mb-navy-200); background: none; border: 0; padding: 0; font-size: inherit; }
.site-top a:hover, .site-top button:hover { color: #fff; }
.site-top .is-on { color: var(--mb-amber); font-weight: 700; }
.site-nav { background: var(--mb-navy-800); position: sticky; top: 0; z-index: 1030; margin-top: -1px; box-shadow: 0 1px 0 var(--mb-navy-800); }
.site-nav + .hero, .site-nav + main > .container:empty + .page-head { margin-top: -1px; }
.site-nav .navbar-nav .nav-link { color: var(--mb-navy-200); font-weight: 600; font-size: .92rem; padding: .5rem .8rem; }
.site-nav .navbar-nav .nav-link:hover, .site-nav .navbar-nav .nav-link.active { color: #fff; }
.site-nav .navbar-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--mb-amber); }
.brand { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.brand:hover { color: #fff; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--mb-amber); color: var(--mb-navy-800); display: flex; align-items: center; justify-content: center; }
.navbar-toggler { border-color: rgba(255,255,255,.25); color: #fff; }

.hero { background: radial-gradient(900px 420px at 80% 0, rgba(245,165,36,.18), transparent 70%), var(--mb-navy-800); color: #fff; position: relative; overflow: hidden; padding: 3.5rem 0 7.5rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; }
.hero h1 em { font-style: normal; color: var(--mb-amber); }
.hero p { color: var(--mb-navy-200); font-size: 1.05rem; max-width: 34rem; }
.hero-bus { position: absolute; right: 6%; bottom: 6.75rem; width: min(26vw, 280px); opacity: .95; animation: mb-bob 1.2s ease-in-out infinite; }
.hero-road { position: absolute; left: 0; right: 0; bottom: 6.5rem; height: 3px; background: repeating-linear-gradient(90deg, var(--mb-amber) 0 32px, transparent 32px 64px); background-size: 64px 3px; opacity: .55; animation: mb-road 1s linear infinite; }
@keyframes mb-bob { 50% { transform: translateY(-2px); } }
@keyframes mb-road { to { background-position: -64px 0; } }
@media (prefers-reduced-motion: reduce) { .hero-bus, .hero-road { animation: none; } }
.search-card { position: relative; margin-top: -5.5rem; z-index: 5; box-shadow: var(--mb-shadow-lg); border: 0; }
.trip-switch .btn { font-size: .82rem; padding: .35rem .9rem; }

.town-card { display: block; color: inherit; transition: transform .15s, box-shadow .15s; }
.town-card:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-lg); color: inherit; }
.step-no { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--mb-navy-800); color: var(--mb-amber); font-family: var(--mb-font-board); font-weight: 700; }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--mb-amber-100); color: var(--mb-amber-700); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

.min-w-0 { min-width: 0; }
.trip-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem 1.25rem; }
.trip-time { font-family: var(--mb-font-board); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.trip-fare { font-family: var(--mb-font-board); font-size: 1.25rem; font-weight: 700; }
.trip-side { border-left: 2px dashed var(--mb-line); padding-left: 1.25rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .35rem; min-width: 170px; }
.line-to { flex: 1; height: 2px; background: var(--mb-line); position: relative; min-width: 36px; }
.line-to::before, .line-to::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--mb-amber); }
.line-to::after { right: 0; background: var(--mb-navy-800); }
.date-strip a { flex: 1 0 84px; text-align: center; padding: .5rem; border-radius: var(--mb-radius-sm); background: var(--mb-surface); border: 1px solid var(--mb-line); color: var(--mb-text); font-size: .78rem; }
.date-strip a.is-on { background: var(--mb-navy-800); color: #fff; border-color: var(--mb-navy-800); }
.date-strip small { font-family: var(--mb-font-board); color: var(--mb-amber-700); font-size: .68rem; }
.date-strip a.is-on small { color: var(--mb-amber); }
.date-strip b { display: block; font-family: var(--mb-font-board); font-size: 1rem; }

.steps { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .78rem; font-weight: 700; color: var(--mb-muted); }
.steps span { display: flex; align-items: center; gap: .4rem; }
.steps span:not(:last-child)::after { content: "—"; color: var(--mb-line); margin-left: .25rem; }
.steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--mb-line); color: var(--mb-muted); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mb-font-board); font-size: .7rem; }
.steps .is-on { color: var(--mb-text); }
.steps .is-on i { background: var(--mb-amber); color: var(--mb-navy-800); }
.steps .is-done i { background: var(--mb-navy-800); color: #fff; }
.seat-key { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--mb-muted); }
.seat-key span { display: flex; align-items: center; gap: .35rem; }
.seat-key i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--mb-line); background: var(--mb-surface); }
.seat-key .k-sel { background: var(--mb-amber); border-color: var(--mb-amber); }
.seat-key .k-sold { background: var(--mb-navy-200); border-color: var(--mb-navy-200); }
.summary { position: sticky; top: 84px; }

.ticket { display: grid; grid-template-columns: 1fr 210px; background: var(--mb-surface); border-radius: var(--mb-radius); box-shadow: var(--mb-shadow-lg); overflow: hidden; }
.ticket-head { grid-column: 1 / -1; background: var(--mb-navy-800); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.25rem; gap: 1rem; }
.ticket-body { padding: 1.25rem; }
.ticket-stub { border-left: 2px dashed var(--mb-line); padding: 1.25rem; text-align: center; position: relative; }
.ticket-stub img { width: 150px; height: 150px; }
.ticket-label { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-muted); }
.ticket-value { font-weight: 700; }
.pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.pill-green { background: rgba(18,161,80,.12); color: #0C7A3C; }
.pill-amber { background: var(--mb-amber-100); color: var(--mb-amber-700); }
.pill-red { background: rgba(229,72,77,.12); color: #B5272C; }
.pill-navy { background: rgba(34,56,90,.1); color: var(--mb-navy-600); }
.countdown { font-family: var(--mb-font-board); font-size: 1.6rem; font-weight: 700; color: var(--mb-amber-700); }
.account-nav a { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: var(--mb-radius-sm); color: var(--mb-text); font-weight: 600; font-size: .9rem; }
.account-nav a:hover { background: var(--mb-surface-2); }
.account-nav a.is-on { background: var(--mb-navy-800); color: #fff; }
.page-head { background: var(--mb-navy-800); color: #fff; padding: 2rem 0; margin-top: -1px; }
.page-head h1 { font-size: 1.8rem; margin: 0; }
.page-head p { color: var(--mb-navy-200); margin: .3rem 0 0; }
.site-foot { background: var(--mb-navy-950); color: var(--mb-navy-200); font-size: .88rem; padding: 3rem 0 1.5rem; margin-top: 3rem; }
.site-foot h6 { color: #fff; font-weight: 700; }
.site-foot a { color: var(--mb-navy-200); display: block; padding: .15rem 0; }
.site-foot a.brand { display: flex; color: #fff; }
.site-foot a:hover { color: var(--mb-amber); }
.empty { text-align: center; padding: 3rem 1rem; color: var(--mb-muted); }
.empty iconify-icon { font-size: 2.6rem; color: var(--mb-navy-200); }

@media (max-width: 767.98px) {
    .hero { padding: 2.2rem 0 10rem; }
    .hero-bus { right: 1rem; bottom: 6.3rem; width: 130px; }
    .hero-road { bottom: 6.1rem; }
    .trip-card { grid-template-columns: minmax(0, 1fr); }
    .line-to { min-width: 12px; }
    .trip-side { border-left: 0; border-top: 2px dashed var(--mb-line); padding: .9rem 0 0; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
    .ticket { grid-template-columns: 1fr; }
    .ticket-stub { border-left: 0; border-top: 2px dashed var(--mb-line); }
    .summary { position: static; }
}
@media print {
    .site-top, .site-nav, .site-foot, .no-print { display: none !important; }
    body { background: #fff; }
    .ticket { box-shadow: none; border: 1px solid #999; }
}

/* Meal, hotel and shuttle orders */
.extra-policy, .extra-locked { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--mb-radius-sm); }
.extra-policy { background: var(--mb-amber-100); color: #5F3B00; border: 1px solid rgba(245, 165, 36, .45); }
.extra-policy iconify-icon { font-size: 22px; flex: none; color: var(--mb-amber-700); }
.extra-locked { align-items: center; flex-wrap: wrap; background: var(--mb-navy-800); color: #fff; }
.extra-locked iconify-icon { font-size: 26px; color: var(--mb-amber); }
.extra-locked .small { color: var(--mb-navy-200); }
.extra-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.extra-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px; border: 1px solid var(--mb-line); border-radius: var(--mb-radius-sm); background: var(--mb-surface); color: inherit; font-weight: 700; }
.extra-tab iconify-icon { font-size: 20px; }
.extra-tab.active { background: var(--mb-navy-800); border-color: var(--mb-navy-800); color: #fff; }
.extra-tab.active iconify-icon { color: var(--mb-amber); }
.extra-count { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--mb-surface-2); color: var(--mb-navy-400); }
.extra-tab.active .extra-count { background: var(--mb-navy-600); color: #fff; }
.extra-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--mb-amber-100); color: var(--mb-amber-700); font-size: 20px; }
.extra-icon-lg { width: 52px; height: 52px; font-size: 26px; }
.extra-meal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.extra-meal-name { min-width: 160px; flex-basis: 0; }
.extra-stepper { display: inline-flex; align-items: center; border: 1px solid var(--mb-line); border-radius: 8px; overflow: hidden; }
.extra-stepper button { width: 34px; height: 34px; border: 0; background: var(--mb-surface-2); color: inherit; font-weight: 700; }
.extra-stepper input { width: 42px; height: 34px; border: 0; background: transparent; color: inherit; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.extra-stepper input::-webkit-outer-spin-button, .extra-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.extra-pill { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--mb-surface-2); border: 1px solid var(--mb-line); }
.extra-order { padding: 10px 0; border-bottom: 1px solid var(--mb-line); }
.extra-order:first-child { padding-top: 0; }
.extra-order:last-of-type { border-bottom: 0; }
.extra-confirm-summary { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
@media (min-width: 992px) { .extra-side { position: sticky; top: 90px; } }
@media (max-width: 575.98px) { .extra-buy { width: 100%; } .extra-tab { flex-direction: column; gap: 2px; font-size: 13px; } }
[data-bs-theme="dark"] .extra-policy { background: rgba(245, 165, 36, .12); color: var(--mb-amber-100); }
[data-bs-theme="dark"] .extra-icon { background: rgba(245, 165, 36, .15); color: var(--mb-amber); }