.city-map-page {
    --map-navy: #0a1735;
    --map-blue: #1677ff;
    --map-violet: #7348ff;
    --map-panel: rgba(255,255,255,.9);
    --map-solid: #fff;
    --map-sky: #eaf4ff;
    --map-line: rgba(23,46,84,.12);
    --map-muted: #64748b;
    --map-shadow: 0 20px 56px rgba(31,65,116,.13);
    min-height: 100vh;
    margin-top: 60px;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 28%, rgba(22,119,255,.07), transparent 28rem),
        radial-gradient(circle at 92% 72%, rgba(115,72,255,.07), transparent 30rem),
        var(--bg);
    color: var(--map-navy);
    font-family: Inter, sans-serif;
}

[data-theme="dark"] .city-map-page {
    --map-navy: #f8fbff;
    --map-panel: rgba(13,29,59,.9);
    --map-solid: #102244;
    --map-sky: rgba(22,119,255,.14);
    --map-line: rgba(156,185,229,.16);
    --map-muted: #aebbd1;
    --map-shadow: 0 22px 62px rgba(0,0,0,.34);
}

.city-map-page *, .city-map-page *::before, .city-map-page *::after { box-sizing: border-box; }
.city-map-page button, .city-map-page input, .city-map-page select { font: inherit; }

.city-map-wrap {
    width: min(1210px, calc(100% - 48px));
    margin-inline: auto;
}

.city-map-hero {
    position: relative;
    overflow: hidden;
    padding: 42px 0 62px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 25%, rgba(76, 174, 255, .33), transparent 28%),
        linear-gradient(125deg, #07142d 0%, #103d78 55%, #5a42c7 115%);
}

.city-map-hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 18, 43, .98) 0%, rgba(7, 27, 63, .92) 34%, rgba(17, 46, 91, .64) 62%, rgba(38, 28, 103, .52) 100%),
        linear-gradient(0deg, rgba(5, 17, 40, .72), transparent 64%),
        url("../images/banner/map.webp") center 48% / cover no-repeat;
    content: "";
}

[data-theme="light"] .city-map-hero::before {
    background:
        linear-gradient(90deg, rgba(7, 25, 57, .96) 0%, rgba(12, 42, 84, .86) 35%, rgba(30, 76, 132, .53) 66%, rgba(83, 51, 159, .46) 100%),
        linear-gradient(0deg, rgba(5, 17, 40, .64), transparent 62%),
        url("../images/banner/map.webp") center 48% / cover no-repeat;
}

.city-map-hero > .city-map-wrap {
    position: relative;
    z-index: 1;
}

.city-map-hero::after {
    position: absolute;
    z-index: 0;
    inset: auto -8% -130px 42%;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
}

.city-map-crumb {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, .7);
    font-size: .86rem;
}

.city-map-crumb a { color: #fff; }

.city-map-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 70px;
    align-items: center;
}

.city-map-eyebrow {
    margin: 0 0 12px;
    color: #7dc8ff;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.city-map-hero h1 {
    max-width: 680px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 4.7rem);
    line-height: .98;
    letter-spacing: -.045em;
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 800;
}

.city-map-hero-copy > p:not(.city-map-eyebrow) {
    max-width: 620px;
    margin: 20px 0 28px;
    color: rgba(255, 255, 255, .75);
    font-size: 1.03rem;
    line-height: 1.75;
}

.city-map-search {
    display: flex;
    max-width: 610px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px);
}

.city-map-search i { margin: auto 10px auto 13px; color: #8ed0ff; }
.city-map-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
}
.city-map-search input::placeholder { color: rgba(255, 255, 255, .65); }
.city-map-search button {
    min-width: 110px;
    padding: 12px 18px;
    border: 0;
    border-radius: 11px;
    color: #0a315c;
    font-weight: 800;
    background: #fff;
}

.city-map-view-card {
    position: relative;
    min-height: 255px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background: #dce9f2;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
}

.city-map-view-card::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,28,54,.05) 20%, rgba(5,28,54,.82) 100%);
    content: "";
}

