/**
 * SQO Interactive Map Styles
 * Stilar för interaktiv SVG-karta med venues
 * SVART/VIT FÄRGPROFIL
 * 
 * @package SQO_Modular_Plugin
 * @subpackage Modules/Venues
 */

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.sqo-interactive-map-wrapper {
    width: 100%;
    margin: 40px 0;
}

/* Sidebar Layout (Default) */
.sqo-map-layout.layout-sidebar {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Classic Layout */
.sqo-map-layout.layout-classic {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* SQO Layout - Hybrid (sidebar på desktop, classic på mobil/tablet) */
/* Desktop (>1024px): Samma som sidebar */
.sqo-map-layout.layout-sqo {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.sqo-map-layout.layout-sqo .sqo-map-section {
    flex: 1 1 50%;
    min-width: 300px;
    position: sticky; /* Sticky på desktop */
    top: 120px; /* Samma offset som list-header */
    align-self: flex-start; /* Viktigt för att sticky ska fungera korrekt */
}

.sqo-map-layout.layout-sqo.list-left {
    flex-direction: row-reverse;
}

.sqo-map-layout.layout-sqo.list-bottom {
    flex-direction: column;
}

.sqo-map-layout.layout-sqo.list-bottom .sqo-map-section {
    position: static; /* Ingen sticky när bottom layout */
    width: 100%;
}

/* ==========================================================================
   SVG KARTA SEKTION
   ========================================================================== */

/* Sidebar layout - UPPDATERAT: 120px offset från toppen */
.sqo-map-layout.layout-sidebar .sqo-map-section {
    flex: 1 1 50%;
    min-width: 300px;
    position: sticky;
    top: 120px; /* UPPDATERAT från 20px till 120px för att undvika sticky header */
}

/* Left position */
.sqo-map-layout.layout-sidebar.list-left {
    flex-direction: row-reverse;
}

/* Bottom position */
.sqo-map-layout.layout-sidebar.list-bottom {
    flex-direction: column;
}

.sqo-map-layout.layout-sidebar.list-bottom .sqo-map-section {
    position: static;
    width: 100%;
}

/* Classic layout */
/* Desktop: 60% bredd */
.sqo-map-layout.layout-classic .sqo-map-section {
    width: 60%;
    margin: 0 auto;
}

/* Tablet (769px - 1024px): 80% bredd */
@media (max-width: 1024px) and (min-width: 769px) {
    .sqo-map-layout.layout-classic .sqo-map-section {
        width: 80%;
    }
}

/* Mobil (≤768px): 100% bredd */
@media (max-width: 768px) {
    .sqo-map-layout.layout-classic .sqo-map-section {
        width: 100%;
    }
}

.sqo-map-svg-container {
    background: #ffffff; /* VIT bakgrund */
    border: 2px solid #000000; /* SVART border */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

#sqo-map-svg {
    width: 100%;
    position: relative;
}

#sqo-map-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Override SVG-klasserna för WC och ATM */
#sqo-map-svg .st0 {
    fill: #000000 !important; /* SVART bakgrund istället för grön */
}

#sqo-map-svg .st4 {
    fill: #FFFFFF !important; /* VIT text */
}

/* Loading state */
.sqo-map-loading {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 16px;
}

.sqo-map-loading::after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    margin: 20px auto 0;
    border: 3px solid #e0e0e0;
    border-top-color: #000000; /* SVART loader */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Error state */
.sqo-map-error {
    background: #ffebee;
    color: #c62828;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

/* ==========================================================================
   MAP INFO PANEL (under kartan i sidebar-layout)
   ========================================================================== */

.sqo-map-info-panel {
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.sqo-map-info-panel h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    padding-bottom: 10px;
    border-bottom: 2px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Venue-knapp (inline med h4) */
.sqo-map-info-panel h4 .sqo-map-info-venue-button {
    margin: 0;
}

.sqo-map-info-panel h4 .sqo-map-info-venue-button a {
    display: inline-block;
    background: #000000;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.sqo-map-info-panel h4 .sqo-map-info-venue-button a:hover {
    opacity: 0.8;
}

/* Två-kolumners layout för info-innehåll */
/* DESKTOP: 2 kolumner (Kontakt | Öppettider), ingen logo */
.sqo-map-info-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 */
    gap: 15px 20px;
    
}

.sqo-map-info-left-column {
    display: contents; /* Låt barn placera sig direkt i grid */
}

/* Dölj brand logo på DESKTOP */
.sqo-map-info-brand-column {
    display: none;
}

/* Öppettider i VÄNSTER kolumn (finns alltid) */
.sqo-map-info-hours {
    grid-column: 1;
    margin-bottom: 0;
}

/* Kontakt i HÖGER kolumn (finns inte alltid) */
.sqo-map-info-contact {
    grid-column: 2;
    margin-bottom: 0;
}

/* Social media under båda kolumnerna */
.sqo-map-info-social {
    grid-column: 1 / -1; /* Spänner över båda kolumnerna */
    margin-top: 10px;
    display: flex;
    gap: 12px;
}

.sqo-map-info-contact h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sqo-map-info-contact p {
    margin: 8px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.sqo-map-info-contact a {
    color: #000000;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sqo-map-info-contact a:hover {
    opacity: 0.7;
}

/* Öppettider i höger kolumn */
/* Öppettider och kontakt styling */
.sqo-map-info-hours,
.sqo-map-info-contact {
    margin-bottom: 0; /* Ingen margin i desktop grid */
}

.sqo-map-info-hours h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sqo-map-info-panel .sqo-opening-hours-item {
    display: block; /* Inte flex, enklare layout */
    padding: 6px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    border-bottom: none; /* Ta bort border */
    margin-bottom:10px;
}

.sqo-map-info-panel .sqo-opening-hours-item .day {
    font-weight: 500;
    color: #666;
}

/* Sociala medier i höger kolumn (under öppettider) */
.sqo-map-info-social {
    margin-top: auto; /* Tryck ner till botten av kolumnen */
    display: flex;
    gap: 12px;
}

.sqo-map-info-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #000000;
    border-radius: 4px; /* Kvadratisk med lätt rundning */
    transition: opacity 0.2s ease;
}

.sqo-map-info-social a:hover {
    opacity: 0.8;
}

.sqo-map-info-social svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
}

/* Mobil: Stack kolumner */
@media (max-width: 768px) {
    /* MOBIL: 70/30 layout med logo */
    .sqo-map-info-content {
        grid-template-columns: 70% 30%;
        gap: 15px;
    }
    
    /* Återställ från contents */
    .sqo-map-info-left-column {
        display: block;
        grid-column: 1;
    }
    
    /* Visa brand logo på MOBIL */
    .sqo-map-info-brand-column {
        display: flex;
        grid-column: 2;
        align-items: flex-end;
        justify-content: center;
    }
    
    /* Brand logo styling - som förut */
    .sqo-map-info-brand-logo {
        width: 100%;
        max-width: 60px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sqo-map-info-brand-logo img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Kontakt och öppettider staplas i vänster kolumn */
    .sqo-map-info-contact,
    .sqo-map-info-hours {
        grid-column: auto;
        margin-bottom: 15px; /* Mellanrum mellan element i mobil */
    }
    
    /* Social media i vänster kolumn */
    .sqo-map-info-social {
        grid-column: auto;
        margin-bottom: 0; /* Sista elementet behöver ingen margin */
    }
    
    /* Stack knapp under venue-namn på mobil */
    .sqo-map-info-panel h4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==========================================================================
   MAP MARKERS (SVG NUMMER-MARKERING) - UPPDATERAT MED PULSERING
   ========================================================================== */

/* Markerings-cirkel som ritas UNDER SVG-texten */
.sqo-map-highlight-circle {
    fill: #000000 !important; /* SVART FYLLD cirkel */
    fill-opacity: 0; /* Dold som default - INGEN !important så JS kan ändra */
    stroke: #000000 !important; /* SVART stroke för pulsering */
    stroke-width: 0; /* Börjar utan stroke */
    stroke-opacity: 0;
    pointer-events: none;
    transition: fill-opacity 0.3s ease; /* Smooth transition när cirkeln visas/döljs */
}

/* Preview state (hover) */
.sqo-map-highlight-circle.preview {
    /* fill-opacity hanteras av JavaScript via inline style */
}

/* Active state (clicked/single venue) - VISA CIRKELN MED PULSERING */
.sqo-map-highlight-circle.active,
#sqo-map-svg-modal .sqo-map-highlight-circle.active {
    fill-opacity: 1 !important; /* VISA för single venue maps */
    animation: pulse-circle 1.5s ease-in-out infinite; /* SNABBARE pulsering (från 2s till 1.5s) */
}

/* PULSERINGS-ANIMATION - Större och snabbare */
@keyframes pulse-circle {
    0%, 100% {
        stroke-width: 0;
        fill-opacity: 1;
    }
    50% {
        stroke-width: 12; /* Större pulsering (från 8 till 12) */
        stroke-opacity: 0.5; /* Lite mer synlig stroke */
        fill-opacity: 0.85;
    }
}

/* SVG text måste ligga ÖVER cirkeln - FÖR ALLA MAPS */
#sqo-map-svg text,
#sqo-map-svg-modal text,
#sqo-single-map-svg text {
    cursor: pointer;
    transition: fill 0.2s ease;
    fill: #000000 !important; /* SVART text som default */
    pointer-events: all; /* Texten ska fånga klick */
    transform-origin: center; /* Viktigt för att texten inte ska röra sig vid pulsering */
}

/* Text med .st4 klass ska ALLTID vara VIT (WC, ATM, etc) */
#sqo-map-svg text.st4,
#sqo-map-svg-modal text.st4,
#sqo-single-map-svg text.st4 {
    fill: #ffffff !important; /* VIT text för labels */
}

