/* ============================================================
   1. VARIABLE ȘI CONFIGURARE TEME
   ============================================================ */
:root {
    --bg-color: #;
    --card-bg: #FFF0BE;
    --primary-color: #C44A3A; 
    --primary-dark: #C44A3A;
    --text-color: #C44A3A;
    --text-muted: rgba(15, 189, 168, 0.78);
    --border-color: #dddddd;
    --bar-bg: #FFF0BE;
}

body.dark-theme {
    --bg-color: #050608;
    --card-bg: #0f1115;
    --primary-color: #C44A3A; 
    --primary-dark: #9B0F06;
    --text-color: #C44A3A;
    --text-muted: rgba(241, 244, 246, 0.78);
    --border-color: #2a3038;
    --bar-bg: #2d333b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    /* Folosim dvh pentru a măsura exact spațiul vizibil pe iPhone */
    height: 100dvh;
    width: 100vw;
    
    margin: 0;
    padding: 0;
    overflow: hidden;

    /* FIX PENTRU IPHONE (PWA feel): 
       Împiedică pagina să se miște sus-jos când tragi cu degetul (efectul de cauciuc) */
    position: fixed; 
    touch-action: none; 
}

/* ============================================================
   2. PAGINA ȘI OVERLAY (FUNDALUL DIN SPATE)
   ============================================================ */
.tutorial-page {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fundalul paginii care se vede pe lângă chenar */
    background-color: var(--card-bg); /* Să ia culoarea de fundal din temă */
    padding: 20px;
    transition: background-color 0.35s ease;
}

body.dark-theme .tutorial-page {
    background: #050608;
}

.tutorial-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   3. CARDUL DE TUTORIAL (CHENARUL CENTRAT)
   ============================================================ */
.tutorial-card {
    /* MODIFICARE: Dimensiuni reduse pentru a fi un card, nu tot ecranul */
    width: 92%;
    max-width: 380px; 
    height: auto;
    max-height: 85vh; /* Nu depășește 85% din înălțime */
    min-height: 580px;
    
    background: var(--card-bg);
    border-radius: 32px;
    /* Umbră adâncă pentru efect de plutire */
    border: 3px solid #C44A3A; 
    
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 25px;
    overflow: hidden;
    transition: background-color 0.35s ease;
}

body.dark-theme .tutorial-card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

/* BUTOANE POZITIONATE SUS */
.close-tutorial {
    position: absolute;
    top: 15px;
    left: 15px;
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 100;
}

.page-theme-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    background: var(--bar-bg);
    color: var(--primary-color);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ============================================================
   4. SLIDE-URI ȘI CONȚINUT
   ============================================================ */
.slides-window {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 35px 0 10px; /* Spațiu pentru butoanele de sus */
}

.slides-container {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slide-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.slide h1, .slide h2 {
    color: var(--primary-color) !important;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.slide p {
    color: var(--primary-color);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 260px;
}

/* IMAGINI ȘI MASCOTĂ */
.tut-screenshot {
    width: auto !important; 
    max-width: 100% !important; 
    height: auto !important;
    max-height: 200px !important;
    border: 4px solid #C44A3A !important;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: block;
    margin: 10px auto;
    object-fit: contain;
}

.qr {
    width: auto !important; 
    max-width: 100% !important; 
    height: auto !important;
    max-height: 200px !important;
    display: block;
    margin: 10px auto;
    object-fit: contain;
}

.panda-img {
    width: 110px;
    height: auto;
    filter: brightness(1.32) saturate(1.08);
}

/* ============================================================
   5. BUTOANE ȘI NAVIGARE
   ============================================================ */
.btn-start {
    background-color: var(--primary-color) !important;
    color: var(--card-bg) !important;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(196, 74, 58, 0.3);
    transition: 0.2s;
}

.nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
}

.dots {
    display: flex !important;
    flex-direction: row !important; 
    gap: 8px;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bar-bg);
    transition: 0.3s;
}

.dot.active {
    width: 18px;
    border-radius: 10px;
    background: var(--primary-color);
}

.nav-btn {
    background: var(--primary-color);
    color: #F2D479;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:disabled { opacity: 0.3; }

/* ============================================================
   6. ANIMAȚII ȘI MEDIA QUERIES
   ============================================================ */
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.tut-screenshot:hover, .panda-img:hover {
    animation: pulse-soft 2s infinite ease-in-out;
}

@media screen and (max-width: 480px) {
    .tutorial-card {
        width: 90%; /* Cardul devine mic și centrat pe telefon */
        max-height: 80vh;
        min-height: 520px;
        padding: 20px 15px;
    }

    .slide h1 { font-size: 1.5rem; }
    .slide p { font-size: 0.85rem; }
    .tut-screenshot { max-height: 180px !important; }
    .panda-img { width: 90px; }
}

.hidden { display: none !important; }