/* PickleRage Map Plugin Styles
   Scoped under #picklerage-map-wrapper to avoid theme conflicts */

:root {
    --br_color_green_main: #212A52;
    --br_color_green: #768801;
    --br_color_aqua: #2ED7DE;
    --br_color_aqua_light: #88DBDF;
    --br_color_gray_light: #EFF0F0;
    --br_color_gray_dark: #2D2926;
}

#picklerage-map-wrapper {
    width: 100%;
    box-sizing: border-box;
}

#picklerage-map-wrapper *,
#picklerage-map-wrapper *::before,
#picklerage-map-wrapper *::after {
    box-sizing: border-box;
}

#picklerage-map-wrapper section#location-finder {
    display: flex;
    flex-direction: column;
}

#picklerage-map-wrapper #location-finder-sidebar {
    background-color: var(--br_color_green_main);
    width: 100%;
    color: white;
}

#picklerage-map-wrapper #location-finder-map {
    width: 100%;
    outline: 0;
    height: 300px;
    background-color: var(--br_color_gray_light);
}

#picklerage-map-wrapper .results {
    color: #fff;
}

/* Mobile Tabs */
#picklerage-map-wrapper .mobile-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#picklerage-map-wrapper .mobile-tab .mobile-tab-list-view {
    margin-right: 10px;
}

@media (min-width: 992px) {
    #picklerage-map-wrapper .mobile-tabs {
        display: none;
    }

    #picklerage-map-wrapper section#location-finder {
        flex-direction: row;
    }

    #picklerage-map-wrapper #location-finder-sidebar {
        background-color: var(--br_color_green_main);
        height: 70vh;
        width: 400px;
        max-width: 30%;
        overflow-y: auto;
    }

    #picklerage-map-wrapper #location-finder-map {
        display: block;
        outline: 0;
        height: auto;
        background-color: var(--br_color_gray_light);
        width: 100%;
    }
}

/* Input Field and Button */
#picklerage-map-wrapper #location-finder-search .search-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    margin-right: 10px;
}

#picklerage-map-wrapper #location-finder-search,
#picklerage-map-wrapper #location-finder-list-view {
    padding: 0 15px;
}

#picklerage-map-wrapper #location-finder-search-button {
    width: 100%;
    height: 40px;
    padding: 0;
    background-color: #b1ca12;
    border: none;
    cursor: pointer;
    margin-top: 25px;
    margin-bottom: 25px;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    color: #212a52;
}

#picklerage-map-wrapper #location-finder-search-button:hover {
    background-color: #9db30f;
}

/* Error Message Styles */
#picklerage-map-wrapper .error-msg {
    display: none;
    margin-top: 10px;
    padding: 5px;
    border-radius: 3px;
    font-size: 14px;
}

#picklerage-map-wrapper .error-msg.active {
    display: block;
}

#picklerage-map-wrapper .error-required {
    background-color: #ffdddd;
    border: 1px solid #ffcccc;
}

#picklerage-map-wrapper .error-empty {
    background-color: #ffffe0;
    border: 1px solid #ffffcc;
}

/* Mobile Tabs */
#picklerage-map-wrapper .mobile-tabs .mobile-tab {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #e9e9e9;
    margin-right: -1px;
    cursor: pointer;
    color: #000;
}

#picklerage-map-wrapper .mobile-tabs .active {
    background-color: #d9d9d9;
}

/* List Results */
#picklerage-map-wrapper .list-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

#picklerage-map-wrapper .list-results li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Box styling for each result */
#picklerage-map-wrapper .list-results .result {
    border: 1px solid #ffffffc7;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: var(--br_color_green_main);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
    background: #fff;
    cursor: pointer;
}

#picklerage-map-wrapper .list-results .result:hover,
#picklerage-map-wrapper .list-results .result.active {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#picklerage-map-wrapper .results-text {
    display: block;
    margin-top: 10px;
    color: #fff;
}

#picklerage-map-wrapper .view-all-locations {
    color: #b0ca36;
}

#picklerage-map-wrapper h2.clearfix {
    font-size: 1em;
}

/* Update the title and distance span */
#picklerage-map-wrapper .result-content .name,
#picklerage-map-wrapper .result-content .distance-directions,
#picklerage-map-wrapper h2.clearfix {
    color: #333;
    padding: 5px 0;
    display: block;
}

/* Style the address */
#picklerage-map-wrapper .result-content .address {
    display: block;
    color: #000;
    padding: 5px 0;
}

/* Style the links within the title */
#picklerage-map-wrapper .result-content .link-text a {
    text-decoration: none;
    font-weight: 700;
    color: #3f3f3f;
    font-size: 18px;
}

#picklerage-map-wrapper .result-content .link-text a:hover {
    text-decoration: underline;
}

/* Footer */
#picklerage-map-wrapper .result-footer {
    display: none;
    padding: 10px 15px;
    background-color: var(--br_color_green_main);
}

#picklerage-map-wrapper #searchField {
    margin-top: 10px;
}

/* Ajax loader */
#picklerage-map-wrapper .ajax-loader {
    display: inline-block;
    width: 20px;
    height: 20px;
}

/* Clearfix */
#picklerage-map-wrapper .clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* InfoWindow */
#picklerage-map-wrapper .infowindow-content {
    font-family: inherit;
    max-width: 280px;
}
#picklerage-map-wrapper .infowindow-content .name {
    font-weight: 700;
    margin: 0 0 4px;
}
#picklerage-map-wrapper .infowindow-content .name a {
    color: #212A52;
    text-decoration: none;
}
#picklerage-map-wrapper .infowindow-content .name a:hover {
    text-decoration: underline;
}
#picklerage-map-wrapper .infowindow-content .address {
    margin: 4px 0;
    color: #555;
}
#picklerage-map-wrapper .infowindow-content .phone {
    margin: 4px 0;
    color: #333;
}
#picklerage-map-wrapper .infowindow-content .directions-link a {
    color: #768801;
    text-decoration: none;
    font-weight: 600;
}
#picklerage-map-wrapper .infowindow-content .directions-link a:hover {
    text-decoration: underline;
}