/**
 * NexAuto Core - Module 03: Product Layout
 * @version 2.14 - Scroll fix, layout fixes en PhotoSwipe verbeteringen
 */

/* --- Pop-up Container & Overlay (Hoofdvoertuigpopup) --- */
body.single-product .nexapp-single-auto-page-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000; /* LAAG 1: Voertuig kaart */
    overflow: hidden; /* BELANGRIJK: wrapper mag niet scrollen */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-out, visibility 0s 0.1s;
    background: transparent; /* Zorg dat de achtergrond transparant is voor de overlay */
}

/* Skeleton loading voor lightgallery afbeeldingen */
.nexapp-lg-image-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: nexapp-shimmer 1.5s infinite linear;
    z-index: 2; /* Boven de afbeelding totdat deze is geladen */
    border-radius: 8px; /* Match de border-radius van de container */
}

/* Verberg de afbeelding totdat deze is geladen, om de skeleton goed te laten zien */
.nexapp-lg-item-container img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Zodra de afbeelding de 'is-loaded' class krijgt van JS, toon hem */
.nexapp-lg-img-loaded {
    opacity: 1 !important; /* Forceer zichtbaarheid na laden */
}

.pswp__item {
    background-color: #ffffff;
}

.woocommerce img.pswp__img, .woocommerce-page img.pswp__img {
    max-width: none;
    border-radius: 12px;
}

/* FIX: Backup rule voor afbeeldingen zonder loaded class */
.nexapp-lg-item img.nexapp-lg-img-loaded {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Actieve staat voor wrapper wanneer popup zichtbaar is */
body.single-product.nexauto-popup-active .nexapp-single-auto-page-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease-out, visibility 0s linear 0s; 
    z-index: 10000; /* Zorg dat de popup zichtbaar is */
}

/* SCROLL TERUG NAAR DE JUISTE CONTAINER */
.nexapp-popup-content-scrollable {
    flex-grow: 1;
    overflow-y: auto !important; /* Content container moet scrollen */
    overscroll-behavior: contain; /* voorkom verrassende overscroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling op iOS */
}

/* NIEUW: Wanneer de custom lightgallery actief is, verberg dan de hele voertuigpopup */
body.nexapp-lightgallery-active .nexapp-single-auto-page-wrapper {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: none !important; /* Geen transitie, direct verbergen */
}

/* Nieuwe regel voor wanneer de custom lightgallery actief is */
body.nexapp-lightgallery-active {
    overflow: hidden !important; /* Voorkom scrollen van de achterliggende pagina */
}

#nexapp-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(23, 27, 39, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 9999; /* Onder de popup card maar boven de rest */
}

/* SLUITKNOP HOOFDPUPUP - Z-INDEX AANPASSING */
#nexapp-close-popup-main {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001; /* Boven de voertuig kaart */
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

#nexapp-close-popup-main:hover {
    transform: scale(1.1);
}

/* --- De Pop-up Kaart Zelf --- */
body #nexapp-auto-popup-card.nexapp-auto-popup-card-element {
    position: relative;
    z-index: 10100; /* LAAG 1: Binnen de voertuig wrapper */
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    height: 90vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    margin: 5vh auto;

    transform: translateY(100vh);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.0);
}

/* Actieve staat voor de kaart wanneer de popup open is */
body.single-product.nexauto-popup-active #nexapp-auto-popup-card.nexapp-auto-popup-card-element {
    transform: translateY(0);
}

/* --- Headers, Submenus, etc. --- */
.nexapp-popup-header--streamlined { 
    padding: 15px 25px; 
    border-bottom: 1px solid #eef0f2; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
    gap: 20px; 
}

.nexapp-popup-title-line { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    flex-wrap: wrap; 
}

.nexapp-popup-title { 
    font-size: 22px; 
    margin: 0; 
    line-height: 1.2; 
    color: #1e293b; 
}

