/* 360_viewer.css - Eigen Viewer (zonder Pannellum) */

/* ========================================================= */
/* 1. VIEWPORT (De zichtbare container van de viewer) */
/* ========================================================= */

.custom-360-viewer-container {
    width: 100%;
    height: 400px; /* Bepaal hier de vaste hoogte van de viewer */
    position: relative;
    overflow: hidden; /* Essentieel om alles buiten de container te verbergen */
    margin: 20px 0;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: grab; /* Cursor toont aan dat er gesleept kan worden */
    user-select: none; /* Voorkomt selectie van tekst/afbeelding tijdens slepen */
    background-color: #000000; /* AANGEPAST NAAR ZWART */
    touch-action: none; /* Voorkomt standaard browser-scrollgedrag op touch-apparaten */
}

.custom-360-viewer-container.active {
    cursor: grabbing; /* Cursor verandert tijdens het slepen */
}

/* ========================================================= */
/* 2. IMAGE WRAPPER (De container die de afbeeldingen bevat en beweegt/schaalt) */
/* ========================================================= */

.viewer-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex; /* Zorgt ervoor dat img1 en img2 naast elkaar staan */
    transform-origin: 0 0; /* Belangrijk voor schaalverandering */
    will-change: transform; /* Hint aan de browser voor prestatieverbetering */
    /* !!! BELANGRIJK: GEEN CSS-TRANSITIE HIER VOOR PANNING !!! 
       Transities worden in JavaScript toegepast waar nodig (bijv. voor zoomknoppen) */
}

/* ========================================================= */
/* 3. IMAGES (De dubbele afbeeldingen binnen de wrapper) */
/* ========================================================= */

.viewer-image-wrapper img.viewer-image {
    width: auto; /* Breedte wordt door JS ingesteld */
    height: auto; /* Hoogte wordt proportioneel door de browser berekend */
    object-fit: contain; /* Zorgt dat de afbeelding past zonder te croppen, hoewel JS de afmetingen al regelt */
    position: absolute;
    top: 0; /* Zorgt ervoor dat de afbeeldingen bovenaan hun absolute positie beginnen */
    left: 0; /* Wordt door JS overschreven voor img2 */
    user-select: none; /* Voorkomt selectie van de afbeelding */
    pointer-events: none; /* Negeer muis-events op de afbeeldingen zelf, laat de wrapper het afhandelen */
}

/* ========================================================= */
/* 4. CONTROLS (Knoppen voor Zoom, Fullscreen en Autospin) */
/* ========================================================= */

.viewer-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10; /* Zorg dat knoppen boven de afbeelding liggen */
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond */
    padding: 5px;
    border-radius: 5px;
}

/* NIEUW: Groep voor Play/Stop knoppen */
.autospin-controls {
    display: flex;
    gap: 8px;
    margin-right: 10px; /* Ruimte tussen autospin en andere knoppen */
}

.viewer-button {
    background: #fff;
    border: none;
    border-radius: 3px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    color: #333;
    transition: background-color 0.2s, opacity 0.2s; /* Vloeiende overgang bij hover */
}

.viewer-button:hover:not(:disabled) {
    background: #e0e0e0;
}

.viewer-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* NIEUW: Stijl voor de actieve knop (Play of Stop) */
.viewer-button.is-active {
    background: #007bff; /* Een blauwe kleur voor actief */
    color: #fff;
}


/* ========================================================= */
/* 5. FULLSCREEN STIJLEN */
/* ========================================================= */

/* Deze stijlen zorgen ervoor dat de viewer het hele scherm vult in fullscreen modus */
/* Dit is browser-specifieke CSS voor fullscreen API */
.custom-360-viewer-container:-webkit-full-screen,
.custom-360-viewer-container:-moz-full-screen,
.custom-360-viewer-container:-ms-fullscreen,
.custom-360-viewer-container:fullscreen {
    width: 100vw; /* Volledige breedte van de viewport */
    height: 100vh; /* Volledige hoogte van de viewport */
    margin: 0;
    border: none;
    box-shadow: none;
    background-color: black; /* Achtergrond bij fullscreen (indien de afbeelding niet 100% vult) */
    display: flex; /* Gebruik flexbox om de inhoud te centreren indien nodig */
    align-items: center;
    justify-content: center;
    flex-direction: column; 
}

/* Pas de positie van de knoppen aan in fullscreen modus */
.custom-360-viewer-container.is-fullscreen .viewer-controls {
    bottom: 20px;
    right: 20px;
}