/* Shared styles of the Superboom flipbook (see flipbook.js). */

.fb [hidden] { display: none !important; }

/* The flipbook fits itself inside this box, keeping the page ratio. */
.fb-stage {
    position: relative; width: 100%;
    height: var(--fb-height, calc(100vh - 146px)); height: var(--fb-height, calc(100dvh - 146px)); min-height: 420px;
    display: flex; align-items: center; justify-content: center;
    /* the flipbook's invisible wrapper is taller than this box: clip it so it can't sit on top of the buttons */
    overflow: hidden;
}
.fb-book { width: 100%; height: 100%; transition: transform 0.6s ease; }
.fb .page { background: #fff; overflow: hidden; }
.fb .page img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fb .page-loading { background: #f1eaee; }

.fb-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; margin: 0; color: #4755f5; font-weight: 600; font-family: 'Inter', sans-serif; }

.fb-controls { position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; }
.fb-btn {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; line-height: 1;
    min-width: 44px; height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;
    background: #0d0d0d; color: #fff; border: none; border-radius: 100px; cursor: pointer; text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.fb-btn:hover:not(:disabled) { background: #4755f5; transform: translateY(-2px); }
.fb-btn:disabled { opacity: 0.3; cursor: default; }
.fb-wide { padding: 0 22px; }
.fb-count { min-width: 130px; text-align: center; font-weight: 600; font-size: 14px; font-family: 'Inter', sans-serif; color: #0d0d0d; }
.fb-sep { width: 12px; }

/* Fullscreen: the stage fills the screen. */
.fb-stage:fullscreen { background: #1a1a1a; height: 100vh; padding: 16px; }
.fb-stage:-webkit-full-screen { background: #1a1a1a; height: 100vh; padding: 16px; }

.fb:focus { outline: none; }

@media (max-width: 700px) {
    .fb-stage { height: var(--fb-height, calc(100vh - 190px)); height: var(--fb-height, calc(100dvh - 190px)); min-height: 360px; }
    .fb-count { min-width: 100px; }
}