/* --- RESET & LAYOUT PRINCIPALE --- */

:root {
  --ex-colore-primario: #EC7B21;
  --ex-colore-primario-hover: #D45400;
  --colore-primario: #3AA7DF;
  --colore-primario-hover: #3388b2;
}


body, html { 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', sans-serif; 
    background-color: #f0f2f5;
    /* RIMOSSO height: 100%; */
}

/* Rimuoviamo completamente il layout Flexbox dal body */
body {
    display: block;
}

/* --- BRAND BAR (TOP HEADER) --- */
.brand-bar {
    background-color: #383936;
    padding: 10px 20px;
    position: relative;
    z-index: 30;
}
.brand-bar-content {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-bar-logo img {
    height: 28px;
    width: auto;
    display: block;
}
.brand-bar-payoff {
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 12px;
    height: 25px;
}

.brand-bar-payoff span {
    font-size: 12px;
    font-weight: 600;
    color: #f1f1f1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* --- LOCATOR HERO HEADER --- */
.locator-hero-header {
    background-color: #fff;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    position: relative;
    z-index: 20;
}
.hero-content {
    max-width: 910px;
    margin: 0 auto;
}
.hero-brand {
    display: none;
}
.hero-content .title {
    font-size: 16px;
    font-weight: 400;
    color: #999;
    margin: 0 0 5px 0;
}

.hero-content h1 {
    font-size: 34px;
    font-weight: 800;
    color: #212529;
    margin: 0 0 15px 0;
}
.hero-content p {
    font-size: 17px;
    color: #495057;
    line-height: 1.7;
    margin: 0;
}

/* --- ARCHITETTURA APP --- */
#locator-app {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1600px;
    margin: 40px auto; /* Spazio sopra e sotto */
    
    /* ALTEZZA FISSA E GENEROSA PER L'APP */
    height: 800px;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

#sidebar {
    width: 33%; 
    min-width: 380px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e9ecef;
    background: #fff;
}

#sidebar-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
}

#map-container { 
    flex-grow: 1; 
    position: relative; 
}

#map { 
    width: 100%; 
    height: 100%;
}

.search-header { 
    padding: 20px; 
    background: #fff; 
    border-bottom: 1px solid #f0f0f0; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    z-index: 1; 
    position: sticky; 
    top: 0;
    flex-shrink: 0;
}


/* SHOP TYPE SWITCHER */
/* --- SWITCHER TIPO NEGOZIO (Restyling) --- */
.shop-type-switch {
    display: flex;
    background: #f1f3f5;
    padding: 5px; /* Un po' più di spazio attorno */
    border-radius: 10px; /* Più arrotondato */
    border: 1px solid #e9ecef;
}

.type-option {
    flex: 1;
    text-align: center;
    padding: 12px 10px; /* Più alto */
    font-size: 15px; /* Testo più grande */
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    color: #666;
    transition: all 0.2s ease;
    
    /* Aggiungiamo un bordo trasparente per evitare saltelli al cambio stato */
    border: 1px solid transparent; 
}

/* STATO ATTIVO: Molto più evidente */
.type-option.active {
    background: #fff;
    color: var(--colore-primario); /* ARANCIONE BRAND: Collega visivamente ai bottoni */
    font-weight: 800; /* Molto grassetto */
    
    /* Ombra per dare profondità (effetto "Card sollevata") */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    
    /* Bordino sottile per definire meglio l'area */
    border-color: #f0f0f0;
}

/* Icona nello stato attivo */
.type-option.active i {
    color: var(--colore-primario);
    transform: scale(1.1); /* Leggero zoom dell'icona */
}

#filter-type { display: none; }

