/* ============================================
   Store Locator — Style Leister / Guilbert Express
   Full-width, panel + map sticky, sobre et pro
   Couleurs : #1D4059 (primary), #E3001A (accent)
   Typo     : "Rubik", sans-serif
   ============================================ */

/* =============================================
   1. LAYOUT — Full width, débloquer max-width
   ============================================= */
.asl-cont#asl-storelocator {
    font-family: "Rubik", sans-serif;
    border-radius: 0;
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.asl-cont#asl-storelocator .asl-wrapper {
    border-radius: 0;
    max-width: none !important;
    padding: 0 !important;
}

.asl-cont#asl-storelocator .sl-container,
.asl-cont#asl-storelocator .sl-container-fluid {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Neutraliser les marges négatives du grid ASL */
.asl-cont#asl-storelocator .sl-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.asl-cont#asl-storelocator .sl-row>[class*="pol-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Rangée principale map+panel : pleine hauteur */
#asl-storelocator .sl-main-row {
    min-height: calc(100vh - 80px);
}

/* =============================================
   2. FILTRES — Barre de recherche en haut
   ============================================= */

/* Labels au-dessus des champs */
.asl-cont .Filter_section p.mb-2,
.asl-cont .Filter_section .asl-cntrl-lbl {
    font-family: "Rubik", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1D4059;
    margin-bottom: 0.4rem !important;
}

.asl-cont .Filter_section {
    background: #fff;
    padding: 1rem 2rem !important;
    border-bottom: 1px solid #e5e5e5;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 1rem;
}

/* Colonne recherche */
.asl-cont .Filter_section>.search_filter {
    flex: 1 1 40%;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

/* Colonne catégories / filtres */
.asl-cont .Filter_section>.search_filter~[class*="pol-"] {
    flex: 1 1 60%;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

/* Rangée interne des filtres avancés sur une seule ligne aussi */
.asl-cont .Filter_section .asl-advance-filters .sl-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 1rem;
}

.asl-cont .Filter_section .asl-advance-filters .sl-row>[class*="pol-"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

/* Input de recherche */
.asl-cont#asl-storelocator .form-control,
.asl-cont .asl-search-cntrl,
.asl-cont .Filter_section .form-control {
    font-family: "Rubik", sans-serif;
    border: 1px solid #ccc;
    border-radius: 0;
    height: 44px !important;
    font-size: 0.85rem;
    color: #2B2B2B;
    background: #fff;
    transition: border-color 0.2s ease;
    box-shadow: none;
    padding: 0 12px;
}

.asl-cont .asl-search-cntrl:focus,
.asl-cont .Filter_section .form-control:focus,
.asl-cont#asl-storelocator .form-control:focus {
    border-color: #1D4059;
    box-shadow: none;
    outline: none;
}

/* Bouton loupe / géoloc */
.asl-cont .span-geo,
.asl-cont .sl-geo-btn {
    background: transparent !important;
    color: #1D4059 !important;
    border-radius: 0;
    border: 1px solid #ccc !important;
    border-left: none !important;
    transition: color 0.2s ease;
}

.asl-cont .span-geo:hover,
.asl-cont .sl-geo-btn:hover {
    color: #E3001A !important;
}

/* =============================================
   3. FILTRES — Dropdowns
   ============================================= */
.asl-cont .asl-advance-filters {
    padding: 0;
}

/* Dropdown catégories */
.asl-cont .adropdown-toggle.multiselect.btn-default,
.asl-search .adropdown-toggle.multiselect.btn-default {
    font-family: "Rubik", sans-serif;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    height: 44px !important;
    font-size: 0.85rem;
    color: #2B2B2B;
    background: #fff;
}

.asl-cont .adropdown-toggle.multiselect.btn-default:focus,
.asl-cont .open>.adropdown-toggle.multiselect.btn-default {
    border-color: #1D4059 !important;
    box-shadow: none;
}

.asl-cont .adropdown-menu {
    border-radius: 0;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 0;
}

.asl-cont .adropdown-menu>li>a:hover,
.asl-cont .adropdown-menu>li>a:focus {
    background-color: #f5f5f5;
    color: #1D4059;
}

.asl-cont .adropdown-menu>.active>a,
.asl-cont .adropdown-menu>.active>a:hover,
.asl-cont .adropdown-menu>.active>a:focus {
    background-color: #1D4059;
    color: #fff;
}

.asl-cont .adropdown-menu label.checkbox,
.asl-cont .adropdown-menu label.radio {
    font-family: "Rubik", sans-serif;
    font-size: 0.825rem;
    font-weight: 400;
    color: #333;
}

/* =============================================
   4. BOUTON RECHERCHE
   ============================================= */
.asl-cont .btn-primary,
.asl-search .btn-primary,
.asl-search .asl-search-btn {
    background: #E3001A !important;
    border: none;
    border-radius: 0;
    font-family: "Rubik", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    height: 44px;
    transition: background 0.2s ease;
}

.asl-cont .btn-primary:hover,
.asl-search .btn-primary:hover,
.asl-search .asl-search-btn:hover {
    background: #c5001a !important;
}

/* =============================================
   5. PANEL LATERAL — Liste des magasins
   ============================================= */
#asl-storelocator .asl-panel {
    background: #fff;
    border-right: 1px solid #e5e5e5;
    overflow-y: auto;
}

