/* ============================================
   Tesla Road Trip Planner - Styles
   ============================================ */
:root {
    /* Light theme (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #e8e8ed;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #86868b;
    --border-color: #d2d2d7;
    --shadow-color: rgba(0, 0, 0, 0.1);
    /* Tesla brand colors */
    --tesla-red: #e31937;
    --tesla-red-dark: #c41230;
    --accent-blue: #0071e3;
    --accent-green: #34c759;
    --accent-orange: #ff9500;
    --accent-purple: #af52de;
    /* Category colors */
    --color-theme-park: #ff3b30;
    --color-national-park: #34c759;
    --color-state-park: #5ac8fa;
    --color-zoo: #ff9500;
    --color-museum: #af52de;
    --color-attraction: #ff2d55;
    --color-lighthouse: #FFD700;
    --color-battlefield: #8B4513;
    --color-landmark: #4A90D9;
    --color-supercharger: #e31937;
    --color-cave: #8B4513;
    /* Fame/Renown tier colors */
    --fame-iconic: #FFD700;      /* Gold - World Famous/Iconic */
    --fame-renowned: #9B59B6;    /* Purple - Nationally Renowned */
    --fame-popular: #3498DB;     /* Blue - Regionally Popular */
    --fame-notable: #27AE60;     /* Green - Well Known */
    --fame-local: #95A5A6;       /* Gray - Local Favorite */
    /* Dimensions */
    --sidebar-width: 340px;
    --header-height: 60px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}
/* Dark theme */
[data-theme="dark"] {
    --bg-primary: #1c1c1e;
    --bg-secondary: #2c2c2e;
    --bg-tertiary: #3a3a3c;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted: #6e6e73;
    --border-color: #3a3a3c;
    --shadow-color: rgba(0, 0, 0, 0.3);
}
/* ============================================
   Base Styles
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
}
/* Ensure all interactive elements are tappable in PWA */
input, select, textarea, button, a, [onclick], [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}
/* ============================================
   App Container
   ============================================ */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}
/* ============================================
   Sidebar
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}
.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-primary);
    flex-shrink: 0;
}
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.tesla-logo {
    color: var(--tesla-red);
}
.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.theme-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}
.theme-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.theme-toggle .moon-icon {
    display: none;
}
[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}
[data-theme="dark"] .theme-toggle .moon-icon {
    display: block;
}
/* Sidebar close button - only visible on mobile/PWA */
.sidebar-close-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--tesla-red);
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: white !important;
    transition: var(--transition-fast);
    box-shadow: 0 2px 8px rgba(227, 25, 55, 0.4);
}
.sidebar-close-btn:hover {
    background: var(--tesla-red-dark);
    transform: scale(1.05);
}
@media (max-width: 768px) {
    .sidebar-close-btn {
        display: flex;
    }
}
/* Sidebar scroll area */
.sidebar > .panel {
    flex-shrink: 0;
}
.sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
/* ============================================
   Panels
   ============================================ */
.panel {
    border-bottom: 1px solid var(--border-color);
}
.panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-secondary);
    cursor: default;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.panel-title.collapsible {
    cursor: pointer;
    user-select: none;
}
.panel-title.collapsible:hover {
    background: var(--bg-tertiary);
}
.panel-title .chevron {
    margin-left: auto;
    transition: transform var(--transition-fast);
}
.panel-title.collapsed .chevron {
    transform: rotate(-90deg);
}
.panel-content {
    padding: 16px 20px;
    background: var(--bg-primary);
}
.panel-content.collapsed {
    display: none;
}
/* ============================================
   Form Elements
   ============================================ */
.form-group {
    margin-bottom: 16px;
}
.form-group:last-child {
    margin-bottom: 0;
}
label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-fast);
    /* PWA/Mobile touch fixes */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: text;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: var(--tesla-red);
    box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.1);
}
input[type="text"]::placeholder {
    color: var(--text-muted);
}
/* Range slider */
input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tesla-red);
    cursor: pointer;
    transition: var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tesla-red);
    cursor: pointer;
    border: none;
}
/* Efficiency presets */
.efficiency-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.preset-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}
.preset-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.preset-btn.active {
    background: var(--tesla-red);
    border-color: var(--tesla-red);
    color: white !important;
}
/* Help icon */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: help;
    margin-left: 4px;
}
.help-icon:hover {
    background: var(--tesla-red);
    color: white !important;
}
/* Input with button */
.input-with-btn {
    display: flex;
    gap: 8px;
}
.input-with-btn input {
    flex: 1;
}
.btn-icon {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
}
.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--tesla-red);
}
/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    width: 100%;
}
.btn-primary {
    background: var(--tesla-red);
    color: white !important;
}
.btn-primary:hover {
    background: var(--tesla-red-dark);
}
.btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}
.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background: var(--bg-tertiary);
}
.btn-secondary:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}
.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}
.btn-group {
    display: flex;
    gap: 8px;
}
.btn-group .btn {
    flex: 1;
}
/* ============================================
   Checkboxes
   ============================================ */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}
.checkbox input {
    display: none;
}
.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: var(--transition-fast);
}
.checkbox input:checked + .checkmark {
    border-color: transparent;
}
.checkbox input:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Category checkmark colors */
.checkmark.theme-park { background: var(--color-theme-park); border-color: var(--color-theme-park); }
.checkmark.national-park { background: var(--color-national-park); border-color: var(--color-national-park); }
.checkmark.state-park { background: var(--color-state-park); border-color: var(--color-state-park); }
.checkmark.zoo { background: var(--color-zoo); border-color: var(--color-zoo); }
.checkmark.aquarium { background: #00bcd4; border-color: #00bcd4; }
.checkmark.museum { background: var(--color-museum); border-color: var(--color-museum); }
.checkmark.attraction { background: var(--color-attraction); border-color: var(--color-attraction); }
.checkmark.lighthouse { background: var(--color-lighthouse); border-color: var(--color-lighthouse); }
.checkmark.battlefield { background: var(--color-battlefield); border-color: var(--color-battlefield); }
.checkmark.landmark { background: var(--color-landmark); border-color: var(--color-landmark); }
.checkmark.cave { background: url("/images/cave-icon-v2.png") center/cover no-repeat; border-color: var(--color-cave); }
.checkmark.hot-spring { background: url("/images/hot-springs-icon.png") center/cover no-repeat; border-color: #e94560; }
.checkmark.waterfall { background: url("/images/waterfall-icon.png") center/cover no-repeat; border-color: #00aaff; }
.checkmark.winery { background: linear-gradient(135deg, #722F37 0%, #9B3E47 100%); border-color: #722F37; }
.checkmark.winery::before { content: "🍷"; position: absolute; font-size: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.checkmark.supercharger { background: var(--color-supercharger); border-color: var(--color-supercharger); }
.checkbox input:not(:checked) + .checkmark {
    background: transparent !important;
}
/* Round trip option */
.round-trip-option {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}
.round-trip-option:hover {
    background: var(--bg-tertiary);
}
.round-trip-option svg {
    color: var(--tesla-red);
}
/* ============================================
   Autocomplete
   ============================================ */
.autocomplete-container {
    position: relative;
    flex: 1;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: 0 4px 12px var(--shadow-color);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.autocomplete-dropdown.active {
    display: block;
}
.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-fast);
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.selected {
    background: var(--bg-secondary);
}
.autocomplete-item-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 2px;
}
.autocomplete-item-address {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.autocomplete-item-type {
    font-size: 10px;
    padding: 4px 10px;
    background: #6c757d;
    color: white !important;
    border-radius: 4px;
    margin-right: 6px;
    font-weight: 500;
}
/* Color-coded type badges */
.autocomplete-item.type-theme-park .autocomplete-item-type { background: var(--color-theme-park); }
.autocomplete-item.type-national-park .autocomplete-item-type { background: var(--color-national-park); }
.autocomplete-item.type-state-park .autocomplete-item-type { background: var(--color-state-park); color: #1a1a2e; }
.autocomplete-item.type-zoo .autocomplete-item-type { background: var(--color-zoo); color: #1a1a2e; }
.autocomplete-item.type-museum .autocomplete-item-type { background: var(--color-museum); }
.autocomplete-item.type-attraction .autocomplete-item-type { background: var(--color-attraction); }
.autocomplete-item.type-supercharger .autocomplete-item-type { background: var(--color-supercharger); }
.autocomplete-loading {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.autocomplete-loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-top-color: var(--tesla-red);
    border-radius: 50%;
    margin-left: 8px;
    animation: spin 0.8s linear infinite;
}
.autocomplete-no-results {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
/* ============================================
   Stats Grid
   ============================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.stat {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: var(--border-radius-sm);
    text-align: center;
}
.stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--tesla-red);
}
.stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
/* ============================================
   Route Steps
   ============================================ */
.route-steps {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: visible;
    padding-top: 15px; /* Space for distance badges */
    position: relative;
    z-index: 10;
}
/* Ensure route steps are fully interactive */
.route-steps * {
    pointer-events: auto;
}
.route-step {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: visible;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.route-step:hover {
    background: var(--bg-tertiary);
    border-color: var(--tesla-red);
}
.route-step.selected {
    background: #ffe0e0 !important;
    border: 2px solid var(--tesla-red) !important;
    box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.2) !important;
}
.route-step:first-child {
    margin-top: 0;
}
/* Route step cards don't need special last-child handling anymore */
/* Distance indicator between stops */
.step-distance {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tesla-red);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    z-index: 100;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--shadow-color);
}
.step-distance:hover,
.step-distance.highlighted,
.route-step:hover .step-distance {
    background: var(--tesla-red) !important;
    color: white !important;
    border-color: var(--tesla-red);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 3px 10px rgba(227, 25, 55, 0.5);
}
/* Map distance labels (on the route line) */
.distance-label-marker {
    background: transparent;
    border: none;
}
.map-distance-label {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
    color: #1d1d1f;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    border: 2px solid var(--tesla-red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
}
/* Keep distance labels light in dark mode for map visibility */
[data-theme="dark"] .map-distance-label {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
    color: #1d1d1f;
}
.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: white !important;
}
.step-icon.start { background: var(--accent-green); }
.step-icon.end { background: var(--tesla-red); }
.step-icon.waypoint { background: var(--accent-blue); }
.step-icon.charger { background: var(--accent-orange); }
.step-info {
    flex: 1;
    min-width: 0;
}
.step-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.step-details {
    font-size: 12px;
    color: var(--text-secondary);
}
/* Step header with name and battery */
.step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.step-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
}
/* Battery indicator */
.step-battery {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-green);
    color: white !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.step-battery.low {
    background: var(--tesla-red);
}
.step-battery.medium {
    background: var(--accent-orange);
}
.step-battery.charger {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-battery.charger .low {
    color: var(--tesla-red);
    background: none;
    padding: 0;
}
.step-battery.charger .medium {
    color: var(--accent-orange);
    background: none;
    padding: 0;
}
.step-battery.charger .charged {
    color: var(--accent-green);
    font-weight: 700;
}
/* Inline distance display */
.step-distance-inline {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 4px;
}
/* ============================================
   Charger List
   ============================================ */
.charger-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 16px;
}
.charger-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.charger-option:hover {
    background: var(--bg-tertiary);
}
.charger-option.selected {
    background: rgba(227, 25, 55, 0.1);
    border: 1px solid var(--tesla-red);
}
.charger-option input {
    margin-top: 4px;
}
.charger-info {
    flex: 1;
}
.charger-name {
    font-weight: 500;
    color: var(--text-primary);
}
.charger-details {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.charger-details span {
    margin-right: 12px;
}
/* Charger Amenities */
.charger-amenities {
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}
.amenities-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.amenities-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}
.amenities-btn.active {
    background: var(--accent-blue);
    color: white !important;
    border-color: var(--accent-blue);
}
.amenities-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}
.amenities-btn svg {
    flex-shrink: 0;
}
.amenities-content {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}
.amenities-content p {
    margin: 0 0 6px 0;
}
.amenities-content p:last-child {
    margin-bottom: 0;
}
.amenities-error {
    color: var(--text-muted);
    font-style: italic;
}
.loading-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.loading-spinner-sm {
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* ============================================
   Waypoints
   ============================================ */
#waypointsContainer {
    margin-bottom: 12px;
}
.waypoint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.waypoint-item input {
    flex: 1;
}
.waypoint-remove {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition-fast);
}
.waypoint-remove:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}
.waypoint-drag {
    width: 24px;
    height: 32px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.waypoint-drag:active {
    cursor: grabbing;
}
/* Waypoint drag and drop states */
.waypoint-item {
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    border-radius: var(--border-radius-sm);
    padding: 4px;
    margin-left: -4px;
    margin-right: -4px;
}
.waypoint-item.dragging {
    opacity: 0.5;
    background: var(--bg-tertiary);
    transform: scale(0.98);
}
.waypoint-item.drag-over {
    background: var(--bg-secondary);
    box-shadow: 0 -2px 0 0 var(--tesla-red);
}
.waypoint-item:not(.dragging):hover {
    background: var(--bg-secondary);
}
/* ============================================
   Saved Trips
   ============================================ */
.saved-trips-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}
.saved-trip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.saved-trip:hover {
    background: var(--bg-tertiary);
}
.saved-trip-info {
    flex: 1;
    min-width: 0;
}
.saved-trip-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-trip-date {
    font-size: 11px;
    color: var(--text-muted);
}
.saved-trip-delete {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.saved-trip-delete:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}
.no-trips {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
}
.help-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
/* Gas vehicle range info */
#gasRangeInfo {
    background: var(--bg-tertiary);
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    margin-top: 8px;
}
#gasRangeInfo strong {
    color: var(--accent-green);
}
/* Vehicle settings sections */
#teslaSettings,
#otherEvSettings,
#gasSettings {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 8px;
}
#teslaSettings:first-child,
#otherEvSettings:first-child,
#gasSettings:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
/* ============================================
   Map Container
   ============================================ */
.map-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #1a1a2e; /* Dark background for rotation */
}
#map {
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
}
/* During navigation with compass - use dark background for any rotation gaps */
.nav-compass-mode {
    background: #1a1a2e !important;
    overflow: hidden !important;
}
/* Scale is applied via JS transform along with rotation - GPU accelerated */
.nav-compass-mode #map {
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
/* Ensure controls stay in place when map rotates */
.nav-compass-mode .map-controls,
.nav-compass-mode .leaflet-control-zoom,
.nav-compass-mode .leaflet-control-attribution {
    transform-origin: center center;
    will-change: transform;
}
/* Follow indicator during navigation */
.follow-indicator,
#follow-indicator {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: var(--accent-green);
    color: white !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform-origin: center center;
}
/* Ensure markers don't jitter during rotation */
.nav-compass-mode .leaflet-marker-icon {
    transform-origin: center center;
    will-change: transform;
}
/* Navigation car marker - should rotate with heading */
.nav-car-marker {
    z-index: 1000 !important;
}
.nav-car-container {
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.15s linear;
}
.nav-car-svg {
    width: 40px;
    height: 60px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
/* ============================================
   Map Controls
   ============================================ */
.map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
.map-control-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 8px var(--shadow-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}
.map-control-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ============================================
   Mode Indicator
   ============================================ */
.mode-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    padding: 12px 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1000;
}
.mode-indicator span {
    font-weight: 500;
    color: var(--text-primary);
}
.btn-cancel {
    padding: 6px 12px;
    font-size: 13px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-cancel:hover {
    background: #ff3b30;
    color: white !important;
}
/* ============================================
   Loading Overlay
   ============================================ */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.loading-spinner {
    width: 56px;
    height: 56px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--tesla-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loading-overlay p {
    color: white !important;
    margin-top: 20px;
    font-weight: 500;
}
/* ============================================
   Modal
   ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
}
.modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-close {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}
.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.modal-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-right: 40px;
}
.modal-type {
    font-size: 13px;
    color: var(--tesla-red);
    font-weight: 500;
    margin-bottom: 12px;
}
.modal-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}
.modal-address {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.modal-actions {
    display: flex;
    gap: 12px;
}
.modal-actions .btn {
    flex: 1;
}
/* iOS PWA Auth Modal */
.ios-pwa-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}
.ios-pwa-modal {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.ios-pwa-modal h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.ios-pwa-modal p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}
.ios-pwa-modal ol {
    margin: 16px 0;
    padding-left: 20px;
}
.ios-pwa-modal li {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}
.ios-pwa-modal strong {
    color: var(--text-primary);
}
.ios-pwa-modal .ios-hint {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 12px;
}
.ios-pwa-modal .btn {
    width: 100%;
}
.ios-pwa-modal .btn + .btn {
    margin-top: 10px;
}
.copy-url-container {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}
.copy-url-input {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.copy-url-container .btn {
    width: auto;
    flex-shrink: 0;
}
/* ============================================
   Leaflet Customizations
   ============================================ */
.leaflet-popup-content-wrapper {
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    background: #ffffff;
    color: #333333;
}
.leaflet-popup-content {
    margin: 12px 16px;
    font-family: 'Inter', sans-serif;
}

.leaflet-popup-content-wrapper .popup-title,
.leaflet-popup-content-wrapper .popup-content {
    color: #333333;
}
.leaflet-popup-content-wrapper .popup-type {
    color: #e31937 !important;
}
.leaflet-popup-content-wrapper .popup-details,
.leaflet-popup-content-wrapper .popup-address {
    color: #666666 !important;
}
.leaflet-popup-content-wrapper .popup-amenities {
    border-top-color: #eeeeee !important;
}
.leaflet-popup-content-wrapper .popup-amenities-btn {
    background: #f5f5f5 !important;
    color: #666666 !important;
    border-color: #dddddd !important;
}
.leaflet-popup-content-wrapper .popup-amenities-btn:hover {
    background: #eeeeee !important;
    color: #333333;
}
.leaflet-popup-content-wrapper .popup-amenities-content {
    background: #f9f9f9 !important;
    color: #333333;
}
.leaflet-popup-tip {
    background: #ffffff;
}
.leaflet-container {
    font-family: 'Inter', sans-serif;
}
/* Custom markers */
.custom-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white !important;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.marker-start { background: var(--accent-green); }
.marker-end { background: var(--tesla-red); }
.marker-waypoint { background: var(--accent-blue); }
.marker-charger { background: var(--accent-orange); }
/* Attraction markers */
.attraction-marker { display: none !important; /* Hide old colored circle fallback markers */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform var(--transition-fast);
}
.attraction-marker:hover {
    transform: scale(1.2);
}
.attraction-marker.theme-park { background: var(--color-theme-park); }
.attraction-marker.national-park { background: var(--color-national-park); }
.attraction-marker.state-park { background: var(--color-state-park); }
.attraction-marker.zoo { background: var(--color-zoo); }
.attraction-marker.museum { background: var(--color-museum); }
.attraction-marker.attraction { background: var(--color-attraction); }
.attraction-marker.lighthouse { background: var(--color-lighthouse); }
.attraction-marker.battlefield { background: var(--color-battlefield); }
.attraction-marker.landmark { background: var(--color-landmark); }
/* Roadside POI markers */
.attraction-marker.rest-stop { background: #2196F3; }
.attraction-marker.gas-station { background: #607D8B; }
.attraction-marker.convenience { background: #FF9800; }
.attraction-marker.fast-food { background: #F44336; }
.attraction-marker.retail { background: #9C27B0; }
.attraction-marker.restaurant { background: #4CAF50; }
.attraction-marker.cafe { background: #795548; }
.attraction-marker.ev-charging { background: #22c55e; }
/* Logo-based POI markers */
.logo-marker-container {
    background: transparent !important;
}
.logo-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform var(--transition-fast);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white !important;
    overflow: hidden;
}
.logo-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.logo-marker:hover {
    transform: scale(1.2);
}
.logo-marker.fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background-color: #f0f0f0;
}
/* POI Popup Styling */
.poi-popup {
    min-width: 200px;
}
.poi-popup .poi-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #333;
}
.poi-popup .poi-chain {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}
.poi-popup .poi-type {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.poi-popup .poi-highway {
    font-size: 11px;
    color: #555;
    margin-bottom: 6px;
}
.poi-popup .poi-amenities {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.4;
}
.poi-popup .poi-ev-charging {
    font-size: 12px;
    color: #22c55e;
    font-weight: 500;
    margin-bottom: 6px;
}
.poi-popup .poi-address {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
}
.poi-popup h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #333;
}
.poi-popup .poi-hours {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.poi-popup .poi-cuisine {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}
.poi-popup .poi-ev-network {
    font-size: 12px;
    color: #22c55e;
    font-weight: 500;
    margin-bottom: 4px;
}
.poi-popup .poi-ev-connectors {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}
.poi-popup .poi-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.poi-popup .btn-small {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    background: var(--tesla-red);
    color: white !important;
}
.poi-popup .btn-small:hover {
    opacity: 0.9;
}
.poi-popup .btn-secondary {
    background: #f0f0f0;
    color: #333;
}
.poi-popup .btn-secondary:hover {
    background: #e0e0e0;
}
/* Supercharger marker */
.supercharger-marker {
    width: 24px;
    height: 24px;
    background: var(--tesla-red);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.supercharger-marker svg {
    width: 14px;
    height: 14px;
    fill: white;
}
/* Hide default Leaflet routing instructions */
.leaflet-routing-container {
    display: none;
}
/* ============================================
   Popup Styles
   ============================================ */
.popup-content {
    min-width: 200px;
}
.popup-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.popup-type {
    font-size: 12px;
    color: var(--tesla-red);
    font-weight: 500;
    margin-bottom: 8px;
}
.popup-details {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.popup-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}
.feature-tag {
    padding: 2px 8px;
    font-size: 10px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.popup-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--tesla-red);
    color: white !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.popup-btn:hover {
    background: var(--tesla-red-dark);
}
/* Popup Amenities */
.popup-amenities {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.popup-amenities-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.popup-amenities-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.popup-amenities-btn.active {
    background: var(--accent-blue);
    color: white !important;
    border-color: var(--accent-blue);
}
.popup-amenities-btn.loading {
    opacity: 0.7;
}
.popup-amenities-content {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.5;
    
    overflow-y: auto;
}
.popup-amenities-content p {
    margin: 0 0 4px 0;
}
.charger-popup {
    min-width: 220px;
}
/* ============================================
   Fame Badges & Ratings
   ============================================ */
.fame-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.fame-badge.iconic {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
}
.fame-badge.renowned {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: white !important;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.4);
}
.fame-badge.popular {
    background: linear-gradient(135deg, #3498DB, #2980B9);
    color: white !important;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}
.fame-badge.notable {
    background: linear-gradient(135deg, #27AE60, #229954);
    color: white !important;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);
}
.fame-badge.local {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.fame-badge svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}
/* Star Rating Display */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.star-rating .star {
    width: 14px;
    height: 14px;
}
.star-rating .star.filled {
    color: #FFD700;
}
.star-rating .star.half {
    color: #FFD700;
    position: relative;
}
.star-rating .star.empty {
    color: var(--border-color);
}
.rating-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 6px;
}
.rating-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}
/* Popup with ratings */
.popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.popup-header .popup-title {
    margin-bottom: 0;
    flex: 1;
}
.popup-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
/* Map marker with fame indicator */
.attraction-marker.iconic {
    border-color: var(--fame-iconic) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    animation: pulse-gold 2s ease-in-out infinite;
}
.attraction-marker.renowned {
    border-color: var(--fame-renowned) !important;
    box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}
.attraction-marker.large {
    width: 36px !important;
    height: 36px !important;
}
.attraction-marker.medium {
    width: 32px !important;
    height: 32px !important;
}
.attraction-marker .fame-star {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 14px;
    color: #FFD700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: twinkle 1.5s ease-in-out infinite;
}
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 2px 12px rgba(255, 255, 255, 0.3); }
}
@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}
/* Legend for fame levels */
.fame-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-top: 12px;
}
.fame-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}
.fame-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.fame-legend-dot.iconic { background: var(--fame-iconic); }
.fame-legend-dot.renowned { background: var(--fame-renowned); }
.fame-legend-dot.popular { background: var(--fame-popular); }
.fame-legend-dot.notable { background: var(--fame-notable); }
.fame-legend-dot.local { background: var(--fame-local); }
/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .map-controls {
        top: 10px;
        right: 10px;
    }
    .mode-indicator {
        bottom: 80px;
    }
}
/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal {
    animation: fadeIn var(--transition-normal);
}
.modal-content {
    animation: slideUp var(--transition-normal);
}
/* ============================================
   Utility Classes
   ============================================ */
.hidden {
    display: none !important;
}
.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 20px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
/* ============================================
   Load Trip Banner
   ============================================ */
.load-trip-banner {
    background: linear-gradient(135deg, var(--tesla-red) 0%, var(--tesla-red-dark) 100%);
    color: white !important;
    padding: 12px 16px;
    animation: slideDown 0.3s ease;
}
.load-trip-banner.hiding {
    animation: slideUp 0.3s ease forwards;
    opacity: 0;
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.load-trip-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.load-trip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.load-trip-text strong {
    font-size: 14px;
}
.load-trip-text span {
    font-size: 12px;
    opacity: 0.9;
}
.load-trip-actions {
    display: flex;
    gap: 8px;
}
.load-trip-actions .btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}
.load-trip-actions .btn-primary {
    background: white;
    color: var(--tesla-red);
    border: none;
}
.load-trip-actions .btn-primary:hover {
    background: #f5f5f7;
}
.load-trip-actions .btn-secondary {
    background: transparent;
    color: white !important;
    border: 1px solid #ddd;
}
.load-trip-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white !important;
}
/* ============================================
   Date Inputs
   ============================================ */
.date-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.date-input-row label {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
}
.date-input,
input[type="date"] {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
    max-width: 150px;
}
.date-input:focus,
input[type="date"]:focus {
    outline: none;
    border-color: var(--tesla-red);
}
/* Waypoint content with date */
.waypoint-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.waypoint-content .waypoint-address {
    width: 100%;
}
.waypoint-content .waypoint-date {
    width: 100%;
    max-width: none;
    font-size: 11px;
    padding: 4px 8px;
}
/* ============================================
   Weather Display
   ============================================ */
.step-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}
.weather-icon {
    font-size: 20px;
    line-height: 1;
}
.weather-temp {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.weather-precip {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--accent-blue);
    color: white !important;
    border-radius: 8px;
    margin-left: auto;
}
.weather-precip.precip-medium {
    background: var(--accent-orange);
}
.weather-precip.precip-high {
    background: var(--tesla-red);
}
.weather-description {
    font-size: 11px;
    color: var(--text-secondary);
}
/* Date badge in step meta */
.step-date {
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-blue);
    background: rgba(0, 113, 227, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}
/* Dark theme weather adjustments */
[data-theme="dark"] .step-weather {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
/* Historical weather indicator (climate averages) */
.step-weather.historical {
    border-style: dashed;
    opacity: 0.9;
}
.weather-historical {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 5px;
    border-radius: 3px;
    cursor: help;
}
[data-theme="dark"] .weather-historical {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
/* ============================================
   Re-select Chargers Button
   ============================================ */
.reselect-chargers-container {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    text-align: center;
}
.reselect-chargers-container .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.reselect-chargers-container .btn svg {
    flex-shrink: 0;
}
/* ============================================
   Hotel Search Button in Route Steps
   ============================================ */
.step-hotel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-left: auto;
    white-space: nowrap;
}
.step-hotel-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.step-hotel-btn svg {
    flex-shrink: 0;
    opacity: 0.9;
}
/* Dark theme adjustment */
[data-theme="dark"] .step-hotel-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}
[data-theme="dark"] .step-hotel-btn:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
}
/* Adjust step-meta layout to accommodate hotel button */
.step-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
/* ============================================
   Segment Directions Styles
   ============================================ */
.segment-directions {
    margin: 8px 0;
    padding: 12px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--accent-blue);
}
.segment-directions-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.segment-route {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    flex-wrap: wrap;
}
.segment-from {
    color: var(--accent-green);
}
.segment-to {
    color: var(--tesla-red);
}
.segment-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
}
.segment-summary {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.segment-directions-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    width: fit-content;
}
.segment-directions-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.segment-directions-toggle .directions-chevron {
    transition: transform 0.2s ease;
}
.segment-directions-toggle.expanded .directions-chevron {
    transform: rotate(180deg);
}
.segment-directions-content {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    max-height: 300px;
    overflow-y: auto;
}
.directions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.direction-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}
.direction-item:last-child {
    border-bottom: none;
}
.direction-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 1rem;
}
.direction-text {
    flex: 1;
    color: var(--text-primary);
    line-height: 1.4;
}
.direction-distance {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 4px;
}
.directions-summary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.directions-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    padding: 8px 0;
}
/* Dark mode adjustments */
[data-theme="dark"] .segment-directions {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%);
}
[data-theme="dark"] .segment-directions-toggle {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .segment-directions-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .segment-directions-content {
    background: rgba(255, 255, 255, 0.03);
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .segment-directions {
        padding: 10px;
    }
    .segment-directions-content {
        max-height: 200px;
    }
    .direction-item {
        font-size: 0.8rem;
    }
}
/* ============================================
   Export Modal Styles
   ============================================ */
.export-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}
.export-modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.export-modal-content h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.export-modal-content p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}
.export-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.export-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}
.export-option:hover {
    background: var(--bg-tertiary);
    border-color: var(--tesla-red);
}
.export-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: 8px;
}
.export-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}
.export-desc {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}
.export-segments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.export-segment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}
.segment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.segment-desc {
    font-size: 13px;
    color: var(--text-secondary);
}
.segment-stops {
    font-size: 12px;
    color: var(--text-muted);
}
.export-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
/* ============================================
   Attraction Distance Filter Slider
   ============================================ */