/* Input Group */
.input-group { position: relative; }
.search-input { width: 100%; padding: 12px 35px 12px 40px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; box-sizing: border-box; transition: border 0.2s; background-color: #fff; }
.search-input:focus { border-color: var(--colore-primario); outline: none; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #555; }
.clear-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #999; cursor: pointer; display: none; font-size: 14px; padding: 5px; }

/* Action Bar */
.action-bar { display: flex; gap: 10px; }
.btn-tool { padding: 10px 15px; background: #fff; border: 1px solid #ddd; color: #333; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; width: 100%; }
.btn-tool i{ font-size: 16px; }
.btn-tool:hover { background: #f9f9f9; border-color: #ccc; }

/* --- STATO ATTIVO PULSANTE GEO --- */
.btn-tool.active-geo {
    background-color: #fff;
    color: #333;
    border: 1px solid #333; /* Bordo scuro per contrasto */
    font-weight: 600;
}

.btn-tool.active-geo i {
    color: #c0392b; /* La X è rossa, indica "rimuovi" */
    margin-right: 5px;
}

.btn-tool.active-geo:hover {
    background-color: #fce8e6; /* Sfondo rossiccio al passaggio */
    border-color: #c0392b;
    color: #c0392b;
}



/* --- RESULTS TOOLBAR --- */
.results-toolbar { padding: 15px 20px; background: #fcfcfc; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; flex-shrink: 0; }
.results-count strong { color: #333; font-size: 14px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; }
.btn-reset-inline { background: #fff5f5; border: 1px solid #ffebeb; color: #c0392b; padding: 8px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; display: none; align-items: center; gap: 5px; }
.btn-reset-inline:hover { background: #ffe0e0; border-color: #ffcccc; }

.btn-filter-inline {
    /* Colori Brand Delicati (ex stile dei chip) */
    background-color: #f0f8fc; 
    color: var(--colore-primario-hover);
    border: 1px solid #bce0f5;
    
    /* Struttura */
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700; /* Più grassetto per risaltare */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

/* Icona sliders */
.btn-filter-inline i {
    color: var(--colore-primario);
    font-size: 14px;
}

/* Hover */
.btn-filter-inline:hover {
    background-color: #e1f3fc;
    border-color: var(--colore-primario);
    box-shadow: 0 2px 5px rgba(58, 167, 223, 0.25);
}

/* --- FILTERS OVERLAY --- */
#filters-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#fff; z-index: 50; display: none; flex-direction: column; padding: 30px; box-sizing: border-box; overflow-y: auto; }
#filters-overlay.open { display: flex; animation: fadeIn 0.2s ease-out; }
.overlay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.overlay-title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin: 0; }
.btn-close-overlay { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }
.filter-group { margin-bottom: 20px; }
.filter-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #999; margin-bottom: 8px; }
.filter-select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; background: #fff; color: #333; cursor: pointer; }
.filter-select:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
.overlay-footer { margin-top: auto; padding-bottom: 20px; }
.btn-apply { width: 100%; padding: 15px; background: var(--colore-primario); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; text-transform: uppercase; transition: background 0.2s; }
.btn-apply:hover { background: var(--colore-primario-hover); }

/* --- LISTA RISULTATI --- */

#results-list {
    padding: 20px; /* Aggiungiamo padding al contenitore */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Usiamo gap per spaziare le card */
    background: #f8f9fa; /* Sfondo leggermente diverso per la lista */
}

.shop-card {
    padding: 20px;
    /* border-bottom: 1px solid #f0f0f0; <-- RIMUOVI */
    border-radius: 10px; /* Angoli arrotondati */
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}

.shop-card:hover {
    background: #fff; /* Manteniamo lo sfondo bianco */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Aumentiamo l'ombra */
}

.shop-card.active {
    border-left: none; /* Rimuoviamo il bordo arancione */
    border: 2px solid var(--colore-primario); /* Lo sostituiamo con un bordo completo */
    box-shadow: 0 5px 15px rgba(236, 123, 33, 0.15);
    background: #fffbf7;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.shop-header-main {
    display: flex;
    flex-direction: column; /* Impila Nome e Rating */
    gap: 4px; /* Spazio minimo tra nome e stelle */
}

.shop-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}

/* Riduciamo il margine del rating per compattarlo */
.shop-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px; /* Piccolo spazio dal nome */
}

.stars-outer {
    position: relative;
    display: inline-block;
    font-family: "Font Awesome 6 Free"; /* Fondamentale per FA6 */
    font-weight: 900; /* 900 = Solid icons */
    font-size: 13px; /* Dimensione stelle */
    line-height: 1;
}

.stars-outer::before {
    content: "\f005 \f005 \f005 \f005 \f005"; /* 5 stelle vuote */
    color: #e0e0e0; /* Grigio chiaro */
}

.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0; /* Gestito via JS */
    font-family: 'FontAwesome';
    font-weight: 900;
}

.stars-inner::before {
    content: "\f005 \f005 \f005 \f005 \f005"; /* 5 stelle piene */
    color: #FBBC01; /* Giallo/Arancio */
}

.rating-text {
    font-size: 13px;
    color: #555;
    margin-left: 3px;
}

/* Styling per i servizi (già presente ma assicuriamoci che sia bello) */
.shop-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Spazio tra i tag */
    margin-top: 10px;
    margin-bottom: 15px;
}

.service-tag {
    font-size: 11px;
    font-weight: 600;
    background-color: #f8f9fa; /* Grigio chiarissimo, quasi bianco */
    color: #495057; /* Testo scuro */
    padding: 5px 10px; /* Più respiro interno */
    border-radius: 6px; /* Più arrotondato */
    display: inline-flex; /* Fondamentale per allineare icona e testo */
    align-items: center;
    border: 1px solid #e9ecef;
    line-height: 1.2;
}

.service-tag i {
    margin-right: 6px; /* Distanza tra icona e testo */
    color: var(--colore-primario); /* BRAND COLOR */
    font-size: 11px;
}

/* Stile per il tag "+2" */
.service-tag.more-tag {
    background-color: #fff;
    color: #999;
    border-style: dashed;
}

.service-tag .fa {
    color: #adb5bd; /* Icona grigia, non blu */
    font-size: 10px;
}


/* --- DISTANZA MINIMAL --- */
.shop-distance {
    font-size: 13px;
    color: #555; 
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent; /* Niente sfondo */
    border: none; /* Niente bordo */
    padding: 0;
}

.shop-distance i {
    color: var(--colore-primario); /* Icona arancione */
    font-size: 14px;
}



.shop-address { font-size: 14px; color: #555; margin-bottom: 8px; line-height: 1.4; }
.shop-badges { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.badge-pill { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 6px 12px; letter-spacing: 0.5px; border-radius: 4px; color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.bg-max { background-color: #f1c40f; color: #333; } 
.bg-pro { background-color: #9b59b6; } 
.bg-mini { background-color: #58b676; } 
.shop-meta { display: flex; align-items: center; gap: 15px; font-size: 12px; color: #555; font-weight: 500; }
.rating-box { color: #f39c12; display: flex; align-items: center; gap: 4px; }
.shop-actions { margin-top: 18px; display: flex; gap: 10px; }
.btn-action { flex: 1; padding: 8px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; }

.btn-primary {color: var(--colore-primario); border: 1px solid var(--colore-primario);}
.btn-primary:hover {background: var(--colore-primario-hover); color: #fff;}

/*.btn-primary {background: var(--colore-primario); color: #fff; border: 1px solid var(--colore-primario);}
.btn-primary:hover {background: var(--colore-primario-hover);}*/

.btn-secondary { background: #fff; color: #333; border: 1px solid #ddd; }
.btn-secondary:hover { background: #f5f5f5; }
.btn-outline { background: transparent; color: #7f8c8d; border: 1px solid #bdc3c7; }
.btn-outline:hover { background: #f5f5f5; color: #333; border-color: #95a5a6; }

/* --- VIEW SWITCHER --- */
#view-switcher {
position: fixed;
bottom: 40px;
left: 50%;
transform: translate(-50%, 100px);
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 30px;
padding: 10px;
display: flex;
gap: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#view-switcher.visible {
transform: translate(-50%, 0); /* Torna alla sua posizione originale */
opacity: 1;
visibility: visible;
}

/* Quando la mappa è attiva, lo switcher DEVE essere sempre visibile e cliccabile */
body.map-view-active #view-switcher {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important; /* Posizione "su", visibile */
    pointer-events: auto !important;
}

.switch-option { padding: 10px 24px; color: #fff; font-size: 14px; font-weight: 600; border-radius: 25px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s ease; }
.switch-option.active { background: var(--colore-primario); color: #fff; box-shadow: 0 2px 10px rgba(236, 123, 33, 0.4);}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* --- INFOWINDOW (POPUP MAPPA) --- */
.infowindow-content {
    padding: 4px;
    max-width: 260px; /* Larghezza fissa per contenere i bottoni */
    font-family: 'Segoe UI', sans-serif;
}

/* Header: Nome e Rating */
.iw-header {
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

.iw-header h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.iw-rating {
    font-size: 12px;
    color: #f39c12; /* Giallo stelle */
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Indirizzo */
.iw-address {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

/* Griglia Bottoni Azione */
.iw-actions-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Bottone Primario (Navigazione) - Sempre presente */
.iw-btn-primary {
    flex-grow: 1; /* Si allarga per riempire lo spazio */
    background: var(--colore-primario);
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s;
    border: 1px solid var(--colore-primario);
}
.iw-btn-primary:hover {
    background: var(--colore-primario-hover);
    color: #fff;
}

/* Bottoni Secondari (Telefono/Web) - Quadrati */
.iw-btn-secondary {
    width: 36px; /* Quadrato */
    height: 36px;
    background: #fff;
    color: #555;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #ddd;
    transition: all 0.2s;
    flex-shrink: 0; /* Non si schiaccia */
}
.iw-btn-secondary:hover {
    border-color: var(--colore-primario);
    color: var(--colore-primario);
    background-color: #fff5f0;
}

/* Link Footer */
.infowindow-link {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #999;
    text-decoration: underline;
    margin-top: 5px;
}
.infowindow-link:hover {
    color: var(--colore-primario);
}

/* Badge nel Popup */
.iw-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.iw-bg-max { background-color: #F9C73D; color: #333; }
.iw-bg-pro { background-color: #A168A8; }
.iw-bg-mini { background-color: #51B36E; }

/* Titolo Cliccabile */
.iw-header h4 a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}
.iw-header h4 a:hover {
    color: var(--colore-primario);
    text-decoration: underline;
}

/* Aggiustamento Header per ospitare il badge */
.iw-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* --- PAGINAZIONE (Carica Altri) --- */

#load-more-container {
    padding: 20px; /* Padding uniforme attorno al pulsante */
    background-color: #f8f9fa; /* Stesso sfondo della lista per un look integrato */
}

.btn-load-more-primary {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s;

    /* Stile Primario */
    background-color: var(--colore-primario);
    color: #fff;
    border: 1px solid var(--colore-primario);
    box-shadow: 0 4px 15px rgba(236, 123, 33, 0.2);
}

.btn-load-more-primary:hover {
    background-color: var(--colore-primario-hover);
    border-color: var(--colore-primario-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 123, 33, 0.3);
}


/* Chips Container */
.chips-container {
    display: flex;
    flex-wrap: wrap; /* Su desktop vanno a capo, su mobile potremmo farli scrollare */
    gap: 12px 8px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.filter-chip {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    /* MODIFICA: Un po' più di padding verticale per eleganza */
    padding: 8px 14px; 
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    /* Evita che il chip si schiacci su schermi piccolissimi */
    white-space: nowrap;
}

.filter-chip:hover {
    background: #f9f9f9;
    border-color: #bbb;
}

.filter-chip.active {
    background: var(--colore-primario); /* Tuo colore brand */
    color: #fff;
    border-color: var(--colore-primario);
}

.filter-chip i {
    font-size: 14px;
}




/* --- PULSANTE VISTA GENERALE (MAPPA) --- */
.map-floating-btn {
    position: absolute;
    bottom: 30px; /* Posizione dal basso */
    left: 50%;
    transform: translateX(-50%); /* Centrato orizzontalmente */
    z-index: 5; /* Sopra la mappa */
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-floating-btn:hover {
    background: #f9f9f9;
    color: var(--colore-primario); /* Tuo colore brand */
}

/* --- FILTRI ATTIVI (CHIPS SCROLLABILI) --- */
.active-filters-area {
    /* Spaziatura Esterna */
    margin-top: 20px;    /* Dà aria rispetto alla toolbar grigia */
    margin-bottom: 15px; /* Dà aria rispetto alla lista negozi */
    
    /* Spaziatura Interna */
    padding: 0 20px;     /* Allineato con il resto del contenuto */
    
    /* Layout Flexbox */
    display: none;       /* Nascosto di default, il JS lo imposta a 'flex' */
    gap: 8px;            /* Spazio tra i chip */
    align-items: center;
    
    /* LOGICA SCROLL ORIZZONTALE */
    overflow-x: auto;          /* Abilita lo scroll se serve */
    white-space: nowrap;       /* Impedisce ai chip di andare a capo */
    -webkit-overflow-scrolling: touch; /* Scroll fluido e nativo su iOS */
    
    /* Nascondiamo la scrollbar (estetica) */
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    min-height: 32px;          /* Altezza minima per evitare saltelli */
}

/* Nasconde scrollbar su Chrome/Safari/Opera */
.active-filters-area::-webkit-scrollbar { 
    display: none; 
}

/* --- CHIP FILTRI ATTIVI (Stile Neutro/Grigio) --- */
.active-filter-tag {
    /* Colori Neutri */
    background-color: #f8f9fa; /* Grigio chiarissimo */
    border: 1px solid #e9ecef; /* Bordo quasi invisibile */
    color: #495057;            /* Testo scuro */
    
    /* Forma */
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 13px;
    
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Icona X (Grigia a riposo) */
.active-filter-tag i {
    color: #adb5bd;
    font-size: 11px;
    transition: color 0.2s;
}

/* Hover: Diventa ROSSO (Feedback di cancellazione) */
.active-filter-tag:hover {
    background-color: #fff5f5;
    border-color: #ffc9c9;
    color: #c92a2a; /* Rosso scuro */
}

.active-filter-tag:hover i {
    color: #fa5252; /* Rosso vivo */
}


/* --- BOTTONE FLOATING GEO (Google Style) --- */
.btn-floating-geo {
    position: absolute;
    bottom: 110px; 
    right: 20px;   
    width: 50px; /* Leggermente più grande */
    height: 50px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Icona di base (Grigio scuro/Nero) */
.btn-floating-geo i {
    color: #333; 
    font-size: 20px;
}

/* STATO ATTIVO (Sono localizzato) */
.btn-floating-geo.is-active i {
    color: #1a73e8; /* Il classico "Google Blue" */
}

/* =========================================
   LOCATOR FOOTER
   ========================================= */

.locator-footer {
    background-color: #fff;
    color: #495057;
    font-size: 14px;
    border-top: none;
    padding-top: 40px;
    flex-shrink: 0;
}

.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Colonna B2B più larga */
    gap: 30px;
}

.footer-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-section p {
    margin: 0 0 15px 0;
    line-height: 1.7;
}

.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul a {
    color: #495057;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-section ul a:hover {
    color: var(--colore-primario);
    text-decoration: underline;
}

.btn-footer-b2b {
    display: inline-block;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #343a40;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-footer-b2b:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
    transform: translateY(-2px);
}

.footer-bottom {
    background-color: #fff;
    text-align: center;
    padding: 15px 20px;
    margin-top: 40px;
    font-size: 12px;
    color: #868e96;
    border-top: 1px solid #e9ecef;
}

.footer-bottom p {
    margin: 0;
}

/* --- NASCONDI X NATIVA BROWSER (Input Search) --- */
/* Chrome, Safari, Edge, Opera */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

/* Firefox */
input[type="search"] {
    -moz-appearance: textfield;
}

::placeholder { 
    color: #666 !important; 
    opacity: 1; 
}


/* =================================================================
   BLOCCO RESPONSIVE UNIFICATO (max-width: 767px)
   ================================================================= */

@media (max-width: 767px) {

    /* --- 1. ARCHITETTURA DI LAYOUT MOBILE --- */
    body {
        display: block; /* Layout a flusso normale, non più flex */
        height: auto;
    }
    #locator-app {
        flex-direction: column;
        height: auto; /* Altezza determinata dal contenuto */
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        margin-bottom: 40px;
    }
    #sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        max-width: 100%;
    }
    #sidebar-scroll-area {
        overflow-y: visible; /* Lo scroll è dell'intera pagina */
    }
    #map-container {
        width: 100%;
        height: 80vh; /* Altezza fissa per la mappa */
    }
    .search-header {
        position: static; /* L'header di ricerca non è più sticky */
    }

    /* --- 2. GESTIONE VISIBILITÀ LISTA/MAPPA --- */
    #view-switcher { 
        display: flex; 
    }
    /* Stato di default: lista visibile, mappa nascosta */
    #map-container { 
        display: none; 
    }
    #sidebar { 
        display: flex; 
    }
    /* Stato mappa attiva: mappa visibile, lista nascosta */
    body.map-view-active #map-container { 
        display: block; 
    }
    body.map-view-active #sidebar { 
        display: none; 
    }
    
    body.map-view-active .locator-footer, 
    body.map-view-active .claim-box,      /* Il box "Sei un negozio?" */
    body.map-view-active .footer-bottom {
        display: none !important;
    }
    
    body.map-view-active #sidebar {
        padding-bottom: 0;
    }
    
    #filters-overlay {
        position: fixed; /* Torna fixed su mobile */
        z-index: 2000;   /* Sopra a tutto, anche alla mappa */
    }
    
    /* --- FIX SOVRAPPOSIZIONE SWITCHER MOBILE - v. Finale --- */

    /* Aggiungiamo un padding alla fine della sidebar (che su mobile contiene tutto)
   SOLO quando lo switcher è visibile. */
    body.has-view-switcher #sidebar {
    padding-bottom: 70px;
    }

    /* --- 4. STILI HEADER & BRAND BAR --- */
    .brand-bar img {
        height: 24px;
    }
    .locator-hero-header {
        padding: 30px 20px;
    }
    .hero-content h1 {
        font-size: 26px;
    }
    .hero-content p {
        font-size: 16px;
    }
    .brand-bar-payoff span {
        font-size: 11px;
    }

    /* --- 5. STILI FILTRI (OVERLAY & CHIPS) --- */
    .chips-container {
        justify-content: flex-start;
        gap: 10px;
    }
    .filter-chip {
        flex-grow: 0;
        width: auto;
        padding: 8px 16px;
        margin: 0;
    }
    .overlay-footer {
        padding-bottom: 40px;
        padding-top: 20px;
    }
    .btn-apply {
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(236, 123, 33, 0.3);
    }

    /* --- 6. STILI ELEMENTI MAPPA --- */
    .map-floating-btn {
        bottom: 80px; 
    }

    /* --- 7. STILI FOOTER --- */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-section {
        margin-bottom: 20px;
    }
    .btn-footer-b2b {
        width: 80%;
        max-width: 300px;
    }
}


@media (min-width: 768px) {
    #locator-app { flex-direction: row; }
    #sidebar { 
        height: auto; /* <-- MODIFICA DA 100vh */
        overflow-y: hidden;
        position: relative;
        /* padding-bottom: 0; <-- RIMUOVI O COMMENTA */
    }
    #map-container { 
        flex-grow: 1; 
        height: auto; /* <-- MODIFICA DA 100vh */
        position: relative; 
    }
    #view-switcher { display: none; }
    
    #filters-overlay {
        position: absolute; /* Si ancora alla sidebar */
        z-index: 50;
        border-right: 5px solid #ddd; /* Un bordino estetico a destra */
    }
    .btn-floating-geo {
        display: none; /* Su desktop c'è già la sidebar visibile */
    }
}


@media (max-height: 700px) and (max-width: 767px) {
    .locator-hero-header {
        padding: 20px; /* Riduciamo il padding verticale */
    }
    .hero-content h1 {
        font-size: 22px; /* Riduciamo ulteriormente il titolo */
        margin-bottom: 10px;
    }
    .hero-content p {
        font-size: 15px; /* Riduciamo il paragrafo */
    }
}