@import url("tutorial_button.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

/* =================================================================== */
/* --- V3: GLOBAL Z-INDEX STACKING ORDER MAP (HIGHEST to LOWEST) --- */
/* =================================================================== */
/*
    This map documents the layering of elements in the flipbook viewer.
    Higher numbers are closer to the user (on top).

    --- LEVEL 100: CRITICAL OVERLAYS ---
    z-index: 100000; - Preloader (#flipbook-preloader)

    --- LEVEL 90: MODALS & LIGHTBOXES ---
    z-index: 90001;  - Universal Lightbox Close Buttons (.modal-close-btn, #grid-view-close-btn, etc.)
    z-index: 90000;  - All Modal/Lightbox/Sidebar Content (#info-box, #comments-sidebar, #grid-view-container, etc.)
    z-index: 89999;  - Modal/Lightbox Background Overlays (.modal-overlay, #comments-overlay, etc.)

    --- LEVEL 50: FIXED UI ELEMENTS ---
    z-index: 50006;  - Annotation-toolbar
    z-index: 50005;  - Fullscreen Floating Buttons (#exit-fullscreen-btn, #fullscreen-zoom-btn)
    z-index: 50004;  - Fullscreen Zoom Reminder (#fullscreen-zoom-reminder)
    z-index: 50003;  - Page Navigation Arrows (#prev-btn, #next-btn)
    z-index: 50002;  - YouTube Tutorial Button (.youtube-tutorial-btn); Side-Control Buttons
    z-index: 50001;  - Top-Left UI Container (#top-left-ui-container: Badge & Bookmarks)
    z-index: 50000;  - Main Control Bar (#controls)
    z-index: 49999;  - Zoom Reminder Text (#zoom-reminder)
    z-index: 1001;   - Author Badge (#author-badge) - Remains low as per original design.

    --- LEVEL 2: IN-PAGE FLIPBOOK CONTENT ---
    z-index: 20;     - Hotspot Tooltips (.hotspot .tooltip)
    z-index: 15:     - Hotspot Container (.overlay-container) - Highest
    z-index: 13;     - LIVE Annotation Drawing Canvas (.annotation-canvas)
    z-index: 12;     - Clickable Bookmark Icons (.bookmark-on-page)
    z-index: 11;     - Creative Text Blocks (.text-block-overlay)
    z-index: 10;     - ALL Clickable Hotspots (.hotspot, .video-trigger, etc.)
    z-index: 9;      - Page Border & Paper Edge Effect
    z-index: 6;      - Saved Annotation Image (.annotation-overlay)
    z-index: 4:      - Protective Overlay / Zoom Target (.protective-overlay)
    z-index: 2;      - Pan/Zoom Wrapper (.panzoom-wrapper)
    z-index: 1;      - Main Page Image & Backgrounds
*/
/* =================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

/* --- START: UNIVERSAL SVG RESET --- */
/* This ensures all SVGs are ready to inherit color from their parent by default. */
svg {
    fill: currentColor;
    width: 1em; /* Default size relative to parent font size */
    height: 1em;
}
/* --- END: UNIVERSAL SVG RESET --- */

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    
    /* viewer.php will now strictly control these two */
    background-color: var(--brand-background-color, #fffef8); 
    background-image: var(--brand-background-image, url('../webimages/paperbgg.jpg')); 

    background-size: var(--brand-background-size, repeat);
    background-position: var(--brand-background-position, center);
    background-repeat: var(--brand-background-repeat, repeat);
    background-attachment: var(--brand-background-attachment, scroll);
}

/* =================================================================== */
/* --- STYLES FOR PROFESSIONAL FLIPBOOK PRELOADER --- */
/* =================================================================== */

#flipbook-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* A solid, clean background */
    z-index: 100000; /* Highest z-index to cover everything */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* For smooth fade-out */
}

.preloader-content {
    text-align: center;
    max-width: 300px;
}

/* A more modern, three-dot pulsing spinner */
.preloader-spinner {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}
.preloader-spinner::before,
.preloader-spinner::after,
.preloader-spinner div {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #0d6efd; /* Your theme blue */
    border-radius: 50%;
    animation: preloader-pulse 1.4s infinite ease-in-out both;
}
.preloader-spinner div { animation-delay: 0.16s; }
.preloader-spinner::after { animation-delay: 0.32s; }

@keyframes preloader-pulse {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

.preloader-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #343a40;
    margin-bottom: 1rem;
}

.preloader-progress {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden; /* To contain the progress bar */
    margin-bottom: 0.5rem;
}

#preloader-progress-bar {
    width: 0%; /* Starts at 0% */
    height: 100%;
    background-color: #0d6efd; /* Your theme blue */
    border-radius: 4px;
    transition: width 0.3s ease; /* Animate the width change */
}

.preloader-counter {
    font-size: 0.9rem;
    color: #6c757d;
}

/* --- Loader Styles --- */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* -------------------- */


#container {
    width: 100%;
    /* Use calc() to make the container fill the REMAINING height */
    height: calc(100vh - 120px); /* 100% of viewport height minus ~60px for title and ~60px for controls */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    position: relative;
    padding: 12px; /* Simplified padding */
    box-sizing: border-box;
}

/* Make sure the actual page surface is fully interactive */
#container .flipbook .page {
    pointer-events: auto !important;
}

/* The flipbook container itself should not block events */
#container > .flipbook {
    pointer-events: none;
}
#container > .flipbook .page {
    pointer-events: auto;
}

/* ======================================================= */
/* --- FIXED PAGE SHADOWS (no oversized shadow + good dragging) --- */
/* ======================================================= */

/* Remove any outer box around the whole flipbook */
#container .flipbook {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    overflow: visible !important;   /* needed for page turning */
}

/* Soft, realistic shadow that stays INSIDE the page bounds */
#container .flipbook .page,
#container .flipbook .hard {
    /* Much smaller & tighter shadow */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.08) !important;
    
    /* Prevent the shadow from expanding the clickable area */
    overflow: hidden !important;
}

/* Keep double-page spreads clean */
.flipbook-double #container .flipbook .page:not(.odd):not(.even),
.flipbook-double #container .flipbook .hard {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* --- New, Corrected Rules for Page Backgrounds --- */

.flipbook .page {
    /* Set the default background for all pages to white */
    background: white; 
    position: relative;
}

/* 
  This is the key: Target only the pages that are part of a 
  double-page spread (p2, p3, p4, etc.) and make THEIR background transparent.
  The :not(.odd) and :not(.even) selectors are a bit of a trick to
  target all pages in a double-spread without affecting single turning pages.
*/
.flipbook-double .flipbook .page:not(.odd):not(.even) {
    background: transparent;
}

/* We also make sure the hardcovers stay transparent in a double spread */
.flipbook-double .flipbook .hard {
    background: transparent !important;
}

/* =================================================================== */
/* --- START: NEW TOP-LEFT UI CONTAINER STYLES --- */
/* =================================================================== */

#top-left-ui-container {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 50001; /* Same z-index the badge used to have */

    /* This is the magic: */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start;  /* Align items to the left */
    gap: 10px; /* This creates a 10px space between the badge and the tray */
}
/* --- END: NEW CONTAINER STYLES --- */

/* =================================================================== */
/* --- V2: PROFESSIONAL IN-PAGE LOADING SPINNER --- */
/* =================================================================== */

/* 1. Style the loading state of the page container */
.flipbook .page.loading {
    /* We will use a pseudo-element for the spinner, so the background can be simple */
    background-color: #f0f0f0; /* A light gray placeholder background */
    position: relative; /* Required for the ::after pseudo-element */
}

/* 2. Create the spinner using an ::after pseudo-element */
.flipbook .page.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Spinner Dimensions */
    width: 40px;
    height: 40px;
    margin-top: -20px; /* (Negative half of height to center) */
    margin-left: -20px; /* (Negative half of width to center) */
    
    /* Spinner Appearance */
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333; /* The spinning part of the circle */
    border-radius: 50%;
    
    /* The Animation */
    animation: page-spin 1s linear infinite;
}

/* 3. Define the keyframe animation for the spin */
@keyframes page-spin {
    to {
        transform: rotate(360deg);
    }
}

.flipbook .hard {
    background-color: #999 !important;
    box-shadow: inset 0 0 5px #666;
}

/* =================================================================== */
/* --- STYLES FOR FLIPBOOK PAGE IMAGES (Standard & Photobook) --- */
/* =================================================================== */

/* --- 1. BASE STYLE FOR ALL MAIN PHOTOS --- */
/* This rule applies to BOTH standard and photobook styles. */
.main-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute; /* THE FIX */
    top: 0;
    left: 0;
    z-index: 1; /* Place it BEHIND the hotspots inside the wrapper */
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
}

/* --- 2. PHOTOBBOOK-SPECIFIC OVERRIDES --- */

/* This rule only applies when the container has the 'photobook' class */
.photobook .flipbook .page {
    position: relative;
    overflow: hidden;
    background-color: #111; /* Dark fallback background for photobook style */
}

/* The blurred background only exists in photobook mode */
.photobook .page-background {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7);
    transform: scale(1.1);
    z-index: 1; /* Sits behind the main photo */
}

/* The drop shadow effect is only for the photobook style */
.photobook .main-photo {
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
}

#controls {
    /* --- POSITIONING --- */
    position: fixed;   /* Position it relative to the browser window */
    bottom: 0;         /* Stick it to the bottom */
    left: 0;
    width: 100%;       /* Make it span the full width of the screen */
    z-index: 50000;     /* Ensure it sits above the flipbook but below lightboxes */
    padding: 6px 0;   /* 10px padding on top/bottom */
    
    /* --- LAYOUT --- */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 0; /* Remove the old margin */
    
    /* 
      THE FIX: Use the 'background' property with a linear gradient.
      This one starts lighter at the top and fades to darker at the bottom.
      The fallback is also a gradient.
    */
    background: var(--brand-controls-bg, linear-gradient(to top, rgba(248, 249, 250, 0.99), rgba(248, 249, 250, 0.12)));

    border-top: 0px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
}


