/*
 * Scout Locator — locator.css
 *
 * STRUCTURAL CSS ONLY.
 * All visual properties (colours, font sizes, spacing, borders, shadows)
 * are controlled via CSS custom properties set by each Divi module's
 * render() method. Fallback values here ensure sane defaults when
 * the module settings haven't been touched.
 *
 * DO NOT add hardcoded colour or spacing values here.
 * Use var(--scout-*, fallback) for anything visual.
 */

/* =============================================
   CSS CUSTOM PROPERTY DEFAULTS
   (overridden per-module-instance by Divi VB settings)
   ============================================= */
:root {
    /* Brand */
    --scout-accent:             #262661;
    --scout-accent-dark:        #1a1a45;
    --scout-secondary:          #262661;

    /* Text */
    --scout-text:               #333333;
    --scout-text-light:         #555555;
    --scout-text-muted:         #888888;
    --scout-link-color:         #262661;

    /* Surfaces */
    --scout-surface:            #f1f3f5;
    --scout-surface-hover:      #e8e8f0;
    --scout-card-bg:            #ffffff;
    --scout-card-border:        #e2e2e2;

    /* Buttons */
    --scout-btn-text:           #ffffff;
    --scout-clear-btn-bg:       #ffffff;
    --scout-clear-btn-color:    #262661;
    --scout-clear-btn-border:   #262661;

    /* Status badges */
    --scout-active-bg:          #d4edda;
    --scout-active-color:       #155724;
    --scout-active-border:      #c3e6cb;
    --scout-inactive-bg:        #f8d7da;
    --scout-inactive-color:     #721c24;
    --scout-inactive-border:    #f5c6cb;

    /* Distance chip */
    --scout-distance-color:     #888888;

    /* Input */
    --scout-input-bg:           #ffffff;
    --scout-input-border:       #bbbbbb;
    --scout-input-text:         #333333;

    /* Suggestions */
    --scout-suggest-bg:         #ffffff;
    --scout-suggest-border:     #cccccc;
    --scout-suggest-hover-bg:   #f4f4f4;
    --scout-suggest-hover-text: #262661;

    /* Hall specific */
    --scout-amenity-bg:         #f0f0f0;
    --scout-amenity-border:     #dddddd;
    --scout-amenity-color:      #333333;
    --scout-pricing-text:       #ffffff;
    --scout-contact-border:     #eeeeee;

    /* Banner specific */
    --scout-blurb-bg:           #262661;
    --scout-blurb-color:        #ffffff;

    /* Map */
    --scout-map-height:         550px;
    --scout-popup-heading:      #262661;
    --scout-popup-text:         #444444;
    --scout-popup-muted:        #888888;

    /* No results */
    --scout-no-results-bg:      #fff3cd;
}


/* =============================================
   1. CONTAINER
   ============================================= */
.scout-locator-wrap,
#scout-locator-app,
#scout-hall-locator-app {
    font-family: inherit;
    max-width: 100%;
}


/* =============================================
   2. SEARCH BAR
   ============================================= */
.locator-search-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
    background: var(--scout-surface);
    padding: 20px;
    border-radius: 8px;
}

/* Input wrapper — comes first in DOM, grows to fill available space */
.locator-search-bar .input-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
    order: 0;
}

/* Button group — comes after input in DOM (right side) */
.locator-search-bar .button-group {
    flex-shrink: 0;
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Hidden label spacer — matches height of input-wrapper label so buttons align with the input */
.locator-search-bar .button-group::before {
    content: '\00a0';
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    visibility: hidden;
    pointer-events: none;
}

/* Actual buttons sit in a row */
.locator-search-bar .button-group .btn-row {
    display: flex;
    gap: 10px;
}

/* Filters always span full width below the input row */
.locator-search-bar .locator-filters {
    order: 2;
    width: 100%;
}

.input-wrapper label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--scout-text);
}

.input-wrapper input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--scout-input-border);
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    background: var(--scout-input-bg);
    color: var(--scout-input-text);
}

.input-wrapper input[type="text"]:focus {
    outline: 2px solid var(--scout-accent);
    outline-offset: -1px;
}


