/* ============================================================
   ExamStay — Mobile-App Design System
   Used on every page via includes/header.php + footer.php
   ============================================================ */

:root {
    --es-primary:       #2563EB;
    --es-primary-dark:  #1D4ED8;
    --es-primary-light: #60A5FA;
    --es-primary-tint:  #EFF6FF;
    --es-accent:        #F59E0B;
    --es-accent-dark:   #D97706;
    --es-ink:           #0F172A;
    --es-muted:         #64748B;
    --es-muted-light:   #94A3B8;
    --es-border:        #E2E8F0;
    --es-surface:       #FFFFFF;
    --es-surface-alt:   #FFFFFF;
    --es-surface-tint:  #F8FAFC;
    --es-star:          #F5C518;
    --es-success:       #16A34A;
    --es-success-tint:  #F0FDF4;
    --es-danger:        #EF4444;

    --es-radius-sm: 10px;
    --es-radius-md: 16px;
    --es-radius-lg: 22px;
    --es-radius-xl: 28px;
    --es-radius-pill: 999px;

    --es-shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
    --es-shadow-md: 0 6px 20px rgba(16,24,40,0.08);
    --es-shadow-lg: 0 16px 40px rgba(16,24,40,0.14);
    --es-shadow-nav: 0 -2px 16px rgba(16,24,40,0.08);

    --es-appbar-h: 58px;
    --es-safe-bottom: env(safe-area-inset-bottom, 0px);
    --es-safe-top: env(safe-area-inset-top, 0px);
}

/* ============ Base / App shell ============ */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    background-color: #FFFFFF;
    font-family: "Inter", "Segoe UI", sans-serif;
    color: var(--es-ink);
    padding-top: calc(var(--es-appbar-h) + var(--es-safe-top));
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
    font-size: 15.5px;
}
h1, h2, h3, h4, h5, h6, .es-heading {
    font-family: "Sora", "Segoe UI", sans-serif;
    font-weight: 700;
    color: var(--es-ink);
    letter-spacing: -0.02em;
}
a { color: var(--es-primary); }
p { line-height: 1.6; }
img { max-width: 100%; }
:focus-visible {
    outline: 2px solid var(--es-primary);
    outline-offset: 2px;
}
::selection { background: var(--es-primary-tint); color: var(--es-primary-dark); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.tap-scale { transition: transform .12s ease; }
.tap-scale:active { transform: scale(0.96); }

/* ============ Top App Bar ============ */
.es-appbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(var(--es-appbar-h) + var(--es-safe-top));
    padding-top: var(--es-safe-top);
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--es-border);
    z-index: 1030;
    display: flex;
    align-items: center;
}
.es-appbar-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.es-brand {
    font-family: "Sora", sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--es-ink) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.es-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--es-primary), var(--es-primary-light));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(41,82,227,0.35);
}
.es-brand-accent { color: var(--es-accent-dark); }

.es-map-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--es-primary-tint);
    color: var(--es-primary) !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: var(--es-radius-pill);
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.es-map-pill:hover { background: #dfe6ff; }

.es-hamburger, .es-iconbtn {
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid var(--es-border);
    background: var(--es-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--es-ink);
}
.es-hamburger:active, .es-iconbtn:active { background: var(--es-surface-alt); transform: scale(0.94); }

/* ============ Slide-in drawer (offcanvas / "More") ============ */
.es-drawer { width: 300px; }
.es-drawer .offcanvas-header { border-bottom: 1px solid var(--es-border); padding: 16px; }
.es-drawer .offcanvas-body { padding: 20px 16px; }
.es-drawer-nav { list-style: none; padding: 0; margin: 0 0 20px; }
.es-drawer-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 10px;
    border-radius: var(--es-radius-sm);
    color: var(--es-ink) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.98rem;
}
.es-drawer-nav li a:hover, .es-drawer-nav li a:active { background: var(--es-surface-alt); }
.es-drawer-nav li a i { font-size: 1.1rem; color: var(--es-primary); width: 20px; }

