@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');

/* Typography System - Anton SC for headings, Inter for body */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    font-family: 'Anton SC', sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: #ffffff;
}

h1 {
    font-size: clamp(28px, 8vw, 48px);
    line-height: 1.1;
}

h2 {
    font-size: clamp(20px, 5vw, 32px);
    line-height: 1.2;
}

h3 {
    font-size: clamp(16px, 3.5vw, 22px);
    line-height: 1.3;
}

h4 {
    font-size: clamp(15px, 3vw, 18px);
    line-height: 1.4;
}

h5 {
    font-size: 14px;
    text-transform: uppercase;
}

h6 {
    font-size: 12px;
}

.floating-audio-btn.hide {
            opacity: 0;
            pointer-events: none;
}

/* Delay showing floating actions until all buttons have mounted */
body:not(.floating-actions-visible) .floating-action {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(12px);
            transition: opacity 0.35s ease, transform 0.35s ease;
}

body.floating-actions-visible .floating-action {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
}

/* Ensure floating-action icons are centered in circular/square buttons */
.floating-action {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
}

.floating-action > svg,
.floating-action > i,
.floating-action > span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            margin: 0;
            line-height: 1;
            text-align: center;
}

.floating-action > svg {
            width: 20px;
            height: 20px;
}

@keyframes refreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