/* När text är VIT (aktiv highlight) - FÖR ALLA MAPS */
#sqo-map-svg text.highlight-active,
#sqo-map-svg-modal text.highlight-active,
#sqo-single-map-svg text.highlight-active {
    fill: #ffffff !important; /* VIT text */
}

#sqo-map-svg text:hover,
#sqo-map-svg-modal text:hover {
    font-weight: bold;
}

/* Låt alla andra SVG-element behålla sina ursprungliga färger */
/* Paths, rects, polygons ska INTE ändras */

/* ==========================================================================
   VENUES LISTA SEKTION - SIDEBAR LAYOUT
   ========================================================================== */

.sqo-map-layout.layout-sidebar .sqo-venues-list-section {
    flex: 1 1 40%;
    min-width: 280px;
}

/* SQO layout: Samma flex-styling som sidebar på desktop */
.sqo-map-layout.layout-sqo .sqo-venues-list-section {
    flex: 1 1 40%;
    min-width: 280px;
}

.sqo-map-layout.layout-sidebar.list-bottom .sqo-venues-list-section {
    width: 90%;
    margin: 0 auto; /* Centrerad */
}

.sqo-venues-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #000000; /* SVART border */
    
    /* Sticky header för desktop */
    position: sticky;
    top: 120px; /* Under site header */
    background: #ffffff; /* VIT bakgrund så listan försvinner bakom */
    z-index: 10; /* ÖVER listan (från 5 till 10) */
    padding-top: 20px; /* ÖKAD luft ovanför när sticky */
    margin-top: -5px; /* Negativ margin för att täcka gap */
    box-shadow: 0 5px 10px rgba(255, 255, 255, 1); /* Vit skugga för att täcka bättre */
}