#controls button {
    background-color: #999;
    color: white; /* The SVG will inherit this color */
    border: none;
    padding: 3px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1; 
}

#controls #download-btn svg {
    width: 18px;   
    height: 18px;
    fill: currentColor;
}

#controls button:hover:not(:disabled) {
    background-color: #555;
}

/* --- New, Improved Rule for ALL Disabled Buttons --- */
#controls button:disabled {
    background: transparent !important; /* Make the background transparent */
    opacity: 0.3; /* Make the entire button (icon and all) faint */
    cursor: not-allowed;
}

#page-indicator {
    font-size: 15px;
    color: var(--brand-controls-icon-color, #333333);
    font-weight: 600;
}

/* --- Grid View --- */

#grid-view-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 90000;
    display: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
#grid-view-container {
    width: 100%;
    height: 100%;
    padding: 80px 40px 40px 40px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}
.grid-item {
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    padding: 5px;
    border-radius: 4px;
}
.grid-item:hover {
    transform: scale(1.05);
    border-color: #fff;
}
.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 2px;
}
.grid-item .page-label {
    margin-top: 8px;
    font-size: 14px;
    color: #ddd;
}

/* ========================================================= */
/* --- NEW: Integrated Metric Buttons (Likes & Comments) --- */
/* ========================================================= */

#controls button.metric-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Space between icon and number */
    padding: 0 10px; /* Slight horizontal padding so the number has breathing room */
    width: auto; /* Allow the button to expand slightly if the number is large (e.g. 1000) */
    min-width: 40px; /* Keep minimum width consistent with other buttons */
}

.metric-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.metric-icon-wrapper svg {
    width: 100%;
    height: 100%;
    /* Fill color inherits from the button hover states defined earlier in style.css */
}

.metric-count {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--brand-controls-icon-color, #333); /* Inherit brand color or default to dark grey */
    opacity: 0.6; /* Slightly muted so it doesn't overpower the icon */
    line-height: 1;
}

/* Ensure the filled heart works correctly within the wrapper */
.metric-btn.liked .icon-heart-outline { display: none; }
.metric-btn.liked .icon-heart-filled { display: block !important; fill: #ef4444 !important; }
.metric-btn.liked .metric-count { color: #ef4444; opacity: 1; }

/* =================================================================== */
/* --- V2: REVISED LINK HOTSPOT STYLES (Subtle Flash & Hover) --- */
/* =================================================================== */

/* --- 1. The Main Hotspot Container --- */
.hotspot {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    border-radius: 5px;
    
    /* Start with a completely transparent background */
    background-color: rgba(2, 136, 209, 0); /* Your blue color, but 0% opacity */
    
    /* Add a subtle border that will also fade in on hover */
    border: 2px solid rgba(2, 136, 209, 0);

    /* The transition makes the hover effect smooth */
    transition: all 0.3s ease-in-out;

    /* --- THE KEY: Attach the new animation --- */
    /* It runs the 'subtle-flash' animation for 6 seconds, every 1 seconds */
    animation: subtle-flash 6s ease-in-out 1s infinite;
    /* subtle-flash: The name of our new @keyframes animation. */
    /* 6s: The animation itself (the flash) takes 6 seconds to complete. */
    /* ease-in-out: A timing function that makes the flash feel smooth. */
    /* 1s: This is the animation-delay. It tells the browser to wait 1 second before starting the animation. */
    /* infinite: This tells the animation to repeat forever. The browser will run the 6s flash, then wait another 1s, and repeat. */
}

/* --- 2. The Hover Effect --- */
.hotspot:hover {
    /* On hover, make the background a solid, semi-transparent blue */
    background-color: rgba(2, 136, 209, 0.4); /* 40% opacity */
    
    /* And make the border solid */
    border-color: rgba(2, 136, 209, 1);
    
    /* Stop the flashing animation while the user is hovering */
    animation: none;
}

/* --- 3. The New Keyframe Animation for the Flash --- */
@keyframes subtle-flash {
    /* The animation starts and ends with the hotspot being transparent */
    0% {
        background-color: rgba(2, 136, 209, 0);
    }
    
    /* At the halfway point, it briefly fades in to a subtle blue and back out */
    50% {
        background-color: rgba(2, 136, 209, 0.3); /* 30% opacity for the flash */
    }
    
    /* By 100%, it's fully transparent again */
    100% {
        background-color: rgba(2, 136, 209, 0);
    }
}


/* --- 4. Tooltip styles remain the same but are included for completeness --- */
.hotspot .tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.hotspot .tooltip.top { bottom: 105%; }
.hotspot .tooltip.bottom { top: 105%; }
.hotspot .tooltip.visible { opacity: 1; visibility: visible; }

/* -----------------------
CATALOG PLUS ICON HOTSPOTS
----------------------- */
.hotspot-icon-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important; /* Removed white background */
    border: none !important;       /* Removed red border */
    box-shadow: none !important;    /* Removed standard shadow */
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}

.hotspot-icon-btn svg {
    width: 100%;
    height: 100%;
    fill: #bf1932; /* Rakuten Red */
    /* Add a shadow to the SVG itself so it's visible on dark/busy images */
    filter: drop-shadow(0 2px 4px rgba(255,255,255,0.3)); 
}

.hotspot-icon-btn:hover {
    transform: scale(1.25);
}

/* Subtle ring pulse for transparent icons */
.active-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12%;
    border: 0.3px solid #bf1932;
    animation: hotspotRingPulse 2s infinite;
    pointer-events: none;
}

@keyframes hotspotRingPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Editor Specific Styles */
.hotspot-icon-style {
    border: 1px dashed rgba(191, 25, 50, 0.5) !important; /* Keep a faint dash just for the editor so you can see the box bounds */
    background: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.hotspot-icon-style svg { 
    fill: #bf1932; 
    width: 100%; 
    height: 100%; 
}

/* -----------
Video Lightbox
----------- */
#video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 90000;
    display: none; 
    align-items: center;
    justify-content: center;
}
#video-container {
    width: 90%;
    max-width: 1200px;
}
#video-container video,
#video-container iframe {
    width: 100%;
    display: block;
    box-shadow: 0 0 30px black;
    aspect-ratio: 16 / 9;
}

/* --- REVISED: Style for In-Page Image --- */

/* The OUTER wrapper: a transparent container that holds the position and size. */
.in-page-image-wrapper {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    /* It no longer needs a shadow or border itself. */
}

/* The INNER image: this now has the content, shadow, and rotation. */
.in-page-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    
    /* The visual styles are now applied to the image itself */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Add the hover effect to the image, not the wrapper */
.in-page-image-wrapper:hover img {
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    /* The rotation is an inline style, so we can't easily add to it.
       A simple shadow change is a great hover effect. */
}

/* --- In-Page Video --- */
.in-page-video-wrapper {
    position: absolute;
    background-color: #000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    overflow: hidden;
    border-radius: 4px;
    z-index: 10;
}
.in-page-video-wrapper .play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.in-page-video-wrapper .play-button-overlay:hover {
    background: rgba(0, 0, 0, 0.6);
}
.in-page-video-wrapper .play-button-overlay svg {
    width: 25%;
    max-width: 64px;
    height: auto;
    fill: white;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    margin-left: 5px;
}
.in-page-video-wrapper video,
.in-page-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: none;
}
.in-page-video-wrapper.is-playing .play-button-overlay {
    display: none;
}
.in-page-video-wrapper .unmute-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}
.in-page-video-wrapper .unmute-overlay .unmute-icon {
    width: 20%;
    max-width: 50px;
    height: auto;
    fill: white;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.in-page-video-wrapper .unmute-overlay .unmute-text {
    color: white;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
    text-shadow: 0 1px 3px black;
}
.in-page-video-wrapper.is-muted .unmute-overlay {
    display: flex;
}

/* Base style for ALL trigger buttons */
.video-trigger,
.audio-trigger,
.image-trigger {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    
    min-width: 45px;  /* Set a minimum size in pixels */
    min-height: 45px; /* Set a minimum size in pixels */
    
    /* Use flexbox to center the SVG inside */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Appearance */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
    padding: 8px; /* Give some space around the icon */
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    
}
.video-trigger:hover,
.audio-trigger:hover,
.image-trigger:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Specific background colors */
.video-trigger {
    background-color: rgba(0, 0, 0, 0.6); /* Dark background for video trigger */
}
.audio-trigger {
    background-color: rgba(255, 152, 0, 0.7); /* Orange */
}
.image-trigger {
    background-color: rgba(76, 175, 80, 0.7); /* Green */
}

/* Style for the SVGs INSIDE the triggers */
.video-trigger svg,
.audio-trigger svg,
.image-trigger svg {
    width: 100%;
    height: 100%; /* Make SVG fill the padded area */
    fill: white;
}

/* Logic to show/hide the correct audio icon */
.audio-trigger.is-muted .icon-audio-on {
    display: none;
}
.audio-trigger:not(.is-muted) .icon-audio-off {
    display: none;
}

/* --- Styles for Image Lightbox --- */
#image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 90000; /* Highest z-index */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    /* Add padding for space around the image on small screens */
    padding: 2rem;
    box-sizing: border-box;
}

#image-lightbox img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    box-shadow: 0 0 40px black;
}

/* --- Styles for Author Badge --- */

/* --- Styles for Author Badge (REVISED) --- */

#author-badge {
    position: fixed;
    top: 12px;
    right: 18px;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 50px;
    backdrop-filter: blur(2px); /* Increase blur for a frostier effect */
    -webkit-backdrop-filter: blur(2px);
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* --- THEMED BADGE STYLES --- */

/* Pale Green for Free Users */
#author-badge.author-status-free {
    background-color: rgba(240, 253, 244, 0.75); /* Your pale green, 75% opaque */
    border: 1px solid rgba(16, 185, 129, 0.3); /* A subtle, darker green border */
}

/* Pale Orange for Pro Users */
#author-badge.author-status-pro {
    background-color: rgba(255, 247, 237, 0.75); /* Your pale orange, 75% opaque */
    border: 1px solid rgba(249, 115, 22, 0.3); /* A subtle, darker orange border */
}