:root {
            touch-action: manipulation;
            --primary-bg: #0e1011;
            --secondary-bg: #333;
            --text-primary: #e0e0e0;
            --text-secondary: #a0a0a0;
            --primary-color: #ff0000;
            --glow-color: rgba(255, 0, 0, 0.15);
            --accent1: #444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .audio-player {
            background: #333;
            border-radius: 12px;
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
            width: 322px;
            height: 184px;
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 150;
            display: none; /* Initially hidden */
            cursor: move;
            user-select: none;
            -webkit-user-select: none;
            overflow: visible; /* Changed from hidden to allow transcript panel to expand upward */
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .audio-player.minimized {
            width: 322px;
            height: 184px;
            border-radius: 12px;
            overflow: visible; /* Changed from hidden to allow transcript panel to expand upward */
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            right: auto;
            top: auto;
            z-index: 150;
            box-shadow: 0 6px 32px rgba(0,0,0,0.6);
            display: block !important;
            background: #333;
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        }

        .audio-player.dragging {
            transition: none;
            transform: none;
        }

        .audio-player.near-edge-left {
            box-shadow: -10px 4px 20px rgba(255, 0, 0, 0.3); /* Reduced from 0.6 to 0.3 */
        }

        .audio-player.near-edge-right {
            box-shadow: 10px 4px 20px rgba(255, 0, 0, 0.3); /* Reduced from 0.6 to 0.3 */
        }

        .audio-player.edge-hidden {
            opacity: 1;
        }

        .audio-player.edge-hidden.hidden-left {
            transform: translateX(-345px); /* Hide almost completely */
        }

        .audio-player.edge-hidden.hidden-right {
            transform: translateX(345px); /* Hide almost completely */
        }

        .edge-tab {
            position: fixed;
            background: #444;
            color: white;
            border: none;
            border-radius: 0;
            padding: 0;
            font-size: 24px;
            cursor: pointer;
            z-index: 1002;
            display: none;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .edge-tab.visible {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .edge-tab.left {
            top: 0;
            left: 0;
            transform: none;
            border-radius: 0 10px 10px 0;
            width: 16px;
            height: 64px;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        }

        .edge-tab.right {
            top: 0;
            right: 0;
            transform: none;
            border-radius: 10px 0 0 10px;
            width: 16px;
            height: 64px;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
        }

        .edge-tab i {
            color: white;
            font-size: 13px;
            transform: scaleX(1.5) scaleY(0.7);
        }

        .audio-player-header {
            display: none;
        }

        .audio-player-title {
            display: none;
        }

        .audio-close {
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: var(--text-primary);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: bold;
            z-index: 9999;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
            pointer-events: auto;
        }

        .audio-close i {
            font-weight: 900; /* Extra bold for the X icon */
            text-shadow: 0.5px 0.5px 0 currentColor; /* Add text shadow for extra thickness */
            color: #999; /* Grey color for the icon */
        }

        .audio-close:hover {
            background: rgba(255, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
            transform: scale(1.05);
        }

        /* ===== Refresh button ===== */
        .audio-refresh-btn {
            position: absolute;
            right: 8px;
            top: 96px;
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: var(--text-primary);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1004;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
            pointer-events: auto;
        }

        /* ===== Skip buttons — pop up VERTICALLY above the player when playing ===== */
        .audio-skip-back,
        .audio-skip-forward {
            position: absolute;
            left: 8px;
            bottom: auto;
            right: auto;
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: var(--text-primary);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1006;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
            opacity: 0;
            pointer-events: none;
            /* Scale from zero at resting position — never overlaps play button */
            transform: scale(0);
            transform-origin: bottom center;
            transition: opacity 0.22s ease,
                        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .audio-skip-forward {
            top: -46px;
        }

        .audio-skip-back {
            top: -92px;
        }

        .audio-player.skip-visible .audio-skip-forward {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            transition-delay: 0s;
        }

        .audio-player.skip-visible .audio-skip-back {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            transition-delay: 0.08s;
        }

        .audio-refresh-btn i {
            font-size: 15px;
            color: #999;
        }

        .audio-refresh-btn.syncing i {
            animation: refreshSpin 0.85s linear infinite;
        }

        /* Hamburger — right side, between X and refresh */
        .audio-menu-btn {
            position: absolute;
            right: 8px;
            top: 52px;
            bottom: auto;
            left: auto;
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: #999;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1004;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
            pointer-events: auto;
        }

        .audio-menu-btn i {
            font-size: 15px;
        }

        .audio-menu-btn:hover,
        .audio-refresh-btn:hover {
            background: rgba(255, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
            transform: scale(1.05);
        }

        /* ===== Next-POI button — flex child in left controls column ===== */
        .audio-next-poi-btn {
            position: relative;
            left: auto;
            bottom: auto;
            right: auto;
            top: auto;
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.45);
            color: var(--text-primary);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1004;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.2);
            pointer-events: auto;
        }
        .audio-next-poi-btn i,
        .audio-next-poi-btn svg {
            color: var(--text-primary);
            fill: var(--text-primary);
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        .audio-next-poi-btn:hover {
            background: rgba(255, 0, 0, 0.12);
            box-shadow: 0 4px 14px rgba(255, 0, 0, 0.5);
            transform: scale(1.08);
        }
        .audio-next-poi-btn .next-poi-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 8px;
            background: rgba(255, 51, 51, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            line-height: 16px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            pointer-events: none;
            border: 1px solid rgba(255,255,255,0.18);
        }
        .audio-next-poi-btn.pulse {
            animation: nextPoiPulse 1s ease-in-out infinite;
        }
        @keyframes nextPoiPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 51, 51, 0.7), 0 2px 8px rgba(255, 0, 0, 0.2);
            }
            50% {
                transform: scale(1.12);
                box-shadow: 0 0 0 10px rgba(255, 51, 51, 0), 0 4px 14px rgba(255, 0, 0, 0.5);
            }
        }

        /* ===== POI Picker — labeled stop/chapter sheet for the floating player ===== */
        .poi-picker {
            position: absolute;
            left: 54px;
            top: 8px;
            width: 246px;
            max-width: calc(100% - 68px);
            z-index: 1007;
            opacity: 0;
            transform: translateX(-10px) scale(0.94);
            transform-origin: left top;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .poi-picker.visible {
            opacity: 1;
            transform: translateX(0) scale(1);
            pointer-events: auto;
        }
        .poi-picker-sheet {
            border-radius: 16px;
            border: 1px solid rgba(255, 0, 0, 0.38);
            background: linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.98));
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            overflow: hidden;
        }
        .poi-picker-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 12px 10px;
            border-bottom: 1px solid rgba(255, 0, 0, 0.12);
            background: linear-gradient(180deg, rgba(255, 0, 0, 0.08), rgba(255, 0, 0, 0));
        }
        .poi-picker-header-copy {
            min-width: 0;
            flex: 1;
        }
        .poi-picker-eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.58);
            margin-bottom: 4px;
        }
        .poi-picker-title {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.15;
            color: #fff;
        }
        .poi-picker-meta {
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.3;
            color: rgba(255, 255, 255, 0.6);
        }
        .poi-picker-close {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.78);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }
        .poi-picker-close:hover {
            background: rgba(255, 0, 0, 0.14);
            border-color: rgba(255, 0, 0, 0.5);
            color: #fff;
            transform: scale(1.04);
        }
        .poi-picker-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 238px;
            overflow-y: auto;
            padding: 10px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 51, 51, 0.55) rgba(255, 255, 255, 0.04);
        }
        .poi-picker-list::-webkit-scrollbar {
            width: 6px;
        }
        .poi-picker-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 999px;
        }
        .poi-picker-list::-webkit-scrollbar-thumb {
            background: rgba(255, 51, 51, 0.55);
            border-radius: 999px;
        }
        .poi-picker-item {
            width: 100%;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: #fff;
            padding: 10px 12px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            text-align: left;
            position: relative;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
            -webkit-user-select: none;
            user-select: none;
        }
        .poi-picker-item:hover {
            background: rgba(255, 0, 0, 0.1);
            border-color: rgba(255, 51, 51, 0.5);
            transform: translateY(-1px);
        }
        .poi-picker-item.active {
            background: rgba(255, 51, 51, 0.16);
            border-color: rgba(255, 51, 51, 0.62);
            box-shadow: 0 0 0 1px rgba(255, 51, 51, 0.22) inset, 0 10px 20px rgba(0, 0, 0, 0.22);
        }
        .poi-picker-item.active .poi-picker-item-content {
            padding-right: 88px;
        }
        .poi-picker-item-badge {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: rgba(255, 0, 0, 0.14);
            border: 1px solid rgba(255, 0, 0, 0.28);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .poi-picker-item-badge.icon {
            font-size: 11px;
        }
        .poi-picker-item-content {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .poi-picker-item-kicker {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
        }
        .poi-picker-item-title {
            font-family: 'Anton SC', sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.15;
            letter-spacing: 0.02em;
            color: #fff;
            word-break: break-word;
        }
        .poi-picker-item-subtitle {
            font-size: 11px;
            line-height: 1.3;
            color: rgba(255, 255, 255, 0.58);
        }
        .poi-picker-item-status {
            position: absolute;
            top: -1px;
            right: 12px;
            padding: 5px 11px;
            border-radius: 0 0 10px 10px;
            background: linear-gradient(45deg, #ff5b47, #d61f1f);
            border: 1px solid rgba(255, 120, 120, 0.18);
            border-top: none;
            color: #fff5f5;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(214, 31, 31, 0.35);
            transform-origin: top center;
            animation: poiStatusBreathe 2.5s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes poiStatusBreathe {
            0%, 100% {
                box-shadow: 0 4px 12px rgba(214, 31, 31, 0.28);
                transform: scaleX(1);
            }
            50% {
                box-shadow: 0 4px 18px rgba(214, 31, 31, 0.52);
                transform: scaleX(1.04);
            }
        }
        .poi-picker-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .poi-picker-group-toggle {
            padding-right: 46px;
        }
        .poi-picker-group-toggle.current {
            background: rgba(255, 51, 51, 0.1);
            border-color: rgba(255, 51, 51, 0.34);
        }
        .poi-picker-group-chevron {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.56);
            font-size: 12px;
            transition: transform 0.18s ease, color 0.18s ease;
            pointer-events: none;
        }
        .poi-picker-group.open .poi-picker-group-chevron {
            transform: translateY(-50%) rotate(180deg);
            color: rgba(255, 255, 255, 0.86);
        }
        .poi-picker-group-body {
            display: none;
            flex-direction: column;
            gap: 8px;
            margin: -2px 0 4px 18px;
            padding: 4px 0 0 12px;
            border-left: 1px solid rgba(255, 51, 51, 0.18);
        }
        .poi-picker-group.open .poi-picker-group-body {
            display: flex;
        }
        .poi-picker-subitem {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.06);
        }
        .poi-picker-group-main .poi-picker-item-badge,
        .poi-picker-poi-item .poi-picker-item-badge {
            width: 26px;
            height: 26px;
            font-size: 11px;
            margin-top: 1px;
        }
        .poi-picker-group-main .poi-picker-item-title,
        .poi-picker-poi-item .poi-picker-item-title {
            font-size: 14px;
        }

        /* ===== End-of-tour prompt overlay (over now-playing image) ===== */
        .next-poi-prompt {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.92);
            background: linear-gradient(135deg, rgba(20,20,20,0.96), rgba(40,10,10,0.96));
            border: 1px solid rgba(255, 51, 51, 0.6);
            border-radius: 14px;
            padding: 14px 18px 12px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            text-align: center;
            min-width: 200px;
            max-width: 80%;
            z-index: 1010;
            cursor: pointer;
            box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 24px rgba(255, 51, 51, 0.35);
            opacity: 0;
            pointer-events: auto;
            transition: opacity 0.35s ease, transform 0.35s ease;
        }
        .next-poi-prompt.visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .next-poi-prompt-close {
            position: absolute;
            top: 4px;
            right: 6px;
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.55);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 6px;
        }
        .next-poi-prompt-close:hover {
            color: #fff;
        }
        .next-poi-prompt-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #ff6b6b;
            margin-bottom: 4px;
        }
        .next-poi-prompt-title {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
            line-height: 1.25;
        }
        .next-poi-prompt-cta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
            color: rgba(255,255,255,0.85);
            background: rgba(255, 51, 51, 0.18);
            border: 1px solid rgba(255, 51, 51, 0.45);
            border-radius: 999px;
            padding: 5px 12px;
        }
        .next-poi-prompt-cta i {
            font-size: 13px;
            color: #ff6b6b;
        }
        body.light-mode .next-poi-prompt {
            background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,240,240,0.98));
            color: #1a1a1a;
            border-color: rgba(255, 51, 51, 0.7);
        }
        body.light-mode .next-poi-prompt-title {
            color: #1a1a1a;
        }
        body.light-mode .next-poi-prompt-close {
            color: rgba(0,0,0,0.5);
        }

        .audio-skip-back:hover,
        .audio-skip-forward:hover,
        .audio-refresh-btn:hover {
            background: rgba(255, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
            transform: scale(1.05);
        }

        .audio-skip-back .skip-arrow,
        .audio-skip-forward .skip-arrow {
            fill: rgba(153, 153, 153, 0.6);
            width: 32px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .audio-skip-back .skip-arrow-back {
            transform: translate(-50%, -50%) scaleX(-1);
        }

        .audio-skip-back .skip-number,
        .audio-skip-forward .skip-number {
            color: #999;
            font-size: 11px;
            font-weight: 700;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        /* Drag handle — full-width strip at the top of the floating player */
        .player-drag-handle {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 32px;
            cursor: grab;
            cursor: -webkit-grab;
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            border-radius: 12px 12px 0 0;
        }
        .player-drag-handle:active {
            cursor: grabbing;
            cursor: -webkit-grabbing;
        }
        .drag-grip-bar {
            display: block;
            width: 36px;
            height: 4px;
            background: rgba(255, 255, 255, 0.28);
            border-radius: 2px;
        }

        .now-playing {
            position: absolute;
            top: 22px;
            left: 0;
            right: 0;
            bottom: 24px;
            overflow-x: auto;
            overflow-y: hidden;
            display: flex;
            gap: 12px;
            align-items: center;
            z-index: 101;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
            /* Native scroll snap for smoother magnetic feel */
            scroll-snap-type: x mandatory;
        }

        .now-playing::-webkit-scrollbar {
            display: none;
        }

        /* Tour message / placeholder text styling - hidden during loading */
        #tourMessage {
            display: none;
        }

        /* Ghost spacer elements sized by JS to center first/last image */
        .now-playing .scroll-spacer {
            flex-shrink: 0;
            width: 0; /* sized dynamically */
            height: 145px; /* match center height */
            background: transparent;
            border-radius: 6px;
            opacity: 0;
        }

        /* Ensure audio player can be pushed behind panels when necessary */
        .audio-player.behind-panel {
            z-index: 50 !important;
            pointer-events: none;
        }

        .album-art {
            width: 69px;
            height: 52px;
            object-fit: cover;
            object-position: 50% 15%; /* favour top of image so heads aren't cut off */
            border-radius: 6px;
            flex-shrink: 0;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.5;
            scroll-snap-align: center;
        }

        .album-art.center {
            width: 220px;
            height: 145px;
            opacity: 1;
            z-index: 1002;
            object-position: 50% 15%; /* favour top of image so heads aren't cut off */
        }

        .album-art.side {
            opacity: 0.3;
            width: 55px;
            height: 36px;
        }

        .album-art:hover {
            opacity: 0.8;
        }

        .album-art.center:hover {
            opacity: 1;
        }

        .track-info {
            display: none;
        }

        /* Audio title - positioned at bottom center, below images */
        .audio-title {
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 1005;
            padding: 3px 12px;
            pointer-events: none;
            display: none;
            background: rgba(60, 60, 60, 0.85);
            border-radius: 6px;
            backdrop-filter: blur(4px);
            max-width: 85%;
        }

        .audio-title.active {
            display: block !important;
        }

        .audio-title h3 {
            color: white;
            font-size: 12px;
            font-weight: 500;
            margin: 0;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: 0.2px;
        }

        .audio-title h3::after {
            content: ".";
            color: #ff0000;
            margin-left: 2px;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            z-index: 1002;
        }

        .progress-bar:before {
            display: none;
        }

        .progress-fill {
            height: 100%;
            background: #ff0000;
            border-radius: 0;
            position: relative;
            transition: width 0.1s ease;
        }

        .progress-dot {
            display: none;
        }

        .time-stamps {
            display: none;
        }

        .audio-controls {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 1003;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .audio-controls .control-btn {
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: var(--text-primary);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
        }

        .audio-controls .control-btn:hover {
            background: rgba(255, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
            transform: scale(1.05);
        }

        .audio-controls .control-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* Music toggle button - special styling */
        .audio-controls .control-btn.music-toggle-btn {
            color: #ef4444;
            opacity: 1;
            cursor: pointer;
            transition: color 0.2s, all 0.3s ease;
        }

        .audio-controls .control-btn.music-toggle-btn.music-enabled {
            color: #a78bfa;
        }

        .audio-controls .control-btn.music-toggle-btn:hover {
            background: rgba(255, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
            transform: scale(1.05);
        }

        .audio-controls .control-btn.music-toggle-btn.music-enabled:hover {
            background: rgba(167, 139, 250, 0.15);
            box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
        }

        /* Hide unused buttons */
        #stopButton, #skipBackwardBtn {
            display: none;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 10px; /* Increased height for better touch sensitivity */
            background: transparent; /* Remove background, use pseudo-element instead */
            cursor: pointer;
            z-index: 1002;
            padding: 5px 0; /* Add padding for larger touch area */
        }

        .progress-bar::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 3px; /* Slightly thicker */
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%);
            z-index: 1;
        }

        .progress-fill {
            height: 6px; /* Keep visual height for red line */
            margin-top: 2px; /* Center it in the touch area */
            background: #ff0000;
            border-radius: 0;
            position: relative;
            transition: width 0.1s ease;
            width: 0%;
            z-index: 2; /* Ensure red line is above grey line */
        }

        .progress-bar.dragging .progress-fill {
            transition: none; /* Remove transition when dragging for immediate response */
        }

        .progress-dot {
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: #ff0000;
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            opacity: 0;
            transition: opacity 0.2s ease, transform 0.2s ease;
            pointer-events: auto;
            cursor: grab;
        }

        .progress-bar:hover .progress-dot,
        .progress-bar.dragging .progress-dot {
            opacity: 1;
        }

        .progress-bar.dragging .progress-dot {
            cursor: grabbing;
            transform: translateY(-50%) scale(1.2);
        }

        /* YouTube-style hover spot */
        .progress-hover-spot {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            background: #ff0000;
            border: 1px solid white;
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
            z-index: 1003;
            transition: opacity 0.1s ease;
        }

        .progress-bar:hover .progress-hover-spot {
            opacity: 0.8;
        }

        .time-stamps {
            display: none;
        }

        .control-btn {
            background: var(--secondary-bg);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: var(--text-primary);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
        }

        .control-btn:hover:not(.disabled) {
            background: rgba(255, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
            transform: scale(1.05);
        }

        .control-btn i {
            color: #999; /* Grey color for all control button icons */
            font-size: 12px;
        }

        .control-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .control-btn.playing i.fa-play {
            display: none;
        }

        .control-btn.playing i.fa-pause {
            display: block;
        }

        .control-btn i.fa-pause {
            display: none;
        }

        @media (max-width: 360px) {
            .control-btn {
                width: 40px;
                height: 40px;
            }

            .control-btn i {
                font-size: 16px;
            }
        }

        /* Image Popup Gallery Styles (Updated to match audioplayer.html) */
        .image-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1); /* subtle dark tint */
            backdrop-filter: blur(8px); /* frosted glass effect */
            -webkit-backdrop-filter: blur(8px); /* Safari support */
            z-index: 3000;
            display: none;
            transition: opacity 0.3s ease;
            opacity: 0;
        }

        .image-popup.active {
            display: flex !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            align-items: center;
            justify-content: center;
        }

        .main-image-fixed {
            position: relative;
            display: block;
            margin: 0 auto 15px auto;
            width: 80%;
            max-width: 280px;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            border: 3px solid rgba(255, 0, 0, 0.5);
            z-index: 3002;
            pointer-events: auto;
            background: linear-gradient(135deg, #333 0%, #222 100%);
        }

/* ⛔ iOS BLACK SCREEN PREVENTION — nuclear backdrop-filter kill
   backdrop-filter on ANY element (including JS-injected inline styles) can
   trigger a WebKit compositing layer flush in WKWebView, which reclaims the
   Mapbox WebGL canvas GPU layer and turns the screen permanently black.
   CSS !important overrides inline styles, so this single rule covers ALL
   blur surfaces injected by floating-overview.js, language-init.js,
   categorychips.js, liveLocation.js, tour-utils.js, etc.
   DO NOT remove this rule. */
body.ios-device * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Local experiment: explicitly opt selected iOS overlays back into blur without
   removing the global safety rule for the rest of the UI. */
body.ios-device .ios-force-backdrop-blur-6 {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

body.ios-device .ios-force-backdrop-blur-8 {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body.ios-device .ios-force-backdrop-blur-10 {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.ios-device .ios-force-backdrop-blur-25 {
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}

body.ios-device .image-popup {
    background: rgba(8, 10, 12, 0.92);
}

body.ios-device .poi-picker-sheet,
body.ios-device .audio-next-poi-btn .next-poi-badge {
    /* backdrop-filter already killed by rule above */
}

body.ios-device .poi-picker-sheet {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.99), rgba(8, 8, 8, 1));
}

        .image-viewer-container {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 95%;
            max-width: 900px;
            z-index: 3001;
            background: #333;
            border-radius: 12px;
            padding: 15px;
        }

        .thumbnail-scroll {
            display: flex;
            align-items: center;
            gap: 15px;
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            padding: 15px;
            scroll-behavior: smooth;
            justify-content: flex-start;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }

        .thumbnail-scroll::-webkit-scrollbar {
            height: 8px;
        }

        .thumbnail-scroll::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        .thumbnail-scroll::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        .thumbnail-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
            opacity: 0.7;
            flex-shrink: 0;
            scroll-snap-align: center;
        }

        .thumbnail-image:hover {
            opacity: 1;
            border-color: rgba(255, 0, 0, 0.3); /* More subtle red border */
        }

        .thumbnail-image.center {
            opacity: 1;
            border-color: var(--primary-color);
            box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
        }

        /* Bottom Navigation Bar Styles */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: calc(55px + env(safe-area-inset-bottom, 0px)); /* Expand to absorb system nav bar height */
            background: #000000;
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 20px;
            padding-bottom: env(safe-area-inset-bottom, 0px); /* Reserve space behind system nav bar */
            z-index: 1000;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
            pointer-events: auto;
        }

        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            padding: 8px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            color: var(--text-secondary);
            min-width: 0;
            background: none;
            border: none;
            font-family: inherit;
            pointer-events: auto;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .bottom-nav-item:hover {
            background: none; /* Remove background highlight */
            color: var(--text-primary);
            transform: translateY(-2px);
        }

        .bottom-nav-item.active {
            color: var(--text-secondary); /* Make home icon same color as others */
        }

        .bottom-nav-item.active:hover {
            color: var(--text-primary); /* Same hover as others */
        }

        /* Add red glow effect like chips */
        .bottom-nav-item.active .nav-icon {
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.6), 0 0 20px rgba(255, 0, 0, 0.4);
            color: var(--text-primary);
        }

        /* Red glow effect for active audio player */
        .bottom-nav-item.audio-active .nav-icon {
            text-shadow: 0 0 8px rgba(255, 0, 0, 0.6), 0 0 16px rgba(255, 0, 0, 0.4);
            color: var(--primary-color);
            filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.3));
        }

        .nav-icon {
            font-size: 24px; /* Increased from 22px to make icons a little bigger */
            margin-bottom: 6px; /* Reduced from 8px to narrow gap and make more symmetrical */
        }

        .nav-label {
            font-size: 9px; /* Reduced from 10px */
            font-weight: 500;
            text-align: center;
            margin-top: 2px; /* Reduced from 4px to shift text up slightly for better symmetry */
        }

        .nav-icon-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .nav-badge {
            position: absolute;
            top: -6px;
            left: -10px;
            background: rgba(34, 197, 94, 0.32);
            border: 1px solid rgba(34, 197, 94, 0.55);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            line-height: 1;
            box-shadow: 0 0 6px rgba(34, 197, 94, 0.25);
        }

        .nav-logo-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }

        .nav-logo {
            width: 24px;
            height: 24px;
            margin-bottom: 2px;
        }

        .nav-app-title {
            font-size: 8px;
            font-weight: 600;
            color: var(--text-secondary);
            text-align: center;
        }

        .dark-mode-toggle {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 50px;
        }

        .dark-mode-toggle:hover {
            background: none; /* Remove background highlight */
            color: var(--text-primary);
            transform: translateY(-2px);
        }

        .dark-mode-toggle.active {
            color: var(--text-primary); /* Match other icons when active */
        }

        /* Add red glow effect for active dark mode toggle */
        .dark-mode-toggle.active .nav-icon {
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.6), 0 0 20px rgba(255, 0, 0, 0.4);
            color: var(--text-primary);
        }

        /* Adjust body padding to accommodate bottom nav */
        body {
            padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* Increased from 55px; env() accounts for system nav bar */
        }

        /* Hide bottom nav on very small screens or when audio player is dragged to bottom */
        @media (max-height: 500px) {
            .bottom-nav {
                display: none;
            }
            body {
                padding-bottom: 0;
            }
        }

        /* Mobile responsiveness for bottom nav */
        @media (max-width: 768px) {
            .bottom-nav {
                height: calc(60px + env(safe-area-inset-bottom, 0px)); /* Slightly smaller on mobile */
                padding: 0 10px; /* Less padding on mobile */
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            
            .nav-icon {
                font-size: 20px; /* Increased from 16px */
                margin-bottom: 2px;
            }
            
            .nav-label {
                font-size: 8px; /* Smaller text on mobile */
            }
            
            .bottom-nav-item {
                padding: 6px; /* Less padding on mobile */
                min-width: 45px; /* Smaller minimum width */
            }
            
            .dark-mode-toggle {
                padding: 6px; /* Less padding on mobile */
                min-width: 45px; /* Smaller minimum width */
            }
        }

        /* Extra small phones */
        @media (max-width: 480px) {
            .bottom-nav {
                height: calc(55px + env(safe-area-inset-bottom, 0px)); /* Even smaller on very small phones */
                padding: 0 5px;
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            
            .nav-icon {
                font-size: 20px; /* Increased from 18px to make icons a little bigger */
                margin-bottom: 4px; /* Reduced from 6px to narrow gap and make more symmetrical */
            }
            
            .nav-label {
                font-size: 7px; /* Tiny text on small phones */
                margin-top: 2px; /* Reduced from 3px to shift text up slightly for better symmetry */
            }
            
            .bottom-nav-item {
                padding: 4px;
                min-width: 40px;
            }
            
            .dark-mode-toggle {
                padding: 4px;
                min-width: 40px;
            }
        }

        /* Update body padding for mobile sizes */
        @media (max-width: 768px) {
            body {
                padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); /* Match mobile nav height */
            }
        }

        @media (max-width: 480px) {
            body {
                padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px)); /* Match small phone nav height */
            }
        }

        /* Language Dropdown Styling */
        .language-dropdown {
            background: var(--secondary-bg);
            color: var(--text-primary);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            padding: 8px 6px; /* Even less horizontal padding */
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
            margin-left: 0;
            margin-right: 0;
            width: 70px; /* Much narrower width to fit content tightly */
            height: 32px; /* Match search bar height */
            /* Remove dropdown arrow on desktop, but allow native on mobile */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: none;
            /* Center the text content */
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Ensure it's clickable on mobile */
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* Mobile-specific styling for language dropdown */
        @media (max-width: 768px) {
            .language-dropdown {
                /* Remove dropdown arrow completely on mobile */
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background: var(--secondary-bg);
                background-image: none; /* Ensure no background arrow */
                border: 1px solid rgba(255, 255, 255, 0.3);
                border-radius: 8px;
                /* Match search bar dimensions exactly */
                width: 60px;
                height: 32px; /* Same depth as search bar */
                padding: 8px 4px;
                margin-left: 0;
                margin-right: 0;
                font-size: 14px; /* Good mobile size without triggering zoom */
                text-align: center;
                /* Better mobile touch handling */
                pointer-events: auto;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                /* Mobile-friendly styling */
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                /* Ensure proper contrast on mobile */
                color: var(--text-primary);
                /* Remove any potential arrow styling */
                background-repeat: no-repeat;
                background-position: center;
                background-size: 0; /* Hide any background arrow */
            }
        }

        /* Small phone optimization */
        @media (max-width: 480px) {
            .language-dropdown {
                width: 55px;
                height: 30px; /* Match search bar depth on small phones */
                padding: 6px 2px;
                margin-left: 0;
                margin-right: 0;
                font-size: 13px;
                border-radius: 6px;
                /* Ensure no arrow on small phones */
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background-image: none;
                background-size: 0;
            }
        }

        .language-dropdown:hover {
            border: none;
            box-shadow: var(--glow-primary);
        }

        .language-dropdown:focus {
            border: none;
            box-shadow: var(--glow-primary);
        }

        .language-dropdown option {
            background: var(--secondary-bg);
            color: var(--text-primary);
            padding: 8px;
        }

        /* Very small phones - hide language dropdown to save space */
        @media (max-width: 360px) {
            .language-dropdown {
                display: none;
            }
        }

/* FINAL OVERRIDE: Soft red glow to match live location button */
/* These rules must come LAST to override all earlier conflicting styles */
.top-bar .chip:hover,
#chip-container .chip:hover,
#collections-toggle:hover,
.language-dropdown:hover,
#languageDropdown:hover,
.language-dropdown:focus,
#languageDropdown:focus,
#search-input:focus,
#search-input:hover {
    box-shadow: 0 0 2px rgba(255, 0, 0, 0.1) !important;
}