/* Pseudo-element som täcker gapet mellan site header och list-header */
/* White background fill för sidebar och sqo layout */
.sqo-map-layout.layout-sidebar .sqo-venues-list-header::before,
.sqo-map-layout.layout-sqo .sqo-venues-list-header::before {
    content: '';
    position: absolute;
    top: -120px; /* Täcker gapet upp till site header */
    left: 0;
    right: 0;
    height: 120px;
    background: #ffffff; /* VIT */
    z-index: 5; /* Samma som header */
}

.sqo-venues-list-header h3 {
    margin: 0;
    font-size: 24px;
    color: #000000; /* SVART text */
}

.sqo-list-count {
    background: #f5f5f5;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.layout-sidebar .sqo-list-count {
    
}

/* ==========================================================================
   VENUE LIST ITEM - SIDEBAR LAYOUT
   ========================================================================== */

.sqo-venues-list.sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Mindre gap mellan items */
}

.sqo-venue-list-item {
    display: flex;
    align-items: center;
    gap: 12px; /* Gap mellan alla element */
    padding: 10px 12px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; /* VIKTIGT för z-index */
    z-index: 1; /* UNDER header (header har z-index: 10) */
}

.sqo-venue-list-item:hover {
    border-color: #000000; /* SVART border vid hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(5px);
}

.sqo-venue-list-item.active {
    border-color: #000000; /* SVART border */
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Venue info FÖRST - tar upp allt utrymme */
.sqo-venue-info {
    flex: 1;
    min-width: 0;
}

.sqo-venue-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
}

.sqo-venue-list-item:hover .sqo-venue-title {
    color: #000000; /* SVART vid hover */
}

/* Kategori-ikon EFTER venue-info */
.sqo-venue-category-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* Tryck till höger, skapar mellanrum från venue-info */
}

.sqo-venue-category-icon svg {
    width: 20px;
    height: 20px;
    fill: #666;
    transition: fill 0.3s ease;
}

.sqo-venue-list-item:hover .sqo-venue-category-icon svg {
    fill: #000000; /* SVART vid hover */
}

.sqo-venue-list-item.active .sqo-venue-category-icon svg {
    fill: #000000; /* SVART när aktiv */
}

