/* ---------------------------------- */
/* 1. STILURI PENTRU MINIATURI ȘI CENTRARE */
/* ---------------------------------- */

/* Containerul care centrează miniaturile pe orizontală */
.gallery-wrapper {
    text-align: center; /* Centrează conținutul inline (mini-container) */
    padding: 20px 0;
}

/* Containerul individual (div) care înconjoară fiecare imagine */
.mini-container {
    display: inline-block; 
    margin: 10px; 
    cursor: pointer; 
}

/* Stilul pentru elementul <img> */
.img-btn {
    width: 150px;
    height: 150px;
    /* Asigură că imaginea umple perfect spațiul de 150x150 */
    object-fit: cover; 
    border: 3px solid transparent; 
    border-radius: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease; 
}

/* Efect vizual la hover */
.mini-container:hover .img-btn {
    border-color: #ff8c42; 
    transform: scale(1.05); 
}

/* ---------------------------------- */
/* 2. STILURI POP-UP (MODAL) - SETĂRI ORIGINALE */
/* ---------------------------------- */

/* Containerul Principal (Backdrop-ul) */
#popup-modal {
    display: none; /* Ascuns implicit */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.95); /* Fundal negru, semi-transparent */
}

/* Conținutul Modalei (Containerul care ține vizualizatorul) */
.modal-continut {
    /* Setările ORIGINALE (90% din spațiul vizibil) */
    width: 90%; 
    max-width: 1000px; 
    height: 90vh; 
    
    /* Centrare perfectă */
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background-color: #000; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
}

/* Stilul pentru butonul de închidere (X) */
.inchide {
    position: absolute;
    top: 10px;
    right: 30px;
    color: #fefefe; 
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001; 
    transition: 0.3s;
}

.inchide:hover,
.inchide:focus {
    color: #ff8c42; 
}

/* Containerul Vizualizatorului Pannellum - CRITIC! */
#pannellum-viewer {
    width: 100%;
    height: 100%; 
}

/* ---------------------------------- */
/* 3. OPTIMIZARE RESPONSIVĂ (MEDIA QUERIES) */
/* ---------------------------------- */

/* Reguli pentru Tablete (Ecrane mai mici de 768px lățime) */
@media screen and (max-width: 768px) {
    .modal-continut {
        width: 95%; 
        height: 85vh; 
    }
    /* NOTĂ: Nu mai este nevoie de padding-bottom în .content */
}

/* Reguli pentru Telefoane Mobile (Ecrane mai mici de 480px lățime) */
@media screen and (max-width: 480px) {
    .modal-continut {
        width: 98%; 
        height: 95vh; 
    }
    /* NOTĂ: Nu mai este nevoie de padding-bottom în .content */

/* Setează culoarea portocalie pentru textul din interiorul containerului galeriei */
.gallery-wrapper p {
    color: #ff8c42; /* Codul hexazecimal pentru portocaliul intens */
    font-weight: bold; /* Opțional: Îngroașă textul pentru a fi mai vizibil */
}