.top-bar .chip.active,
#chip-container .chip.active {
    box-shadow: 0 0 2px rgba(255, 0, 0, 0.08) !important;
}

/* Force business plan tier titles to be white with a red trailing dot */
.pages-businesses .card .tier-header .tier-title,
.pages-businesses .tier-title,
body[class*="pages-businesses"] .tier-title {
    color: var(--text-primary) !important;
}

/* If the title contains a trailing span for the red dot, ensure it stays red */
.pages-businesses .tier-title span,
body[class*="pages-businesses"] .tier-title span {
    color: #ff0000 !important;
}

/* Explicit override: ensure tier titles are white and trailing dot span is red */
.tier-title {
    color: #e0e0e0 !important;
}
.tier-title span {
    color: #ff0000 !important;
}

/* Soft red glow overrides to match live location button */
        /* Place these at the end to win specificity/cascade battles */
        .top-bar .chip:hover,
        .top-bar .chip.active,
        #chip-container .chip:hover,
        #chip-container .chip.active,
        #collections-toggle:hover,
        .language-dropdown:hover,
        #languageDropdown:hover,
        .language-dropdown:focus,
        #languageDropdown:focus,
        #search-input:focus,
        #search-input:hover {
          box-shadow: 0 0 15px rgba(255, 0, 0, 0.5) !important;
        }

        /* Normal (non-hover) active chip state a bit softer */
        .top-bar .chip.active,
        #chip-container .chip.active {
          box-shadow: 0 0 10px rgba(255, 0, 0, 0.3) !important;
        }

        /* Remove pseudo-element approach - use explicit span with class .tier-dot */
