/* WP Flipbook – Frontend Styles v5 */

/* ---- Design tokens ---- */
.wp-flipbook-wrap {
    --wpfb-bar-bg:          rgba(15,15,18,.88);
    --wpfb-bar-border:      rgba(255,255,255,.09);
    --wpfb-btn-color:       rgba(255,255,255,.6);
    --wpfb-btn-hover-bg:    rgba(255,255,255,.13);
    --wpfb-btn-hover-color: rgba(255,255,255,.95);
    --wpfb-btn-active-bg:   rgba(255,255,255,.18);
    --wpfb-accent:          #e8c97a;
    --wpfb-radius:          8px;
    --wpfb-bar-h:           36px;
    --wpfb-stage-pad:       14px;
    --wpfb-bar-gap:         10px;
    --wpfb-font:            "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Wrapper ----
 * Always fills its container width.
 * Height is created by .wpfb-sizer via padding-bottom.
 * overflow:hidden clips the absolute children without affecting height calculation
 * because height comes from the in-flow .wpfb-sizer, not from the wrapper itself.
 */
.wp-flipbook-wrap {
    position: relative;
    display: block !important;
    width: 100% !important;     /* override any inline-block/shrink-to-fit parent (Elementor shortcode widget, wpautop <p>, etc.) */
    max-width: 100% !important;
    font-family: var(--wpfb-font);
    box-sizing: border-box;
    border-radius: var(--wpfb-radius);
    overflow: hidden;
    outline: none;
    background: transparent;
}
.wp-flipbook-wrap:focus-visible {
    outline: 2px solid var(--wpfb-accent);
    outline-offset: 3px;
}
.wp-flipbook-wrap * { box-sizing: border-box; }

/* ---- Sizer ----
 * Height is set directly in pixels by JS (see _updateSizer) after measuring
 * the real PDF page ratio and wrapper width. A fixed min-height here is only
 * a placeholder for the very first paint before JS runs, to avoid a 0-height
 * flash. JS always overwrites this with an exact pixel value, which is more
 * reliable across browsers than the padding-bottom percentage trick (which
 * can interact unpredictably with overflow:hidden and custom-property timing).
 */
.wpfb-sizer {
    display: block;
    width: 100%;
    height: 480px;   /* placeholder; JS sets the real height immediately */
    pointer-events: none;
}

/* ---- Stage ---- */
.wp-flipbook-stage {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wpfb-stage-pad) var(--wpfb-stage-pad)
             calc(var(--wpfb-bar-h) + var(--wpfb-bar-gap) + var(--wpfb-stage-pad));
    overflow: hidden;
    background: transparent;
}

/* ---- Spreads ---- */
.wpfb-spread {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin-top: calc((var(--wpfb-bar-h) + var(--wpfb-bar-gap)) / -2);
}
.wpfb-spread--incoming { visibility: hidden; }

/* ---- Page canvases ----
 * No max-width/max-height here: JS already computes the exact pixel size
 * that fits the available stage space (see _renderSpread maxW/maxH calc).
 * A CSS max-width:100% here creates a circular sizing reference against
 * the parent .wpfb-spread (which has no explicit width), causing the
 * canvas to render at the wrong size and the curl animation to desync
 * from the actual DOM box — visible as a brief duplicate-page flash.
 */
.wpfb-page-canvas {
    display: block;
    box-shadow: 0 4px 24px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.18);
}
.wpfb-spread .wpfb-page-canvas:first-child:not(:last-child) {
    border-radius: 2px 0 0 2px;
    box-shadow: -1px 4px 24px rgba(0,0,0,.22);
}
.wpfb-spread .wpfb-page-canvas:last-child:not(:first-child) {
    border-radius: 0 2px 2px 0;
    box-shadow: 2px 4px 24px rgba(0,0,0,.22);
}
.wpfb-spread .wpfb-page-canvas:only-child { border-radius: 2px; }