/* --- START: NEW Black/Gray Theme for Business Users --- */
#author-badge.author-status-business {
    background-color: rgba(51, 51, 51, 0.75); /* Your #333 color, 75% opaque */
    border: 1px solid rgba(255, 255, 255, 0.2); /* A subtle light border for contrast */
}

/* --- NEW: Blue Theme for NZ360 Users --- */
#author-badge.author-status-nz360 {
    background-color: rgba(219, 234, 254, 0.75); /* Your pale blue, 75% opaque */
    border: 1px solid rgba(29, 78, 216, 0.3); /* A subtle, darker blue border */
}
#author-badge.author-status-nz360 .author-name {
    color: #1e40af; /* Your deep blue text */
}

/* --- END: NEW THEME --- */

/* --- TEXT AND AVATAR STYLES --- */

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    /* THE FIX: Use a darker border for better contrast on light backgrounds */
    border: 2px solid rgba(0, 0, 0, 0.1); 
}

/* THE FIX: The author name must now be a dark color to be readable */
.author-name {
    font-size: 14px;
    font-weight: 600; /* Bolder for better readability */
    text-shadow: none; /* Remove white text shadow */
}

/* THE FIX: Set dark text colors for each theme */
#author-badge.author-status-free .author-name {
    color: #065f46; /* Your deep theme green */
}
#author-badge.author-status-pro .author-name {
    color: #9a3412; /* Your deep theme orange */
}

/* --- START: NEW Text Color for Business Badge --- */
#author-badge.author-status-business .author-name {
    color: #ffffff; /* White text for readability on the dark background */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Add back the shadow for pop */
}
/* --- END: NEW TEXT COLOR --- */

#author-badge .author-badge-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
    display: flex; /* Keep flex properties from parent */
    align-items: center;
    gap: 10px; /* Space between avatar and name */
    height: 100%; /* Ensure link covers the full badge area */
    /* Add any other styling to make it look like a clickable badge */
}

#author-badge .author-badge-link:hover {
    /* Optional: Add hover effect to the link if you want */
    opacity: 0.8; /* Slight fade on hover */
    /* You already have a transform: scale on .author-badge, so no need to duplicate */
}

.author-avatar {
    width: 32px;  /* Small, icon-sized */
    height: 32px;
    border-radius: 50%; /* Makes it a perfect circle */
    
    /* These properties ensure the background image fits perfectly */
    background-size: cover;
    background-position: center;
    
    border: 2px solid rgba(255, 255, 255, 0.5); /* A subtle white border */
}

/* Specific styles for the default placeholder avatar */
.author-avatar.default-avatar {
    background-color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px; /* Give the SVG some space */
    color: #ccc; /* Color of the SVG icon */
}

.author-name {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Add this to your main css/style.css */
#author-badge .author-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =================================================================== */
/* --- V2: STYLES FOR DYNAMIC BRANDING BADGE --- */
/* =================================================================== */

/* 1. Style for the main badge container (applies to both default and custom) */
#floating-favicon-badge {
    /* All positioning properties have been removed. */
    /* The parent #top-left-ui-container now controls its position. */
}

#floating-favicon-badge .floating-favicon-link {
    display: block;
    transition: transform 0.2s ease;
}

#floating-favicon-badge .floating-favicon-link:hover {
    transform: scale(1.05);
}


/* 2. Style for YOUR default favicon badge (Original 32x32 size) */
#floating-favicon-badge .favicon-avatar.default-fflipp-icon {
    height: 32px;
    width: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* 3. NEW, SPECIFIC styles ONLY for the CUSTOM brand logo */
#floating-favicon-badge .favicon-avatar.custom-brand-logo-wrapper {
    /* Define a fixed HEIGHT for consistency */
    height: 40px;
    
    /* Let the WIDTH be determined by the image's aspect ratio */
    width: auto;
}

#floating-favicon-badge .favicon-avatar.custom-brand-logo-wrapper img {
    display: block;
    height: 100%; /* Fill the parent's defined height (40px) */
    width: auto;  /* Let width adjust automatically */
    max-width: 150px; /* Prevent extra-wide logos from taking too much space */
}

/* --- NEW: Styles for the Visible H1 Title Bar --- */

#flipbook-title-bar {
    width: 100%;
    padding: 0.45rem 1rem;
    
    /* 
      THE FIX: Use the 'background' property with a linear gradient.
      It starts slightly darker at the top and fades to a lighter shade.
      The fallback is now also a gradient.
    */
    background: var(--brand-title-bar-bg, linear-gradient(to bottom, rgba(248, 249, 250, 0.99), rgba(248, 249, 250, 0.12)));
    
    border-bottom: 0px solid rgba(0, 0, 0, 0.05); /* Make border more subtle */
    box-sizing: border-box;
    text-align: center;
    backdrop-filter: blur(5px); /* Add blur for a frosted glass effect */
    -webkit-backdrop-filter: blur(5px);
}

.title-bar-content {
    max-width: 1200px; /* Match the container width from your homepage */
    margin: 0 auto;
}

#flipbook-title-bar h1 {
    font-size: 1.2rem; /* A good, clear heading size */
    font-weight: 450;
    color: var(--brand-title-bar-font-color, #555); /* A dark, readable color */
    margin: 0;
    line-height: 1.3;
    
    /* For long titles, allow them to wrap */
    white-space: normal;
    word-wrap: break-word;
}

/* --- Style for Active Zoom Button --- */
#controls #zoom-btn.active {
    /* A bright yellow glowing effect on the button itself */
    box-shadow: 0 0 12px 3px rgba(250, 204, 21, 0.7);
    background-color: rgba(250, 204, 21, 0.2); /* A subtle yellow background tint */
    border-radius: 50%; /* Make the background glow circular */
    transform: scale(1.2); /* A slight grow to indicate "on" state */
}

/* --- NEW: Disable Hotspots When Zoom is Active --- */

/* --- Disable Hotspots When Zoom is Active --- */
.flipbook.zoom-active .hotspot,
.flipbook.zoom-active .video-trigger,
.flipbook.zoom-active .audio-trigger,
.flipbook.zoom-active .image-trigger,
.flipbook.zoom-active .in-page-video-wrapper,
.flipbook.zoom-active .in-page-image-wrapper,
.flipbook.zoom-active .in-page-360-wrapper, /* <-- ADDED THIS */
.flipbook.zoom-active .text-block-overlay {
    pointer-events: none;
    opacity: 0.015;
    transition: opacity 0.3s ease;
}

/* =================================================================== */
/* --- STYLES FOR FULLSCREEN MODE --- */
/* =================================================================== */

/* --- 1. Style the new buttons --- */

/* Add the fullscreen button to the group of standard icon buttons */
#controls #fullscreen-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
#controls #fullscreen-btn img {
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease-out;
}
#controls #fullscreen-btn:hover img {
    transform: scale(1.15);
}

/* =================================================================== */
/* --- V2: STYLES FOR FULLSCREEN-ONLY CONTROLS (SVG & PNG) --- */
/* =================================================================== */

/* 1. Base style for BOTH floating fullscreen buttons */
#exit-fullscreen-btn,
#fullscreen-zoom-btn {
    position: fixed;
    bottom: 20px;
    z-index: 50005;
    background: rgba(0,0,0,0.4);
    border: 3px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    
    /* Use flexbox to center whatever is inside (img or svg) */
    display: flex;
    justify-content: center;
    align-items: center;
}
#exit-fullscreen-btn { right: 20px; }
#fullscreen-zoom-btn { left: 20px; }

#exit-fullscreen-btn:hover,
#fullscreen-zoom-btn:hover {
    transform: scale(1.1);
}

/* 2. Style for the LEGACY PNG icons (This is your original rule, kept for fallback) */
#exit-fullscreen-btn img,
#fullscreen-zoom-btn img {
    width: 100%;
    height: 100%;
    /* Note: padding on the parent button may affect the final look */
}

/* 3. NEW styles for the SVG icons */
#exit-fullscreen-btn svg,
#fullscreen-zoom-btn svg {
    width: 32px;  /* A good, clear size for the icon drawing */
    height: 32px;
    color: #ffffff; /* Make the SVG icon white */
}

/* 4. Style for the "active" zoom state (now targets the button itself) */
#fullscreen-zoom-btn.active {
    box-shadow: 0 0 12px 3px rgba(250, 204, 21, 0.7);
    background-color: rgba(250, 204, 21, 0.2);
    /* The SVG color will be overridden below for the active state */
}

/* Make the SVG icon itself turn yellow when active */
#fullscreen-zoom-btn.active svg {
    color: #f59e0b; /* A nice yellow/amber color */
}


/* --- 2. The "Dark Mode" Styles --- */
/* These styles are applied when the <body> tag has the .fullscreen-active class */

/* =================================================================== */
/* --- DEFINITIVE STYLES FOR IMMERSIVE / FULLSCREEN MODE --- */
/* =================================================================== */

/* --- 1. The Dark Background --- */
body.fullscreen-active {
    background: #111 !important;
}

/* --- 2. Hide Everything By Default --- */
/* This rule hides all direct children of the body, like the header and footer */
body.fullscreen-active > * {
    display: none !important;
}

/* --- 3. The "Allow List": Explicitly Show What We Need --- */
/* This rule brings back only the elements essential for fullscreen mode */
body.fullscreen-active > #container,
body.fullscreen-active > #exit-fullscreen-btn {
    display: block !important;
}

/* Re-apply flex display for the container specifically */
body.fullscreen-active > #container {
    display: flex !important;
}


/* --- 4. The Fullscreen Container Style --- */
/* =================================================================== */
/* --- V5: DEFINITIVE ABSOLUTE CENTERING FOR FULLSCREEN MODE --- */
/* =================================================================== */