/* =============================================
   3. SUGGESTIONS DROPDOWN
   ============================================= */
.suggestions-dropdown {
    position: absolute;
    background: var(--scout-suggest-bg);
    border: 1px solid var(--scout-suggest-border);
    width: 100%;
    z-index: 999;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    top: 100%;
    border-radius: 0 0 5px 5px;
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--scout-card-border);
    font-size: 14px;
    color: var(--scout-text);
}

.suggestion-item:hover {
    background: var(--scout-suggest-hover-bg);
    color: var(--scout-suggest-hover-text);
}


/* =============================================
   4. FILTERS
   ============================================= */
.locator-filters .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--scout-text);
}

.filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    background: var(--scout-card-bg);
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid var(--scout-card-border);
    color: var(--scout-text);
    transition: border-color 0.2s, background 0.2s;
}

.filter-check:hover {
    border-color: var(--scout-accent);
}

.filter-check:has(input:checked) {
    border-color: var(--scout-accent);
    background: var(--scout-surface-hover);
    font-weight: 600;
}


/* =============================================
   5. BUTTONS
   ============================================= */
.button-group {
    display: flex;
    gap: 10px;
}

.scout-primary-btn,
#scout-find-btn,
#hall-find-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--scout-accent);
    color: var(--scout-btn-text) !important;
    border: 2px solid var(--scout-accent);
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    text-decoration: none;
    line-height: 1.5;
    box-shadow: none;
}

.scout-primary-btn:hover,
#scout-find-btn:hover,
#hall-find-btn:hover {
    background: var(--scout-accent-dark);
    border-color: var(--scout-accent-dark);
    transform: translateY(-1px);
}

#scout-clear-btn,
#hall-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--scout-clear-btn-bg);
    color: var(--scout-clear-btn-color) !important;
    border: 2px solid var(--scout-clear-btn-border);
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    line-height: 1.5;
}

#scout-clear-btn:hover,
#hall-clear-btn:hover {
    background: var(--scout-surface);
    transform: translateY(-1px);
}


/* =============================================
   6. RESULTS GRID & CARDS
   ============================================= */
.scout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.scout-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    padding: 24px;
    border: 1px solid var(--scout-card-border);
    border-radius: 10px;
    background: var(--scout-card-bg);
    transition: transform 0.2s, box-shadow 0.2s;
}

.scout-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

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

.scout-card-content {
    flex: 1;
}

.scout-card-content h3 {
    margin: 0 0 10px !important;
    color: var(--scout-accent) !important;
}