/* Barre "Number of Shops" */
#asl-storelocator .top-title.Num_of_store {
    background: #1D4059;
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.65rem 1.5rem;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#asl-storelocator .top-title.Num_of_store a {
    color: rgba(255, 255, 255, 0.7);
}

#asl-storelocator .top-title.Num_of_store a:hover {
    color: #fff;
}

/* =============================================
   6. CARDS MAGASIN
   ============================================= */
#asl-storelocator .sl-list .sl-item {
    background: #fff;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    border-left: none;
    margin: 0;
    padding: 1.25rem 1.5rem;
    transition: background 0.15s ease;
    cursor: pointer;
}

#asl-storelocator .sl-list .sl-item:hover {
    background: #f7f9fb;
}

#asl-storelocator .sl-list .sl-item.sl-active {
    background: #f0f4f7;
    border-left: 3px solid #E3001A;
    padding-left: calc(1.5rem - 3px);
}

#asl-storelocator .sl-list .sl-item+.sl-item {
    border-top: none;
}

/* Sous-titre (description) */
#asl-storelocator .sl-list .sl-item .sl-desc p {
    font-family: "Rubik", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1D4059;
    opacity: 0.5;
    margin-bottom: 0.25rem;
}

/* Nom du magasin */
#asl-storelocator .sl-list .sl-item h3,
#asl-storelocator .sl-list .sl-item .p-title {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #1D4059;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

/* Icones devant les infos */
#asl-storelocator .sl-list .sl-item i[class^="icon-"] {
    color: #E3001A;
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Lignes d'info (adresse, tel, email, horaires) */
#asl-storelocator .sl-list .sl-item .addr-loc ul {
    margin: 0;
    padding: 0;
}

#asl-storelocator .sl-list .sl-item .addr-loc ul li {
    font-family: "Rubik", sans-serif;
    font-size: 0.825rem;
    color: #444;
    line-height: 1.55;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

#asl-storelocator .sl-list .sl-item .addr-loc ul li span,
#asl-storelocator .sl-list .sl-item .text-span {
    font-size: 0.825rem;
    color: #444;
}

#asl-storelocator .sl-list .sl-item .addr-loc ul li a {
    color: #E3001A;
    text-decoration: none;
    font-size: 0.825rem;
    display: inline;
}

#asl-storelocator .sl-list .sl-item .addr-loc ul li a:hover {
    text-decoration: underline;
}

/* Horaires */
#asl-storelocator .sl-list .sl-item .txt-hours {
    font-size: 0.8rem;
    color: #666;
}

/* Tags catégories */
#asl-storelocator .sl-list .sl-item .sl-categories .inner-cat-list li span {
    display: inline-block;
    background: transparent;
    color: #1D4059;
    opacity: 0.5;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Etoile favori */
#asl-storelocator .sl-list .sl-item .sl-fav {
    color: #ccc;
    transition: color 0.2s ease;
}

#asl-storelocator .sl-list .sl-item .sl-fav:hover {
    color: #E3001A;
}

/* Liens direction / website */
#asl-storelocator .sl-list .sl-item .s-direction a,
#asl-storelocator .sl-list .sl-item .s-visit-website a {
    color: #E3001A;
    font-family: "Rubik", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    text-decoration: none;
}

#asl-storelocator .sl-list .sl-item .s-direction a:hover,
#asl-storelocator .sl-list .sl-item .s-visit-website a:hover {
    text-decoration: underline;
}

/* =============================================
   7. BOUTON CONTACT / DIRECTIONS
   ============================================= */
#asl-storelocator .sl-list .sl-item .btn.btn-asl,
#asl-storelocator .sl-list .sl-item .s-direction .btn,
#asl-storelocator .sl-list .sl-item .sl-act-btns .btn {
    background: #E3001A;
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.6em 1.8em;
    transition: background 0.2s ease;
    line-height: 1.5;
    display: inline-block;
    margin-top: 0.5rem;
}

#asl-storelocator .sl-list .sl-item .btn.btn-asl:hover,
#asl-storelocator .sl-list .sl-item .s-direction .btn:hover,
#asl-storelocator .sl-list .sl-item .sl-act-btns .btn:hover {
    background: #b8001a;
}

/* Distance */
#asl-storelocator .sl-list .sl-item .sl-miles {
    font-family: "Rubik", sans-serif;
    font-size: 0.75rem;
    color: #999;
    font-weight: 400;
}

/* Logo magasin */
#asl-storelocator .sl-list .sl-item .sl-logo-box {
    border-radius: 0;
    border: none;
    overflow: hidden;
}

#asl-storelocator .sl-list .sl-item .sl-logo-cont {
    border: none;
}