/* 1. The Container: A simple, full-screen positioning canvas. */
body.fullscreen-active #container {
    display: block !important; /* As you requested */
    position: fixed !important;
    top: 18px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 0px) !important; /* Force full height */
    padding: 3px !important; /* Remove padding which can affect centering */
    margin: 0 !important;
    z-index: 10000 !important;
    background: transparent !important;
}

/* 2. The Flipbook: This is the core of the fix. We center the flipbook itself. */
body.fullscreen-active .flipbook {
    position: absolute !important;
    top: 50% !important; /* Move the top edge to the vertical center */
    left: 50% !important; /* Move the left edge to the horizontal center */

    /* This is the magic: Translate the flipbook back up by 50% of ITS OWN height
       and back left by 50% of ITS OWN width. This achieves perfect centering. */
    transform: translate(-50%, -54%) !important;

    margin: 0 !important; /* Remove any stray margins */
}

/* 3. Hide the original controls bar completely in fullscreen.
   We will rely only on our floating fullscreen buttons. */
body.fullscreen-active #controls {
    display: none !important;
}

/* --- Responsive Adjustments for the Title Bar --- */
@media (max-width: 768px) {
    #flipbook-title-bar {
        padding: 0.75rem;
    }

    #flipbook-title-bar h1 {
        font-size: 1.2rem;
    }
    
    #author-badge {
        /* Move it down from the top edge */
        top: 57px; /* Adjust this value as needed to clear your title bar */

        /* Optional: Move it in from the right edge slightly more on mobile */
        right: 15px;
    }
    
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .favicon-avatar {
        width: 32px; /* Slightly smaller on mobile */
        height: 32px;
        border-width: 0px;
    }
}

/* --- Styles for Info Button and Lightbox --- */

/* --- New Styles for Info and Grid View Icon Buttons --- */

/* Style the button containers */
#controls #info-btn,
#controls #grid-view-btn,
#controls #zoom-btn,
#controls #music-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 42px; /* A standard size for your icon buttons */
    height: 42px;
    cursor: pointer;
}

/* Style the images inside the buttons */
#controls #info-btn img,
#controls #grid-view-btn img,
#controls #zoom-btn img,
#controls #music-btn img {
    width: 100%;
    height: 100%;
    /* Add a smooth transition for the hover effect */
    transition: transform 0.2s ease-out, opacity 0.3s ease;
}

/* The "enlarge a bit" hover effect */
#controls #info-btn:hover img,
#controls #grid-view-btn:hover img,
#controls #zoom-btn:hover img,
#controls #music-btn:hover img {
    /* Scale the image up by 15% on hover */
    transform: scale(1.15);
}

/* =================================================================== */
/* --- NEW: UNIFIED STYLES FOR ALL SVG CONTROL ICONS --- */
/* =================================================================== */

/* 1. Base style for ALL buttons containing SVGs in the control bar */
#controls button {
    /* --- THE KEY: Set the icon color using the CSS color property --- */
    /* This will be overridden by your brand kit variable if it exists */
    color: var(--brand-controls-icon-color, #333333);

    /* Reset some properties to ensure consistency */
    background: transparent;
    border: none;
    padding: 0;
    
    /* Use flexbox to perfectly center the SVG inside the button's area */
    display: flex;
    justify-content: center;
    align-items: center;

    transition: transform 0.2s ease, color 0.2s ease;
}

/* 2. Style for ALL SVGs directly inside the buttons */
#controls button > svg {
    /* Set the visual size of the icon drawing */
    width: 24px;
    height: 24px;
    /* The 'fill' is automatically handled by `fill="currentColor"` in the SVG
       and the `color` property on the parent button. */
}

/* 3. Hover and Active States */
#controls button:hover:not(:disabled) {
    transform: scale(1.15);
    color: var(--brand-controls-icon-color, #000000); /* Slightly darker on hover */
    background-color: transparent; /* Ensure no background color appears on hover */
}

/* Make the "active" state for the zoom button a different color */
#controls #zoom-btn.active,
#fullscreen-zoom-btn.active {
    color: #f59e0b !important; /* A nice yellow/amber color, with !important for safety */
    transform: scale(1.1);
}

/* 4. Special case for the "Like" button heart */
#controls #like-btn {
    color: var(--brand-controls-icon-color, #e91e63); /* Default to pink if no brand color */
}
#controls #like-btn.liked {
    color: #e91e63 !important; /* Liked state is always pink */
}

/* --- END: NEW SVG CONTROL ICON STYLES --- */

/* --- Corrected Styles for the Share Icon Button --- */

/* Style the button container itself */
#controls #share-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 42px; /* The button is a square... */
    height: 42px;
    cursor: pointer;
    /* This helps center the image if it's not a perfect square */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style the image inside the button */
#controls #share-btn img {
    /* --- THE FIX FOR DISTORTION --- */
    max-width: 100%;  /* The image can be, at most, the full width of the button */
    max-height: 100%; /* The image can be, at most, the full height of the button */
    object-fit: contain; /* This is the magic property! */
    /* 'contain' ensures the entire image fits inside the button,
       maintaining its aspect ratio without being cropped or distorted. */

    /* The transition for the hover effect */
    transition: transform 0.3s ease-in-out;
}

/* The hover effect */
#controls #share-btn:hover img {
    /* --- THE COUNTER-CLOCKWISE ROTATION --- */
    /* A negative value creates a counter-clockwise rotation */
    transform: rotate(-15deg); 
}

/* --- NEW: Styles for the Zoom Reminder Message --- */
#zoom-reminder {
    position: fixed;
    bottom: 70px; /* Position it just above the control bar */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    
    z-index: 49999; /* Just below the controls */
    cursor: pointer; /* Change from pointer-events: none to make it clickable */

    /* Animation */
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease, background-color 0.2s; /* Add background-color to transition */
}

/* Optional: Add a subtle hover effect */
#zoom-reminder:not(.hidden):hover {
    background-color: rgba(30, 30, 30, 0.9);
}

#zoom-reminder:not(.hidden) {
    opacity: 1;
    bottom: 80px; /* Animate it upwards slightly when it appears */
}

/* =================================================================== */
/* --- STYLES FOR NEW FULLSCREEN-ONLY ZOOM REMINDER --- */
/* =================================================================== */

/* 1. Style the reminder to match the original, but position it for fullscreen */
#fullscreen-zoom-reminder {
    position: fixed;
    bottom: 90px; /* Position it just above the floating fullscreen buttons */
    left: 50%;
    transform: translateX(-50%);
    z-index: 50004; /* Ensure it's on top */
    
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;

    /* Animation */
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease;
}

/* 2. When the 'hidden' class is removed, it becomes visible and animates upwards */
#fullscreen-zoom-reminder:not(.hidden) {
    opacity: 1;
    bottom: 100px; 
}


/* The full-screen overlay background */
#info-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 90000; /* Highest z-index */
    
    /* Center the info-box inside */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* The centered content box */
#info-box {
    position: relative;
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 30px 40px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    text-align: center;

    /* --- CORRECTED SCROLLING LOGIC --- */
    max-height: 85vh; /* Limit height to 85% of the screen */
    overflow-y: auto; /* Make the box itself scrollable if content overflows */
}

#info-close-btn:hover {
    color: #333;
}

/* =================================================================== */
/* --- STYLES FOR PRIVACY ICON IN VIEWER INFO LIGHTBOX --- */
/* =================================================================== */

.info-privacy .privacy-icon-wrapper {
    /* This creates the colored circle for the icon */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-privacy .privacy-icon-wrapper svg {
    width: 14px; /* A good size for the icon inside the circle */
    height: 14px;
}

/* Thematic colors for the icon circle and the SVG inside */
.info-privacy.public .privacy-icon-wrapper { background-color: #d1fae5; color: #065f46; } /* Green */
.info-privacy.listed .privacy-icon-wrapper { background-color: #dbeafe; color: #1e40af; } /* Blue */
.info-privacy.password .privacy-icon-wrapper { background-color: #fee2e2; color: #991b1b; } /* Red */
.info-privacy.private .privacy-icon-wrapper { background-color: #e5e7eb; color: #1f2937; } /* Gray */
.info-privacy.business .privacy-icon-wrapper { background-color: #e5e7eb; color: #1f2937; } /* Gray */

/* Styles for the content inside the box */
.info-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.info-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover; /* Prevents image stretching */
    margin-bottom: 10px;
    border: 2px solid #ddd;
}

.info-profilename {
    font-size: 1.1rem;
    font-weight: 600;
}

.info-title {
    font-size: 1.6rem;
    margin-bottom: 12px;
    line-height: 1.2;
}

.info-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
    text-align: left; /* Left-align the description for readability */
}

.info-views {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #888;
    font-size: 0.9rem;

}
.info-views svg {
    width: 20px;
    height: 20px;
}

.info-views .dot-separator {
    margin: 0 4px; /* Give the dot some space */
}

/* The 'time-ago' text will be populated by JavaScript */
.info-views .time-ago {
    /* Styles are inherited, so this is all we need */
}


/* --- New Styles for inside the Info Lightbox --- */

/* New wrapper for views, likes, and time */
.info-meta-bar {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 25px;
}
.info-views, .info-likes {
    display: flex;
    align-items: center;
    gap: 6px;
}
.info-meta-bar svg,
.info-meta-bar img {
    width: 18px;  /* A consistent size for all icons */
    height: 18px;
    /* This ensures PNGs scale properly if they are not perfectly square */
    object-fit: contain; 
}
.info-meta-bar .dot-separator {
    margin: 0 4px;
}

.info-likes svg {
  color: #E91E63; /* This makes the heart pink! */
}

/* (3) Style for the new privacy status block */
.info-privacy, .info-views, .info-likes {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666; /* A consistent muted color */
}
.info-meta-bar svg {
    width: 18px; /* Slightly smaller icons */
    height: 18px;
}

/* --- New Styles for the PNG Download Button --- */

/* Style the button container */
#info-box #download-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-top: 20px;
}

/* Style the PNG image inside the button */
#info-box #download-btn img {
    height: 50px; /* Adjust the height of the icon as desired */
    width: auto;  /* Let the width adjust automatically */
    display: block;
    
    /* A smooth transition for hover and opacity changes */
    transition: transform 0.2s ease-out, opacity 0.3s ease;
}

/* The "enlarge a bit" hover effect */
#info-box #download-btn:not(.disabled-file):hover img {
    transform: scale(1.1);
}

/* This is the "greyed out" style for when the file is missing */
#info-box #download-btn.disabled-file img {
    opacity: 0.1;
}

