/**
 * CSS Sistema Alloggi Core
 * Stili per shortcode e componenti
 */

:root {
    --alloggi-primary-color: #2271b1;
    --alloggi-background-card: #ffffff;
    --alloggi-title-font-size: 1.5rem;
    --alloggi-characteristics-font-size: 1rem;
    --alloggi-border-radius: 0px;
    --alloggi-padding: 1rem;
    --masonry-gap: 20px;
    --masonry-radius: 12px;
}

/* ============================================
   GALLERY HORIZONTAL
   ============================================ */
.alloggi-galleria-horizontal {
    position: relative;
    width: 100%;
}

.alloggi-galleria-container {
    position: relative;
}

.alloggi-galleria-arrows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.alloggi-galleria-arrow {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.alloggi-galleria-horizontal:hover .alloggi-galleria-arrow {
    opacity: 1;
}

.alloggi-galleria-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1rem;
    padding: 1rem 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    cursor: grab;
}

.alloggi-galleria-scroll.grabbing {
    cursor: grabbing;
}

.alloggi-galleria-item {
    flex: 0 0 auto;
    width: 400px;
    min-width: 300px;
    scroll-snap-align: start;
    position: relative;
}

.alloggi-galleria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   GALLERY MASONRY - GRIGLIA A 5 COLONNE CON FLUSSO DENSO
   ============================================ */

.alloggio-masonry-wrapper {
    width: 100%;
    margin: 2rem 0;
}

/* DESKTOP: Griglia a 5 colonne con flusso denso */
.alloggio-masonry-grid-dense {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colonne */
    grid-auto-rows: 150px; /* Altezza base per unità cella */
    grid-auto-flow: dense; /* Flusso denso: riempie i buchi automaticamente */
    gap: var(--masonry-gap);
}

/* DEFINIZIONE 5 TIPOLOGIE DI MODULI */

/* Small: 1 colonna × 1 riga (base) */
.masonry-item.masonry-size-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Medium: 2 colonne × 2 righe */
.masonry-item.masonry-size-medium {
    grid-column: span 2;
    grid-row: span 2;
}

/* Large: 3 colonne × 3 righe (dominante) */
.masonry-item.masonry-size-large {
    grid-column: span 3;
    grid-row: span 3;
}

/* Wide: 3 colonne × 2 righe (panoramica) */
.masonry-item.masonry-size-wide {
    grid-column: span 3;
    grid-row: span 2;
}

/* Tall: 2 colonne × 3 righe (verticale) */
.masonry-item.masonry-size-tall {
    grid-column: span 2;
    grid-row: span 3;
}

