/* ============================================
   Whiskey Venues - Beta Homepage Styles
   Color Palette from Figma:
   - Whiskey Very Dark: #3C220B
   - Whiskey Dark: #442609
   - Whiskey Medium (Logo): #C16C18
   - Whiskey Light: #FFD8B2, #FFDA89
   ============================================ */

/* CSS Custom Properties */
:root {
    --color-whiskey-very-dark: #3C220B;
    --color-whiskey-dark: #442609;
    --color-whiskey-medium: #C16C18;
    --color-whiskey-orange: #E97B35;
    --color-whiskey-light: #FFD8B2;
    --color-whiskey-lighter: #FFDA89;
    --color-whiskey-very-light: #FFF5EC;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray: #ABABAB;

    /* Mobile Bottom Card Colors (Flutter theme alignment) */
    --whiskey-dark: #884C11;
    --whiskey-medium: #C16C18;
    --whiskey-light: #FFD8B2;
    --whiskey-very-light: #FFF5EC;
    
    /* Marker Colors */
    --color-premium: #FFD700;
    --color-standard: #808080;
    --color-producer: #8B4513;
    
    /* Transparency */
    --panel-bg: rgba(66, 45, 27, 0.8);  /* 80% opacity to match mobile */
    --form-bg: #000000;
    
    /* Spacing */
    --header-height: 60px;
    --panel-width: 380px;
    --panel-padding: 20px;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-whiskey-dark);
    color: var(--color-whiskey-light);
    line-height: 1.5;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Map page specific - prevent scrolling on the map interface */
body.map-page {
    overflow: hidden;
}

/* Static pages - allow normal scrolling */
body:has(.page-layout) {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* ============================================
   Login Screen
   ============================================ */
.login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-whiskey-dark);
    z-index: 1000;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    text-align: center;
}

.login-logo img {
    max-width: 200px;
    height: auto;
    margin-bottom: 30px;
}

.login-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-whiskey-light);
    margin-bottom: 10px;
}

.login-subtitle {
    font-size: 16px;
    color: var(--color-gray);
    margin-bottom: 30px;
}

.login-form {
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-whiskey-light);
    margin-bottom: 8px;
}

.login-form input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid var(--color-whiskey-very-dark);
    border-radius: 8px;
    background-color: var(--color-whiskey-light);
    color: var(--color-black);
    transition: border-color 0.2s;
}

.login-form input:focus {
    outline: none;
    border-color: var(--color-whiskey-medium);
}

.login-form input::placeholder {
    color: var(--color-gray);
}

.login-error {
    color: #FF6B6B;
    font-size: 14px;
    margin-bottom: 15px;
    min-height: 20px;
}

.login-footer {
    margin-top: 30px;
    font-size: 14px;
    color: var(--color-gray);
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-whiskey-medium);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-primary:hover {
    background-color: #D97B1F;
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-whiskey-light);
    background-color: transparent;
    border: 2px solid var(--color-whiskey-light);
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: rgba(255, 216, 178, 0.1);
}

.btn-logout {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-whiskey-light);
    background-color: transparent;
    border: 1px solid var(--color-whiskey-light);
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-logout:hover {
    background-color: rgba(255, 216, 178, 0.1);
}

/* ============================================
   Main App Layout
   ============================================ */
.app {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Header */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: var(--color-whiskey-very-dark);
    z-index: 2500;  /* Above search-panel (2000) so dropdown menus appear on top */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-logo img {
    height: 40px;
    width: auto;
}

/* Desktop notify button - same style as mobile */
.desktop-notify-btn {
    background: #FAE36F;
    color: #000;
    border: 2px solid #000;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.1s;
}

.desktop-notify-btn:hover {
    background: #f5d94d;
}

.desktop-notify-btn:active {
    transform: scale(0.95);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ============================================
   Header Navigation
   ============================================ */
.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--color-whiskey-light);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 6px;
}

.nav-link:hover {
    color: var(--color-white);
    background-color: rgba(255, 216, 178, 0.1);
}

.nav-dropdown {
    position: relative;
    /* Create stacking context for z-index to work properly */
    z-index: 100;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dropdown-arrow {
    transition: transform 0.2s;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background-color: var(--color-whiskey-very-dark);
    border: 1px solid rgba(255, 216, 178, 0.2);
    border-radius: 8px;
    padding: 8px 0;
    /* Add padding-top to create hover bridge, compensate with negative margin */
    padding-top: 12px;
    margin-top: -4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 3000;
}

/* Invisible hover bridge to maintain hover state when moving to dropdown */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: block;
    padding: 10px 20px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.nav-dropdown-item:hover {
    background-color: rgba(193, 108, 24, 0.4);
    color: var(--color-whiskey-lighter);
}

/* Map Container */
.map-container {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
}

/* ============================================
   Search Panel
   ============================================ */
.search-panel {
    position: absolute;
    top: calc(var(--header-height) + 10px);
    left: 10px;
    bottom: 10px;
    width: var(--panel-width);
    background-color: var(--panel-bg);
    border-radius: 15px;
    overflow-y: auto;
    z-index: 2000;  /* Above all markers (500-990) and popups (1100) */
    display: flex;
    flex-direction: column;
}

.search-panel-header {
    padding: 20px;
    text-align: center;
}

.panel-logo {
    max-width: 75px;
    height: auto;
}

.search-form-container {
    background-color: var(--form-bg);
    margin: 0 15px;
    padding: 20px;
    border-radius: 20px;
}

.search-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-whiskey-light);
    margin-bottom: 15px;
}

/* Segmented Control for Search Type */
.search-type-group {
    margin-bottom: 20px;
}

.segmented-control {
    display: flex;
    background: rgba(171, 171, 171, 0.3);
    border-radius: 8px;
    padding: 2px;
}

.segment {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--color-whiskey-light);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 6px;
    text-align: center;
}

.segment.active {
    background: var(--color-whiskey-light);
    color: var(--color-black);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.segment.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.segment:not(.disabled):not(.active):hover {
    background: rgba(255, 216, 178, 0.1);
}

/* Form Groups */
.form-group {
    margin-bottom: 15px;
}

/* Location Selection Group */
.location-selection-group {
    margin-bottom: 15px;
}

.location-selection-group label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-whiskey-light);
    margin-bottom: 8px;
}

.location-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.location-control span {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-whiskey-light);
}

.location-segmented {
    display: flex;
    background: rgba(171, 171, 171, 0.3);
    border-radius: 8px;
    padding: 2px;
    flex: 1;
}

.location-segment {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-whiskey-light);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 6px;
    text-align: center;
}

.location-segment.active {
    background: var(--color-whiskey-light);
    color: var(--color-black);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.location-segment:not(.active):hover {
    background: rgba(255, 216, 178, 0.1);
}

#address-input-container {
    margin-top: 8px;
}

#address-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    background-color: var(--color-whiskey-light);
    border: 2px solid var(--color-black);
    border-radius: 0;
}

.form-group label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-whiskey-light);
    margin-bottom: 8px;
}

.select-input,
.text-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    background-color: var(--color-whiskey-light);
    border: 2px solid var(--color-black);
    border-radius: 0;
    appearance: none;
    cursor: pointer;
}

.select-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 44px;
}

.text-input::placeholder {
    color: var(--color-gray);
    font-weight: 600;
}

/* Venue Type Filters */
.venue-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-whiskey-light);
    border-radius: 3px;
    position: relative;
}

.checkbox-custom.premium {
    background-color: var(--color-premium);
    border-color: var(--color-premium);
}

.checkbox-custom.standard {
    background-color: var(--color-standard);
    border-color: var(--color-standard);
}

.checkbox-custom.producer {
    background-color: var(--color-whiskey-light);
    border-color: var(--color-whiskey-light);
}

/* Hospitality checkbox - whiskey light background with black checkmark */
.checkbox-custom.hospitality {
    background-color: var(--color-whiskey-light);
    border-color: var(--color-whiskey-light);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 14px;
    color: var(--color-whiskey-light);
}

/* Search Form Buttons */
.search-form-container .btn-primary {
    margin-bottom: 10px;
}

.search-form-container .btn-secondary {
    font-size: 14px;
    padding: 10px 16px;
}

/* Sign Up CTA - REMOVED */

/* ============================================
   Mobile Search Toggle
   ============================================ */
.mobile-search-toggle {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 56px;
    height: 56px;
    background-color: var(--color-whiskey-medium);
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 40;
}

/* ============================================
   Mobile-Only Elements (Hidden on Desktop)
   ============================================ */
.search-bar-collapsed,
.filter-chips,
.modal-header,
.drag-handle,
.mobile-bottom-card,
.mobile-hamburger-btn,
.mobile-menu-overlay,
.mobile-menu-panel {
    display: none;
}

/* ============================================
   Venue Detail Card
   ============================================ */
.venue-card {
    position: absolute;
    top: calc(var(--header-height) + 20px);
    right: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
    background-color: var(--color-whiskey-very-dark);
    border-radius: 10px;
    z-index: 2000;  /* Above all markers (500-990) and popups (1100) */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.venue-card-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--color-whiskey-light);
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.venue-card-close:hover {
    opacity: 1;
}

