/* ═══════════════════════════════════════════════════
   SMART CITY GUIDE — Warsaw Edition
   Bright Tourism Theme (Red, Yellow, White)
   Sliding Right Sidebar
═══════════════════════════════════════════════════ */
:root {
    --scg-red: #E3000F;
    --scg-yellow: #FFCC00;
    --scg-white: #ffffff;
    --scg-bg-glass: rgba(255, 255, 255, 0.96);
    --scg-text-dark: #1f2937;
    --scg-text-muted: #6b7280;
    --scg-border: rgba(0, 0, 0, 0.08);
    --scg-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* ── Viewport ── */
#scg-viewport {
    position: fixed; top: var(--navbar-height, 70px); bottom: 0; left: 0; right: 0;
    overflow: hidden; display: flex; flex-direction: column; background: #f3f4f6; z-index: 50;
}
#leaflet-map {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; z-index: 1;
}

/* ── Overlay wrapper ── */
.scg-overlay {
    position: absolute; inset: 0; z-index: 800; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,.6) 100%);
}

/* ── TOP: Floating segmented route selector ── */
.scg-top-bar {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    pointer-events: auto; z-index: 10;
}
.scg-route-label { display: none; }

.scg-seg-control {
    display: flex; background: var(--scg-bg-glass); border-radius: 50px; padding: 6px;
    box-shadow: var(--scg-shadow); border: 1px solid var(--scg-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); gap: 6px;
}
.scg-seg-control .route-btn {
    flex-direction: row !important; gap: 8px !important; padding: 12px 24px !important;
    border-radius: 50px !important; border: none !important; background: transparent !important;
    color: var(--scg-text-muted) !important; font-size: .85rem !important; font-weight: 800 !important;
    letter-spacing: .05em !important; transition: all .25s ease !important; box-shadow: none !important;
    min-width: 150px; justify-content: center; text-transform: uppercase;
    display: inline-flex !important; align-items: center !important; cursor: pointer;
}
.scg-seg-control .route-btn:hover { background: rgba(0,0,0,.04) !important; color: var(--scg-text-dark) !important; }

.scg-seg-control .route-btn[data-route="red"].active {
    background: var(--scg-red) !important; color: #fff !important;
    box-shadow: 0 4px 16px rgba(227,0,15,0.35) !important;
}
.scg-seg-control .route-btn[data-route="blue"].active {
    background: #2563eb !important; color: #fff !important;
    box-shadow: 0 4px 16px rgba(37,99,235,0.35) !important;
}

.scg-dot-red { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0.9; }
.scg-dot-blue { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0.9; }
.scg-seg-control .route-btn small, .scg-seg-control .route-icon { display: none !important; }
.scg-route-ico { flex-shrink: 0; opacity: .6; transition: opacity .22s ease; display: none; }
.route-btn.active .scg-route-ico { opacity: 1; }

.scg-nearest-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: var(--scg-white); border: 1px solid var(--scg-border); color: var(--scg-text-dark);
    border-radius: 50px; font-size: .85rem; font-weight: 800; cursor: pointer;
    box-shadow: var(--scg-shadow); transition: all .2s ease;
}
.scg-nearest-btn:hover { background: #f9fafb; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.scg-nearest-btn .scg-gps-ico { color: var(--scg-red); width: 16px; height: 16px; }

/* ── RIGHT SIDEBAR: Slide-out panel ── */
.scg-sidebar {
    position: absolute; top: 90px; bottom: 140px; right: -100%; width: 100%; max-width: 360px;
    height: auto; border-radius: 20px 0 0 20px;
    background: var(--scg-bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--scg-border); box-shadow: -8px 0 35px rgba(0,0,0,0.12);
    display: flex; flex-direction: column; pointer-events: auto; z-index: 1200;
    transition: right 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 600px) { .scg-sidebar { right: -380px; max-width: 380px; } }
.scg-sidebar.open { right: 0 !important; }

.scg-sidebar-toggle {
    position: absolute; top: 50%; left: -54px; transform: translateY(-50%);
    width: 54px; height: 64px; background: var(--scg-white); border: 1px solid var(--scg-border); border-right: none;
    border-radius: 16px 0 0 16px; box-shadow: -4px 4px 15px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--scg-red); transition: all 0.3s ease;
}
.scg-sidebar-toggle:hover { background: #f9fafb; width: 58px; left: -58px; color: var(--scg-text-dark); }
.scg-handle-chevron { transition: transform 0.4s ease; transform: rotate(0deg); width: 28px; height: 28px; }
.scg-sidebar.open .scg-handle-chevron { transform: rotate(180deg); }

.scg-sidebar-header {
    padding: 24px 20px 16px; border-bottom: 2px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between;
}
.scg-sidebar-title {
    margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--scg-text-dark); text-transform: uppercase; letter-spacing: .05em;
}