/* TABLET: 3 colonne */
@media (max-width: 1024px) and (min-width: 768px) {
    .alloggio-masonry-grid-dense {
        grid-template-columns: repeat(3, 1fr); /* 3 colonne */
        grid-auto-rows: 120px;
    }
    
    /* Small: 1x1 */
    .masonry-item.masonry-size-small {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* Medium: 2x2 */
    .masonry-item.masonry-size-medium {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    /* Large: diventa 2x2 su tablet (non può essere 3x3) */
    .masonry-item.masonry-size-large {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    /* Wide: 3x2 (tutta la larghezza) */
    .masonry-item.masonry-size-wide {
        grid-column: span 3;
        grid-row: span 2;
    }
    
    /* Tall: 1x2 su tablet */
    .masonry-item.masonry-size-tall {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* MOBILE: 2 colonne */
@media (max-width: 767px) {
    .alloggio-masonry-grid-dense {
        grid-template-columns: repeat(2, 1fr); /* 2 colonne */
        grid-auto-rows: 150px;
        gap: 15px;
    }
    
    /* Su mobile tutte le immagini diventano Small o Medium */
    .masonry-item.masonry-size-small,
    .masonry-item.masonry-size-medium {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .masonry-item.masonry-size-large,
    .masonry-item.masonry-size-wide {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .masonry-item.masonry-size-tall {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* STILI COMUNI MASONRY ITEM */
.masonry-item {
    overflow: hidden;
    border-radius: var(--masonry-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.masonry-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--masonry-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.masonry-img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: #f0f0f0; /* Placeholder durante il caricamento */
}

.masonry-img.loaded {
    background: transparent;
}

.masonry-item:hover .masonry-img {
    transform: scale(1.05);
}

/* OVERLAY PER "+N FOTO RIMANENTI" */
.masonry-item.has-overlay .masonry-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1;
    pointer-events: none;
}

.masonry-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    font-weight: bold;
    pointer-events: none;
}

.masonry-overlay-content .overlay-text {
    font-size: 3rem;
    display: block;
    line-height: 1;
}

.masonry-overlay-content .overlay-subtitle {
    font-size: 1rem;
    display: block;
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* GESTIONE IMMAGINI NASCOSTE */
.masonry-item.hidden-item {
    display: none;
}

.masonry-item.reveal-item {
    display: grid;
    animation: fadeUp 0.5s ease forwards;
}

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

/* ============================================
   LIGHTBOX POPUP
   ============================================ */
.alloggi-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    overflow-y: auto;
}

.alloggi-lightbox.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.alloggi-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    transition: all 0.3s ease;
}

.alloggi-lightbox-close:hover {
    background: #fff;
    transform: rotate(90deg);
}

.alloggi-lightbox-container {
    width: 100%;
    max-width: 90vw;
    padding: 80px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.alloggi-lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.alloggi-lightbox-nav {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.alloggi-lightbox-nav button {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.alloggi-lightbox-nav button:hover {
    background: #fff;
}

.alloggi-lightbox-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.alloggi-lightbox-counter {
    color: white;
    font-size: 14px;
    margin-top: 10px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   GALLERY GRID
   ============================================ */
.alloggi-galleria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.alloggi-galleria-grid .alloggi-galleria-item {
    position: relative;
    aspect-ratio: 1;
    min-height: 200px;
}

/* ============================================
   SCHEDA INFO
   ============================================ */
.alloggi-scheda-info {
    margin: 2rem 0;
}

.alloggi-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
}

.alloggi-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--alloggi-padding);
    background: var(--alloggi-background-card);
    border-radius: var(--alloggi-border-radius);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ============================================
   STILI ICONE
   ============================================
   
   Questo blocco contiene gli stili per le icone dei servizi e delle caratteristiche.
   Gli stili possono essere personalizzati da backend nella sezione
   "Mapping Icone > CSS Personalizzato per Icone".
   
   Selettori principali:
   - .alloggi-icon: Icona base (classe CSS)
   - .alloggi-icon-img: Contenitore icona immagine
   - .alloggi-icon-img img: Immagine icona
   - .alloggi-caratteristica-item .alloggi-icon: Icona nelle caratteristiche principali
   - .servizi-stanza .alloggi-icon: Icona nei servizi stanza
   - .servizi-appartamento .alloggi-icon: Icona nei servizi appartamento
   ============================================ */
.alloggi-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.alloggi-icon-img img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
}

/* ============================================
   LISTA CARD
   ============================================
   
   Questo blocco contiene gli stili per le card degli alloggi.
   Gli stili possono essere personalizzati da backend nella sezione
   "Configurazione Card > CSS Personalizzato per Card".
   
   Selettori principali:
   - .alloggi-card: Card singola
   - .alloggi-card-image: Contenitore immagine
   - .alloggi-card-content: Contenuto card
   - .alloggi-card-price: Prezzo
   - .alloggi-cards-grid: Container griglia
   - .alloggi-cards-horizontal: Container scroll orizzontale
   ============================================ */
.alloggi-lista-card {
    margin: 2rem 0;
}

.alloggi-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.alloggi-cards-horizontal {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 1rem 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
}

/* Fix per scroll orizzontale - le card devono avere larghezza fissa */
.alloggi-cards-horizontal .alloggi-card {
    flex: 0 0 auto;
    width: 350px;
    max-width: 350px;
    height: auto;
    align-self: stretch;
}

.alloggi-card,
.alloggi-card.alloggi-filterable-card {
    background: var(--alloggi-background-card);
    border-radius: var(--alloggi-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Wrapper immagine/gallery */
.alloggi-card-image-wrapper {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.alloggi-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Indicatore di stato - Stili base (sovrascrivibili da backend) */
.alloggi-card-status-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    font-weight: bold;
    border-radius: 4px;
    /* Valori di default - saranno sovrascritti dal CSS iniettato */
    color: #ffffff;
    background: #2271b1;
    padding: 8px 12px;
    margin: 10px;
    font-size: 14px;
}

/* Indicatore foto - Stili base (uguali a status-indicator ma posizionato a destra) */
.alloggi-card-photos-indicator {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    font-weight: bold;
    border-radius: 4px;
    /* Valori di default - saranno sovrascritti dal CSS iniettato */
    color: #ffffff;
    background: #2271b1;
    padding: 8px 12px;
    margin: 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.alloggi-card-photos-indicator .dashicons-camera {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* Contenuto card */
.alloggi-card-content {
    padding: var(--alloggi-padding);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.alloggi-card-title {
    margin: 0 0 0.5rem 0;
    font-size: var(--alloggi-title-font-size);
    flex-shrink: 0;
}

.alloggi-card-title a {
    text-decoration: none;
    color: inherit;
}

.alloggi-card-title a:hover {
    text-decoration: underline;
}

.alloggi-card-price {
    color: var(--alloggi-primary-color);
    font-weight: bold;
    font-size: var(--alloggi-title-font-size);
    margin: 0.5rem 0;
    flex-shrink: 0;
}

.alloggi-card-price-per {
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.8;
}

.alloggi-card-description {
    margin: 0.75rem 0;
    line-height: 1.6;
    color: #666;
    font-size: 0.9rem;
    flex-grow: 1;
    min-height: 0;
}

/* Codice Stanza */
.alloggi-card-codice-stanza {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
    padding: 6px 0;
    font-size: 0.85rem;
    color: #666;
    border-top: 1px solid #eee;
}

.alloggi-card-codice-label {
    font-weight: 600;
    color: var(--alloggi-primary-color, #2271b1);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.alloggi-card-codice-value {
    font-weight: 500;
    color: #333;
}

/* Footer Card - Servizi e Pulsante */
.alloggi-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 1rem;
    flex-shrink: 0;
}

/* Servizi Icone (CSS separato per card) */
.alloggi-card-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.alloggi-card-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alloggi-card-service-icon .alloggi-icon,
.alloggi-card-service-icon .alloggi-icon-img {
    width: 100%;
    height: 100%;
}

.alloggi-card-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Pulsante azione - Stili base (sovrascrivibili da backend) */
.alloggi-card-button-wrapper {
    flex-shrink: 0;
}

.alloggi-card-button {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    /* Valori di default - saranno sovrascritti dal CSS iniettato */
    color: #ffffff;
    background: #2271b1;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
}

.alloggi-card-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Caratteristiche Principali Card */
.alloggi-card-characteristics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 1rem 0;
    flex-shrink: 0;
}

.alloggi-card-characteristic-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.alloggi-card-characteristic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alloggi-card-characteristic-icon .alloggi-icon,
.alloggi-card-characteristic-icon .alloggi-icon-img {
    width: 100%;
    height: 100%;
}

.alloggi-card-characteristic-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.alloggi-card-characteristic-value {
    font-size: 0.9rem;
    color: #666;
}

/* Gallery nella Card - Stili specifici */
.alloggi-card-image-wrapper .alloggi-card-gallery {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-container {
    height: 100%;
    position: relative;
    width: 100%;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-scroll {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-scroll::-webkit-scrollbar {
    display: none;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-item {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-arrows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 10px;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-arrow {
    pointer-events: all;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 11;
}

.alloggi-card-image-wrapper .alloggi-card-gallery:hover .alloggi-galleria-arrow {
    opacity: 1;
}

.alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Fine blocco LISTA CARD - CSS personalizzato verrà iniettato dopo questo punto */

/* ============================================
   CAMPO SINGOLO
   ============================================ */
.alloggi-campo {
    margin: 0.5rem 0;
}

.alloggi-campo-label {
    font-weight: bold;
    margin-right: 0.5rem;
}

.alloggi-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--alloggi-primary-color);
    color: #fff;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* ============================================
   CARATTERISTICHE PRINCIPALI
   ============================================ */
.alloggi-caratteristiche-principali {
    margin: 2rem 0;
}

.alloggi-caratteristiche-grid {
    display: grid;
    gap: 1rem;
}

.alloggi-colonne-2 {
    grid-template-columns: repeat(2, 1fr);
}

.alloggi-colonne-3 {
    grid-template-columns: repeat(3, 1fr);
}

.alloggi-colonne-4 {
    grid-template-columns: repeat(4, 1fr);
}

.alloggi-colonne-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Colonne Desktop Dinamiche per Caratteristiche Principali - quando desktop_columns > 0 */
.alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-desktop-1 {
    grid-template-columns: repeat(1, 1fr) !important;
}
.alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-desktop-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-desktop-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-desktop-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}
.alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-desktop-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}
.alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-desktop-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* Colonne Tablet per Caratteristiche Principali - quando tablet_columns > 0 */
@media (min-width: 769px) and (max-width: 1024px) {
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-tablet-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-tablet-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-tablet-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-tablet-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Colonne Mobile Dinamiche per Caratteristiche Principali - quando mobile_columns > 0 e mobile_scroll è disattivato - FORZATO A MAX 1 COLONNA */
@media (max-width: 768px) {
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-mobile-1,
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-mobile-2,
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-mobile-3,
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-columns-mobile-4 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Scroll Orizzontale Mobile per Caratteristiche Principali - quando mobile_scroll è attivato */
@media (max-width: 768px) {
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-mobile-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
        grid-template-columns: none !important;
    }
    
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-mobile-scroll::-webkit-scrollbar {
        height: 8px;
    }
    
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-mobile-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-mobile-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-mobile-scroll .alloggi-caratteristica-item {
        flex-shrink: 0;
        min-width: fit-content;
    }
}

.alloggi-caratteristica-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--alloggi-background-card);
    border-radius: var(--alloggi-border-radius);
}

.alloggi-caratteristica-item .alloggi-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fine blocco STILI ICONE - CSS personalizzato verrà iniettato dopo questo punto */

.alloggi-caratteristica-valore {
    font-size: var(--alloggi-characteristics-font-size);
}

/* ============================================
   COMPATIBILITÀ ACF FREE
   ============================================
   
   Stili aggiuntivi per garantire compatibilità
   con ACF Free e tutti i tipi di campo supportati:
   - Text (stringhe)
   - Checkbox (array di valori)
   - Select (valori singoli)
   - Number (numeri)
   - Textarea (testo multilinea)
   ============================================ */

/* Gestione array checkbox (servizi_stanza, servizi_appartamento) - Stili base */
.alloggi-servizi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.alloggi-servizi .alloggi-items-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
}

.alloggi-servizi .alloggi-servizio-item,
.alloggi-servizi .alloggi-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Lista servizi (usata da shortcode campo) - Orizzontale per ACF Free */
.alloggi-servizi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

/* Colonne Desktop - quando desktop_columns > 0 */
.alloggi-servizi-list.alloggi-servizi-columns-desktop-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    flex-wrap: nowrap;
}
.alloggi-servizi-list.alloggi-servizi-columns-desktop-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: nowrap;
}
.alloggi-servizi-list.alloggi-servizi-columns-desktop-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: nowrap;
}
.alloggi-servizi-list.alloggi-servizi-columns-desktop-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-wrap: nowrap;
}
.alloggi-servizi-list.alloggi-servizi-columns-desktop-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    flex-wrap: nowrap;
}
.alloggi-servizi-list.alloggi-servizi-columns-desktop-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    flex-wrap: nowrap;
}

/* Colonne Tablet - quando tablet_columns > 0 */
@media (min-width: 769px) and (max-width: 1024px) {
    .alloggi-servizi-list.alloggi-servizi-columns-tablet-1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        flex-wrap: nowrap;
    }
    .alloggi-servizi-list.alloggi-servizi-columns-tablet-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-wrap: nowrap;
    }
    .alloggi-servizi-list.alloggi-servizi-columns-tablet-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        flex-wrap: nowrap;
    }
    .alloggi-servizi-list.alloggi-servizi-columns-tablet-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        flex-wrap: nowrap;
    }
}

/* Colonne Mobile - quando mobile_columns > 0 e mobile_scroll è disattivato - FORZATO A MAX 1 COLONNA */
@media (max-width: 768px) {
    .alloggi-servizi-list.alloggi-servizi-columns-mobile-1,
    .alloggi-servizi-list.alloggi-servizi-columns-mobile-2,
    .alloggi-servizi-list.alloggi-servizi-columns-mobile-3,
    .alloggi-servizi-list.alloggi-servizi-columns-mobile-4 {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        flex-wrap: nowrap;
    }
}

/* Scroll Orizzontale Mobile - quando mobile_scroll è attivato */
@media (max-width: 768px) {
    .alloggi-servizi-list.alloggi-servizi-mobile-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    
    .alloggi-servizi-list.alloggi-servizi-mobile-scroll::-webkit-scrollbar {
        height: 8px;
    }
    
    .alloggi-servizi-list.alloggi-servizi-mobile-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .alloggi-servizi-list.alloggi-servizi-mobile-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    
    .alloggi-servizi-list.alloggi-servizi-mobile-scroll .alloggi-servizio-item {
        flex-shrink: 0;
        min-width: fit-content;
    }
}

.alloggi-servizi-list .alloggi-servizio-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--alloggi-background-card, #ffffff);
    border-radius: var(--alloggi-border-radius, 0px);
    flex-shrink: 0;
    white-space: nowrap;
}

.alloggi-servizi-list .alloggi-servizio-item .alloggi-icon,
.alloggi-servizi-list .alloggi-servizio-item .alloggi-icon-img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.alloggi-servizi-list .alloggi-servizio-item span {
    display: inline-block;
    white-space: nowrap;
}

.alloggi-icon-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Gestione valori vuoti/nulli da ACF Free */
.alloggi-caratteristica-item:empty,
.alloggi-card-characteristic-item:empty {
    display: none;
}

/* Assicura che i campi text da ACF Free siano visualizzati correttamente */
.alloggi-campo-valore {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Gestione checkbox multipli (array) */
.alloggi-servizi .alloggi-servizio-item {
    margin: 0;
    padding: 0;
}

/* Compatibilità con campi number da ACF Free */
.alloggi-card-price,
.alloggi-caratteristica-valore {
    white-space: nowrap;
}

/* Assicura che le immagini da ACF Free (campo text con ID) siano visualizzate correttamente */
.alloggi-galleria-item img,
.alloggi-card-image-wrapper img,
.masonry-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Fix per z-index nelle card con gallery - già definito sopra, non duplicare */

/* Assicura che le card correlati usino gli stessi stili */
.alloggi-cards-correlati {
    margin: 2rem 0;
}

/* Assicura che tutti i contenitori con grid abbiano align-items: stretch */
.alloggi-cards-wrapper.alloggi-cards-grid,
.alloggi-lista-card.alloggi-cards-grid,
.alloggi-cards-correlati.alloggi-cards-grid {
    align-items: stretch;
}

/* Assicura che tutti i contenitori orizzontali abbiano align-items: stretch */
.alloggi-cards-wrapper.alloggi-cards-horizontal,
.alloggi-lista-card.alloggi-cards-horizontal,
.alloggi-cards-correlati.alloggi-cards-horizontal {
    align-items: stretch;
}

/* Gestione errori/messaggi per campi ACF Free non trovati */
.alloggi-error {
    color: #d63638;
    padding: 10px;
    background: #fcf0f1;
    border: 1px solid #d63638;
    border-radius: 4px;
    margin: 10px 0;
}

.alloggi-no-results {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .alloggi-galleria-item {
        width: 300px;
        min-width: 250px;
    }
    
    .alloggi-items-grid {
        grid-template-columns: 1fr;
    }
    
    .alloggi-cards-grid {
        grid-template-columns: 1fr;
    }
    
    /* Mobile: caratteristiche principali - solo se non ci sono classi dinamiche */
    .alloggi-caratteristiche-principali.alloggi-caratteristiche-grid:not([class*="columns-desktop"]):not([class*="columns-mobile"]):not([class*="mobile-scroll"]) {
        grid-template-columns: 1fr !important;
    }
    
    /* Mobile: assicura che le card gallery siano responsive */
    .alloggi-card-image-wrapper .alloggi-card-gallery {
        position: relative;
    }
    
    .alloggi-card-image-wrapper .alloggi-card-gallery .alloggi-galleria-scroll {
        height: auto;
        min-height: 250px;
    }
    
    /* Mobile: caratteristiche principali su due colonne - solo se non ci sono classi dinamiche */
    .alloggi-caratteristiche-principali.alloggi-colonne-5:not([class*="columns-desktop"]):not([class*="columns-mobile"]):not([class*="mobile-scroll"]),
    .alloggi-caratteristiche-principali.alloggi-colonne-4:not([class*="columns-desktop"]):not([class*="columns-mobile"]):not([class*="mobile-scroll"]),
    .alloggi-caratteristiche-principali.alloggi-colonne-3:not([class*="columns-desktop"]):not([class*="columns-mobile"]):not([class*="mobile-scroll"]) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* Mobile piccolo: tutto su una colonna - solo se non ci sono classi dinamiche */
    .alloggi-caratteristiche-principali:not([class*="columns-desktop"]):not([class*="columns-mobile"]):not([class*="mobile-scroll"]) {
        grid-template-columns: 1fr !important;
    }
    
    .alloggi-cards-horizontal .alloggi-card {
        width: 280px;
        max-width: 280px;
    }
}

/* ============================================
   SHORTCODE FILTRABILE
   ============================================ */
.alloggi-filtrabile-container {
    margin: 2rem 0;
}

/* Filtri */
.alloggi-filtrabile-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Posizione filtri: Sopra (default) */
.alloggi-filtrabile-container.alloggi-filters-position-top .alloggi-filtrabile-filters {
    margin-bottom: 2rem;
    flex-direction: row;
}

/* Posizione filtri: Lato Sinistro */
.alloggi-filtrabile-container.alloggi-filters-position-left {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filtrabile-filters {
    flex: 0 0 var(--filters-width, 300px);
    flex-direction: column;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: visible;
    margin-bottom: 0;
    gap: 1rem;
    min-width: 0;
}

.alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filter-group {
    min-width: 100%;
    width: 100%;
}

.alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filtrabile-reset {
    margin-left: 0;
    width: 100%;
}

.alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filter-reset-btn {
    width: 100%;
}

.alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filtrabile-results {
    flex: 1;
    min-width: 0;
}

/* Posizione filtri: Lato Destro */
.alloggi-filtrabile-container.alloggi-filters-position-right {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-direction: row-reverse;
}

.alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filtrabile-filters {
    flex: 0 0 var(--filters-width, 300px);
    flex-direction: column;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: visible;
    margin-bottom: 0;
    gap: 1rem;
    min-width: 0;
}

.alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filter-group {
    min-width: 100%;
    width: 100%;
}

.alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filtrabile-reset {
    margin-left: 0;
    width: 100%;
}

.alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filter-reset-btn {
    width: 100%;
}

.alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filtrabile-results {
    flex: 1;
    min-width: 0;
}

.alloggi-filter-group {
    flex: 1;
    min-width: 200px;
    width: 100%;
    box-sizing: border-box;
}

/* Quando i filtri sono su un lato, i gruppi devono occupare tutta la larghezza */
.alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filter-group,
.alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filter-group {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

.alloggi-filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.alloggi-filter-group select,
.alloggi-filter-group input[type="number"],
.alloggi-filter-group input[type="date"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    box-sizing: border-box;
    max-width: 100%;
}

.alloggi-filter-group input[type="checkbox"] {
    margin-right: 0.5rem;
}

.alloggi-filter-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alloggi-filter-range input {
    flex: 1;
}

.alloggi-filter-range input[type="date"] {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}

.alloggi-filter-range span {
    color: #666;
}

.alloggi-filter-group-date-range {
    min-width: 0;
    width: 100%;
}

.alloggi-filter-group-date-range .alloggi-filter-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
}

.alloggi-filter-group-date-range .alloggi-filter-range input[type="date"] {
    flex: 1;
    min-width: 0;
    width: 0;
    box-sizing: border-box;
}

.alloggi-filter-group-date-range .alloggi-filter-range span {
    flex-shrink: 0;
    white-space: nowrap;
}

.alloggi-filtrabile-reset {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
}

.alloggi-filter-reset-btn {
    padding: 0.5rem 1rem;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.alloggi-filter-reset-btn:hover {
    background: #c82333;
}

/* Risultati */
.alloggi-filtrabile-results {
    position: relative;
}

.alloggi-filtrabile-loading {
    text-align: center;
    padding: 2rem;
    color: #666;
}

.alloggi-filtrabile-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.alloggi-filtrabile-container[data-layout="horizontal"] .alloggi-filtrabile-cards-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 1rem 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
}

.alloggi-filtrabile-container[data-layout="horizontal"] .alloggi-filtrabile-cards-wrapper .alloggi-card {
    flex: 0 0 auto;
    width: 350px;
    max-width: 350px;
    height: auto;
    align-self: stretch;
}

.alloggi-filtrabile-no-results {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

/* Paginazione */
.alloggi-filtrabile-pagination {
    margin-top: 2rem;
    text-align: center;
    padding: 1rem;
}

.alloggi-pagination-btn {
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    background: var(--alloggi-primary-color, #2271b1);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.alloggi-pagination-btn:hover {
    background: #1a5a8f;
}

.alloggi-filtrabile-pagination span {
    margin: 0 1rem;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    /* Su mobile, i filtri vanno sempre sopra */
    .alloggi-filtrabile-container.alloggi-filters-position-left,
    .alloggi-filtrabile-container.alloggi-filters-position-right {
        flex-direction: column;
    }
    
    .alloggi-filtrabile-container.alloggi-filters-position-left .alloggi-filtrabile-filters,
    .alloggi-filtrabile-container.alloggi-filters-position-right .alloggi-filtrabile-filters {
        flex: 1 1 auto;
        position: static;
        max-height: none;
        margin-bottom: 2rem;
    }
    
    .alloggi-filtrabile-filters {
        flex-direction: column;
        gap: 1rem;
    }
    
    .alloggi-filter-group {
        min-width: 100%;
    }
    
    .alloggi-filtrabile-reset {
        margin-left: 0;
        width: 100%;
    }
    
    .alloggi-filter-reset-btn {
        width: 100%;
    }
    
    .alloggi-filtrabile-cards-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SHORTCODE DINAMICO
   ============================================ */
.alloggi-dinamico-container {
    margin: 2rem 0;
}

.alloggi-dinamico-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
}

/* Layout per 1 card */
.alloggi-dinamico-cards-wrapper.alloggi-dynamic-1-card {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
}

/* Layout per 2 card */
.alloggi-dinamico-cards-wrapper.alloggi-dynamic-2-cards {
    grid-template-columns: repeat(2, 1fr);
}

/* Layout per 3 card */
.alloggi-dinamico-cards-wrapper.alloggi-dynamic-3-cards {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive */
@media (max-width: 1024px) {
    .alloggi-dinamico-cards-wrapper.alloggi-dynamic-3-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .alloggi-dinamico-cards-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PREZZI ALLOGGIO
   ============================================ */
.alloggi-prezzi-wrapper {
    margin: 1.5rem 0;
}

/* Layout List */
.alloggi-prezzi-list .alloggi-prezzo-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--alloggi-background-card, #ffffff);
    border-radius: var(--alloggi-border-radius, 8px);
    border-left: 4px solid var(--alloggi-primary-color, #2271b1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.alloggi-prezzi-list .alloggi-prezzo-item:last-child {
    margin-bottom: 0;
}

/* Layout Table */
.alloggi-prezzi-table {
    display: grid;
    gap: 1rem;
}

.alloggi-prezzi-table .alloggi-prezzo-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--alloggi-background-card, #ffffff);
    border-radius: var(--alloggi-border-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Layout Cards */
.alloggi-prezzi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.alloggi-prezzi-cards .alloggi-prezzo-item {
    padding: 1.25rem;
    background: var(--alloggi-background-card, #ffffff);
    border-radius: var(--alloggi-border-radius, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.alloggi-prezzi-cards .alloggi-prezzo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Elementi prezzo */
.alloggi-prezzo-mensile {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.alloggi-prezzo-valore {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--alloggi-primary-color, #2271b1);
}

.alloggi-prezzo-periodo {
    font-size: 1rem;
    color: #666;
    font-weight: normal;
}

.alloggi-prezzo-durata {
    font-size: 0.95rem;
    color: #333;
    margin-top: 0.5rem;
}

.alloggi-prezzo-durata strong {
    color: var(--alloggi-primary-color, #2271b1);
}

.alloggi-prezzo-condizioni {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Cards layout: centra gli elementi */
.alloggi-prezzi-cards .alloggi-prezzo-mensile {
    justify-content: center;
}

.alloggi-prezzi-cards .alloggi-prezzo-valore {
    font-size: 1.75rem;
}

/* Table layout: inline */
.alloggi-prezzi-table .alloggi-prezzo-mensile {
    flex-direction: row;
}

.alloggi-prezzi-table .alloggi-prezzo-durata,
.alloggi-prezzi-table .alloggi-prezzo-condizioni {
    margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .alloggi-prezzi-cards {
        grid-template-columns: 1fr;
    }
    
    .alloggi-prezzi-table .alloggi-prezzo-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ============================================
   PULSANTE "MOSTRA TUTTI" E POPUP
   ============================================ */

/* Pulsante "Mostra tutti" */
.alloggi-show-all-button {
    margin-top: 1rem;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.2s ease;
    border: 1px solid;
}

.alloggi-show-all-button:hover {
    opacity: 0.8;
}

/* Nascondi pulsante su desktop/tablet se non abilitato */
@media (min-width: 769px) {
    .alloggi-show-all-button[data-show-desktop-tablet="0"] {
        display: none !important;
    }
}

/* Mostra pulsante su mobile se abilitato */
@media (max-width: 768px) {
    .alloggi-show-all-button[data-show-mobile="0"] {
        display: none !important;
    }
}

/* Popup Overlay */
.alloggi-services-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.alloggi-services-popup-overlay.active {
    display: block;
    opacity: 1;
}

/* Popup Container */
.alloggi-services-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1000000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.alloggi-services-popup-overlay.active .alloggi-services-popup {
    transform: translate(-50%, -50%) scale(1);
}

/* Popup Header */
.alloggi-services-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.alloggi-services-popup-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.alloggi-services-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.alloggi-services-popup-close:hover {
    background: #f0f0f0;
    color: #333;
}

/* Popup Content */
.alloggi-services-popup-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alloggi-services-popup-content .alloggi-servizio-item,
.alloggi-services-popup-content .alloggi-caratteristica-item {
    width: 100%;
    margin: 0;
}

/* Estendi stili icone al popup content */
.alloggi-services-popup-content .alloggi-servizio-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--alloggi-background-card, #ffffff);
    border-radius: var(--alloggi-border-radius, 0px);
    white-space: nowrap;
}

.alloggi-services-popup-content .alloggi-servizio-item .alloggi-icon,
.alloggi-services-popup-content .alloggi-servizio-item .alloggi-icon-img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.alloggi-services-popup-content .alloggi-servizio-item span {
    display: inline-block;
    white-space: nowrap;
}

.alloggi-services-popup-content .alloggi-caratteristica-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--alloggi-background-card);
    border-radius: var(--alloggi-border-radius);
}

.alloggi-services-popup-content .alloggi-caratteristica-item .alloggi-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alloggi-services-popup-content .alloggi-caratteristica-item .alloggi-icon-img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alloggi-services-popup-content .alloggi-caratteristica-valore {
    display: inline-block;
    white-space: nowrap;
}

/* Mobile specific styles for popup */
@media (max-width: 768px) {
    .alloggi-services-popup {
        padding: 20px;
        max-width: 95%;
        max-height: 85vh;
    }
    
    .alloggi-services-popup-title {
        font-size: 1.25rem;
    }
}