.tier-title::after { content: none !important; }

.tier-dot {
    color: #ff0000 !important;
    margin-left: 4px;
    font-weight: 600;
    display: inline !important;
}

/* Strong override: ensure only the tier-dot span is red */
.card .tier-header .tier-title .tier-dot,
.tier-header .tier-title .tier-dot,
.tier-title .tier-dot {
    color: #ff0000 !important;
    display: inline !important;
}

/* ===== LIGHT MODE — Bottom Navigation ===== */
body.light-mode .bottom-nav {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

body.light-mode .bottom-nav-item {
    color: #666666;
}

body.light-mode .bottom-nav-item:hover {
    color: #111111;
}

body.light-mode .bottom-nav-item.active {
    color: #666666;
}

body.light-mode .bottom-nav-item.active .nav-icon {
    color: #111111;
}

/* ============================================
   Floating Window Play Button Sheen
   QR, AI, Go To Places header play buttons
   ============================================ */
.qr-play-button,
.ai-play-button,
.overview-play-button {
    overflow: hidden !important;
}
.qr-play-button::before,
.ai-play-button::before,
.overview-play-button::before {
    content: '';
    position: absolute;
    width: 45%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: rotate(-45deg);
    pointer-events: none;
    bottom: -75%;
    left: -75%;
    animation: floatingPlayShine 2s ease-in-out infinite;
}
.qr-play-button.playing::before,
.ai-play-button.playing::before,
.overview-play-button.playing::before,
.qr-play-button.loading::before,
.ai-play-button.loading::before,
.overview-play-button.loading::before {
    animation: none;
    opacity: 0;
}
.qr-play-button i.fa-pause,
.ai-play-button i.fa-pause,
.overview-play-button i.fa-pause {
    display: none;
}
.qr-play-button .fa-spinner,
.ai-play-button .fa-spinner,
.overview-play-button .fa-spinner {
    display: none;
    color: #999;
}
.qr-play-button.playing i.fa-play,
.ai-play-button.playing i.fa-play,
.overview-play-button.playing i.fa-play {
    display: none !important;
}
.qr-play-button.playing i.fa-pause,
.ai-play-button.playing i.fa-pause,
.overview-play-button.playing i.fa-pause {
    display: inline-block !important;
}
.qr-play-button.loading i.fa-play,
.qr-play-button.loading i.fa-pause,
.ai-play-button.loading i.fa-play,
.ai-play-button.loading i.fa-pause,
.overview-play-button.loading i.fa-play,
.overview-play-button.loading i.fa-pause {
    display: none !important;
}
.qr-play-button.loading .fa-spinner,
.ai-play-button.loading .fa-spinner,
.overview-play-button.loading .fa-spinner {
    display: inline-block !important;
}

/* Go To Places picker play buttons (country, city, tours, district) */
.overview-country-play,
.overview-city-play,
.overview-tours-play,
.overview-district-play {
    position: relative !important;
    overflow: hidden !important;
}
.overview-country-play i.fa-pause,
.overview-city-play i.fa-pause,
.overview-tours-play i.fa-pause,
.overview-district-play i.fa-pause {
    display: none;
}
.overview-country-play .fa-spinner,
.overview-city-play .fa-spinner,
.overview-tours-play .fa-spinner,
.overview-district-play .fa-spinner {
    display: none;
    color: #b0b0b0;
}
.overview-country-play.playing i.fa-play,
.overview-city-play.playing i.fa-play,
.overview-tours-play.playing i.fa-play,
.overview-district-play.playing i.fa-play {
    display: none !important;
}
.overview-country-play.playing i.fa-pause,
.overview-city-play.playing i.fa-pause,
.overview-tours-play.playing i.fa-pause,
.overview-district-play.playing i.fa-pause {
    display: inline-block !important;
}
.overview-country-play.loading i.fa-play,
.overview-country-play.loading i.fa-pause,
.overview-city-play.loading i.fa-play,
.overview-city-play.loading i.fa-pause,
.overview-tours-play.loading i.fa-play,
.overview-tours-play.loading i.fa-pause,
.overview-district-play.loading i.fa-play,
.overview-district-play.loading i.fa-pause {
    display: none !important;
}
.overview-country-play.loading .fa-spinner,
.overview-city-play.loading .fa-spinner,
.overview-tours-play.loading .fa-spinner,
.overview-district-play.loading .fa-spinner {
    display: inline-block !important;
}
.overview-country-play::before,
.overview-city-play::before,
.overview-tours-play::before,
.overview-district-play::before {
    content: '';
    position: absolute;
    width: 45%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: rotate(-45deg);
    pointer-events: none;
    bottom: -75%;
    left: -75%;
    animation: floatingPlayShine 2s ease-in-out infinite;
}
.overview-country-play.playing::before,
.overview-city-play.playing::before,
.overview-tours-play.playing::before,
.overview-district-play.playing::before,
.overview-country-play.loading::before,
.overview-city-play.loading::before,
.overview-tours-play.loading::before,
.overview-district-play.loading::before {
    animation: none;
    opacity: 0;
}

@keyframes floatingPlayShine {
    0%   { bottom: -75%; left: -75%; }
    28%  { bottom: 130%; left: 130%; }
    100% { bottom: 130%; left: 130%; }
}

/* ── Upgrade button sheen (shared with play buttons) ── */
.upgrade-sheen-btn {
    position: relative !important;
    overflow: hidden !important;
}
.upgrade-sheen-btn::before {
    content: '';
    position: absolute;
    width: 45%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: rotate(-45deg);
    pointer-events: none;
    bottom: -75%;
    left: -75%;
    animation: floatingPlayShine 2s ease-in-out infinite;
}

/* Tutorial play button sheen */
#floating-tutorial-btn::before {
    content: '';
    position: absolute;
    width: 45%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: rotate(-45deg);
    pointer-events: none;
    bottom: -75%;
    left: -75%;
    animation: floatingPlayShine 2s ease-in-out infinite;
    animation-delay: var(--sheen-sync, 0ms);
}