.attraction-distance-filter {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: none; /* Hidden by default, shown when route exists */
}
.attraction-distance-filter.visible {
    display: block;
}
.distance-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.distance-filter-header label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.distance-filter-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--tesla-red);
    min-width: 60px;
    text-align: right;
}
.distance-filter-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
}
.distance-filter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--tesla-red);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(227, 25, 55, 0.3);
    transition: transform var(--transition-fast);
}
.distance-filter-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
.distance-filter-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--tesla-red);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(227, 25, 55, 0.3);
}
.distance-filter-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}
/* Attractions route hint */
.attractions-route-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
}
.attractions-route-hint svg {
    flex-shrink: 0;
    color: var(--tesla-red);
}
/* Dark theme */
[data-theme="dark"] .export-modal-content {
    background: var(--bg-secondary);
}
[data-theme="dark"] .export-option {
    background: var(--bg-tertiary);
}
[data-theme="dark"] .export-icon {
    background: var(--bg-primary);
}
/* ============================================
   Tessie Integration Styles
   ============================================ */
.tessie-sync-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 10px;
    background: var(--tesla-red);
    border: 2px solid var(--tesla-red);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    vertical-align: middle;
    color: white !important;
    box-shadow: 0 2px 8px rgba(227, 25, 55, 0.4);
    flex-shrink: 0;
}
/* Make Tessie button more tappable on mobile */
@media (max-width: 768px) {
    .tessie-sync-btn {
        width: 44px;
        height: 44px;
        margin-left: 12px;
        box-shadow: 0 3px 12px rgba(227, 25, 55, 0.5);
    }
    .tessie-sync-btn svg {
        width: 22px;
        height: 22px;
    }
}
.tessie-sync-btn:hover {
    background: var(--tesla-red-dark);
    border-color: var(--tesla-red-dark);
    color: white !important;
    transform: scale(1.05);
}
.tessie-sync-btn.configured {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white !important;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.4);
}
.tessie-sync-btn.configured:hover {
    background: #2db350;
    border-color: #2db350;
}
.tessie-sync-btn.syncing {
    animation: spin 1s linear infinite;
}
.tessie-sync-btn svg {
    width: 18px;
    height: 18px;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.tessie-status {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
/* Tessie Modal */
.tessie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}
.tessie-modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.tessie-modal-content h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: var(--text-primary);
}
.tessie-modal-content p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--text-secondary);
}
.tessie-help {
    font-size: 12px;
    color: var(--text-muted);
}
.tessie-help a {
    color: var(--accent-blue);
    text-decoration: none;
}
.tessie-help a:hover {
    text-decoration: underline;
}
.tessie-modal-content .form-group {
    margin-bottom: 16px;
}
.tessie-modal-content input[type="password"],
.tessie-modal-content input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.tessie-modal-content input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.tessie-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}
/* Vehicle selection list */
.vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.vehicle-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}
.vehicle-option:hover {
    background: var(--tesla-red);
    border-color: var(--tesla-red);
    color: white !important;
}
.vehicle-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.vehicle-info {
    font-size: 12px;
    opacity: 0.8;
}
/* Dark theme for Tessie */
[data-theme="dark"] .tessie-modal-content {
    background: var(--bg-secondary);
}
[data-theme="dark"] .tessie-modal-content input {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}
[data-theme="dark"] .vehicle-option {
    background: var(--bg-tertiary);
}
/* ============================================
   Collapsible Sidebar (Mobile/PWA)
   ============================================ */
.sidebar-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2000;
    width: 56px;
    height: 56px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}
.sidebar-toggle:hover {
    background: transparent;
}
.sidebar-toggle:active {
    transform: scale(0.95);
}
.sidebar-toggle .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
}
.sidebar-toggle .close-icon {
    display: none;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary);
}
/* When sidebar is open */
.sidebar-open .sidebar-toggle .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.sidebar-open .sidebar-toggle .close-icon {
    display: block;
}
/* Desktop: Hide toggle, show sidebar always */
@media (min-width: 769px) {
    .sidebar-toggle {
        display: none;
    }
    .sidebar {
        transform: translateX(0) !important;
    }
}
/* Mobile/PWA: Collapsible sidebar - FULL SCREEN */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
        border-right: none;
        border-radius: 0;
        overflow-y: auto;
    }
    .sidebar-open .sidebar {
        transform: translateX(0);
    }
    .map-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    /* Backdrop when sidebar is open */
    .sidebar-backdrop {
        display: none; /* No backdrop needed for full screen sidebar */
    }
    /* Move toggle button when sidebar is open - show X on right side */
    .sidebar-open .sidebar-toggle {
        left: auto;
        right: 16px;
    }
}
/* PWA standalone mode adjustments - iOS safe area handling */
@media (display-mode: standalone) {
    /* Account for status bar / notch area on toggle button */
    .sidebar-toggle {
        top: calc(16px + env(safe-area-inset-top, 0px));
    }
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sidebar-header {
        /* Extra padding to push header content below status bar */
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }
    /* Map controls need to be below status bar */
    .map-controls {
        top: calc(20px + env(safe-area-inset-top, 0px));
    }
}
/* Combined: Mobile + Standalone mode - fix touch coordinates */
@media (max-width: 768px) and (display-mode: standalone) {
    /* Position fixed elements below the safe area to fix touch offset */
    .sidebar {
        top: env(safe-area-inset-top, 0px);
        height: calc(100vh - env(safe-area-inset-top, 0px)) !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
        /* Enable momentum scrolling for iOS */
        -webkit-overflow-scrolling: touch;
    }
    /* Ensure inputs are fully interactive in iOS PWA */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        /* Prevent iOS zoom on focus for inputs smaller than 16px */
        font-size: 16px !important;
        /* Ensure touch events work properly */
        -webkit-user-select: text;
        user-select: text;
        /* Make inputs clearly tappable */
        min-height: 44px;
    }
    .map-container {
        top: 0;
        height: 100vh !important;
        height: 100dvh !important;
    }
    /* Sidebar header doesn't need extra padding since sidebar is positioned below safe area */
    .sidebar-header {
        padding-top: 20px;
    }
}
/* Fullscreen map mode (sidebar completely hidden) */
.fullscreen-map .sidebar {
    transform: translateX(-100%) !important;
}
.fullscreen-map .sidebar-toggle {
    left: 16px !important;
    right: auto !important;
}
@media (min-width: 769px) {
    .fullscreen-map .sidebar-toggle {
        display: flex;
    }
    .fullscreen-map .map-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
}
/* ============================================
   Authentication Styles
   ============================================ */
.auth-message {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
}
/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-form .form-group {
    margin-bottom: 0;
}
.auth-buttons {
    margin-top: 4px;
}
.auth-buttons .btn {
    flex: 1;
}
.auth-error {
    color: #e31937;
    font-size: 13px;
    padding: 8px 12px;
    background: rgba(227, 25, 55, 0.1);
    border-radius: var(--border-radius-sm);
    text-align: center;
}
.btn-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px;
    cursor: pointer;
    text-decoration: underline;
    width: 100%;
    text-align: center;
}
.btn-link:hover {
    color: var(--text-primary);
}
/* Google Sign-In Button */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    background: white;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-google:hover {
    background: #f8f9fa;
    border-color: #c6c9cc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-google:active {
    background: #f1f3f4;
}
[data-theme="dark"] .btn-google {
    background: #4285f4;
    color: white !important;
    border-color: #4285f4;
}
[data-theme="dark"] .btn-google:hover {
    background: #3367d6;
    border-color: #3367d6;
}
/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: var(--text-muted);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.auth-divider span {
    padding: 0 12px;
}
/* Signed in state */
.auth-signed-in {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.user-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Sync indicator */
.sync-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--accent-green);
    margin-top: 4px;
}
.sync-indicator svg {
    width: 14px;
    height: 14px;
}
.sync-indicator.syncing svg {
    animation: spin 1s linear infinite;
}
/* Backup/Transfer Section */
.backup-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.backup-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}
/* ============================================
   Navigation Styles
   ============================================ */
/* Navigation action buttons */
.navigation-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.btn-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
}
.btn-nav svg {
    flex-shrink: 0;
}
/* Navigation UI Overlay - Polished Design */
.navigation-ui {
    position: fixed;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    max-width: calc(100% - 24px);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    display: none;
    flex-direction: column;
    padding: 16px;
}
[data-theme="dark"] .navigation-ui {
    background: rgba(30, 30, 30, 0.98);
}
.nav-instruction-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #1877F2;
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.3);
    position: relative;
}
.nav-icon {
    width: 60px;
    height: 60px;
    background: #22c55e;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}
.nav-icon svg {
    width: 36px;
    height: 36px;
}
.nav-icon .material-icons {
    font-size: 36px;
}
.nav-details {
    flex: 1;
    min-width: 0;
}
.nav-distance {
    font-size: 26px;
    font-weight: 700;
    color: white !important;
    margin-bottom: 2px;
}
.nav-instruction {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
}
/* Mute button inside the red instruction panel */
.nav-mute-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.nav-mute-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}
.nav-mute-btn:active {
    transform: scale(0.95);
}
.nav-mute-btn.muted {
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.7;
}
/* Make instruction panel tappable */
.nav-instruction-panel {
    cursor: pointer;
}
.nav-instruction-panel:active {
    transform: scale(0.98);
}
/* Next stop info below instruction panel */
.nav-next-stop {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #eee);
}
[data-theme="dark"] .nav-next-stop {
    border-top-color: #444;
}
.nav-next-stop-info {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    text-align: center;
}
.nav-next-stop-distance {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.nav-next-stop-name {
    font-size: 13px;
    color: var(--text-secondary, #666);
}
.nav-next-stop-progress {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}
[data-theme="dark"] .nav-next-stop-progress {
    background: #444;
}
.nav-next-stop-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #e31937, #ff4757);
    border-radius: 2px;
    transition: width 0.5s ease;
    width: 0%;
}
/* Navigation Directions Popup (combined view with stop button) */
.nav-directions-popup {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.nav-directions-popup.active {
    pointer-events: auto;
    opacity: 1;
}
.nav-directions-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.nav-directions-sheet {
    position: relative;
    width: 100%;
    max-width: 450px;
    max-height: 75vh;
    background: var(--bg-primary, #fff);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.nav-directions-popup.active .nav-directions-sheet {
    transform: translateY(0);
}
.nav-directions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #eee);
    font-weight: 600;
    font-size: 17px;
}
.nav-directions-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary, #666);
    border-radius: 50%;
}
.nav-directions-close:hover {
    background: var(--bg-secondary, #f5f5f5);
}
.nav-directions-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
.nav-directions-footer {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color, #eee);
    background: var(--bg-primary, #fff);
}
.nav-stop-btn:active {
    transform: scale(0.98);
}
.nav-stop-btn svg,
.nav-stop-btn .material-icons {
    color: white !important;
}
.direction-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    padding-left: 20px;
    border-radius: 10px;
    margin-bottom: 6px;
    margin-left: 8px;
    background: var(--bg-secondary, #f5f5f5);
    transition: all 0.2s ease;
    border-left: 2px solid var(--border-color, #ddd);
}
/* Add space before segment headers (except first) */
.direction-segment-header + .direction-item {
    margin-top: 0;
}
.direction-item + .direction-segment-header {
    margin-top: 20px;
}
[data-theme="dark"] .direction-item {
    background: #2a2a2a;
}
.direction-item.current {
    background: var(--bg-secondary, #f5f5f5);
    border: 2px solid #22c55e;
    border-left: 4px solid #22c55e;
}
.direction-item.past {
    opacity: 0.5;
}
.direction-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}
.direction-item.current .direction-number {
    background: #22c55e;
    color: white !important;
}
.direction-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white !important;
    background: #22c55e;
    border-radius: 8px;
}
.direction-icon .material-icons {
    font-size: 22px;
}
.direction-item.current .direction-icon {
    color: white !important;
    background: #16a34a;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}
.direction-item.past .direction-icon {
    opacity: 0.5;
    color: white !important;
    background: #9ca3af;
}
.direction-details {
    flex: 1;
    min-width: 0;
}
.direction-text {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.direction-distance {
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.direction-item.current .direction-distance {
    color: rgba(255, 255, 255, 0.8);
}
/* Segment tabs for turn-by-turn */
.direction-segment-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--border-color, #eee);
}
.segment-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: all 0.2s ease;
}
[data-theme="dark"] .segment-tab {
    background: #2a2a2a;
    color: #aaa;
}
.segment-tab.active {
    background: var(--primary-color, #e31937);
    color: white !important;
}
/* Waypoints overview */
.direction-waypoints {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #eee);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.waypoint-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 16px;
    font-size: 12px;
}
[data-theme="dark"] .waypoint-item {
    background: #2a2a2a;
}
.waypoint-item.start {
    background: #e8f5e9;
    color: #2e7d32;
}
.waypoint-item.end {
    background: #ffebee;
    color: #c62828;
}
[data-theme="dark"] .waypoint-item.start {
    background: #1b3d1e;
    color: #81c784;
}
[data-theme="dark"] .waypoint-item.end {
    background: #3d1f1f;
    color: #ef5350;
}
.waypoint-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: currentColor;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}
.waypoint-item.start .waypoint-icon,
.waypoint-item.end .waypoint-icon {
    background: currentColor;
}
.waypoint-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.waypoint-connector {
    color: var(--text-muted, #999);
    font-size: 10px;
}
.waypoint-connector::before {
    content: '→';
}
/* Segment headers in directions */
.direction-segment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #1877F2;
    color: white !important;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    border-left: none;
}
.direction-segment-header.current-segment {
    background: #1877F2;
    box-shadow: 0 2px 8px rgba(227, 25, 55, 0.4);
}
.direction-segment-header.past-segment {
    opacity: 0.6;
    background: #999;
}
[data-theme="dark"] .direction-segment-header {
    background: #1877F2;
}
[data-theme="dark"] .direction-segment-header.current-segment {
    background: #1877F2;
}
.segment-icon {
    font-size: 18px;
    color: white !important;
}
.segment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.segment-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}
.segment-route {
    color: white !important;
    font-weight: 500;
}
.directions-divider {
    height: 1px;
    background: var(--border-color, #ddd);
    margin: 12px 0;
}
[data-theme="dark"] .directions-divider {
    background: #444;
}
/* User location marker */
.user-location-marker {
    position: relative;
}
.user-marker-dot {
    width: 16px;
    height: 16px;
    background: #4285F4;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.user-marker-accuracy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(66, 133, 244, 0.15);
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: 50%;
    z-index: 1;
}
.user-marker-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid #4285F4;
    transform-origin: center bottom;
    margin-left: -8px;
    margin-top: -28px;
    z-index: 3;
}
/* Tesla car navigation marker */
.nav-car-marker {
    background: none !important;
    border: none !important;
}
.nav-car-container {
    width: 40px;
    height: 60px;
    /* transition removed - using 0.15s linear from earlier definition */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -30px;
}
.nav-car-svg {
    width: 100%;
    height: 100%;
}
.nav-car-accuracy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(227, 25, 55, 0.12);
    border: 2px solid rgba(227, 25, 55, 0.25);
    pointer-events: none;
    z-index: -1;
}
/* Navigation segment modal */
.nav-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
}
.nav-modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}
.nav-modal-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--text-primary);
}
.nav-modal-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px;
}
.segment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.segment-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.segment-btn:hover {
    background: var(--bg-tertiary, var(--border-color));
    border-color: var(--primary-color);
}
.segment-number {
    width: 28px;
    height: 28px;
    background: var(--primary-color);
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.segment-info {
    flex: 1;
    min-width: 0;
}
.segment-from,
.segment-to {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.segment-arrow {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0;
}
/* Mobile navigation adjustments */
@media (max-width: 768px) {
    .navigation-ui {
        width: calc(100% - 24px);
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px;
    }
    .nav-instruction-panel {
        padding: 12px;
        border-radius: 12px;
        gap: 10px;
    }
    .nav-icon {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }
    .nav-icon svg {
        width: 28px;
        height: 28px;
    }
    .nav-icon .material-icons {
        font-size: 28px;
    }
    .nav-distance {
        font-size: 20px;
    }
    .nav-instruction {
        font-size: 13px;
    }
    .nav-mute-btn {
        width: 36px;
        height: 36px;
    }
}
/* iOS PWA navigation adjustments */
@media (display-mode: standalone) {
    .navigation-ui {
        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
}
/* ============================================
   GPT / AI Trip Guide Styles
   ============================================ */
.gpt-help-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}
.gpt-categories .form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}
.gpt-categories .checkbox-group.compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.gpt-categories .checkbox-group.compact .checkbox {
    font-size: 13px;
    padding: 4px 0;
}
/* GPT Summary Modal */
.gpt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}
.gpt-modal.active {
    opacity: 1;
    visibility: visible;
}
.gpt-modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    max-width: 280px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}
.gpt-modal.active .gpt-modal-content {
    transform: scale(1) translateY(0);
}
.gpt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--tesla-red), var(--tesla-red-dark));
    color: white !important;
}
.gpt-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.gpt-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white !important;
    font-size: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease;
}
.gpt-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}
.gpt-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
}
.gpt-modal-body p {
    margin-bottom: 12px;
}
.gpt-modal-body p:last-child {
    margin-bottom: 0;
}
.gpt-modal-body strong {
    color: var(--tesla-red);
}
.gpt-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}
.gpt-modal-footer .btn {
    min-width: 120px;
}
/* GPT Locality Card */
.gpt-locality-card {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 400px;
    width: calc(100% - 40px);
    z-index: 9000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-left: 4px solid var(--tesla-red);
}
.gpt-locality-card.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.gpt-locality-card.hiding {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
}
.gpt-locality-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--tesla-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}
.gpt-locality-icon svg {
    width: 20px;
    height: 20px;
}
.gpt-locality-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}
.gpt-locality-content p {
    margin: 0;
}
.gpt-locality-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.gpt-locality-close:hover {
    color: var(--text-primary);
}
/* Mobile adjustments for GPT elements */
@media (max-width: 768px) {
    .gpt-modal-content {
        max-height: 90vh;
    }
    .gpt-locality-card {
        bottom: 80px;
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
    }
}
/* Navigation UI active - move locality card above nav directions */
.navigation-ui ~ .gpt-locality-card,
body:has(.navigation-ui[style*="display: flex"]) .gpt-locality-card {
    bottom: 280px;
}
@media (display-mode: standalone) {
    .gpt-locality-card {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
}
/* ============================================
   Places Module - What's Nearby
   ============================================ */
.no-places {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    padding: 8px 0;
}
.places-category {
    margin-bottom: 12px;
}
.places-category:last-child {
    margin-bottom: 0;
}
.places-category-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.place-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}
.place-item:last-child {
    border-bottom: none;
}
.place-item.attraction {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 6px 8px;
    margin: 2px 0;
}
.place-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.place-info {
    flex: 1;
    min-width: 0;
}
.place-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.place-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.place-rating {
    color: #f5a623;
    font-size: 11px;
    white-space: nowrap;
}
.place-rating .rating-number {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 2px;
}
/* Popup amenities styling for Places data */
.popup-amenities-content .places-category {
    margin-bottom: 10px;
}
.popup-amenities-content .places-category-title {
    font-size: 10px;
    margin-bottom: 4px;
}
.popup-amenities-content .place-item {
    padding: 4px 0;
}
.popup-amenities-content .place-name {
    font-size: 12px;
}
.popup-amenities-content .place-meta {
    font-size: 10px;
}
/* Add Stop button for places */
.btn-add-stop {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: white !important;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}
.btn-add-stop:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}
.btn-add-stop:active {
    transform: scale(0.95);
}
.btn-add-stop.added {
    background: var(--success);
    cursor: default;
}
.btn-add-stop:disabled {
    opacity: 0.8;
}
/* ============================================
   State Welcome Banner
   ============================================ */
.state-welcome-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: linear-gradient(135deg, var(--tesla-red), var(--tesla-red-dark));
    color: white !important;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    width: calc(100% - 40px);
    z-index: 9500;
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.state-welcome-banner.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.state-welcome-banner.hiding {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
}
.state-welcome-icon {
    font-size: 40px;
    flex-shrink: 0;
}
.state-welcome-content {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
}
.state-welcome-content p {
    margin: 0;
}
.state-welcome-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white !important;
    font-size: 20px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease;
}
.state-welcome-close:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* ============================================
   Rest Stop Reminder Modal
   ============================================ */
.rest-stop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.rest-stop-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.rest-stop-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.rest-stop-content h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.rest-stop-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}
.rest-stop-list {
    text-align: left;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}
.rest-stop-list h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.rest-stop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.rest-stop-item:last-child {
    border-bottom: none;
}
.stop-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.stop-distance {
    font-size: 12px;
    color: var(--text-muted);
}
.rest-stop-actions {
    display: flex;
    gap: 10px;
}
.rest-stop-actions .btn {
    flex: 1;
}
/* ============================================
   Weather Alert Toast/Banner
   ============================================ */
.toast.warning {
    background: linear-gradient(135deg, var(--accent-orange), #e67e00) !important;
    color: white !important;
}
/* Safety features section styling */
.safety-features .checkbox {
    margin-bottom: 4px;
}
.safety-features .slider-indent {
    margin-bottom: 12px;
}
.safety-features .form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}
/* ============================================
   Share Modal
   ============================================ */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.share-modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}
.share-modal-content h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.share-trip-summary {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}
.share-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.share-modal-close:hover {
    color: var(--text-primary);
}
.share-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.share-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}
.share-option:hover {
    background: var(--bg-tertiary);
    border-color: var(--tesla-red);
}
.share-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: 8px;
}
.share-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}
.share-desc {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}
.btn-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* ============================================
   Quick Toggle Bar & Guide Tabs
   ============================================ */
.quick-toggles {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.quick-toggle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-muted);
}
.quick-toggle svg {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}
.quick-toggle span {
    font-size: 11px;
    font-weight: 500;
}
.quick-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.quick-toggle:hover svg {
    opacity: 0.8;
}
.quick-toggle.active {
    background: rgba(227, 25, 55, 0.1);
    border-color: var(--tesla-red);
    color: var(--tesla-red);
}
.quick-toggle.active svg {
    opacity: 1;
}
[data-theme="dark"] .quick-toggle.active {
    background: rgba(227, 25, 55, 0.2);
}
/* Guide Tabs */
.guide-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: 4px;
}
.guide-tab {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.guide-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}
.guide-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px var(--shadow-color);
}
/* Guide Tab Content */
.guide-tab-content {
    display: none;
}
.guide-tab-content.active {
    display: block;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Safety Settings in Safety Tab */
.safety-setting {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 12px;
}
.safety-setting:last-child {
    margin-bottom: 0;
}
.safety-setting-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.safety-setting-header svg {
    color: var(--tesla-red);
}
.safety-setting .help-text {
    margin-bottom: 12px;
    font-size: 12px;
}
.safety-setting .form-group {
    margin-bottom: 0;
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .quick-toggles {
        gap: 6px;
    }
    .quick-toggle {
        padding: 8px 4px;
    }
    .quick-toggle svg {
        width: 18px;
        height: 18px;
    }
    .quick-toggle span {
        font-size: 10px;
    }
    .guide-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    .state-welcome-banner {
        padding: 20px 24px;
        gap: 12px;
    }
    .state-welcome-icon {
        font-size: 32px;
    }
    .state-welcome-content {
        font-size: 14px;
    }
    .rest-stop-content {
        padding: 20px;
    }
    .rest-stop-icon {
        font-size: 40px;
    }
    .rest-stop-content h3 {
        font-size: 18px;
    }
    .rest-stop-actions {
        flex-direction: column;
    }
    .share-modal-content {
        padding: 20px;
    }
}
/* ============================================
   Charge State Display (Route Summary)
   ============================================ */
.charge-state-display {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}
.charge-state-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.charge-state-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #32d74b);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.charge-state-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.charge-state-info .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
}
.charge-state-info .btn-icon.btn-sm {
    width: 28px;
    height: 28px;
}
/* ============================================
   Settings Button
   ============================================ */
.settings-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}
.settings-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* ============================================
   Settings Modal
   ============================================ */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.settings-modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 24px;
    padding-bottom: 32px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}
.settings-modal-content h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.settings-modal-close {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}
.settings-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}
.settings-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.settings-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.settings-tab.active {
    background: var(--tesla-red);
    color: white !important;
}
.settings-tab-content {
    display: none;
}
.settings-tab-content.active {
    display: block;
}
.settings-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}
.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.settings-quick-toggles {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.settings-quick-toggles .quick-toggle {
    flex: 1;
}
.settings-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Icon Checkboxes for "What to announce" */
.icon-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.icon-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.icon-checkbox:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}
.icon-checkbox input {
    display: none;
}
.icon-checkbox.checked {
    background: rgba(227, 53, 47, 0.1);
    border-color: var(--tesla-red);
}
.icon-checkbox-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: var(--transition-fast);
}
.icon-checkbox.checked .icon-checkbox-icon {
    color: var(--tesla-red);
}
.icon-checkbox-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}
.icon-checkbox.checked .icon-checkbox-label {
    color: var(--text-primary);
}
.settings-checkbox-group .form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
/* Voice Settings */
.voice-settings-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.voice-select,
.voice-provider-select {
    flex: 1;
}
.voice-test-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--border-radius-sm);
}
.voice-test-btn svg {
    margin: 0;
}
/* Save Settings Button */
.settings-modal-content > .btn {
    margin-top: 12px;
}
/* ============================================
   Map Legend - Dropdown from map controls
   ============================================ */
.map-legend {
    position: absolute;
    top: 160px;  /* Below menu button with clear spacing */
    left: 20px;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 12px var(--shadow-color);
    z-index: 999;
    min-width: 160px;
    max-width: 200px;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.map-legend.collapsed {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
.map-legend-content {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}
.legend-item:hover {
    color: var(--text-primary);
}
.legend-item input[type="checkbox"] {
    display: none;
}
.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}
.legend-item input[type="checkbox"]:checked + .legend-color {
    opacity: 1;
}
.legend-color.theme-park {
    background: var(--color-theme-park);
}
.legend-color.national-park {
    background: var(--color-national-park);
}
.legend-color.state-park {
    background: var(--color-state-park);
}
.legend-color.zoo {
    background: var(--color-zoo);
}
.legend-color.museum {
    background: var(--color-museum);
}
.legend-color.attraction {
    background: var(--color-attraction);
}
.legend-color.lighthouse {
    background: var(--color-lighthouse);
}
.legend-color.supercharger {
    background: var(--color-supercharger);
}
/* Legend divider and section title */
.legend-divider {
    height: 1px;
    background: var(--border-color, #e0e0e0);
    margin: 8px 0;
}
.legend-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #666);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}
/* Roadside POI legend colors */
.legend-color.rest-stop {
    background: #2196F3;
}
.legend-color.gas-station {
    background: #607D8B;
}
.legend-color.convenience {
    background: #FF9800;
}
.legend-color.fast-food {
    background: #F44336;
}
.legend-color.retail {
    background: #9C27B0;
}
.legend-color.restaurant {
    background: #4CAF50;
}
.legend-color.bar {
    background: #9C27B0;
}
.legend-color.cafe {
    background: #795548;
}
.legend-color.travel-center {
    background: #f59e0b;
}
.legend-color.ev-charging {
    background: #22c55e;
}
/* Mobile adjustments for map legend */
@media (max-width: 768px) {
    .map-legend {
        top: 85px;  /* Below menu button on mobile */
        left: 12px;
        min-width: 140px;
    }
    .settings-modal-content {
        max-height: 90vh;
        padding: 20px;
    }
    .settings-tabs {
        flex-wrap: wrap;
    }
    .settings-quick-toggles {
        flex-wrap: wrap;
    }
    .settings-quick-toggles .quick-toggle {
        min-width: calc(50% - 4px);
    }
}
/* ============================================
   Report POI Button
   ============================================ */
.report-poi-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 11px;
    color: #666;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.report-poi-btn:hover {
    color: #ff6b6b;
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}
.report-poi-btn .material-icons {
    font-size: 14px;
}
[data-theme="dark"] .report-poi-btn {
    color: #999;
    border-color: #444;
}
[data-theme="dark"] .report-poi-btn:hover {
    color: #ff6b6b;
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
}
/* ============================================
   Picker Dialog
   ============================================ */
.picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.2s ease;
}
.picker-dialog {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 20px;
    max-width: 90%;
    max-width: 280px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.picker-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.picker-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.picker-close:hover {
    color: var(--text-primary);
}
.picker-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.picker-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.picker-option {
    padding: 12px 16px;
    font-size: 14px;
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.picker-option:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}
.picker-option:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}
.picker-cancel {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
}
.picker-cancel:hover {
    color: var(--text-primary);
}
/* ============================================
   Get Lost - Hidden Gems Feature
   ============================================ */