.nexapp-popup-kenteken-plate { 
    display: inline-flex;
    border-radius: 5px; 
    overflow: hidden;
    font-family: "Arial Black",Gadget,sans-serif; 
    font-weight: 900; 
    letter-spacing: 2px; 
}

.nexapp-popup-kenteken-eu { 
    background-color: #003399; 
    color: white; 
    padding: 4px 6px; 
    font-size: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
}

.nexapp-popup-kenteken-text { 
    background-color: #f7d71a; 
    color: #000; 
    padding: 4px 10px; 
    font-size: 16px; 
}

.nexapp-popup-submenu { 
    position: sticky; 
    top: 0; 
    background-color: #ffffff; 
    z-index: 10; 
    border-bottom: 1px solid #eef0f2; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    flex-shrink: 0; /* Belangrijk: submenu mag niet krimpen */
}

.nexapp-popup-submenu::-webkit-scrollbar { display: none; }
.nexapp-popup-submenu { -ms-overflow-style: none; scrollbar-width: none; }

.nexapp-popup-submenu ul { 
    display: flex; 
    flex-wrap: nowrap; 
    list-style: none; 
    margin: 0; 
    padding: 0 20px; 
    gap: 10px; 
}

.nexapp-popup-submenu li { flex-shrink: 0; }

.nexapp-popup-submenu a { 
    display: block; 
    padding: 12px 16px; 
    text-decoration: none; 
    color: #475569; 
    font-size: 14px; 
    font-weight: 600; 
    border-bottom: 3px solid transparent; 
    transition: all 0.2s; 
    white-space: nowrap; 
}

.nexapp-popup-submenu a:hover { color: #1e293b; }
.nexapp-popup-submenu a.is-active { color: #2b6cb0; border-bottom-color: #2b6cb0; }

.nexapp-auto-content-wrapper-popup { 
    display: grid; 
    grid-template-columns: 55fr 45fr; 
    gap: 40px; 
    padding: 25px; 
    align-items: flex-start; 
}

.nexapp-auto-media-area { 
    position: -webkit-sticky; 
    position: sticky; 
    top: 25px; 
}

.nexapp-featured-image { 
    position: relative; 
    overflow: hidden; 
    border-radius: 12px; 
    cursor: pointer;
}

.nexapp-featured-img { 
    width: 100%; 
    height: auto; 
    border-radius: 8px; 
    opacity: 0; 
    transition: opacity .5s ease-in-out; 
}

.nexapp-featured-img.is-loaded { opacity: 1; }

/* HOOFDAFBEELDING FIX */
.nexapp-featured-image a {
    display: block;
    line-height: 0;
}

.nexapp-featured-img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    border-radius: 8px;
    background-color: #F8FAFC;
    border: 1px solid #EEF0F2;
}

.nexapp-image-overlay-controls {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.nexapp-photo-count {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: auto;
    cursor: pointer;
}

.nexapp-zoom-icon {
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.2s;
}

.nexapp-zoom-icon:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.nexapp-zoom-icon svg {
    color: white;
    width: 20px;
    height: 20px;
}

.nexapp-gallery-thumbnails {
    display: none;
}

.nexapp-featured-img-skeleton { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); 
    background-size: 200% 100%; 
    animation: nexapp-shimmer 1.5s infinite linear; 
    z-index: 2; 
    border-radius: 12px; 
}

@keyframes nexapp-shimmer{ 
    0%{background-position:200% 0} 
    to{background-position:-200% 0} 
}

.nexapp-auto-main-content-column section { margin-bottom: 40px; }
.nexapp-auto-main-content-column section:last-child { margin-bottom: 0; }
.nexapp-auto-main-content-column h3 { 
    font-size: 20px; 
    margin-bottom: 20px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #eef0f2; 
    color: #1e293b; 
}

.nexapp-specs-cards-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 1rem; 
}

.nexapp-spec-card { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    background: #f8fafc; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid #eef0f2; 
}