.scg-cards-list {
    flex: 1; padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin;
}

/* ── SINGLE STOP CARD ── */
.scg-stop-card {
    background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 14px;
    display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04); flex-shrink: 0;
}
.scg-stop-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); border-color: #d1d5db; }
.scg-stop-card.active {
    border-color: var(--scg-red); background: #fffafa;
    box-shadow: inset 5px 0 0 var(--scg-red), 0 10px 28px rgba(227,0,15,0.15);
}
.scg-stop-card.active.blue {
    border-color: #2563eb; background: #eff6ff;
    box-shadow: inset 5px 0 0 #2563eb, 0 10px 28px rgba(37,99,235,0.15);
}

.scg-stop-card-img, .scg-stop-card-ph { width: 90px; height: 80px; border-radius: 12px; object-fit: cover; }
.scg-stop-card-ph { background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 2rem; }

.scg-stop-card-body { flex: 1; min-width: 0; }
.scg-stop-card-name { font-size: 1rem; font-weight: 800; color: var(--scg-text-dark); margin-bottom: 6px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scg-stop-card-time { font-size: .8rem; color: var(--scg-text-muted); font-weight: 600; margin-bottom: 8px;}

.scg-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.scg-action-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px;
    background: #f3f4f6; border: 1px solid #e5e7eb; color: var(--scg-text-muted); font-size: .7rem; font-weight: 700;
}
.scg-action-ar { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.scg-card-arrow { flex-shrink: 0; color: #d1d5db; margin-left: auto; width: 20px; height: 20px; }

/* ── BOTTOM PANEL: Timeline + Status ── */
.scg-bottom-panel { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; pointer-events: auto; z-index: 10; }
.scg-timeline-wrap {
    display: flex; align-items: center; background: rgba(255,255,255,.94); padding: 16px 20px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--scg-border);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.08); padding-bottom: 4px;
}
.scg-tl-label { display: none; }
.scg-timeline {
    display: flex; align-items: center; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 14px 4px; gap: 0; justify-content: center;
}
.scg-timeline::-webkit-scrollbar { display: none; }
.scg-tl-item { display: flex; align-items: center; cursor: pointer; position: relative; min-width: 44px; }
.scg-tl-dot {
    width: 32px; height: 32px; border-radius: 50%; background: #ffffff; border: 3px solid #d1d5db;
    color: var(--scg-text-muted); font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.scg-tl-item:hover .scg-tl-dot { border-color: var(--scg-text-dark); color: var(--scg-text-dark); transform: scale(1.15); }
.scg-tl-item.active .scg-tl-dot {
    background: var(--scg-red); border-color: var(--scg-red); color: white; transform: scale(1.4); box-shadow: 0 4px 14px rgba(227,0,15,0.4); font-size: 0;
}
.scg-tl-item.active .scg-tl-dot::after { content: '🚌'; font-size: .95rem; line-height: 1; }
.scg-tl-item.active.blue .scg-tl-dot { background: #2563eb; border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,0.4); }
.scg-tl-line { width: 32px; height: 5px; background: #e5e7eb; border-radius: 3px; margin: 0 -4px; z-index: 1; display:flex;}

.scg-status-bar {
    display: flex; align-items: center; justify-content: center; padding: 12px; background: #fdf2f2;
    border-top: 1px solid rgba(227,0,15,0.12); backdrop-filter: blur(10px); gap: 12px;
}
.blue-status .scg-status-bar { background: #eff6ff; border-color: rgba(37,99,235,0.12); }
.scg-status-info {
    display: flex; align-items: center; gap: 18px; font-size: .95rem; color: var(--scg-text-dark);
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.scg-status-info strong { color: var(--scg-red); font-weight: 900; font-size: 1.05rem; }
.blue-status .scg-status-info strong { color: #2563eb; }
.scg-status-sep { color: #d1d5db; }
.scg-handle-text { display: none; }
.scg-audio-pill { display: none; }

    /* ── RESPONSIVE MOBILE ── */
@media (max-width: 600px) {
    .scg-top-bar { width: 100%; padding: 0 16px; top: 16px; }
    .scg-seg-control { width: 100%; justify-content: center; }
    .scg-seg-control .route-btn { flex: 1 !important; padding: 14px 10px !important; min-width: 0; font-size: .8rem !important; }
    .scg-timeline { justify-content: flex-start; padding: 14px 16px; }
    .scg-status-info { flex-direction: column; gap: 6px; font-size: 0.85rem; }
    .scg-sidebar { 
        right: -100vw; width: calc(100vw - 48px); max-width: calc(100vw - 48px); 
        top: 85px; bottom: 125px; border-radius: 20px 0 0 20px;
    }
    .scg-sidebar-toggle { top: 50%; width: 48px; left: -48px; }
    .scg-sidebar-toggle:hover { width: 48px; left: -48px; }
}