#asl-storelocator .sl-list .sl-item .sl-logo-cont::before {
    display: none;
}

/* =============================================
   8. MAP — Pleine hauteur sticky
   ============================================= */
#asl-storelocator .asl-map {
    position: sticky;
    top: 0;
    height: 100vh;
}

#asl-storelocator .asl-map .asl-map-canv {
    height: 100% !important;
}

/* =============================================
   9. INFOWINDOW GOOGLE MAPS
   ============================================= */
.asl-cont .gm-style .gm-style-iw-c {
    border-radius: 0 !important;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.asl-cont .gm-style .gm-style-iw-d {
    overflow: auto !important;
    font-family: "Rubik", sans-serif;
}

/* =============================================
   10. MODALES — Géoloc + Directions
   ============================================= */
#asl-geolocation-agile-modal .agile-modal-content,
#agile-modal-direction .agile-modal-content {
    border-radius: 0;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-family: "Rubik", sans-serif;
}

#asl-geolocation-agile-modal .agile-modal-content h4,
#asl-geolocation-agile-modal .agile-modal-content h5 {
    font-family: "Rubik", sans-serif;
    font-weight: 600;
    color: #1D4059;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

#asl-geolocation-agile-modal .form-control {
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: "Rubik", sans-serif;
    font-size: 0.85rem;
    height: 44px;
    color: #2B2B2B;
}

#asl-geolocation-agile-modal .form-control:focus {
    border-color: #1D4059;
    box-shadow: none;
}

#asl-geolocation-agile-modal .btn-default,
#asl-geolocation-agile-modal #asl-btn-locate,
#asl-geolocation-agile-modal #asl-btn-geolocation {
    background: #E3001A !important;
    color: #fff !important;
    border: none;
    border-radius: 0;
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    height: 44px;
    transition: background 0.2s ease;
}

#asl-geolocation-agile-modal .btn-default:hover,
#asl-geolocation-agile-modal #asl-btn-locate:hover,
#asl-geolocation-agile-modal #asl-btn-geolocation:hover {
    background: #b8001a !important;
}

#asl-geolocation-agile-modal .sl-close {
    font-size: 1.5rem;
    color: #999;
    opacity: 1;
    transition: color 0.15s ease;
}

#asl-geolocation-agile-modal .sl-close:hover {
    color: #E3001A;
}

#agile-modal-direction .agile-modal-header {
    background: #1D4059;
    color: #fff;
    border-radius: 0;
    padding: 1rem 1.5rem;
}

#agile-modal-direction .agile-modal-header h4 {
    font-family: "Rubik", sans-serif;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

#agile-modal-direction .btn-submit {
    background: #E3001A;
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: "Rubik", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    transition: background 0.2s ease;
}

#agile-modal-direction .btn-submit:hover {
    background: #b8001a;
}

/* =============================================
   11. FORMULAIRE ASL — Underline focus
   ============================================= */
.asl-cont .sl-form-group.is-focused .form-control {
    background-image: linear-gradient(#1D4059, #1D4059), linear-gradient(#D2D2D2, #D2D2D2) !important;
}

.asl-cont .sl-form-group.is-focused label,
.asl-cont .sl-form-group.is-focused label.control-label {
    color: #1D4059 !important;
}

/* =============================================
   12. SEARCH WIDGET (shortcode asl-search)
   ============================================= */
.asl-search .asl-search-cont {
    background: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: 0;
}

.asl-search .asl-search-cont h3 {
    font-family: "Rubik", sans-serif;
    color: #1D4059;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

/* =============================================
   13. PAGE WRAPPER — Forcer le full-width
   ============================================= */

/* Conteneurs parents Elementor */
.elementor-widget-wrap:has(#asl-storelocator),
.elementor-element:has(#asl-storelocator),
.elementor-widget:has(#asl-storelocator) {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-section:has(#asl-storelocator),
.elementor-section:has(#asl-storelocator)>.elementor-container,
.e-con:has(#asl-storelocator) {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Conteneurs XStore / page wrapper */
.page-wrapper:has(#asl-storelocator) .container,
.page-wrapper:has(#asl-storelocator) .container-fluid,
.content-page:has(#asl-storelocator),
.sidebar-content:has(#asl-storelocator),
article:has(#asl-storelocator) {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =============================================
   14. RESPONSIVE
   ============================================= */
@media (max-width: 992px) {
    #asl-storelocator .asl-map {
        position: relative;
        height: 50vh;
    }

    #asl-storelocator .sl-main-row {
        min-height: auto;
        flex-direction: column-reverse;
    }

    #asl-storelocator .asl-panel {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .asl-cont .Filter_section {
        padding: 0.75rem 1rem;
    }

    #asl-storelocator .sl-list .sl-item {
        padding: 1rem;
    }

    .asl-cont .adropdown-toggle.multiselect.btn-default {
        border-radius: 0 !important;
    }

    #asl-storelocator .asl-map {
        height: 40vh;
    }
}