/* ---- Hotspot holder + markers ----
 * .wpfb-page-holder wraps a page canvas only when that page has hotspots,
 * so the common (no-hotspot) case stays a bare canvas with no extra DOM.
 * Hotspots are positioned in percentages of the page, computed in JS, so
 * they track the canvas size correctly at any viewport/zoom level.
 */
.wpfb-page-holder {
    position: relative;
    display: block;
}
.wpfb-page-holder .wpfb-page-canvas {
    display: block;
}
.wpfb-hotspot {
    position: absolute;
    display: block;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* No visible box itself — only the pulse marker inside is shown.
       The link element is the full (touch-friendly) tap target. */
}
.wpfb-hotspot:focus-visible {
    outline: 2px solid var(--wpfb-accent);
    outline-offset: 2px;
    border-radius: 50%;
}
.wpfb-hotspot-pulse {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    background: rgba(232, 201, 122, .85);
    box-shadow: 0 0 0 0 rgba(232, 201, 122, .6);
    animation: wpfb-hotspot-pulse 2s ease-out infinite;
    pointer-events: none;
}
.wpfb-hotspot-pulse::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
}
@keyframes wpfb-hotspot-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(232, 201, 122, .55); transform: scale(.9); }
    70%  { box-shadow: 0 0 0 18px rgba(232, 201, 122, 0);   transform: scale(1); }
    100% { box-shadow: 0 0 0 0   rgba(232, 201, 122, 0);    transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
    .wpfb-hotspot-pulse { animation: none; box-shadow: 0 0 0 6px rgba(232, 201, 122, .25); }
}

/* Spine shadow */
.wpfb-spine {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 16px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to right,
        rgba(0,0,0,.15) 0%, rgba(0,0,0,.04) 35%,
        rgba(255,255,255,.03) 50%,
        rgba(0,0,0,.04) 65%, rgba(0,0,0,.15) 100%
    );
}

/* ---- Curl overlay canvas ---- */
.wpfb-flip-canvas {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 20;
    pointer-events: none;
}

/* ---- Loading ---- */
.wp-flipbook-loading {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(0,0,0,.38);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: inherit;
    z-index: 30;
}
@media (prefers-color-scheme: dark) {
    .wp-flipbook-loading { color: rgba(255,255,255,.38); }
}
.wp-flipbook-spinner {
    display: block;
    width: 56px;
    height: 64px;
    position: relative;
}
/* Oil bottle/carafe outline */
.wp-flipbook-spinner .wpfb-oil-vessel {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 30px;
    border: 2px solid rgba(0,0,0,.18);
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
@media (prefers-color-scheme: dark) {
    .wp-flipbook-spinner .wpfb-oil-vessel { border-color: rgba(255,255,255,.2); }
}
/* Oil level rising inside the vessel, looped */
.wp-flipbook-spinner .wpfb-oil-fill {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, #d4a017, #a87c0a);
    animation: wpfb-oil-rise 1.8s ease-in-out infinite;
}
/* Falling oil drop above the vessel */
.wp-flipbook-spinner .wpfb-oil-drop {
    position: absolute;
    top: 0; left: 50%;
    width: 7px; height: 9px;
    margin-left: -3.5px;
    background: #d4a017;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    animation: wpfb-drop-fall 1.8s ease-in infinite;
}
/* Ripple ring at the surface when the drop lands */
.wp-flipbook-spinner .wpfb-oil-ripple {
    position: absolute;
    bottom: 2px; left: 50%;
    width: 6px; height: 3px;
    margin-left: -3px;
    border: 1.5px solid #d4a017;
    border-radius: 50%;
    opacity: 0;
    animation: wpfb-oil-ripple 1.8s ease-out infinite;
}
@keyframes wpfb-drop-fall {
    0%   { top: 0;    opacity: 0;   transform: rotate(45deg) scale(.6); }
    8%   { opacity: 1; transform: rotate(45deg) scale(1); }
    55%  { top: 26px; opacity: 1;  transform: rotate(45deg) scale(1); }
    60%  { top: 26px; opacity: 0;  transform: rotate(45deg) scale(.7); }
    100% { top: 26px; opacity: 0; }
}
@keyframes wpfb-oil-rise {
    0%, 55%  { height: 4px; }
    100%     { height: 22px; }
}
@keyframes wpfb-oil-ripple {
    0%, 52%  { opacity: 0; width: 6px; height: 3px; margin-left: -3px; }
    60%      { opacity: .8; width: 6px; height: 3px; margin-left: -3px; }
    85%      { opacity: 0; width: 30px; height: 8px; margin-left: -15px; }
    100%     { opacity: 0; width: 30px; height: 8px; margin-left: -15px; }
}
.wp-flipbook-progress {
    width: 80px; height: 2px;
    background: rgba(0,0,0,.1);
    border-radius: 1px; overflow: hidden; position: relative;
}
@media (prefers-color-scheme: dark) {
    .wp-flipbook-progress { background: rgba(255,255,255,.1); }
}
.wp-flipbook-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; background: currentColor;
    border-radius: 1px; transition: width .2s ease;
}
.wp-flipbook-progress--indeterminate .wp-flipbook-progress-fill {
    width: 40% !important;
    animation: wpfb-progress-slide 1.4s ease-in-out infinite;
}
@keyframes wpfb-progress-slide { 0% { left: -40%; } 100% { left: 120%; } }