.venue-card-content {
    padding: 20px;
}

.venue-card-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-whiskey-light);
    margin-bottom: 5px;
    padding-right: 30px;
}

.venue-card-type {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-whiskey-light);
    margin-bottom: 10px;
}

.venue-card-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-whiskey-light);
    margin-bottom: 8px;
}

.venue-card-address.hidden {
    display: none;
}

.venue-card-address svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Distance - same styling as address */
.venue-card-distance {
    font-size: 14px;
    color: var(--color-whiskey-light);
    margin-bottom: 12px;
}

.venue-card-distance.hidden {
    display: none;
}

.venue-card-description {
    font-size: 14px;
    color: var(--color-whiskey-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.venue-card-description.hidden {
    display: none;
}

.venue-card-website {
    font-size: 13px;
    color: #D4A574;
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
}

.venue-card-website.hidden {
    display: none;
}

.venue-card-website:hover {
    text-decoration: underline;
}

.venue-card-actions {
    display: flex;
    gap: 10px;
}

.venue-card-actions .btn-primary,
.venue-card-actions .btn-secondary {
    flex: 1;
    font-size: 16px;
    padding: 12px 16px;
}

/* ============================================
   Loading Overlay
   ============================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(68, 38, 9, 0.9);
    z-index: 2000;
}

.loading-overlay.hidden {
    display: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-whiskey-light);
    border-top-color: var(--color-whiskey-medium);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-overlay p {
    margin-top: 20px;
    font-size: 16px;
    color: var(--color-whiskey-light);
}

/* ============================================
   Mapbox Popup Overrides
   ============================================ */
.mapboxgl-popup-content {
    background-color: var(--color-whiskey-very-dark);
    color: var(--color-whiskey-light);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: var(--color-whiskey-very-dark);
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: var(--color-whiskey-very-dark);
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--color-whiskey-very-dark);
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--color-whiskey-very-dark);
}

.mapboxgl-popup-close-button {
    color: var(--color-whiskey-light);
    font-size: 18px;
}

/* Marker z-index hierarchy - applied to Mapbox marker wrappers */
/* Z-index is set via JavaScript inline styles based on venue_type + venue_status */
/* Order (top to bottom): premier > partner > managed > unclaimed */
/* Within same status: hospitality > producer */

/* Default fallback - let JS inline styles take precedence */
.mapboxgl-marker {
    /* z-index controlled by JavaScript inline styles */
}

/* Status-based z-index using data attributes set by JavaScript */
/* Premier (highest) */
.mapboxgl-marker[data-venue-status="premier"] {
    z-index: 1000 !important;
}
.mapboxgl-marker[data-venue-type="producer"][data-venue-status="premier"] {
    z-index: 950 !important;
}

/* Partner */
.mapboxgl-marker[data-venue-status="partner"] {
    z-index: 900 !important;
}
.mapboxgl-marker[data-venue-type="producer"][data-venue-status="partner"] {
    z-index: 850 !important;
}

/* Managed */
.mapboxgl-marker[data-venue-status="managed"] {
    z-index: 800 !important;
}
.mapboxgl-marker[data-venue-type="producer"][data-venue-status="managed"] {
    z-index: 750 !important;
}

/* Unclaimed (lowest) */
.mapboxgl-marker[data-venue-status="unclaimed"] {
    z-index: 700 !important;
}
.mapboxgl-marker[data-venue-type="producer"][data-venue-status="unclaimed"] {
    z-index: 650 !important;
}

/* Selected marker always on top */
.mapboxgl-marker.selected-marker {
    z-index: 1100 !important;
}

/* Mapbox controls (zoom, compass, etc.) - above all markers */
.mapboxgl-control-container,
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-top-left,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-group,
.mapboxgl-ctrl {
    z-index: 1200 !important;
}

/* CRITICAL: Ensure ALL popups appear above ALL markers including transformed ones */
/* Target all mapbox popups aggressively - use transform to force GPU layer */
.mapboxgl-popup {
    z-index: 9999 !important;
    transform: translateZ(0);  /* Force into separate compositing layer */
    will-change: transform;
}

/* Popup wrapper - ensure it's in front */
.mapboxgl-popup.venue-popup {
    z-index: 9999 !important;
}

.popup-content {
    min-width: 150px;
}