/* Get Lost Button */
.get-lost-btn {
    font-size: 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.get-lost-btn.loading {
    animation: pulse 1s ease-in-out infinite;
}
.get-lost-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
/* Get Lost Modal */
.get-lost-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}
.get-lost-modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.3s ease;
}
.get-lost-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    color: white !important;
    font-weight: 600;
    font-size: 16px;
    border-radius: 16px 16px 0 0;
}
.get-lost-close {
    background: none;
    border: none;
    color: white !important;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
}
.get-lost-close:hover {
    opacity: 1;
}
.get-lost-body {
    padding: 16px 20px;
}
/* Preview Image */
.get-lost-image-container {
    position: relative;
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
}
.get-lost-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.image-credit {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white !important;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;
}
/* Info Row with Mini Map */
.get-lost-info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.get-lost-mini-map {
    width: 100px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    overflow: hidden;
}
.get-lost-details {
    flex: 1;
    min-width: 0;
}
.get-lost-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.2;
}
.get-lost-meta {
    font-size: 13px;
    color: var(--text-secondary);
}
.get-lost-description {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}
/* Actions */
.get-lost-actions {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.get-lost-add-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white !important;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.get-lost-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}
.get-lost-secondary-actions {
    display: flex;
    gap: 8px;
}
.get-lost-retry-btn,
.get-lost-dismiss-btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.get-lost-retry-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.get-lost-retry-btn:hover {
    background: var(--bg-tertiary);
}
.get-lost-dismiss-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.get-lost-dismiss-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
/* Mini Map Markers */
.get-lost-gem-marker,
.get-lost-user-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
/* Hidden Gem Marker on Main Map */
.hidden-gem-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    animation: gemBounce 0.5s ease;
}
@keyframes gemBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
/* Toast Notification */
.get-lost-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.9);
    color: white !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    max-width: 90%;
    text-align: center;
}
.get-lost-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Mobile Adjustments */
@media (max-width: 480px) {
    .get-lost-modal-content {
        max-height: 85vh;
    }
    .get-lost-info-row {
        flex-direction: column;
    }
    .get-lost-mini-map {
        width: 100%;
        height: 120px;
    }
    .get-lost-image {
        height: 140px;
    }
}
/* Get Lost - History Modal */
.get-lost-history-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}
.get-lost-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}
.get-lost-history-item:last-child {
    border-bottom: none;
}
.get-lost-history-item:hover {
    background: rgba(255,255,255,0.05);
}
.history-emoji {
    font-size: 24px;
    width: 32px;
    text-align: center;
}
.history-info {
    flex: 1;
    min-width: 0;
}
.history-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-type {
    font-size: 12px;
    color: var(--text-secondary);
}
.history-view-btn {
    background: var(--accent-color);
    color: white !important;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.history-view-btn:hover {
    opacity: 0.9;
}
.get-lost-history-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.get-lost-history-btn:hover {
    background: var(--bg-tertiary);
}
/* ==========================================
   Gems Hub - Unified Modal
   ========================================== */
.gems-hub {
    max-width: 400px;
}
.gems-hub-body {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
}
.gems-hub-find-btn {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white !important;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}
.gems-hub-find-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.gems-hub-find-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}
.gems-hub-find-btn .find-btn-loading {
    animation: pulse 1s ease-in-out infinite;
}
.gems-hub-section-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-left: 4px;
}
.gems-hub-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gem-hub-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px;
    font-size: 14px;
}
.gem-hub-item {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.gem-hub-item.gem-new {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.gem-hub-item-main {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    gap: 12px;
}
.gem-hub-item-main:hover {
    background: rgba(255, 255, 255, 0.05);
}
.gem-emoji {
    font-size: 24px;
    flex-shrink: 0;
}
.gem-info {
    flex: 1;
    min-width: 0;
}
.gem-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.new-badge {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white !important;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.gem-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.gem-expand-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.gem-expand-btn:hover {
    color: var(--text-primary);
}
.gem-hub-item-details {
    padding: 0 12px 12px 12px;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}
.gem-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 12px 0;
}
.gem-mini-map {
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.gem-add-route-btn {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    background: var(--accent-green);
    color: white !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gem-add-route-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.gems-hub-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}
.gems-hub-footer .get-lost-dismiss-btn {
    flex: none;
    padding: 10px 24px;
}
/* Mobile adjustments for Gems Hub */
@media (max-width: 480px) {
    .gems-hub {
        max-width: 100%;
        margin: 10px;
    }
    .gems-hub-body {
        max-height: 70vh;
    }
    .gem-mini-map {
        height: 120px;
    }
}
/* ========================================
   Quick Actions Bar (Top Center)
   ======================================== */
.quick-actions-bar {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1001;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 8px 12px;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
}
.quick-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.quick-action-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
}
.quick-action-btn:active {
    transform: scale(0.95);
}
.quick-action-btn.active {
    background: var(--accent-primary);
    box-shadow: 0 0 12px var(--accent-primary);
}
.quick-action-icon {
    font-size: 22px;
    line-height: 1;
}
/* ========================================
   POI Sheet (Bottom Slide-up)
   ======================================== */
.poi-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--glass-border);
    z-index: 1002;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 50vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.poi-sheet.open {
    transform: translateY(0);
}
.poi-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.poi-sheet-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.poi-sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.poi-sheet-close:hover {
    background: var(--bg-tertiary);
}
.poi-sheet-content {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}
.poi-loading {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}
.poi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.poi-item:hover {
    background: var(--bg-tertiary);
}
.poi-item-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: 10px;
    flex-shrink: 0;
}
.poi-item-info {
    flex: 1;
    min-width: 0;
}
.poi-item-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.poi-item-details {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.poi-item-distance {
    text-align: right;
    flex-shrink: 0;
}
.poi-item-miles {
    font-weight: 600;
    color: var(--accent-primary);
}
.poi-item-time {
    font-size: 12px;
    color: var(--text-muted);
}
.poi-empty {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}
.poi-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .quick-actions-bar {
        top: 15px;
        padding: 6px 10px;
        gap: 6px;
    }
    
    .quick-action-btn {
        width: 40px;
        height: 40px;
    }
    
    .quick-action-icon {
        font-size: 20px;
    }
    
    .poi-sheet {
        max-height: 60vh;
    }
}
/* iOS PWA safe area */
@media (max-width: 768px) and (display-mode: standalone) {
    .quick-actions-bar {
        top: calc(env(safe-area-inset-top, 0px) + 15px);
    }
    
    .poi-sheet {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}
/* POI Action Buttons */
.poi-item-action {
    flex-shrink: 0;
}
.poi-action-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.poi-add-stop {
    background: var(--accent-green);
    color: white !important;
}
.poi-add-stop:hover {
    background: #22c55e;
    transform: scale(1.05);
}
.poi-navigate {
    background: var(--accent-primary);
    color: white !important;
}
.poi-navigate:hover {
    background: #818cf8;
    transform: scale(1.05);
}
/* Quick Action Toast */
.quick-action-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    z-index: 2000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}
.quick-action-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
/* Update POI item for new layout */
.poi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.poi-item:active {
    background: var(--bg-tertiary);
}
.poi-item-details {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}
/* Mobile action button adjustments */
@media (max-width: 768px) {
    .poi-action-btn {
        padding: 10px 12px;
        font-size: 12px;
    }
}
/* POI Map Marker */
.poi-map-marker {
    background: none !important;
    border: none !important;
}
.poi-marker-inner {
    width: 50px;
    height: 50px;
    background: var(--accent-primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.5);
    border: 3px solid white;
}
.poi-marker-inner::after {
    content: attr(data-icon);
    transform: rotate(45deg);
    font-size: 24px;
}
/* POI item arrow */
.poi-item-arrow {
    font-size: 24px;
    color: var(--text-muted);
    font-weight: 300;
}
/* POI Action Card (floating bottom card) */
.poi-action-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--glass-border);
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.poi-action-card.show {
    transform: translateY(0);
}
.poi-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.poi-card-icon {
    width: 56px;
    height: 56px;
    background: var(--bg-secondary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.poi-card-info {
    flex: 1;
}
.poi-card-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.poi-card-details {
    font-size: 14px;
    color: var(--text-muted);
}
.poi-card-actions {
    display: flex;
    gap: 12px;
}
.poi-card-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.poi-card-btn.primary,
.poi-card-btn.navigate {
    background: var(--accent-primary);
    color: white !important;
}
.poi-card-btn.add-stop {
    background: var(--accent-green);
    color: white !important;
}
.poi-card-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.poi-card-btn:active {
    transform: scale(0.98);
}
/* Fix marker emoji display */
.poi-marker-inner {
    font-size: 24px;
    line-height: 1;
}
.poi-marker-inner > span {
    transform: rotate(45deg);
    display: block;
}
/* POI Favicon Styling */
.poi-favicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: white;
    padding: 2px;
}
.poi-item-icon .poi-favicon {
    width: 32px;
    height: 32px;
}
.poi-card-icon .poi-favicon {
    width: 36px;
    height: 36px;
}
/* POI Distance Slider */
.poi-distance-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
}
.poi-distance-control input[type="range"] {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
}
.poi-distance-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#poiDistanceLabel {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    min-width: 35px;
    text-align: right;
}
/* Loading more indicator */
.poi-loading-more {
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}
/* Adjust header layout for slider */
.poi-sheet-header {
    display: flex;
    align-items: center;
}
/* Navigate button - RED */
.poi-card-btn.navigate {
    background: #dc2626 !important;
    color: white !important;
}
.poi-card-btn.navigate:hover {
    background: #b91c1c !important;
}
/* POI action card - move to center when navigation UI is active */
body:has(#navigationUI[style*="display: flex"]) .poi-action-card,
body:has(#navigationUI[style*="display:flex"]) .poi-action-card {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
    max-width: 400px;
    width: calc(100% - 32px);
    border-radius: 20px;
    z-index: 10002;
}
body:has(#navigationUI[style*="display: flex"]) .poi-action-card.show,
body:has(#navigationUI[style*="display:flex"]) .poi-action-card.show {
    transform: translateX(-50%) translateY(-50%);
}
/* POI action card - centered mode when in navigation */
.poi-action-card.nav-mode {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    max-width: 400px;
    width: calc(100% - 32px);
    border-radius: 20px;
    z-index: 10002;
}
.poi-action-card.nav-mode.show {
    transform: translateX(-50%) translateY(-50%);
}
/* POI Sheet - move above navigation when nav is active */
body:has(#navigationUI[style*="display: flex"]) .poi-sheet,
body:has(#navigationUI[style*="display:flex"]) .poi-sheet {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    max-width: 400px;
    width: calc(100% - 32px);
    max-height: 60vh;
    border-radius: 20px;
    z-index: 10003;
}
body:has(#navigationUI[style*="display: flex"]) .poi-sheet.open,
body:has(#navigationUI[style*="display:flex"]) .poi-sheet.open {
    transform: translateX(-50%) translateY(-50%);
}
/* Hide POI card immediately after pressing Navigate */
body.poi-navigating #poiActionCard {
    display: none !important;
}
}
/* Nav-mode card - compact at bottom, above nav panel */
.poi-action-card.nav-mode {
    bottom: 180px !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(100%) !important;
    max-width: 300px !important;
    width: calc(100% - 40px) !important;
    padding: 14px 18px !important;
    padding-bottom: 14px !important;
    border-radius: 16px !important;
    z-index: 10002 !important;
}
.poi-action-card.nav-mode.show {
    transform: translateX(-50%) translateY(0) !important;
}
.poi-action-card.nav-mode .poi-card-header {
    margin-bottom: 12px !important;
    gap: 12px !important;
}
.poi-action-card.nav-mode .poi-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 22px !important;
}
.poi-action-card.nav-mode .poi-card-name {
    font-size: 15px !important;
}
.poi-action-card.nav-mode .poi-card-details {
    font-size: 12px !important;
}
.poi-action-card.nav-mode .poi-card-actions {
    gap: 10px !important;
}
.poi-action-card.nav-mode .poi-card-btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
}
/* EV Charger legend color */
.legend-color.ev-charger {
    background: linear-gradient(135deg, #00bcd4, #0097a7);
    border: 2px solid #006064;
}
/* Vehicle-type visibility */
.vehicle-gas .ev-only,
.vehicle-gas [class*="ev-only"] {
    display: none !important;
}
.vehicle-ev .gas-only,
.vehicle-ev [class*="gas-only"] {
    display: none !important;
}
.vehicle-hybrid .ev-only,
.vehicle-hybrid .gas-only {
    display: flex !important;
}
/* Quick action button logo */
.quick-btn-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}
/* Off-route fallback search note */
.poi-off-route-note {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
    padding: 10px 15px;
    margin: 0 0 10px 0;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    border-left: 3px solid #ffc107;
}
.dark-mode .poi-off-route-note {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}
/* Emoji-based markers */
.emoji-marker-container {
    background: transparent !important;
    border: none !important;
}
.emoji-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
/* Tesla Supercharger marker */
.tesla-marker-container {
    background: transparent !important;
    border: none !important;
}
.tesla-marker {
    width: 32px;
    height: 32px;
    background: #1877F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 2px solid white;
}
.tesla-marker img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}
/* EV Charger marker */
.ev-charger-marker-container {
    background: transparent !important;
    border: none !important;
}
.ev-charger-marker {
    width: 28px;
    height: 28px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid white;
    font-size: 16px;
}
.ev-charger-marker img {
    width: 18px;
    height: 18px;
    border-radius: 2px;
}
/* Tessie Settings */
.tessie-settings {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
.tessie-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}
.tessie-control .btn {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tessie-settings-status {
    font-size: 12px;
    color: var(--text-muted);
}
.tessie-settings-status.connected {
    color: var(--success-color, #10b981);
}
.tessie-settings .help-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}
/* Get Lost Navigate Mode Button */
.gem-add-route-btn.navigate-mode {
    background: var(--danger-color, #ef4444) !important;
    border-color: var(--danger-color, #ef4444) !important;
    color: white !important;
}
.gem-add-route-btn.navigate-mode:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
/* Clear Route Button - Map Control */
.map-control-btn.clear-route-btn {
    background: var(--danger-color, #ef4444) !important;
    border-color: var(--danger-color, #ef4444) !important;
    color: white !important;
}
.map-control-btn.clear-route-btn:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
/* Clear Route Link - Sidebar */
.btn-link-danger {
    color: var(--danger-color, #ef4444) !important;
}
.btn-link-danger:hover {
    color: #dc2626 !important;
}
/* Gem Images */
.gem-image-container {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--bg-secondary);
}
.gem-image-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
}
.gem-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gem-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-tertiary, #f0f0f0);
}
/* Gem Image Fallback - SVG Icons with Color Backgrounds */
.gem-image-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    gap: 8px;
}
.gem-fallback-icon {
    opacity: 0.9;
}
.gem-fallback-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.gem-fallback-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}
.gem-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
/* Ensure container matches aspect ratio */
.gem-image-container {
    width: 100%;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--bg-secondary);
}
/* Sign in with Apple button */
.btn-apple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}
.btn-apple:hover {
    background: #333;
}
.btn-apple svg {
    flex-shrink: 0;
}
/* Subscription Tier Badges */
.tier-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tier-free {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
}
.tier-pro {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
}
.tier-admin {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}
/* Linked Account Status */
.status-linked {
    color: #22c55e;
}
.status-unlinked {
    color: #94a3b8;
}
/* Extra small button */
.btn-xs {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
}
/* Upgrade button accent */
.btn-accent {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    border: none;
}
.btn-accent:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}
/* Linked accounts section */
.linked-accounts {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}
.linked-account-row {
    border-bottom: 1px solid var(--border-color);
}
.linked-account-row:last-child {
    border-bottom: none;
}
/* Upgrade Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}
.upgrade-modal-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.upgrade-modal-content .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
}
.upgrade-modal-icon {
    color: var(--accent);
    margin-bottom: 16px;
}
.upgrade-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.upgrade-modal-message {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 14px;
}
.upgrade-modal-features {
    text-align: left;
    margin-bottom: 12px;
    padding: 16px;
    background: var(--bg-darker);
    border-radius: 12px;
}
.upgrade-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-primary);
}
.feature-check {
    color: #22c55e;
    font-weight: bold;
}
.upgrade-modal-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 16px;
}
.upgrade-modal-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
}
.upgrade-modal-note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
/* Gem Image Restricted Placeholder */
.gem-image-restricted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--card-bg) 100%);
    border-radius: 8px;
    color: var(--text-muted);
    gap: 8px;
    padding: 20px;
}
.gem-image-restricted .restricted-icon {
    opacity: 0.5;
}
.gem-image-restricted .restricted-text {
    font-size: 12px;
    font-weight: 500;
}
.gem-image-restricted .btn {
    margin-top: 8px;
}
/* Usage Meters */
.usage-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}
.usage-meter-bg {
    background: var(--bg-darker);
}
.usage-meter-fill {
    background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
}
/* ===== Cleaner Subscription UI ===== */
/* Inline tier badge next to name */
.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-details .user-name {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tier-badge:empty {
    display: none;
}
.tier-free {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}
.tier-pro {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}
.tier-admin {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
/* Subscription status section */
.subscription-status {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.1));
}
/* Usage section */
.usage-section {
    margin-bottom: 10px;
}
.usage-meter-row {
    margin-bottom: 8px;
}
.usage-meter-row:last-child {
    margin-bottom: 0;
}
.usage-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 3px;
}
.usage-meter-bg {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.usage-meter-fill {
    height: 100%;
    background: var(--accent, #8b5cf6);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}
/* Upgrade button */
.btn-upgrade {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-upgrade:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    transform: translateY(-1px);
}
/* Hide upgrade button for pro/admin */
.subscription-status.is-pro .btn-upgrade,
.subscription-status.is-admin .btn-upgrade {
    display: none;
}
/* Hide usage for admin */
.subscription-status.is-admin .usage-section {
    display: none !important;
}
/* Manage subscription button */
.btn-manage-sub {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}
.btn-manage-sub:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-color, #fff);
    border-color: rgba(255,255,255,0.25);
}
.btn-manage-sub:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ===== Welcome Screen ===== */
.welcome-screen {
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Moon glow */
        radial-gradient(ellipse 200px 200px at 85% 15%, rgba(255, 255, 240, 0.15) 0%, rgba(200, 200, 255, 0.05) 40%, transparent 70%),
        /* Subtle nebula effects */
        radial-gradient(ellipse at top right, rgba(100, 100, 200, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(150, 100, 200, 0.08) 0%, transparent 40%),
        /* Night sky gradient */
        linear-gradient(to bottom, #0a0a1a 0%, #1a1a3a 40%, #2a1a4a 70%, #1a0a2a 100%);
    background-color: #0a0a1a;
    z-index: 99999;
    display: flex;
    padding: 10px 0;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.welcome-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* Stars layer */
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, white, transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 250px 160px, white, transparent),
        radial-gradient(2px 2px at 280px 90px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 320px 140px, white, transparent),
        radial-gradient(2px 2px at 350px 30px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 380px 180px, white, transparent),
        radial-gradient(2px 2px at 50px 200px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 100px 250px, white, transparent),
        radial-gradient(2px 2px at 150px 300px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 220px 280px, white, transparent),
        radial-gradient(2px 2px at 300px 220px, rgba(255,255,255,0.7), transparent);
    background-size: 400px 400px;
    animation: twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes twinkle {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}
.welcome-screen::after {
    content: "";
    position: absolute;
    top: 5%;
    right: 8%;
    width: 80px;
    height: 80px;
    background-image: url("/images/cute_moon.png");
    background-size: 140%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 40px 15px rgba(255, 255, 200, 0.3), 0 0 80px 30px rgba(255, 255, 200, 0.15);
    pointer-events: none;
}
.welcome-screen-old-after-delete {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Moon element */
    background: 
        radial-gradient(circle 60px at 85% 12%, rgba(255, 255, 230, 0.9) 0%, rgba(255, 255, 200, 0.4) 40%, transparent 60%),
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}
.welcome-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Mobile moon position fix */@media (max-width: 768px) {    .welcome-screen {        background:             radial-gradient(ellipse 150px 150px at 90% 10%, rgba(255, 255, 240, 0.15) 0%, rgba(200, 200, 255, 0.05) 40%, transparent 70%),            radial-gradient(ellipse at top right, rgba(100, 100, 200, 0.1) 0%, transparent 50%),            radial-gradient(ellipse at 30% 70%, rgba(150, 100, 200, 0.08) 0%, transparent 40%),            linear-gradient(to bottom, #0a0a1a 0%, #1a1a3a 40%, #2a1a4a 70%, #1a0a2a 100%);    }    .welcome-screen::after {
    content: "";
    position: absolute;
    top: 3%;
    right: -4%;
    width: 80px;
    height: 80px;
    background-image: url("/images/cute_moon.png");
    background-size: 140%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 40px 15px rgba(255, 255, 200, 0.3), 0 0 80px 30px rgba(255, 255, 200, 0.15);
    pointer-events: none;
}
.welcome-screen-old-after-delete {        background:             radial-gradient(circle 45px at 90% 8%, rgba(255, 255, 230, 0.9) 0%, rgba(255, 255, 200, 0.4) 40%, transparent 60%),            radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);    }}
.welcome-content {
    text-align: center;
    padding: 12px 20px;
    max-width: 400px;
    width: 100%;
    margin: auto;
}
.welcome-logo {
    position: relative;
    z-index: 10;
    margin-bottom: 12px;
}
.welcome-logo svg {
    filter: drop-shadow(0 0 20px rgba(227, 25, 55, 0.3));
}
.welcome-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}
.welcome-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px 0;
    line-height: 1.5;
}
.welcome-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.welcome-feature {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid #ddd;
}
.welcome-feature .feature-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
}
.welcome-feature span:last-child {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}
.welcome-auth {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.btn-welcome-google,
.btn-welcome-apple {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.btn-welcome-google {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    background: #fff;
    color: #333;
}
.btn-welcome-google:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
}
.btn-welcome-apple {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    background: #000;
    color: #fff;
}
.btn-welcome-apple:hover {
    background: #222;
    transform: translateY(-1px);
}
.btn-welcome-google:disabled,
.btn-welcome-apple:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.welcome-note {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}
/* Mobile adjustments */
@media (max-width: 480px) {
    .welcome-content {
        padding: 30px 20px;
    }
    .welcome-title {
        font-size: 24px;
    }
    .welcome-subtitle {
        font-size: 14px;
    }
}
/* Welcome Screen Enhancements */
.welcome-features {
    gap: 14px !important;
}
.welcome-feature {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 14px 18px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}
.welcome-feature:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: #ccc;
    transform: translateX(4px);
}
.welcome-feature .feature-icon {
    font-size: 24px !important;
    width: 36px !important;
    flex-shrink: 0;
}
.welcome-feature span:last-child {
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.welcome-logo svg {
    animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(227, 25, 55, 0.3)); }
    50% { filter: drop-shadow(0 0 25px rgba(227, 25, 55, 0.5)); }
}
/* Sastr Welcome Banner Logo */
.welcome-logo-banner {
    margin-bottom: 16px;
}
.welcome-banner-img {
    max-width: 100%;
    width: 90%;
    max-width: 280px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(100, 150, 255, 0.3);
}
@media (max-width: 480px) {
    .welcome-banner-img {
        width: 90%;
    }
}
/* Green Calculate Route Button */
#calculateRoute {
    background: #1877F2 !important;
}
#calculateRoute:hover {
    background: #16a34a !important;
}
/* Green Start Navigation Button */
#startNavigation {
    background: #1877F2 !important;
}
#startNavigation:hover {
    background: #16a34a !important;
}
/* Green Nav Buttons */
.btn-nav {
    background: #1877F2 !important;
}
.btn-nav:hover {
    background: #16a34a !important;
}
/* Green Navigate Buttons in Quick Actions */
.poi-card-btn.navigate {
    background: #1877F2 !important;
}
.poi-card-btn.navigate:hover {
    background: #16a34a !important;
}
/* Green Navigate Button in Get Lost */
.gem-add-route-btn.navigate-mode {
    background: #1877F2 !important;
}
.gem-add-route-btn.navigate-mode:hover {
    background: #16a34a !important;
}
/* Settings Tab - Facebook Blue */
.settings-tab.active {
    background: #1877F2 !important;
    color: white !important;
}
/* Save Button - Facebook Blue */
#settingsSaveBtn {
    background: #1877F2 !important;
}
#settingsSaveBtn:hover {
    background: #1664d9 !important;
}
/* Top Four Guide Toggle Boxes - Colored */
#settingsToggleAI.active {
    background: #1877F2 !important; /* Blue - AI/Tech */
    border-color: #1877F2 !important;
}
#settingsToggleAudio.active {
    background: #1877F2 !important; /* Green - Go/Audio */
    border-color: #1877F2 !important;
}
#settingsToggleWeather.active {
    background: #1877F2 !important; /* Yellow - Sun/Weather */
    border-color: #1877F2 !important;
}
#settingsToggleRest.active {
    background: #1877F2 !important; /* Red - Stop/Rest */
    border-color: #1877F2 !important;
}
/* Black Sliders */
.settings-modal input[type="range"]::-webkit-slider-thumb {
    background: #000 !important;
}
.settings-modal input[type="range"]::-moz-range-thumb {
    background: #000 !important;
}
.settings-modal input[type="range"] {
    accent-color: #000 !important;
}
/* Connect to Tessie Button - Red */
#settingsTessieBtn {
    background: #e31937 !important;
    color: white !important;
    border-color: #e31937 !important;
}
#settingsTessieBtn:hover {
    background: #c41230 !important;
}
/* Save Settings Button - Red (override previous blue) */
#settingsSaveBtn {
    background: #e31937 !important;
}
#settingsSaveBtn:hover {
    background: #c41230 !important;
}
/* Efficiency Presets - Facebook Blue */
.preset-btn.active {
    background: #1877F2 !important;
    color: white !important;
    border-color: #1877F2 !important;
}
.preset-btn:hover {
    border-color: #1877F2 !important;
}
/* Guide Section - All Toggles Facebook Blue with Light Background */
#settingsToggleAI.active,
#settingsToggleAudio.active,
#settingsToggleWeather.active,
#settingsToggleRest.active {
    background: rgba(24, 119, 242, 0.15) !important;
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Guide Section - Bottom Checkboxes Facebook Blue Style */
.settings-checkbox-group .icon-checkbox.checked {
    background: rgba(24, 119, 242, 0.15) !important;
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked .icon-checkbox-icon {
    color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked .icon-checkbox-label {
    color: white !important;
}
/* Connect to Tessie Button - Less Wide */
#settingsTessieBtn {
    width: auto !important;
    padding: 8px 20px !important;
}
/* Center Tessie Button */
.tessie-control {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
/* Guide Section - White Background with Colored Borders & Icons */
/* Top 4 Toggles - Override previous styles */
#settingsToggleAI.active {
    background: white !important;
    border: 2px solid #1877F2 !important;
    color: #1877F2 !important;
}
#settingsToggleAI.active svg, #settingsToggleAI.active span {
    color: #1877F2 !important;
}
#settingsToggleAudio.active {
    background: white !important;
    border: 2px solid #1877F2 !important;
    color: #1877F2 !important;
}
#settingsToggleAudio.active svg, #settingsToggleAudio.active span {
    color: #1877F2 !important;
}
#settingsToggleWeather.active {
    background: white !important;
    border: 2px solid #1877F2 !important;
    color: #1877F2 !important;
}
#settingsToggleWeather.active svg, #settingsToggleWeather.active span {
    color: #1877F2 !important;
}
#settingsToggleRest.active {
    background: white !important;
    border: 2px solid #1877F2 !important;
    color: #1877F2 !important;
}
#settingsToggleRest.active svg, #settingsToggleRest.active span {
    color: #1877F2 !important;
}
/* Bottom Checkboxes - White with Colored Borders & Icons */
.settings-checkbox-group .icon-checkbox.checked {
    background: white !important;
    border: 2px solid currentColor !important;
}
/* Attractions - Purple */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptAttractions:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptAttractions:checked) .icon-checkbox-icon,
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptAttractions:checked) .icon-checkbox-label {
    color: white !important;
}
/* Food - Orange */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptFood:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptFood:checked) .icon-checkbox-icon,
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptFood:checked) .icon-checkbox-label {
    color: white !important;
}
/* History - Blue */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptHistory:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptHistory:checked) .icon-checkbox-icon,
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptHistory:checked) .icon-checkbox-label {
    color: white !important;
}
/* Charging - Green */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptCharging:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptCharging:checked) .icon-checkbox-icon,
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptCharging:checked) .icon-checkbox-label {
    color: white !important;
}
/* Override - Attractions RED */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptAttractions:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptAttractions:checked) .icon-checkbox-label {
    color: white !important;
}
/* Weather - Yellow/Orange */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptWeather:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptWeather:checked) .icon-checkbox-label {
    color: white !important;
}
/* Scenic Views - Yellow */
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptScenic:checked) {
    border-color: #1877F2 !important;
}
.settings-checkbox-group .icon-checkbox.checked:has(#settingsGptScenic:checked) .icon-checkbox-label {
    color: white !important;
}
/* Keep icons their natural multi-colors */
.settings-checkbox-group .icon-checkbox .icon-checkbox-icon {
    color: unset !important;
}
/* Bottom 6 - All unique colors, icons match */
/* Attractions - Red */
.icon-checkbox:has(#settingsGptAttractions).checked,
.icon-checkbox:has(#settingsGptAttractions:checked) {
    border-color: #1877F2 !important;
}
.icon-checkbox:has(#settingsGptAttractions).checked .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptAttractions).checked .icon-checkbox-label,
.icon-checkbox:has(#settingsGptAttractions:checked) .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptAttractions:checked) .icon-checkbox-label {
    color: white !important;
    color: #1877F2 !important;
}
/* Food & Dining - Orange */
.icon-checkbox:has(#settingsGptFood).checked,
.icon-checkbox:has(#settingsGptFood:checked) {
    border-color: #1877F2 !important;
}
.icon-checkbox:has(#settingsGptFood).checked .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptFood).checked .icon-checkbox-label,
.icon-checkbox:has(#settingsGptFood:checked) .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptFood:checked) .icon-checkbox-label {
    color: white !important;
    color: #1877F2 !important;
}
/* History & Facts - Blue */
.icon-checkbox:has(#settingsGptHistory).checked,
.icon-checkbox:has(#settingsGptHistory:checked) {
    border-color: #1877F2 !important;
}
.icon-checkbox:has(#settingsGptHistory).checked .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptHistory).checked .icon-checkbox-label,
.icon-checkbox:has(#settingsGptHistory:checked) .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptHistory:checked) .icon-checkbox-label {
    color: white !important;
    color: #1877F2 !important;
}
/* Charging/Gas - Green */
.icon-checkbox:has(#settingsGptCharging).checked,
.icon-checkbox:has(#settingsGptCharging:checked) {
    border-color: #1877F2 !important;
}
.icon-checkbox:has(#settingsGptCharging).checked .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptCharging).checked .icon-checkbox-label,
.icon-checkbox:has(#settingsGptCharging:checked) .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptCharging:checked) .icon-checkbox-label {
    color: white !important;
    color: #1877F2 !important;
}
/* Weather - Yellow */
.icon-checkbox:has(#settingsGptWeather).checked,
.icon-checkbox:has(#settingsGptWeather:checked) {
    border-color: #1877F2 !important;
}
.icon-checkbox:has(#settingsGptWeather).checked .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptWeather).checked .icon-checkbox-label,
.icon-checkbox:has(#settingsGptWeather:checked) .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptWeather:checked) .icon-checkbox-label {
    color: white !important;
    color: #1877F2 !important;
}
/* Scenic Views - Purple */
.icon-checkbox:has(#settingsGptScenic).checked,
.icon-checkbox:has(#settingsGptScenic:checked) {
    border-color: #1877F2 !important;
}
.icon-checkbox:has(#settingsGptScenic).checked .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptScenic).checked .icon-checkbox-label,
.icon-checkbox:has(#settingsGptScenic:checked) .icon-checkbox-icon,
.icon-checkbox:has(#settingsGptScenic:checked) .icon-checkbox-label {
    color: white !important;
    color: #1877F2 !important;
}
/* Force icon colors to match borders - Higher specificity */
#settings-guide .icon-checkbox[data-setting="settingsGptAttractions"].checked .icon-checkbox-icon,
#settings-guide .icon-checkbox[data-setting="settingsGptAttractions"].checked .icon-checkbox-icon svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}
#settings-guide .icon-checkbox[data-setting="settingsGptFood"].checked .icon-checkbox-icon,
#settings-guide .icon-checkbox[data-setting="settingsGptFood"].checked .icon-checkbox-icon svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}
#settings-guide .icon-checkbox[data-setting="settingsGptHistory"].checked .icon-checkbox-icon,
#settings-guide .icon-checkbox[data-setting="settingsGptHistory"].checked .icon-checkbox-icon svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}
#settings-guide .icon-checkbox[data-setting="settingsGptCharging"].checked .icon-checkbox-icon,
#settings-guide .icon-checkbox[data-setting="settingsGptCharging"].checked .icon-checkbox-icon svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}
#settings-guide .icon-checkbox[data-setting="settingsGptWeather"].checked .icon-checkbox-icon,
#settings-guide .icon-checkbox[data-setting="settingsGptWeather"].checked .icon-checkbox-icon svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}
#settings-guide .icon-checkbox[data-setting="settingsGptScenic"].checked .icon-checkbox-icon,
#settings-guide .icon-checkbox[data-setting="settingsGptScenic"].checked .icon-checkbox-icon svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}
/* Also target by nth-child as fallback */
.settings-checkbox-group .icon-checkbox.checked:nth-child(1) .icon-checkbox-icon { color: #1877F2 !important; }
.settings-checkbox-group .icon-checkbox.checked:nth-child(2) .icon-checkbox-icon { color: #1877F2 !important; }
.settings-checkbox-group .icon-checkbox.checked:nth-child(3) .icon-checkbox-icon { color: #1877F2 !important; }
.settings-checkbox-group .icon-checkbox.checked:nth-child(4) .icon-checkbox-icon { color: #1877F2 !important; }
.settings-checkbox-group .icon-checkbox.checked:nth-child(5) .icon-checkbox-icon { color: #1877F2 !important; }
.settings-checkbox-group .icon-checkbox.checked:nth-child(6) .icon-checkbox-icon { color: #1877F2 !important; }
/* Lower 6 - Target by ID - Icons and borders match */
/* Attractions - Red */
#iconCheckAttractions.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Food & Dining - Orange */
#iconCheckFood.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* History & Facts - Blue */
#iconCheckHistory.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Charging/Gas - Green */
#iconCheckCharging.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Weather - Yellow */
#iconCheckWeather.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Scenic Views - Purple */
#iconCheckScenic.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Force all to match - border, text, AND icon SVG stroke */
#iconCheckAttractions.checked,
#iconCheckAttractions.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckAttractions.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckFood.checked,
#iconCheckFood.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckFood.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckHistory.checked,
#iconCheckHistory.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckHistory.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckCharging.checked,
#iconCheckCharging.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckCharging.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckWeather.checked,
#iconCheckWeather.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckWeather.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckScenic.checked,
#iconCheckScenic.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckScenic.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
/* Scenic Views - Purple - both checked and unchecked */
#iconCheckScenic {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckScenic .icon-checkbox-label {
    color: #1877F2 !important;
}
#iconCheckScenic .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
/* Light tinted backgrounds for all 10 boxes */
/* Top 4 Toggles */
#settingsToggleAI.active {
    background: rgba(24, 119, 242, 0.1) !important;
}
#settingsToggleAudio.active {
    background: rgba(34, 197, 94, 0.1) !important;
}
#settingsToggleWeather.active {
    background: rgba(245, 158, 11, 0.1) !important;
}
#settingsToggleRest.active {
    background: rgba(239, 68, 68, 0.1) !important;
}
/* Bottom 6 Checkboxes */
#iconCheckAttractions {
    background: rgba(239, 68, 68, 0.1) !important;
}
#iconCheckFood {
    background: rgba(249, 115, 22, 0.1) !important;
}
#iconCheckHistory {
    background: rgba(59, 130, 246, 0.1) !important;
}
#iconCheckCharging {
    background: rgba(34, 197, 94, 0.1) !important;
}
#iconCheckWeather {
    background: rgba(234, 179, 8, 0.1) !important;
}
#iconCheckScenic {
    background: rgba(168, 85, 247, 0.1) !important;
}
/* All 10 boxes - white background, black borders */
/* Top 4 Toggles */
#settingsToggleAI.active,
#settingsToggleAudio.active,
#settingsToggleWeather.active,
#settingsToggleRest.active {
    background: white !important;
    border-color: #000 !important;
}
/* Bottom 6 Checkboxes */
#iconCheckAttractions,
#iconCheckFood,
#iconCheckHistory,
#iconCheckCharging,
#iconCheckWeather,
#iconCheckScenic {
    background: white !important;
    border-color: #000 !important;
}
/* Revert - colored borders, white backgrounds */
/* Top 4 Toggles - restore colored borders */
#settingsToggleAI.active {
    background: white !important;
    border-color: #1877F2 !important;
}
#settingsToggleAudio.active {
    background: white !important;
    border-color: #1877F2 !important;
}
#settingsToggleWeather.active {
    background: white !important;
    border-color: #1877F2 !important;
}
#settingsToggleRest.active {
    background: white !important;
    border-color: #1877F2 !important;
}
/* Bottom 6 Checkboxes - restore colored borders */
#iconCheckAttractions {
    background: white !important;
    border-color: #1877F2 !important;
}
#iconCheckFood {
    background: white !important;
    border-color: #1877F2 !important;
}
#iconCheckHistory {
    background: white !important;
    border-color: #1877F2 !important;
}
#iconCheckCharging {
    background: white !important;
    border-color: #1877F2 !important;
}
#iconCheckWeather {
    background: white !important;
    border-color: #1877F2 !important;
}
#iconCheckScenic {
    background: white !important;
    border-color: #1877F2 !important;
}
/* All boxes - gray when unchecked, Facebook blue when checked */
/* Reset bottom 6 to gray when unchecked */
#iconCheckAttractions,
#iconCheckFood,
#iconCheckHistory,
#iconCheckCharging,
#iconCheckWeather,
#iconCheckScenic {
    background: white !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}