.es-drawer-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--es-primary-tint);
    border-radius: var(--es-radius-md);
    padding: 14px;
    text-decoration: none !important;
    color: var(--es-ink) !important;
}
.es-drawer-cta i { font-size: 1.4rem; color: var(--es-primary); }
.es-drawer-cta-sub { font-size: 0.8rem; color: var(--es-muted); }

.es-drawer-footer a {
    color: var(--es-muted) !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============ Route-divider (signature element) ============ */
.es-route-divider {
    height: 1px;
    background-image: linear-gradient(to right, var(--es-border) 50%, transparent 50%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    position: relative;
}
.es-route-divider::before, .es-route-divider::after {
    content: "";
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--es-primary);
}
.es-route-divider::before { left: -3px; }
.es-route-divider::after { right: -3px; background: var(--es-accent); }
.es-route-divider-top { margin: 0 0 24px; }

/* ============ Content shell ============ */
.content-container {
    min-height: 80vh;
    background-color: #FFFFFF;
    padding: 12px 10px 24px;
}
@media (min-width: 992px) {
    .content-container { max-width: 1200px; margin: 0 auto; padding: 28px 24px 56px; }
}

/* Smaller type + tighter gutters on phones — more text per line,
   less wasted whitespace on the edges. */
@media (max-width: 480px) {
    body { font-size: 14px; }
    h1, .h1 { font-size: 1.22rem !important; }
    h2, .h2 { font-size: 1.08rem !important; }
    h3, .h3 { font-size: 0.98rem !important; }
    .es-section-card { padding: 14px !important; }
    .es-section-head h2, .es-section-head h3 { font-size: 0.98rem !important; }
    .container-fluid, .container { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ============ Section headers (app-style) ============ */
.es-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 2px 12px;
}
.es-section-title h2, .es-section-title h3 {
    font-size: 1.08rem;
    margin: 0;
}
.es-section-title .es-see-all {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--es-primary);
    text-decoration: none;
}

/* ============ Cards (app-style: rounded, soft shadow) ============ */
.card, .es-card {
    border-radius: var(--es-radius-md) !important;
    border: 1px solid var(--es-border) !important;
    box-shadow: var(--es-shadow-sm);
    background: var(--es-surface);
}
.es-card-tap { transition: transform .15s ease, box-shadow .15s ease; }
.es-card-tap:active { transform: scale(0.98); box-shadow: var(--es-shadow-sm); }

/* Generic list-item row (app inbox / settings style) */
.es-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    text-decoration: none !important;
    color: var(--es-ink) !important;
    border-bottom: 1px solid var(--es-border);
}
.es-list-item:last-child { border-bottom: none; }
.es-list-item .es-list-icon {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 13px;
    background: var(--es-primary-tint);
    color: var(--es-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.es-list-item .es-list-chev { margin-left: auto; color: var(--es-muted-light); }

/* Chips / filter pills */
.es-chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.es-chip-row::-webkit-scrollbar { display: none; }
.es-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: var(--es-radius-pill);
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    color: var(--es-ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.es-chip.active, .es-chip:active { background: var(--es-primary); color: #fff; border-color: var(--es-primary); }

/* Badges */
.es-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--es-radius-pill);
    background: var(--es-primary-tint);
    color: var(--es-primary);
}
.es-badge-success { background: var(--es-success-tint); color: var(--es-success); }
.es-badge-star { background: #FEF7E0; color: #A87500; }

/* Ratings */
.es-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    background: var(--es-success);
    padding: 3px 8px;
    border-radius: 8px;
}

/* Search bar (app-style, big touch target) */
.es-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    padding: 13px 18px;
    box-shadow: var(--es-shadow-sm);
}
.es-searchbar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.98rem;
    background: transparent;
    color: var(--es-ink);
}
.es-searchbar i { color: var(--es-muted); font-size: 1.1rem; }