.city-map-hero-live-map { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; background: #dce9f2; }
.city-map-hero-live-map .leaflet-control-zoom { overflow: hidden; margin: 14px 0 0 14px; border: 0; border-radius: 10px; box-shadow: 0 8px 22px rgba(4,23,48,.2); }
.city-map-hero-live-map .leaflet-control-zoom a { border-color: #e0e9f3; color: #173a61; background: rgba(255,255,255,.94); }
.city-map-hero-live-map .leaflet-control-attribution { font-size: 8px; }
.city-map-tugu-marker { border: 0; background: transparent; }
.city-map-tugu-marker span { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50% 50% 50% 8px; color: #fff; background: linear-gradient(135deg,#168cff,#704aff); box-shadow: 0 10px 25px rgba(23,70,160,.42); font-size: .8rem; transform: rotate(-45deg); }
.city-map-tugu-marker i { transform: rotate(45deg); }
.city-map-tugu-marker span::after { position: absolute; inset: -8px; border: 1px solid rgba(22,140,255,.65); border-radius: 50%; content: ''; animation: cityMapTuguPulse 2s ease-in-out infinite; }
.city-map-view-content { position: absolute; z-index: 3; right: 25px; bottom: 25px; left: 25px; pointer-events: none; text-shadow: 0 2px 12px rgba(2,13,32,.6); }
.city-map-live {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 7px 11px;
    border-radius: 99px;
    color: #dff3ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    background: rgba(6, 27, 50, .7);
}
.city-map-live::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #37db91;
    box-shadow: 0 0 0 5px rgba(55, 219, 145, .15);
    content: "";
}
.city-map-view-card strong { display: block; margin-top: 15px; font-size: 1.4rem; }
.city-map-view-card p { margin: 5px 0 0; color: rgba(255,255,255,.72); }
@keyframes cityMapTuguPulse { 50% { opacity: .25; transform: scale(1.18); } }

.city-map-categories { padding: 18px 0; border-bottom: 1px solid var(--map-line); background: var(--map-panel); backdrop-filter: blur(20px); }
.city-map-categories .city-map-wrap { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.city-map-category {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--map-line);
    border-radius: 999px;
    color: #53657b;
    font-size: .86rem;
    font-weight: 700;
    background: var(--map-solid);
    transition: .2s ease;
}
.city-map-category span { padding: 2px 7px; border-radius: 99px; font-size: .7rem; background: #edf3f8; }
.city-map-category:hover, .city-map-category.is-active { border-color: var(--map-blue); color: #fff; background: var(--map-blue); }
.city-map-category.is-active span { color: var(--map-blue); background: #fff; }

.city-map-transit { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:18px 24px; margin-top:24px; padding:24px; overflow:hidden; border:1px solid var(--map-line); border-radius:22px; background:var(--map-panel); box-shadow:var(--map-shadow); backdrop-filter:blur(20px); }
.city-map-transit::before { position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#e53935,#f57c00,#2e7d32,#1976d2,#7b1fa2); content:""; }
.city-map-transit[hidden] { display:none !important; }
.city-map-transit-heading { grid-column:1/-1; display:flex; gap:13px; align-items:center; }
.city-map-transit-heading>span { display:grid; flex:0 0 48px; height:48px; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,#16a66a,#1677ff); box-shadow:0 10px 22px rgba(22,119,255,.2); }
.city-map-transit-heading small { color:#16a66a; font-size:.6rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.city-map-transit-heading h2 { margin:2px 0 3px; color:var(--map-navy); font-family:"Space Grotesk",Inter,sans-serif; font-size:1.05rem; }
.city-map-transit-heading p { margin:0; color:var(--map-muted); font-size:.67rem; line-height:1.45; }
.city-map-transit-badge { margin-left:auto; padding:8px 11px; border-radius:999px; color:#16865a; font-size:.65rem; font-weight:800; background:rgba(22,166,106,.1); }
.city-map-route-chips { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.city-map-route-chip { display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:center; min-height:54px; padding:8px 10px; border:1px solid var(--map-line); border-radius:12px; color:var(--map-navy); text-align:left; background:var(--map-solid); cursor:pointer; transition:.2s ease; }
.city-map-route-chip b { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:var(--route-color); background:color-mix(in srgb,var(--route-color) 12%,transparent); }
.city-map-route-chip span { overflow:hidden; font-size:.62rem; font-weight:750; line-height:1.35; text-overflow:ellipsis; }
.city-map-route-chip:hover,.city-map-route-chip.is-active { border-color:color-mix(in srgb,var(--route-color) 55%,var(--map-line)); box-shadow:0 8px 20px color-mix(in srgb,var(--route-color) 12%,transparent); transform:translateY(-2px); }
.city-map-route-chip.is-active b { color:#fff; background:var(--route-color); }
.city-map-transit-detail { display:grid; grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr); gap:16px; padding:16px; border:1px solid var(--map-line); border-radius:16px; background:var(--map-solid); }
.city-map-route-summary { display:flex; gap:13px; align-items:flex-start; padding:3px; }
.city-map-route-code { display:grid; flex:0 0 46px; height:46px; place-items:center; border-radius:13px; color:#fff; background:var(--route-color,#16a66a); font-size:1rem; font-weight:900; box-shadow:0 9px 20px color-mix(in srgb,var(--route-color) 24%,transparent); }
.city-map-route-summary div { display:grid; min-width:0; gap:4px; }
.city-map-route-summary small { color:var(--route-color); font-size:.58rem; font-weight:900; text-transform:uppercase; }
.city-map-route-summary strong { color:var(--map-navy); font-size:.82rem; line-height:1.35; }
.city-map-route-summary div>span { color:var(--map-muted); font-size:.58rem; line-height:1.4; }
.city-map-route-summary div>span i { width:14px; color:var(--route-color); }
.city-map-stop-list { display:flex; gap:0; margin:0; padding:0 2px; overflow-x:auto; list-style:none; scrollbar-width:thin; }
.city-map-stop-list li { position:relative; flex:1 0 112px; }
.city-map-stop-list li:not(:last-child)::after { position:absolute; z-index:0; top:15px; right:-50%; left:50%; height:3px; background:color-mix(in srgb,var(--route-color) 36%,var(--map-line)); content:""; }
.city-map-stop-list button { position:relative; z-index:1; width:100%; padding:0 5px; border:0; color:var(--map-navy); text-align:center; background:transparent; cursor:pointer; }
.city-map-stop-list button>i { display:grid; width:30px; height:30px; margin:0 auto 8px; place-items:center; border:3px solid var(--map-solid); border-radius:50%; color:#fff; background:var(--route-color); box-shadow:0 0 0 2px color-mix(in srgb,var(--route-color) 32%,transparent); font-size:.55rem; }
.city-map-stop-list span,.city-map-stop-list small,.city-map-stop-list strong { display:block; }
.city-map-stop-list small { color:var(--map-muted); font-size:.48rem; }
.city-map-stop-list strong { margin-top:2px; font-size:.56rem; line-height:1.35; }
.city-map-transit-note { display:grid; grid-template-columns:38px 1fr; gap:10px; align-content:center; padding:15px; border-radius:16px; color:var(--map-muted); background:linear-gradient(135deg,rgba(22,166,106,.1),rgba(22,119,255,.08)); }
.city-map-transit-note>i { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#16865a; background:var(--map-solid); }
.city-map-transit-note p { margin:0; }
.city-map-transit-note strong,.city-map-transit-note span { display:block; }
.city-map-transit-note strong { color:var(--map-navy); font-size:.68rem; }
.city-map-transit-note span { margin-top:3px; font-size:.57rem; line-height:1.5; }
.city-map-transit-note a { grid-column:1/-1; display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--map-line); color:var(--map-blue); font-size:.62rem; font-weight:800; }
.city-map-route-select-accessible { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.city-map-transit-action { position:relative; display:flex; min-width:0; flex-direction:column; gap:15px; padding:20px; overflow:hidden; border:1px solid var(--map-line); border-radius:18px; color:var(--map-navy); background:linear-gradient(155deg,color-mix(in srgb,var(--map-blue) 8%,var(--map-solid)),color-mix(in srgb,var(--map-violet) 5%,var(--map-solid))); box-shadow:0 14px 34px rgba(31,65,116,.12); }
.city-map-transit-action::before { position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--map-blue),var(--map-violet)); content:""; }
.city-map-transit-action[hidden],.city-map-halte-panel[hidden] { display:none !important; }
.city-map-action-description { margin:-7px 0 2px; color:var(--map-muted); font-size:.63rem; line-height:1.55; }
.city-map-action-title small { color:var(--map-blue); font-size:.62rem; font-weight:850; }
.city-map-action-title h3 { margin:3px 0 0; color:var(--map-navy); font-family:"Space Grotesk",Inter,sans-serif; font-size:1.1rem; }
.city-map-transit-action>label { color:var(--map-muted); font-size:.62rem; font-weight:800; }
.city-map-select-wrap { position:relative; display:flex; min-height:52px; align-items:center; border:1px solid var(--map-line); border-radius:12px; background:var(--map-solid); box-shadow:0 9px 24px rgba(31,65,116,.11); }
.city-map-select-wrap>i:first-child { display:grid; width:43px; place-items:center; color:var(--map-blue); }
.city-map-select-wrap>i:last-child { position:absolute; right:14px; pointer-events:none; color:var(--map-muted); font-size:.68rem; }
.city-map-select-wrap select { width:100%; min-width:0; height:50px; padding:0 38px 0 0; overflow:hidden; border:0; outline:0; appearance:none; color:var(--map-navy); text-overflow:ellipsis; background:transparent; font-size:.7rem; font-weight:750; }
.city-map-transit-action .city-map-route-summary { min-height:82px; padding:13px; border:1px solid var(--map-line); border-radius:13px; background:var(--map-solid); }
.city-map-transit-action .city-map-route-summary>p { margin:auto; color:var(--map-muted); font-size:.68rem; }
.city-map-transit-action .city-map-route-summary small { color:var(--map-blue); }
.city-map-transit-action .city-map-route-summary strong { color:var(--map-navy); }
.city-map-transit-action .city-map-route-summary div>span { color:var(--map-muted); }
.city-map-transit-action .city-map-route-summary strong { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.city-map-transit-action .city-map-route-code { color:#fff; background:linear-gradient(135deg,var(--map-blue),var(--map-violet)); box-shadow:0 8px 18px rgba(22,119,255,.2); }
.city-map-direction-switch { display:flex; gap:9px; align-items:center; justify-content:center; min-height:42px; border:1px solid var(--map-line); border-radius:11px; color:var(--map-blue); font-size:.68rem; font-weight:800; background:var(--map-solid); cursor:pointer; }
.city-map-direction-switch:hover { border-color:color-mix(in srgb,var(--map-blue) 42%,var(--map-line)); background:var(--map-sky); }
.city-map-direction-switch[hidden] { display:none; }
.city-map-transit-action .city-map-transit-note { margin-top:auto; color:var(--map-muted); background:color-mix(in srgb,var(--map-blue) 7%,var(--map-solid)); }
.city-map-transit-action .city-map-transit-note>i { color:var(--map-blue); }
.city-map-transit-action .city-map-transit-note strong { color:var(--map-navy); }
.city-map-transit-action .city-map-transit-note a { border-color:var(--map-line); color:var(--map-blue); }
.city-map-halte-panel { min-width:0; overflow:hidden; border:1px solid var(--map-line); border-radius:18px; color:var(--map-navy); background:linear-gradient(180deg,color-mix(in srgb,var(--map-blue) 4%,var(--map-solid)),var(--map-solid) 22%); }
.city-map-halte-head { display:flex; gap:14px; align-items:center; justify-content:space-between; padding:17px 19px; border-bottom:1px solid var(--map-line); }
.city-map-halte-head small { color:var(--map-blue); font-size:.57rem; font-weight:900; letter-spacing:.12em; }
.city-map-halte-head h3 { margin:3px 0 0; color:var(--map-navy); font-size:.86rem; }
.city-map-halte-head>span { flex:0 0 auto; padding:5px 8px; border-radius:999px; color:var(--map-blue); font-size:.58rem; font-weight:900; background:var(--map-sky); }
.city-map-halte-panel .city-map-stop-list { display:block; max-height:490px; padding:13px 18px; overflow-y:auto; }
.city-map-halte-panel .city-map-stop-list li { position:relative; min-height:48px; }
.city-map-halte-panel .city-map-stop-list li:not(:last-child)::after { top:24px; bottom:-5px; left:15px; width:2px; height:auto; background:color-mix(in srgb,var(--route-color,#af2330) 34%,var(--map-line)); }
.city-map-halte-panel .city-map-stop-list button { display:grid; grid-template-columns:32px minmax(0,1fr); gap:11px; align-items:start; padding:3px 0 10px; text-align:left; }
.city-map-halte-panel .city-map-stop-list button>i { width:30px; height:30px; margin:0; }
.city-map-halte-panel .city-map-stop-list small { font-size:.5rem; }
.city-map-halte-panel .city-map-stop-list strong { font-size:.65rem; }
.city-map-stop-empty { display:grid; min-height:250px !important; place-items:center; color:var(--map-muted); text-align:center; font-size:.72rem; }
.city-map-shell.is-transportation .city-map-panel-head,
.city-map-shell.is-transportation .city-map-sort,
.city-map-shell.is-transportation .city-map-show-all { display:none; }
.city-map-shell.is-transportation .city-map-place-list { max-height:670px; height:100%; padding:14px; overflow-y:auto; background:color-mix(in srgb,var(--map-muted) 5%,var(--map-solid)); }
.city-map-shell.is-transportation .city-map-transit-action { min-height:642px; border-radius:14px; }
.city-map-shell.is-transportation .city-map-detail { overflow:hidden; }
.city-map-shell.is-transportation .city-map-halte-panel { height:100%; border:0; border-radius:0; }
.city-map-shell.is-transportation .city-map-halte-panel .city-map-stop-list { max-height:590px; }
.city-map-transit-message { display:grid; gap:8px; justify-items:center; }
.city-map-transit-message i { color:#16a66a; font-size:1.7rem; }
.city-map-transit-message strong { color:var(--map-navy); }
.city-map-transit-message span { max-width:220px; line-height:1.55; }

.city-map-shell {
    display: grid;
    grid-template-columns: 320px minmax(380px, 1fr) 320px;
    width: min(1210px, calc(100% - 48px));
    min-height: 670px;
    margin: 30px auto 0;
    overflow: hidden;
    border: 1px solid var(--map-line);
    border-radius: 22px;
    background: var(--map-solid);
    box-shadow: var(--map-shadow);
}

.city-map-places-panel, .city-map-detail { position: relative; z-index: 401; overflow: hidden; background: var(--map-solid); }
.city-map-places-panel { border-right: 1px solid var(--map-line); }
.city-map-detail { border-left: 1px solid var(--map-line); }
.city-map-panel-head, .city-map-detail-empty, .city-map-detail-content { padding: 22px; }
.city-map-panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.city-map-panel-title h2 { margin: 0; font-size: 1.08rem; }
.city-map-panel-title span { color: var(--map-muted); font-size: .78rem; }
.city-map-tabs { display: flex; gap: 7px; margin-bottom: 15px; }
.city-map-tab {
    flex: 1;
    padding: 9px 6px;
    border: 0;
    border-radius: 9px;
    color: var(--map-muted);
    font-size: .75rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--map-muted) 9%, transparent);
}
.city-map-tab.is-active { color: var(--map-blue); background: var(--map-sky); }
.city-map-panel-search { position: relative; }
.city-map-panel-search i { position: absolute; top: 50%; left: 13px; color: #8b9aab; transform: translateY(-50%); }
.city-map-panel-search input {
    width: 100%;
    padding: 11px 12px 11px 38px;
    border: 1px solid var(--map-line);
    border-radius: 10px;
    outline: 0;
    font-size: .82rem;
    color: var(--map-navy);
    background: var(--map-solid);
}
.city-map-panel-search input:focus { border-color: var(--map-blue); box-shadow: 0 0 0 3px rgba(23,107,202,.1); }
.city-map-sort { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; border-block: 1px solid var(--map-line); color: var(--map-muted); font-size: .73rem; }
.city-map-sort select { border: 0; outline: 0; color: var(--map-navy); font-weight: 700; background: transparent; }
.city-map-place-list { max-height: 420px; overflow-y: auto; }
.city-map-place {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 13px;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-bottom: 1px solid var(--map-line);
    text-align: left;
    background: var(--map-solid);
    transition: .2s ease;
}
.city-map-place:hover, .city-map-place.is-active { background: color-mix(in srgb, var(--map-blue) 8%, var(--map-solid)); }
.city-map-place img, .city-map-place-photo {
    display: grid;
    width: 70px;
    height: 66px;
    place-items: center;
    border-radius: 10px;
    object-fit: cover;
    color: #fff;
    background: var(--place-color, var(--map-blue));
}
.city-map-place-kind { display: block; margin-bottom: 4px; color: var(--place-color, var(--map-blue)); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.city-map-place strong { display: block; overflow: hidden; margin-bottom: 5px; color: var(--map-navy); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.city-map-place p { overflow: hidden; margin: 0; color: var(--map-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.city-map-place-rating { margin-top: 7px; color: #e89c1c; font-size: .7rem; }
.city-map-no-result { padding: 45px 20px; color: var(--map-muted); text-align: center; font-size: .82rem; }
.city-map-show-all { display: block; width: calc(100% - 40px); margin: 16px 20px 20px; padding: 11px; border: 1px solid var(--map-line); border-radius: 10px; color: var(--map-blue); font-size: .78rem; font-weight: 800; background: var(--map-solid); }

.city-map-canvas-wrap { position: relative; min-height: 670px; background: #dce9df; }
.city-map-canvas { position: absolute; inset: 0; z-index: 1; }
.city-map-loading, .city-map-error {
    position: absolute;
    z-index: 500;
    inset: 50% auto auto 50%;
    min-width: 220px;
    padding: 16px 20px;
    border-radius: 12px;
    text-align: center;
    color: var(--map-muted);
    background: var(--map-solid);
    box-shadow: var(--map-shadow);
    transform: translate(-50%, -50%);
}
.city-map-loading i { margin-right: 7px; color: var(--map-blue); }
.city-map-error { color: #9d2933; }
.city-map-loading[hidden], .city-map-error[hidden] { display: none !important; }
.city-map-error button { display: block; margin: 9px auto 0; border: 0; color: var(--map-blue); background: transparent; font-weight: 800; }
.city-map-top-controls { position: absolute; z-index: 450; top: 18px; left: 18px; display: flex; padding: 5px; border: 1px solid var(--map-line); border-radius: 11px; background: var(--map-solid); box-shadow: 0 7px 24px rgba(17,45,74,.18); }
.city-map-style { padding: 8px 12px; border: 0; border-radius: 8px; color: var(--map-muted); font-size: .72rem; font-weight: 800; background: transparent; }
.city-map-style.is-active { color: #fff; background: var(--map-navy); }
.city-map-tools { position: absolute; z-index: 450; top: 18px; right: 18px; display: grid; gap: 8px; }
.city-map-tool {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: var(--map-navy);
    background: var(--map-solid);
    box-shadow: 0 7px 24px rgba(17,45,74,.18);
}
.city-map-legend { position: absolute; z-index: 450; right: 18px; bottom: 20px; padding: 12px 14px; border: 1px solid var(--map-line); border-radius: 11px; color: var(--map-muted); font-size: .7rem; background: var(--map-solid); box-shadow: 0 7px 24px rgba(17,45,74,.16); }
.city-map-legend strong { display: block; margin-bottom: 7px; color: var(--map-navy); }
.city-map-legend div { display: flex; gap: 7px; align-items: center; margin-top: 5px; }
.city-map-legend i { width: 8px; height: 8px; border-radius: 50%; }

.city-map-marker { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid #fff; border-radius: 50% 50% 50% 8px; color: #fff; background: var(--marker-color); box-shadow: 0 7px 16px rgba(14, 38, 65, .3); transform: rotate(-45deg); }
.city-map-marker i { font-size: .78rem; transform: rotate(45deg); }
.city-map-marker.is-active { width: 44px; height: 44px; box-shadow: 0 0 0 7px rgba(23,107,202,.18), 0 8px 18px rgba(14,38,65,.3); }
.city-map-transit-stop-wrap { border:0; background:transparent; }
.city-map-transit-stop {
    position:relative;
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    border:3px solid #fff;
    border-radius:50% 50% 50% 8px;
    color:#fff;
    background:var(--stop-color,#16a66a);
    box-shadow:0 6px 16px rgba(10,23,53,.3);
    transform:rotate(-45deg);
}
.city-map-transit-stop i { font-size:.68rem; transform:rotate(45deg); }
.city-map-transit-stop b {
    position:absolute;
    top:-7px;
    right:-7px;
    display:grid;
    min-width:17px;
    height:17px;
    padding:0 3px;
    place-items:center;
    border:2px solid #fff;
    border-radius:999px;
    color:#fff;
    background:#0a1735;
    font-size:.5rem;
    line-height:1;
    transform:rotate(45deg);
}
.city-map-transit-stop.is-terminal { width:38px; height:38px; box-shadow:0 0 0 5px color-mix(in srgb,var(--stop-color,#16a66a) 22%,transparent),0 7px 18px rgba(10,23,53,.34); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--map-navy); background: var(--map-solid); }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 14px 35px rgba(15,35,60,.2); }
.city-map-popup strong { display: block; color: var(--map-navy); }
.city-map-popup span { color: var(--map-muted); font-size: .72rem; }

.city-map-detail-empty { display: grid; min-height: 660px; place-content: center; color: var(--map-muted); text-align: center; }
.city-map-detail-empty[hidden], .city-map-detail-content[hidden] { display: none !important; }
.city-map-detail-empty i { display: grid; width: 65px; height: 65px; margin: 0 auto 18px; place-items: center; border-radius: 50%; color: var(--map-blue); font-size: 1.35rem; background: var(--map-sky); }
.city-map-detail-empty h3 { margin: 0 0 7px; color: var(--map-navy); font-size: 1.05rem; }
.city-map-detail-empty p { margin: 0; font-size: .8rem; line-height: 1.6; }
.city-map-detail-content { overflow-y: auto; max-height: 670px; }
.city-map-detail-image { position: relative; height: 190px; margin: -22px -22px 20px; overflow: hidden; background: #dceaf6; }
.city-map-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.city-map-detail-image-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #fff; font-size: 2rem; background: var(--detail-color); }
.city-map-detail-close { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: var(--map-navy); background: rgba(255,255,255,.92); }
.city-map-detail-kind { color: var(--detail-color); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.city-map-detail-content h3 { margin: 7px 0 8px; font-size: 1.35rem; line-height: 1.25; }
.city-map-detail-rating { color: #e89c1c; font-size: .78rem; }
.city-map-detail-address { display: flex; gap: 8px; margin: 15px 0; color: var(--map-muted); font-size: .78rem; line-height: 1.55; }
.city-map-detail-description { color: var(--map-muted); font-size: .8rem; line-height: 1.7; }
.city-map-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }
.city-map-detail-meta div { padding: 11px; border-radius: 10px; background: color-mix(in srgb, var(--map-muted) 9%, transparent); }
.city-map-detail-meta span { display: block; margin-bottom: 3px; color: var(--map-muted); font-size: .62rem; text-transform: uppercase; }
.city-map-detail-meta strong { font-size: .75rem; }
.city-map-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.city-map-detail-actions a { padding: 11px 8px; border-radius: 9px; text-align: center; font-size: .73rem; font-weight: 800; }
.city-map-route { color: #fff; background: var(--map-blue); }
.city-map-more { border: 1px solid var(--map-line); color: var(--map-navy); background: var(--map-solid); }

.city-map-panel { padding: 75px 0; }
.city-map-section-head { display: flex; gap: 25px; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.city-map-section-head h2 { margin: 0; font-family: "Space Grotesk",Inter,sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -.035em; }
.city-map-section-head p { max-width: 510px; margin: 0; color: var(--map-muted); line-height: 1.7; }
.city-map-rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.city-map-recommend { overflow: hidden; border: 1px solid var(--map-line); border-radius: 17px; background: var(--map-panel); box-shadow: 0 8px 22px rgba(15,35,60,.05); backdrop-filter: blur(20px); transition: .25s ease; }
.city-map-recommend:hover { box-shadow: var(--map-shadow); transform: translateY(-5px); }
.city-map-rec-image { height: 170px; overflow: hidden; background: #dce8f3; }
.city-map-rec-image img { width: 100%; height: 100%; object-fit: cover; transition: .4s ease; }
.city-map-recommend:hover img { transform: scale(1.06); }
.city-map-rec-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #fff; font-size: 1.6rem; background: var(--rec-color); }
.city-map-rec-body { padding: 17px; }
.city-map-rec-body span { color: var(--rec-color); font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.city-map-rec-body h3 { overflow: hidden; margin: 6px 0 8px; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.city-map-rec-body p { overflow: hidden; margin: 0 0 14px; color: var(--map-muted); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.city-map-focus { width: 100%; padding: 10px; border: 1px solid var(--map-line); border-radius: 10px; color: var(--map-blue); font-size: .72rem; font-weight: 800; background: var(--map-solid); }

.city-map-features { padding: 64px 0; color: #fff; background: linear-gradient(125deg,#07142d,#103d78 60%,#3f3092); }
.city-map-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.city-map-feature { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.city-map-feature i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; color: #8dd1ff; background: rgba(255,255,255,.09); }
.city-map-feature h3 { margin: 2px 0 7px; color: #fff; font-size: 1rem; }
.city-map-feature p { margin: 0; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.65; }

.city-map-panel-title h2, .city-map-detail h3, .city-map-rec-body h3, .city-map-feature h3 {
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 700;
}
.city-map-category, .city-map-tab, .city-map-tool, .city-map-style, .city-map-focus, .city-map-show-all { cursor: pointer; }
.city-map-tool:hover, .city-map-focus:hover, .city-map-show-all:hover { border-color: color-mix(in srgb,var(--map-blue) 40%,var(--map-line)); color: var(--map-blue); background: color-mix(in srgb,var(--map-blue) 8%,var(--map-solid)); }
.city-map-page button:focus-visible, .city-map-page input:focus-visible, .city-map-page select:focus-visible { outline: 3px solid color-mix(in srgb,var(--map-blue) 28%,transparent); outline-offset: 2px; }
.city-map-place-list, .city-map-detail-content { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--map-blue) 35%,transparent) transparent; }
.city-map-canvas-wrap:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; border-radius: 0; }
.city-map-canvas-wrap:fullscreen .city-map-canvas { height: 100%; }
[data-theme="dark"] .city-map-detail-close { color: #0a1735; }
[data-theme="dark"] .city-map-style.is-active { color: #07142d; background: #f8fbff; }

.reveal-item { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal-item.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
    .city-map-transit { grid-template-columns:1fr 1fr; }
    .city-map-route-chips { grid-template-columns:repeat(4,minmax(150px,1fr)); overflow-x:auto; }
    .city-map-shell { grid-template-columns: 290px minmax(0, 1fr); }
    .city-map-detail { position: absolute; z-index: 600; top: 0; right: 0; width: min(340px, 90vw); height: 100%; box-shadow: -15px 0 35px rgba(15,35,60,.15); transform: translateX(105%); transition: transform .25s ease; }
    .city-map-detail.has-place { transform: none; }
    .city-map-shell { position: relative; }
    .city-map-rec-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
    .city-map-wrap { width: min(100% - 24px, 1440px); }
    .city-map-shell { width: min(100% - 24px, 1210px); border-radius: 18px; }
    .city-map-hero { padding: 38px 0 45px; }
    .city-map-hero::before,
    [data-theme="light"] .city-map-hero::before {
        background:
            linear-gradient(90deg, rgba(5, 18, 43, .94), rgba(12, 35, 76, .77)),
            linear-gradient(0deg, rgba(5, 17, 40, .75), transparent 58%),
            url("../images/banner/map.webp") 58% center / cover no-repeat;
    }
    .city-map-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .city-map-view-card { min-height: 190px; }
    .city-map-shell { display: flex; flex-direction: column-reverse; }
    .city-map-places-panel { border: 0; }
    .city-map-canvas-wrap { min-height:460px; min-height:clamp(390px,70svh,520px); }
    .city-map-place-list { max-height: 350px; }
    .city-map-top-controls { top: 12px; left: 12px; }
    .city-map-tools { top: 12px; right: 12px; }
    .city-map-legend { display: none; }
    .city-map-section-head { align-items: start; flex-direction: column; }
    .city-map-feature-grid { grid-template-columns: 1fr; }
    .city-map-transit { grid-template-columns:1fr; }
    .city-map-transit-heading { align-items:flex-start; }
    .city-map-transit-badge { display:none; }
    .city-map-route-chips { grid-template-columns:repeat(2,minmax(145px,1fr)); overflow:visible; }
    .city-map-transit-detail { grid-template-columns:1fr; }
    .city-map-route-summary strong,
    .city-map-route-summary small { overflow-wrap:anywhere; }
    /* Leaflet's vector canvas is intentionally larger than the viewport.
       The important flag protects it from later generic media safeguards. */
    .city-map-page .leaflet-pane > canvas.leaflet-zoom-animated {
        max-width:none !important;
        max-height:none !important;
    }
    .city-map-shell.is-transportation { flex-direction:column; }
    .city-map-shell.is-transportation .city-map-detail { position:relative; inset:auto; width:100%; height:auto; box-shadow:none; transform:none; }
    .city-map-shell.is-transportation .city-map-transit-action { min-height:auto; }
    .city-map-shell.is-transportation .city-map-place-list { height:auto; max-height:none; }
    .city-map-shell.is-transportation .city-map-halte-panel .city-map-stop-list { max-height:420px; }
}

@media (max-width: 540px) {
    .city-map-search button { min-width: auto; padding-inline: 14px; }
    .city-map-search button span { display: none; }
    .city-map-rec-grid { grid-template-columns: 1fr; }
    .city-map-style { padding: 8px; }
    .city-map-detail { width: 100%; }
    .city-map-panel { padding: 55px 0; }
    .city-map-canvas-wrap { min-height:400px; min-height:clamp(360px,65svh,460px); }
    .city-map-transit { padding:18px 14px; }
    .city-map-transit-heading>span { flex-basis:42px; height:42px; }
    .city-map-route-chips { display:flex; margin-inline:-2px; padding:2px 2px 8px; overflow-x:auto; scroll-snap-type:x proximity; }
    .city-map-route-chip { flex:0 0 170px; scroll-snap-align:start; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-item { opacity: 1; transform: none; transition: none; }
}