.popup-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.popup-type {
    font-size: 12px;
    color: var(--color-gray);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .search-panel {
        width: 320px;
    }

    .venue-card {
        width: 350px;
    }

    /* Reduce segmented control padding at tablet size */
    .segment {
        padding: 8px 10px;
        font-size: 14px;
    }

    /* Reduce nav spacing on tablet */
    .header-nav {
        gap: 4px;
    }

    .nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* NOTE: any layout-critical rule added here should also be mirrored under
       body.pourlydone-embedded (~line 3360) for iPad/tablet embedded support.
       Embedded mode runs at iPad viewports (>768px) which miss this media query. */
    :root {
        --header-height: 0px;
    }

    /* Hide header on mobile */
    .header {
        display: none;
    }

    /* ============================================
       Mobile Hamburger Menu
       ============================================ */

    /* Hamburger Button */
    .mobile-hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 16px;
        left: 16px;
        width: 48px;
        height: 48px;
        background-color: var(--color-whiskey-orange);
        border: 2px solid var(--color-black);
        border-radius: 50%;
        color: var(--color-black);
        cursor: pointer;
        z-index: 3000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-hamburger-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    .mobile-hamburger-btn:active {
        transform: scale(0.95);
    }

    .mobile-hamburger-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 3500;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-overlay.visible {
        display: block;
        opacity: 1;
    }

    /* Menu Panel */
    .mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background-color: var(--color-whiskey-very-dark);
        z-index: 4000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu-panel.open {
        transform: translateX(0);
    }

    /* Menu Header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 216, 178, 0.2);
    }

    .mobile-menu-logo {
        height: 32px;
        width: auto;
    }

    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        color: var(--color-whiskey-light);
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

    .mobile-menu-close:hover {
        background-color: rgba(255, 216, 178, 0.1);
    }

    .mobile-menu-close svg {
        width: 24px;
        height: 24px;
    }

    /* Menu List */
    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 12px 0;
    }

    .mobile-menu-item {
        border-bottom: 1px solid rgba(255, 216, 178, 0.1);
    }

    .mobile-menu-item:last-child {
        border-bottom: none;
    }

    /* Menu Links */
    .mobile-menu-link {
        display: block;
        padding: 16px 20px;
        color: var(--color-whiskey-light);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mobile-menu-link:hover,
    .mobile-menu-link:focus {
        background-color: rgba(193, 108, 24, 0.3);
        color: var(--color-white);
    }

    /* Submenu Toggle Button */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 20px;
        background: transparent;
        border: none;
        color: var(--color-whiskey-light);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background-color: rgba(193, 108, 24, 0.3);
        color: var(--color-white);
    }

    .mobile-menu-chevron {
        transition: transform 0.3s ease;
    }

    .mobile-menu-item.expanded .mobile-menu-chevron {
        transform: rotate(180deg);
    }

    /* Submenu */
    .mobile-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.2);
        transition: max-height 0.3s ease;
    }

    .mobile-menu-item.expanded .mobile-submenu {
        max-height: 200px;
    }

    .mobile-submenu-link {
        display: block;
        padding: 14px 20px 14px 36px;
        color: var(--color-whiskey-light);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mobile-submenu-link:hover,
    .mobile-submenu-link:focus {
        background-color: rgba(193, 108, 24, 0.4);
        color: var(--color-whiskey-lighter);
    }

    /* Map fills entire viewport */
    .map-container {
        top: 0;
    }

    /* Hide old mobile UI elements */
    .search-bar-collapsed,
    .filter-chips {
        display: none !important;
    }

    /* ============================================
       Apple Maps-Style Mobile Bottom Card
       ============================================ */

    .mobile-bottom-card {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(66, 45, 27, 0.8);
        border-radius: 16px 16px 0 0;
        padding: 12px 16px 16px;
        z-index: 2000;
    }

    .mobile-bottom-card .drag-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: #FFD8B2;
        border-radius: 2px;
        margin: 0 auto 12px;
        position: relative;
        cursor: pointer;
    }

    .mobile-bottom-card .drag-handle::before {
        content: '';
        position: absolute;
        /* Expand invisible touch area 20px in all directions */
        top: -20px;
        bottom: -20px;
        left: -30px;
        right: -30px;
        /* Make it invisible but clickable */
        background: transparent;
    }

    .mobile-bottom-card .brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .mobile-bottom-card .brand {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-bottom-card .brand img {
        height: 32px;
        width: auto;
    }

    .mobile-bottom-card .brand-name {
        color: #FFD8B2;
        font-size: 18px;
        font-weight: 600;
    }

    .mobile-bottom-card .notify-btn {
        background: #FAE36F;
        color: #000;
        border: 2px solid #000;
        border-radius: 50px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-bottom-card .notify-btn:active {
        transform: scale(0.95);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .mobile-search-pill {
        display: flex;
        align-items: center;
        background: var(--color-whiskey-light);
        border-radius: 50px;
        padding: 10px 16px;
        gap: 10px;
        min-height: 44px;
    }

    .mobile-search-pill .search-icon {
        color: #C16C18;
        font-size: 18px;
    }

    .mobile-search-pill input {
        flex: 1;
        border: none;
        background: transparent;
        color: #C16C18;
        font-size: 16px;
        outline: none;
    }

    .mobile-search-pill input::placeholder {
        color: #888888;
        opacity: 1;
    }

    .search-clear-btn {
        background: none;
        border: none;
        color: #C16C18;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
        opacity: 0.7;
    }

    .search-clear-btn:hover {
        opacity: 1;
    }

    .search-clear-btn.hidden {
        display: none;
    }

    /* ============================================
       WHI-360: Collapsed Search Bar for Mobile
       ============================================ */

    /* Hide full search panel on mobile by default */
    .search-panel {
        display: none;
    }

    /* Old collapsed search bar - HIDDEN */
    .search-bar-collapsed-old {
        display: flex;
        align-items: center;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        height: 56px;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 8px 16px;
        z-index: 1000;
        gap: 12px;
    }

    .search-bar-collapsed .search-icon,
    .search-bar-collapsed .menu-icon {
        width: 24px;
        height: 24px;
        color: #666;
        cursor: pointer;
    }

    .search-bar-collapsed input {
        flex: 1;
        border: none;
        font-size: 16px;
        outline: none;
        background: transparent;
    }

    .search-bar-collapsed input::placeholder {
        color: #999;
    }

    /* ============================================
       WHI-361: Horizontal Filter Chips
       ============================================ */

    /* Filter chips container */
    .filter-chips {
        display: flex;
        position: fixed;
        top: 116px; /* Below search bar */
        left: 0;
        right: 0;
        padding: 12px 16px;
        gap: 8px;
        background: white;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 999;
        border-bottom: 1px solid #e0e0e0;
    }

    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 20px;
        background: white;
        font-size: 14px;
        white-space: nowrap;
        cursor: pointer;
        min-height: 44px;
        transition: all 0.2s ease;
    }

    .filter-chip.active {
        background: #2c3e50;
        color: white;
        border-color: #2c3e50;
    }

    .filter-chip:hover {
        background: #f5f5f5;
    }

    .filter-chip.active:hover {
        background: #1a252f;
    }

    /* ============================================
       WHI-362: Expanded Search Panel as Modal
       ============================================ */

    /* Full-screen search modal */
    .search-panel.expanded {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 2000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(0);
    }

    .search-panel.expanded .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    .search-panel.expanded .close-button {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        color: #666;
        background: none;
        border: none;
        padding: 0;
    }

    .search-panel.expanded .modal-header .search-title {
        flex: 1;
        text-align: center;
        margin: 0;
    }

    .search-panel.expanded input,
    .search-panel.expanded select,
    .search-panel.expanded button {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        margin-bottom: 16px;
    }

    .search-panel.expanded .form-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* ============================================
       WHI-363: Bottom Sheet for Venue Details
       ============================================ */

    /* Venue bottom sheet */
    .venue-card {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
        z-index: 1500;
        max-height: 60vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }

    .venue-card.visible {
        transform: translateY(0);
    }

    .venue-card .drag-handle {
        width: 40px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
        margin: 12px auto 8px;
        position: relative;
        cursor: pointer;
    }

    .venue-card .drag-handle::before {
        content: '';
        position: absolute;
        /* Expand invisible touch area 20px in all directions */
        top: -20px;
        bottom: -20px;
        left: -30px;
        right: -30px;
        /* Make it invisible but clickable */
        background: transparent;
    }

    .venue-card .venue-card-content {
        padding: 16px;
    }

    .venue-card .action-buttons,
    .venue-card .venue-card-actions {
        display: flex;
        gap: 8px;
        padding: 16px;
        padding-top: 0;
    }

    .venue-card .action-button,
    .venue-card .venue-card-actions .btn-primary,
    .venue-card .venue-card-actions .btn-secondary {
        flex: 1;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .venue-card .action-button.primary,
    .venue-card .venue-card-actions .btn-primary {
        background: #2c3e50;
        color: white;
        border-color: #2c3e50;
    }

    /* ============================================
       Mobile Bottom Card - Expanded States
       ============================================ */

    .mobile-bottom-card {
        transition: transform 0.3s ease-out, max-height 0.3s ease-out;
        max-height: 140px;
        overflow: hidden;
    }

    .mobile-bottom-card.expanded {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-bottom-card.search-focused {
        max-height: 85vh;
    }

    /* Expanded search form content */
    .mobile-search-form {
        display: none;
        padding-top: 16px;
    }

    .mobile-bottom-card.expanded .mobile-search-form,
    .mobile-bottom-card.search-focused .mobile-search-form {
        display: block;
    }

    /* When expanded, make search pill input editable */
    .mobile-bottom-card.expanded .mobile-search-pill input,
    .mobile-bottom-card.search-focused .mobile-search-pill input {
        cursor: text;
    }

    .mobile-bottom-card.search-focused .mobile-search-pill {
        border: 2px solid #C16C18;
    }

    /* Search form sections */
    .mobile-search-form .form-section {
        margin-bottom: 16px;
    }

    .mobile-search-form .section-label {
        color: #FFD8B2;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
    }

    /* Segmented controls for mobile */
    .mobile-search-form .mobile-segmented {
        display: flex;
        background: rgba(255, 216, 178, 0.2);
        border-radius: 8px;
        padding: 2px;
    }

    .mobile-search-form .mobile-segment {
        flex: 1;
        padding: 10px 12px;
        border: none;
        background: transparent;
        color: #FFD8B2;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 6px;
        text-align: center;
    }

    .mobile-search-form .mobile-segment.active {
        background: #FFD8B2;
        color: #422D1B;
    }

    /* Mobile select/input styling */
    .mobile-search-form select,
    .mobile-search-form input[type="text"] {
        width: 100%;
        padding: 12px 16px;
        font-size: 16px;
        border: none;
        border-radius: 8px;
        background: var(--color-whiskey-light);
        color: #422D1B;
    }

    /* Venue type chips */
    .mobile-venue-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-venue-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 20px;
        background: rgba(255, 216, 178, 0.2);
        border: 1px solid rgba(255, 216, 178, 0.3);
        color: #FFD8B2;
        font-size: 14px;
        cursor: pointer;
    }

    .mobile-venue-chip.active {
        background: #FFD8B2;
        color: #422D1B;
        border-color: #FFD8B2;
    }

    /* Checkmark for mobile venue chips - hidden by default */
    .mobile-venue-chip .chip-checkmark {
        display: none;
        width: 16px;
        height: 16px;
        position: relative;
    }

    /* Show checkmark only when chip is active */
    .mobile-venue-chip.active .chip-checkmark {
        display: inline-block;
    }

    /* Create the checkmark using CSS */
    .mobile-venue-chip.active .chip-checkmark::after {
        content: '';
        position: absolute;
        left: 4px;
        top: 0;
        width: 5px;
        height: 10px;
        border: solid #000000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .mobile-venue-chip .chip-icon {
        height: 25px;
        width: auto;
    }

    /* Address input container */
    .mobile-address-container {
        margin-top: 8px;
    }

    .mobile-address-container.hidden {
        display: none;
    }

    .mobile-text-input {
        width: 100%;
        padding: 12px 14px;
        border-radius: 10px;
        border: 1px solid rgba(255, 216, 178, 0.3);
        background: rgba(255, 245, 236, 0.95);
        color: #422D1B;
        font-size: 14px;
        box-sizing: border-box;
    }

    .mobile-text-input::placeholder {
        color: rgba(66, 45, 27, 0.5);
    }

    .mobile-text-input:focus {
        outline: none;
        border-color: #C16C18;
        box-shadow: 0 0 0 2px rgba(193, 108, 24, 0.2);
    }

    /* Mobile Autocomplete Dropdown */
    .mobile-search-pill {
        position: relative;
    }

    .mobile-autocomplete {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #FFF5EC;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 200px;
        overflow-y: auto;
        z-index: 1001;
        margin-top: 2px;
    }

    .mobile-autocomplete.hidden {
        display: none;
    }

    .mobile-autocomplete-item {
        padding: 12px 14px;
        color: #422D1B;
        font-size: 14px;
        cursor: pointer;
        border-bottom: 1px solid rgba(66, 45, 27, 0.1);
    }

    .mobile-autocomplete-item:last-child {
        border-bottom: none;
        border-radius: 0 0 12px 12px;
    }

    .mobile-autocomplete-item:active {
        background: rgba(193, 108, 24, 0.1);
    }

    .mobile-autocomplete-item .item-name {
        font-weight: 600;
    }

    .mobile-autocomplete-item .item-type {
        font-size: 12px;
        color: rgba(66, 45, 27, 0.6);
        margin-top: 2px;
    }

    /* Search button */
    .mobile-search-form .mobile-search-btn {
        width: 100%;
        padding: 14px;
        background: #C16C18;
        color: white;
        border: none;
        border-radius: 25px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 8px;
    }

    /* Overlay for closing */
    .mobile-card-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .mobile-card-overlay.visible {
        display: block;
    }

    /* Mobile Venue Detail Card - Dark theme to match desktop */
    .mobile-venue-card {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-whiskey-very-dark);
        border-radius: 16px 16px 0 0;
        padding: 12px 16px 24px;
        z-index: 2000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        transform: translateY(0);
        transition: transform 0.3s ease-out;
    }

    .mobile-venue-card.hidden {
        display: none;
    }

    .mobile-venue-card .drag-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: var(--color-whiskey-light);
        border-radius: 2px;
        margin: 0 auto 12px;
        position: relative;
        cursor: pointer;
    }

    .mobile-venue-card .drag-handle::before {
        content: '';
        position: absolute;
        /* Expand invisible touch area 20px in all directions */
        top: -20px;
        bottom: -20px;
        left: -30px;
        right: -30px;
        /* Make it invisible but clickable */
        background: transparent;
    }

    .mobile-venue-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(255, 216, 178, 0.2);
        border-radius: 50%;
        font-size: 20px;
        color: var(--color-whiskey-light);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-venue-header {
        margin-bottom: 8px;
        padding-right: 40px;
    }

    .mobile-venue-name {
        font-size: 22px;
        font-weight: 700;
        color: var(--color-whiskey-light);
        margin: 0 0 4px;
    }

    .mobile-venue-type {
        font-size: 14px;
        color: var(--color-whiskey-light);
        margin: 0;
        font-weight: 500;
    }

    .mobile-venue-menu-count {
        font-size: 13px;
        color: var(--color-whiskey-light);
        margin: 4px 0 0;
    }

    .mobile-venue-menu-count.hidden {
        display: none;
    }

    .mobile-venue-distance {
        font-size: 13px;
        color: rgba(255, 216, 178, 0.7);
        margin: 4px 0 0;
    }

    .mobile-venue-distance.hidden {
        display: none;
    }

    /* Mobile venue card content area */
    .mobile-venue-content {
        padding-right: 0; /* No padding needed - close button is absolutely positioned */
    }

    /* Name and type need right padding to avoid close button overlap */
    .mobile-venue-name {
        padding-right: 45px;
    }

    .mobile-venue-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobile venue action buttons - matching desktop styling */
    .mobile-venue-action {
        flex: 0 0 auto;
        min-width: 130px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 12px 20px;
        background: var(--color-whiskey-medium);
        border-radius: 20px;
        text-decoration: none;
        color: white;
        font-size: 16px;
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    /* Mobile venue action button - PRIMARY style (whiskey/amber - matches desktop View Menu) */
    .mobile-venue-action.primary {
        background: var(--color-whiskey-medium);
        color: white;
        border: none;
    }

    /* Mobile venue action button - SECONDARY style (outline - matches desktop Get Directions) */
    .mobile-venue-action.secondary {
        background: transparent;
        color: var(--color-whiskey-light);
        border: 2px solid var(--color-whiskey-light);
    }

    .mobile-venue-action.hidden {
        display: none;
    }

    /* Mobile venue address - same style as distance */
    .mobile-venue-address {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: var(--color-whiskey-light);
        margin-bottom: 8px;
    }

    .mobile-venue-address.hidden {
        display: none;
    }

    .mobile-venue-address svg {
        flex-shrink: 0;
        margin-top: 2px;
        fill: var(--color-whiskey-light);
    }

    /* Mobile venue distance - same style as address text */
    .mobile-venue-distance {
        font-size: 14px;
        color: var(--color-whiskey-light);
        margin-bottom: 12px;
    }

    .mobile-venue-distance.hidden {
        display: none;
    }

    /* Mobile venue description */
    .mobile-venue-description {
        font-size: 14px;
        color: var(--color-whiskey-light);
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .mobile-venue-description.hidden {
        display: none;
    }

    .mobile-venue-description p {
        margin: 0;
    }

    /* Mobile venue website link */
    .mobile-venue-website-link {
        display: block;
        font-size: 13px;
        color: #D4A574;
        text-decoration: none;
        margin-bottom: 4px;
    }

    .mobile-venue-website-link:hover {
        text-decoration: underline;
    }

    .mobile-venue-website-link.hidden {
        display: none;
    }

    /* Hide desktop venue card on mobile */
    .venue-card {
        display: none !important;
    }
}

/* ============================================
   Product Search Autocomplete
   ============================================ */
.autocomplete-container {
    position: relative;
    width: 100%;
}

.input-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    z-index: 2;
}

.input-clear-btn:hover {
    color: #666;
}

.input-clear-btn.hidden {
    display: none;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--color-whiskey-light);
    border: 2px solid var(--color-black);
    border-top: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.autocomplete-dropdown.hidden {
    display: none;
}

.autocomplete-item {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background-color: var(--color-whiskey-lighter);
}

.autocomplete-item .product-highlight {
    background-color: var(--color-whiskey-medium);
    color: var(--color-white);
    padding: 0 2px;
    border-radius: 2px;
}

.autocomplete-loading {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-gray);
    text-align: center;
}

