/**
 * WPSL Pin Highlight - wpsl-custom.css
 *
 * Styles for the WP Store Locator pin highlight feature.
 * - Makes the store list scrollable
 * - Styles each list item with hover state
 * - Highlights the active (pin-clicked) store with brand color #8F0B0A
 * - Black search bar with white text
 */

/* -----------------------------------------------------------------------------
 * Search bar — black background, white text
 * --------------------------------------------------------------------------- */

.wpsl-search {
    background-color: #111111 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.wpsl-search label,
.wpsl-search span {
    color: #ffffff !important;
}

.wpsl-search input[type="text"],
.wpsl-search .wpsl-dropdown,
.wpsl-search .wpsl-selected-item {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

.wpsl-search input[type="text"]::placeholder {
    color: #aaaaaa !important;
}

.wpsl-search .wpsl-dropdown ul {
    background-color: #222222 !important;
    border: 1px solid #444444 !important;
}

.wpsl-search .wpsl-dropdown ul li {
    color: #ffffff !important;
    background: #222222 !important;
    border-left: none !important;
    border-bottom: 1px solid #444444 !important;
}

.wpsl-search .wpsl-dropdown ul li:hover {
    background-color: #333333 !important;
    border-left: none !important;
}

.wpsl-search-btn-wrap #wpsl-search-btn,
.wpsl-search-btn-wrap input#wpsl-search-btn,
#wpsl-wrap .wpsl-search-btn-wrap #wpsl-search-btn,
#wpsl-search-wrap .wpsl-search-btn-wrap input[type=submit]#wpsl-search-btn {
    background-color: #8F0B0A !important;
    background-image: none !important;
    background: #8F0B0A !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    --avelon-button-color-idle: #ffffff;
    --avelon-button-bg-idle: #8F0B0A;
}

.wpsl-search-btn-wrap #wpsl-search-btn:hover {
    background-color: #6e0808 !important;
    background: #6e0808 !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
 * Search bar — desktop layout (centered, single row)
 * --------------------------------------------------------------------------- */

@media ( min-width: 769px ) {

    #wpsl-search-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #wpsl-search-wrap form {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        width: auto !important;
    }

    #wpsl-search-wrap .wpsl-input,
    #wpsl-search-wrap #wpsl-radius,
    #wpsl-search-wrap #wpsl-results,
    #wpsl-search-wrap .wpsl-search-btn-wrap,
    #wpsl-search-wrap .wpsl-select-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        float: none !important;
        margin-right: 0 !important;
        white-space: nowrap !important;
    }

    #wpsl-search-wrap .wpsl-input label,
    #wpsl-search-wrap #wpsl-radius label,
    #wpsl-search-wrap #wpsl-results label {
        display: inline !important;
        margin-right: 6px !important;
        white-space: nowrap !important;
    }

}

/* -----------------------------------------------------------------------------
 * Search bar — mobile layout (stacked vertically)
 * --------------------------------------------------------------------------- */

@media ( max-width: 768px ) {

    .wpsl-search {
        padding: 12px !important;
    }

    #wpsl-search-wrap,
    #wpsl-search-wrap form {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All direct children stack vertically */
    #wpsl-search-wrap .wpsl-input,
    #wpsl-search-wrap .wpsl-select-wrap,
    #wpsl-search-wrap .wpsl-search-btn-wrap {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 8px 0 !important;
        box-sizing: border-box !important;
    }

    /* wpsl-select-wrap children (#wpsl-radius, #wpsl-results) also stack */
    #wpsl-search-wrap .wpsl-select-wrap #wpsl-radius,
    #wpsl-search-wrap .wpsl-select-wrap #wpsl-results {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 8px 0 !important;
        box-sizing: border-box !important;
    }

    /* Labels */
    #wpsl-search-wrap .wpsl-input > div,
    #wpsl-search-wrap #wpsl-radius label,
    #wpsl-search-wrap #wpsl-results label {
        display: block !important;
        color: #ffffff !important;
        margin-bottom: 4px !important;
    }

    /* Inputs and dropdowns full width */
    #wpsl-search-wrap input[type="text"],
    #wpsl-search-wrap .wpsl-dropdown,
    #wpsl-search-wrap .wpsl-selected-item {
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Search button full width */
    #wpsl-search-btn,
    .wpsl-search-btn-wrap #wpsl-search-btn,
    #wpsl-search-wrap .wpsl-search-btn-wrap input[type=submit]#wpsl-search-btn {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin-top: 8px !important;
    }

}

