/* Store Locator – stylesheet */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.sl-map-wrap {
    position: relative;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #1a1a1a;
}

/* ── Sökfält ──────────────────────────────────────────────────────────────── */
.sl-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.sl-search-input-wrap {
    display: flex;
    flex: 1 1 280px;
    position: relative;
    align-items: center;
    gap: 8px;
}

/* ── Google PlaceAutocompleteElement ─────────────────────────────────────── */
.sl-pac-element,
gmp-place-autocomplete {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    /* Nollställ Googles Material Design-tema helt */
    --gmp-mat-color-surface:            #ffffff;
    --gmp-mat-color-on-surface:         #1a1a1a;
    --gmp-mat-color-on-surface-variant: #666666;
    --gmp-mat-color-outline:            transparent;
    --gmp-mat-color-outline-variant:    transparent;
    --gmp-mat-color-primary:            transparent; /* Stoppar blå focus-ram */
    --gmp-mat-color-on-primary:         #ffffff;
    --gmp-mat-color-secondary-container:    #eef4fc;
    --gmp-mat-color-on-secondary-container: #185FA5;
    --gmp-mat-shape-corner-small:       8px;
    --gmp-mat-shape-corner-medium:      8px;
    --gmp-mat-typescale-body-large-font:  inherit;
    --gmp-mat-typescale-body-medium-font: inherit;
    font-size: 14px;
}

