/* ============================================================
   Fabulia Story Player — CSS
   Aesthetic: warm storybook, soft & cozy pentru copii mici
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Bubblegum+Sans&display=swap');

/* ── Root container ──────────────────────────────────────── */
.fabulia-player-root {
    --fab-warm:       #fff8f0;
    --fab-cream:      #fdf3e3;
    --fab-sand:       #e8d5b0;
    --fab-brown:      #8b6340;
    --fab-brown-dark: #5c3d1e;
    --fab-accent:     #f4845f;
    --fab-accent2:    #fbbf60;
    --fab-text:       #3d2b1f;
    --fab-text-soft:  #7a5c45;
    --fab-radius:     20px;
    --fab-shadow:     0 8px 32px rgba(91,57,28,0.13);
    --fab-btn-size:   52px;
    --fab-delay:      0.18s;

    font-family: 'Nunito', sans-serif;
    max-width: 680px;
    margin: 0 auto 2rem;
    position: relative;
}

/* ── Desktop: fullscreen height ──────────────────────────── */
@media (min-width: 769px) {
    .fabulia-player-root {
        max-width: 100%;
        margin: 0;
        /* Ocupam tot viewport-ul mai putin zona de jos (dots+text ~90px) */
        display: flex;
        flex-direction: column;
    }

    .fabulia-player {
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
        background: var(--fab-warm);
        overflow: visible;
    }

    /* Stage: imaginea sa fie limitata la viewport minus zona de jos */
    .fabulia-stage {
        overflow: visible;
        min-height: unset;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Imaginea: max-height bazat pe viewport, sa incapa complet */
    .fabulia-slide-img {
        width: auto;
        height: auto;
        max-width: 100%;
        /* Cu descriere: scadem dots + counter + text + margini */
        max-height: calc(100vh - 160px);
        object-fit: contain;
    }

    /* Fara descriere: imaginea poate fi mai mare */
    .fabulia-player.fabulia-no-text .fabulia-slide-img {
        max-height: calc(100vh - 80px);
    }

    .fabulia-dots {
        padding: 8px 0 2px;
    }

    .fabulia-counter {
        padding-bottom: 4px;
    }

    .fabulia-description {
        border-top: none;
        padding: 4px 24px 10px;
        min-height: unset;
    }
}

/* ── Loading state ───────────────────────────────────────── */
.fabulia-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: var(--fab-cream);
    border-radius: var(--fab-radius);
}

.fabulia-loading-dots {
    display: flex;
    gap: 8px;
}

.fabulia-loading-dots span {
    width: 10px;
    height: 10px;
    background: var(--fab-accent);
    border-radius: 50%;
    animation: fabDot 1.2s ease-in-out infinite both;
}
.fabulia-loading-dots span:nth-child(2) { animation-delay: .2s; }
.fabulia-loading-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes fabDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* ── Error state ─────────────────────────────────────────── */
.fabulia-error {
    padding: 1rem;
    background: #fff0f0;
    border: 1px solid #f8c5c5;
    border-radius: 10px;
    color: #c0392b;
    font-size: .9rem;
    text-align: center;
}

/* ── Wrapper principal ───────────────────────────────────── */
.fabulia-player {
    background: var(--fab-cream);
    border-radius: var(--fab-radius);
    box-shadow: var(--fab-shadow);
    overflow: hidden;
    position: relative;
}

/* ── Stage (imaginea) ────────────────────────────────────── */
.fabulia-stage {
    position: relative;
    width: 100%;
    background: var(--fab-warm);
    overflow: visible;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fabulia-slide-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: relative;
    z-index: 1;
}

.fabulia-slide-img.fabulia-fade-out {
    opacity: 0;
    transform: scale(0.98);
}

.fabulia-slide-img.fabulia-fade-in {
    animation: fabFadeIn 0.38s ease forwards;
}

@keyframes fabFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1);    }
}

/* ── Butoane navigare ────────────────────────────────────── */
.fabulia-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width:  var(--fab-btn-size);
    height: var(--fab-btn-size);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    background: rgba(255,248,240,0.88);
    backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(91,57,28,0.18);
    transition: background var(--fab-delay), transform var(--fab-delay), opacity var(--fab-delay), box-shadow var(--fab-delay);

    /* Start invizibil — apar cu delay ──────────────────────── */
    opacity: 0;
    pointer-events: none;
}

/* Trigger apariție */
.fabulia-nav.fabulia-nav-visible {
    opacity: 1;
    pointer-events: auto;
    animation: fabBtnReveal 0.4s ease forwards;
}

@keyframes fabBtnReveal {
    from { opacity: 0; transform: translateY(-50%) scale(0.7); }
    to   { opacity: 1; transform: translateY(-50%) scale(1);   }
}

.fabulia-nav:hover:not(:disabled) {
    background: rgba(255,248,240,1);
    box-shadow: 0 5px 18px rgba(91,57,28,0.26);
    transform: translateY(-50%) scale(1.07);
}

.fabulia-nav:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}

.fabulia-nav:disabled {
    opacity: 0.28 !important;
    cursor: default;
    pointer-events: none;
}

.fabulia-nav-prev { left: 12px; }
.fabulia-nav-next { right: 12px; }

.fabulia-nav svg {
    width: 22px;
    height: 22px;
    stroke: var(--fab-brown-dark);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
}

/* ── Indicator pagini ────────────────────────────────────── */
.fabulia-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 10px 0 2px;
}

.fabulia-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fab-sand);
    transition: background 0.3s, transform 0.3s;
    cursor: default;
}

.fabulia-dot.active {
    background: var(--fab-accent);
    transform: scale(1.35);
}

/* ── Text (descriere) ────────────────────────────────────── */
.fabulia-description {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--fab-sand);
    background: var(--fab-cream);
    min-height: 48px;
    transition: opacity 0.3s ease;
}

/* Ascunde zona de text când nu există descriere */
.fabulia-description:empty,
.fabulia-description.fabulia-no-desc {
    display: none;
}

.fabulia-description.fabulia-text-fade {
    opacity: 0;
}

.fabulia-description p,
.fabulia-description div {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.82rem, 2vw, 0.95rem);
    color: var(--fab-text-soft);
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
    text-align: center;
}

.fabulia-description b,
.fabulia-description strong {
    color: var(--fab-brown-dark);
    font-weight: 700;
}

/* ── Counter pagini ──────────────────────────────────────── */
.fabulia-counter {
    font-family: 'Bubblegum Sans', cursive;
    font-size: 0.78rem;
    color: var(--fab-brown);
    text-align: center;
    padding-bottom: 12px;
    opacity: 0.7;
    letter-spacing: 0.04em;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
    .fabulia-player-root {
        margin: 0 0 1.5rem;
    }
    .fabulia-nav {
        --fab-btn-size: 42px;
    }
    .fabulia-nav svg {
        width: 18px;
        height: 18px;
    }
    .fabulia-nav-prev { left: 8px; }
    .fabulia-nav-next { right: 8px; }
    .fabulia-description {
        padding: 12px 16px 16px;
    }
}