* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { height: 100%; width: 100%; background-color: #ffffff; font-family: 'Inter', sans-serif; color: #1d1d1f; overflow: hidden; }

.main-screen { position: relative; height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* WATERMARK */
.watermark-bg {
    position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; max-width: 800px; padding: 0 40px;
    font-weight: 800; font-size: clamp(1.2rem, 4vw, 2.2rem);
    color: #000; opacity: 0.12; text-align: center; line-height: 1.3;
    text-transform: uppercase; pointer-events: none; z-index: 9;
}

/* HEADER */
.header-section { position: relative; z-index: 10; text-align: center; width: 100%; padding-top: 50px; }
.tagline { font-size: 0.7rem; letter-spacing: 5px; color: #007aff; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 6vw, 2.8rem); margin-bottom: 5px; }
.subtitle { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #86868b; font-style: italic; }

/* BUTON GALERIE */
.mid-button-area { margin-top: 25px; display: flex; justify-content: center; width: 100%; }
.gallery-btn { display: flex; align-items: center; padding: 10px 25px; border-radius: 50px; text-decoration: none; border: 1px solid #e5e5e7; background: white; transition: all 0.3s; }
.gallery-btn.active { border-color: rgba(0, 122, 255, 0.3); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.gallery-btn.inactive { background-color: #f5f5f7; cursor: not-allowed; }
.btn-text { display: flex; flex-direction: column; text-align: left; }
.main-txt { font-size: 0.75rem; font-weight: 700; }
.sub-txt { font-size: 0.6rem; opacity: 0.8; }
.gallery-btn.active .main-txt, .gallery-btn.active .sub-txt { color: #007aff; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 12px; }
.status-dot.blue { background-color: #007aff; box-shadow: 0 0 8px #007aff; }
.status-dot.gray { background-color: #d2d2d7; }

/* PROGRESS BAR */
#upload-status-container {
    position: relative; z-index: 15; width: 100%; max-width: 400px; 
    margin-top: 30px; display: none; text-align: center;
}
.progress-wrapper { width: 100%; height: 6px; background: #f2f2f7; border-radius: 10px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background: #007aff; transition: width 0.3s; }
#status-text { font-size: 0.7rem; font-weight: 600; color: #86868b; margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }

/* POZA JOS */
.bottom-anchor { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; line-height: 0; z-index: 5; }
.hero-img { width: 100%; height: auto; display: block; transition: opacity 0.3s; }
.hotspot { position: absolute; top: 41.5%; left: 72.5%; width: 21%; height: 11%; cursor: pointer; z-index: 30; background: rgba(0,0,0,0); }
#file-upload { display: none; }

@media (max-width: 600px) {
 .bottom-anchor { max-width: 100vw; }
 .watermark-bg {
    top: 45%;
    font-size: 30px;
    z-index: 9;
 }
}

/* --- PROTECȚIE STRICTĂ PENTRU MODUL LANDSCAPE (DOAR PE TOUCH/MOBILE) --- */
@media (pointer: coarse) and (orientation: landscape) {
    .main-screen {
        display: none !important;
    }
    
    body::before {
        content: "Vă rugăm să rotiți telefonul în modul portret pentru a utiliza aplicația.";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff;
        color: #1d1d1f;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-weight: 800;
        font-size: 1.2rem;
        padding: 40px;
        z-index: 9999;
    }
}