/* ── Top Bar: Theme Toggle (moon/sun) ── */
.top-bar-theme-toggle {
    background: var(--secondary-bg, #1e1e1e);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.2s, transform 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.top-bar-theme-toggle:hover,
.top-bar-theme-toggle:focus {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    transform: scale(1.1);
    outline: none;
}
@media (max-width: 360px) {
    .top-bar-theme-toggle { width: 28px; height: 28px; font-size: 13px; }
}

/* ── Top Bar: Language Picker Button ── */
.lang-picker-btn {
    background: var(--secondary-bg, #1e1e1e);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0 8px;
    width: 70px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.lang-picker-btn:hover,
.lang-picker-btn:focus {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    outline: none;
}
@media (max-width: 768px) {
    .lang-picker-btn { width: 60px; height: 32px; font-size: 14px; }
}
@media (max-width: 480px) {
    .lang-picker-btn { width: 55px; height: 30px; font-size: 13px; }
}
@media (max-width: 360px) {
    .lang-picker-btn { width: 48px; height: 28px; font-size: 11px; padding: 0 4px; }
}

/* ── Language Modal Overlay ── */
.lang-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 99999;
    align-items: flex-end;
    justify-content: center;
}
.lang-modal-overlay.open {
    display: flex;
}
.lang-modal-sheet {
    background: #181818;
    border: 1px solid rgba(255, 0, 0, 0.25);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-width: 500px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.7);
    animation: langSheetUp 0.22s ease-out;
}
@keyframes langSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.lang-modal-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 10px auto 0;
}
.lang-modal-title {
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lang-modal-item {
    display: flex;
    align-items: center;
    padding: 15px 24px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 14px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.lang-modal-item:last-child { border-bottom: none; }
.lang-modal-item:active,
.lang-modal-item:hover { background: rgba(255, 0, 0, 0.07); }
.lang-modal-item.active { background: rgba(255, 0, 0, 0.1); }
.lang-flag { font-size: 1.4rem; line-height: 1; }
.lang-full { flex: 1; color: #e0e0e0; font-size: 1rem; }
.lang-code { color: #888; font-size: 0.85rem; font-weight: 600; }
.lang-check { color: #ff3333; display: none; font-size: 0.85rem; margin-left: 4px; }
.lang-modal-item.active .lang-check { display: inline; }
.lang-modal-item.active .lang-full { color: #fff; font-weight: 600; }

/* ===== LIGHT MODE — Floating Audio Player Buttons ===== */
body.light-mode #audioPlayerSection.minimized .audio-controls .control-btn,
body.light-mode #audioPlayerSection.minimized .audio-close,
body.light-mode #audioPlayerSection.minimized .audio-skip-back,
body.light-mode #audioPlayerSection.minimized .audio-skip-forward,
body.light-mode #audioPlayerSection.minimized .audio-refresh-btn,
body.light-mode #audioPlayerSection.minimized .audio-menu-btn {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(17, 17, 17, 0.68);
    color: rgba(17, 17, 17, 0.94);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

body.light-mode #audioPlayerSection.minimized .audio-controls .control-btn i,
body.light-mode #audioPlayerSection.minimized .audio-close i,
body.light-mode #audioPlayerSection.minimized .audio-refresh-btn i,
body.light-mode #audioPlayerSection.minimized .audio-menu-btn i {
    color: rgba(17, 17, 17, 0.94);
    font-size: 15px;
    text-shadow: none;
}

body.light-mode #audioPlayerSection.minimized .audio-controls .control-btn.disabled {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(17, 17, 17, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

body.light-mode #audioPlayerSection.minimized .audio-controls .control-btn.disabled i {
    color: rgba(17, 17, 17, 0.4);
}

body.light-mode #audioPlayerSection.minimized .audio-skip-back .skip-arrow,
body.light-mode #audioPlayerSection.minimized .audio-skip-forward .skip-arrow {
    fill: rgba(17, 17, 17, 0.9);
    width: 34px;
    height: 34px;
}

body.light-mode #audioPlayerSection.minimized .audio-skip-back .skip-number,
body.light-mode #audioPlayerSection.minimized .audio-skip-forward .skip-number {
    color: rgba(17, 17, 17, 0.95);
    font-size: 12px;
    font-weight: 800;
}

body.light-mode #audioPlayerSection.minimized .audio-controls .control-btn:hover:not(.disabled),
body.light-mode #audioPlayerSection.minimized .audio-close:hover,
body.light-mode #audioPlayerSection.minimized .audio-skip-back:hover,
body.light-mode #audioPlayerSection.minimized .audio-skip-forward:hover,
body.light-mode #audioPlayerSection.minimized .audio-refresh-btn:hover,
body.light-mode #audioPlayerSection.minimized .audio-menu-btn:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 0, 0, 0.82);
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);
}

body.light-mode #audioPlayerSection.minimized .audio-controls .control-btn:hover:not(.disabled),
body.light-mode #audioPlayerSection.minimized .audio-close:hover,
body.light-mode #audioPlayerSection.minimized .audio-skip-back:hover,
body.light-mode #audioPlayerSection.minimized .audio-refresh-btn:hover,
body.light-mode #audioPlayerSection.minimized .audio-skip-forward:hover {
    transform: scale(1.05);
}