.nexapp-spec-card-label { 
    font-size: 13px; 
    color: #64748b; 
}

.nexapp-spec-card-value { 
    font-size: 15px; 
    font-weight: 600; 
    color: #1e293b; 
}

.nexapp-spec-card-content-details { 
    display: flex; 
    flex-direction: column; 
}

.nexapp-auto-options, .nexapp-calculator-wrapper { 
    margin-top: 40px; 
    padding-top: 30px; 
}

.nexapp-options-list { 
    list-style: none; 
    padding: 0; 
    column-count: 2; 
    column-gap: 20px; 
}

.nexapp-options-list li { 
    padding-left: 20px; 
    position: relative; 
    margin-bottom: 8px; 
}

.nexapp-options-list li::before { 
    content: '✓'; 
    color: #22c55e; 
    position: absolute; 
    left: 0; 
}

/* --- HERZIENE STIJLEN VOOR DE CUSTOM LIGHTGALLERY OVERLAY (wit/grijs thema) --- */
.nexapp-custom-lightgallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 20000 !important; /* LAAG 2: Custom gallery overlay */
    display: none; /* FIX: Start verborgen in plaats van flex */
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s ease-out 0.3s;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.nexapp-custom-lightgallery-overlay.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out, visibility 0s linear 0s;
}

/* Sluitknop voor lightgallery */
.nexapp-lg-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(100, 116, 139, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 20001 !important; /* Boven custom gallery overlay */
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* PhotoSwipe lightbox - LAAG 3: Hoogste prioriteit */
.pswp {
    z-index: 30000 !important; /* LAAG 3: PhotoSwipe lightbox bovenaan */
}

.pswp__bg,
.pswp__scroll-wrap,
.pswp__container,
.pswp__ui {
    z-index: 30001 !important;
}

.pswp__button {
    z-index: 30002 !important;
}

.nexapp-lg-close:hover {
    background-color: rgba(71, 85, 105, 0.9);
    transform: scale(1.1);
}

/* WRAPPER VOOR DE SCROLLBARE INHOUD VAN DE GALLERY */
.nexapp-lg-content-wrapper {
    width: 100%;
    max-width: 100vw; /* FIX: volle viewport breedte voor scrollbar op rechts */
    height: 100vh;
    padding: 80px 0 20px 0; /* FIX: geen horizontal padding, alleen vertical */
    box-sizing: border-box;
    overflow-y: auto; /* FIX: scrollbar zit hier op de meest rechter positie */
    -webkit-overflow-scrolling: touch;
}

/* NIEUWE CONTAINER VOOR DE GRID LAYOUT - VERBETERDE 2-3-2-3 LAYOUT */
.nexapp-lg-image-grid-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px; /* FIX: padding hier in plaats van op wrapper */
    box-sizing: border-box;
}

/* Rij containers voor de 2-3-2-3 layout */
.nexapp-lg-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

/* Items binnen elke rij */
.nexapp-lg-row .nexapp-lg-item-container {
    flex: 1;
    min-height: 200px;
    max-height: 580px; /* FIX: verhoogd van 300px naar 580px */
}

/* Specifieke rij layouts - 2 kolommen */
.nexapp-lg-row.row-2 .nexapp-lg-item-container {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}

/* Specifieke rij layouts - 3 kolommen */
.nexapp-lg-row.row-3 .nexapp-lg-item-container {
    flex: 1 1 calc(33.333% - 0.667rem);
    max-width: calc(33.333% - 0.667rem);
}

/* Specifieke rij layouts - 1 kolom (voor resterende afbeeldingen) */
.nexapp-lg-row.row-1 .nexapp-lg-item-container {
    flex: 1 1 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* WRAPPER VOOR ELK AFBEELDINGSITEM */
.nexapp-lg-item-container {
    position: relative;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    background: #f8f9fa;
}

.nexapp-lg-item-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Link styling binnen lightgallery */
.nexapp-lg-item {
    display: inline; /* Terug naar block maar met andere positioning */
    position: relative;
    width: 100%; /* FIX: expliciet width toevoegen */
    height: 0;
    padding-bottom: 66.6667%; /* 3:2 aspect ratio */
    overflow: hidden;
    border-radius: 8px;
}

.nexapp-lg-item div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
}