.autocomplete-no-results {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-gray);
    text-align: center;
    font-style: italic;
}

/* Product match count in venue card */
.venue-card-product-matches {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background-color: rgba(193, 108, 24, 0.2);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-whiskey-lighter);
}

.venue-card-product-matches svg {
    flex-shrink: 0;
}

/* Small Mobile */
@media (max-width: 480px) {
    .login-container {
        padding: 20px;
    }

    .login-logo img {
        max-width: 160px;
    }

    .login-title {
        font-size: 24px;
    }

    .radio-text {
        font-size: 16px;
    }

    .venue-type-filters {
        flex-direction: column;
    }
}

/* ============================================
   Claim Venue Modal Styles
   ============================================ */

.claim-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 5000;
    backdrop-filter: blur(4px);
}

.claim-modal-overlay.hidden {
    display: none;
}

.claim-venue-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    background-color: var(--color-white);
    border-radius: 16px;
    z-index: 5001;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.claim-venue-modal.hidden {
    display: none;
}

.claim-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background-color: var(--color-whiskey-dark);
    color: var(--color-white);
}

.claim-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

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

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

.claim-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
}

.claim-venue-info {
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: var(--color-whiskey-lighter);
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-whiskey-dark);
}

.claim-venue-info strong {
    color: var(--color-whiskey-dark);
}

.claim-form-group {
    margin-bottom: 16px;
}

.claim-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
}

.claim-form-group input,
.claim-form-group select,
.claim-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-family: inherit;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    background-color: var(--color-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.claim-form-group input:focus,
.claim-form-group select:focus,
.claim-form-group textarea:focus {
    outline: none;
    border-color: var(--color-whiskey-medium);
    box-shadow: 0 0 0 3px rgba(193, 108, 24, 0.15);
}

.claim-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.claim-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.claim-form-actions .btn-secondary {
    flex: 1;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background-color: #E0E0E0;
    border: none;
    border-radius: 8px;
    color: var(--color-black);
    cursor: pointer;
    transition: background-color 0.2s;
}

.claim-form-actions .btn-secondary:hover {
    background-color: #D0D0D0;
}

.claim-form-actions .btn-primary {
    flex: 1;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--color-whiskey-medium);
    border: none;
    border-radius: 8px;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.2s;
}

.claim-form-actions .btn-primary:hover {
    background-color: var(--color-whiskey-dark);
}

/* Claim Venue Button in Venue Card - uses btn-secondary outline style */
/* No additional background/border needed - btn-secondary provides outline styling */
.btn-claim {
    /* Override any conflicting styles - use transparent background with border */
    background-color: transparent !important;
    border: 2px solid var(--color-whiskey-light) !important;
    color: var(--color-whiskey-light) !important;
}

.btn-claim:hover {
    background-color: rgba(255, 216, 178, 0.1) !important;
    color: var(--color-whiskey-light) !important;
}

/* Mobile Claim Button Style - use secondary outline styling */
/* The .mobile-venue-action.secondary class already provides the outline style,
   no need to override here. Remove the stripping styles that were causing issues. */

/* Mobile responsive for claim modal */
@media (max-width: 480px) {
    .claim-venue-modal {
        width: 95%;
        max-height: 95vh;
    }

    .claim-modal-body {
        padding: 16px;
        max-height: calc(95vh - 80px);
    }

    .claim-form-actions {
        flex-direction: column;
    }

    .claim-form-actions .btn-secondary,
    .claim-form-actions .btn-primary {
        width: 100%;
    }

    /* Environment indicator position - centered at top on mobile */
    #env-indicator {
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ============================================
   Menu Modal (Mobile iframe for View Menu)
   ============================================ */

/* Configuration flag: Set to false to revert to opening menu in new tab on mobile */
/* This is controlled via JavaScript in ui.js - see USE_MENU_MODAL constant */

.menu-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 6000;
}

.menu-modal-overlay.hidden {
    display: none;
}