/* ============ Buttons ============ */
.btn {
    border-radius: var(--es-radius-sm);
    font-weight: 700;
    padding: 10px 18px;
}
.btn-primary {
    background-color: var(--es-primary);
    border-color: var(--es-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--es-primary-dark);
    border-color: var(--es-primary-dark);
}
.btn-lg { border-radius: var(--es-radius-md); padding: 14px 22px; }
.btn-login {
    background-color: var(--es-accent);
    color: #101828;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 700;
}
.es-btn-block { width: 100%; }
.es-btn-sticky-wrap {
    position: sticky;
    bottom: calc(var(--es-safe-bottom) + 10px);
    z-index: 20;
    padding: 10px 0 0;
    background: linear-gradient(to top, var(--es-surface-alt) 60%, transparent);
}
@media (min-width: 992px) {
    .es-btn-sticky-wrap { position: static; background: none; padding: 0; }
}

/* ============ Forms (app-style inputs) ============ */
.form-control, .form-select {
    border-radius: var(--es-radius-sm);
    border: 1px solid var(--es-border);
    padding: 11px 14px;
    font-size: 0.95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--es-primary);
    box-shadow: 0 0 0 3px var(--es-primary-tint);
}
label, .form-label { font-weight: 600; font-size: 0.88rem; color: var(--es-ink); }

/* ============ Hero (home) ============ */
.es-hero {
    background: linear-gradient(160deg, var(--es-primary) 0%, var(--es-primary-dark) 100%);
    border-radius: var(--es-radius-xl);
    padding: 28px 20px 26px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}
.es-hero::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}
.es-hero h1 { color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.es-hero p { color: rgba(255,255,255,0.85); font-size: 0.92rem; margin-bottom: 18px; }
.es-hero-stats { display: flex; gap: 18px; margin-top: 18px; position: relative; z-index: 1; }
.es-hero-stat { }
.es-hero-stat b { display: block; font-family: "Sora"; font-size: 1.15rem; }
.es-hero-stat span { font-size: 0.72rem; color: rgba(255,255,255,0.75); }

/* Horizontal scroll rows (native app carousels) */
.es-hscroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.es-hscroll::-webkit-scrollbar { display: none; }
.es-hscroll > * { scroll-snap-align: start; flex: none; }

/* Empty / skeleton states */
.es-skel { background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%); background-size: 400% 100%; animation: es-skel 1.4s ease infinite; border-radius: var(--es-radius-sm); }
@keyframes es-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ Sweeping app-style reskin for Bootstrap utility cards
   used throughout CenterDetails.php / HotelDetails.php ============ */
.rounded-3, .rounded-4, .rounded-5 { border-radius: var(--es-radius-md) !important; }
.border.rounded-4, .border.rounded-3, .p-4.bg-white.border,
.bg-white.border.rounded-4, .bg-white.border.rounded-3 {
    border-color: var(--es-border) !important;
    box-shadow: var(--es-shadow-sm);
}
h1.text-primary, h2.text-primary, h3.text-primary, h4.text-primary, h5.text-primary {
    color: var(--es-ink) !important;
}
.text-primary { color: var(--es-primary) !important; }
.btn-primary { background-color: var(--es-primary) !important; border-color: var(--es-primary) !important; }
.btn-outline-primary { color: var(--es-primary) !important; border-color: var(--es-primary) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--es-primary) !important; border-color: var(--es-primary) !important; }
@media (max-width: 767.98px) {
    .container-fluid, .container { padding-left: 12px; padding-right: 12px; }
    h1, .h1 { font-size: 1.3rem !important; }
    h2, .h2 { font-size: 1.15rem !important; }
    .p-4 { padding: 1rem !important; }
    .p-5 { padding: 1.5rem !important; }
    .display-6, .display-5, .display-4 { font-size: 1.5rem !important; }
}

/* Misc existing classes kept for compatibility */
.footer { background-color: var(--es-surface); border-top: 1px solid var(--es-border); padding: 18px 0 8px; text-align: center; font-size: 12.5px; color: var(--es-muted); }
.rounded-search { border-radius: 999px; padding: 0.75rem 1.5rem; }
.fade-in-up { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-in-out; }
.fade-in-up.appear { opacity: 1; transform: translateY(0); }
.section-padding { padding: 34px 0; }
.icon-style { font-size: 2rem; color: var(--es-primary); }

/* ============================================================
   ExamStay v2 — Exam-Centre-Anchored Component Library
   (Verification badges, distance/route cards, trip planner,
    attraction cards, exam checklist, map bottom sheet)
   ============================================================ */