#iconCheckAttractions .icon-checkbox-icon,
#iconCheckFood .icon-checkbox-icon,
#iconCheckHistory .icon-checkbox-icon,
#iconCheckCharging .icon-checkbox-icon,
#iconCheckWeather .icon-checkbox-icon,
#iconCheckScenic .icon-checkbox-icon {
    stroke: #6b7280 !important;
    color: #6b7280 !important;
}
#iconCheckAttractions .icon-checkbox-label,
#iconCheckFood .icon-checkbox-label,
#iconCheckHistory .icon-checkbox-label,
#iconCheckCharging .icon-checkbox-label,
#iconCheckWeather .icon-checkbox-label,
#iconCheckScenic .icon-checkbox-label {
    color: #6b7280 !important;
}
/* All checked - Facebook blue */
#iconCheckAttractions.checked,
#iconCheckFood.checked,
#iconCheckHistory.checked,
#iconCheckCharging.checked,
#iconCheckWeather.checked,
#iconCheckScenic.checked {
    background: white !important;
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckAttractions.checked .icon-checkbox-icon,
#iconCheckFood.checked .icon-checkbox-icon,
#iconCheckHistory.checked .icon-checkbox-icon,
#iconCheckCharging.checked .icon-checkbox-icon,
#iconCheckWeather.checked .icon-checkbox-icon,
#iconCheckScenic.checked .icon-checkbox-icon {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
#iconCheckAttractions.checked .icon-checkbox-label,
#iconCheckFood.checked .icon-checkbox-label,
#iconCheckHistory.checked .icon-checkbox-label,
#iconCheckCharging.checked .icon-checkbox-label,
#iconCheckWeather.checked .icon-checkbox-label,
#iconCheckScenic.checked .icon-checkbox-label {
    color: white !important;
}
/* Top 4 toggles - Facebook blue when active */
#settingsToggleAI.active,
#settingsToggleAudio.active,
#settingsToggleWeather.active,
#settingsToggleRest.active {
    background: white !important;
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
/* Top 4 toggles - ALL Facebook blue when active (icons too) */
#settingsToggleAI.active svg,
#settingsToggleAI.active span,
#settingsToggleAudio.active svg,
#settingsToggleAudio.active span,
#settingsToggleWeather.active svg,
#settingsToggleWeather.active span,
#settingsToggleRest.active svg,
#settingsToggleRest.active span {
    color: #1877F2 !important;
    stroke: #1877F2 !important;
    fill: #1877F2 !important;
}
/* Bottom 6 checkboxes - ALL Facebook blue when checked (icons too) */
#iconCheckAttractions.checked .icon-checkbox-icon,
#iconCheckFood.checked .icon-checkbox-icon,
#iconCheckHistory.checked .icon-checkbox-icon,
#iconCheckCharging.checked .icon-checkbox-icon,
#iconCheckWeather.checked .icon-checkbox-icon,
#iconCheckScenic.checked .icon-checkbox-icon {
    color: #1877F2 !important;
    stroke: #1877F2 !important;
}
/* FORCE all bottom 6 to Facebook blue when checked - highest specificity */
.icon-checkbox-grid #iconCheckAttractions.checked,
.icon-checkbox-grid #iconCheckAttractions.checked .icon-checkbox-label,
.icon-checkbox-grid #iconCheckFood.checked,
.icon-checkbox-grid #iconCheckFood.checked .icon-checkbox-label,
.icon-checkbox-grid #iconCheckHistory.checked,
.icon-checkbox-grid #iconCheckHistory.checked .icon-checkbox-label,
.icon-checkbox-grid #iconCheckCharging.checked,
.icon-checkbox-grid #iconCheckCharging.checked .icon-checkbox-label,
.icon-checkbox-grid #iconCheckWeather.checked,
.icon-checkbox-grid #iconCheckWeather.checked .icon-checkbox-label,
.icon-checkbox-grid #iconCheckScenic.checked,
.icon-checkbox-grid #iconCheckScenic.checked .icon-checkbox-label {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
}
.icon-checkbox-grid #iconCheckAttractions.checked .icon-checkbox-icon,
.icon-checkbox-grid #iconCheckFood.checked .icon-checkbox-icon,
.icon-checkbox-grid #iconCheckHistory.checked .icon-checkbox-icon,
.icon-checkbox-grid #iconCheckCharging.checked .icon-checkbox-icon,
.icon-checkbox-grid #iconCheckWeather.checked .icon-checkbox-icon,
.icon-checkbox-grid #iconCheckScenic.checked .icon-checkbox-icon {
    color: #1877F2 !important;
    stroke: #1877F2 !important;
    fill: none !important;
}
.icon-checkbox-grid #iconCheckAttractions.checked svg,
.icon-checkbox-grid #iconCheckFood.checked svg,
.icon-checkbox-grid #iconCheckHistory.checked svg,
.icon-checkbox-grid #iconCheckCharging.checked svg,
.icon-checkbox-grid #iconCheckWeather.checked svg,
.icon-checkbox-grid #iconCheckScenic.checked svg {
    stroke: #1877F2 !important;
}
/* FINAL OVERRIDE - All checked boxes Facebook blue */
label.icon-checkbox.checked {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
    background: white !important;
}
label.icon-checkbox.checked .icon-checkbox-label {
    color: #1877F2 !important;
}
label.icon-checkbox.checked .icon-checkbox-icon,
label.icon-checkbox.checked .icon-checkbox-icon svg,
label.icon-checkbox.checked svg.icon-checkbox-icon {
    color: #1877F2 !important;
    stroke: #1877F2 !important;
}
/* Unchecked stays gray */
label.icon-checkbox:not(.checked) {
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    background: white !important;
}
label.icon-checkbox:not(.checked) .icon-checkbox-label {
    color: #6b7280 !important;
}
label.icon-checkbox:not(.checked) .icon-checkbox-icon,
label.icon-checkbox:not(.checked) svg {
    color: #6b7280 !important;
    stroke: #6b7280 !important;
}
/* ABSOLUTE FINAL - target SVG paths directly */
label.icon-checkbox.checked svg path,
label.icon-checkbox.checked svg circle,
label.icon-checkbox.checked svg line,
label.icon-checkbox.checked svg polyline,
label.icon-checkbox.checked svg polygon,
label.icon-checkbox.checked svg rect {
    stroke: #1877F2 !important;
    fill: none !important;
}
label.icon-checkbox:not(.checked) svg path,
label.icon-checkbox:not(.checked) svg circle,
label.icon-checkbox:not(.checked) svg line,
label.icon-checkbox:not(.checked) svg polyline,
label.icon-checkbox:not(.checked) svg polygon,
label.icon-checkbox:not(.checked) svg rect {
    stroke: #6b7280 !important;
    fill: none !important;
}
/* Target new icon-svg class */
label.icon-checkbox.checked svg.icon-svg,
label.icon-checkbox.checked svg.icon-svg path {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
label.icon-checkbox:not(.checked) svg.icon-svg,
label.icon-checkbox:not(.checked) svg.icon-svg path {
    stroke: #6b7280 !important;
    color: #6b7280 !important;
}
/* FINAL FIX: All icon checkbox icons - force stroke on SVG and all paths */
#iconCheckAttractions.checked svg,
#iconCheckAttractions.checked svg *,
#iconCheckFood.checked svg,
#iconCheckFood.checked svg *,
#iconCheckHistory.checked svg,
#iconCheckHistory.checked svg *,
#iconCheckCharging.checked svg,
#iconCheckCharging.checked svg *,
#iconCheckWeather.checked svg,
#iconCheckWeather.checked svg *,
#iconCheckScenic.checked svg,
#iconCheckScenic.checked svg * {
    stroke: #1877F2 !important;
    color: #1877F2 !important;
}
/* Weather checkbox specific fix */
#iconCheckWeather.checked,
#iconCheckWeather.checked .icon-checkbox-label,
#iconCheckWeather.checked .icon-checkbox-icon,
#iconCheckWeather.checked svg,
#iconCheckWeather.checked svg *,
#iconCheckWeather.checked path,
#iconCheckWeather.checked circle,
label#iconCheckWeather.checked,
label#iconCheckWeather.checked span,
label#iconCheckWeather.checked svg {
    border-color: #1877F2 !important;
    color: #1877F2 !important;
    stroke: #1877F2 !important;
}
/* ALL 10 CHECKBOXES: Blue background, white text/icons when checked */
/* Top 4 toggles */
#settingsToggleAI.active,
#settingsToggleAudio.active,
#settingsToggleWeather.active,
#settingsToggleRest.active {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: white !important;
}
#settingsToggleAI.active svg,
#settingsToggleAI.active span,
#settingsToggleAudio.active svg,
#settingsToggleAudio.active span,
#settingsToggleWeather.active svg,
#settingsToggleWeather.active span,
#settingsToggleRest.active svg,
#settingsToggleRest.active span {
    color: white !important;
    stroke: white !important;
}
/* Bottom 6 icon checkboxes */
#iconCheckAttractions.checked,
#iconCheckFood.checked,
#iconCheckHistory.checked,
#iconCheckCharging.checked,
#iconCheckWeather.checked,
#iconCheckScenic.checked {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: white !important;
}
#iconCheckAttractions.checked .icon-checkbox-label,
#iconCheckFood.checked .icon-checkbox-label,
#iconCheckHistory.checked .icon-checkbox-label,
#iconCheckCharging.checked .icon-checkbox-label,
#iconCheckWeather.checked .icon-checkbox-label,
#iconCheckScenic.checked .icon-checkbox-label {
    color: white !important;
}
#iconCheckAttractions.checked .icon-checkbox-icon,
#iconCheckFood.checked .icon-checkbox-icon,
#iconCheckHistory.checked .icon-checkbox-icon,
#iconCheckCharging.checked .icon-checkbox-icon,
#iconCheckWeather.checked .icon-checkbox-icon,
#iconCheckScenic.checked .icon-checkbox-icon,
#iconCheckAttractions.checked svg,
#iconCheckFood.checked svg,
#iconCheckHistory.checked svg,
#iconCheckCharging.checked svg,
#iconCheckWeather.checked svg,
#iconCheckScenic.checked svg,
#iconCheckAttractions.checked svg *,
#iconCheckFood.checked svg *,
#iconCheckHistory.checked svg *,
#iconCheckCharging.checked svg *,
#iconCheckWeather.checked svg *,
#iconCheckScenic.checked svg * {
    color: white !important;
    stroke: white !important;
}
/* Fix: Force white text on bottom 6 checkboxes when checked */
#iconCheckAttractions.checked span,
#iconCheckFood.checked span,
#iconCheckHistory.checked span,
#iconCheckCharging.checked span,
#iconCheckWeather.checked span,
#iconCheckScenic.checked span,
.icon-checkbox.checked .icon-checkbox-label,
label.icon-checkbox.checked span.icon-checkbox-label {
    color: white !important;
}
/* DEFINITIVE FIX: White text on checked icon checkboxes */
.icon-checkbox-grid .icon-checkbox.checked span.icon-checkbox-label,
#iconCheckAttractions.checked span.icon-checkbox-label,
#iconCheckFood.checked span.icon-checkbox-label,
#iconCheckHistory.checked span.icon-checkbox-label,
#iconCheckCharging.checked span.icon-checkbox-label,
#iconCheckWeather.checked span.icon-checkbox-label,
#iconCheckScenic.checked span.icon-checkbox-label,
label.icon-checkbox.checked span.icon-checkbox-label {
    color: #ffffff !important;
}
/* NUCLEAR FIX: Force white text on ALL checked icon checkboxes in settings */
.settings-checkbox-group .icon-checkbox.checked .icon-checkbox-label,
.settings-checkbox-group .icon-checkbox.checked span,
.settings-checkbox-group #iconCheckAttractions.checked .icon-checkbox-label,
.settings-checkbox-group #iconCheckFood.checked .icon-checkbox-label,
.settings-checkbox-group #iconCheckHistory.checked .icon-checkbox-label,
.settings-checkbox-group #iconCheckCharging.checked .icon-checkbox-label,
.settings-checkbox-group #iconCheckWeather.checked .icon-checkbox-label,
.settings-checkbox-group #iconCheckScenic.checked .icon-checkbox-label,
#settings-guide .icon-checkbox.checked .icon-checkbox-label,
#settings-guide .icon-checkbox.checked span.icon-checkbox-label {
    color: #ffffff !important;
}
/* ABSOLUTE FINAL: White text on checked checkboxes using highest specificity */
label#iconCheckAttractions.icon-checkbox.checked span.icon-checkbox-label,
label#iconCheckFood.icon-checkbox.checked span.icon-checkbox-label,
label#iconCheckHistory.icon-checkbox.checked span.icon-checkbox-label,
label#iconCheckCharging.icon-checkbox.checked span.icon-checkbox-label,
label#iconCheckWeather.icon-checkbox.checked span.icon-checkbox-label,
label#iconCheckScenic.icon-checkbox.checked span.icon-checkbox-label {
    color: #ffffff !important;
}
/* DEBUG: Force visibility of checkbox labels */
.icon-checkbox .icon-checkbox-label,
.icon-checkbox span.icon-checkbox-label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12px !important;
    min-width: 50px !important;
}
.icon-checkbox.checked .icon-checkbox-label,
.icon-checkbox.checked span.icon-checkbox-label,
label.icon-checkbox.checked .icon-checkbox-label,
label.icon-checkbox.checked span.icon-checkbox-label {
    color: white !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.5) !important;
}
/* Emoji styling for toggle buttons and checkboxes */
.toggle-emoji {
    font-size: 20px;
    line-height: 1;
}
.icon-checkbox-icon.emoji {
    font-size: 20px;
    line-height: 1;
    width: auto;
    height: auto;
}
/* Remove stroke/color overrides for emoji icons */
.icon-checkbox.checked .icon-checkbox-icon.emoji,
.icon-checkbox:not(.checked) .icon-checkbox-icon.emoji {
    color: inherit !important;
    stroke: none !important;
}
/* Gray out unchecked icon-checkboxes to match inactive toggle buttons */
.icon-checkbox:not(.checked) {
    border-color: transparent;
    opacity: 0.5;
}
.icon-checkbox:not(.checked):hover {
    opacity: 0.7;
    border-color: var(--border-color);
}
.icon-checkbox:not(.checked) .icon-checkbox-icon.emoji {
    filter: grayscale(100%);
}
/* Gray out inactive quick-toggle emojis while keeping white background */
.quick-toggle:not(.active) {
    background: var(--bg-primary);
    border-color: var(--border-color);
}
.quick-toggle:not(.active) .toggle-emoji {
    filter: grayscale(100%);
    opacity: 0.5;
}
.quick-toggle:not(.active) span:not(.toggle-emoji) {
    opacity: 0.5;
    color: var(--text-muted);
}
.quick-toggle:not(.active):hover .toggle-emoji {
    opacity: 0.7;
}
/* Smaller oval tier badge */
.tier-badge {
    padding: 2px 8px !important;
    border-radius: 20px !important;
    font-size: 9px !important;
    margin-left: 6px;
    vertical-align: middle;
}
/* Condensed account section */
.auth-signed-in .user-info {
    margin-bottom: 10px;
}
.auth-signed-in .subscription-status {
    margin-bottom: 8px;
}
.auth-signed-in .btn-sm {
    padding: 6px 12px;
}
/* Compact auth form */
#authSignedOut .form-group {
    margin-bottom: 8px;
}
#authSignedOut .auth-buttons {
    margin-top: 8px;
}
.auth-divider {
    margin: 12px 0 !important;
}
/* Make top toggle emojis larger to match bottom checkboxes */
.settings-quick-toggles .toggle-emoji {
    font-size: 24px !important;
}
.settings-quick-toggles .quick-toggle {
    padding: 12px 10px;
}
.settings-quick-toggles .quick-toggle span:not(.toggle-emoji) {
    font-size: 12px;
}
/* Compact user card with badge in top right */
.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    position: relative;
    margin-bottom: 12px;
}
.user-card .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.user-card .user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.user-card .user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.user-card .user-email {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-card .tier-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0 !important;
}
/* Compact account action buttons */
.account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.account-actions .btn {
    flex: 1;
    min-width: 80px;
}
.account-actions .subscription-status {
    display: contents;
}
/* Clean account action links */
.account-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
}
.account-link {
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.account-link:hover {
    color: var(--tesla-red);
    text-decoration: underline;
}
.account-divider {
    color: var(--border-color);
    font-size: 10px;
}
.account-actions .subscription-status {
    display: none;
}
.account-actions .subscription-status:has(#upgrade-btn:not([style*='display: none'])) {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}
/* Clean account action links */
.account-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    flex-wrap: wrap;
}
.account-link {
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.account-link:hover {
    color: var(--tesla-red);
    text-decoration: underline;
}
.account-divider {
    color: var(--border-color);
    font-size: 10px;
}
/* Button styled as link */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.btn-link:hover {
    color: var(--tesla-red);
    text-decoration: underline;
}
/* Inline subtle account links */
.account-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.account-actions .btn-link {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
}
.account-actions .btn-link:hover {
    opacity: 1;
}
.account-actions .account-divider {
    opacity: 0.4;
}
.account-actions .subscription-status {
    display: none;
}
/* Force inline account actions */
#settings-account .account-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
#settings-account .account-actions .subscription-status {
    display: none !important;
}
#settings-account .account-actions .btn-link {
    font-size: 11px;
    opacity: 0.6;
    white-space: nowrap;
}
#settings-account .account-actions .account-divider {
    font-size: 8px;
    opacity: 0.4;
}
/* Reduce spacing around account actions */
#settings-account .account-actions {
    margin: 4px 0 !important;
    padding: 0 !important;
}
#settings-account .user-card {
    margin-bottom: 8px !important;
}
#settings-account .settings-divider {
    margin-top: 12px !important;
}
/* Subscription info inline */
.subscription-info {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}
.subscription-info.canceling {
    color: var(--warning-color, #f59e0b);
}
/* Tighter account actions spacing */
#settings-account .account-actions {
    gap: 6px !important;
    margin: 2px 0 !important;
}
#settings-account .account-divider {
    margin: 0 2px !important;
}
#settings-account .user-card {
    margin-bottom: 6px !important;
}
/* Subscription info row below card */
.subscription-info-row {
    text-align: center;
    margin: 4px 0;
}
.subscription-info-row .subscription-info {
    font-size: 11px;
    color: var(--text-muted);
}
/* Tighter account actions */
#settings-account .account-actions {
    gap: 4px !important;
    margin: 2px 0 4px 0 !important;
}
/* Account header with subscription info top right */
.account-header {
    text-align: right;
    margin-bottom: 4px;
}
.account-header .subscription-info {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.8;
}
/* Very tight account actions */
#settings-account .account-actions {
    display: inline-flex !important;
    gap: 0 !important;
    justify-content: center !important;
    width: 100%;
}
#settings-account .account-actions .btn-link {
    padding: 0 4px;
}
#settings-account .account-actions .account-divider {
    margin: 0 2px;
    opacity: 0.45;
}
/* Force tight account section */
#settings-account .auth-signed-in {
    padding: 0 !important;
    margin: 0 !important;
}
#settings-account .account-header {
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
}
#settings-account .user-card {
    margin: 0 0 4px 0 !important;
    padding: 10px !important;
}
#settings-account .account-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}
#settings-account .account-actions .btn-link {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}
#settings-account .account-actions .account-divider {
    display: inline !important;
    margin: 0 6px !important;
    padding: 0 !important;
}
/* Ultra-tight account section spacing - Feb 18 */
#settings-account .account-header {
    margin: 0 0 0 0 !important;
    padding: 0 !important;
}
#settings-account .user-card {
    margin: 0 0 2px 0 !important;
}
#settings-account .account-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
#settings-account .account-actions .btn-link {
    flex: none !important;
    width: auto !important;
}
#settings-account .account-actions .account-divider {
    margin: 0 4px !important;
    flex: none !important;
}
/* Reduce top padding above renewal and bottom after Manage/Sign Out - Feb 18 */
#settings-account .auth-signed-in {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
#settings-account .account-actions {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#settings-account .settings-divider {
    margin-top: 8px !important;
}
/* Tighter account tab content - Feb 18 */
#settings-account {
    padding-top: 4px !important;
}
#settings-account > .settings-divider:first-of-type {
    margin-top: 10px !important;
}
/* Reduce space below tabs - Feb 18 */
.settings-tabs {
    margin-bottom: 6px !important;
    padding-bottom: 8px !important;
}
/* ALL Navigate Buttons Bright Green - Feb 18 */
#calculateRoute {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: white !important;
}
#calculateRoute:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}
#startNavigation,
.btn-nav,
.poi-card-btn.navigate,
.gem-add-route-btn.navigate-mode,
.quick-action-btn.navigate,
[class*="navigate"] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: white !important;
}
#startNavigation:hover,
.btn-nav:hover,
.poi-card-btn.navigate:hover,
.gem-add-route-btn.navigate-mode:hover,
.quick-action-btn.navigate:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}
/* Quick action menu navigate buttons */
.poi-action-card .poi-card-btn.navigate,
.quick-actions-menu .navigate,
.action-btn.navigate {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
}
/* Remove red bar above map in PWA - Feb 18 */
@media (display-mode: standalone) {
    html, body {
        background: #1a1a2e !important;
    }
    
    .map-container {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
}
/* Welcome screen respects safe area, map goes fullscreen - Feb 18 */
@media (display-mode: standalone) {
    .welcome-screen {
        padding-top: 0;
        background-color: #0a0a1a;
    }
    
    /* Map extends full screen under notch */
    .map-container,
    #map {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    /* Buttons stay below safe area */
    .map-controls {
        top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    }
    
    .quick-actions-bar {
        top: calc(15px + env(safe-area-inset-top, 0px)) !important;
    }
}
/* Force map into notch area - Feb 18 */
@media (max-width: 768px) and (display-mode: standalone) {
    .map-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #map {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}
/* POI Popup Action Buttons - Feb 18 */
.poi-popup-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.poi-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.poi-action-btn .material-icons {
    font-size: 16px;
}
.poi-action-btn.navigate {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white !important;
}
.poi-action-btn.navigate:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}
.poi-action-btn.add-stop {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white !important;
}
.poi-action-btn.add-stop:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.poi-action-btn.report {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
.poi-action-btn.report:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
/* Navigation UI - Facebook Blue instead of Red - Feb 19 */
.nav-instruction-panel {
    background: #1877F2 !important;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.3) !important;
}
.nav-next-stop-progress-bar {
    background: linear-gradient(90deg, #1877F2, #42A5F5) !important;
}
.direction-segment-header {
    background: #1877F2 !important;
}
.direction-segment-header.current-segment {
    background: #1877F2 !important;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.4) !important;
}
[data-theme="dark"] .direction-segment-header,
[data-theme="dark"] .direction-segment-header.current-segment {
    background: #1877F2 !important;
}
.segment-number {
    background: #1877F2 !important;
}
/* Restore nav-stop-btn red styles - Feb 19 */
.nav-stop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    background: #1877F2;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: white !important;
    transition: all 0.2s ease;
}
[data-theme="dark"] .nav-stop-btn {
    background: #1877F2;
    color: white !important;
}
.nav-stop-btn:hover {
    background: #c41530;
}
/* GPT Modal Header - Facebook Blue instead of Red - Feb 19 */
.gpt-modal-header {
    background: linear-gradient(135deg, #1877F2, #1565C0) !important;
}
.gpt-modal-body strong {
    color: #1877F2 !important;
}
/* Fix phantom POI card - ensure hidden by default during navigation - Feb 19 */
body:has(#navigationUI[style*="display: flex"]) .poi-action-card,
body:has(#navigationUI[style*="display:flex"]) .poi-action-card {
    transform: translateX(-50%) translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body:has(#navigationUI[style*="display: flex"]) .poi-action-card.show,
body:has(#navigationUI[style*="display:flex"]) .poi-action-card.show {
    transform: translateX(-50%) translateY(-50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Let's Go button - Green - Feb 19 */
#startNavAfterSummary {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: white !important;
}
#startNavAfterSummary:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}
/* Navigation Loading Overlay - Feb 19 */
.nav-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}
.nav-loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #1877F2;
    border-radius: 50%;
    animation: nav-spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes nav-spin {
    to { transform: rotate(360deg); }
}
.nav-loading-text {
    color: white !important;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.nav-loading-subtext {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-top: 8px;
}
/* Hide poi-sheet when GPT modal is active */
.gpt-summary-modal.active ~ .poi-sheet,
body:has(.gpt-summary-modal.active) .poi-sheet {
    display: none !important;
}
/* Hide poi-sheet when loading overlay is active */
body:has(.nav-loading-overlay.active) .poi-sheet {
    display: none !important;
}
/* Sports Venue Markers */
.sports-venue-marker-container {
    background: transparent !important;
    border: none !important;
}
.sports-venue-marker {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 2px solid #333;
    font-size: 18px;
    overflow: hidden;
}
.sports-venue-marker img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
/* Legend submenu for sports venues leagues */
.legend-group {
    display: flex;
    flex-direction: column;
}
.legend-parent {
    position: relative;
}
.legend-expand {
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.2s;
}
.legend-group.expanded .legend-expand {
    transform: rotate(180deg);
}
.legend-submenu {
    display: none;
    padding-left: 20px;
    flex-direction: column;
}
.legend-group.expanded .legend-submenu {
    display: flex;
}
.legend-child {
    font-size: 12px;
    padding: 4px 0;
}
.legend-child span {
    opacity: 0.9;
}
.legend-color.sports-venue {
    background: linear-gradient(135deg, #e74c3c, #3498db, #2ecc71, #f39c12);
    border: 1px solid #333;
}
/* Danger/Red button style for Set Destination */
.poi-action-btn.danger {
    background: #dc3545 !important;
    color: white !important;
}
.poi-action-btn.danger:hover {
    background: #c82333 !important;
}
/* Sports venue popup buttons side by side */
.sports-venue-popup .poi-popup-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
}
.sports-venue-popup .poi-action-btn {
    flex: 1;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
}
}
/* ============ Attraction Poll Modal ============ */
.poll-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}
.poll-modal-content {
    background: #1e1e2e;
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}
.poll-header {
    text-align: center;
    margin-bottom: 24px;
}
.poll-header h2 {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    color: #ffffff;
}
.poll-header p {
    margin: 0;
    color: #b0b0b0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.poll-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.poll-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #2a2a3e;
    border: 2px solid #444;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.poll-option:hover {
    background: #333348;
    border-color: #555;
}
.poll-option:has(input:checked) {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}
.poll-option input[type="checkbox"] {
    display: none;
}
.poll-icon {
    font-size: 1.5rem;
}
.poll-label {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 500;
}
.poll-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.poll-actions .btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    border-radius: 10px;
}
.poll-actions .btn-primary {
    background: #3b82f6;
    color: #ffffff;
    border: none;
}
.poll-actions .btn-primary:hover {
    background: #2563eb;
}
.poll-actions .btn-secondary {
    background: transparent;
    border: 1px solid #555;
    color: #b0b0b0;
}
.poll-actions .btn-secondary:hover {
    background: #2a2a3e;
    color: #ffffff;
}
@media (max-width: 500px) {
    .poll-options {
        grid-template-columns: 1fr;
    }
    .poll-modal-content {
        padding: 24px;
    }
}
/* Poll Sports Section */
.poll-section {
    margin-top: 16px;
    padding: 16px;
    background: #2a2a3e;
    border: 2px solid #444;
    border-radius: 12px;
}
.poll-section:has(#pollSportsVenues:checked) {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}
.poll-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
}
.poll-section-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}
.poll-leagues {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-left: 30px;
    opacity: 0.5;
    pointer-events: none;
}
.poll-section:has(#pollSportsVenues:checked) .poll-leagues {
    opacity: 1;
    pointer-events: auto;
}
.poll-league {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #fff;
    cursor: pointer;
}
.poll-league input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3b82f6;
}
@media (max-width: 500px) {
    .poll-leagues {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Park Logo Markers */
.park-logo-marker-container {
    background: transparent !important;
}
.park-logo-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease;
    background-color: transparent;
    padding: 2px;
}
.park-logo-marker img {
    display: block;
    max-height: 28px;
    max-width: 80px;
    width: auto;
}
.park-logo-marker:hover {
    transform: scale(1.25);
    z-index: 1000 !important;
}
.park-logo-marker.fallback {
    font-size: 20px;
    padding: 4px 6px;
    background-color: #fff3e0;
}
/* POI Popup Logo Banner */
.poi-logo-banner {
    background: white;
    border-radius: 8px 8px 0 0;
    margin: -10px -10px 10px -10px;
    padding: 15px;
    text-align: center;
    width: calc(100% + 20px);
    box-sizing: border-box;
}
.poi-logo-banner img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}
/* Lighthouse marker */
.lighthouse-marker-container {
    background: transparent !important;
    border: none !important;
}
.lighthouse-marker {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lighthouse-marker img {
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}
/* ============================================
   Legend Modal - Map Layers Popup
   ============================================ */
.legend-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}
.legend-modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}
.legend-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.legend-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.legend-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.legend-modal-close:hover {
    color: var(--text-primary);
}
.legend-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.legend-section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.legend-modal .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.legend-modal .legend-item:hover {
    background: var(--bg-tertiary);
}
.legend-modal .legend-item input[type="checkbox"] {
    display: none;
}
.legend-modal .legend-item input[type="checkbox"]:checked ~ .legend-emoji {
    transform: scale(1.1);
}
.legend-modal .legend-item input[type="checkbox"]:checked ~ span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}
.legend-modal .legend-item input[type="checkbox"]:not(:checked) ~ .legend-emoji {
    opacity: 0.4;
    filter: grayscale(80%);
}
.legend-modal .legend-item input[type="checkbox"]:not(:checked) ~ span:last-child {
    color: var(--text-tertiary);
}
.legend-emoji {
    font-size: 20px;
    line-height: 1;
    transition: all 0.2s;
}
.legend-modal .legend-item span:last-child {
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
}
/* Mobile responsive */
@media (max-width: 480px) {
    .legend-modal-content {
        max-height: 90vh;
        border-radius: 12px;
    }
    .legend-grid {
        grid-template-columns: 1fr;
    }
    .legend-modal .legend-item {
        padding: 12px;
    }
    .legend-emoji {
        font-size: 22px;
    }
}
/* Drive-in popup - buttons side by side */
.poi-popup .poi-popup-actions {
    flex-wrap: nowrap;
}
.poi-popup .poi-action-btn.navigate,
.poi-popup .poi-action-btn.set-dest {
    flex: 1;
    justify-content: center;
}
/* Cave marker */
.cave-marker-container {
    background: transparent !important;
    border: none !important;
}
.cave-marker {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cave-marker img {
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}
/* Cave popup styles */
.cave-type, .cave-location, .cave-phone {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0;
    display: flex;
    align-items: center;
}
.cave-type .material-icons,
.cave-location .material-icons { color: #e31937 !important; }
.cave-type .material-icons,
.cave-phone .material-icons {
    color: var(--color-cave);
}
.cave-features {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cave-feature-tag {
    background: rgba(139, 69, 19, 0.15);
    color: var(--color-cave);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}
.cave-website-btn, .cave-website-btn:link, .cave-website-btn:visited, .cave-website-btn:active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1877F2;
    color: white !important;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    margin: 12px 0 8px;
    transition: background 0.2s;
}
.cave-website-btn:hover {
    background: #145dbf;
    color: white !important;
}
.cave-website-btn .material-icons {
    font-size: 18px;
}
/* Legend img icons (like caves) - gray when unchecked */
.legend-modal .legend-item input[type="checkbox"]:not(:checked) ~ img {
    opacity: 0.4;
    filter: grayscale(100%);
}
.legend-modal .legend-item input[type="checkbox"]:checked ~ img {
    opacity: 1;
    filter: none;
}
/* Cave info text blue color */
.cave-type .material-icons,
.cave-location .material-icons { color: #e31937 !important; }
.cave-type .material-icons,
.cave-phone .material-icons {
    color: #1877F2 !important;
}
.cave-feature-tag {
    background: rgba(24, 119, 242, 0.15) !important;
    color: #1877F2 !important;
}
/* Cave phone link styling */
a.cave-phone {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    margin: 4px 0;
    transition: color 0.2s;
}
a.cave-phone:hover {
    color: #22c55e;
}
/* Ski Resort Styles */
.ski-stats {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}
.ski-stat {
    text-align: center;
}
.ski-stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #0369a1;
}
.ski-stat-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}
.ski-location {
    color: #64748b;
    font-size: 13px;
    margin: 8px 0;
}
.ski-website-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #0ea5e9;
    color: white !important;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 10px;
    font-weight: 500;
}
.ski-website-btn:hover {
    background: #0284c7;
    color: white !important;
}
.ski-website-btn .material-icons {
    font-size: 18px;
    color: white !important;
}
/* Roadside Attraction Popup Styles */
.roadside-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}
.roadside-type {
    background: rgba(255, 152, 0, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    color: #ffb74d;
}
.roadside-funfact {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.roadside-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.roadside-admission, .roadside-besttime {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
}
.roadside-admission strong, .roadside-besttime strong {
    color: #333;
    margin-right: 2px;
}
.roadside-admission .material-icons {
    color: #4caf50;
    font-size: 16px;
}
.roadside-besttime .material-icons {
    color: #2196f3;
    font-size: 16px;
}
.roadside-website-btn, .roadside-website-btn:link, .roadside-website-btn:visited, .roadside-website-btn:active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1877F2;
    color: white !important;
    color: white !important;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 10px;
    font-weight: 500;
}
.roadside-website-btn:hover {
    background: #145dbf;
    color: white !important;
}
.roadside-website-btn .material-icons {
    font-size: 18px;
    color: white !important;
}
/* Roadside attraction additional info styles */
/* Roadside Attraction Popup Styles */
.roadside-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}
.roadside-location .material-icons {
    color: #e53935;
    font-size: 18px;
}
.roadside-description {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin: 10px 0;
}
/* ===========================================
}
/* Animation for cluster expansion */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
/* ===========================================
/* ===========================================
   MARKER CLUSTER - CLEAN CIRCULAR DESIGN
   =========================================== */