.menu-modal {
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    height: auto;
    max-width: 740px;
    margin: 0 auto;
    background-color: var(--color-whiskey-very-dark);
    z-index: 6001;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.menu-modal.hidden {
    display: none;
}

.menu-modal-close {
    position: absolute;
    top: 10px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C16C18;
    border: 2px solid #C16C18;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 6002;
    transition: background-color 0.2s, transform 0.1s;
    pointer-events: auto;
}

.menu-modal-close:hover {
    background: #a85a14;
}

.menu-modal-close:active {
    transform: scale(0.95);
}

.menu-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: var(--color-whiskey-very-dark);
    /* Enable scrolling within iframe */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   Age Gate Overlay
   ============================================ */

.age-gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(60, 34, 11, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.age-gate-overlay.hidden {
    display: none;
}

.age-gate-modal {
    background: linear-gradient(135deg, var(--color-whiskey-very-dark) 0%, #2a1a08 100%);
    border: 2px solid var(--color-whiskey-medium);
    border-radius: 20px;
    padding: 40px;
    max-width: 450px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 60px rgba(193, 108, 24, 0.2);
}

.age-gate-logo {
    margin-bottom: 30px;
}

.age-gate-logo img {
    max-width: 200px;
    height: auto;
}

.age-gate-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-whiskey-light);
    margin: 0 0 16px 0;
}

.age-gate-question {
    font-size: 18px;
    color: var(--color-whiskey-light);
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.age-gate-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.age-gate-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.age-gate-btn-yes {
    background-color: var(--color-whiskey-medium);
    color: var(--color-white);
    border-color: var(--color-whiskey-medium);
}

.age-gate-btn-yes:hover {
    background-color: #D97B1F;
    border-color: #D97B1F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(193, 108, 24, 0.4);
}

.age-gate-btn-yes:active {
    transform: translateY(0);
}

.age-gate-btn-no {
    background-color: transparent;
    color: var(--color-whiskey-light);
    border-color: var(--color-whiskey-light);
}

.age-gate-btn-no:hover {
    background-color: rgba(255, 216, 178, 0.1);
    transform: translateY(-2px);
}

.age-gate-btn-no:active {
    transform: translateY(0);
}

/* Mobile responsive for age gate */
@media (max-width: 480px) {
    .age-gate-modal {
        padding: 30px 20px;
    }

    .age-gate-logo img {
        max-width: 160px;
    }

    .age-gate-title {
        font-size: 22px;
    }

    .age-gate-question {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .age-gate-btn {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ============================================
   Static Pages Layout (About, Contact, Privacy, etc.)
   ============================================ */

.page-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-whiskey-very-light);
}

.page-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: var(--color-whiskey-very-dark);
    z-index: 2000;
}

.page-header .header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-header .header-logo img {
    height: 40px;
    width: auto;
}

.page-content {
    flex: 1;
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.page-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-whiskey-very-dark);
    margin-bottom: 24px;
}

.page-subtitle {
    font-size: 20px;
    color: var(--color-whiskey-dark);
    margin-bottom: 32px;
    line-height: 1.6;
}

.page-section {
    margin-bottom: 32px;
}

.page-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-whiskey-very-dark);
    margin-bottom: 16px;
}

.page-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-whiskey-dark);
    margin-bottom: 12px;
}

.page-section p {
    font-size: 16px;
    color: var(--color-whiskey-dark);
    line-height: 1.7;
    margin-bottom: 16px;
}

.page-section ul {
    color: var(--color-whiskey-dark);
    padding-left: 24px;
    margin-bottom: 16px;
}

.page-section li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.page-section a {
    color: var(--color-whiskey-medium);
    text-decoration: none;
}

.page-section a:hover {
    text-decoration: underline;
}

/* Page Footer */
.page-footer {
    padding: 24px 20px;
    text-align: center;
    background-color: var(--color-whiskey-light);
    color: var(--color-whiskey-dark);
    font-size: 14px;
    border-top: 1px solid var(--color-whiskey-medium);
}

.page-footer a {
    color: var(--color-whiskey-medium);
    text-decoration: none;
    font-weight: 500;
}

.page-footer a:hover {
    text-decoration: underline;
    color: var(--color-whiskey-very-dark);
}

/* ============================================
   Form Styles for Static Pages
   ============================================ */

.page-form {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    max-width: 600px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-whiskey-light);
}

.page-form-group {
    margin-bottom: 20px;
}

.page-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-whiskey-dark);
    margin-bottom: 8px;
}

.page-form-group input,
.page-form-group select,
.page-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 2px solid var(--color-whiskey-light);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.page-form-group input:focus,
.page-form-group select:focus,
.page-form-group textarea:focus {
    outline: none;
    border-color: var(--color-whiskey-medium);
    box-shadow: 0 0 0 3px rgba(193, 108, 24, 0.2);
}

.page-form-group input::placeholder,
.page-form-group textarea::placeholder {
    color: var(--color-gray);
}

.page-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.page-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 44px;
    cursor: pointer;
}

.page-form .btn-primary {
    margin-top: 8px;
}

/* Venue typeahead autocomplete */
.venue-typeahead-container {
    position: relative;
}

.venue-typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border: 2px solid var(--color-whiskey-medium);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.venue-typeahead-dropdown.hidden {
    display: none;
}

.venue-typeahead-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s;
}

.venue-typeahead-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.venue-typeahead-item:hover,
.venue-typeahead-item.highlighted {
    background-color: var(--color-whiskey-very-light);
}

.venue-typeahead-item .venue-name {
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 2px;
}

.venue-typeahead-item .venue-location {
    font-size: 13px;
    color: var(--color-gray);
}

.venue-typeahead-loading,
.venue-typeahead-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-gray);
    font-size: 14px;
}

/* Success/Error messages */
.form-message {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.form-message.success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.form-message.error {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Mobile responsive for static pages */
@media (max-width: 768px) {
    /* Show header on static pages */
    .page-header {
        display: flex;
    }

    /* Hide navigation on mobile for static pages */
    .page-header .header-nav {
        display: none;
    }

    .page-content {
        padding: 24px 16px;
    }

    .page-title {
        font-size: 28px;
    }

    .page-subtitle {
        font-size: 18px;
    }

    .page-form {
        padding: 24px 20px;
    }

    .page-section h2 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 24px;
    }

    .page-subtitle {
        font-size: 16px;
    }

    .page-form {
        padding: 20px 16px;
    }
}

/* ============================================
   Static Pages Mobile Header Bar & Hamburger Menu
   (Only for static pages using header.js)
   ============================================ */

/* Hide mobile header elements by default (desktop) */
.static-mobile-header,
.static-mobile-menu-overlay,
.static-mobile-menu-panel {
    display: none;
}

/* Mobile styles for static pages */
@media (max-width: 768px) {
    /* Mobile Header Bar */
    .static-mobile-header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background-color: var(--color-whiskey-very-dark);
        z-index: 3000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Hamburger Button (positioned left) */
    .static-mobile-hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background-color: var(--color-whiskey-orange);
        border: 2px solid var(--color-black);
        border-radius: 50%;
        color: var(--color-black);
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .static-mobile-hamburger-btn:hover {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .static-mobile-hamburger-btn:active {
        transform: translateY(-50%) scale(0.95);
    }

    .static-mobile-hamburger-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Centered Logo - absolutely positioned for true centering */
    .static-mobile-header-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .static-mobile-header-logo img {
        height: 32px;
        width: auto;
    }

    /* Menu Overlay */
    .static-mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 3500;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .static-mobile-menu-overlay.visible {
        display: block;
        opacity: 1;
    }

    /* Menu Panel */
    .static-mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background-color: var(--color-whiskey-very-dark);
        z-index: 4000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .static-mobile-menu-panel.open {
        transform: translateX(0);
    }

    /* Menu Header */
    .static-mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 216, 178, 0.2);
    }

    .static-mobile-menu-logo {
        height: 32px;
        width: auto;
    }

    .static-mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        color: var(--color-whiskey-light);
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

    .static-mobile-menu-close:hover {
        background-color: rgba(255, 216, 178, 0.1);
    }

    .static-mobile-menu-close svg {
        width: 24px;
        height: 24px;
    }

    /* Menu List */
    .static-mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 12px 0;
    }

    .static-mobile-menu-item {
        border-bottom: 1px solid rgba(255, 216, 178, 0.1);
    }

    .static-mobile-menu-item:last-child {
        border-bottom: none;
    }

    /* Menu Links */
    .static-mobile-menu-link {
        display: block;
        padding: 16px 20px;
        color: var(--color-whiskey-light);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .static-mobile-menu-link:hover,
    .static-mobile-menu-link:focus {
        background-color: rgba(193, 108, 24, 0.3);
        color: var(--color-white);
    }

    /* Submenu Toggle Button */
    .static-mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 20px;
        background: transparent;
        border: none;
        color: var(--color-whiskey-light);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .static-mobile-menu-toggle:hover,
    .static-mobile-menu-toggle:focus {
        background-color: rgba(193, 108, 24, 0.3);
        color: var(--color-white);
    }

    .static-mobile-menu-chevron {
        transition: transform 0.3s ease;
    }

    .static-mobile-menu-item.expanded .static-mobile-menu-chevron {
        transform: rotate(180deg);
    }

    /* Submenu */
    .static-mobile-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.2);
        transition: max-height 0.3s ease;
    }

    .static-mobile-menu-item.expanded .static-mobile-submenu {
        max-height: 200px;
    }

    .static-mobile-submenu-link {
        display: block;
        padding: 14px 20px 14px 36px;
        color: var(--color-whiskey-light);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .static-mobile-submenu-link:hover,
    .static-mobile-submenu-link:focus {
        background-color: rgba(193, 108, 24, 0.4);
        color: var(--color-whiskey-lighter);
    }

    /* Adjust page layout for static pages with mobile header */
    .page-layout {
        padding-top: 56px; /* Account for fixed mobile header height */
    }

    /* Hide desktop header on static pages on mobile */
    .page-layout .page-header {
        display: none;
    }
}