/* This targets the disabled state to prevent hover effects */
#info-box #download-btn.disabled-file {
    cursor: not-allowed;
}


/* --- Like Button Styles --- */
/* Change the Like button in the controls to a square icon button */
#controls #like-btn {
    background: transparent;
    color: #e91e63;
    width: 42px;
    height: 42px;
    padding: 8px; /* Reset padding for an icon */
    gap: 0; /* Remove gap since text is gone */
}
/* Ensure the icon is centered */
#controls #like-btn svg {
    width: 100%;
    height: 100%;
}

/* Initially, the filled heart is hidden */
#controls #like-btn .icon-heart-filled {
    display: none;
}

/* When the button has the 'liked' class... */
#controls #like-btn.liked {
    color: #e91e63; /* Pink/Red color for liked state */
    transform: scale(1.1); /* Pop effect */
}
#controls #like-btn.liked .icon-heart-outline {
    display: none; /* Hide the outline */
}
#controls #like-btn.liked .icon-heart-filled {
    display: block; /* Show the filled heart */
}

.like-count {
    font-weight: 300;
}

/* --- ======================================== --- */
/* --- New Styles for PNG Navigation Buttons  --- */
/* --- ======================================== --- */

/* This styles the button container */
#prev-btn,
#next-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50003;

    /* Set the button size to match your image dimensions */
    width: 35px;
    height: 80px;
    
    /* Make the button itself completely invisible */
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-radius: 5px; /* Add a slight rounding for a softer look */
    border: none;
    padding: 0;
    cursor: pointer;
    
    /* Also ensure a transition is here for the hover effect */
    transition: background-color 0.3s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Hover effect for the button CONTAINER --- */
#prev-btn:not(:disabled):hover,
#next-btn:not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.3) !important; /* A darker background on hover */
}

/* This styles the actual PNG image inside the button */
#prev-btn img,
#next-btn img {
    width: 100%; /* The image will fill the button container */
    height: 100%;
    
    /* --- OPACITY STATES --- */
    opacity: 0.7; /* Normal state (slightly transparent) */
    
    /* This makes the opacity change smooth */
    transition: opacity 0.3s ease;
}

/* Hover State: The image becomes fully visible */
#prev-btn:hover img,
#next-btn:hover img {
    opacity: 1.0;
}

/* --- ENHANCED Disabled State for Navigation Arrows --- */

/* 1. Style the button container when disabled */
#prev-btn:disabled,
#next-btn:disabled {
    /* THE FIX: Make the background completely transparent */
    background-color: transparent !important; 
    
    /* Also remove any shadow or other effects */
    box-shadow: none !important;
    
    cursor: not-allowed;
}

/* 2. Style the image inside the disabled button */
#prev-btn:disabled img,
#next-btn:disabled img {
    /* Fade the image out to indicate it's inactive */
    opacity: 0.3;
    
    /* Ensure the cursor change applies to the image area too */
    cursor: not-allowed;
}

/* Position the buttons on the screen edges */
#prev-btn { left: 0; }
#next-btn { right: 0; }

/* --- START: ADD THIS NEW BLOCK FOR THE SVG ICONS --- */
#prev-btn svg,
#next-btn svg {
    /* Set the visual size of the icon drawing */
    width: 48px;
    height: 48px;
    
    /* Set the icon color */
    color: rgba(255, 255, 255, 0.8);
    
    /* Add a subtle drop shadow to make it stand out */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    
    /* Smooth transitions for hover */
    transition: all 0.3s ease;
}

/* Hover state for the SVG itself */
#prev-btn:not(:disabled):hover svg,
#next-btn:not(:disabled):hover svg {
    color: rgba(255, 255, 255, 1); /* Fully white on hover */
    transform: scale(1.1); /* Slight grow effect */
}

/* Disabled state for the SVG */
#prev-btn:disabled svg,
#next-btn:disabled svg {
    opacity: 0.4; /* Fade out the icon when disabled */
}
/* --- END: NEW SVG BLOCK --- */

/* --- Styles for Share Button and Lightbox --- */

/* The full-screen overlay background */
#share-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 90000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* The centered content box */
#share-box {
    position: relative;
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    text-align: center;
}

#share-box h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#share-box p {
    color: #666;
    margin-bottom: 20px;
}

/* The wrapper for the input and copy button */
.share-link-wrapper {
    display: flex;
    gap: 10px;
}

#share-url-input {
    flex-grow: 1; /* Allow the input to take up all available space */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    background-color: #f5f5f5;
    color: #333;
}

#copy-url-btn {
    flex-shrink: 0; /* Prevent the button from shrinking */
    width: 50px;
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
    background: #e0e0e0;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#copy-url-btn:hover {
    background: #d0d0d0;
}
#copy-url-btn svg {
    width: 24px;
    height: 24px;
}

/* --- NEW: Styles for Social Icons in Share Lightbox --- */
.share-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Space between icons */
}

.share-social-icons .social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f3f4f6; /* A light gray background */
    color: #4b5563; /* Icon color */
    transition: all 0.2s ease-in-out;
}

.share-social-icons .social-icon-link:hover {
    transform: scale(1.1);
    background-color: #e5e7eb; /* Slightly darker on hover */
    color: #1f2937;
}

.share-social-icons .social-icon-link svg {
    width: 24px;
    height: 24px;
}

/* Specific override for the X.com icon to balance it visually */
#share-x-viewer svg {
    width: 18px;
    height: 18px;
}

/* =================================================================== */
/* --- UNIVERSAL FIX for all Lightbox Close Buttons --- */
/* =================================================================== */

#grid-view-close-btn,
#video-lightbox-close-btn,
#image-lightbox-close-btn,
#info-close-btn,
#share-close-btn {
    /* --- THE FIX IS HERE --- */
    position: fixed; /* Position relative to the screen, not the parent */
    
    /* Set a very high z-index to be on top of EVERYTHING */
    z-index: 90001;
    
    /* Standardize the position for all 'X' buttons */
    top: 15px;
    right: 25px;

    /* Standardize the appearance */
    font-size: 3rem;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 0 5px black;
    padding: 0;
    margin: 0;
    transition: transform 0.2s ease;
}

#grid-view-close-btn:hover,
#video-lightbox-close-btn:hover,
#image-lightbox-close-btn:hover,
#info-close-btn:hover,
#share-close-btn:hover {
    transform: scale(1.1);
}

/* Specific overrides for smaller buttons if needed */
#info-close-btn,
#share-close-btn {
    font-size: 2.2rem;
    color: #ccc;
}
#info-close-btn:hover,
#share-close-btn:hover {
    color: white;
}

/* --- NEW: Specific Style for Likers Lightbox Close Button --- */
#likers-close-btn {
    position: absolute; /* Position relative to the #likers-box */
    top: 10px;
    right: 15px;
    z-index: 10; /* Sits on top of the box's content */

    font-size: 2rem; /* A more standard size */
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    text-shadow: none; /* No shadow needed inside a white box */
    transition: color 0.2s;
}

#likers-close-btn:hover {
    color: #333;
    transform: none; /* No need for scale effect here */
}

/* --- V2: PROFESSIONAL BOOKMARK STYLES --- */

/* 1. The Tray in the top-left */
#bookmark-clips-tray {
    /* Remove positioning properties */
    /* position: fixed; */
    /* top: 60px; */
    /* left: 10px; */
    /* z-index: 5002; */

    /* Keep all other styles */
    display: flex;
    gap: 8px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.bookmark-clip-wrapper {
    width: 32px;
    height: 32px;
}

/* 2. The individual clips inside the tray */
.bookmark-clip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0; /* Light gray for USED clips */
    transition: all 0.2s ease;
}

.bookmark-clip.available {
    cursor: pointer;
}

