/*
 Theme Name:   Drink BEVe
 Theme URI:    https://drinkbeve.com
 Description:  Custom theme for Drink BEVe – beverage company locations and store finder.
 Author:       Drink BEVe
 Author URI:   https://drinkbeve.com
 Template:     hello-elementor
 Version:      1.1.10
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  drinkbeve
*/


/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================

   1. GLOBAL / UTILITIES
      - Leaflet z-index fix
      - Map error fallback

   2. BREADCRUMBS
      - Rank Math breadcrumb overrides for dark backgrounds

   3. LOCATION FEATURES LIST
      - [acf_location_features] – dark & light themes

   4. CITY LINE
      - [acf_location_city] – dark & light themes

   5. STORE HOURS TABLE
      - [acf_store_hours] – dark & light themes
      - "Today" highlight badge

   6. MAP PIN & POPUP
      - [acf_location_map] – pin icon, popup card, loading state
      NOTE: Map styles remain ID-scoped in functions.php because
            each map gets a unique ID. Only shared/common map
            classes are here.

   7. NEARBY COMMUNITIES
      - [drinkbev_nearby_communities] – dark & light themes

   8. NEARBY LOCATIONS
      - [drinkbev_nearby_locations] – cards, grid, hover states

   9. RANDOM PRODUCTS
      - [drinkbev_random_products] – product thumbnail grid

  10. NEXT NEAREST LINK
      - [drinkbev_next_nearest] – right-aligned breadcrumb-level link

  11. RESPONSIVE / MOBILE
      - Single location template column reorder (≤1024px)
      - Element visibility (hide on tablet/mobile)

   ========================================================================== */


/* ==========================================================================
   1. GLOBAL / UTILITIES
   ========================================================================== */

/**
 * Leaflet z-index fix
 * Leaflet's internal panes use z-index up to 700, painting over the
 * Elementor sticky nav (z-index ~99). Capping the container at 1 creates
 * a stacking context that prevents the overlap.
 */
.leaflet-container {
    z-index: 1 !important;
}

/**
 * Map error / fallback message
 * Shown when ACF lat/lng fields are empty — "Map location not set."
 */
.drinkbev-map-error {
    color: rgba(255, 255, 255, 0.5);
    padding: 20px;
}


/* ==========================================================================
   2. BREADCRUMBS
   ==========================================================================
   Rank Math outputs default gray text. These overrides ensure WCAG AA
   contrast on the dark (#0a2540) location page background.
   ========================================================================== */

.drinkbev-breadcrumb-wrap .rank-math-breadcrumb {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.drinkbev-breadcrumb-wrap .rank-math-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.drinkbev-breadcrumb-wrap .rank-math-breadcrumb a:hover,
.drinkbev-breadcrumb-wrap .rank-math-breadcrumb a:focus {
    color: #00aaff;
    text-decoration: underline;
}

.drinkbev-breadcrumb-wrap .rank-math-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 6px;
}

.drinkbev-breadcrumb-wrap .rank-math-breadcrumb .last {
    color: rgba(255, 255, 255, 0.45);
}


/* ==========================================================================
   3. LOCATION FEATURES LIST
   ==========================================================================
   Taxonomy-driven icon+label list (Drive-Thru, Open Late, etc.)
   Supports theme="dark" (default) and theme="light" via modifier classes.
   ========================================================================== */

.drinkbev-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drinkbev-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

/* Feature icon (Font Awesome) */
.drinkbev-features-list .drinkbev-feature-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Feature label text */
.drinkbev-features-list .drinkbev-feature-label {
    font-size: 15px;
    font-weight: 500;
}

/* ── Dark theme (default on location pages) ── */
.drinkbev-features-list--dark li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drinkbev-features-list--dark .drinkbev-feature-icon {
    color: #00aaff;
}