/* Venue nummer EFTER ikon */
.sqo-venue-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.sqo-venue-list-item:hover .sqo-venue-number,
.sqo-venue-list-item.active .sqo-venue-number {
    background: #000000; /* SVART bakgrund */
    border-color: #000000;
    color: #ffffff; /* VIT text */
}

/* Arrow SIST */
.sqo-venue-arrow {
    flex-shrink: 0;
    color: #999;
    transition: all 0.3s ease;
}

.sqo-venue-list-item:hover .sqo-venue-arrow {
    color: #000000; /* SVART vid hover */
    transform: translateX(3px);
}
    transform: translateX(5px);
}

.sqo-venue-arrow .dashicons {
    font-size: 20px; /* Mindre ikon */
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   CLASSIC LAYOUT - 3-KOLUMNERS LISTA
   ========================================================================== */

.sqo-map-layout.layout-classic .sqo-venues-list-section {
    width: 80%;
    margin: 0 auto; /* Centrerad */
}

.sqo-map-layout.layout-classic .sqo-venues-list-header h3 {
    font-size: 28px;
}

.sqo-venues-list.classic-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sqo-classic-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sqo-venues-list.classic-list .sqo-venue-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Nummer till höger */
    gap: 10px;
    padding: 6px 12px; /* Kompakt padding */
    background: transparent;
    border: none;
    border-bottom: none; /* Ingen border */
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    color: inherit;
    transform: none;
}

.sqo-venues-list.classic-list .sqo-venue-list-item:hover {
    background: #f5f5f5;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.sqo-venues-list.classic-list .sqo-venue-list-item.active {
    background: #000000; /* SVART active state */
    border-color: #000000;
    box-shadow: none;
}

.sqo-venues-list.classic-list .sqo-venue-list-item.active .sqo-venue-title span,
.sqo-venues-list.classic-list .sqo-venue-list-item.active .sqo-venue-number {
    color: #ffffff; /* VIT text */
}

/* Classic nummer (höger-aligned, mindre) */
.sqo-venues-list.classic-list .sqo-venue-number {
    width: auto;
    height: auto;
    min-width: 24px;
    padding: 2px 6px;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 11px; /* Mindre text */
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

.sqo-venues-list.classic-list .sqo-venue-list-item:hover .sqo-venue-number {
    background: #000000; /* SVART bakgrund vid hover */
    border-color: #000000;
    color: #ffffff; /* VIT text */
}

/* Kategori-ikon i classic - mellan titel och nummer */
.sqo-venues-list.classic-list .sqo-venue-category-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 6px; /* Lite space från titel */
    margin-right: 6px; /* Lite space till nummer */
}

.sqo-venues-list.classic-list .sqo-venue-category-icon svg {
    width: 16px;
    height: 16px;
}

/* Classic title (mindre text) */
.sqo-venues-list.classic-list .sqo-venue-info {
    flex: 1;
    min-width: 0;
}

.sqo-venues-list.classic-list .sqo-venue-title {
    margin: 0;
    font-size: 13px; /* Mindre text */
    font-weight: 500;
    line-height: 1.3;
}

.sqo-venues-list.classic-list .sqo-venue-title span {
    color: #333;
}

.sqo-venues-list.classic-list .sqo-venue-list-item:hover .sqo-venue-title span {
    color: #000000; /* SVART vid hover */
}

/* VIKTIGT: När active OCH hover, behåll VIT text */
.sqo-venues-list.classic-list .sqo-venue-list-item.active:hover .sqo-venue-title span {
    color: #ffffff !important; /* VIT text när både active och hover */
}