/* -----------------------------------------------------------------------------
 * Scrollable store list
 * --------------------------------------------------------------------------- */

#wpsl-stores {
    max-height: 560px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

#wpsl-stores ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* -----------------------------------------------------------------------------
 * Base list item
 * --------------------------------------------------------------------------- */

#wpsl-wrap #wpsl-stores ul li {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-left: 4px solid transparent !important;
    border-top: none !important;
    border-right: none !important;
    margin: 0 !important;
    background: #ffffff !important;
    transition: background 0.2s ease, border-left-color 0.2s ease;
    cursor: pointer;
    list-style: none !important;
}

#wpsl-wrap #wpsl-stores ul li:hover {
    background: #f9f9f9 !important;
    border-left-color: #c97070 !important;
}

/* -----------------------------------------------------------------------------
 * Active / highlighted store (pin clicked)
 * --------------------------------------------------------------------------- */

#wpsl-wrap #wpsl-stores ul li.wpsl-active-store {
    background: #f5f5f5 !important;
    border-left: 5px solid #8F0B0A !important;
    border-top: 1px solid #f5c6c6 !important;
    border-bottom: 1px solid #f5c6c6 !important;
    border-right: 1px solid #f5c6c6 !important;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 3px 12px rgba( 143, 11, 10, 0.12 ) !important;
    animation: wpsl-slide-in 0.3s ease;
    margin-bottom: 4px !important;
}

/* Store name */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store p strong {
    color: #111111 !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 2px;
}

/* Address lines */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store p span {
    color: #333333 !important;
}

/* Distance / directions row */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store .wpsl-direction-wrap {
    color: #333333 !important;
    font-weight: 500;
    margin-top: 6px;
}

/* Store name link — black */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store p strong a {
    color: #111111 !important;
    text-decoration: none !important;
}

/* Other links (Directions) — red */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store .wpsl-direction-wrap a,
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store .wpsl-website-wrap a {
    color: #8F0B0A !important;
    font-weight: 600 !important;
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
 * Slide-in animation
 * --------------------------------------------------------------------------- */

@keyframes wpsl-slide-in {
    0%   { opacity: 0; transform: translateY( -10px ); }
    100% { opacity: 1; transform: translateY( 0 ); }
}

/* -----------------------------------------------------------------------------
 * Custom scrollbar (webkit)
 * --------------------------------------------------------------------------- */

#wpsl-stores::-webkit-scrollbar {
    width: 5px;
}

#wpsl-stores::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#wpsl-stores::-webkit-scrollbar-thumb {
    background: #c97070;
    border-radius: 4px;
}

#wpsl-stores::-webkit-scrollbar-thumb:hover {
    background: #8F0B0A;
}

/* -----------------------------------------------------------------------------
 * Visit Website button — store list tiles and map popup
 * --------------------------------------------------------------------------- */

.wpsl-visit-website {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 12px;
    background-color: #8F0B0A;
    color: #ffffff !important;
    font-size: 0.82em;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.wpsl-visit-website:hover {
    background-color: #6e0808 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Active store — keep button visible */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store .wpsl-visit-website,
#wpsl-wrap #wpsl-stores ul li .wpsl-visit-website {
    background-color: #8F0B0A !important;
    background: #8F0B0A !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    --avelon-button-color-idle: #ffffff;
    --avelon-button-bg-idle: #8F0B0A;
}

/* Directions link — keep red */
#wpsl-wrap #wpsl-stores ul li.wpsl-active-store .wpsl-direction-wrap a.wpsl-directions {
    color: #8F0B0A !important;
    text-decoration: underline !important;
}

/* Inside map info window popup */
.gm-style .wpsl-visit-website {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 12px;
    background-color: #8F0B0A;
    color: #ffffff !important;
    font-size: 0.82em;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px;
}

.gm-style .wpsl-visit-website:hover {
    background-color: #6e0808 !important;
}