/* ========================================
   MODELS PAGE - MOBILE SLIDE BEHAVIOR
   ======================================== */

/* Mobile only styles - max-width: 991px (Bootstrap lg breakpoint) */
@media (max-width: 991px) {

    /* .model-info-header .btn-add-to-cart span{
        display: none;
    } */

    /* Top-nav fixed in mobile per evitare conflitti con sticky */
    .top-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background: #fff !important;
    }
    
    /* Aggiungi padding al body per compensare il top-nav fixed */
    body {
        padding-top: 62px !important;
    }
    
    /* Model info header sticky sotto il top-nav */
    .model-info-header.sticky-top {
        position: sticky !important;
        top: 62px !important; /* Altezza del top-nav */
        z-index: 100 !important;
        background: #fff !important;
    }
    
    /* Bottone "Altre Configurazioni" in mobile */
    #mobileOtherConfigsBtn {
        white-space: nowrap;
        font-size: 14px;
        padding: 16px;
    }
    
    /* Nascondi il bottone share in mobile */
    .share-dropdown-wrapper {
        display: none;
    }
    
    /* Container per le slide */
    .models-mobile-container {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    /* Wrapper per le slide */
    .models-slides-wrapper {
        display: flex;
        transition: transform 0.3s ease-in-out;
        width: 300%; /* 3 colonne = 300% */
    }
    
    /* Ogni slide occupa 1/3 dello spazio */
    .models-slide {
        width: 33.333%;
        flex-shrink: 0;
        padding: 0 15px;
    }
    
    /* Slide 1 - Filtri */
    .models-slide-filters {
        position: relative;
    }
    
    /* Bottoni mobile nella slide filtri */
    .mobile-filter-actions {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    
    .mobile-filter-actions .btn {
        flex: 1;
    }
    
    /* Bottone chiusura (X) in alto a destra */
    .mobile-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        padding: 5px;
        color: #333;
        z-index: 10;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
    }
    
    .mobile-close-btn:hover {
        color: #000;
    }
    
    /* Slide 2 - Lista modelli */
    .models-slide-list {
        /* Stili specifici se necessari */
    }
    
    /* Slide 3 - Dettaglio (colonna 3 rimane nella sua posizione) */
    .models-slide-detail {
        /* La terza colonna rimane visibile di default */
    }
    
    /* Stati delle slide */
    .models-slides-wrapper.show-filters {
        transform: translateX(0);
    }
    
    .models-slides-wrapper.show-list {
        transform: translateX(-33.333%);
    }
    
    .models-slides-wrapper.show-detail {
        transform: translateX(-66.666%);
    }
    
    /* Nascondi le colonne originali su mobile */
    .col-lg-3:has(.filterCard),
    .col-lg-3:has(.modelsCard) {
        display: none;
    }
    
    /* Overlay per evitare conflitti con il menu hamburger */
    .models-mobile-overlay {
        position: fixed;
        top: 62px; /* Parte sotto il top-nav */
        left: 0;
        width: 100%;
        height: calc(100vh - 62px);
        background: rgba(0, 0, 0, 0.5);
        z-index: 900; /* Sotto il menu hamburger (999) */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    .models-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Panel mobile per filtri e lista */
    .models-mobile-panel {
        position: fixed;
        top: 62px; /* Parte sotto il top-nav */
        left: -100%;
        width: 85%;
        max-width: 400px;
        height: calc(100vh - 62px);
        background: #fff;
        z-index: 950; /* Sotto il menu hamburger (999) */
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .models-mobile-panel.active {
        left: 0;
    }
    
    /* Contenuto del panel */
    .models-mobile-panel-content {
        padding: 20px;
        padding-top: 60px; /* Spazio per il bottone X */
    }
    
    /* Bottone per aprire i filtri (visibile nella vista dettaglio) */
    .mobile-open-filters-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--activeColor);
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        z-index: 900; /* Sotto il menu hamburger (999) */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        transition: background 0.2s, transform 0.2s;
    }
    
    .mobile-open-filters-btn:hover {
        background: var(----activeColorHover);
        transform: scale(1.05);
    }
    
    .mobile-open-filters-btn:active {
        transform: scale(0.95);
    }
    
    /* Sticky top adjustments per mobile - disabilita sticky solo per filtri e modelli */
    .filterCard.sticky-top,
    .modelsCard.sticky-top {
        position: relative !important;
    }
    
    /* Animazioni */
    @keyframes slideInFromLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutToLeft {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(-100%);
            opacity: 0;
        }
    }
    
    /* Classe per animare l'ingresso */
    .slide-in {
        animation: slideInFromLeft 0.3s ease-out;
    }
    
    /* Classe per animare l'uscita */
    .slide-out {
        animation: slideOutToLeft 0.3s ease-out;
    }
}

@media (min-width: 992px) {
    .mobile-filter-actions,
    .mobile-close-btn,
    .mobile-open-filters-btn,
    .models-mobile-overlay,
    .models-mobile-panel {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Allow buttons to be functional when panel is active (for resize scenarios) */
    .models-mobile-panel.active .mobile-filter-actions,
    .models-mobile-panel.active .mobile-close-btn {
        pointer-events: auto;
    }

    .models-mobile-overlay.active,
    .models-mobile-panel.active {
        pointer-events: auto;
    }
}