/* Nollställ alla interna shadow-wrappers */
.sl-pac-element > *,
gmp-place-autocomplete > * {
    background: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ::part() – Googles exponerade shadow-parts */
.sl-pac-element::part(input),
gmp-place-autocomplete::part(input) {
    height: var( --sl-input-height, 44px );
    padding: 0 14px 0 40px;     /* plats för Googles sök-ikon till vänster */
    font-size: 14px;
    color: #1a1a1a;
    background: #ffffff;
    border: 1.5px solid #d0d0d0;
    border-radius: var( --sl-input-radius, 8px );
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}

.sl-pac-element::part(input):focus,
gmp-place-autocomplete::part(input):focus {
    border-color: var( --sl-focus-color, #185FA5 );
    outline: none !important;
    box-shadow: none !important;
}

.sl-pac-element::part(icon),
gmp-place-autocomplete::part(icon) {
    /* Behåll Googles ikon men matcha färgen */
    color: #888;
}

/* ── Sökknappar ───────────────────────────────────────────────────────────── */
.sl-btn-search,
.sl-btn-locate {
    flex-shrink: 0;
    width: var( --sl-btn-size, 44px );
    height: var( --sl-btn-size, 44px );
    display: flex;
    align-items: center;
    justify-content: center;
    background: var( --sl-btn-bg, #185FA5 );
    border: none;
    border-radius: var( --sl-btn-radius, 10px );
    color: var( --sl-btn-icon-color, #fff );
    cursor: pointer;
    transition: opacity .15s;
}

.sl-btn-search:hover,
.sl-btn-locate:hover {
    opacity: .85;
}

.sl-btn-reset {
    flex-shrink: 0;
    width: var( --sl-btn-size, 44px );
    height: var( --sl-btn-size, 44px );
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid #d0d0d0;
    border-radius: var( --sl-btn-radius, 10px );
    color: #666;
    cursor: pointer;
    transition: all .15s;
}

.sl-btn-reset:hover {
    border-color: var( --sl-btn-bg, #185FA5 );
    color: var( --sl-btn-bg, #185FA5 );
}

.sl-btn-locate.sl-loading-btn svg {
    animation: sl-spin .7s linear infinite;
}

/* ── Filter ───────────────────────────────────────────────────────────────── */
.sl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1 1 100%;
}

.sl-map-wrap .sl-pill,
.sl-standalone-search .sl-pill {
    height: var( --sl-pill-height, 36px );
    padding: 0 var( --sl-pill-px, 16px );
    border-radius: var( --sl-pill-radius, 20px );
    border: 1.5px solid var( --sl-pill-border, #d0d0d0 );
    background: var( --sl-pill-bg, #ffffff );
    font-size: var( --sl-pill-font-size, 13px );
    font-weight: var( --sl-pill-font-weight, 400 );
    color: var( --sl-pill-color, #444444 );
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-decoration: none !important;
}

.sl-map-wrap .sl-pill:hover,
.sl-standalone-search .sl-pill:hover {
    background: var( --sl-pill-active-bg, #185FA5 ) !important;
    border-color: var( --sl-pill-active-bg, #185FA5 ) !important;
    color: var( --sl-pill-active-color, #ffffff ) !important;
}

.sl-map-wrap .sl-pill--active,
.sl-standalone-search .sl-pill--active {
    background: var( --sl-pill-active-bg, #185FA5 ) !important;
    border-color: var( --sl-pill-active-bg, #185FA5 ) !important;
    color: var( --sl-pill-active-color, #ffffff ) !important;
}

.sl-filter-select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    color: #185FA5;
    cursor: pointer;
    /* Egen pil (Electrolux-stil "Alla ▾") */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23185FA5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Mobil-dropdown döljs på desktop (pills visas istället) */
.sl-filter-select--mobile {
    display: none;
}

/* ── Kartkropp ────────────────────────────────────────────────────────────── */
.sl-map-body {
    position: relative;
    display: flex;
    /* Sidebar och karta delar samma höjd */
    align-items: stretch;
}

.sl-map-canvas-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sl-map-canvas {
    width: 100%;
    height: 500px; /* skrivs över av Elementor-slider */
    min-height: 300px;
    display: block;
    flex: 1;
}

/* ── Laddningsindikator ───────────────────────────────────────────────────── */
.sl-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 10;
}

.sl-loading--visible {
    opacity: 1;
    pointer-events: auto;
}

.sl-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e0e0e0;
    border-top-color: #185FA5;
    border-radius: 50%;
    animation: sl-spin .7s linear infinite;
}

@keyframes sl-spin {
    to { transform: rotate(360deg); }
}

/* ── Sidopanel / lista ────────────────────────────────────────────────────── */
.sl-sidebar {
    width: 35%; /* skrivs över av Elementor */
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e5e5;
    background: #fafafa;
    overflow: hidden;
    /* Höjden matchar kart-canvasen – scroll inom panelen */
    max-height: 100%;
}

.sl-results-count {
    padding: 10px 14px;
    font-size: 12px;
    color: #777;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.sl-location-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    /* Smooth momentum scroll på iOS */
    -webkit-overflow-scrolling: touch;
}

.sl-list-item {
    border-bottom: 1px solid #ececec;
    user-select: none;
    cursor: pointer;
}

.sl-list-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    transition: background .12s;
}

.sl-list-item:hover .sl-list-header {
    background: #f5f7fa;
}

.sl-list-item--active .sl-list-header {
    background: #eef4fc;
}

.sl-list-chevron {
    flex-shrink: 0;
    margin-top: 3px;
    color: #185FA5;
    transition: transform .2s;
}

.sl-list-item--open .sl-list-chevron {
    transform: rotate(180deg);
}

.sl-list-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.sl-list-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.sl-list-city {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sl-list-addr {
    font-size: 12px;
    color: #666;
}

.sl-list-dist {
    font-size: 12px;
    color: #185FA5;
    font-weight: 500;
}

/* ── Accordion-detalj ─────────────────────────────────────────────────────── */
.sl-list-accordion {
    display: none;
    padding: 0 16px 14px 16px;
    border-top: 1px solid #e8eef5;
    background: #f7f9fc;
}

.sl-list-item--open .sl-list-accordion {
    display: block;
}

.sl-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 13px;
    color: #444;
}

.sl-list-row svg {
    flex-shrink: 0;
    color: #185FA5;
}

.sl-list-row a {
    color: #185FA5;
    text-decoration: none;
}

.sl-list-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.sl-list-show-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #185FA5;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sl-list-show-map:hover {
    color: #134d87;
}

.sl-no-results,
.sl-error {
    padding: 20px 14px;
    color: #777;
    font-size: 13px;
}

.sl-error {
    color: #c0392b;
}

/* ── Badge ────────────────────────────────────────────────────────────────── */
.sl-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.sl-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef4fc;
    color: #185FA5;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sl-badge--group {
    background: #fdf0ea;
    color: #c0470a;
}

/* ── InfoWindow ───────────────────────────────────────────────────────────── */
.sl-infowin {
    padding: 4px 2px 2px;
    max-width: 240px;
    font-size: 13px;
    line-height: 1.5;
}

.sl-infowin__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.sl-infowin__addr {
    font-style: normal;
    color: #555;
    margin: 6px 0;
    font-size: 12px;
}

.sl-hours {
    font-size: 12px;
    color: #555;
    margin: 4px 0;
}

.sl-dist {
    font-size: 12px;
    color: #185FA5;
    font-weight: 500;
}

.sl-infowin__actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ── Knappar ──────────────────────────────────────────────────────────────── */
.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
    white-space: nowrap;
}

.sl-btn--primary {
    background: #185FA5;
    color: #fff;
    border-color: #185FA5;
}

.sl-btn--primary:hover {
    background: #134d87;
    border-color: #134d87;
}

.sl-btn--secondary {
    background: transparent;
    color: #185FA5;
    border-color: #185FA5;
}

.sl-btn--secondary:hover {
    background: #eef4fc;
}

/* ── Filter + vy-växlare rad ──────────────────────────────────────────────── */
.sl-filter-view-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ── Vy-växlare (mobil) – Electrolux rundad toggle ────────────────────────── */
.sl-view-toggle {
    display: none;  /* Dolt på desktop */
    margin-left: auto;
    flex-shrink: 0;
    background: #f0f0f2;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.sl-view-btn {
    width: 52px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #185FA5;
    cursor: pointer;
    transition: all .2s;
}

.sl-view-btn svg {
    pointer-events: none;
    display: block;
}

.sl-view-btn--active {
    background: #185FA5;
    color: #fff;
}

/* ── Responsiv ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Visa vy-växlare på mobil */
    .sl-view-toggle {
        display: flex;
    }

    /* Dölj pills på mobil, visa kompakt dropdown istället */
    .sl-pill {
        display: none;
    }

    .sl-filter-select--mobile {
        display: inline-block;
    }

    /* Filter-rad: dropdown vänster, vy-växlare höger på samma rad */
    .sl-filters {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        border: none !important;
        padding: 0 !important;
    }

    .sl-search-bar {
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
        align-items: center;
    }

    .sl-search-input-wrap {
        flex: 1 1 100%;
    }

    /* Gör så filter och vy-växlare hamnar på samma rad */
    .sl-group-filters {
        flex: 1 1 auto;
    }

    /* Kart-layout på mobil */
    .sl-map-body {
        flex-direction: column;
        position: relative;
    }

    .sl-map-canvas-wrap {
        width: 100% !important;
    }

    .sl-sidebar {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid #e5e5e5;
        max-height: 100vh;
    }
}

/* ── Google Maps InfoWindow – ta bort standardpadding ─────────────────────── */
.gm-style .gm-style-iw-c {
    padding: 12px !important;
    border-radius: 10px !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

/* ── Fristående listvy (Widget_List) ──────────────────────────────────────── */
.sl-list-only {
    display: flex;
    flex-direction: column;
}

.sl-list-only .sl-location-list--standalone {
    max-height: var( --sl-list-height, 600px );
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}

.sl-list-only .sl-results-count {
    padding: 8px 0;
    border-bottom: none;
    flex-shrink: 0;
}

/* ── Inline-detalj i list-only widget ────────────────────────────────────── */
.sl-list-detail {
    grid-column: 1 / -1;
    padding: 10px 0 4px;
    font-size: 13px;
    border-top: 1px solid #e8e8e8;
    margin-top: 8px;
    width: 100%;
}

.sl-list-detail p {
    margin: 3px 0;
    color: #555;
}

.sl-list-detail a {
    color: #185FA5;
    text-decoration: none;
}

.sl-list-detail .sl-infowin__actions {
    margin-top: 8px;
}

.sl-list-item {
    flex-wrap: wrap;  /* Tillåt inline-detalj att ta full bredd */
}

/* ── Oändlig scroll ───────────────────────────────────────────────────────── */
.sl-scroll-sentinel {
    height: 1px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sl-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--sl-text-muted, #888);
    font-size: 13px;
}

.sl-list-loading .sl-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

/* ── Widget_Nearby – kompakt "närmaste butik"-komponent ────────────────────── */
.sl-nearby {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    font-family: inherit;
}

.sl-nearby-header {
    padding: 14px 16px 8px;
}

.sl-nearby-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.sl-nearby-prompt {
    padding: 0 16px 16px;
}

.sl-nearby-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    height: 44px;
    background: #185FA5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}

.sl-nearby-btn:hover {
    opacity: .9;
}

.sl-nearby-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sl-nearby-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-nearby-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .12s;
}

.sl-nearby-row:hover {
    background: #f7f9fc;
}

.sl-nearby-row--open {
    background: #eef4fc;
}

.sl-nearby-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sl-nearby-info strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-nearby-addr {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-nearby-dist {
    font-size: 13px;
    font-weight: 600;
    color: #185FA5;
    flex-shrink: 0;
}

.sl-nearby-chevron {
    flex-shrink: 0;
    color: #aaa;
    transition: transform .2s;
}

.sl-nearby-row--open .sl-nearby-chevron {
    transform: rotate(90deg);
}

.sl-nearby-detail {
    padding: 0 16px 14px 16px;
    background: #eef4fc;
    font-size: 13px;
}

.sl-nearby-detail p {
    margin: 6px 0;
}

.sl-nearby-detail a {
    color: #185FA5;
    text-decoration: none;
}

.sl-nearby-directions {
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
}

.sl-nearby-empty {
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.sl-nearby-all-link {
    display: block;
    padding: 12px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #185FA5;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
}