.drinkbev-features-list--dark .drinkbev-feature-label {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Light theme ── */
.drinkbev-features-list--light li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.drinkbev-features-list--light .drinkbev-feature-icon {
    color: #00aaff;
}

.drinkbev-features-list--light .drinkbev-feature-label {
    color: #0a2540;
}


/* ==========================================================================
   4. CITY LINE
   ==========================================================================
   Reverse-geocoded "City, State Zip" beneath the location title.
   ========================================================================== */

.drinkbev-city-line {
    font-size: 14px;
}

.drinkbev-city-line--dark {
    color: rgba(255, 255, 255, 0.55);
}

.drinkbev-city-line--light {
    color: #6a8aa0;
}


/* ==========================================================================
   5. STORE HOURS TABLE
   ==========================================================================
   ACF repeater → day/time table. Highlights today's row with a blue
   left border and tinted background. Supports dark & light themes.
   ========================================================================== */

.drinkbev-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    border: none;
}

.drinkbev-hours-table td {
    padding: 12px 16px;
    font-size: 14px;
    border: none;
}

/* Day name column (left) */
.drinkbev-hours-table .drinkbev-hours-day {
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Time column (right-aligned) */
.drinkbev-hours-table .drinkbev-hours-time {
    text-align: right;
}

/* "Today" badge next to the current day */
.drinkbev-hours-today-badge {
    font-size: 10px;
    color: #00aaff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* "Hours not available" fallback */
.drinkbev-hours-unavailable {
    font-size: 14px;
}

/* ── Dark theme ── */
.drinkbev-hours-table--dark tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid transparent;
}

.drinkbev-hours-table--dark .drinkbev-hours-day {
    color: #ffffff;
}

.drinkbev-hours-table--dark .drinkbev-hours-time {
    color: rgba(255, 255, 255, 0.7);
}

/* Today's row highlight — dark */
.drinkbev-hours-table--dark tr.drinkbev-hours-today {
    background: rgba(0, 170, 255, 0.12);
    font-weight: 700;
    border-left: 3px solid #00aaff;
}

.drinkbev-hours-unavailable--dark {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Light theme ── */
.drinkbev-hours-table--light tr {
    border-bottom: 1px solid #eeeeee;
    border-left: 3px solid transparent;
}

.drinkbev-hours-table--light .drinkbev-hours-day {
    color: #0a2540;
}

.drinkbev-hours-table--light .drinkbev-hours-time {
    color: #555555;
}

/* Today's row highlight — light */
.drinkbev-hours-table--light tr.drinkbev-hours-today {
    background: #e8f4fd;
    font-weight: 700;
    border-left: 3px solid #00aaff;
}

.drinkbev-hours-unavailable--light {
    color: #555;
}


/* ==========================================================================
   6. MAP PIN & POPUP (common classes)
   ==========================================================================
   The map container gets a unique ID per page (bev-single-map-{post_id}),
   so ID-scoped styles remain in functions.php. The classes below are
   shared across all map instances.
   ========================================================================== */

/* Custom blue pin marker */
.bev-pin-outer {
    width: 36px;
    height: 36px;
    background: #00aaff;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bev-pin-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: rotate(45deg);
}

/*
 * Dark popup card (matches #0a2540 brand)
 * Scoped to .drinkbev-map (single location) and #bev-finder (archive)
 * so our styles beat Leaflet's defaults + theme link colours.
 */
.drinkbev-map .leaflet-popup-content-wrapper,
#bev-finder .leaflet-popup-content-wrapper {
    background: #0a2540;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 0;
}

.drinkbev-map .leaflet-popup-content,
#bev-finder .leaflet-popup-content {
    margin: 0;
    padding: 0;
    min-width: 180px;
}

.drinkbev-map .leaflet-popup-tip,
#bev-finder .leaflet-popup-tip {
    background: #0a2540;
}

.drinkbev-map .leaflet-popup-close-button,
#bev-finder .leaflet-popup-close-button {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 20px !important;
    top: 10px !important;
    right: 12px !important;
}

/* Popup inner wrapper — used on archive (.bev-pop), single map has padding on .leaflet-popup-content */
.drinkbev-map .leaflet-popup-content,
#bev-finder .bev-pop {
    padding: 18px 20px 16px;
}