.addr {
    color: var(--scout-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
    font-size: 14px;
}

.scout-card-footer {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* =============================================
   7. BADGES & TAGS
   ============================================= */
.dist-label {
    font-size: 11px;
    color: var(--scout-distance-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-active {
    background: var(--scout-active-bg);
    color: var(--scout-active-color);
    border: 1px solid var(--scout-active-border);
}

.status-inactive {
    background: var(--scout-inactive-bg);
    color: var(--scout-inactive-color);
    border: 1px solid var(--scout-inactive-border);
}

.no-results {
    grid-column: 1 / -1;
    background: var(--scout-no-results-bg);
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    color: var(--scout-text);
}

.locator-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.locator-filters .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--scout-text);
}

/* Section tag checked border colours */
.card-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.sec-tag {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.sec-tag.sec-joeys    { background: #f2a900; color: #fff; }
.sec-tag.sec-cubs     { background: #ffcd00; color: #000; }
.sec-tag.sec-scouts   { background: #004823; color: #fff; }
.sec-tag.sec-venturers{ background: #9e1b32; color: #fff; }
.sec-tag.sec-rovers   { background: #e4002b; color: #fff; }

/* Section tag checked border colours */
.filter-check:has(input[value="joeys"]):has(input:checked)    { border-left: 4px solid #f2a900; }
.filter-check:has(input[value="cubs"]):has(input:checked)     { border-left: 4px solid #ffcd00; }
.filter-check:has(input[value="scouts"]):has(input:checked)   { border-left: 4px solid #004823; }
.filter-check:has(input[value="venturers"]):has(input:checked){ border-left: 4px solid #9e1b32; }
.filter-check:has(input[value="rovers"]):has(input:checked)   { border-left: 4px solid #e4002b; }

/* Specialty chip checked border colour */
.filter-check:has(input[name="scout_specialty"]):has(input:checked) {
    border-left: 4px solid var(--scout-accent);
}


/* =============================================
   8. VIEW GROUP BUTTON
   ============================================= */
.view-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
    text-align: center;
    background: var(--scout-accent) !important;
    color: var(--scout-btn-text) !important;
    text-decoration: none !important;
    padding: 10px 16px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    box-sizing: border-box;
    transition: background 0.2s, transform 0.2s !important;
    border: 2px solid var(--scout-accent) !important;
    font-size: 14px !important;
}

.view-btn:hover {
    background: var(--scout-accent-dark) !important;
    border-color: var(--scout-accent-dark) !important;
    transform: translateY(-1px);
}

.view-btn-secondary {
    background: transparent !important;
    color: var(--scout-accent) !important;
    border: 2px solid var(--scout-accent) !important;
}

.view-btn-secondary:hover {
    background: var(--scout-accent) !important;
    color: var(--scout-btn-text) !important;
}


/* =============================================
   9. VIEW TOGGLE (List / Map)
   ============================================= */
.scout-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.scout-view-toggle > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--scout-text-muted);
    margin-right: 4px;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 5px;
    border: 2px solid var(--scout-accent);
    background: var(--scout-card-bg);
    color: var(--scout-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    line-height: 1.4;
}

.toggle-btn:hover {
    background: var(--scout-surface-hover);
}

.toggle-btn.active {
    background: var(--scout-accent);
    color: var(--scout-btn-text);
}


/* =============================================
   10. MAP CONTAINER
   ============================================= */
.scout-map-container {
    display: none;
    width: 100%;
    height: var(--scout-map-height, 550px);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--scout-card-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.scout-map-container.active {
    display: block;
}


/* =============================================
   11. LEAFLET POPUP
   ============================================= */
.scout-popup {
    font-family: inherit;
    min-width: 240px;
    max-width: 300px;
}

.scout-popup h3 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    color: var(--scout-popup-heading) !important;
    line-height: 1.3;
}

.scout-popup .popup-sub  { font-size: 12px; color: var(--scout-text-muted); margin: 0 0 8px; }
.scout-popup .popup-addr { font-size: 13px; color: var(--scout-popup-text); margin: 0 0 8px; line-height: 1.4; }
.scout-popup .popup-dist { font-size: 11px; color: var(--scout-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 6px; }

.scout-popup .popup-status {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.scout-popup .popup-status.active   { background: var(--scout-active-bg);   color: var(--scout-active-color);   border: 1px solid var(--scout-active-border); }
.scout-popup .popup-status.inactive { background: var(--scout-inactive-bg); color: var(--scout-inactive-color); border: 1px solid var(--scout-inactive-border); }

.scout-popup .popup-sections { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }

.scout-popup .popup-pricing  { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.scout-popup .popup-rate     { background: var(--scout-accent); color: var(--scout-pricing-text); padding: 3px 10px; border-radius: 12px; font-size: 12px; }

.scout-popup .popup-amenities { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.scout-popup .popup-amenity   { background: var(--scout-amenity-bg); border: 1px solid var(--scout-amenity-border); border-radius: 3px; padding: 2px 7px; font-size: 11px; color: var(--scout-amenity-color); }

.scout-popup .popup-capacity  { font-size: 12px; color: var(--scout-popup-text); margin: 0 0 6px; }

.scout-popup .popup-contact {
    font-size: 12px;
    color: var(--scout-popup-text);
    margin: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--scout-contact-border, #eee);
}

.scout-popup .popup-contact a       { color: var(--scout-link-color); text-decoration: none; }
.scout-popup .popup-contact a:hover { text-decoration: underline; }

.scout-popup .popup-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.scout-popup .popup-links a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s;
}

.scout-popup .popup-link-primary            { background: var(--scout-accent); color: var(--scout-btn-text) !important; border: 2px solid var(--scout-accent); }
.scout-popup .popup-link-primary:hover      { background: var(--scout-accent-dark); border-color: var(--scout-accent-dark); }
.scout-popup .popup-link-secondary          { background: var(--scout-card-bg); color: var(--scout-accent) !important; border: 2px solid var(--scout-accent); }
.scout-popup .popup-link-secondary:hover    { background: var(--scout-accent); color: var(--scout-btn-text) !important; }


/* =============================================
   12. HALL HIRE — CARD ELEMENTS
   ============================================= */
.hall-title {
    color: var(--scout-accent);
    margin: 0 0 4px !important;
}

.hall-group-name {
    font-size: 13px;
    color: var(--scout-text-light);
    margin: 0 0 4px;
}

.hall-group-name i { color: var(--scout-accent); margin-right: 4px; }

.hall-capacity { display: inline-block; font-size: 13px; color: var(--scout-text-light); margin: 8px 0 6px; }
.hall-capacity i { color: var(--scout-accent); margin-right: 5px; }

.hall-pricing { display: flex; gap: 12px; margin: 10px 0; flex-wrap: wrap; }

.hall-rate {
    background: var(--scout-hall-rate-bg, var(--scout-accent));
    color: var(--scout-pricing-text);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.hall-rate small { font-size: 11px; opacity: 0.85; }

.hall-amenities { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.hall-amenity {
    background: var(--scout-amenity-bg);
    border: 1px solid var(--scout-amenity-border);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--scout-amenity-color);
    white-space: nowrap;
}

.hall-contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--scout-text-light);
    padding-top: 10px;
    border-top: 1px solid var(--scout-contact-border, #eee);
}

.hall-contact span { display: flex; align-items: center; gap: 7px; }
.hall-contact i    { color: var(--scout-accent); width: 14px; flex-shrink: 0; }
.hall-contact a    { color: var(--scout-link-color); text-decoration: none; }
.hall-contact a:hover { text-decoration: underline; }

.hall-book-btn {
    background: var(--scout-accent) !important;
    color: var(--scout-btn-text) !important;
    border-color: var(--scout-accent) !important;
}


/* =============================================
   13. GROUP BANNER
   ============================================= */
.scout-group-banner-wrap {
    margin: 0 0 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.scout-group-banner-image {
    position: relative;
    width: 100%;
    line-height: 0;
}

.scout-banner-img {
    width: 100%;
    height: var(--scout-banner-height, 380px);
    object-fit: cover;
    display: block;
}

.scout-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 28px 24px;
    background: linear-gradient(to top, var(--scout-overlay-color, rgba(38,38,97,0.85)) 0%, transparent 100%);
}

.scout-banner-title {
    margin: 0 !important;
    color: #ffffff !important;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.scout-group-blurb {
    background: var(--scout-blurb-bg);
    color: var(--scout-blurb-color);
    padding: var(--scout-blurb-padding, 20px) 28px;
}

.scout-group-blurb p {
    margin: 0;
    line-height: 1.7;
    color: var(--scout-blurb-color);
}


/* =============================================
   14. RESPONSIVE
   ============================================= */
@media (max-width: 767px) {
    .locator-search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .button-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .scout-grid {
        grid-template-columns: 1fr;
    }

    .scout-map-container {
        height: 400px;
    }

    .scout-banner-img {
        height: 220px;
    }

    .scout-banner-overlay {
        padding: 40px 18px 16px;
    }

    .scout-group-blurb {
        padding: 16px 18px;
    }
}

/* Amenity filter chip checked state */
.filter-check:has(input[name="hall_amenity"]):has(input:checked) {
    border-left: 4px solid var(--scout-accent);
    background: var(--scout-surface-hover);
    font-weight: 600;
}


/* Program day / status filter chips — checked state */
.filter-check:has(input[name="scout_day"]):has(input:checked),
.filter-check:has(input[name="scout_status"]):has(input:checked) {
    border-left: 4px solid var(--scout-accent);
    background: var(--scout-surface-hover);
    font-weight: 600;
}

/* Informational line above name-search results */
.search-notice {
    grid-column: 1 / -1;
    background: var(--scout-surface);
    color: var(--scout-text);
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 13px;
}