/* Dölj excerpt och arrow i classic */
.sqo-venues-list.classic-list .sqo-venue-excerpt,
.sqo-venues-list.classic-list .sqo-venue-arrow {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    /* Sidebar layout: Stack på tablet - KARTA FÖRST, LISTA UNDER */
    .sqo-map-layout.layout-sidebar,
    .sqo-map-layout.layout-sidebar.list-left,
    .sqo-map-layout.layout-sidebar.list-right {
        flex-direction: column;
    }
    
    .sqo-map-layout.layout-sidebar .sqo-map-section {
        position: static;
        width: 100%;
        order: 1; /* Kartan först */
    }
    
    .sqo-map-layout.layout-sidebar .sqo-venues-list-section {
        width: 100%;
        order: 2; /* Listan under */
    }
    
    /* SQO layout: Stack som classic (karta över, lista under) */
    .sqo-map-layout.layout-sqo,
    .sqo-map-layout.layout-sqo.list-left,
    .sqo-map-layout.layout-sqo.list-right {
        flex-direction: column;
        gap: 40px; /* Classic gap */
    }
    
    .sqo-map-layout.layout-sqo .sqo-map-section {
        position: static; /* Ta bort sticky på tablet */
        width: 80%; /* Classic bredd på tablet */
        margin: 0 auto;
        order: 1;
    }
    
    .sqo-map-layout.layout-sqo .sqo-venues-list-section {
        width: 100%;
        order: 2;
    }
    
    /* Classic layout: Full bredd på tablet */
    .sqo-map-layout.layout-classic .sqo-venues-list-section {
        width: 100%;
    }
    
    .sqo-map-layout.layout-sidebar.list-bottom .sqo-venues-list-section {
        width: 100%;
    }
    
    /* Classic: 2 kolumner på tablet */
    .sqo-venues-list.classic-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* ==========================================================================
   MOBIL/TABLET RESPONSIV - LISTA FÖRST MED MODAL
   ========================================================================== */

@media (max-width: 768px) {
    .sqo-map-layout {
        gap: 0;
        flex-direction: column; /* Säkerställ column på mobil */
    }
    
    /* Förhindra horizontal scroll */
    .sqo-interactive-map-wrapper {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* MOBIL: Dölj karta och info-panel som default FÖR SIDEBAR */
    .sqo-map-layout.layout-sidebar .sqo-map-section {
        display: none;
    }
    
    /* MOBIL: Lista först, full viewport FÖR SIDEBAR */
    .sqo-map-layout.layout-sidebar .sqo-venues-list-section {
        width: 100%;
        padding-top: 20px;
    }
    
    /* SQO på MOBIL: Visa karta (som classic), ingen modal */
    .sqo-map-layout.layout-sqo .sqo-map-section {
        position: static; /* Ta bort sticky på mobil */
        display: block;
        width: 100%; /* Classic full bredd på mobil */
        margin: 0;
    }
    
    /* SQO: Dölj info-panel på mobil (classic har ingen info-panel) */
    .sqo-map-layout.layout-sqo .sqo-map-info-panel {
        display: none;
    }
    
    .sqo-map-layout.layout-sqo .sqo-venues-list-section {
        width: 100%;
        padding-top: 20px;
    }
    
    .sqo-venues-list-header {
        position: relative;
        top: auto;
        padding-top: 0;
        margin-bottom: 15px;
    }
    
    .sqo-venues-list-header::before {
        display: none;
    }
    
    .sqo-venues-list-header h3 {
        font-size: 20px;
    }
    
    /* List-items: Mindre padding */
    .sqo-venue-list-item {
        padding: 12px;
        gap: 10px;
    }
    
    .sqo-venue-title {
        font-size: 14px;
    }
    
    .sqo-venue-number {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .sqo-venue-category-icon {
        width: 20px;
        height: 20px;
    }
    
    .sqo-venue-category-icon svg {
        width: 16px;
        height: 16px;
    }
    
    /* ==========================================================================
       FLOATING KART-KNAPP (nedre högra hörnet) - TOGGLE
       ========================================================================== */
    
    .sqo-floating-map-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        background: #000000;
        border: 2px solid #ffffff; /* VIT BORDER */
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10000;
        transition: all 0.3s ease;
    }
    
    .sqo-floating-map-button:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    
    /* Kart-ikon (default) */
    .sqo-floating-map-button .map-icon {
        width: 28px;
        height: 28px;
        fill: #ffffff;
        display: block;
    }
    
    /* X-ikon (när modal öppen) */
    .sqo-floating-map-button .close-icon {
        width: 24px;
        height: 24px;
        fill: #ffffff;
        display: none;
    }
    
    /* När modal är aktiv: Visa X, dölj karta */
    .sqo-map-modal.active ~ .sqo-floating-map-button .map-icon {
        display: none;
    }
    
    .sqo-map-modal.active ~ .sqo-floating-map-button .close-icon {
        display: block;
    }
    
    /* ==========================================================================
       MODAL - CLEAN & CENTRERAD med floating X
       ========================================================================== */
    
    .sqo-map-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9999;
        padding: 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .sqo-map-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Modal-container - VIT BOX med auto-höjd */
    .sqo-map-modal-container {
        position: relative;
        width: 100%;
        max-width: 500px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        padding: 12px; /* Mindre padding */
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
    
    /* Floating X-knapp - CSS istället för SVG */
    .sqo-map-modal-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        background: #000000;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        padding: 0;
    }
    
    /* CSS X med ::before och ::after */
    .sqo-map-modal-close::before,
    .sqo-map-modal-close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        background: #ffffff;
    }
    
    .sqo-map-modal-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .sqo-map-modal-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    .sqo-map-modal-close:hover {
        background: #333333;
        transform: scale(1.05);
    }
    
    /* Dölj SVG */
    .sqo-map-modal-close svg {
        display: none;
    }
    
    /* Modal content */
    .sqo-map-modal-content {
        padding: 0;
    }
    
    /* Karta i modal - STÖRRE */
    .sqo-map-modal .sqo-map-svg-container {
        margin-bottom: 10px;
        border-radius: 0; /* Ingen rounded corners */
        overflow: hidden;
        border: none;
        height: 320px;
        padding: 0; /* INGEN padding */
    }
    
    .sqo-map-modal #sqo-map-svg-modal {
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .sqo-map-modal #sqo-map-svg-modal svg {
        width: 100% !important;
        height: 100% !important;
        max-width: none;
    }
    
    /* Info-panel - VIT bakgrund */
    .sqo-map-modal .sqo-map-info-panel {
        margin-top: 0;
        padding: 0;
        background: transparent;
        border: none;
    }
    
    /* H4 - INLINE ALLTID */
    .sqo-map-modal .sqo-map-info-panel h4 {
        display: flex;
        flex-direction: row !important; /* Tvinga rad */
        flex-wrap: nowrap !important; /* Ingen wrap */
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 16px;
        gap: 6px;
        line-height: 1.2;
    }
    
    .sqo-map-modal .sqo-map-info-panel h4 > span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Venue-knapp - INLINE */
    .sqo-map-modal .sqo-map-info-venue-button {
        flex-shrink: 0;
    }
    
    .sqo-map-modal .sqo-map-info-venue-button a {
        padding: 3px 8px;
        font-size: 10px;
        white-space: nowrap;
        display: inline-block;
    }
    
    /* Info-content - SUPER KOMPAKT */
    .sqo-map-modal .sqo-map-info-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px; /* Minimal */
    }
    
    .sqo-map-modal .sqo-map-info-content h3 {
        font-size: 11px;
        margin-bottom: 2px; /* Minimal */
        font-weight: 600;
    }
    
    .sqo-map-modal .sqo-map-info-contact p,
    .sqo-map-modal .sqo-opening-hours-item {
        margin-bottom: 1px; /* Minimal */
        font-size: 11px;
        line-height: 1.2;
    }
    
    .sqo-map-modal .sqo-map-info-contact {
        margin-bottom: 10px; /* 10px margin */
    }
    
    .sqo-map-modal .sqo-map-info-hours {
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    /* Sociala medier - LITE STÖRRE */
    .sqo-map-modal .sqo-map-info-social {
        margin-top: 3px;
        display: flex;
        gap: 4px;
    }
    
    .sqo-map-modal .sqo-map-info-social a {
        width: 24px; /* Större */
        height: 24px;
    }
    
    .sqo-map-modal .sqo-map-info-social svg {
        width: 12px; /* Större */
        height: 12px;
    }
    
    /* Dölj tomma */
    .sqo-map-modal .sqo-map-info-right-column:empty,
    .sqo-map-modal .sqo-map-info-contact:empty {
        display: none;
    }
}
    
    /* Classic: 2 kolumner på mobil */
    .sqo-venues-list.classic-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .sqo-venues-list.classic-list .sqo-venue-list-item {
        padding: 5px 10px;
        gap: 8px;
    }
    
    .sqo-venues-list.classic-list .sqo-venue-title {
        font-size: 12px;
    }
    
    .sqo-venues-list.classic-list .sqo-venue-number {
        font-size: 10px;
        min-width: 20px;
        padding: 2px 5px;
    }
    
    /* SQO på MOBIL: CSS columns för alfabetisk layout */
    .sqo-map-layout.layout-sqo .sqo-venues-list-section {
        padding: 0;
        width: 100%;
    }
    
    /* SQO mobil: 2-kolumners grid (DEFAULT) */
    .sqo-map-layout.layout-sqo .sqo-venues-list.sqo-mobile-columns {
        display: block;
        columns: 2;
        column-gap: 10px;
    }
    
    /* VIKTIGT: columns-parameter överskriver default */
    .sqo-map-layout.layout-sqo .sqo-venues-list.sqo-columns-1 {
        columns: 1 !important;
    }
    
    .sqo-map-layout.layout-sqo .sqo-venues-list.sqo-columns-3 {
        columns: 3 !important;
    }
    
    .sqo-map-layout.layout-sqo .sqo-venues-list.sqo-columns-4 {
        columns: 4 !important;
    }
    
    /* SQO mobil: Dölj excerpt och pil (som classic) */
    .sqo-map-layout.layout-sqo .sqo-venue-excerpt,
    .sqo-map-layout.layout-sqo .sqo-venue-arrow {
        display: none;
    }
    
    /* SQO mobil: Kompakt item-styling (som classic) */
    .sqo-map-layout.layout-sqo .sqo-venue-list-item {
        break-inside: avoid;
        padding: 4px 8px; /* Kompaktare padding */
        gap: 2px; /* Minimalt gap */
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
        transform: none !important; /* Ingen transform på mobil */
        box-shadow: none !important; /* Ingen skugga på mobil */
    }
    
    /* Active state - endast svart border */
    .sqo-map-layout.layout-sqo .sqo-venue-list-item.active {
        border: 2px solid #000000;
        background: #fff;
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Hover state - endast svart border */
    .sqo-map-layout.layout-sqo .sqo-venue-list-item:hover {
        border: 2px solid #000000;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .sqo-map-layout.layout-sqo .sqo-venue-title {
        font-size: 11px; /* Mindre text */
        line-height: 1.2; /* Tätare radavstånd */
    }
    
    .sqo-map-layout.layout-sqo .sqo-venue-number {
        font-size: 10px;
        min-width: 18px;
        width: 20px;
        height: 20px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    
    .sqo-map-layout.layout-sqo .sqo-venue-category-icon {
        width: 16px; /* Mindre ikon */
        height: 16px;
        margin-left: auto; /* Tryck till höger */
        margin-right: 4px; /* Lite space till nummer */
    }
    
    .sqo-map-layout.layout-sqo .sqo-venue-category-icon svg {
        width: 14px;
        height: 14px;
    }
    
    /* Classic layout */
}

@media (max-width: 480px) {
    .sqo-venues-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    /* Sidebar list */
    .sqo-venues-list.sidebar-list .sqo-venue-list-item {
        padding: 8px;
    }
    
    .sqo-venues-list.sidebar-list .sqo-venue-arrow {
        display: none;
    }
    
    /* Classic: 1 kolumn på mycket liten mobil */
    .sqo-venues-list.classic-list {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   SINGLE VENUE MAP
   ========================================================================== */

.sqo-single-venue-map-wrapper {
    width: 100%;
    margin: 40px 0;
}

.sqo-single-map-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Karta (vänster) */
.sqo-single-map-layout .sqo-single-map-section {
    flex: 1 1 80%;
    min-width: 300px;
}

/* VIKTIGT: Single venue map container - INGEN BORDER */
.sqo-single-map-section .sqo-map-svg-container {
    background: #ffffff;
    border: none; /* INGEN BORDER */
    border-radius: 0;
    overflow: visible;
    padding: 0;
}

#sqo-single-map-svg {
    width: 100%;
    position: relative;
}

#sqo-single-map-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Override SVG-klasserna för WC och ATM - SAMMA som interactive */
#sqo-single-map-svg .st0 {
    fill: #000000 !important;
}

#sqo-single-map-svg .st4 {
    fill: #FFFFFF !important;
}