body.light-mode #floating-tutorial-btn,
body.light-mode .tutorial-skip-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(17, 17, 17, 0.68) !important;
    color: rgba(17, 17, 17, 0.94) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

body.light-mode #floating-tutorial-btn > i,
body.light-mode #floating-tutorial-btn .tut-spin-wrap i {
    color: rgba(17, 17, 17, 0.94) !important;
    font-size: 15px !important;
}

body.light-mode .tutorial-skip-btn svg {
    fill: rgba(17, 17, 17, 0.92) !important;
    width: 34px !important;
    height: 34px !important;
}

body.light-mode .tutorial-skip-btn span {
    color: rgba(17, 17, 17, 0.96) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.light-mode #floating-tutorial-btn:hover,
body.light-mode .tutorial-skip-btn:hover {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(255, 0, 0, 0.82) !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.05) !important;
}

/* ===== LIGHT MODE — POI Picker sheet ===== */
body.light-mode .poi-picker-sheet {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 248, 248, 0.99));
    border-color: rgba(17, 17, 17, 0.12);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}
body.light-mode .poi-picker-header {
    border-bottom-color: rgba(17, 17, 17, 0.08);
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.06), rgba(255, 255, 255, 0));
}
body.light-mode .poi-picker-eyebrow,
body.light-mode .poi-picker-meta,
body.light-mode .poi-picker-item-kicker,
body.light-mode .poi-picker-item-subtitle {
    color: rgba(17, 17, 17, 0.56);
}
body.light-mode .poi-picker-title,
body.light-mode .poi-picker-item-title {
    color: rgba(17, 17, 17, 0.94);
}
body.light-mode .poi-picker-close {
    border-color: rgba(17, 17, 17, 0.12);
    background: rgba(17, 17, 17, 0.04);
    color: rgba(17, 17, 17, 0.72);
}
body.light-mode .poi-picker-item {
    background: rgba(17, 17, 17, 0.03);
    border-color: rgba(17, 17, 17, 0.08);
}
body.light-mode .poi-picker-item:hover {
    background: rgba(255, 0, 0, 0.06);
    border-color: rgba(255, 0, 0, 0.24);
}
body.light-mode .poi-picker-item.active {
    background: rgba(255, 0, 0, 0.08);
    border-color: rgba(255, 0, 0, 0.34);
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.08) inset, 0 10px 20px rgba(0, 0, 0, 0.08);
}
body.light-mode .poi-picker-item.active .poi-picker-item-content {
    padding-right: 88px;
}
body.light-mode .poi-picker-group-toggle.current {
    background: rgba(255, 0, 0, 0.05);
    border-color: rgba(255, 0, 0, 0.2);
}
body.light-mode .poi-picker-group-chevron {
    color: rgba(17, 17, 17, 0.56);
}
body.light-mode .poi-picker-group-body {
    border-left-color: rgba(255, 0, 0, 0.14);
}
body.light-mode .poi-picker-subitem {
    background: rgba(17, 17, 17, 0.02);
    border-color: rgba(17, 17, 17, 0.06);
}
body.light-mode .poi-picker-item-badge {
    background: rgba(255, 0, 0, 0.08);
    border-color: rgba(255, 0, 0, 0.16);
    color: rgba(17, 17, 17, 0.86);
}
body.light-mode .poi-picker-item-status {
    background: linear-gradient(45deg, #ff8a7d, #ff5b47);
    border-color: rgba(255, 91, 71, 0.22);
    color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 12px rgba(255, 91, 71, 0.24);
}

/* ===== LIGHT MODE — Audio title strip at bottom of player ===== */
body.light-mode .audio-title {
    background: rgba(0, 0, 0, 0.62);
}
body.light-mode .audio-title h3 {
    color: #fff;
}