.marker-cluster-custom { background: transparent !important; }
.cluster-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #3b82f6, #1e40af);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}
.cluster-circle:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 20px rgba(59,130,246,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.cluster-count {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    line-height: 1;
}
.cluster-ring {
    font-size: 9px;
    line-height: 1;
    opacity: 0.9;
    margin-top: 1px;
}
.leaflet-cluster-spider-leg {
    stroke: rgba(59,130,246,0.5);
    stroke-width: 2;
}
/* Updated cluster styles with badges */
.cluster-pod {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cluster-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #4f8cff, #2563eb);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(37,99,235,0.5), 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cluster-inner:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37,99,235,0.6), 0 3px 6px rgba(0,0,0,0.3);
}
.cluster-num {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.cluster-badges {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.cluster-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    font-size: 12px;
    margin-left: -11px;
    margin-top: -11px;
}
/* Cluster bubble - icons contained inside */
.cluster-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #4facfe, #2563eb);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 3px 12px rgba(37,99,235,0.45);
    cursor: pointer;
    transition: transform 0.15s ease;
    padding: 4px;
    box-sizing: border-box;
}
.cluster-bubble:hover {
    transform: scale(1.1);
}
.cluster-bubble .cluster-count {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    line-height: 1.1;
}
.cluster-bubble .cluster-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1px;
    max-width: 90%;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}
/* Compact cluster design v2 */
.marker-cluster-custom .cluster-bubble {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    overflow: hidden;
}
.marker-cluster-custom .cluster-bubble:hover {
    transform: scale(1.05);
}
.marker-cluster-custom .cluster-count {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.marker-cluster-custom .cluster-icons {
    font-size: 9px;
    line-height: 1;
    margin-top: 2px;
    max-width: 42px;
    overflow: hidden;
    white-space: nowrap;
}
.marker-cluster-custom .cluster-more {
    font-size: 7px;
    color: rgba(255,255,255,0.8);
    margin-left: 1px;
}
/* Dual cluster styles - destinations vs utilities */
.cluster-destination {    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;}
.cluster-utility {    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;}
/* Cluster with photo preview */
.cluster-preview {
    position: relative;
    border-radius: 12px;
    border: 3px solid #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
    overflow: hidden;
    cursor: pointer;
}
.cluster-preview:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
.cluster-preview.cluster-destination {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.cluster-preview.cluster-utility {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.cluster-photos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cluster-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: clusterFade linear infinite;
}
.cluster-photo:first-child {
    opacity: 1;
}
/* Simple cycling with crossfade */
.cluster-cycle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: clusterFade linear infinite;
}
.cluster-cycle:first-child { opacity: 1; }
@keyframes clusterFade {
    0% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 1; }
}
.cluster-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    height: 50%;
    border-radius: 0 0 12px 12px;
}
.cluster-preview .cluster-count {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    line-height: 1;
}
/* Single marker preview - marker icon instead of count */
.cluster-overlay.single-marker {
    justify-content: center;
    padding-bottom: 8px;
}
.marker-icon-embed {
    transform: scale(0.9);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
/* Static photo for single marker (no animation) */
.cluster-photo-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.cluster-preview .cluster-icons {
    font-size: 11px;
    line-height: 1;
    margin-top: 2px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.cluster-preview .cluster-more {
    font-size: 8px;
    color: rgba(255,255,255,0.9);
}
/* Cluster wrapper for border badges */
.cluster-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative;
    margin: 10px; /* Center within larger icon size */
}
.marker-cluster-custom {
    overflow: visible !important;
}
.cluster-badge {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}
/* Preview image floating above marker (close together) */
.marker-preview-above {
    background: transparent !important;
    overflow: visible !important;
}
.preview-above-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.preview-image {
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    margin-bottom: 2px;
}
.original-marker-below {
    display: flex;
    justify-content: center;
}
/* Legacy styles */
.marker-preview-custom {
    background: transparent !important;
    overflow: visible !important;
}
.marker-with-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.preview-box {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    margin-bottom: 2px;
}
/* Container for the original marker icon */
.original-marker {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Ensure embedded marker icons display correctly */
.original-marker .marker-icon,
.original-marker .leaflet-marker-icon {
    position: relative !important;
    margin: 0 !important;
}
/* ============================================
   Mobile Popup Enhancements
   ============================================ */
@media (max-width: 768px) {
    /* Let Leaflet position the popup naturally above marker */
    /* Just enhance sizing and touch targets */
    
    .leaflet-popup-content-wrapper {
        max-width: 85vw !important;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .leaflet-popup-content {
        margin: 16px 20px;
        font-size: 15px;
        max-height: 50vh;
        overflow-y: auto;
    }
    .poi-popup .poi-name {
        font-size: 18px;
    }
    .poi-popup .poi-type,
    .poi-popup .poi-chain {
        font-size: 14px;
    }
    .poi-popup .poi-address,
    .poi-popup .poi-hours,
    .poi-popup .poi-amenities {
        font-size: 14px;
    }
    /* Larger close button for touch */
    .leaflet-popup-close-button {
        width: 28px !important;
        height: 28px !important;
        font-size: 20px !important;
        padding: 4px !important;
    }
}
/* PWA standalone mode */
@media (max-width: 768px) and (display-mode: standalone) {
    .leaflet-popup-content-wrapper {
        max-width: 88vw !important;
    }
    .leaflet-popup-content {
        margin: 18px 22px;
        font-size: 16px;
    }
    .poi-popup .poi-name {
        font-size: 20px;
        margin-bottom: 6px;
    }
}
}
/* ============================================
   Cluster Category Badges (beneath cluster)
   ============================================ */
.cluster-badges-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    height: 26px;
    overflow: visible;
}
/* Override old absolute positioning - badges in row must be static */
.cluster-badges-row .cluster-badge {
    position: static !important;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin: 0 !important;
    flex-shrink: 0;
}
/* Accordion animation for badges - groups cycle with staggered delays */
.cluster-badges-row .badge-group {
    display: flex;
    gap: 8px;
    opacity: 0;
    animation: badgeAccordion var(--badge-duration, 6s) linear infinite;
}
/* Keyframes: visible for first portion of cycle, then hidden */
@keyframes badgeAccordion {
    0% { opacity: 0; }
    2% { opacity: 1; }
    30% { opacity: 1; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}
/* ============================================
    animation-play-state: running;
}
.badges-track .cluster-badge {
    position: static !important;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
/* Invisible navigation zones */
.badge-nav {
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}
.badge-nav-left { left: -10px; }
.badge-nav-right { right: -10px; }
/* Pause animation on hover/touch */
.cluster-badges-carousel:hover .badges-track,
.cluster-badges-carousel.paused .badges-track {
    animation-play-state: paused;
}
/* Sliding keyframes - moves left by one badge width (26px = badge + gap) per step */
@keyframes badgeSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-26px * var(--slide-count))); }
}
/* ============================================
}
/* ============================================
   Cluster Badge Sliding Carousel - FIXED v2
   ============================================ */
.cluster-badges-carousel {
    position: relative !important;
    width: 74px !important; /* Exactly 3 badges (22px × 3) + 2 gaps (4px × 2) */
    height: 24px !important;
    margin: 4px auto 0 !important;
    overflow: hidden !important;
    display: block !important;
}
.badges-track {
    display: flex !important;
    gap: 8px;
    position: absolute;
    left: 0;
    top: 0;
    animation: badgeStep var(--slide-duration, 8s) steps(var(--slide-count, 4), end) infinite;
    animation-play-state: running;
}
.badges-track .cluster-badge {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    background: #fff;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
/* Stepped keyframes - jumps by one badge width (26px) per step */
@keyframes badgeStep {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-26px * var(--slide-count))); }
}
/* Pause animation on hover/touch */
.cluster-badges-carousel:hover .badges-track,
.cluster-badges-carousel.paused .badges-track {
    animation-play-state: paused;
}
/* Badge Carousel - Clean Implementation */
.cbcar {
    width: 74px;
    height: 24px;
    overflow: hidden;
    margin: 4px auto 0;
    position: relative;
}
.cbtrk {
    display: flex;
    gap: 8px;
    position: absolute;
    left: 0;
    top: 0;
    animation: cbslide var(--d, 8s) steps(var(--n, 4), end) infinite;
}
.cb {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@keyframes cbslide {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-26px * var(--n))); }
}
/* Prevent badge overlap */
.cbcar, .cluster-badges-row {
    display: block !important;
}
.cb, .cluster-badges-row .cluster-badge {
    position: static !important;
    flex-shrink: 0 !important;
}
.cluster-badge-row{display:flex!important;justify-content:center!important;align-items:center!important;gap:4px;margin-top:4px;width:100%}.cluster-wrapper{display:flex!important;flex-direction:column!important;align-items:center!important}
.cluster-badge-row{display:flex!important;justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important;gap:2px;margin-top:4px;white-space:nowrap}
.cluster-badge-row{display:flex!important;justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important;gap:2px;margin-top:4px;white-space:nowrap}
/* Center badges under cluster - final fix */
.cluster-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 84px !important;
}
.cluster-badge-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 84px !important;
    margin-top: 4px !important;
}
/* Allow clicks to pass through badges to markers */
.cluster-badge-row {
    pointer-events: none !important;
}
/* Badge smooth scroll with edge fade for clusters with 3+ unique icons */
.badge-scroller {
    position: relative;
    width: 84px;
    overflow: hidden;
    /* Edge fade using CSS mask */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}
.badge-scroller .badge-track {
    display: flex;
    animation: badgeScroll 12s linear infinite;
    will-change: transform;
}
@keyframes badgeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Pause on hover */
.cluster-wrapper:hover .badge-track {
    animation-play-state: paused;
}
/* Cluster preview with photos */
.cluster-preview.has-photos {
    background: #333;
}
.cluster-preview.has-photos .cluster-photos {
    z-index: 1;
}
.cluster-preview.has-photos .cluster-overlay {
    z-index: 2;
}
}
/* Theme Park popup styles */
.park-stats {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
    padding: 10px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
}
.park-stat {
    text-align: center;
}
.park-stat-value {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
.park-stat-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}
.park-thrill-level {
    background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}
.park-amenities {
    font-size: 12px;
    color: #60a5fa;
    margin: 8px 0;
}
.park-price {
    font-size: 13px;
    color: #4ade80;
    margin: 8px 0;
}
/* ========================================
   THEME PARK COLLAPSIBLE SECTIONS
   ======================================== */