/* Verification badge */
.es-verified {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 700;
    color: var(--es-success);
    background: var(--es-success-tint);
    border: 1px solid #BBF7D0;
    padding: 4px 10px;
    border-radius: var(--es-radius-pill);
}
.es-verified i { font-size: 0.85rem; }

/* Distance / travel-time badge — used everywhere something is "near the centre" */
.es-distance-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 700;
    color: var(--es-primary);
    background: var(--es-primary-tint);
    padding: 3px 9px;
    border-radius: var(--es-radius-pill);
}
.es-walktime-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 700;
    color: var(--es-accent-dark);
    background: #FFFBEB;
    padding: 3px 9px;
    border-radius: var(--es-radius-pill);
}

/* Exam Centre Card (search results / explore) */
.ec-card {
    display: flex; gap: 12px; padding: 12px;
    background: var(--es-surface); border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md); box-shadow: var(--es-shadow-sm);
    text-decoration: none !important; color: inherit !important;
    margin-bottom: 10px;
}
.ec-card-thumb { width: 78px; height: 78px; flex: none; border-radius: 12px; object-fit: cover; background: var(--es-surface-alt); }
.ec-card-body { flex: 1; min-width: 0; }
.ec-card-name { font-weight: 700; font-size: 0.98rem; color: var(--es-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-card-loc { font-size: 0.8rem; color: var(--es-muted); display: flex; align-items: center; gap: 4px; margin: 3px 0 6px; }
.ec-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* Hotel Card — distance-first, per spec section 8 */
.hc-card {
    background: var(--es-surface); border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md); box-shadow: var(--es-shadow-sm);
    overflow: hidden; text-decoration: none !important; color: inherit !important;
    display: block;
}
.hc-card-img { width: 100%; height: 130px; object-fit: cover; background: var(--es-surface-alt); }
.hc-card-body { padding: 12px 14px; }
.hc-card-name { font-weight: 700; font-size: 0.95rem; color: var(--es-ink); margin-bottom: 4px; }
.hc-card-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.hc-card-price { font-weight: 800; color: var(--es-ink); font-size: 1rem; }
.hc-card-price span { font-weight: 500; color: var(--es-muted); font-size: 0.74rem; }
.hc-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.hc-card-actions .btn { flex: 1; font-size: 0.78rem; padding: 8px; }

/* Route / transport card (Reach tab) */
.route-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--es-surface); border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md); padding: 14px 16px; margin-bottom: 10px;
    box-shadow: var(--es-shadow-sm);
}
.route-card-icon { width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--es-primary-tint); color: var(--es-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.route-card-body { flex: 1; min-width: 0; }
.route-card-title { font-weight: 700; font-size: 0.9rem; color: var(--es-ink); }
.route-card-meta { font-size: 0.78rem; color: var(--es-muted); }
.route-card-fare { font-weight: 700; color: var(--es-success); font-size: 0.85rem; white-space: nowrap; }

/* Attraction card (Explore tab / city exploration) */
.attr-card { flex: none; width: 180px; scroll-snap-align: start; text-decoration: none !important; color: inherit !important; }
.attr-card-img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--es-radius-md); background: var(--es-surface-alt); }
.attr-card-name { font-weight: 700; font-size: 0.88rem; color: var(--es-ink); margin-top: 8px; }
.attr-card-dist { font-size: 0.74rem; color: var(--es-muted); margin-top: 2px; }

/* Exam checklist */
.ex-checklist { display: flex; flex-direction: column; gap: 8px; }
.ex-checklist-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--es-surface); border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm); padding: 12px 14px;
}
.ex-checklist-item i.bi-check-circle-fill { color: var(--es-success); font-size: 1.1rem; }
.ex-checklist-item span { font-size: 0.88rem; font-weight: 600; color: var(--es-ink); }