/* ============================================
   PourlyDone Consumer Features
   Styles for embedded mode in PourlyDone app
   ============================================ */

/* Consumer features hidden by default */
.pd-consumer-feature.hidden {
    display: none !important;
}

/* Consumer features visible when authenticated in PourlyDone */
.pd-consumer-feature.pd-visible {
    display: flex !important;
}

/* Desktop consumer buttons in venue card */
.venue-card-actions .pd-consumer-feature.pd-visible {
    display: inline-block !important;
}

/* PourlyDone Subscribe button - gold style */
.pd-subscribe-btn {
    display: none;
    width: 100%;
    padding: 10px 16px;
    margin: 8px 0;
    background: #FFE256;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.pd-subscribe-btn:active {
    background: #E6CB4D;
}

/* Override display when visible in PourlyDone */
.pd-subscribe-btn.pd-visible {
    display: block !important;
}

/* Embedded mode: hide web chrome */
body.pourlydone-embedded .header {
    display: none !important;
}

body.pourlydone-embedded #env-indicator {
    display: none !important;
}

body.pourlydone-embedded #env-footer {
    display: none !important;
}

/* Embedded mode: reclaim header space for map */
body.pourlydone-embedded .map-container {
    top: 0 !important;
}

body.pourlydone-embedded .search-panel {
    top: 0 !important;
}

/* Embedded mode: hide WhiskeyVenues branding (PourlyDone has its own) */
body.pourlydone-embedded .mobile-bottom-card .brand-row {
    display: none !important;
}

body.pourlydone-embedded .desktop-notify-btn {
    display: none !important;
}

body.pourlydone-embedded .mobile-hamburger-btn { display: none !important; }
body.pourlydone-embedded .app-build-version,
body.pourlydone-embedded .build-version { display: none !important; }

/* Embedded mode: allow taller cards since header is hidden */
body.pourlydone-embedded .mobile-bottom-card.expanded {
    max-height: 80vh;
}

body.pourlydone-embedded .mobile-bottom-card.search-focused {
    max-height: 90vh;
}

body.pourlydone-embedded .filter-chips {
    top: 0 !important;
}

body.pourlydone-embedded .search-bar-collapsed {
    top: 0 !important;
}

/* ============================================
   Embedded mode: force mobile layout at ALL viewports
   ============================================
   PourlyDone loads this page in a WebView with body.pourlydone-embedded.
   On iPad the viewport is ~820pt which misses the @media (max-width: 768px)
   block above, so the desktop layout renders. These rules mirror the
   layout-critical portions of that media query, scoped to the embedded body
   class so desktop users in a browser are unaffected.
   Any new layout-critical rule inside @media (max-width: 768px) should be
   mirrored here as well. */

/* CSS variable override so map-container / search-panel top calculations
   collapse to zero just like they do on mobile. */
body.pourlydone-embedded {
    --header-height: 0px;
}

/* Hide desktop-only chrome */
body.pourlydone-embedded .venue-card {
    display: none !important;
}

/* Desktop sidebar stays hidden in its default state; the expanded modal
   rules below re-display it as a full-screen search modal when needed. */
body.pourlydone-embedded .search-panel {
    display: none !important;
}

/* PourlyDone native search card — hides web bottom card when Flutter native card is active */
body.pourlydone-embedded.pd-native-search .mobile-bottom-card { display: none !important; }
body.pourlydone-embedded.pd-native-search .mobile-card-overlay { display: none !important; }

/* ============================================
   Apple Maps-Style Mobile Bottom Card
   ============================================ */
body.pourlydone-embedded .mobile-bottom-card {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(66, 45, 27, 0.8);
    border-radius: 16px 16px 0 0;
    padding: 12px 16px 16px;
    z-index: 2000;
    transition: transform 0.3s ease-out, max-height 0.3s ease-out;
    max-height: 140px;
    overflow: hidden;
}

body.pourlydone-embedded .mobile-bottom-card.expanded {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.pourlydone-embedded .mobile-bottom-card.search-focused {
    max-height: 90vh;
}

/* Drag handle (the grab bar at the top of the card) */
body.pourlydone-embedded .mobile-bottom-card .drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: #FFD8B2;
    border-radius: 2px;
    margin: 0 auto 12px;
    position: relative;
    cursor: pointer;
}

body.pourlydone-embedded .mobile-bottom-card .drag-handle::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -30px;
    right: -30px;
    background: transparent;
}

/* Mobile search pill inside bottom card */
body.pourlydone-embedded .mobile-search-pill {
    display: flex;
    align-items: center;
    background: var(--color-whiskey-light);
    border-radius: 50px;
    padding: 10px 16px;
    gap: 10px;
    min-height: 44px;
    position: relative;
}

body.pourlydone-embedded .mobile-search-pill .search-icon {
    color: #C16C18;
    font-size: 18px;
}

body.pourlydone-embedded .mobile-search-pill input {
    flex: 1;
    border: none;
    background: transparent;
    color: #C16C18;
    font-size: 16px;
    outline: none;
}

body.pourlydone-embedded .mobile-search-pill input::placeholder {
    color: #888888;
    opacity: 1;
}

/* Custom clear button — restated here because the base rule lives inside
   @media (max-width: 768px) which does not match the iPad ~820pt viewport */
body.pourlydone-embedded .search-clear-btn {
    background: none;
    border: none;
    color: #C16C18;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    opacity: 0.8;
}

body.pourlydone-embedded .search-clear-btn:hover {
    opacity: 1;
}

body.pourlydone-embedded .search-clear-btn.hidden {
    display: none;
}

body.pourlydone-embedded .mobile-bottom-card.search-focused .mobile-search-pill {
    border: 2px solid #C16C18;
}

body.pourlydone-embedded .mobile-bottom-card.expanded .mobile-search-pill input,
body.pourlydone-embedded .mobile-bottom-card.search-focused .mobile-search-pill input {
    cursor: text;
}

/* Expanded search form (appears inside bottom card when focused/expanded) */
body.pourlydone-embedded .mobile-search-form {
    display: none;
    padding-top: 16px;
}

body.pourlydone-embedded .mobile-bottom-card.expanded .mobile-search-form,
body.pourlydone-embedded .mobile-bottom-card.search-focused .mobile-search-form {
    display: block;
}

body.pourlydone-embedded .mobile-search-form .form-section {
    margin-bottom: 16px;
}

body.pourlydone-embedded .mobile-search-form .section-label {
    color: #FFD8B2;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

/* ============================================
   Expanded Search Panel as Full-Screen Modal
   (re-overrides the `display: none` default on .search-panel above)
   ============================================ */
body.pourlydone-embedded .search-panel.expanded {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    background: white;
    z-index: 2000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(0);
    border-radius: 0;
}

body.pourlydone-embedded .search-panel.expanded .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

body.pourlydone-embedded .search-panel.expanded .close-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    background: none;
    border: none;
    padding: 0;
}

body.pourlydone-embedded .search-panel.expanded .modal-header .search-title {
    flex: 1;
    text-align: center;
    margin: 0;
}

body.pourlydone-embedded .search-panel.expanded input,
body.pourlydone-embedded .search-panel.expanded select,
body.pourlydone-embedded .search-panel.expanded button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    margin-bottom: 16px;
}

body.pourlydone-embedded .search-panel.expanded .form-group label {
    font-size: 14px;
    margin-bottom: 8px;
}

/* ============================================
   Mobile Venue Detail Card (appears on venue tap)
   ============================================ */
body.pourlydone-embedded .mobile-venue-card {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-whiskey-very-dark);
    border-radius: 16px 16px 0 0;
    padding: 12px 16px 24px;
    z-index: 2000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

body.pourlydone-embedded .mobile-venue-card.hidden {
    display: none;
}

body.pourlydone-embedded .mobile-venue-card .drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-whiskey-light);
    border-radius: 2px;
    margin: 0 auto 12px;
    position: relative;
    cursor: pointer;
}

body.pourlydone-embedded .mobile-venue-card .drag-handle::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -30px;
    right: -30px;
    background: transparent;
}