/* ---- Error ---- */
.wp-flipbook-error {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; color: rgba(0,0,0,.4);
    padding: 24px; text-align: center;
    background: inherit; z-index: 30;
}
@media (prefers-color-scheme: dark) {
    .wp-flipbook-error { color: rgba(255,255,255,.38); }
}

/* =========================================================
   FLOATING PILL CONTROLS BAR
   ========================================================= */
.wp-flipbook-controls {
    position: absolute;
    bottom: var(--wpfb-bar-gap);
    left: 50%;
    transform: translateX(-50%);
    height: var(--wpfb-bar-h);
    width: auto;
    max-width: calc(100% - 16px);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 0 6px;
    background: var(--wpfb-bar-bg);
    border: 1px solid var(--wpfb-bar-border);
    border-radius: 999px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 2px 12px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2);
    z-index: 25;
    white-space: nowrap;
    overflow: hidden;
}
.wpfb-page-display {
    font-size: .68rem; font-weight: 500;
    color: rgba(255,255,255,.5);
    letter-spacing: .03em; font-variant-numeric: tabular-nums;
    white-space: nowrap; line-height: 1;
    padding: 0 4px; min-width: 48px; text-align: center;
}
.wpfb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: none; border-radius: 50%;
    color: var(--wpfb-btn-color); cursor: pointer;
    transition: background .1s, color .1s, transform .08s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.wpfb-btn svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.wpfb-btn:hover:not(:disabled) { background: var(--wpfb-btn-hover-bg); color: var(--wpfb-btn-hover-color); }