/* Color-code the AVAILABLE clips */
.bookmark-clip.available[data-clip-index="1"] { color: #dd6b20; } /* Orange */
.bookmark-clip.available[data-clip-index="2"] { color: #2c5282; } /* Blue */
.bookmark-clip.available[data-clip-index="3"] { color: #2f855a; } /* Green */

.bookmark-clip.available:hover {
    transform: scale(1.15); /* Slightly bigger pop on hover */
    filter: brightness(0.8); /* Darken slightly on hover */
}


/* 3. The clip placed on top of a page */
.bookmark-on-page {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    z-index: 12;
    cursor: pointer;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
    transition: transform 0.2s ease;
}
.bookmark-on-page:hover {
    transform: translateX(-50%) scale(1.1);
}

/* Color-code the PLACED clips (same colors as tray) */
.bookmark-on-page[data-clip-index="1"] { color: #dd6b20; } /* Orange */
.bookmark-on-page[data-clip-index="2"] { color: #2c5282; } /* Blue */
.bookmark-on-page[data-clip-index="3"] { color: #2f855a; } /* Green */


/* 4. The clip placed on a grid view thumbnail */
.grid-item {
    position: relative;
}
.bookmark-on-grid {
    position: absolute;
    top: 0.9px;
    right: 0.9px;
    width: 60px;  /* <-- BIGGER SIZE */
    height: 60px; /* <-- BIGGER SIZE */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

/* Color-code the GRID clips (same colors) */
.bookmark-on-grid[data-clip-index="1"] { color: #dd6b20; } /* Orange */
.bookmark-on-grid[data-clip-index="2"] { color: #2c5282; } /* Blue */
.bookmark-on-grid[data-clip-index="3"] { color: #2f855a; } /* Green */

/* --- START: V3 - SIZE FIX FOR PLACED BOOKMARK ICONS --- */

/*
  This rule overrides the global 'svg { width: 1em; }' reset for our placed bookmarks.
  It tells the SVG inside a placed bookmark to be 100% of the size of its parent div,
  which already has the correct pixel dimensions (e.g., 40px or 24px).
*/
.bookmark-on-page svg,
.bookmark-on-grid svg {
    width: 100%;
    height: 100%;
}
/* --- END: V3 FIX --- */

/* --- =================================================== --- */
/* --- V5: VISIBILITY & SPECIFICITY FIX FOR BOOKMARK CLIPS --- */
/* --- =================================================== --- */

/* 
  We now use our new parent container #top-left-ui-container
  to create highly specific rules that guarantee visibility.
*/

/* Light gray for USED clips. This is our baseline. */
#top-left-ui-container .bookmark-clip {
    color: #cbd5e0 !important; /* Muted gray for unavailable clips */
}

/* Specific colors for AVAILABLE clips */
#top-left-ui-container .bookmark-clip.available[data-clip-index="1"] {
    color: #dd6b20 !important; /* Orange */
}
#top-left-ui-container .bookmark-clip.available[data-clip-index="2"] {
    color: #2c5282 !important; /* Blue */
}
#top-left-ui-container .bookmark-clip.available[data-clip-index="3"] {
    color: #2f855a !important; /* Green */
}

/* Final rule to ensure the SVG itself renders correctly */
#top-left-ui-container .bookmark-clip svg {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor !important;
}
/* --- END: V5 FIX --- */

/* --- NEW: Bookmark Confirmation Modal Styles --- */

#bookmark-confirm-text {
    text-align: center;
    color: #475569;
    margin-bottom: 1rem;
}

#bookmark-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#bookmark-page-input {
    font-size: 2.5rem; /* Make the number large and easy to read/edit */
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    /* Hide the little arrows on the number input for a cleaner look */
    -moz-appearance: textfield;
}
#bookmark-page-input::-webkit-outer-spin-button,
#bookmark-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



/* --- START: V2 - COMPLETE BOOKMARK CONFIRMATION MODAL STYLES --- */

/* 1. The full-screen overlay */
#bookmark-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.12); /* Light, blurred background */
    z-index: 90000;
    display: none; /* JS will change this to 'flex' */
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(1.2px);
    -webkit-backdrop-filter: blur(1.2px);
}

/* 2. The centered white content box */
#bookmark-confirm-modal .modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    text-align: center;
}

/* 3. The close button ('x') inside the content box */
#bookmark-confirm-modal .modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 90001;
    font-size: 2rem;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    text-shadow: none;
    transition: color 0.2s;
}

#bookmark-confirm-modal .modal-close-btn:hover {
    color: #333;
}

/* 4. The other styles for the form inside (from previous step) */
#bookmark-confirm-text {
    text-align: center;
    color: #475569;
    margin-bottom: 1rem;
}

#bookmark-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#bookmark-page-input {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    -moz-appearance: textfield;
}
#bookmark-page-input::-webkit-outer-spin-button,
#bookmark-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Style for the submit button */
#bookmark-confirm-form .save-btn {
    width: 100%;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #2563eb;
    color: white;
}
#bookmark-confirm-form .save-btn:hover {
    background-color: #1d4ed8;
}

/* --- END: V2 MODAL STYLES --- */

/* --- =================================== --- */
/* --- Adaptive Styles for Mobile & Tablet --- */
/* --- =================================== --- */

/* 
  These rules now apply if:
  1. The screen WIDTH is 800px or less (for portrait mode)
  OR
  2. The screen HEIGHT is 500px or less (for landscape mode)
*/
@media (max-width: 800px), (max-height: 800px) {

    /* --- START: NEW RESPONSIVE TITLE BAR STYLES --- */
    #flipbook-title-bar {
        /* Make the bar slimmer on mobile */
        padding: 0.6rem 0.75rem; /* ~8px vertical, 12px horizontal */
    }

    #flipbook-title-bar h1 {
        /* Reduce the font size of the title */
        font-size: 1.1rem; 
    }
    /* --- END: NEW RESPONSIVE TITLE BAR STYLES --- */

    /* --- 1. Main Controls Bar --- */
    #controls {
        gap: 10px; /* Use the slightly larger gap */
        
        /* THE FIX: Reduce vertical padding to make the bar slimmer */
        padding-top: 3px;
        padding-bottom: 3px;
        
        /* Keep horizontal padding for space from screen edges */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- 2. Unified Icon Buttons (Info, Grid, Share) --- */
    #controls #info-btn,
    #controls #grid-view-btn,
    #controls #zoom-btn,
    #controls #share-btn,
    #controls #music-btn {
        width: 42px;
        height: 42px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #controls #info-btn img,
    #controls #grid-view-btn img,
    #controls #share-btn img,
    #controls #music-btn img {
        width: 24px;
        height: 24px;
    }
    
    /* --- 3. Like Button (Special Case) --- */
    #controls #like-btn {
        width: 42px;
        height: 42px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #controls #like-btn .icon-heart-outline,
    #controls #like-btn .icon-heart-filled {
        width: 24px; 
        height: 24px;
    }

    /* --- 4. Page Indicator --- */
    #page-indicator {
        font-size: 14px;
        white-space: nowrap;
    }

    /* --- 5. Floating Navigation Arrows --- */
    #prev-btn,
    #next-btn {
        width: 35px;
        height: 80px;
        top:39%;
    }

    /* --- 6. Lightbox Styles --- */
    #share-box { padding: 20px; }
    #share-box h3 { font-size: 1.2rem; }
    #share-box p { font-size: 0.9rem; margin-bottom: 15px; }
    #share-url-input { padding: 8px; font-size: 0.9rem; }
    #copy-url-btn { width: 40px; padding: 8px; }
    #copy-url-btn svg { width: 100%; height: 100%; }
    
    #info-box { padding: 25px 20px; }
    .info-title { font-size: 1.5rem; }
    .info-description { font-size: 0.9rem; }

/* --- ADD THIS NEW RULE FOR THE NAV BUTTONS --- */
    #prev-btn,
    #next-btn {
        /* Make the buttons smaller on mobile */
        width: 30px;
        height: 75px;
    }

    #top-left-ui-container {
        top: 60px;
        left: 12px;
    }

    /* --- START: ADD/MERGE THESE RULES HERE --- */
    /* This makes the tray itself more compact on mobile */
    #bookmark-clips-tray {
        padding: 4px;
        gap: 5px;
    }
    
    /* This makes the clip icons smaller on mobile */
    .bookmark-clip-wrapper {
        width: 28px;
        height: 28px;
    }
    /* --- END: ADD/MERGE --- */

} /* End of media query */


/* --- ================================================ --- */
/* --- Special Styles for Landscape Mode on Devices --- */
/* --- ================================================ --- */

/* 
  These rules apply ONLY when the device is in landscape orientation
  AND its height is 800px or less.
*/
@media (orientation: landscape) and (max-height: 800px) {

    /* Hide the top title bar to maximize flipbook space */
    #flipbook-title-bar {
        display: none !important;
    }

    /* 
      THE DEFINITIVE FIX:
      We turn the container into a flexbox layout to gain powerful
      alignment controls, specifically for landscape mode.
    */
    body #container {
        display: flex !important;
        flex-direction: column !important; /* Keep child elements stacking normally */
        justify-content: center !important; /* This is the key for PERFECT VERTICAL centering */
        
        /* 
          This calculation remains correct: 100% of the screen height MINUS
          a safe area for the floating controls bar at the bottom.
        */
        height: calc(100vh - 72px) !important;
        
        /* Reset padding to prevent interference with centering */
        padding: 12px !important;
        
    }

    /* Make the hardcover invisible in landscape to save space */
    .flipbook .hard {
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* --- START: THIS IS THE FIX --- */
    /*
      Since the title bar is hidden, we must override the general mobile
      'top: 60px' style and move the container back to the top of the viewport.
    */
    #top-left-ui-container {
        top: 18px; /* Reset to the desktop position */
    }
    /* --- END: THE FIX --- */
    
}

/* --- ================================================ --- */
/* --- (3) Styles for Large Desktop Screens             --- */
/* --- ================================================ --- */

/* These rules apply ONLY when the screen width is 1200px or more */
@media (min-width: 1200px) {

    #controls {
        padding-bottom: 20px; /* More space from the bottom edge */
        gap: 20px; /* A slightly wider gap */
    }

    /* Make all icon buttons in the bar smaller */
    #controls #info-btn,
    #controls #grid-view-btn,
    #controls #zoom-btn,
    #controls #share-btn,
    #controls #like-btn,
    #controls #music-btn {
        width: 38px;
        height: 38px;
    }

    /* Adjust the image size inside the icon buttons */
    #controls #info-btn img,
    #controls #grid-view-btn img,
    #controls #share-btn img,
    #controls #music-btn img {
        width: 22px;
        height: 22px;
    }

    /* Adjust the heart icon size inside the like button */
    #controls #like-btn .icon-heart-outline,
    #controls #like-btn .icon-heart-filled {
        width: 22px; 
        height: 22px;
    }

    /* Make the page indicator text smaller */
    #page-indicator {
        font-size: 14px;
    }
}

/* --- NEW: Style for the muted music button --- */
#controls #music-btn.is-muted img {
    opacity: 0.4; /* Make the icon faint */
}

/* --- STYLES FOR MUSIC TOOLTIP --- */

.music-tooltip {
    position: absolute;
    bottom: calc(100% + 10px); /* Position it 10px above the control bar */
    left: 50%;
    transform: translateX(-50%); /* Center it horizontally */
    
    width: 280px;
    padding: 1rem;
    
    background-color: #999999; /* A dark, elegant slate color */
    color: #ffffff;
    border-radius: 8px;
    border: 1.5px solid #555555; /* A dark border */
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    
    display: flex;
    align-items: center;
    gap: 1rem;
    
    /* Animation for appearing */
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    animation: tooltip-fade-in 0.5s ease-out 1s forwards; /* Animate in after a 1s delay */
}