/* ============================================
   Mobile Venue Card — inner element styling
   ============================================
   Mirrors @media (max-width: 768px) lines ~1944-2123 so that on iPad
   (where the media query does not match the ~820pt viewport) the venue
   detail card's inner content — name, type, address, description, website
   link, close button, and especially the View Menu / Get Directions
   action buttons — render with the same mobile styling as on iPhone.
   Without these, the action buttons fall back to default inline <a>
   styling (tiny blue underlined text) and the user can't see them — they
   look like extra website-URL characters at the bottom of the card. */

body.pourlydone-embedded .mobile-venue-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 216, 178, 0.2);
    border-radius: 50%;
    font-size: 20px;
    color: var(--color-whiskey-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.pourlydone-embedded .mobile-venue-header {
    margin-bottom: 8px;
    padding-right: 40px;
}

body.pourlydone-embedded .mobile-venue-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-whiskey-light);
    margin: 0 0 4px;
    padding-right: 45px;
}

body.pourlydone-embedded .mobile-venue-type {
    font-size: 14px;
    color: var(--color-whiskey-light);
    margin: 0;
    font-weight: 500;
}

body.pourlydone-embedded .mobile-venue-menu-count {
    font-size: 13px;
    color: var(--color-whiskey-light);
    margin: 4px 0 0;
}

body.pourlydone-embedded .mobile-venue-menu-count.hidden {
    display: none;
}

/* Address row — flex with leading SVG marker */
body.pourlydone-embedded .mobile-venue-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--color-whiskey-light);
    margin-bottom: 8px;
}

body.pourlydone-embedded .mobile-venue-address.hidden {
    display: none;
}

body.pourlydone-embedded .mobile-venue-address svg {
    flex-shrink: 0;
    margin-top: 2px;
    fill: var(--color-whiskey-light);
}

/* Distance */
body.pourlydone-embedded .mobile-venue-distance {
    font-size: 14px;
    color: var(--color-whiskey-light);
    margin-bottom: 12px;
}

body.pourlydone-embedded .mobile-venue-distance.hidden {
    display: none;
}

/* Description paragraph */
body.pourlydone-embedded .mobile-venue-description {
    font-size: 14px;
    color: var(--color-whiskey-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

body.pourlydone-embedded .mobile-venue-description.hidden {
    display: none;
}

body.pourlydone-embedded .mobile-venue-description p {
    margin: 0;
}

/* Website link */
body.pourlydone-embedded .mobile-venue-website-link {
    display: block;
    font-size: 13px;
    color: #D4A574;
    text-decoration: none;
    margin-bottom: 4px;
}

body.pourlydone-embedded .mobile-venue-website-link:hover {
    text-decoration: underline;
}

body.pourlydone-embedded .mobile-venue-website-link.hidden {
    display: none;
}

/* Content area (sits to the left of absolute-positioned close button) */
body.pourlydone-embedded .mobile-venue-content {
    padding-right: 0;
}

/* Action buttons container — flex row, wrap, centered, gap */
body.pourlydone-embedded .mobile-venue-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Individual action button (View Menu / Get Directions / Claim Venue) —
   pill shape, fixed min-width, flex row for icon+label */
body.pourlydone-embedded .mobile-venue-action {
    flex: 0 0 auto;
    min-width: 130px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 20px;
    background: var(--color-whiskey-medium);
    border-radius: 20px;
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

body.pourlydone-embedded .mobile-venue-action.primary {
    background: var(--color-whiskey-medium);
    color: white;
    border: none;
}

body.pourlydone-embedded .mobile-venue-action.secondary {
    background: transparent;
    color: var(--color-whiskey-light);
    border: 2px solid var(--color-whiskey-light);
}

body.pourlydone-embedded .mobile-venue-action.hidden {
    display: none;
}

/* Overlay behind expanded mobile bottom card / venue card */
body.pourlydone-embedded .mobile-card-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

body.pourlydone-embedded .mobile-card-overlay.visible {
    display: block;
}

/* ============================================
   Embedded mode: inner form element styling
   ============================================
   Mirrors the inner-form rules from @media (max-width: 768px) lines
   ~1696-1883 so the expanded mobile search form inside the bottom card
   renders the same segmented controls, dropdowns, chips, inputs, and
   search button on iPad as on iPhone. Without these the form falls back
   to unstyled browser defaults (tiny pills, small combo box, narrow
   button) — see Screenshot 2026-04-18 at 3.03.45 PM. */

/* Segmented controls (Search For: Venues / Products, Of: Current / Address) */
body.pourlydone-embedded .mobile-search-form .mobile-segmented {
    display: flex;
    background: rgba(255, 216, 178, 0.2);
    border-radius: 8px;
    padding: 2px;
}

body.pourlydone-embedded .mobile-search-form .mobile-segment {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #FFD8B2;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
}

body.pourlydone-embedded .mobile-search-form .mobile-segment.active {
    background: #FFD8B2;
    color: #422D1B;
}

/* Select (Within: 25 Miles) and text inputs inside the form */
body.pourlydone-embedded .mobile-search-form select,
body.pourlydone-embedded .mobile-search-form input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: var(--color-whiskey-light);
    color: #422D1B;
    box-sizing: border-box;
}

/* Venue-type chips container and chip styling */
body.pourlydone-embedded .mobile-venue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.pourlydone-embedded .mobile-venue-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(255, 216, 178, 0.2);
    border: 1px solid rgba(255, 216, 178, 0.3);
    color: #FFD8B2;
    font-size: 14px;
    cursor: pointer;
}

body.pourlydone-embedded .mobile-venue-chip.active {
    background: #FFD8B2;
    color: #422D1B;
    border-color: #FFD8B2;
}

/* Chip checkmark (shown only when chip is active) */
body.pourlydone-embedded .mobile-venue-chip .chip-checkmark {
    display: none;
    width: 16px;
    height: 16px;
    position: relative;
}

body.pourlydone-embedded .mobile-venue-chip.active .chip-checkmark {
    display: inline-block;
}

body.pourlydone-embedded .mobile-venue-chip.active .chip-checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.pourlydone-embedded .mobile-venue-chip .chip-icon {
    height: 25px;
    width: auto;
}

/* Address input container */
body.pourlydone-embedded .mobile-address-container {
    margin-top: 8px;
}

body.pourlydone-embedded .mobile-address-container.hidden {
    display: none;
}

body.pourlydone-embedded .mobile-text-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 216, 178, 0.3);
    background: rgba(255, 245, 236, 0.95);
    color: #422D1B;
    font-size: 14px;
    box-sizing: border-box;
}

body.pourlydone-embedded .mobile-text-input::placeholder {
    color: rgba(66, 45, 27, 0.5);
}

body.pourlydone-embedded .mobile-text-input:focus {
    outline: none;
    border-color: #C16C18;
    box-shadow: 0 0 0 2px rgba(193, 108, 24, 0.2);
}

/* Autocomplete dropdown under the search pill */
body.pourlydone-embedded .mobile-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFF5EC;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1001;
    margin-top: 2px;
}

body.pourlydone-embedded .mobile-autocomplete.hidden {
    display: none;
}

body.pourlydone-embedded .mobile-autocomplete-item {
    padding: 12px 14px;
    color: #422D1B;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(66, 45, 27, 0.1);
}

body.pourlydone-embedded .mobile-autocomplete-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

body.pourlydone-embedded .mobile-autocomplete-item:active {
    background: rgba(193, 108, 24, 0.1);
}

body.pourlydone-embedded .mobile-autocomplete-item .item-name {
    font-weight: 600;
}

body.pourlydone-embedded .mobile-autocomplete-item .item-type {
    font-size: 12px;
    color: rgba(66, 45, 27, 0.6);
    margin-top: 2px;
}

/* Search button — full-width whiskey-orange pill */
body.pourlydone-embedded .mobile-search-form .mobile-search-btn {
    width: 100%;
    padding: 14px;
    background: #C16C18;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

/* Suppress age gate when embedded in PourlyDone WebView — PD app handles its own age verification */
body.pourlydone-embedded #age-gate-overlay,
body.pourlydone-embedded .age-gate-overlay {
    display: none !important;
}

/* ============================================
   FLOATING SEARCH OVERLAY (Map Redesign)
   ============================================ */

#map-search-overlay {
  position: fixed;
  top: 18px;
  left: 76px;
  right: 10px;
  z-index: 1000;
  pointer-events: none;
}

#map-search-overlay > * {
  pointer-events: auto;
}

.search-overlay-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.overlay-hamburger-btn {
  display: none !important;
}

.overlay-hamburger-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #442609;
  background: #C16C18;
  color: #442609;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-hamburger-btn:hover {
  background: #a85a14;
}

.overlay-search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 0 16px;
  height: 44px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 1.5px solid #D4A843;
}

.overlay-search-icon {
  flex-shrink: 0;
  margin-right: 8px;
}

#overlay-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: #333;
  font-family: inherit;
}

#overlay-search-input::placeholder {
  color: #999;
}

.overlay-search-clear {
  border: none;
  background: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.overlay-search-clear:hover {
  color: #666;
}

.search-overlay-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
  margin-left: 0;
  -webkit-overflow-scrolling: touch;
}