/* Info (höger) */
.sqo-single-venue-info {
    flex: 1 1 20%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Brand Logo */
.sqo-venue-brand-logo {
    width: 100%;
    max-width: 200px;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sqo-venue-brand-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Info Sections */
.sqo-venue-hours-section,
.sqo-venue-contact-section {
    background: transparent;
    border: none;
    padding: 0;
}

.sqo-venue-hours-section h3,
.sqo-venue-contact-section h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.sqo-venue-hours-section p,
.sqo-venue-contact-section p {
    margin: 0 0 5px 0;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

.sqo-venue-contact-section a {
    color: #000;
    text-decoration: none;
}

.sqo-venue-contact-section a:hover {
    text-decoration: underline;
}

/* Social Media Icon */
.sqo-venue-social-icon {
    display: flex;
    gap: 0;
    margin-top: 20px;
}

.sqo-venue-social-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #000; /* SVART bakgrund */
    border: 1px solid #000;
    border-radius: 4px;
    color: #fff; /* VITA ikoner */
    transition: all 0.2s ease;
    margin-right:5px;
}

.sqo-venue-social-icon a:hover {
    background: #333; /* Lite ljusare på hover */
    color: #fff;
}

.sqo-venue-social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Använder color (vit) från parent */
}

/* Responsive */
/* ==========================================================================
   RESPONSIVE - SINGLE VENUE MAP
   ========================================================================== */

/* Tablet och mindre (< 1024px) */
@media (max-width: 1024px) {
    .sqo-single-map-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .sqo-single-map-layout .sqo-single-map-section,
    .sqo-single-venue-info {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    /* Brand logo lite mindre på tablet */
    .sqo-venue-brand-logo {
        max-width: 180px;
    }
}

/* Mobil (< 768px) */
@media (max-width: 768px) {
    .sqo-single-venue-map-wrapper {
        margin: 20px 0;
    }
    
    .sqo-single-map-layout {
        gap: 30px;
        padding: 0;
    }
    
    /* KARTA - Full bredd med padding */
    .sqo-single-map-layout .sqo-single-map-section {
        width: 100%;
        padding: 0 15px; /* Padding på sidorna */
    }
    
    .sqo-single-map-section .sqo-map-svg-container {
        width: 100%;
        padding: 0;
    }
    
    #sqo-single-map-svg {
        width: 100%;
    }
    
    /* INFO - Två kolumner, ENKELT */
    .sqo-single-venue-info {
        width: 100%;
        padding: 0 15px;
        display: grid;
        grid-template-columns: 1fr 140px;
        gap: 20px;
        align-items: start;
    }
    
    /* Öppettider - vänster */
    .sqo-venue-hours-section {
        grid-column: 1;
        margin: 0 0 0 0; /* Lite space under */
    }
    
    /* Kontakt - vänster, direkt under öppettider */
    .sqo-venue-contact-section {
        grid-column: 1;
        margin: 0;
    }
    
    /* Logo - höger, toppen */
    .sqo-venue-brand-logo {
        grid-column: 2;
        grid-row: 1 / 4; /* Spänner över alla rader */
        max-width: 130px;
        margin: 0 !important;
        justify-self: end;
        align-self: start;
    }
    
    /* Social - höger, direkt under logo i SAMMA cell */
    .sqo-venue-social-icon {
        grid-column: 2;
        grid-row: 1 / 4; /* SAMMA som logo - båda i samma cell */
        margin: 120px 0 0 0 !important; /* Margin-top för att pusha ner under logon */
        justify-self: end;
        align-self: start;
    }
    
    /* Rubriker */
    .sqo-venue-hours-section h3,
    .sqo-venue-contact-section h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    /* Text */
    .sqo-venue-hours-section p,
    .sqo-venue-contact-section p {
        font-size: 14px;
    }
    
    /* Social media icon */
    .sqo-venue-social-icon a {
        width: 36px;
        height: 36px;
    }
    
    .sqo-venue-social-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* Små mobiler (< 480px) */
@media (max-width: 480px) {
    .sqo-single-venue-map-wrapper {
        margin: 15px 0;
    }
    
    .sqo-single-map-layout {
        gap: 20px;
    }
    
    /* KARTA - Mindre padding på små skärmar */
    .sqo-single-map-layout .sqo-single-map-section {
        padding: 0 10px;
    }
    
    /* INFO - Mindre padding och gap */
    .sqo-single-venue-info {
        padding: 0 10px;
        grid-gap: 15px; /* Mindre gap */
    }
    
    /* Brand logo ännu mindre */
    .sqo-venue-brand-logo {
        max-width: 100px;
    }
    
    /* Kompaktare text */
    .sqo-venue-hours-section h3,
    .sqo-venue-contact-section h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }
    
    .sqo-venue-hours-section p,
    .sqo-venue-contact-section p {
        font-size: 13px;
        line-height: 1.5;
    }
    
    /* Mindre social media icon */
    .sqo-venue-social-icon a {
        width: 32px;
        height: 32px;
    }
    
    .sqo-venue-social-icon svg {
        width: 16px;
        height: 16px;
    }
}}