.nexapp-lg-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Cover voor consistente grid layout */
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    opacity: 1; /* FIX: Expliciet opacity op 1 */
    visibility: visible; /* FIX: Expliciet visibility */
}

.nexapp-lg-item-container:hover .nexapp-lg-item img {
    transform: scale(1.05); /* Subtiele zoom effect bij hover */
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .nexapp-auto-content-wrapper-popup {
        grid-template-columns: 1fr;
    }
    .nexapp-auto-media-area {
        position: static;
        top: auto;
    }
    /* Lightgallery aanpassingen */
    .nexapp-lg-content-wrapper {
        padding: 70px 0 15px 0; /* FIX: geen horizontal padding */
    }
    .nexapp-lg-image-grid-container {
        gap: 0.8rem;
        padding: 0 15px; /* FIX: padding hier */
    }
    .nexapp-lg-row {
        gap: 0.8rem;
    }
    .nexapp-lg-row.row-2 .nexapp-lg-item-container {
        flex: 1 1 calc(50% - 0.4rem);
        max-width: calc(50% - 0.4rem);
    }
    .nexapp-lg-row.row-3 .nexapp-lg-item-container {
        flex: 1 1 calc(33.333% - 0.533rem);
        max-width: calc(33.333% - 0.533rem);
    }
}

@media (max-width: 768px) {
    body.single-product .nexapp-single-auto-page-wrapper {
        align-items: flex-end;
    }
    body #nexapp-auto-popup-card.nexapp-auto-popup-card-element {
        width: 100%;
        min-height: 90vh;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }
    #nexapp-close-popup-main {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    .nexapp-popup-title-line { 
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    .nexapp-popup-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px; 
    }
    #nexapp-contact-trigger-area {
        display: none;
    }
    .nexapp-popup-submenu {
        padding-bottom: 26px;
    }

    /* CUSTOM LIGHTGALLERY OVERLAY - RESPONSIVE */
    .nexapp-custom-lightgallery-overlay {
        border-radius: 0;
    }
    .nexapp-lg-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    .nexapp-lg-content-wrapper {
        padding: 60px 0 10px 0; /* FIX: geen horizontal padding */
    }
    .nexapp-lg-image-grid-container {
        gap: 0.6rem;
        padding: 0 10px; /* FIX: padding hier */
    }
    .nexapp-lg-row {
        gap: 0.6rem;
    }
    /* Op mobiel 2 kolommen behouden, maar kleinere gap */
    .nexapp-lg-row.row-2 .nexapp-lg-item-container {
        flex: 1 1 calc(50% - 0.3rem);
        max-width: calc(100% - 0.3rem);
    }
    .nexapp-lg-row.row-3 .nexapp-lg-item-container {
        flex: 1 1 calc(50% - 0.3rem);
        max-width: calc(100% - 0.3rem);
    }
    /* Alleen de eerste 2 items van een 3-kolom rij tonen op mobiel */
    .nexapp-lg-row.row-3 .nexapp-lg-item-container:nth-child(3) {
        display: none;
    }
    /* Of alternatief: alles in 1 kolom op zeer kleine schermen */
}

@media (max-width: 480px) {
    /* Op zeer kleine schermen alles in 1 kolom */
    .nexapp-lg-row {
        flex-direction: column;
        align-items: center;
    }
    .nexapp-lg-row .nexapp-lg-item-container {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
    .nexapp-lg-row.row-3 .nexapp-lg-item-container:nth-child(3) {
        display: block; /* Toon weer alle afbeeldingen */
    }
}