.search-overlay-chips::-webkit-scrollbar {
  display: none;
}

.search-chip {
  white-space: nowrap;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #C16C18;
  background: #fff;
  color: #442609;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.search-chip:hover {
  background: #FFF5EC;
}

.search-chip.active {
  background: #C16C18;
  color: #fff;
  border-color: #C16C18;
}

.search-chip.active:hover {
  background: #a85a14;
}

/* ============================================
   MAP REDESIGN: Hide old layout elements
   ============================================ */

.header {
  display: none !important;
}

#search-panel {
  display: none !important;
}

#venue-card {
  display: none !important;
}

.search-bar-collapsed {
  display: none !important;
}

.mobile-bottom-card {
  display: none !important;
}

/* Force mobile venue card styles at all viewports */
.mobile-venue-card {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--color-whiskey-very-dark) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 12px 16px 24px !important;
  z-index: 2000 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.3s ease-out !important;
}

.mobile-venue-card.hidden {
  display: none !important;
}

.mobile-venue-card .drag-handle {
  display: block !important;
  width: 40px !important;
  height: 4px !important;
  background: var(--color-whiskey-light) !important;
  border-radius: 2px !important;
  margin: 0 auto 12px !important;
  cursor: pointer !important;
}

.mobile-venue-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: rgba(255, 216, 178, 0.2) !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  color: var(--color-whiskey-light) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-venue-header {
  margin-bottom: 8px !important;
  padding-right: 40px !important;
}

.mobile-venue-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-whiskey-light) !important;
  margin: 0 0 4px !important;
  padding-right: 45px !important;
}

.mobile-venue-type {
  font-size: 14px !important;
  color: var(--color-whiskey-light) !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.mobile-venue-menu-count {
  font-size: 13px !important;
  color: var(--color-whiskey-light) !important;
  margin: 4px 0 0 !important;
}

.mobile-venue-distance {
  font-size: 14px !important;
  color: var(--color-whiskey-light) !important;
  margin-bottom: 12px !important;
}

.mobile-venue-address {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: var(--color-whiskey-light) !important;
  margin-bottom: 8px !important;
}

.mobile-venue-address svg {
  flex-shrink: 0 !important;
  fill: var(--color-whiskey-light) !important;
}

.mobile-venue-description {
  font-size: 14px !important;
  color: var(--color-whiskey-light) !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.mobile-venue-description p {
  margin: 0 !important;
}

.mobile-venue-website-link {
  display: block !important;
  font-size: 13px !important;
  color: #D4A574 !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
}

.mobile-venue-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  width: 100% !important;
}

.mobile-venue-action {
  flex: 0 0 auto !important;
  min-width: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.mobile-venue-action.primary {
  background: var(--color-whiskey-medium) !important;
  color: white !important;
  border: none !important;
}

.mobile-venue-action.secondary {
  background: transparent !important;
  color: var(--color-whiskey-light) !important;
  border: 2px solid var(--color-whiskey-light) !important;
}

.mobile-venue-action.hidden {
  display: none !important;
}

/* mobile-card-overlay: kept available for venue card backdrop */

/* Force mobile hamburger button visible at all viewports */
.mobile-hamburger-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  width: 48px !important;
  height: 48px !important;
  background-color: var(--color-whiskey-orange) !important;
  border: 2px solid var(--color-black) !important;
  border-radius: 50% !important;
  color: var(--color-black) !important;
  cursor: pointer !important;
  z-index: 3000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.mobile-hamburger-btn svg {
  width: 24px !important;
  height: 24px !important;
}

/* Force mobile menu overlay + panel to work at all viewports */
.mobile-menu-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 3500 !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.visible {
  display: block !important;
  opacity: 1 !important;
}

#mobile-menu-panel {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  max-width: 85vw !important;
  background-color: var(--color-whiskey-very-dark) !important;
  z-index: 4000 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s ease !important;
  overflow-y: auto !important;
}

#mobile-menu-panel.open {
  transform: translateX(0) !important;
}

.mobile-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 216, 178, 0.2) !important;
}

.mobile-menu-logo {
  height: 32px !important;
  width: auto !important;
}

.mobile-menu-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  color: var(--color-whiskey-light) !important;
  cursor: pointer !important;
  border-radius: 8px !important;
}

.mobile-menu-close:hover {
  background-color: rgba(255, 216, 178, 0.1) !important;
}

.mobile-menu-close svg {
  width: 24px !important;
  height: 24px !important;
}

.mobile-menu-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
}

.mobile-menu-item {
  border-bottom: 1px solid rgba(255, 216, 178, 0.1) !important;
}

.mobile-menu-item:last-child {
  border-bottom: none !important;
}

.mobile-menu-link {
  display: block !important;
  padding: 16px 20px !important;
  color: var(--color-whiskey-light) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
  background-color: rgba(193, 108, 24, 0.3) !important;
  color: var(--color-white) !important;
}

.mobile-menu-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border: none !important;
  color: var(--color-whiskey-light) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
  background-color: rgba(193, 108, 24, 0.3) !important;
  color: var(--color-white) !important;
}

.mobile-menu-chevron {
  transition: transform 0.3s ease;
}

.mobile-menu-item.expanded .mobile-menu-chevron {
  transform: rotate(180deg);
}

.mobile-submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  transition: max-height 0.3s ease !important;
}

.mobile-menu-item.expanded .mobile-submenu {
  max-height: 200px !important;
}

.mobile-submenu-link {
  display: block !important;
  padding: 14px 20px 14px 36px !important;
  color: var(--color-whiskey-light) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.mobile-submenu-link:hover,
.mobile-submenu-link:focus {
  background-color: rgba(193, 108, 24, 0.4) !important;
  color: var(--color-white) !important;
}

/* ============================================
   CUSTOM MAP CONTROLS (replaces Mapbox defaults)
   ============================================ */

.mapboxgl-ctrl-top-right {
  display: none !important;
}

.custom-map-controls {
  position: fixed;
  bottom: 40px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-control-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(68, 38, 9, 0.66);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, transform 0.1s;
}

.map-control-btn:hover {
  background: rgba(68, 38, 9, 0.85);
}

.map-control-btn:active {
  transform: scale(0.93);
}

#map-compass {
  display: none;
}

.map-anchor-dot {
  width: 22px;
  height: 22px;
  background: #C16C18;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Anchor dot marker wrapper: above venue pins (1000) but below selected pin (1100) */
.mapboxgl-marker:has(.map-anchor-dot) {
  z-index: 1050 !important;
}

/* Anchor popup styling */
.anchor-popup .mapboxgl-popup-content {
  background: #C16C18;
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 240px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.anchor-popup .mapboxgl-popup-tip {
  border-top-color: #C16C18;
}

.anchor-popup-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.anchor-popup-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  line-height: 1.4;
}

@media (hover: none) and (pointer: coarse) {
  #map-compass {
    display: flex;
  }
}

.map-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* ============================================
   OVERLAY SEARCH DROPDOWN (Typeahead Results)
   ============================================ */
.overlay-search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  margin-top: 4px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-height: 50vh;
  overflow-y: auto;
  z-index: 1001;
}

.overlay-search-dropdown.visible {
  display: block;
}

.overlay-search-dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}

.overlay-search-dropdown-item:last-child {
  border-bottom: none;
}

.overlay-search-dropdown-item:hover,
.overlay-search-dropdown-item:focus {
  background: #fdf6ec;
}

.overlay-search-dropdown-item .item-subtitle {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.overlay-dropdown-footer {
  position: sticky;
  bottom: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  background: #C16C18;
  text-align: left;
}

/* GPL Product Family & Expression Rows */
.product-family-item {
  border-bottom: 1px solid #e8e0d8;
}

.product-family-item .family-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-family-item .family-name {
  font-weight: 500;
  color: #333;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-family-item .family-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.product-family-item .expression-count {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}

.product-family-item .family-chevron {
  display: inline-block;
  font-size: 14px;
  color: #C16C18;
  transition: transform 0.2s ease;
}

.product-family-item .family-chevron.expanded {
  transform: rotate(180deg);
}

/* Expression rows (indented under family) */
.expression-row {
  padding-left: 32px !important;
  border-bottom: 1px solid #f5f0eb;
  background: #fefcfa;
}

.expression-row:hover {
  background: #fdf6ec;
}

.expression-row .expression-label {
  font-size: 13px;
  color: #555;
}

.expression-row.expression-any .expression-label {
  font-style: italic;
  color: #C16C18;
}

/* ============================================
   RANGE CHIP POPUP MENU
   ============================================ */
.range-popup {
  position: absolute;
  z-index: 1002;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  overflow: hidden;
  pointer-events: auto;
}

.range-popup-item {
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}

.range-popup-item:last-child {
  border-bottom: none;
}

.range-popup-item:hover {
  background: #fdf6ec;
}

.range-popup-item.selected {
  background: #FFF5EC;
  color: #C16C18;
  font-weight: 600;
}

/* Distance subtitle in venue typeahead results */
.venue-distance {
  font-size: 11px;
  color: #999;
  margin-top: 1px;
}