/* ====================================
   Columns Parameter
   ==================================== */

/* 1 kolumn - lista tar full bredd */
.sqo-venues-list.sqo-columns-1 {
    /* Sidebar-list är redan flex-column, funkar direkt */
}

/* 2 kolumner - grid på desktop för sidebar/sqo layout */
.sqo-venues-list.sidebar-list.sqo-columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* 3 kolumner - grid */
.sqo-venues-list.sqo-columns-3 {
    display: grid !important; /* !important för att overrida flex från sidebar-list */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* 4 kolumner */
.sqo-venues-list.sqo-columns-4 {
    display: grid !important; /* !important för att overrida flex från sidebar-list */
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Responsive - mobil alltid 1 kolumn */
@media (max-width: 768px) {
    .sqo-venues-list.sqo-columns-1,
    .sqo-venues-list.sqo-columns-2,
    .sqo-venues-list.sqo-columns-3,
    .sqo-venues-list.sqo-columns-4 {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }
    
    /* På mobil: Karta ska synas även för sidebar/sqo layout */
    .sqo-map-layout.layout-sidebar .sqo-map-section,
    .sqo-map-layout.layout-sqo .sqo-map-section {
        display: block;
    }
}

/* Tablet - max 2 kolumner */
@media (min-width: 769px) and (max-width: 1024px) {
    .sqo-venues-list.sqo-columns-3,
    .sqo-venues-list.sqo-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}