/* Collapsible Container */
.park-collapsible {
    margin: 10px 0;
}
.park-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
}
.park-collapsible-header:hover {
    background: #f5f5f5;
    border-color: #ccc;
}
.park-collapsible-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #333;
}
.park-collapsible-count {
    background: #e0e0e0;
    color: #333;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.park-collapsible-arrow {
    transition: transform 0.3s ease;
    color: #666;
}
.park-collapsible-header.open .park-collapsible-arrow {
    transition: transform 0.3s ease;
    color: #666;
    font-weight: 500;
    font-size: 13px;
}
.park-ride-type {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.park-ride-badge {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.park-ride-badge.wood {
    background: #8B4513;
    color: #fff;
}
.park-ride-badge.steel {
    background: #708090;
    color: #fff;
}
.park-ride-badge.style {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.park-ride-badge.water {
    background: #0077b6;
    color: #fff;
}
.park-ride-badge.slide {
    background: #00b4d8;
    color: #fff;
}
.park-ride-badge.pool {
    background: #48cae4;
    color: #000;
/* Roller Coaster List Styles */
.park-ride-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px 0;
}
.park-ride-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    margin: 5px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
    gap: 10px;
}
.park-ride-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.park-ride-name {
    font-weight: 500;
    color: #fff;
    flex: 1;
    font-size: 14px;
}
/* YouTube POV icon styles */
.park-ride-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.yt-pov-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.yt-pov-icon {
    width: 20px;
    height: 14px;
    transition: transform 0.2s ease;
}
.yt-pov-link:hover .yt-pov-icon {
    transform: scale(1.15);
}
/* Small inline YouTube icon for coasters */
.coaster-youtube-link {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}
.coaster-youtube-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.coaster-youtube-link:hover .coaster-youtube-icon {
    transform: scale(1.2);
}
.park-ride-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.park-ride-pov-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.park-ride-pov-btn:hover {
    background: linear-gradient(135deg, #ff3333 0%, #ff0000 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
}
.park-ride-pov-btn img {
    width: 18px;
    height: 18px;
}
/* YouTube Modal Styles */
.youtube-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.youtube-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.youtube-modal {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #1a1a2e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.youtube-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.youtube-modal-title {
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.youtube-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.youtube-modal-close:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: scale(1.1);
}
.youtube-modal-body {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.youtube-modal-body iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Mobile responsive */
@media (max-width: 768px) {
    .park-ride-item {
        flex-wrap: wrap;
    }
    
    .park-ride-name {
        flex-basis: 100%;
        margin-bottom: 8px;
    }
    
    .park-ride-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .youtube-modal {
        width: 95%;
        margin: 10px;
    }
    
    .youtube-modal-header {
        padding: 12px 15px;
    }
    
    .youtube-modal-title {
        font-size: 14px;
    }
}
}
/* Collapsible content - hidden by default */
.park-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.park-collapsible-content.open {
    max-height: 500px;
    overflow-y: auto;
}
.park-collapsible-content::-webkit-scrollbar {
    width: 6px;
}
.park-collapsible-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
.park-collapsible-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}
.park-highlights {
    margin: 10px 0;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 3px solid #fff;
}
.highlights-label {
    display: block;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.highlights-list {
    margin: 0;
    padding-left: 20px;
    color: #ccc;
}
.highlights-list li {
    margin: 5px 0;
    font-size: 13px;
}
.park-ticket-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
    padding: 10px;
    background: linear-gradient(135deg, rgba(0, 128, 0, 0.2) 0%, rgba(0, 100, 0, 0.1) 100%);
    border-radius: 10px;
}
.ticket-price, .season-pass {
    color: #90EE90;
    font-weight: 600;
    font-size: 14px;
}
.park-schedule-link {
    text-align: center;
    margin-top: 10px;
}
.park-schedule-link a {
    color: #87CEEB;
    text-decoration: none;
    font-size: 13px;
}
.park-schedule-link a:hover {
    color: #B0E0E6;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .park-ride-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .park-ride-type {
        justify-content: flex-start;
    }
    .park-ticket-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}
/* Enhanced Coaster Display Styles */
.park-ride-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}
.park-ride-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.park-ride-stat {
    display: flex;
    align-items: center;
    gap: 3px;
}
.park-ride-stat-icon {
    font-size: 9px;
    opacity: 0.7;
}
.park-ride-badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
.park-ride-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 3px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
    gap: 10px;
}
.park-ride-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.park-ride-name {
    font-weight: 500;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.park-ride-badge {
    font-size: 9px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.park-ride-badge.steel {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
}
.park-ride-badge.wood {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    color: #fff;
}
.park-ride-badge.style {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.park-ride-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 5px 0;
}
.park-collapsible {
    margin: 8px 0;
}
.park-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.park-collapsible-header:hover {
    background: rgba(255, 255, 255, 0.12);
}
.park-collapsible-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #fff;
    font-size: 13px;
}
.park-collapsible-count {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.park-collapsible-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    transition: transform 0.3s ease;
}
.park-collapsible-header.open .park-collapsible-arrow {
    transform: rotate(180deg);
}
.park-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.park-collapsible-content.open {
    max-height: 350px;
    overflow-y: auto;
}
/* ===== COASTER LIST - LIGHT THEME FIX ===== */
.park-ride-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 1px;
}
.park-ride-stats {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: #888 !important;
}
.park-ride-stat {
    display: flex;
    align-items: center;
    gap: 2px;
}
.park-ride-stat-icon {
    font-size: 9px;
}
.park-ride-badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
.park-ride-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin: 2px 0;
    background: #f5f5f5 !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    gap: 8px;
}
.park-ride-item:hover {
    background: #eee !important;
}
.park-ride-name {
    font-weight: 600;
    color: #333 !important;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.park-ride-badge {
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.park-ride-badge.steel {
    background: #64748b !important;
    color: #fff !important;
}
.park-ride-badge.wood {
    background: #92400e !important;
    color: #fff !important;
}
.park-ride-badge.style {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd;
}
.park-ride-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}
.park-collapsible {
    margin: 6px 0;
}
.park-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #f0f0f0 !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.park-collapsible-header:hover {
    background: #e5e5e5 !important;
}
.park-collapsible-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #333 !important;
    font-size: 12px;
}
.park-collapsible-count {
    background: #e31937 !important;
    color: #fff !important;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}
.park-collapsible-arrow {
    color: #666 !important;
    font-size: 10px;
    transition: transform 0.3s ease;
}
.park-collapsible-header.open .park-collapsible-arrow {
    transform: rotate(180deg);
}
.park-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.park-collapsible-content.open {
    max-height: 280px;
    overflow-y: auto;
}
.park-ride-type {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
/* Coaster manufacturer and name line */
.park-ride-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
}
.park-ride-mfr {
    font-size: 9px;
    color: #888 !important;
    background: #e5e5e5;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
}
/* ===== CLEAN COASTER LIST STYLES ===== */
.park-collapsible {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.park-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    cursor: pointer;
    transition: all 0.2s ease;
}
.park-collapsible-header:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}
.park-collapsible-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #333 !important;
    font-size: 13px;
}
.park-collapsible-count {
    background: #e31937 !important;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.park-collapsible-arrow {
    color: #666 !important;
    font-size: 10px;
    transition: transform 0.3s ease;
}
.park-collapsible-header.open .park-collapsible-arrow {
    transform: rotate(180deg);
}
.park-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
}
.park-collapsible-content.open {
    max-height: 300px;
    overflow-y: auto;
}
.park-ride-list {
    padding: 4px;
}
.park-ride-item {
    padding: 8px 10px;
    margin: 2px 0;
    background: #fafafa !important;
    border-radius: 6px;
    border-left: 3px solid #e31937;
    transition: all 0.2s ease;
}
.park-ride-item:hover {
    background: #f0f0f0 !important;
    border-left-color: #b91c1c;
}
.park-ride-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.park-ride-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.park-ride-name {
    font-weight: 600;
    color: #1a1a1a !important;
    font-size: 13px;
    flex: 1;
}
.park-ride-badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.park-ride-badge {
    font-size: 8px;
    padding: 4px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.park-ride-badge.steel {
    background: #475569 !important;
    color: #fff !important;
}
.park-ride-badge.wood {
    background: #92400e !important;
    color: #fff !important;
}
.park-ride-badge.style {
    background: #dbeafe !important;
    color: #1e40af !important;
}
.park-ride-details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.park-ride-mfr {
    font-size: 10px;
    color: #666 !important;
    background: #e5e7eb;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
}
.park-ride-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.coaster-stat {
    font-size: 10px;
    color: #555 !important;
    padding: 1px 3px;
    border-radius: 3px;
    transition: background 0.2s;
}
.coaster-stat:hover {
    background: #e5e7eb;
}
/* Scrollbar styling */
.park-collapsible-content::-webkit-scrollbar {
    width: 6px;
}
.park-collapsible-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}
.park-collapsible-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.park-collapsible-content::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}
/* ===== LABELED COASTER STATS ===== */
.park-ride-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.coaster-stat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: #555 !important;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 4px;
}
.stat-icon {
    font-size: 10px;
}
.stat-val {
    font-weight: 600;
    color: #333 !important;
}
.stat-lbl {
    color: #888 !important;
    font-size: 9px;
}
.park-ride-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.park-ride-name {
    font-weight: 600;
    color: #1a1a1a !important;
    font-size: 13px;
}
.park-ride-mfr {
    font-size: 9px;
    color: #666 !important;
    background: #e0e0e0;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
}
.park-ride-badges {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
/* Theme Park Header Styling */
.thrill-badge {
    display: inline-block;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
    vertical-align: middle;
}
.thrill-badge.family {
    background: #4CAF50;
    color: white;
}
.thrill-badge.moderate {
    background: #FF9800;
    color: white;
}
.thrill-badge.extreme {
    background: #f44336;
    color: white;
}
.poi-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666 !important;
    margin: 4px 0 8px 0;
}
.poi-location .material-icons {
    font-size: 16px;
    color: #e94560;
}
/* Get Tickets Button */
.park-tickets-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #e94560, #c73e54);
    color: white !important;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.3);
}
.park-tickets-btn:hover {
    background: linear-gradient(135deg, #d63d55, #b33548);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
}
.park-tickets-btn .material-icons {
    font-size: 20px;
}
/* Theme Park Header - Updated Styling */
.poi-location-small {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #666 !important;
    margin-bottom: 2px;
}
.poi-location-small .material-icons {
    font-size: 14px;
    color: #e94560;
}
.thrill-badge {
    display: inline-block;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
    vertical-align: middle;
}
.thrill-badge.family {
    background: #4CAF50;
    color: white;
}
.thrill-badge.moderate {
    background: #FF9800;
    color: white;
}
.thrill-badge.extreme {
    background: #f44336;
    color: white;
}
.park-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px 0;
}
.park-highlight-tag {
    display: inline-block;
    background: #e8f4fd;
    color: #1877F2;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}
/* Facebook Blue Buttons */
.park-tickets-btn,
.wait-times-btn,
.schedule-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1877F2 !important;
    color: white !important;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-top: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.3);
}
.park-tickets-btn:hover,
.wait-times-btn:hover,
.schedule-btn:hover {
    background: #166FE5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.4);
}
.park-tickets-btn .material-icons,
.wait-times-btn .material-icons,
.schedule-btn .material-icons {
    font-size: 20px;
}
/* Location inline with park name */
.poi-name-location {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #666 !important;
    margin-left: 10px;
    vertical-align: middle;
}
.poi-name-location .material-icons {
    font-size: 14px;
    color: #e94560;
}
/* Dual ticket buttons container */
.park-ticket-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.park-ticket-buttons .park-tickets-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
}
.park-ticket-buttons .park-tickets-btn.season {
    background: #4267B2 !important;
}
.park-ticket-buttons .park-tickets-btn.season:hover {
    background: #365899 !important;
}
/* Header row with name and location on opposite sides */
.poi-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}
.poi-header-row .poi-name {
    margin: 0;
    flex-shrink: 0;
}
.poi-header-row .poi-name-location {
    margin-left: auto;
}
/* Expandable ticket container */
.park-ticket-container {
    position: relative;
}
.park-ticket-container .park-tickets-btn {
    width: 100%;
    border: none;
    cursor: pointer;
}
.park-ticket-options {
    display: none;
    gap: 8px;
    margin-top: 8px;
}
.park-ticket-container.expanded .park-ticket-options {
    display: flex;
}
.park-ticket-container.expanded > .park-tickets-btn {
    display: none;
}
.park-ticket-options .park-tickets-btn {
    flex: 1;
}
/* Location line (replaces Theme Park label) */
.poi-location-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666 !important;
    margin: 2px 0 6px 0;
}
.poi-location-line .material-icons {
    font-size: 16px;
    color: #e94560;
}
/* Ticket close button */
.ticket-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #666;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ticket-close-btn:hover {
    background: #444;
}
.ticket-close-btn .material-icons {
    font-size: 16px;
}
/* Ticket options container positioning */
.park-ticket-options {
    position: relative;
}
/* Fix: Hide Get Tickets when expanded */
.park-ticket-container.expanded > .park-tickets-btn {
    display: none !important;
}
/* Smaller location text */
.poi-location-line {
    font-size: 12px !important;
}
/* Left align highlight badges */
.park-highlights {
    justify-content: flex-start !important;
}
.park-highlight-tag {
    text-align: left;
}
/* Force left alignment for highlight badges */
.park-highlights {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 6px 0 10px 0 !important;
}
.park-highlight-tag {
    display: inline-block !important;
    text-align: left !important;
    margin: 0 !important;
}
/* Fix badge alignment - start at left edge */
.park-highlights {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.park-highlight-tag {
    margin-left: 0 !important;
    padding-left: 8px !important;
}
/* Force complete left alignment for badges */
.poi-popup .park-highlights {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 6px 0 10px 0 !important;
}
.poi-popup .park-highlight-tag {
    margin: 0 !important;
}
/* Polished dropdown arrow with Material Icons */
.park-collapsible-arrow {
    font-size: 24px !important;
    transition: transform 0.3s ease !important;
    color: #666 !important;
}
.park-collapsible.open .park-collapsible-arrow {
    transform: rotate(180deg) !important;
}
/* Wider theme park popups */
.leaflet-popup-content {
    min-width: 320px !important;
}
/* Don't truncate coaster names aggressively */
.park-ride-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    word-wrap: break-word !important;
}
/* Adjust ride header for more space */
.park-ride-header {
    flex-wrap: wrap !important;
    gap: 4px !important;
}
/* Coaster image icon */
.coaster-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #e8f4fd;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    flex-shrink: 0;
}
.coaster-image-btn .material-icons {
    font-size: 14px;
    color: #1877F2;
}
.coaster-image-btn:hover {
    background: #d0e8fa;
}
/* Coaster Image Modal */
.coaster-image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.coaster-image-modal {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.coaster-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
}
.coaster-modal-close:hover {
    background: rgba(255, 0, 0, 0.6);
}
.coaster-modal-title {
    padding: 15px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    color: white;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.coaster-modal-image {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}
/* SBNO (Standing But Not Operating) badge */
.park-ride-badge.sbno {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5;
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .park-ride-badge.sbno {
        background: rgba(239, 68, 68, 0.25) !important;
        color: #fca5a5 !important;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }
}
/* ============================================
   Theme Park Popup Enhancements
   ============================================ */
/* Weather Display */
.park-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color, #eee);
}
.park-weather .weather-icon {
    font-size: 20px;
}
.park-weather .weather-temp {
    font-weight: 600;
    color: var(--text-primary, #333);
}
.park-weather .weather-desc {
    color: var(--text-secondary, #666);
}
.weather-unavailable {
    color: var(--text-muted, #999);
    font-style: italic;
    font-size: 12px;
}
/* Crowd Level */
.park-crowd-level {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.crowd-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}
.avg-wait {
    font-size: 12px;
    color: var(--text-secondary, #666);
}
/* Wait Times Section */
.park-wait-times-section {
    margin: 8px 0;
}
.wait-times-btn {
    border: none !important;
    width: 100%;
    cursor: pointer;
}
.wait-times-btn:hover {
    background: #2563eb !important;
    background: var(--bg-secondary, #eee);
}
.wait-times-btn.active {
    background: var(--tesla-red, #e31937);
    color: white;
    border-color: var(--tesla-red, #e31937);
}
.wait-times-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}
.wait-times-content {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-tertiary, #f9f9f9);
    border-radius: 8px;
    border: 1px solid var(--border-color, #eee);
}
.wait-times-list {
    max-height: 200px;
    overflow-y: auto;
}
.wait-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color, #eee);
}
.wait-time-row:last-child {
    border-bottom: none;
}
.ride-name {
    font-size: 12px;
    color: var(--text-primary, #333);
    flex: 1;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wait-minutes {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.wait-low {
    background: #dcfce7;
    color: #166534;
}
.wait-moderate {
    background: #fef9c3;
    color: #854d0e;
}
.wait-high {
    background: #fed7aa;
    color: #9a3412;
}
.wait-extreme {
    background: #fecaca;
    color: #991b1b;
}
.wait-times-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #eee);
    font-size: 10px;
    color: var(--text-muted, #999);
}
.wait-times-footer a {
    color: var(--text-secondary, #666);
}
.wait-times-unavailable,
.wait-times-error {
    color: var(--text-secondary, #666);
    font-size: 12px;
    text-align: center;
    padding: 12px;
}
/* Thrill Rating Badges */
.park-ride-badge.thrill-1 {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd;
}
.park-ride-badge.thrill-2 {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac;
}
.park-ride-badge.thrill-3 {
    background: #fef9c3 !important;
    color: #854d0e !important;
    border: 1px solid #fde047;
}
.park-ride-badge.thrill-4 {
    background: #fed7aa !important;
    color: #9a3412 !important;
    border: 1px solid #fdba74;
}
.park-ride-badge.thrill-5 {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Loading Spinner (small) */
.loading-spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: var(--tesla-red, #e31937);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Compact weather display for theme parks */
.poi-popup .park-weather {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
    margin: 0;
    padding: 2px 0;
}
.poi-popup .park-weather .weather-icon {
    font-size: 14px;
}
.poi-popup .park-weather .weather-temp {
    font-weight: 600;
    color: #333;
}
.poi-popup .park-weather .weather-desc {
    color: #888;
    font-size: 11px;
}
/* Location + Weather Row */
.location-weather-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 8px 0;
}
.location-weather-row .poi-location-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
    margin: 0;
}
.location-weather-row .park-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
    float: none;
    margin: 0;
}
.location-weather-row .park-weather,
.location-weather-row .park-weather * {
    text-decoration: none !important;
}
/* Remove underline from weather */
.location-weather-row .park-weather,
.location-weather-row .park-weather * {
    text-decoration: none !important;
}
/* Force remove all underlines from weather */
.park-weather,
.park-weather *,
.weather-icon,
.weather-temp,
.weather-desc {
    text-decoration: none !important;
    border-bottom: none !important;
}
/* Crowd level above wait times button */
.park-wait-times-section .park-crowd-level {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
}
.park-wait-times-section .crowd-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.park-wait-times-section .avg-wait {
    font-size: 13px;
    color: #555;
}
/* Crowd level label */
.park-wait-times-section .crowd-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}
/* Wait time badge */
.park-wait-times-section .wait-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}
.park-wait-times-section .wait-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #3b82f6;
    color: white;
}
/* Polished crowd level and wait time display */
.poi-popup .park-crowd-level {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 10px 0;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.poi-popup .park-crowd-level .crowd-label,
.poi-popup .park-crowd-level .wait-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.poi-popup .park-crowd-level .crowd-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.poi-popup .park-crowd-level .wait-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.poi-popup .park-crowd-level .crowd-group,
.poi-popup .park-crowd-level .wait-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Premium crowd level stats row */
.park-wait-times-section .park-crowd-level {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.park-crowd-level .crowd-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
}
.park-crowd-level .crowd-icon {
    font-size: 24px;
    color: #94a3b8;
}
.park-crowd-level .stat-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.park-crowd-level .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.park-crowd-level .stat-label {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.park-crowd-level .stat-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
}
/* Premium park highlights */
.poi-popup .park-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 8px 0 12px 0 !important;
    padding: 0 !important;
}
.poi-popup .park-highlight-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    color: #0369a1 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}
.poi-popup .park-highlight-tag::before {
    content: '✦';
    font-size: 10px;
    color: #0ea5e9;
}
/* Clean centered horizontal highlight pills */
.poi-popup .park-highlights {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 10px 0 !important;
    padding: 0 !important;
}
.poi-popup .park-highlight-tag {
    display: inline-block !important;
    padding: 5px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.poi-popup .park-highlight-tag::before {
    content: none !important;
}
/* Highlight overlay on park image */
.poi-logo-banner {
    position: relative;
}
.highlight-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 20px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    max-width: 70%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: highlightFadeIn 0.5s ease;
}
.highlight-overlay .material-icons {
    font-size: 14px;
    color: #fbbf24;
}
.highlight-overlay .highlight-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes highlightFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Move highlight to top right, within image */
.highlight-overlay {
    bottom: auto !important;
    top: 8px !important;
    right: 8px !important;
    max-width: 60% !important;
}
/* Move highlight to top left */
.highlight-overlay {
    right: auto !important;
    left: 8px !important;
}
/* Don't truncate highlight text */
.highlight-overlay {
    max-width: 90% !important;
}
.highlight-overlay .highlight-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}
/* Capitalize highlight text */
.highlight-overlay .highlight-text {
    text-transform: capitalize !important;
}
/* Premium rollercoaster dropdown matching crowd level style */
.poi-popup .park-collapsible {
    margin: 10px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.poi-popup .park-collapsible-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: none !important;
    cursor: pointer !important;
}
.poi-popup .park-collapsible-header:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}
.poi-popup .park-collapsible-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}
.poi-popup .park-collapsible-title .material-icons {
    font-size: 20px !important;
    color: #64748b !important;
}
.poi-popup .park-collapsible-count {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.poi-popup .park-collapsible-arrow {
    color: #94a3b8 !important;
    transition: transform 0.3s ease !important;
}
/* Redesigned coaster cards */
.coaster-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.coaster-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.coaster-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    flex-wrap: wrap;
}
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    flex-shrink: 0;
}
.coaster-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.coaster-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.coaster-badge.type-steel { background: #e0f2fe; color: #0369a1; }
.coaster-badge.type-wood { background: #fef3c7; color: #92400e; }
.coaster-badge.thrill-1 { background: #dcfce7; color: #166534; }
.coaster-badge.thrill-2 { background: #e0f2fe; color: #0369a1; }
.coaster-badge.thrill-3 { background: #fef3c7; color: #92400e; }
.coaster-badge.thrill-4 { background: #fee2e2; color: #dc2626; }
.coaster-badge.thrill-5 { background: #dc2626; color: white; }
.impressive-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 3px 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.impressive-stat .material-icons {
    font-size: 14px;
}
.coaster-expand-icon {
    color: #94a3b8;
    font-size: 20px;
    transition: transform 0.3s ease;
    margin-left: 4px;
}
.coaster-card.expanded .coaster-expand-icon {
    transform: rotate(180deg);
}
.coaster-card-details {
    display: none;
    padding: 0 12px 12px;
}
.coaster-card.expanded .coaster-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}
.coaster-card.expanded .coaster-image {
    flex: 0 0 calc(72% - 3px);
    max-width: calc(72% - 3px);
    margin-bottom: 0;
}
.coaster-card.expanded .coaster-image img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
}
.coaster-card.expanded .coaster-stats-grid {
    flex: 0 0 calc(28% - 3px);
    max-width: calc(28% - 3px);
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
}
.coaster-stats-grid .coaster-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 11px;
    color: #475569;
}
.coaster-stats-grid .coaster-stat .material-icons {
    font-size: 12px;
    color: #64748b;
}
.coaster-card.kiddie {
    opacity: 0.85;
}
.coaster-card.kiddie .coaster-name {
    background: #f8fafc !important; border-left: 4px solid #3b82f6 !important;
    color: #1e293b !important;
    font-size: 12px;
}
/* Mobile popup - full width, no horizontal scroll */
@media (max-width: 768px) {
    .leaflet-popup {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
    .leaflet-popup-content-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .leaflet-popup-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    .poi-popup, .popup-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .poi-popup *, .popup-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .poi-popup img {
        max-width: 100% !important;
        height: auto !important;
    }
    .coaster-card, .park-collapsible {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Hide expand icon on coaster cards */
.coaster-expand-icon {
    display: none !important;
}
/* Manufacturer badge */
.coaster-badge.manufacturer {
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}
/* Colorful stat emojis */
.coaster-stats-grid .stat-emoji {
    font-size: 16px;
    line-height: 1;
}
/* Coaster wait time badge */
.coaster-wait-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}
.coaster-wait-badge .material-icons {
    font-size: 12px;
}
/* Coaster card header - name left, badges right */
.coaster-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 10px;
}
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    flex: 1;
    min-width: 0;
}
.coaster-badges-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.coaster-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Wait time badge color coding */
.coaster-wait-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}
.coaster-wait-badge.wait-short {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.coaster-wait-badge.wait-medium {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
}
.coaster-wait-badge.wait-long {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.coaster-wait-badge .material-icons {
    font-size: 12px;
}
/* Coaster card with faded background image */
.coaster-card {
    position: relative;
    overflow: hidden;
}
.coaster-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: opacity 0.3s ease;
}
.coaster-card.expanded::before {
    opacity: 0;
}
.coaster-card-header {
    position: relative;
    z-index: 1;
}
/* Coaster card background image div */
.coaster-card-bg {
    
    opacity: 0; /* No background image */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.coaster-card.expanded .coaster-card-bg {
    
    opacity: 0;
}
/* Coaster name with white background */
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    background: #1877F2; color: white;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Fix coaster name pill to fit content */
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    flex: 0 1 auto;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
/* Make background image more visible */
.coaster-card-bg {
    
    opacity: 0 !important;
}
/* Wait time badge - muted style like other badges */
.coaster-wait-badge {
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.coaster-wait-badge.wait-short {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.coaster-wait-badge.wait-medium {
    background: #fef9c3 !important;
    color: #854d0e !important;
}
.coaster-wait-badge.wait-long {
    background: #fee2e2 !important;
    color: #991b1b !important;
}
/* Name pill fully opaque */
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    background: #fff !important;
}
/* Expanded coaster card - white background, no image */
.coaster-card.expanded {
    background: #fff !important;
}
.coaster-card.expanded .coaster-card-bg {
    
    display: none !important;
}
/* Lighter red for long wait text */
.coaster-wait-badge.wait-long {
    color: #dc2626 !important;
}
/* Coaster name wraps, card has min height for 2 rows */
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3;
}
.coaster-card-header {
    min-height: 56px;
    align-items: flex-start !important;
}
/* Ride description in expandable section */
.ride-description {
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    background: #f9fafb;
    border-radius: 8px;
    margin: 8px;
}
.ride-description.no-data {
    color: #9ca3af;
    font-style: italic;
}
/* Improved ride/coaster description styling */
.ride-description {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 10px !important;
    margin: 10px 12px 12px 12px !important;
    border-left: 3px solid #3b82f6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.ride-description::first-letter {
    font-size: 1.3em;
    font-weight: 600;
    color: #1e40af;
}
/* Clean ride/coaster description - simplified */
.ride-description {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #6b7280 !important;
    background: #fff !important;
    border-radius: 8px !important;
    margin: 8px 10px 10px 10px !important;
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    box-shadow: none !important;
}
.ride-description::first-letter {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Force Facebook blue pill for ALL coaster names */
.coaster-name {
    background: #1877F2 !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
}

/* Limit coaster name width so badges stay in place */
.coaster-name {
    max-width: 55% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.2 !important;
}
.coaster-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.coaster-badges-wrapper {
    flex-shrink: 0 !important;
}

/* Accent Bar Style for Coaster Names */
.coaster-name {
    background: #f8fafc !important;
    color: #1e293b !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 4px !important;
    padding: 6px 12px 6px 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    font-weight: 600 !important;
}

/* ===== National Parks Popup Styles ===== */
.park-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 13px;
}
.park-rating .stars { letter-spacing: -2px; }

.park-sections {
    margin: 12px 0;
}
.park-section {
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-secondary, #f5f5f5);
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}
.section-header:hover { background: var(--bg-tertiary, #eee); }
.section-content {
    max-height: 250px;
    overflow-y: auto;
}
.nps-item {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color, #eee);
    cursor: pointer;
    position: relative;
}
.nps-item:hover { background: var(--bg-secondary, #f9f9f9); }
.nps-item-title { font-weight: 500; font-size: 13px; }
.nps-item-meta { font-size: 11px; color: var(--text-muted, #888); margin-top: 2px; }
.nps-more { padding: 8px 12px; font-size: 11px; color: var(--text-muted, #888); text-align: center; background: var(--bg-secondary, #f5f5f5); }
.no-data, .data-error { padding: 16px; text-align: center; color: var(--text-muted, #888); font-size: 12px; }
.data-error { color: #dc3545; }
.loading-spinner { padding: 16px; text-align: center; color: var(--text-muted, #888); }

.reserve-btn, .event-link {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    background: #228B22;
    color: white !important;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
}
.reserve-btn:hover, .event-link:hover { background: #1a6b1a; }

/* Park Alerts */
.nps-alerts-container { margin: 8px 0; }
.park-alert {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 12px;
}
.park-alert a { color: inherit; margin-left: 6px; text-decoration: underline; }
.alert-error { padding: 8px 10px; background: #fff3cd; color: #856404; border-radius: 4px; font-size: 12px; }

/* NPS Map Markers */
.nps-marker { background: none !important; border: none !important; }

/* NPS Trail/Place Item Images */
}
}
.nps-item { cursor: pointer; }
.nps-item:hover { background: var(--bg-secondary); }

/* NPS & Coaster Images - Standard width, no cropping */
.nps-item-img {
    max-height: 120px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 6px;
}

.coaster-image img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
}

/* Coaster Card Expanded - Image full width, stats below centered */
.coaster-card.expanded .coaster-card-details {
    display: block !important;
    padding: 8px;
}
.coaster-card.expanded .coaster-image {
    flex: none !important;
    max-width: 100% !important;
    width: 100%;
    margin-bottom: 8px;
}
.coaster-card.expanded .coaster-stats-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center;
    gap: 6px !important;
    width: 100%;
    max-width: 100% !important;
    flex: none !important;
}
.coaster-card.expanded .coaster-stats-grid .coaster-stat {
    flex: 0 0 auto;
    font-size: 11px !important;
    padding: 4px 8px !important;
}
.coaster-card.expanded .coaster-stats-grid .coaster-stat .material-icons {
    font-size: 14px !important;
}

/* Ride category icon colors */
.poi-popup [data-rides-category='dark_rides'] .park-collapsible-title .material-icons { color: #7c3aed !important; }
.poi-popup [data-rides-category='water_rides'] .park-collapsible-title .material-icons { color: #0ea5e9 !important; }
.poi-popup [data-rides-category='flat_rides'] .park-collapsible-title .material-icons { color: #ef4444 !important; }
.poi-popup [data-rides-category='shows'] .park-collapsible-title .material-icons { color: #f59e0b !important; }
.poi-popup [data-rides-category='transportation'] .park-collapsible-title .material-icons { color: #10b981 !important; }
.poi-popup [data-rides-category='childrens_rides'] .park-collapsible-title .material-icons { color: #ec4899 !important; }
.poi-popup [data-rides-category='meet_greets'] .park-collapsible-title .material-icons { color: #8b5cf6 !important; }
.poi-popup [data-rides-category='experiences'] .park-collapsible-title .material-icons { color: #06b6d4 !important; }
.poi-popup [data-rides-category='uncategorized'] .park-collapsible-title .material-icons { color: #64748b !important; }

/* ============================================
   FILMING LOCATIONS - Movie Cards
   ============================================ */
.filming-movies-container {
    margin: 10px 0;
}

.filming-movie-card {
    display: flex;
    gap: 12px;
    background: #1e1b4b;
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
}

.filming-movie-poster {
    width: 60px;
    height: 90px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.filming-movie-info {
    flex: 1;
    min-width: 0;
}

.filming-movie-title {
    font-weight: 600;
    font-size: 14px;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.filming-movie-meta {
    font-size: 12px;
    color: #fbbf24;
    margin-bottom: 4px;
}

.filming-movie-overview {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.filming-trailer-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dc2626;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.filming-trailer-btn:hover {
    background: #b91c1c;
    color: white;
    text-decoration: none;
}

/* Filming movie card without poster */
.filming-movie-card:not(:has(.filming-movie-poster)) {
    padding: 8px 12px;
}

.filming-movie-card:not(:has(.filming-movie-poster)) .filming-movie-title {
    font-size: 15px;
    font-weight: 600;
    color: #fbbf24;
}

/* YouTube-style trailer button */
.filming-trailer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FF0000;
    color: white !important;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s;
    margin-top: 6px;
}

.filming-trailer-btn:hover {
    background: #cc0000;
    color: white !important;
    text-decoration: none !important;
}

.filming-trailer-btn::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* ============================================
   PWA/Mobile Fullscreen Popup Modal (Bottom Sheet)
   ============================================ */
.pwa-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pwa-popup-modal.active {
    opacity: 1;
    visibility: visible;
}

.pwa-popup-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.pwa-popup-modal.active .pwa-popup-modal-content {
    transform: translateY(0);
}

.pwa-popup-modal-header {
    display: flex;
    justify-content: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.pwa-popup-modal-handle {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
}

.pwa-popup-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: #f0f0f0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    line-height: 1;
}

.pwa-popup-modal-close:hover {
    background: #e0e0e0;
}

.pwa-popup-modal-body {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    max-height: calc(85vh - 50px);
    -webkit-overflow-scrolling: touch;
}

/* Ensure popup content styles work in the modal */
.pwa-popup-modal-body .popup-content,
.pwa-popup-modal-body .poi-popup {
    color: #333;
}

.pwa-popup-modal-body .popup-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.pwa-popup-modal-body .popup-type {
    color: #e31937;
    font-size: 13px;
    margin-bottom: 8px;
}

.pwa-popup-modal-body .popup-details,
.pwa-popup-modal-body .popup-address {
    color: #666;
    font-size: 13px;
}

/* PWA Modal - Larger NPS trail/campground images */
.pwa-popup-modal-body .nps-item-img {
    max-height: 200px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Also improve image display for other content in PWA modal */
.pwa-popup-modal-body img {
    max-width: 100%;
    height: auto;
}

/* Launch Site Badge - oval pill, positioned inside image */
.poi-logo-banner {
    position: relative;
}

.launch-site-badge {
    position: absolute;
    bottom: 25px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
    white-space: nowrap;
}

/* PWA modal - full width images */
.pwa-popup-modal-body .poi-logo-banner {
    margin: -16px -16px 10px -16px;
    padding: 0;
    width: calc(100% + 32px);
    border-radius: 0;
    position: relative;
}

.pwa-popup-modal-body .poi-logo-banner img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* PWA badge position */
.pwa-popup-modal-body .launch-site-badge {
    bottom: 12px;
    right: 12px;
}

/* Fix PWA modal content centering */

/* Fix PWA modal image centering only */
.pwa-popup-modal-body .poi-logo-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Dark mode for Leaflet map popups */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .leaflet-popup-content {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .poi-popup {
    color: #e2e8f0 !important;
    background: transparent !important;
}

[data-theme="dark"] .poi-popup .poi-name,
[data-theme="dark"] .poi-popup h3 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .poi-popup .poi-location,
[data-theme="dark"] .poi-popup .cave-location,
[data-theme="dark"] .poi-popup .poi-type,
[data-theme="dark"] .poi-popup .poi-chain {
    color: #94a3b8 !important;
}

[data-theme="dark"] .poi-popup .roadside-description,
[data-theme="dark"] .poi-popup p {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .poi-logo-banner {
    background: #334155 !important;
}

[data-theme="dark"] .cave-feature-tag {
    background: #3b82f6 !important;
    color: white !important;
}

[data-theme="dark"] .poi-popup .poi-action-btn {
    background: #3b82f6 !important;
    color: white !important;
}

[data-theme="dark"] .poi-popup .poi-action-btn.danger {
    background: #ef4444 !important;
}

/* Dark mode for PWA popup modal */
[data-theme="dark"] .pwa-popup-modal-content {
    background: #1e293b !important;
}

[data-theme="dark"] .pwa-popup-modal-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .pwa-popup-modal-handle {
    background: #475569 !important;
}

[data-theme="dark"] .pwa-popup-modal-close {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .pwa-popup-modal-body {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* DARK MODE POPUPS - FINAL OVERRIDE */
[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .leaflet-popup-tip {
    background: #1e293b !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper * {
    color: #e2e8f0;
}

[data-theme="dark"] .leaflet-popup-content-wrapper .poi-name,
[data-theme="dark"] .leaflet-popup-content-wrapper h3 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper .poi-logo-banner {
    background: #334155 !important;
}

/* Dark mode popups - match sidebar colors */
[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: var(--bg-primary, #1c1c1e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .leaflet-popup-tip {
    background: var(--bg-primary, #1c1c1e) !important;
}

[data-theme="dark"] .leaflet-popup-content {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-popup {
    background: transparent !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-logo-banner {
    background: var(--bg-secondary, #2c2c2e) !important;
}

[data-theme="dark"] .poi-name,
[data-theme="dark"] .poi-popup h3 {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-location,
[data-theme="dark"] .poi-type,
[data-theme="dark"] .roadside-description {
    color: var(--text-secondary, #a1a1a6) !important;
}

[data-theme="dark"] .cave-feature-tag {
    background: var(--bg-tertiary, #3a3a3c) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

/* Fix blue square around image in dark mode */
[data-theme="dark"] .poi-logo-banner {
    background: transparent !important;
}

/* Fix PWA modal dark mode - match sidebar */
[data-theme="dark"] .pwa-popup-modal-content {
    background: var(--bg-primary, #1c1c1e) !important;
}

[data-theme="dark"] .pwa-popup-modal-header {
    background: var(--bg-primary, #1c1c1e) !important;
    border-bottom-color: var(--border-color, #3a3a3c) !important;
}

[data-theme="dark"] .pwa-popup-modal-body {
    background: var(--bg-primary, #1c1c1e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .pwa-popup-modal-handle {
    background: var(--bg-tertiary, #3a3a3c) !important;
}

[data-theme="dark"] .pwa-popup-modal-close {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

/* Fix X button being cut off */
.pwa-popup-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.pwa-popup-modal-header {
    position: relative;
    min-height: 44px;
}

/* Hide drag handle and header line in PWA modal */
.pwa-popup-modal-handle {
    display: none !important;
}

.pwa-popup-modal-header {
    border-bottom: none !important;
    min-height: auto;
    padding: 8px;
}

/* Move X button above the image */
.pwa-popup-modal-header {
    padding: 12px 16px !important;
    display: flex;
    justify-content: flex-end;
}

.pwa-popup-modal-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
}

/* Remove negative margin from image so it doesn't overlap header */
.pwa-popup-modal-body .poi-logo-banner {
    margin-top: 0 !important;
}

/* Equal spacing above and below X button */
.pwa-popup-modal-header {
    padding: 10px 12px 10px 12px !important;
}

/* Less space below X button */
.pwa-popup-modal-header {
    padding: 10px 12px 4px 12px !important;
}

/* Move X button down slightly */
.pwa-popup-modal-header {
    padding: 6px 12px 4px 12px !important;
}

.pwa-popup-modal-close {
    margin-top: 4px !important;
}

/* Remove space below X button */
.pwa-popup-modal-header {
    padding: 6px 12px 0 12px !important;
}

/* Red X button */
.pwa-popup-modal-close {
    background: #ef4444 !important;
    color: white !important;
}

/* Red X button in all modes, centered */
.pwa-popup-modal-close {
    background: #ef4444 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}

[data-theme="dark"] .pwa-popup-modal-close {
    background: #ef4444 !important;
    color: white !important;
}

/* Rounded corners on modal images */
.pwa-popup-modal-body .poi-logo-banner img {
    border-radius: 8px !important;
}

.pwa-popup-modal-body .poi-logo-banner {
    padding: 0 12px !important;
}

/* Center X vertically - move up */
.pwa-popup-modal-close {
    padding-bottom: 2px !important;
}

/* Smaller X button circle */
.pwa-popup-modal-close {
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
}

/* Less space below X button */
.pwa-popup-modal-header {
    margin-bottom: -4px !important;
}

/* Even less space below X button */
.pwa-popup-modal-header {
    margin-bottom: -8px !important;
}

/* Move X button down */
.pwa-popup-modal-close {
    margin-top: 6px !important;
}

/* Add space back below X button */
.pwa-popup-modal-header {
    margin-bottom: -4px !important;
}

/* Launch Site badge - consistent positioning */
.launch-site-badge {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
}

.pwa-popup-modal-body .launch-site-badge {
    bottom: 12px !important;
    right: 24px !important;
}

/* Ensure poi-logo-banner is positioned for absolute child */
.poi-logo-banner {
    position: relative !important;
}


/* Dark mode quick actions bar background */
[data-theme="dark"] .quick-actions-bar {
    background: #4a4a4c !important;
}

/* Dark mode quick actions bar - match dark mode blacks */
[data-theme="dark"] .quick-actions-bar {
    background: var(--bg-primary, #1c1c1e) !important;
}

/* Dark mode - POI sheet (quick actions menu) */
[data-theme="dark"] .poi-sheet {
    background: var(--bg-primary, #1c1c1e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-sheet-header {
    background: var(--bg-primary, #1c1c1e) !important;
    border-bottom-color: var(--border-color, #3a3a3c) !important;
}

[data-theme="dark"] .poi-sheet-title {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-sheet-content {
    background: var(--bg-primary, #1c1c1e) !important;
}

[data-theme="dark"] .poi-sheet-item,
[data-theme="dark"] .poi-item {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-sheet-item:hover,
[data-theme="dark"] .poi-item:hover {
    background: var(--bg-tertiary, #3a3a3c) !important;
}

/* Dark mode - Theme park ride categories */
[data-theme="dark"] .ride-category,
[data-theme="dark"] .ride-category-header,
[data-theme="dark"] .attraction-category {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .ride-category-content,
[data-theme="dark"] .ride-item,
[data-theme="dark"] .attraction-item {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .ride-item:hover,
[data-theme="dark"] .attraction-item:hover {
    background: var(--bg-tertiary, #3a3a3c) !important;
}

[data-theme="dark"] .crowd-stats,
[data-theme="dark"] .park-stats {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .crowd-stats span,
[data-theme="dark"] .park-stats span {
    color: var(--text-secondary, #a1a1a6) !important;
}

/* Fix desktop navy square around image */
.poi-logo-banner {
    background: transparent !important;
}

.leaflet-popup-content-wrapper .poi-logo-banner {
    background: transparent !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper .poi-logo-banner {
    background: transparent !important;
}

/* Theme park modal - more dark mode fixes */
[data-theme="dark"] .pwa-popup-modal-body .crowd-stats,
[data-theme="dark"] .pwa-popup-modal-body .park-stats,
[data-theme="dark"] .pwa-popup-modal-body .stat-box,
[data-theme="dark"] .pwa-popup-modal-body .stats-row {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .pwa-popup-modal-body .ride-category,
[data-theme="dark"] .pwa-popup-modal-body .ride-category-header {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
    border-color: var(--border-color, #3a3a3c) !important;
}

[data-theme="dark"] .pwa-popup-modal-body .ride-item,
[data-theme="dark"] .pwa-popup-modal-body .ride-row {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
    border-color: var(--border-color, #3a3a3c) !important;
}

[data-theme="dark"] .pwa-popup-modal-body div[style*="background"] {
    background: var(--bg-secondary, #2c2c2e) !important;
}

[data-theme="dark"] .pwa-popup-modal-body .thrill-badge,
[data-theme="dark"] .pwa-popup-modal-body .badge {
    color: white !important;
}

/* Desktop popup - dark mode for theme park elements */
[data-theme="dark"] .leaflet-popup-content-wrapper .crowd-stats,
[data-theme="dark"] .leaflet-popup-content-wrapper .park-stats,
[data-theme="dark"] .leaflet-popup-content-wrapper .stat-box,
[data-theme="dark"] .leaflet-popup-content-wrapper .stats-row,
[data-theme="dark"] .leaflet-popup-content .crowd-stats,
[data-theme="dark"] .leaflet-popup-content .park-stats {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper .ride-category,
[data-theme="dark"] .leaflet-popup-content-wrapper .ride-category-header,
[data-theme="dark"] .leaflet-popup-content .ride-category,
[data-theme="dark"] .leaflet-popup-content .ride-category-header {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
    border-color: var(--border-color, #3a3a3c) !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper .ride-item,
[data-theme="dark"] .leaflet-popup-content-wrapper .ride-row,
[data-theme="dark"] .leaflet-popup-content .ride-item,
[data-theme="dark"] .leaflet-popup-content .ride-row {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .poi-popup .crowd-stats,
[data-theme="dark"] .poi-popup .ride-category,
[data-theme="dark"] .poi-popup .ride-category-header {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

/* Theme park collapsible sections - dark mode */
[data-theme="dark"] .park-collapsible {
    background: var(--bg-secondary, #2c2c2e) !important;
    border-color: var(--border-color, #3a3a3c) !important;
}

[data-theme="dark"] .park-collapsible-header {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .park-collapsible-content {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .park-collapsible-title {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .park-crowd-level {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .park-wait-times-section {
    background: var(--bg-secondary, #2c2c2e) !important;
}

[data-theme="dark"] .coaster-card {
    background: var(--bg-tertiary, #3a3a3c) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .coaster-card-header {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .park-ride-list {
    background: var(--bg-secondary, #2c2c2e) !important;
}

/* Dark mode - ride name cards inside collapsible */
[data-theme="dark"] .coaster-card,
[data-theme="dark"] .ride-card,
[data-theme="dark"] .park-ride-item {
    background: var(--bg-tertiary, #3a3a3c) !important;
    color: var(--text-primary, #f5f5f7) !important;
    border-color: var(--border-color, #48484a) !important;
}

[data-theme="dark"] .coaster-name,
[data-theme="dark"] .ride-name {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .coaster-card-header,
[data-theme="dark"] .ride-card-header {
    background: transparent !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .coaster-card-details,
[data-theme="dark"] .ride-card-details {
    background: var(--bg-tertiary, #3a3a3c) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .coaster-badge,
[data-theme="dark"] .ride-badge {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .wait-time-badge {
    color: var(--text-primary, #f5f5f7) !important;
}

/* Dark mode - fix ride name backgrounds */
[data-theme="dark"] .coaster-name {
    background: transparent !important;
}

[data-theme="dark"] .coaster-card .coaster-name,
[data-theme="dark"] .coaster-card-header .coaster-name {
    background: transparent !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .coaster-card span,
[data-theme="dark"] .coaster-card div {
    background: transparent !important;
}

[data-theme="dark"] .coaster-card-header > span {
    background: transparent !important;
    color: var(--text-primary, #f5f5f7) !important;
}

/* Dark mode - crowd level and avg wait text white */
[data-theme="dark"] .park-crowd-level span,
[data-theme="dark"] .park-crowd-level div,
[data-theme="dark"] .park-wait-times-section span,
[data-theme="dark"] .park-wait-times-section div,
[data-theme="dark"] .crowd-stat-value,
[data-theme="dark"] .wait-stat-value,
[data-theme="dark"] [data-crowd-container] span,
[data-theme="dark"] [data-crowd-container] div {
    color: var(--text-primary, #f5f5f7) !important;
}

/* Dark mode - temperature matches weather description */
[data-theme="dark"] .park-weather,
[data-theme="dark"] .weather-temp,
[data-theme="dark"] .weather-description,
[data-theme="dark"] [class*="weather"] {
    color: var(--text-secondary, #a1a1a6) !important;
}

/* PWA/Mobile - selected collapsible header text should be blue not white */
.pwa-popup-modal-body .park-collapsible-header.active .park-collapsible-title,
.pwa-popup-modal-body .park-collapsible.expanded .park-collapsible-title,
.pwa-popup-modal-body .park-collapsible-header[aria-expanded="true"] .park-collapsible-title {
    color: #3b82f6 !important;
}

[data-theme="dark"] .pwa-popup-modal-body .park-collapsible-header.active .park-collapsible-title,
[data-theme="dark"] .pwa-popup-modal-body .park-collapsible.expanded .park-collapsible-title {
    color: #3b82f6 !important;
}

/* Dark mode - don't change collapsible title color when selected */
[data-theme="dark"] .park-collapsible-title,
[data-theme="dark"] .park-collapsible-header .park-collapsible-title,
[data-theme="dark"] .park-collapsible-header.active .park-collapsible-title,
[data-theme="dark"] .park-collapsible.expanded .park-collapsible-title,
[data-theme="dark"] .park-collapsible-header[aria-expanded="true"] .park-collapsible-title {
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .pwa-popup-modal-body .park-collapsible-title,
[data-theme="dark"] .pwa-popup-modal-body .park-collapsible-header.active .park-collapsible-title,
[data-theme="dark"] .pwa-popup-modal-body .park-collapsible.expanded .park-collapsible-title {
    color: var(--text-primary, #f5f5f7) !important;
}

/* Dark mode - no highlight when menu selected */
[data-theme="dark"] .park-collapsible-header:active,
[data-theme="dark"] .park-collapsible-header:focus,
[data-theme="dark"] .park-collapsible-header.active,
[data-theme="dark"] .park-collapsible.expanded .park-collapsible-header {
    background: var(--bg-secondary, #2c2c2e) !important;
    color: var(--text-primary, #f5f5f7) !important;
}

[data-theme="dark"] .park-collapsible-header *:active,
[data-theme="dark"] .park-collapsible-header *:focus {
    background: transparent !important;
    color: var(--text-primary, #f5f5f7) !important;
    -webkit-tap-highlight-color: transparent !important;
}

[data-theme="dark"] .park-collapsible-header {
    -webkit-tap-highlight-color: transparent !important;
}

/* FORCE dark mode on coaster cards */
[data-theme="dark"] .coaster-card {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
    color: #f5f5f7 !important;
}

[data-theme="dark"] .coaster-card * {
    color: #f5f5f7 !important;
}

[data-theme="dark"] .coaster-card .coaster-badge {
    background: #3a3a3c !important;
}

[data-theme="dark"] .park-ride-list {
    background: #2c2c2e !important;
}

[data-theme="dark"] .park-collapsible-content {
    background: #2c2c2e !important;
}

/* FINAL OVERRIDE - Dark mode park collapsible */
html[data-theme="dark"] .park-collapsible,
html[data-theme="dark"] .park-collapsible-header,
html[data-theme="dark"] .poi-popup .park-collapsible,
html[data-theme="dark"] .poi-popup .park-collapsible-header,
html[data-theme="dark"] .leaflet-popup-content .park-collapsible,
html[data-theme="dark"] .leaflet-popup-content .park-collapsible-header {
    background: #2c2c2e !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3c !important;
}

html[data-theme="dark"] .park-collapsible-content,
html[data-theme="dark"] .poi-popup .park-collapsible-content {
    background: #2c2c2e !important;
}

html[data-theme="dark"] .coaster-card,
html[data-theme="dark"] .poi-popup .coaster-card {
    background: #3a3a3c !important;
    border-color: #48484a !important;
}

/* Weather stat in crowd level card */
[data-weather-stat] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-weather-stat] .weather-icon {
    font-size: 20px;
}

[data-weather-stat] .stat-content {
    display: flex;
    flex-direction: column;
}

[data-weather-stat] .stat-value {
    font-weight: 600;
    font-size: 14px;
}

[data-weather-stat] .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ============================================
   Simulation Mode Modal
   ============================================ */

.sim-modal {
    position: fixed;
    bottom: 180px;
    right: 10px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #444;
    border-radius: 12px;
    z-index: 9999;
    width: 260px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sim-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #444;
    background: linear-gradient(135deg, #e31937, #b01030);
    border-radius: 12px 12px 0 0;
    cursor: grab;
}

.sim-modal-title {
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.sim-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 18px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sim-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sim-modal-body {
    padding: 12px;
    color: #fff;
}

.sim-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.sim-bottom-controls {
    margin-top: 12px;
    margin-bottom: 8px;
}

.sim-btn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #333;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.sim-btn:hover {
    background: #444;
    border-color: #666;
}

.sim-btn.active {
    background: #1877F2;
    border-color: #e31937;
}

.sim-go-btn {
    background: #28a745;
    border-color: #28a745;
}

.sim-go-btn:hover {
    background: #218838;
}

.sim-control-group {
    margin-bottom: 10px;
}

.sim-control-group label {
    display: block;
    margin-bottom: 4px;
    color: #aaa;
    font-size: 11px;
}

.sim-preset-btns {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.sim-preset {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
}

.sim-preset:hover {
    background: #444;
    color: #fff;
}

.sim-modal input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #444;
    outline: none;
    -webkit-appearance: none;
    margin: 4px 0;
}

.sim-modal input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1877F2;
    cursor: pointer;
}

.sim-modal input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1877F2;
    cursor: pointer;
    border: none;
}

.sim-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    color: #fff;
    font-size: 12px;
}

.sim-hint {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-top: 2px;
}

.sim-status {
    text-align: center;
    padding: 8px;
    background: #1a1a1a;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #ffc107;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .sim-modal {
        bottom: 220px;
        right: 5px;
        left: 5px;
        width: auto;
    }
}

/* Admin panel simulation button */
#sim-mode-btn {
    background: linear-gradient(135deg, #e31937, #b01030);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-top: 8px;
    width: 100%;
}

#sim-mode-btn:hover {
    background: linear-gradient(135deg, #ff2244, #c01040);
}

#sim-mode-btn.active {
    background: #dc3545;
}


/* MapLibre GL Marker Styles */
.maplibre-marker {
    cursor: pointer;
}

.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #1877F2;
    position: relative;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.marker-pin span {
    transform: rotate(45deg);
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.marker-start {
    background: #4CAF50;
}

.marker-end {
    background: #1877F2;
}

.marker-waypoint {
    background: #2196F3;
}

.marker-charger {
    background: #1877F2;
    font-size: 16px;
}

.charger-marker {
    cursor: pointer;
}

.charger-marker .charger-icon {
    width: 28px;
    height: 28px;
    background: #1877F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 2px solid white;
}

.charger-marker.selected .charger-icon {
    background: #4CAF50;
    transform: scale(1.2);
}

.distance-label {
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* MapLibre GL map container */
#map {
    width: 100%;
    height: 100%;
}

.maplibregl-ctrl-group {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.maplibregl-ctrl-group button {
    background-color: transparent !important;
}

.maplibregl-ctrl-group button span {
    filter: invert(1);
}

/* MapLibre Marker Styles */
.maplibre-marker {
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}
.maplibre-marker:hover {
    transform: scale(1.1);
    z-index: 1000 !important;
}
.emoji-marker-container {
    font-size: 24px;
    text-align: center;
}
.park-logo-marker-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.park-logo-marker-container img {
    max-height: 40px;
    max-width: 40px;
    object-fit: contain;
}
.emoji-marker {
    font-size: 24px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}





/* ============================================
   MapLibre Canvas Fix - Ensure controls stay clickable
   ============================================ */
   
/* Critical: Block pointer events on the entire MapLibre container */
.maplibregl-map {
    pointer-events: auto;
}

/* The canvas container should NOT intercept clicks meant for fixed elements */
.maplibregl-canvas-container {
    z-index: 1 !important;
}

/* The canvas itself handles map interactions */
.maplibregl-canvas {
    z-index: 1 !important;
    pointer-events: auto;
}

/* MapLibre control overlay - hide and don't block */
.maplibregl-control-container {
    z-index: 2 !important;
    pointer-events: none !important;
}

/* MapLibre control group - hide default controls completely */
.maplibregl-ctrl-group {
    display: none !important;
    pointer-events: none !important;
}

/* MapLibre attribution - move it out of the way */
.maplibregl-ctrl-attrib {
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Ensure sidebar toggle is ABOVE everything in MapLibre mode */
.sidebar-toggle {
    z-index: 100000 !important;  /* Higher than anything */
    pointer-events: auto !important;
    position: fixed !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate !important;  /* Create new stacking context */
}

/* Inner elements should not intercept clicks */
.sidebar-toggle * {
    pointer-events: none !important;
}

/* Ensure map controls are above the canvas */
.map-controls {
    z-index: 99999 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
}

.map-controls button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* MapLibre interactive layer - don't let it steal focus from fixed elements */
.maplibregl-interactive {
    cursor: grab;
}

/* Specifically for PWA mode - ensure controls work */
@media (display-mode: standalone) {
    .sidebar-toggle {
        z-index: 100001 !important;
        position: fixed !important;
        pointer-events: auto !important;
    }
    
    .map-controls {
        z-index: 100000 !important;
        pointer-events: auto !important;
    }
    
    .maplibregl-control-container {
        pointer-events: none !important;
    }
}

/* Fix MapLibre markers appearing behind canvas */
.maplibregl-marker {
    z-index: 10 !important;
}

.maplibregl-popup {
    z-index: 100 !important;
}

/* Navigation time display */
.nav-next-stop-time {
    color: #888;
    font-size: 12px;
    margin-left: 8px;
}

/* Keep markers always upright during navigation rotation */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.custom-marker,
.charger-marker,
.destination-marker,
.waypoint-marker {
    transform-origin: center bottom !important;
}

/* During navigation, counter-rotate markers */
.navigation-active .leaflet-marker-pane {
    transform-style: preserve-3d;
}


/* Starfield for night sky */
.starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    pointer-events: none;
    z-index: 3;
    background: transparent;
    opacity: 0;
    transition: opacity 2s ease;
    overflow: hidden;
}
.starfield.visible {
    opacity: 1;
}
.starfield::before,
.starfield::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
.starfield::before {
    background-image:
        radial-gradient(2px 2px at 10% 10%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 30% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 50% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 60% 45%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 15% 55%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 35% 40%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 55% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 75% 5%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 95% 50%, rgba(255,255,255,0.8), transparent);
    animation: twinkle1 4s ease-in-out infinite alternate;
}
.starfield::after {
    background-image:
        radial-gradient(1px 1px at 5% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 12% 72%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 22% 5%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 32% 88%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 42% 32%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 52% 58%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 72% 78%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 82% 42%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 92% 22%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 8% 92%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 18% 18%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 38% 8%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 48% 48%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 58% 82%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 68% 28%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 78% 68%, rgba(255,255,255,0.9), transparent);
    animation: twinkle2 5s ease-in-out infinite alternate;
}
@keyframes twinkle1 {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}
@keyframes twinkle2 {
    0% { opacity: 0.8; }
    50% { opacity: 0.5; }
    100% { opacity: 0.9; }
}







#map {
    position: relative !important;
}



/* Subtle sky gradient for navigation - only top edge */
#map.nav-3d-sky::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to bottom, 
        #4A90D9 0%,
        #6BB3E9 15%,
        #87CEEB 30%,
        rgba(135, 206, 235, 0.85) 50%,
        rgba(176, 212, 232, 0.6) 70%,
        rgba(200, 225, 240, 0.3) 85%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

#map.nav-3d-sky.sky-night::before {
    background: linear-gradient(to bottom,
        rgba(15, 12, 41, 0.95) 0%,
        rgba(25, 20, 60, 0.8) 30%,
        rgba(48, 43, 99, 0.5) 60%,
        rgba(48, 43, 99, 0.2) 80%,
        transparent 100%) !important;
}

#map.nav-3d-sky.sky-sunset::before {
    background:
        radial-gradient(ellipse 75% 30% at 58% 88%, rgba(255, 195, 55, 0.60) 0%, rgba(240, 110, 20, 0.28) 45%, transparent 70%),
        linear-gradient(to bottom,
            rgba(6, 12, 38, 0.96) 0%,
            rgba(18, 36, 72, 0.90) 16%,
            rgba(165, 60, 18, 0.82) 34%,
            rgba(215, 100, 20, 0.74) 50%,
            rgba(238, 150, 35, 0.55) 65%,
            rgba(250, 190, 65, 0.30) 80%,
            transparent 100%) !important;
}

#map.nav-3d-sky.sky-sunrise::before {
    background:
        radial-gradient(ellipse 70% 28% at 42% 88%, rgba(255, 185, 60, 0.55) 0%, rgba(225, 95, 25, 0.24) 45%, transparent 70%),
        linear-gradient(to bottom,
            rgba(4, 8, 28, 0.96) 0%,
            rgba(12, 28, 65, 0.90) 15%,
            rgba(130, 50, 20, 0.82) 33%,
            rgba(195, 88, 22, 0.74) 49%,
            rgba(228, 145, 40, 0.54) 65%,
            rgba(248, 190, 68, 0.28) 80%,
            transparent 100%) !important;
}

/* ============================================
   MAP TIME-BASED MODE OVERRIDES
   These MUST come last to override data-theme styles
   Map buttons follow sunrise/sunset, NOT sidebar toggle
   ============================================ */
html.map-light-mode .map-container .map-control-btn,
html.map-light-mode .map-container .quick-action-btn,
html.map-light-mode .map-container .maplibregl-ctrl-group button,
html.map-light-mode .map-container #adminToggleBtn,
html.map-light-mode .map-container .quick-actions-bar,
html.map-light-mode #admin-test-panel {
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
html.map-light-mode .map-container .map-control-btn:hover,
html.map-light-mode .map-container .quick-action-btn:hover,
html.map-light-mode .map-container .maplibregl-ctrl-group button:hover,
html.map-light-mode .map-container #adminToggleBtn:hover {
    background: #f0f0f0 !important;
    color: #000000 !important;
}
html.map-dark-mode .map-container .map-control-btn,
html.map-dark-mode .map-container .quick-action-btn,
html.map-dark-mode .map-container .maplibregl-ctrl-group button,
html.map-dark-mode .map-container #adminToggleBtn,
html.map-dark-mode .map-container .quick-actions-bar,
html.map-dark-mode #admin-test-panel {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
html.map-dark-mode .map-container .map-control-btn:hover,
html.map-dark-mode .map-container .quick-action-btn:hover,
html.map-dark-mode .map-container .maplibregl-ctrl-group button:hover,
html.map-dark-mode .map-container #adminToggleBtn:hover {
    background: #2a2a4e !important;
    color: #ffffff !important;
}
/* Map background for time-based mode - prevents black band */
html.map-light-mode #map {
    background: linear-gradient(to bottom, #87CEEB 0%, #B0D4E8 30%, #D4E6F1 60%, #E8F4F8 100%) !important;
}
html.map-dark-mode #map {
    background: linear-gradient(to bottom, #0f0c29 0%, #1a1a3e 30%, #24243e 60%, #302b63 100%) !important;
}

/* Nav modal follows map time mode in MapLibre - override CSS variables */
html.map-light-mode .nav-modal .nav-modal-content,
html.map-light-mode.map-light-mode .nav-modal-content,
html[class*="map-light-mode"] .nav-modal-content {
    --bg-primary: #ffffff !important;
    --bg-secondary: #f5f5f5 !important;
    --text-primary: #333333 !important;
    --text-secondary: #666666 !important;
    --border-color: #ddd !important;
    background: #ffffff !important;
    color: #333333 !important;
}
html.map-light-mode .nav-modal-content h3,
html.map-light-mode .nav-modal-content .nav-modal-subtitle,
html.map-light-mode .nav-modal-content .segment-from,
html.map-light-mode .nav-modal-content .segment-to,
html.map-light-mode .nav-modal-content .segment-info,
html.map-light-mode .nav-modal-content * {
    color: #333333 !important;
}
html.map-light-mode .nav-modal-content .segment-btn {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #333333 !important;
}
html.map-light-mode .nav-modal-content .segment-btn:hover {
    background: #e8e8e8 !important;
}
html.map-light-mode .nav-modal-content .segment-number {
    color: white !important;
}

html.map-dark-mode .nav-modal .nav-modal-content,
html.map-dark-mode.map-dark-mode .nav-modal-content,
html[class*="map-dark-mode"] .nav-modal-content {
    --bg-primary: #1a1a2e !important;
    --bg-secondary: #2a2a4e !important;
    --text-primary: #e0e0e0 !important;
    --text-secondary: #aaa !important;
    --border-color: #444 !important;
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
}
html.map-dark-mode .nav-modal-content h3,
html.map-dark-mode .nav-modal-content .nav-modal-subtitle,
html.map-dark-mode .nav-modal-content .segment-from,
html.map-dark-mode .nav-modal-content .segment-to,
html.map-dark-mode .nav-modal-content .segment-info,
html.map-dark-mode .nav-modal-content * {
    color: #e0e0e0 !important;
}
html.map-dark-mode .nav-modal-content .segment-btn {
    background: #2a2a4e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}
html.map-dark-mode .nav-modal-content .segment-btn:hover {
    background: #3a3a5e !important;
}
html.map-dark-mode .nav-modal-content .segment-number {
    color: white !important;
}

/* Admin panel buttons follow map time mode */
html.map-light-mode #admin-test-panel .admin-btn {
    background: #f0f0f0 !important;
    color: #333333 !important;
    border-color: #ccc !important;
}
html.map-light-mode #admin-test-panel .admin-btn:hover {
    background: #e0e0e0 !important;
}
html.map-light-mode #admin-test-panel .admin-panel-body {
    background: #ffffff !important;
}
html.map-light-mode #admin-test-panel {
    background: #ffffff !important;
    border-color: #ccc !important;
}

html.map-dark-mode #admin-test-panel .admin-btn {
    background: #2a2a4e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
html.map-dark-mode #admin-test-panel .admin-btn:hover {
    background: #3a3a5e !important;
}
html.map-dark-mode #admin-test-panel .admin-panel-body {
    background: #1a1a2e !important;
}
html.map-dark-mode #admin-test-panel {
    background: #1a1a2e !important;
    border-color: #444 !important;
}

/* Weather override select follows map time mode */
html.map-light-mode #admin-test-panel #weather-override,
html.map-light-mode #admin-test-panel select,
html.map-light-mode #admin-test-panel label {
    background: #f0f0f0 !important;
    color: #333333 !important;
    border-color: #ccc !important;
}
html.map-light-mode #admin-test-panel label {
    background: transparent !important;
    color: #666 !important;
}

html.map-dark-mode #admin-test-panel #weather-override,
html.map-dark-mode #admin-test-panel select,
html.map-dark-mode #admin-test-panel label {
    background: #2a2a4e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
html.map-dark-mode #admin-test-panel label {
    background: transparent !important;
    color: #888 !important;
}

/* FORCE nav modal to follow map time mode - override ALL data-theme combinations */
html.map-light-mode[data-theme="dark"] .nav-modal-content,
html.map-light-mode[data-theme="dark"] .nav-modal .nav-modal-content,
[data-theme="dark"].map-light-mode .nav-modal-content,
html.map-light-mode .nav-modal-content {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #333333 !important;
}
html.map-light-mode[data-theme="dark"] .nav-modal-content *,
html.map-light-mode .nav-modal-content h3,
html.map-light-mode .nav-modal-content p,
html.map-light-mode .nav-modal-content span,
html.map-light-mode .nav-modal-content div:not(.segment-number) {
    color: #333333 !important;
}
html.map-light-mode[data-theme="dark"] .nav-modal-content .segment-btn,
html.map-light-mode .nav-modal-content .segment-btn {
    background-color: #f0f0f0 !important;
    background: #f0f0f0 !important;
    color: #333333 !important;
    border-color: #ccc !important;
}

/* Navigation UI bar follows map time mode */
html.map-light-mode .navigation-ui,
html.map-light-mode[data-theme="dark"] .navigation-ui {
    background: rgba(255, 255, 255, 0.98) !important;
}
html.map-light-mode .navigation-ui > *:not(.nav-instruction-panel) *:not(.nav-icon):not(.nav-icon *):not(.segment-number):not(.btn-primary):not(.nav-stop-btn) {
    color: #333333 !important;
}
/* Keep nav-instruction-panel contents white */
html.map-light-mode .nav-instruction-panel,
html.map-light-mode .nav-instruction-panel *,
html.map-light-mode .nav-icon,
html.map-light-mode .nav-icon *,
html.map-light-mode .nav-icon .material-icons,
html.map-light-mode .nav-distance,
html.map-light-mode .nav-instruction {
    color: white !important;
}
html.map-light-mode .nav-icon svg,
html.map-light-mode .nav-icon svg path {
    fill: white !important;
}
html.map-light-mode .nav-next-stop {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
}
html.map-light-mode .nav-stats {
    background: #f0f0f0 !important;
}
html.map-light-mode .nav-stat {
    color: #333 !important;
}
html.map-light-mode .nav-stat-value {
    color: #111 !important;
}

html.map-dark-mode .navigation-ui,
html.map-dark-mode[data-theme="light"] .navigation-ui {
    background: rgba(30, 30, 30, 0.98) !important;
}
html.map-dark-mode .navigation-ui > *:not(.nav-instruction-panel) *:not(.nav-icon):not(.nav-icon *):not(.segment-number):not(.btn-primary):not(.nav-stop-btn) {
    color: #e0e0e0 !important;
}
/* Keep nav-instruction-panel contents white */
html.map-dark-mode .nav-instruction-panel,
html.map-dark-mode .nav-instruction-panel *,
html.map-dark-mode .nav-icon,
html.map-dark-mode .nav-icon *,
html.map-dark-mode .nav-icon .material-icons,
html.map-dark-mode .nav-distance,
html.map-dark-mode .nav-instruction {
    color: white !important;
}
html.map-dark-mode .nav-icon svg,
html.map-dark-mode .nav-icon svg path {
    fill: white !important;
}
html.map-dark-mode .nav-next-stop {
    background: #2a2a2a !important;
    border-color: #444 !important;
}
html.map-dark-mode .nav-stats {
    background: #252525 !important;
}
html.map-dark-mode .nav-stat {
    color: #ccc !important;
}
html.map-dark-mode .nav-stat-value {
    color: #fff !important;
}

/* Nav instruction panel - Facebook blue */
.nav-instruction-panel {
    background: #1877F2 !important;
}

/* Nav distance/mileage - white on blue panel */
html.map-light-mode .nav-instruction-panel .nav-distance,
html.map-light-mode .nav-instruction-panel .nav-distance *,
html.map-dark-mode .nav-instruction-panel .nav-distance,
html.map-dark-mode .nav-instruction-panel .nav-distance * {
    color: white !important;
}
/* Nav next stop distance can be Facebook blue */
html.map-light-mode .nav-next-stop-distance {
    color: #1877F2 !important;
}
html.map-dark-mode .nav-next-stop-distance {
    color: #4A9FF5 !important;
}

/* GPT Trip Summary/Intro Modal follows map time mode */
html.map-light-mode .gpt-modal-content,
html.map-light-mode[data-theme="dark"] .gpt-modal-content {
    background: #ffffff !important;
    color: #333333 !important;
}
html.map-light-mode .gpt-modal-content *,
html.map-light-mode .gpt-modal-header,
html.map-light-mode .gpt-modal-header h3,
html.map-light-mode .gpt-modal-body,
html.map-light-mode .gpt-modal-body p,
html.map-light-mode .gpt-modal-footer {
    color: #333333 !important;
    background-color: transparent !important;
}
html.map-light-mode .gpt-modal-header {
    border-bottom-color: #eee !important;
}
html.map-light-mode .gpt-modal-close {
    color: #666 !important;
}
html.map-light-mode .gpt-modal-close:hover {
    color: #333 !important;
}

html.map-dark-mode .gpt-modal-content,
html.map-dark-mode[data-theme="light"] .gpt-modal-content {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
}
html.map-dark-mode .gpt-modal-content *,
html.map-dark-mode .gpt-modal-header,
html.map-dark-mode .gpt-modal-header h3,
html.map-dark-mode .gpt-modal-body,
html.map-dark-mode .gpt-modal-body p,
html.map-dark-mode .gpt-modal-footer {
    color: #e0e0e0 !important;
    background-color: transparent !important;
}
html.map-dark-mode .gpt-modal-header {
    border-bottom-color: #444 !important;
}
html.map-dark-mode .gpt-modal-close {
    color: #aaa !important;
}
html.map-dark-mode .gpt-modal-close:hover {
    color: #fff !important;
}

/* Force nav-icon arrows to be white */
.nav-icon svg,
.nav-icon svg path,
.nav-icon .material-icons,
.nav-icon * {
    color: white !important;
    fill: white !important;
}

/* Nav distance/mileage text - should be white on blue panel */
.nav-distance {
    color: white !important;
}

/* The countdown/ETA text should also be styled */
.nav-eta,
.nav-instruction {
    color: white !important;
}

/* Nav directions popup (during navigation) follows map time mode */
html.map-light-mode .nav-directions-sheet,
html.map-light-mode .nav-directions-popup .nav-directions-sheet,
html.map-light-mode[data-theme="dark"] .nav-directions-sheet {
    background: #ffffff !important;
}
html.map-light-mode .nav-directions-header,
html.map-light-mode .nav-directions-footer {
    background: #ffffff !important;
    border-color: #eee !important;
    color: #333333 !important;
}
html.map-light-mode .nav-directions-list {
    background: #ffffff !important;
}
html.map-light-mode .nav-directions-close {
    color: #666 !important;
}
html.map-light-mode .nav-directions-close:hover {
    background: #f5f5f5 !important;
}
html.map-light-mode .nav-directions-popup .direction-item {
    background: #f8f8f8 !important;
    color: #333333 !important;
    border-color: #ddd !important;
}
html.map-light-mode .nav-directions-popup .direction-item *,
html.map-light-mode .nav-directions-popup .direction-text,
html.map-light-mode .nav-directions-popup .direction-distance,
html.map-light-mode .nav-directions-popup .direction-details * {
    color: #333333 !important;
}
html.map-light-mode .nav-directions-popup .direction-distance {
    background: #e8e8e8 !important;
    color: #555 !important;
}
html.map-light-mode .nav-directions-popup .direction-icon {
    background: #22c55e !important;
    color: white !important;
}
html.map-light-mode .nav-directions-popup .direction-icon * {
    color: white !important;
    fill: white !important;
}
html.map-light-mode .nav-directions-popup .direction-segment-header {
    background: #1877F2 !important;
    color: white !important;
}

html.map-dark-mode .nav-directions-sheet,
html.map-dark-mode .nav-directions-popup .nav-directions-sheet,
html.map-dark-mode[data-theme="light"] .nav-directions-sheet {
    background: #1a1a2e !important;
}
html.map-dark-mode .nav-directions-header,
html.map-dark-mode .nav-directions-footer {
    background: #1a1a2e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}
html.map-dark-mode .nav-directions-list {
    background: #1a1a2e !important;
}
html.map-dark-mode .nav-directions-close {
    color: #aaa !important;
}
html.map-dark-mode .nav-directions-close:hover {
    background: #2a2a4e !important;
}
html.map-dark-mode .nav-directions-popup .direction-item {
    background: #2a2a4e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
html.map-dark-mode .nav-directions-popup .direction-item *,
html.map-dark-mode .nav-directions-popup .direction-text,
html.map-dark-mode .nav-directions-popup .direction-distance,
html.map-dark-mode .nav-directions-popup .direction-details * {
    color: #e0e0e0 !important;
}
html.map-dark-mode .nav-directions-popup .direction-distance {
    background: #3a3a5e !important;
    color: #ccc !important;
}
html.map-dark-mode .nav-directions-popup .direction-icon {
    background: #22c55e !important;
    color: white !important;
}
html.map-dark-mode .nav-directions-popup .direction-icon * {
    color: white !important;
    fill: white !important;
}
html.map-dark-mode .nav-directions-popup .direction-segment-header {
    background: #1877F2 !important;
    color: white !important;
}

/* Your Trip Awaits header must be white */
.gpt-modal-header h3,
.gpt-modal-header h3 *,
html.map-light-mode .gpt-modal-header h3,
html.map-dark-mode .gpt-modal-header h3 {
    color: white !important;
}

/* 3D Car Color Picker */
.car-color-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.car-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
}

.car-color-swatch:hover {
    transform: scale(1.15);
}

.car-color-swatch.active {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3);
}


/* Hide 2D car marker when using 3D car */
.nav-car-marker-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Fixed car overlay - stays at screen center during navigation */
.fixed-nav-car {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none;
    transition: none;
}
.fixed-nav-car .nav-car-svg {
    width: 50px;
    height: 60px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* ============================================
   Fixed Navigation Car Overlay
   Car stays anchored on screen, map moves beneath
   ============================================ */
.fixed-nav-car {
    position: fixed;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none;
}

.fixed-nav-car .nav-car-svg {
    width: 50px;
    height: 75px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Billboard Location Picker */
.location-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 15px 0;
    border: 1px solid #333;
    border-radius: 8px;
}
.location-item {
    padding: 12px 15px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background 0.2s;
}
.location-item:last-child {
    border-bottom: none;
}
.location-item:hover {
    background: rgba(255,255,255,0.1);
}
.location-item .name {
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}
.location-item .address {
    color: #aaa;
    font-size: 0.85em;
}
.location-item .distance {
    color: #4CAF50;
    font-size: 0.85em;
    margin-top: 4px;
}

/* Legend distance slider */
.legend-radius-control {
    padding: 10px 16px 12px;
    background: rgba(24, 119, 242, 0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.legend-radius-control label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.legend-radius-control strong {
    color: var(--text-primary);
}
#legendRadiusContext {
    font-size: 11px;
    opacity: 0.7;
}
.legend-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.legend-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1877F2;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Distance label above markers during nav */
.poi-distance-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
}

/* Force Facebook blue on legend slider - all browsers */
.legend-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #1877F2 !important;
    cursor: pointer !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.legend-slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #1877F2 !important;
    cursor: pointer !important;
    border: 2px solid #fff !important;
}

/* ===== Charger Popup Modal ===== */
.maplibregl-popup.charger-popup-wrap .maplibregl-popup-content { width: 500px !important; min-width: 500px !important;
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-width: 500px !important;
    color: var(--text-primary, #fff);
}
.maplibregl-popup.charger-popup-wrap .maplibregl-popup-close-button {
    color: var(--text-secondary, #aaa);
    font-size: 20px;
    right: 8px;
    top: 8px;
}
.charger-popup-content { padding: 16px; }
.charger-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.charger-popup-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    padding-right: 8px;
}
.charger-version-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
}
.charger-version-badge.v2 { background: #607D8B; }
.charger-version-badge.v3 { background: #1877F2; }
.charger-version-badge.v4 { background: #4CAF50; }

.charger-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    color: var(--text-secondary, #ccc);
}
.charger-detail-row .detail-icon { width: 18px; text-align: center; flex-shrink: 0; }
.charger-detail-row strong { color: var(--text-primary, #fff); }

.charger-amenities-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    max-height: 150px;
    overflow-y: auto;
}
.charger-amenities-section h4 {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.amenities-loading {
    font-size: 12px;
    color: var(--text-secondary, #888);
    padding: 8px 0;
}
.amenity-group { margin-bottom: 6px; }
.amenity-group-label {
    font-size: 11px;
    color: var(--text-secondary, #888);
    margin-bottom: 3px;
    font-weight: 600;
}
.amenity-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 2px 0;
    color: var(--text-primary, #ddd);
}
.amenity-item .amenity-dist {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}
.amenity-show-more {
    font-size: 11px;
    color: #1877F2;
    cursor: pointer;
    padding: 2px 0;
    border: none;
    background: none;
}

.charger-popup-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.charger-action-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: opacity 0.15s;
}
.charger-action-btn:hover { opacity: 0.85; }
.charger-action-btn.replace-btn { background: #1877F2; color: #fff; }
.charger-action-btn.remove-btn { background: #e53935; color: #fff; }

/* ===== Replace / Confirm Modals ===== */
.charger-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.charger-modal-overlay.hidden { display: none; }
.charger-modal-card {
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.charger-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.charger-modal-header h3 { margin: 0; font-size: 16px; color: var(--text-primary, #fff); }
.charger-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary, #aaa);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
}
.charger-modal-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}
.charger-modal-body p {
    font-size: 14px;
    color: var(--text-secondary, #ccc);
    margin: 0 0 12px;
}

.replace-candidate {
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.replace-candidate:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: #1877F2;
}
.replace-candidate-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}
.replace-candidate-details {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.replace-candidate-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    color: #fff;
}

.charger-modal-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.charger-modal-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.charger-modal-btn.primary { background: #1877F2; color: #fff; }
.charger-modal-btn.secondary { background: rgba(255,255,255,0.1); color: var(--text-primary, #fff); }
.charger-modal-btn:hover { opacity: 0.85; }

.range-warning {
    background: rgba(229, 57, 53, 0.15);
    border: 1px solid rgba(229, 57, 53, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #ff8a80;
}

/* Street View in charger popup */
.charger-streetview {
    margin: -16px -16px 12px -16px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
.charger-streetview img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    display: block;
}

/* Charger popup redesign */
.charger-popup-body { padding: 14px 16px 16px; }
.charger-popup-content { padding: 0; }
.charger-info-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.charger-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #ccc);
}
.charger-info-item strong { color: var(--text-primary, #fff); }
.charger-charge-info {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.charger-charge-info .charger-detail-row {
    padding: 2px 0;
    font-size: 12px;
}
.charger-streetview iframe {
    border-radius: 12px 12px 0 0;
    display: block;
}

/* Force charger popup to match iframe width */
.maplibregl-popup.charger-popup-wrap {
    max-width: none !important;
}
.maplibregl-popup.charger-popup-wrap .maplibregl-popup-content {
    padding: 0 !important;
    overflow: hidden !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}
.charger-streetview iframe {
    width: 500px !important;
    height: 220px;
    display: block;
    border-radius: 12px 12px 0 0;
}
.charger-popup-body {
    width: 500px;
    box-sizing: border-box;
}

/* Padding around Street View iframe */
.charger-streetview {
    padding: 12px 12px 0 12px;
}
.charger-streetview iframe {
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box;
}
.charger-popup-body {
    width: auto !important;
    padding: 12px 16px 16px !important;
}
.maplibregl-popup.charger-popup-wrap .maplibregl-popup-content {
    width: 520px !important;
    min-width: 520px !important;
    border-radius: 12px !important;
}

/* DEFINITIVE charger popup layout — overrides all previous */
.maplibregl-popup.charger-popup-wrap .maplibregl-popup-content {
    padding: 16px !important;
    width: 480px !important;
    max-width: 480px !important;
    min-width: 480px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.charger-popup-content {
    padding: 0 !important;
}
.charger-streetview {
    margin: -16px -16px 14px -16px !important;
    padding: 0 !important;
}
.charger-streetview iframe {
    width: calc(100% + 0px) !important;
    height: 240px !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
}
.charger-popup-body {
    padding: 0 !important;
    width: auto !important;
}

/* FINAL charger popup — simple approach */
.charger-streetview {
    margin: 0 !important;
    padding: 14px 14px 0 14px !important;
    box-sizing: border-box !important;
}
.charger-streetview iframe {
    width: 100% !important;
    height: 230px !important;
    border-radius: 10px !important;
    border: none !important;
    display: block !important;
}

/* Align text with iframe edges */
.charger-popup-body {
    padding: 12px 14px 14px 14px !important;
}
.charger-popup-header {
    padding: 0 !important;
    margin-bottom: 10px !important;
}
.charger-info-grid,
.charger-charge-info,
.charger-amenities-section,
.charger-popup-actions {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Cross-reference section in POI popups */
.crossref-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.crossref-section { margin-bottom: 8px; }
.crossref-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.crossref-item {
    font-size: 12px;
    color: #333;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.crossref-item .amenity-dist {
    margin-left: auto;
    color: #888;
    font-size: 11px;
    flex-shrink: 0;
}
.crossref-streetview { margin-top: 4px; }

/* Redesigned charger amenities layout */
.charger-amenities-section {
    max-height: 280px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
}
.amenity-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.amenity-category {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px 10px;
}
.amenity-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #eee);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.amenity-cat-header .cat-icon {
    font-size: 14px;
}
.amenity-cat-header .cat-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary, #888);
}
.amenity-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 2px 0;
    color: var(--text-primary, #ccc);
}
.amenity-cat-item .amenity-dist {
    font-size: 10px;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
    margin-left: 6px;
}
.amenity-cat-more {
    font-size: 10px;
    color: #1877F2;
    cursor: pointer;
    padding: 2px 0 0;
    border: none;
    background: none;
    display: block;
}

/* Red notification bubble for category count */
.amenity-cat-header .cat-count {
    background: #e53935 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px;
    height: 18px;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* Move bubble next to title instead of right-aligned */
.amenity-cat-header .cat-count {
    margin-left: 4px !important;
}

/* Clickable amenity names */
.amenity-name {
    cursor: pointer;
    transition: color 0.15s;
}
.amenity-name:hover {
    color: #1877F2 !important;
    text-decoration: underline;
}

/* Amenity confirmation modal */
.amenity-confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.15s ease;
}
.amenity-confirm-content {
    background: var(--bg-primary, #1a1a2e);
    border-radius: 18px;
    padding: 28px 24px;
    max-width: 420px;
    width: 92%;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.amenity-confirm-content h4 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--text-primary, #fff);
}
.amenity-confirm-content p {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text-secondary, #aaa);
    line-height: 1.4;
}
.amenity-confirm-note {
    font-size: 12px !important;
    opacity: 0.6;
}
.amenity-confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}
.amenity-confirm-btn {
    flex: 1;
    padding: 16px 10px;
    border-radius: 12px;
    border: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    min-height: 52px;
}
.amenity-confirm-btn:hover { opacity: 0.85; }
.amenity-confirm-btn.cancel {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary, #fff);
}
.amenity-confirm-btn.confirm {
    background: #1877F2;
    color: #fff;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Billboard location picker — distance display */
.location-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.location-item-main {
    flex: 1;
    min-width: 0;
}
.location-item-dist {
    font-size: 12px;
    font-weight: 600;
    color: #1877F2;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Brand location picker modal */
.brand-picker-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.15s ease;
}
.brand-picker-content {
    background: var(--bg-primary, #1a1a2e);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 420px;
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.brand-picker-header {
    display: flex;
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-picker-header h4 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary, #fff);
    flex: 1;
}
.brand-picker-count {
    font-size: 12px;
    color: var(--text-secondary, #888);
    margin-right: 12px;
}
.brand-picker-close {
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.brand-picker-list {
    overflow-y: auto;
    padding: 8px 0;
}
.brand-pick-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.brand-pick-item:hover, .brand-pick-item:active {
    background: rgba(255,255,255,0.06);
}
.brand-pick-info {
    flex: 1;
    min-width: 0;
}
.brand-pick-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-pick-addr {
    font-size: 12px;
    color: var(--text-secondary, #888);
    margin-top: 2px;
}
.brand-pick-dist {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
}
.brand-pick-miles {
    font-size: 14px;
    font-weight: 700;
    color: #1877F2;
}
.brand-pick-time {
    font-size: 11px;
    color: var(--text-secondary, #888);
    margin-top: 1px;
}

/* Billboard confirm popup */
.billboard-confirm {
    text-align: left;
}
.billboard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.billboard-logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255,255,255,0.08);
    padding: 6px;
    flex-shrink: 0;
}
.billboard-info h4 {
    margin: 0 0 6px;
    font-size: 22px;
    color: var(--text-primary, #fff);
}
.billboard-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.billboard-dist {
    font-size: 16px;
    color: #4CAF50;
    font-weight: 600;
}
.billboard-addr {
    font-size: 14px;
    color: var(--text-secondary, #999);
}

.billboard-hours {
    font-size: 13px;
    color: #60a5fa;
}