@keyframes tooltip-fade-in {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.music-tooltip .tooltip-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.music-tooltip .tooltip-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
}
.music-tooltip .tooltip-text span {
    font-size: 0.85rem;
    opacity: 0.8;
}

.music-tooltip .tooltip-close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #a0aec0;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}
.music-tooltip .tooltip-close-btn:hover {
    color: #ffffff;
}


/* --- NEW: Prevent Mobile Long-Press Image Saving --- */

/* Target the container for each flipbook page */
.flipbook .page {
    /* This is crucial: it makes the page a positioning container for the overlay */
    position: relative; 
}

/* ADD THIS NEW RULE */
.protective-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 4; /* Sits above the images but below the main hotspot container */
    
    /* NO pointer-events: none; needed. Its job IS to block clicks. */
}

/* --- NEW: Protection for Lightbox Image --- */

/* 1. Style the new wrapper */
.lightbox-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The image itself - this is the key rule */
.lightbox-image-wrapper img {
    display: block; /* Remove any extra space below the image */
    
    /* THE FIX: These two properties guarantee the image fits without cropping */
    max-width: 100%;
    max-height: 100%;
    
    /* Use object-fit as a fallback, though max-width/height is the primary mechanism here */
    object-fit: contain;

    /* Add a subtle shadow for a premium look */
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

/* 2. Create the invisible overlay on top of the wrapper */
.lightbox-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Make it completely transparent so it's invisible */
    background: transparent;

    /* This ensures it sits on top of the image */
    z-index: 1;
}

/* This is the div that will contain our image */
#lightbox-image-content {
    width: 100%;
    height: 100%;
    
    /* --- THE GUARANTEED FIX IS HERE --- */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}


/* The protective overlay is now applied to the content div */
#lightbox-image-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.text-block-overlay {
    position: absolute;
    z-index: 11;
    box-sizing: border-box;
    pointer-events: none; /* Make text non-selectable/clickable by default */
    line-height: 1.4;
}

/* --- NEW: Style for In-Page 360 Tour --- */

.in-page-360-wrapper {
    position: absolute;
    z-index: 10;
    background-color: #000; /* Black background while loading */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    overflow: hidden;
    border: 2px solid #555; /* A dark border */
    border-radius: 4px;
}

.in-page-360-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- NEW: Style for the Overlay Container --- */
.overlay-container {
    /* This container sits directly on top of the panzoom wrapper */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* The container itself is not clickable */
    z-index: 15; /* Above the panzoom wrapper */
}

/* Allow children of the overlay container (our hotspots) to be clickable */
.overlay-container > * {
    pointer-events: auto;
}

/* We also need to adjust the z-index of the panzoom wrapper */
.panzoom-wrapper {
    width: 100%;
    height: 100%;
    position: absolute; /* Changed from relative */
    top: 0;
    left: 0;
    z-index: 2; /* Sits below the overlay container */
}

/* And the main photo */
.main-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Sits at the very back */
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
}

/* =================================================================== */
/* --- STYLES FOR NEW FULLSCREEN-ONLY ZOOM BUTTON --- */
/* =================================================================== */

/* 1. Style the new button to match the exit button, but on the left */
#fullscreen-zoom-btn {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Position it in the bottom-left corner */
    z-index: 50005;
    background: rgba(0,0,0,0.4);
    border: 3px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    padding: 12px; /* Adjust padding for the zoom icon */
    box-sizing: border-box;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

#fullscreen-zoom-btn:hover {
    transform: scale(1.1);
}

#fullscreen-zoom-btn img {
    width: 100%;
    height: 100%;
}

/* 2. Style the "active" state, just like the original zoom button */
#fullscreen-zoom-btn.active {
    box-shadow: 0 0 12px 3px rgba(250, 204, 21, 0.7);
    background-color: rgba(250, 204, 21, 0.2);
    transform: scale(1.1); /* Slightly larger when active */
}

/* 3. Add the new button to the fullscreen "allow-list" */
/* This rule is already in your CSS for #exit-fullscreen-btn, we just add our new button to it */
body.fullscreen-active > #exit-fullscreen-btn,
body.fullscreen-active > #fullscreen-zoom-btn,
body.fullscreen-active > #fullscreen-zoom-reminder
{ /* ADD THIS SELECTOR */
    display: block !important;
}

/* =================================================================== */
/* --- V6: FINAL & DEFINITIVE TEXT BUTTON HOTSPOT OVERRIDE --- */
/* =================================================================== */

/*
  This selector is the most specific possible for this element.
  It uses the body ID (present on editor pages) and the container ID
  to guarantee it overrides all other font styles.
*/
body #container .overlay-container a.hotspot-text-button {
    /* --- FONT & TEXT PROPERTIES --- */
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    /* --- COLORS & BORDER --- */
    background-color: rgba(2, 136, 209, 0.85) !important;
    border: 2px solid #ffffff !important;
    
    /* --- Other visual styles --- */
    position: absolute;
    /* z-index: 10; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 1em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
}

body #container .overlay-container a.hotspot-text-button:hover {
    background-color: rgba(2, 136, 209, 1) !important;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ======================================================= */
/* --- V2: PROFESSIONAL NATIVE SHARE BUTTON & LAYOUT --- */
/* ======================================================= */

/* Hide the wrapper by default. JS will show it if the API is supported. */
#native-share-wrapper {
    display: none;
    margin-bottom: 1.5rem;
}

/* Style for the "Share via..." button */
.btn-native-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* Space between icon and text */
    width: 100%;
    
    background-color: #007bff; /* A vibrant, standard blue */
    color: #ffffff;
    
    border: none;
    border-radius: 8px;
    padding: 14px; /* A nice, tall button */
    
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.btn-native-share:hover {
    background-color: #0069d9;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

.btn-native-share svg {
    width: 1.2em;
    height: 1.2em;
}

/* Style for the "OR" separator */
#native-share-wrapper .form-separator-text {
    text-align: center;
    margin: 1.5rem 0;
    color: #aaa;
    font-weight: 500;
    position: relative;
}
#native-share-wrapper .form-separator-text span {
    background-color: white;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}
#native-share-wrapper .form-separator-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    z-index: 0;
}

/* =================================================================== */
/* --- DEFINITIVE FIX FOR PWA CENTERING IN STANDALONE MODE --- */
/* =================================================================== */

/* 
  This media query ONLY applies when the website is running as an installed PWA
  (i.e., launched from the home screen). It will be ignored in a normal browser tab.
*/
@media all and (display-mode: standalone) {

    /*
      We turn the main #container into a CSS Grid container.
      'place-items: center' is a powerful shorthand that perfectly
      centers its direct child (the .flipbook) both vertically and horizontally,
      regardless of minor parent height inconsistencies.
    */
    #container {
        display: grid !important;
        place-items: center !important;
        
        /* Ensure it takes up the desired available space */
        height: 90% !important; /* Use % instead of vh for better reliability inside PWA */
        width: 100% !important;
        padding: 12px !important; /* Keep a good padding */
    }
    
    #top-left-ui-container {
        top: 60px !important;
        left: 12px !important;
    }

}

/* --- START: THIS IS THE FIX --- */
/*
  This is a special override that ONLY applies when BOTH conditions are true:
  the app is an installed PWA AND it's in landscape mode.
*/
@media all and (display-mode: standalone) and (orientation: landscape) {
    
    /* Since the header is hidden, move the UI container back to the top */
    #top-left-ui-container {
        top: 18px !important;
    }
}
/* --- END: THE FIX --- */

/* =================================================================== */
/* --- STYLES FOR TABLE OF CONTENTS (TOC) SIDEBAR --- */
/* =================================================================== */

/* 1. Add a semi-transparent overlay for the background */
#toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 89999; /* Just below the sidebar */
    
    /* Animation for fade-in/out */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Not clickable when hidden */
}
#toc-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* 2. The Sidebar Container (using transform for animation) */
#toc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 90%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    z-index: 90000;
    
    display: flex;
    flex-direction: column;
    
    /* Animation */
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 0.3s ease-in-out;
}
#toc-sidebar:not(.hidden) {
    transform: translateX(0); /* Slide into view */
}

/* 3. The Sidebar Header */
.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0; /* Prevent header from shrinking */
}
.toc-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #343a40;
}
#toc-close-btn {
    font-size: 1.8rem;
    color: #6c757d;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* 4. The List Container (makes the list scrollable) */
#toc-list-container {
    padding: 1rem;
    overflow-y: auto; /* The key for scrolling long lists */
    flex-grow: 1; /* Allow this area to fill the available space */
}

/* 5. Styling the Nested List Items */
#toc-list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#toc-list-container ul ul {
    padding-left: 1.5rem; /* Indent sub-items */
    border-left: 2px solid #e9ecef;
    margin-left: 8px;
}

#toc-list-container li {
    margin-bottom: 0.5rem;
}

#toc-list-container a.toc-link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: #495057;
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.2s;
}
#toc-list-container a.toc-link:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}

/* ================================================ */
/* --- V2: PROFESSIONAL COMMENTS SIDEBAR STYLES --- */
/* ================================================ */

#comments-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 89999;
    opacity: 1;
    transition: opacity 0.3s ease;
}
#comments-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#comments-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px; /* (3) Slightly wider for better spacing */
    max-width: 90%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1); /* Softer shadow */
    z-index: 90000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
#comments-sidebar:not(.hidden) {
    transform: translateX(0);
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid #f3f4f6; /* Lighter border */
    background-color: #fff; /* (3) Cleaner white header */
    flex-shrink: 0;
}
.comments-header h3 {
    margin: 0;
    font-size: 0.9rem; /* (2) Reduced font size */
    font-weight: 600;
    color: #111827;
}
#comments-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
#comments-close-btn:hover {
    color: #374151;
}

#comments-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
}