.wpfb-btn:active:not(:disabled) { transform: scale(.82); }
.wpfb-btn:focus-visible { outline: 2px solid var(--wpfb-accent); outline-offset: 1px; }
.wpfb-btn:disabled { opacity: .2; cursor: default; }
.wpfb-btn[aria-pressed="true"] { background: var(--wpfb-btn-active-bg); color: var(--wpfb-accent); }
.wpfb-prev, .wpfb-next { width: 32px; height: 32px; }
.wpfb-prev svg, .wpfb-next svg { width: 17px; height: 17px; }
.wpfb-divider {
    width: 1px; height: 12px;
    background: rgba(255,255,255,.1);
    margin: 0 2px; flex-shrink: 0;
}
.wpfb-zoom-label {
    font-size: .63rem; font-weight: 500;
    color: rgba(255,255,255,.35);
    letter-spacing: .02em; font-variant-numeric: tabular-nums;
    min-width: 28px; text-align: center;
    pointer-events: none; user-select: none;
}
.wpfb-toast {
    position: absolute;
    bottom: calc(var(--wpfb-bar-h) + var(--wpfb-bar-gap) + 8px);
    left: 50%; transform: translateX(-50%) translateY(4px);
    background: rgba(15,15,18,.92); color: rgba(255,255,255,.85);
    font-family: var(--wpfb-font); font-size: .72rem; font-weight: 500;
    letter-spacing: .04em; padding: 5px 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 40;
}
.wpfb-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Fullscreen ---- */
.wp-flipbook-wrap:fullscreen,
.wp-flipbook-wrap:-webkit-full-screen {
    border-radius: 0;
    width: 100vw !important; height: 100vh !important;
    max-height: none !important;
    background: #0e0e11 !important;
}
.wp-flipbook-wrap:fullscreen .wpfb-sizer,
.wp-flipbook-wrap:-webkit-full-screen .wpfb-sizer { display: none; }
.wp-flipbook-wrap:fullscreen .wp-flipbook-stage,
.wp-flipbook-wrap:-webkit-full-screen .wp-flipbook-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.wp-flipbook-wrap:fullscreen .wp-flipbook-loading,
.wp-flipbook-wrap:-webkit-full-screen .wp-flipbook-loading,
.wp-flipbook-wrap:fullscreen .wp-flipbook-error,
.wp-flipbook-wrap:-webkit-full-screen .wp-flipbook-error {
    background: #0e0e11; color: rgba(255,255,255,.45);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .wpfb-oil-drop,
    .wpfb-oil-fill,
    .wpfb-oil-ripple,
    .wp-flipbook-progress-fill { animation: none !important; }
    /* Show a static, mid-fill state instead of a frozen first-frame */
    .wpfb-oil-drop   { opacity: 0; }
    .wpfb-oil-fill   { height: 14px; }
    .wpfb-oil-ripple { opacity: 0; }
}

/* ---- Mobile ≤ 600px ----
 * Two mechanisms apply mobile styles:
 * 1. .wpfb-is-mobile class — set by JS based on the wrapper's actual
 *    container width (correct even in narrow columns on a wide viewport).
 * 2. @media (max-width: 600px) — viewport-based fallback so the layout
 *    still looks reasonable before JS has run on the very first paint.
 */
.wp-flipbook-wrap.wpfb-is-mobile {
    --wpfb-bar-h:      32px;
    --wpfb-stage-pad:  8px;
    --wpfb-bar-gap:    8px;
    border-radius: 4px;
}
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-zoom-in,
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-zoom-out,
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-zoom-label,
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-fullscreen,
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-divider { display: none; }
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-btn { width: 32px; height: 32px; }
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-btn svg { width: 15px; height: 15px; }
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-prev,
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-next { width: 34px; height: 34px; }
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-prev svg,
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-next svg { width: 18px; height: 18px; }
.wp-flipbook-wrap.wpfb-is-mobile .wpfb-page-display { min-width: 40px; font-size: .67rem; }

/* Viewport-based fallback (applies before JS has run on first paint) */
@media (max-width: 600px) {
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) {
        --wpfb-bar-h:      32px;
        --wpfb-stage-pad:  8px;
        --wpfb-bar-gap:    8px;
        border-radius: 4px;
    }
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-zoom-in,
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-zoom-out,
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-zoom-label,
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-fullscreen,
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-divider { display: none; }
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-btn { width: 32px; height: 32px; }
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-btn svg { width: 15px; height: 15px; }
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-prev,
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-next { width: 34px; height: 34px; }
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-prev svg,
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-next svg { width: 18px; height: 18px; }
    .wp-flipbook-wrap:not(.wpfb-is-mobile):not(.wpfb-is-desktop) .wpfb-page-display { min-width: 40px; font-size: .67rem; }
}
@media (max-width: 380px) {
    .wp-flipbook-controls { padding: 0 4px; gap: 0; }
    .wpfb-btn { width: 30px; height: 30px; }
    .wpfb-prev, .wpfb-next { width: 32px; height: 32px; }
}