/* Popup inner elements — scoped to beat theme link colours on both maps */
.drinkbev-map .bev-pop-title,
#bev-finder .bev-pop-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.3;
    padding-right: 16px;
}

.drinkbev-map .bev-pop-city,
#bev-finder .bev-pop-city {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}

#bev-finder .bev-pop-hours {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}

/* "Get Directions" (single) / "View Details" (archive) button */
.drinkbev-map .bev-pop-dir,
#bev-finder .bev-pop-btn {
    display: block;
    background: #00aaff;
    color: #fff !important;
    text-decoration: none !important;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 11px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}

.drinkbev-map .bev-pop-dir:hover,
#bev-finder .bev-pop-btn:hover {
    background: #0095e0;
    color: #fff !important;
    text-decoration: none !important;
}

/* "Loading map…" placeholder while Leaflet lazy-loads */
.bev-map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-family: sans-serif;
}


/* ==========================================================================
   7. NEARBY COMMUNITIES
   ==========================================================================
   ACF-driven "Also proudly serving Pinecrest, Palmetto Bay & …" text.
   ========================================================================== */

.drinkbev-nearby-communities {
    margin-top: 20px;
    padding-top: 16px;
}

.drinkbev-nearby-communities p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* "Also proudly serving" label */
.drinkbev-nearby-communities .drinkbev-community-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Dark theme ── */
.drinkbev-nearby-communities--dark {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drinkbev-nearby-communities--dark p {
    color: rgba(255, 255, 255, 0.7);
}

.drinkbev-nearby-communities--dark .drinkbev-community-label {
    color: #00aaff;
}

.drinkbev-nearby-communities--dark .drinkbev-community-list {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Light theme ── */
.drinkbev-nearby-communities--light {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.drinkbev-nearby-communities--light p {
    color: #555;
}

.drinkbev-nearby-communities--light .drinkbev-community-label {
    color: #0066cc;
}

.drinkbev-nearby-communities--light .drinkbev-community-list {
    color: #555;
}


/* ==========================================================================
   8. NEARBY LOCATIONS
   ==========================================================================
   Haversine-sorted cards linking to the 3 closest other locations.
   Flexbox grid with hover border accent.
   ========================================================================== */

.drinkbev-nearby-locations {
    margin-top: 40px;
}

.drinkbev-nearby-locations__heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.drinkbev-nearby-locations__grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Individual location card */
.drinkbev-nearby-locations__card {
    text-decoration: none;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    border-radius: 12px;
    padding: 16px;
    display: block;
    transition: border-color 0.2s;
}

.drinkbev-nearby-locations__card:hover {
    border-color: #00aaff !important;
}

/* Card inner elements */
.drinkbev-nearby-locations__name {
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}

.drinkbev-nearby-locations__address {
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
}

.drinkbev-nearby-locations__distance {
    color: #00aaff;
    font-size: 12px;
    font-weight: 600;
}

/* ── Dark theme ── */
.drinkbev-nearby-locations--dark .drinkbev-nearby-locations__heading {
    color: #fff;
}

.drinkbev-nearby-locations--dark .drinkbev-nearby-locations__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.drinkbev-nearby-locations--dark .drinkbev-nearby-locations__name {
    color: #fff;
}

.drinkbev-nearby-locations--dark .drinkbev-nearby-locations__address {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Light theme ── */
.drinkbev-nearby-locations--light .drinkbev-nearby-locations__heading {
    color: #0a2540;
}

.drinkbev-nearby-locations--light .drinkbev-nearby-locations__card {
    background: #f7f8fa;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.drinkbev-nearby-locations--light .drinkbev-nearby-locations__name {
    color: #0a2540;
}

.drinkbev-nearby-locations--light .drinkbev-nearby-locations__address {
    color: #555;
}


/* ==========================================================================
   9. RANDOM PRODUCTS
   ==========================================================================
   Row of random WooCommerce product thumbnails with name labels.
   ========================================================================== */

.drinkbev-random-products {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

/* Each product link */
.drinkbev-random-products__item {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s;
}

.drinkbev-random-products__item:hover {
    transform: scale(1.05);
}

/* Product thumbnail image */
.drinkbev-random-products__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Product name label */
.drinkbev-random-products__name {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Dark theme ── */
.drinkbev-random-products--dark .drinkbev-random-products__name {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Light theme ── */
.drinkbev-random-products--light .drinkbev-random-products__name {
    color: #333;
}


/* ==========================================================================
   10. NEXT NEAREST LINK
   ==========================================================================
   Right-aligned "Next Nearest Location: CityName →" link that sits
   opposite the breadcrumb on desktop. Matches breadcrumb font size
   and weight for visual balance.
   ========================================================================== */

.drinkbev-next-nearest {
    text-align: right;
    padding-top: 2px;
}

.drinkbev-next-nearest a {
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}

/* ── Dark theme ── */
.drinkbev-next-nearest--dark a {
    color: rgba(255, 255, 255, 0.6);
}

.drinkbev-next-nearest--dark a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Light theme ── */
.drinkbev-next-nearest--light a {
    color: rgba(0, 0, 0, 0.5);
}

.drinkbev-next-nearest--light a:hover {
    color: rgba(0, 0, 0, 0.8);
}


/* ==========================================================================
   11. RESPONSIVE / MOBILE
   ==========================================================================
   Single Location Template (Elementor post 364)
   Section: 9ce6376 | Col 1 (text): d524368 | Col 2 (image): 89175e2

   On tablet/mobile (≤1024px):
   - Reverse column order so the hero image appears first
   - Remove Column 2 top padding (only needed for desktop alignment)
   - Hide desktop-only widgets: Next Nearest link, spacer, random products
   ========================================================================== */

@media (max-width: 1024px) {

    /* Reverse columns: image (Col 2) on top, text (Col 1) below */
    .elementor-element-9ce6376 > .elementor-container {
        flex-direction: column-reverse;
    }

    /* Remove Column 2 desktop padding (60px top for breadcrumb alignment) */
    .elementor-element-89175e2 > .elementor-widget-wrap {
        padding-top: 0 !important;
    }

    /* Hide Next Nearest link (stacked layout makes it redundant) */
    .elementor-element-85e9dd9 {
        display: none !important;
    }

    /* Hide spacer (only needed for desktop column alignment) */
    .elementor-element-c381092 {
        display: none !important;
    }

    /* Hide random products (sits between image and title — cluttered) */
    .elementor-element-d3abf7a {
        display: none !important;
    }
}


/* ==========================================================================
   12. CLS (CUMULATIVE LAYOUT SHIFT) FIXES
   ==========================================================================
   Reserves space for late-loading elements to prevent layout shifts.
   Primary culprit: footer (50ce931) lazy-loaded by Elementor, causing
   a 0.219 CLS score on mobile. Fix: min-height + contain.
   ========================================================================== */

/**
 * Archive / page content CLS fix — push footer below the fold.
 *
 * Root cause: on mobile (Moto G Power, 823px viewport), the archive content
 * (690px) + header (65px) = 755px, leaving the footer visible 68px above
 * the fold. As content loads (images, Elementor widgets), the footer shifts
 * down → 0.237 CLS.  Fix: give the archive/page wrapper enough min-height
 * so the footer starts off-screen. Any subsequent shifts are invisible.
 */
.elementor-location-archive,
.elementor-location-single {
    min-height: 100vh;
}

/**
 * Footer CLS fix — reserve minimum height so the footer doesn't collapse
 * to 0 before Elementor lazy-loads its content (element 50ce931).
 */
.elementor-location-footer {
    min-height: 300px;
    contain: layout style;
}

.elementor-location-footer .elementor-element-50ce931 {
    min-height: 300px;
}

/**
 * Header CLS fix — reserve space for the sticky nav.
 * Prevents content reflow when the header becomes sticky on scroll.
 */
.elementor-element-e998204 {
    min-height: 60px;
}

/**
 * Site logo — ensure explicit dimensions to prevent CLS.
 * The logo is the LCP element; sizing it early avoids reflow.
 */
.elementor-widget-theme-site-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}


/* ==========================================================================
   13. MOBILE / TABLET SEARCH IN HAMBURGER MENU
   ==========================================================================
   The desktop search widget (d18ea79) is absolutely positioned at the
   top-right of the header container (e998204). On tablet/mobile (≤1024px)
   it overlaps the hamburger menu toggle, blocking navigation.
   Fix: hide the desktop widget and inject a lightweight search form into
   the Elementor mobile nav dropdown via JS (functions.php § 10).
   ========================================================================== */

/**
 * Hide the absolutely-positioned desktop search widget on tablet/mobile.
 * Elementor switches to hamburger at ≤1024px, so we match that breakpoint.
 */
@media (max-width: 1024px) {
    .elementor-element-d18ea79 {
        display: none !important;
    }
}

/**
 * Injected search form inside the mobile nav dropdown.
 * Dropdown is white (#fff) with navy (#043072) text & 1px navy border.
 * Menu items use: Poppins 15px, padding 20px 15px.
 */
.bev-mobile-search {
    padding: 12px 15px 16px;
    border-top: 1px solid rgba(4, 48, 114, 0.15);
}

.bev-mobile-search form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bev-mobile-search input[type="search"] {
    flex: 1;
    background: #f5f7fa;
    border: 1px solid rgba(4, 48, 114, 0.25);
    border-radius: 20px;
    padding: 10px 16px;
    color: #043072;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.bev-mobile-search input[type="search"]::placeholder {
    color: rgba(4, 48, 114, 0.45);
}

.bev-mobile-search input[type="search"]:focus {
    border-color: #043072;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(4, 48, 114, 0.1);
}

.bev-mobile-search button[type="submit"] {
    background: #043072;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.bev-mobile-search button[type="submit"]:hover,
.bev-mobile-search button[type="submit"]:focus {
    background: #062a5e;
}


/* ==========================================================================
   14. TABLET / MOBILE HEADER LAYOUT
   ==========================================================================
   On tablet/mobile (≤1024px), Elementor switches the nav to a hamburger
   menu.  The header container (e998204) uses flexbox with space-between,
   but the logo (70056dea) is absolutely positioned (out of flow) and the
   search widget (d18ea79) is hidden (§ 13), leaving the nav-menu widget
   (189993e1) as the sole in-flow child — which centers by default.
   Additionally, with ALL children out-of-flow the container collapses
   to just its padding (32px) instead of accommodating the logo.

   Fix:
   1. min-height on the header so it never collapses below its content
   2. Absolutely position the hamburger to the right
   3. Shrink the logo to fit within the header height

   On narrow desktops (1025–1200px), the absolutely-positioned search widget
   (290px at right:25px) collides with the last nav link ("Contact").
   Fix: shrink search to 200px in that range (input still ~140px — fine).
   ========================================================================== */

@media (max-width: 1024px) {
    /**
     * Prevent the header from collapsing.
     * With the logo absolutely-positioned (out of flow), the nav widget
     * absolutely-positioned (below), and the search hidden, the container
     * has zero in-flow children and collapses to padding only (32px).
     * Force 65px to match the desktop height and contain the 55px logo.
     */
    .elementor-element-e998204 {
        min-height: 65px !important;
    }

    /**
     * Right-align the hamburger menu toggle.
     * Absolute-position to the right edge, vertically centered in the
     * 65px header.  24px right matches the container's padding-right.
     */
    .elementor-element-189993e1 {
        position: absolute !important;
        right: 24px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /**
     * Shrink the site logo on tablet/mobile.
     * Desktop: 85×85px (absolutely positioned, intentionally oversized).
     * Tablet/mobile: 55×55px — fits within the 65px header height.
     */
    .elementor-element-70056dea {
        width: 55px !important;
    }

    .elementor-element-70056dea img {
        width: 55px !important;
        height: 55px !important;
    }
}

/**
 * Narrow desktop: shrink the search widget to avoid collision with nav links.
 * At 1025–1200px the 290px search overlaps the last nav item ("Contact").
 * 200px (≈140px input + 56px button) is still fully usable.
 */
@media (min-width: 1025px) and (max-width: 1200px) {
    .elementor-element-d18ea79 {
        width: 200px !important;
    }
}


/* ==========================================================================
   15. LOCATION FINDER LOADING STATE
   ==========================================================================
   While the REST API fetches location data, #bev-grid inside #bev-list
   is empty and #bev-count displays "Loading…".  This replaces the plain
   text with a full-height centered CSS spinner.  When JS populates
   #bev-grid with cards, :empty no longer matches → spinner gone, count
   shown — pure CSS, no JS changes needed.

   Uses :has() (supported in all modern browsers since 2023).
   ========================================================================== */

/**
 * Spinner keyframes — smooth 360° rotation.
 */
@keyframes bev-spin {
    to { transform: rotate(360deg); }
}

/**
 * While #bev-grid is empty (loading), convert #bev-list into a
 * centered flex container and hide the "Loading…" text.
 */
#bev-list:has(#bev-grid:empty) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#bev-list:has(#bev-grid:empty) > #bev-count {
    display: none;
}

#bev-list:has(#bev-grid:empty) > #bev-grid {
    display: none;
}

/**
 * The spinner itself — a large, modern circular animation.
 * Rendered as an ::after pseudo-element on #bev-list so it's
 * perfectly centered in the full-height panel.
 */
#bev-list:has(#bev-grid:empty)::after {
    content: '';
    width: 56px;
    height: 56px;
    border: 4px solid rgba(0, 170, 255, 0.15);
    border-top-color: #00aaff;
    border-radius: 50%;
    animation: bev-spin 0.8s linear infinite;
    margin: auto 0;
}

/**
 * Mobile: #bev-finder switches to column layout at ≤860px (inline widget CSS)
 * and #bev-list collapses to content height.  Give it a min-height during
 * loading so the spinner has room to center properly.
 */
@media (max-width: 860px) {
    #bev-list:has(#bev-grid:empty) {
        min-height: 40vh;
    }
}


/* ==========================================================================
   16. SEARCH BAR ABOVE LOCATION CARDS
   ==========================================================================
   JS (functions.php § 11) moves #bev-search-wrap from its absolute
   position inside #bev-map to the top of #bev-list.  These overrides
   convert it from a floating map overlay to a sticky header above the
   location cards.  Scoped with `#bev-list >` so if JS fails the search
   stays on the map with its original inline-widget styles.
   ========================================================================== */

/**
 * Remove the default top padding from #bev-list — the search bar's
 * own padding replaces it.  Inline widget sets `padding: 16px 14px 40px`.
 */
#bev-list {
    padding-top: 0 !important;
}

/**
 * Container — sticky at the top of the scrollable card list.
 * Overrides the inline widget's `position: absolute; top: 20px; right: 20px;
 * width: 340px`.  Background matches #bev-list's #f0f4f9.
 */
#bev-list > #bev-search-wrap {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    width: 100% !important;
    z-index: 10;
    background: #f0f4f9;
    padding: 12px 14px;
    box-sizing: border-box;
}

/**
 * Input — soften the shadow for the new context.
 * On the map it needed a heavy shadow to pop off the imagery;
 * above the cards a subtle shadow is enough.
 */
#bev-list > #bev-search-wrap #bev-search {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#bev-list > #bev-search-wrap #bev-search:focus {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/**
 * Icons — nudge right to compensate for wrap padding.
 * The icons use `position: absolute; right: Npx` relative to
 * #bev-search-wrap.  With the wrap's 14px padding the icons crowd
 * the input's rounded right edge.  Add 14px to each.
 */
#bev-list > #bev-search-wrap .bev-si {
    right: 30px !important;
}

#bev-list > #bev-search-wrap #bev-near-me {
    right: 52px !important;
}