/**
 * FlipMe – Frontend-Styles
 *
 * Die Werte des gewählten Style-Sets setzt das Modul als CSS-Variablen im style-Attribut
 * von .flipme-mod (--fmm-cover, --fmm-page, --fmm-ctrl-bg, --fmm-width, --fmm-height …).
 *
 * @package   JoomION\Module\Flipme
 * @copyright 2026 JoomION
 * @license   GNU General Public License version 2 or later
 */

.flipme-mod {
    display: block;
    max-width: 100%;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.flipme-mod .fmm-title {
    background: var(--fmm-cover, #4a90d9);
    color: var(--fmm-cover-text, #fff);
    width: var(--fmm-width, 100%);
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding: .45rem 1rem;
    font-size: calc(var(--fmm-fs, 14px) + 2px);
    font-weight: 700;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Bühne: zentriert. Breite/Höhe aus den Einstellungen – ohne Höhe automatisch an die
   Bild-/PDF-Proportion (per JS gesetzt). Bilder werden per object-fit:contain eingepasst. */
.flipme-mod .fmm-stage {
    width: var(--fmm-width, 100%);
    height: var(--fmm-height, auto);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, var(--fmm-bg1, #e8f4f8), var(--fmm-bg2, #d4e8f0));
    border-radius: var(--fmm-radius, 6px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Platzhalter-Proportion, bis das Skript die echte Bild-/PDF-Proportion setzt */
.flipme-mod.fmm--auto-h .fmm-stage {
    aspect-ratio: 3 / 2;
}

/* ── Vollbild: Modul füllt den Bildschirm, Bühne füllt das Modul ── */
.flipme-mod:fullscreen {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-width: none;
    background: #000;
}

.flipme-mod:fullscreen .fmm-title {
    width: 100%;
    max-width: none;
    border-radius: 0;
    flex: 0 0 auto;
}

.flipme-mod:fullscreen .fmm-stage {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    border-radius: 0;
}

.flipme-mod:fullscreen .fmm-ctrl {
    flex: 0 0 auto;
}

/* StPageFlip-Container füllt die Bühne */
.flipme-mod .fmm-flipbook {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* StPageFlip 2.0.7 zeichnet harte Seiten während der Animation mit top:0 statt mit dem vertikalen
   Versatz des Buchs – die Seite springt sonst nach oben und fällt danach zurück. Der Versatz kommt
   per JS aus pageFlip.getBoundsRect().top (identisch zum Wert, den StPageFlip im Ruhezustand setzt).
   Betrifft nicht nur Seiten mit Klasse --hard: blättert eine harte Seite, zeichnet StPageFlip auch die
   Nachbar-/Unterseite hart (draw('hard'), Klasse bleibt --soft). Erkennungsmerkmal jeder hart
   gezeichneten Seite ist rotateY() im Inline-Style. Die Schatten harter Seiten (hardShadow,
   hardInnerShadow) bekommen von StPageFlip gar kein top und stehen sonst ebenfalls oben. */
.flipme-mod .fmm-flipbook .stf__item.--hard,
.flipme-mod .fmm-flipbook .stf__item[style*="rotateY"],
.flipme-mod .fmm-flipbook .stf__hardShadow,
.flipme-mod .fmm-flipbook .stf__hardInnerShadow {
    top: var(--fmm-hard-top, 0px) !important;
}

/* Einzelne Seiten */
.flipme-mod .fmm-pg {
    background: var(--fmm-page, #fff);
    overflow: hidden;
}

.flipme-mod .fmm-pg img,
.flipme-mod .fmm-pg canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* PDF-Dateiansicht */
.flipme-mod .fmm-pdf-viewer {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.flipme-mod .fmm-pdf-viewer iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: inherit;
}

/* Loader */
.flipme-mod .fmm-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: inherit;
    z-index: 20;
    gap: .65rem;
    border-radius: inherit;
}

.flipme-mod .fmm-spin {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(0, 0, 0, .12);
    border-top-color: var(--fmm-ctrl-bg, #4a90d9);
    border-radius: 50%;
    animation: fmmSpin .7s linear infinite;
}

@keyframes fmmSpin {
    to {
        transform: rotate(360deg);
    }
}

.flipme-mod .fmm-progress-txt {
    font-size: .9rem;
    color: #333;
}

/* Fehler */
.flipme-mod .fmm-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a93226;
    font-size: .95rem;
    background: inherit;
    border-radius: inherit;
}

/* Steuerleiste */
.flipme-mod .fmm-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .45rem .5rem;
    background: rgba(0, 0, 0, .06);
    border-radius: 0 0 6px 6px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.flipme-mod .fmm-btn {
    background: var(--fmm-ctrl-bg, #4a90d9);
    color: var(--fmm-ctrl-text, #fff);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.flipme-mod .fmm-btn:hover:not(:disabled) {
    background: var(--fmm-ctrl-hover, #357abd);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
}

.flipme-mod .fmm-btn:focus-visible {
    outline: 3px solid var(--fmm-ctrl-hover, #357abd);
    outline-offset: 2px;
}

.flipme-mod .fmm-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.flipme-mod .fmm-nav {
    font-size: var(--fmm-nav-fs, 20px);
    padding: .3rem .6rem;
}

.flipme-mod .fmm-fs {
    font-size: .95rem;
    padding: .32rem .55rem;
}

.flipme-mod .fmm-info {
    font-size: var(--fmm-info-fs, 13px);
    color: var(--fmm-info-color, #555);
    min-width: 62px;
    text-align: center;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .flipme-mod .fmm-btn {
        transition: none;
    }

    .flipme-mod .fmm-btn:hover:not(:disabled) {
        transform: none;
    }
}