/* --- Comment Item Styling --- */
.comment-item {
    display: flex;
    gap: 7.5px;
    margin-bottom: 9px;
}
.comment-item .comment-avatar {
    width: 24px; /* (2) Reduced avatar size */
    height: 24px;
    border-radius: 45%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* (1) Default avatar style */
.comment-item .comment-avatar.default {
    background-color: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7.5px;
}

.comment-item .comment-content-wrapper {
    flex-grow: 1;
}
.comment-item .comment-author {
    font-weight: 600; /* Bolder for emphasis */
    font-size: 0.75rem; /* (2) Reduced font size */
    margin-right: 8px;
    color: #1f2937;
}
.comment-item .comment-timestamp {
    font-size: 0.6rem;
    color: #9ca3af;
}
.comment-item .comment-text {
    font-size: 0.75rem; /* (2) Reduced font size */
    color: #374151;
    margin: 4px 0 6px 0;
    white-space: pre-wrap;
    line-height: 1.2; /* (3) Improved line spacing for readability */
    word-break: break-word; /* (3) Prevent long words from overflowing */
}
.comment-item .comment-actions {
    display: flex;
    gap: 9px; /* (3) Add spacing between action buttons */
}
.comment-item .comment-actions button {
    font-size: 0.72rem;
    background: none;
    border: none;
    color: #6b7280;
    font-weight: 450;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}
.comment-item .comment-actions button:hover {
    color: #111827;
}
.comment-item .comment-actions .delete-btn {
    color: #ef4444; /* Make delete button red */
}
.comment-item .comment-actions .delete-btn:hover {
    color: #b91c1c; /* Darker red on hover */
}

/* Nested/Reply Comments */
.comment-replies {
    margin-left: 30px; /* Adjust indent */
    margin-top: 3px;
    padding-left: 6px;
    border-left: 1.5px solid #f3f4f6; /* Lighter border */
}

/* --- Comment Form Styling --- */
.comment-form-container {
    padding: 15px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb; /* Lighter background */
    flex-shrink: 0;
}
#comment-form textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px;
    font-family: inherit;
    font-size: 0.75rem;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#comment-form textarea:focus {
    outline: none;
    border-color: #3b82f6; /* Blue focus ring */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
#char-counter {
    font-size: 0.75rem;
    color: #9ca3af;
}
#comment-form button[type="submit"] {
    background-color: #2563eb; /* A nice, modern blue */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}
#comment-form button[type="submit"]:hover {
    background-color: #1d4ed8;
}
#cancel-reply-btn {
    font-size: 0.75rem;
    margin-top: 7.5px;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
}
.comment-login-prompt {
    padding: 20px;
    text-align: center;
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* In-place Editing styles */
.comment-edit-form textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #3b82f6;
    font-size: 0.75rem;
}
.comment-edit-form button {
    margin-top: 5px;
    margin-right: 5px;
    font-size: 0.75rem;
    padding: 4px 8px;
    cursor: pointer;
}

/* =============================================== */
/* --- V2: PROFESSIONAL LIKERS LIGHTBOX STYLES --- */
/* =============================================== */

/* (3) A pale, pleasant background for the overlay */
#likers-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(249, 250, 251, 0.7); /* A very light, off-white gray */
    z-index: 90000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    backdrop-filter: blur(8px); /* Increased blur for a premium feel */
    -webkit-backdrop-filter: blur(8px);
}

#likers-box {
    position: relative;
    background: #ffffff;
    border-radius: 12px; /* Slightly larger radius for a softer look */
    padding: 0; /* Remove padding to have more control over sections */
    width: 100%;
    max-width: 360px; /* Slightly narrower for a more mobile-like feel */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Softer, more diffuse shadow */
    border: 1px solid rgba(0,0,0,0.05); /* (4) Subtle border for definition */
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden; /* Important for containing the border-radius */
}

#likers-box h3 {
    padding: 18px;
    text-align: center;
    font-size: 0.9rem; /* Reduced size for elegance */
    font-weight: 600;
    margin: 0;
    color: #111827; /* A dark, near-black color */
    border-bottom: 1px solid #f3f4f6; /* A very light separator line */
}

#likers-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px; /* Padding for the list items */
    min-height: 150px;
}

.liker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    text-decoration: none;
    color: #1f2937;
    border-radius: 8px;
    transition: background-color 0.2s;
}
.liker-item:hover {
    background-color: #f9fafb; /* Lighter hover color */
}

.liker-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* (1) Style for the default avatar icon */
.liker-avatar.default {
    background-color: #e5e7eb; /* A light gray background */
    color: #9ca3af; /* A medium gray for the icon itself */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.liker-name {
    font-weight: 500;
    font-size: 0.75rem;
}

.likers-footer {
    padding: 16px;
    background-color: #f9fafb; /* (4) Footer with a distinct background */
    border-top: 1px solid #f3f4f6;
    text-align: center;
}

.likers-footer .action-btn {
    width: 100%;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: all 0.2s;
    display: flex; /* (4) Use flex to align icon and text */
    align-items: center;
    justify-content: center;
    gap: 7.5px;
}

/* (2) The new magenta "Like" button */
.likers-footer .action-btn.like {
    background-color: #d946ef; /* Magenta */
    color: white;
    box-shadow: 0 4px 14px rgba(217, 70, 239, 0.25); /* Subtle magenta glow */
}
.likers-footer .action-btn.like:hover {
    background-color: #c026d3; /* Darker magenta on hover */
    transform: translateY(-2px);
}
.likers-footer .action-btn.like svg {
    width: 18px;
    height: 18px;
}

/* The "Unlike" button */
.likers-footer .action-btn.unlike {
    background-color: #fff;
    color: #374151; /* Dark gray text */
    border: 1px solid #d1d5db; /* Gray border */
}
.likers-footer .action-btn.unlike:hover {
    background-color: #f9fafb;
}

/* Spinner for loading state */
.likers-loader {
    width: 30px;
    height: 30px;
    border: 3px solid #e5e7eb;
    border-top-color: #9ca3af;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

/* ================================================= */
/* --- NEW: STYLES FOR PROGRESSIVE IMAGE LOADING --- */
/* ================================================= */
.page-image-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.page-photo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease-in-out;
}

.low-quality-img {
    /* Optional: Apply a blur to make the transition smoother */
    filter: blur(0px);
    z-index: 2;
}

.high-quality-img {
    /* The high-res image starts completely transparent */
    opacity: 0;
    z-index: 3;
}

.high-quality-img.loaded {
    /* When the 'loaded' class is added, it fades in */
    opacity: 1;
}

/* ========================================= */
/* --- PAGE BORDER & PAPER EDGE EFFECT --- */
/* ========================================= */

/* 
   We use an ::after pseudo-element. This draws an invisible, un-clickable 
   box exactly the same size as the page, and places a border ON TOP of the image. 
   This guarantees the image won't hide the border, and it won't break the flipping math.
*/
.flipbook .page {
    position: relative; /* Required for the pseudo-element to anchor correctly */
}

.flipbook .page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    pointer-events: none; /* Crucial: Lets clicks pass through to hotspots/videos below */
    
    /* Draw the 1px subtle gray border */
    border: 1.2px solid rgba(0, 0, 0, 0.15);
    z-index: 9; /* Ensures it sits on top of the page image */
}

/* --- LTR (Standard) Center Fold Shadows --- */
/* Odd pages are on the RIGHT. Shadow is on the LEFT edge. */
#container:not(.rtl) .flipbook .page.odd::after {
    background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 9%);
}
/* Even pages are on the LEFT. Shadow is on the RIGHT edge. */
#container:not(.rtl) .flipbook .page.even::after {
    background: linear-gradient(to left, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 9%);
}

/* --- RTL (Manga) Center Fold Shadows --- */
/* Odd pages are on the LEFT. Shadow is on the RIGHT edge. */
#container.rtl .flipbook .page.odd::after {
    background: linear-gradient(to left, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 9%);
}
/* Even pages are on the RIGHT. Shadow is on the LEFT edge. */
#container.rtl .flipbook .page.even::after {
    background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 9%);
}

/* ============================= */
/* --- CATALOG BRIDGE BUTTON --- */
/* ============================= */

.catalog-bridge-link {
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.bridge-badge {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 5px 15px 5px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.bridge-badge:hover {
    transform: scale(1.05);
    border-color: #bf1932;
}

.bridge-badge img {
    height: 18px;
    width: auto;
}

.bridge-badge span {
    font-size: 0.8rem;
    font-weight: 800;
    color: #003e67;
}

/* =========================== */
/* --- TRAVEL BRIDGE BADGE --- */
/* =========================== */
.travel-bridge-link {
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.bridge-badge.travel {
    border-color: #0ea5e9; /* Travel Blue */
}

.bridge-badge.travel:hover {
    background: #f0f9ff;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
}

/* Ensure the text color matches your branding */
.bridge-badge.travel span {
    color: #44403c;
}

/* ======================================================= */
/* --- UNIVERSAL PAGE FLIP HINT (LEFT OR RIGHT CORNER) --- */
/* ======================================================= */
.flip-corner-hint {
    position: absolute;
    bottom: 0;
    width: 90px; /* Adjust based on your icon size */
    height: 90px;
    pointer-events: none;
    z-index: 100;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    animation: cornerPulse 3s infinite;
}

/* Side Specific Pining */
.flip-corner-right {
    right: 0;
}

.flip-corner-left {
    left: 0;
}

@keyframes cornerPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* ======================== */
/* --- PRINT PDF BUTTON --- */
/* ======================== */
/* --- 3D LIQUID GLASS PRINT BUTTON --- */
#print-pdf-btn {
    position: relative;
    padding: 12px 25px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(16, 185, 129, 0.2); /* Liquid Green Tint */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #065f46;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* The "Liquid" sheen effect */
#print-pdf-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    transform: rotate(30deg);
    transition: all 0.6s;
    opacity: 0;
}

#print-pdf-btn:hover {
    transform: translateY(-3px);
    background: rgba(16, 185, 129, 0.4);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
    color: #047857;
}

#print-pdf-btn:hover::before {
    opacity: 1;
    left: -10%;
    top: -10%;
}

#print-pdf-btn:active {
    transform: scale(0.95);
}

#print-pdf-btn:disabled {
    cursor: wait;
    opacity: 0.6;
    filter: grayscale(0.5);
}