/* Trip card / countdown (Trips tab, home personalization) */
.trip-card {
    background: linear-gradient(160deg, var(--es-primary), var(--es-primary-dark));
    color: #fff; border-radius: var(--es-radius-xl); padding: 20px;
    position: relative; overflow: hidden;
}
.trip-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.trip-card-exam { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.trip-card-center { font-family: "Sora"; font-size: 1.15rem; font-weight: 700; margin: 4px 0 10px; }
.trip-card-countdown { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(255,255,255,0.14); padding: 6px 14px; border-radius: var(--es-radius-pill); font-weight: 700; font-size: 0.85rem; }
.trip-card-countdown b { font-family: "Sora"; font-size: 1.3rem; }
.trip-card-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.trip-card-actions a { flex: 1; min-width: 120px; text-align: center; background: rgba(255,255,255,0.16); color: #fff !important; font-weight: 700; font-size: 0.8rem; padding: 10px; border-radius: var(--es-radius-sm); text-decoration: none !important; }
.trip-card-actions a:active { background: rgba(255,255,255,0.28); }

/* Map bottom sheet (generic, used by ExamCenterMaps + centre map tab) */
.es-sheet {
    background: var(--es-surface); border-radius: var(--es-radius-xl) var(--es-radius-xl) 0 0;
    box-shadow: 0 -8px 30px rgba(16,24,40,0.16); padding: 16px 18px;
}
.es-sheet-handle { width: 40px; height: 4px; background: var(--es-border); border-radius: 4px; margin: 0 auto 12px; }

/* Empty-state card for pages with no data yet (Trips/Profile) */
.es-empty {
    text-align: center; padding: 48px 20px; color: var(--es-muted);
}
.es-empty i { font-size: 2.4rem; color: var(--es-muted-light); margin-bottom: 12px; display: block; }
.es-empty h5 { color: var(--es-ink); margin-bottom: 6px; }

/* Misc existing classes kept for compatibility */

/* ============================================================
   Reusable sticky scroll-spy tab bar (used on CenterDetails.php,
   HotelDetails.php — anywhere a page has several long sections)
   ============================================================ */
.es-tabbar {
    position: sticky;
    top: calc(var(--es-appbar-h) + var(--es-safe-top));
    z-index: 40;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--es-border);
    padding: 10px 4px;
    margin: 0 -14px 14px;
    scrollbar-width: none;
}
.es-tabbar::-webkit-scrollbar { display: none; }
.es-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--es-radius-pill);
    background: var(--es-surface-alt);
    color: var(--es-muted) !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid var(--es-border);
    scroll-snap-align: start;
}
.es-tab.active { background: var(--es-primary); color: #fff !important; border-color: var(--es-primary); }
[id^="tab-"] { scroll-margin-top: calc(var(--es-appbar-h) + var(--es-safe-top) + 58px); }

/* Desktop split-screen (list + sticky map) — spec section 20 */
@media (min-width: 992px) {
    .es-split { display: grid; grid-template-columns: minmax(360px, 480px) 1fr; gap: 24px; align-items: start; }
    .es-split-map { position: sticky; top: calc(var(--es-appbar-h) + var(--es-safe-top) + 16px); height: calc(100vh - var(--es-appbar-h) - 48px); border-radius: var(--es-radius-lg); overflow: hidden; box-shadow: var(--es-shadow-md); }
    .es-split-map iframe, .es-split-map > div { width: 100%; height: 100%; }
}

/* Reusable scroll-spy activation script hook lives inline per-page
   (kept there so it can bind to that page's own #tab-* ids) */

/* City hub cards */
.city-hero { background: linear-gradient(160deg, var(--es-primary), var(--es-primary-dark)); border-radius: var(--es-radius-xl); padding: 26px 20px; color: #fff; margin-bottom: 16px; }
.city-hero h1 { color: #fff; font-size: 1.4rem; margin-bottom: 4px; }
.city-hero p { color: rgba(255,255,255,0.85); font-size: 0.88rem; margin: 0; }

/* ============ Leaflet map containment (defensive) ============
   Ensures any Leaflet map instance is always clipped to its own
   box and can never visually escape over the app bar / tab bar,
   even if leaflet.css loads late or a version mismatch occurs. */
.leaflet-container {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
}
div[id^="map"] { overflow: hidden; position: relative; z-index: 0; }