/* ===== MENU PAGE STYLES ===== */

/* Hero Banner */
.menu-page-header {
    height: 620px; /* Increased height for larger visible background */
    background-image: url('../pics/hero4.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end; /* So overlap area is near bottom for headings */
    justify-content: center;
    padding-bottom: 7rem; /* space where headings will overlay */
}
/* Extend black filter below hero into overlap area */
.menu-page-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0rem; /* match padding-bottom / margin-top overlap */
    height: 7rem;
    background: rgba(0,0,0,0.6);
    z-index: 1;
    pointer-events: none;
}
/* Use e.png for all widths smaller than tablet */
@media (max-width: 1024px) {
    .menu-page-header { background-image: url('../pics/e.webp'); }
}

.menu-header-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-header-content {
    text-align: center;
    padding: 2rem;
    max-width: 800px;
    margin-top: 20%;
}

.menu-header-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.menu-header-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 0;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}

/* ===== MENU CATEGORIES - New Collapsible Design ===== */
.menu-categories {
    padding: 4rem 0; /* vertical padding inside block */
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    margin-top: clamp(2rem, 5vw, 3.5rem) !important; /* gap below hero */
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) { .menu-categories { margin-top: 2.2rem !important; } }
@media (max-width: 576px) { .menu-categories { margin-top: 2.6rem !important; } }
@media (max-width: 420px) { .menu-categories { margin-top: 3rem !important; } }

.menu-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #ffd700;
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 6px rgba(255,215,0,0.3);
    position: relative;
    z-index: 3;
}

.menu-section-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 3px 12px rgba(0,0,0,0.55);
    position: relative;
    z-index: 3;
}

.menu-category-section {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
    display: block !important;
    visibility: visible !important;
}

.menu-category-section:hover {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.1);
}

.category-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background: rgba(255, 215, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    visibility: visible !important;
}

.category-header:hover {
    background: rgba(255, 215, 0, 0.1);
}

.category-header.active {
    background: rgba(255, 215, 0, 0.15);
    border-bottom-color: rgba(255, 215, 0, 0.3);
}

.category-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #ffd700;
    margin: 0;
    font-weight: 600;
    display: block !important;
    visibility: visible !important;
}

.category-toggle {
    font-size: 2rem;
    color: #ffd700;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    visibility: visible !important;
}

.category-header.active .category-toggle {
    transform: rotate(45deg);
    background: rgba(255, 215, 0, 0.2);
}

.category-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: rgba(0, 0, 0, 0.2);
}

.category-content.active {
    max-height: 2000px;
    padding: 2rem;
}

.category-content .dishes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
}

.category-content.active .dishes-grid {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Horizontal Carousel Layout for Category Dishes ===== */
.carousel-window {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 0.5rem;
}

.carousel-grid {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ffd700 rgba(255,255,255,0.1);
    padding: 0.2rem 0 0.8rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.carousel-grid::-webkit-scrollbar { height: 10px; }
.carousel-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.carousel-grid::-webkit-scrollbar-thumb { background: linear-gradient(135deg,#ffd700,#c7a200); border-radius: 10px; }

.carousel-grid .dish-card { flex: 0 0 clamp(240px,28%,300px); scroll-snap-align: start; }

.carousel-nav { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }

.carousel-btn {
    background: rgba(255,215,0,0.15);
    color: #ffd700;
    border: 2px solid rgba(255,215,0,0.4);
    padding: 0.7rem 1.2rem;
    font-size: 1.2rem;
    border-radius: 12px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.carousel-btn:hover:not(:disabled) { background: rgba(255,215,0,0.3); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,215,0,0.15); }
.carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.6); }

@media (max-width: 900px) { .carousel-grid .dish-card { flex: 0 0 40%; } }
@media (max-width: 700px) { .carousel-grid .dish-card { flex: 0 0 55%; } }
@media (max-width: 520px) { .carousel-grid .dish-card { flex: 0 0 70%; } }
@media (max-width: 420px) { .carousel-grid .dish-card { flex: 0 0 82%; } }

/* Dishes Grid */
.dishes-grid {
    display: grid;
    /* Reduced default columns from 5 -> 4 so each dish gets more width on typical laptops */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
}
/* Ultra‑wide screens can still show 5 columns */
@media (min-width: 1600px){
    .dishes-grid { grid-template-columns: repeat(5,1fr); }
}

/* Dish Card */
.dish-card {
    background: rgba(35, 35, 35, 0.1);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(255,215,0,0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.dish-card:hover {
    transition: all 2s ease;
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255,215,0,0.2);
    border-color: rgba(255,215,0,0.5);
    background: linear-gradient(135deg, #fef0a5 0%, #878015 60%, #ffd700 100%);
}

.dish-card-image {
    height: 195px; /* enlarged further */
    overflow: hidden;
    position: relative;
}

.card-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.dish-card:hover .card-photo {
    transition: all 1s ease;
    transform: scale(1.1);
}

.dish-card-content {
    padding: 1rem 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
}

.dish-card-price {
    display: flex;
    text-align: center;
    color: #ffd700;
    font-size: 1.3rem;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.dish-card:hover .dish-card-price {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    top: 5%;
}

.dish-card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #ffd700;
    margin-bottom: 1rem;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    transition: opacity 0.3s;
}

.dish-card:hover .dish-card-title {
    opacity: 0;
    visibility: hidden;
}

.dish-card-order-btn {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffff00, #ffd700);
    color: #141313;
    border: none;
    border-radius: 20px;
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.15);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dish-card:hover .dish-card-order-btn {
    opacity: 1;
    pointer-events: auto;
    transition: all 1s ease;
    transform: translateX(-50%) scale(1.12);
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.15);
}

.dish-card-order-btn:hover {
    transition: all 1s ease;
    box-shadow: 0 0 18px 6px #ffd700, 0 4px 16px rgba(37, 211, 102, 0.15);
    background: linear-gradient(135deg, #ffd700 60%, #ffff00 100%);
    color: #000;
    transition: box-shadow 0.3s, background 0.3s, color 0.3s;
}

/* Special Dishes Section */
.special-dishes-section {
    padding: 3rem 0;
    background: rgba(15, 15, 15, 0.7);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Menu Items Section */
.menu-items-section {
    padding: 3rem 0;
    background: rgba(10, 10, 10, 0.8);
}

/* Category Sections */
.menu-category-section {
    display: none;
}

.menu-category-section.active {
    display: block;
}

.category-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #ffd700;
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dishes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .menu-header-title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .dishes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .menu-header-title {
        font-size: 2.5rem;
    }
    
    .menu-header-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .dishes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .menu-page-header {
        height: 200px;
    }
    
    .menu-header-title {
        font-size: 2rem;
    }
    
    .menu-header-subtitle {
        font-size: 1rem;
    }
    
    .menu-nav {
        gap: 0.7rem;
    }
    
    .menu-category-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .dishes-grid {
        grid-template-columns: 1fr;
    }
    
    .menu-page-header {
        height: 480px;
        margin-top: 0; /* remove gap so image touches top */
    }
    
    .menu-header-title {
        font-size: 1.8rem;
    }
    
    .menu-header-content {
        padding: 1rem;
    }
    
    .menu-nav {
        padding: 0 1rem;
    }
    
    .menu-category-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* ===== MENU HERO COMPACT (Only navbar over image) ===== */
/* Remove overlay text so only logo + hamburger sit over hero image */
.menu-header-content { display: none; }
/* Ensure hero always flush at very top (override any earlier margins) */
.menu-page-header { margin-top: 0 !important; padding-top: 0 !important; }
/* Slight taller hero on large screens since text removed */
@media (min-width: 1400px) { .menu-page-header { height: 500px; } }
@media (max-width: 1200px) { .menu-page-header { height: 460px; } }
@media (max-width: 992px) { .menu-page-header { height: 420px; } }
@media (max-width: 768px) { .menu-page-header { height: 380px; } }
@media (max-width: 576px) { .menu-page-header { height: 340px; } }
@media (max-width: 480px) { .menu-page-header { height: 320px; } }
@media (max-width: 380px) { .menu-page-header { height: 300px; } }

/* === Unified Hero Text (restore header content & hide duplicate category heading) === */
.menu-header-content { display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; max-width: 900px; margin: 0 auto; z-index: 3; }
.menu-header-overlay { background: rgba(0,0,0,0.55); }
.menu-page-header { align-items: center; padding-bottom: 0; }
.menu-page-header::after { display: none; } /* remove extended filter strip */
.menu-section-title, .menu-section-subtitle { display: none !important; }
.menu-header-title { margin-bottom: 0.8rem; }
.menu-header-subtitle { margin-top: 0; font-size: 1.05rem; }

/* Mobile: push hero text below large fixed navbar/logo to avoid overlap */
@media (max-width: 768px) {
        .menu-header-content { margin-top: 0; }
}
@media (max-width: 576px) {
        .menu-header-content { margin-top: 0; }
}
@media (max-width: 420px) {
        .menu-header-content { margin-top: 0; }
}
@media (max-width: 360px) {
        .menu-header-content { margin-top: 0; }
}

/* === Enhanced Mobile Hero Refinements === */
/* Layered gradients for better text contrast & smooth transition */
.menu-page-header::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.2) 75%, rgba(10,10,10,0.9) 100%);
        z-index: 0;
}
/* Re‑use ::after for soft fade at bottom (desktop & mobile) */
.menu-page-header::after {
    content: '' !important;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 220px; /* deeper black fade */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(5,5,5,0.75) 55%, #020202 85%);
    z-index: 1;
    display: block !important;
}
.menu-header-overlay { background: transparent; position: relative; z-index: 2; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.menu-header-title { font-size: clamp(2rem, 6.2vw, 3.3rem); letter-spacing: 1px; text-shadow: 0 4px 18px rgba(0,0,0,0.7), 0 0 8px rgba(255,215,0,0.35); }
.menu-header-title::after { content:''; display:block; width:120px; height:4px; margin:0.9rem auto 0; background:linear-gradient(90deg,#ffd700,#ff9500,#ffd700); border-radius:3px; box-shadow:0 0 15px rgba(255,215,0,0.5); }
.menu-header-subtitle { font-size: clamp(0.9rem, 2.6vw, 1.05rem); line-height:1.5; max-width:650px; text-shadow:0 3px 14px rgba(0,0,0,0.65); }

/* Mobile spacing: keep background fixed at top; only push text below navbar using margin */
@media (max-width: 768px) {
    .menu-page-header { padding-top: 0; } /* ensure image starts behind navbar */
    .menu-header-content { margin-top: clamp(9.5rem, 34vw, 11.5rem); }
}
@media (max-width: 576px) {
    .menu-header-content { margin-top: clamp(10rem, 38vw, 12rem); }
}
@media (max-width: 480px) {
    .menu-header-content { margin-top: clamp(10.5rem, 42vw, 12.5rem); }
}
@media (max-width: 420px) {
    .menu-header-content { margin-top: clamp(11rem, 46vw, 13rem); }
}
@media (max-width: 380px) {
    .menu-header-content { margin-top: clamp(11.5rem, 50vw, 13.5rem); }
}
@media (max-width: 340px) {
    .menu-header-content { margin-top: clamp(12rem, 54vw, 14rem); }
}
/* Landscape short heights: reduce offset a bit */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 820px) {
    .menu-header-content { margin-top: 6.5rem; }
    .menu-header-subtitle { display: none; }
}

/* === Mobile Expanded Hero (taller bg + deeper black fade) === */
@media (max-width: 768px) {
    .menu-page-header { height: 480px !important; }
    .menu-page-header::after { height: 260px !important; }
}
@media (max-width: 576px) {
    .menu-page-header { height: 450px !important; }
    .menu-page-header::after { height: 250px !important; }
}
@media (max-width: 480px) {
    .menu-page-header { height: 420px !important; }
    .menu-page-header::after { height: 240px !important; }
}
@media (max-width: 420px) {
    .menu-page-header { height: 400px !important; }
    .menu-page-header::after { height: 230px !important; }
}
@media (max-width: 380px) {
    .menu-page-header { height: 380px !important; }
    .menu-page-header::after { height: 220px !important; }
}
@media (max-width: 340px) {
    .menu-page-header { height: 360px !important; }
    .menu-page-header::after { height: 210px !important; }
}

/* === Simplified Menu Dish Cards (adjusted for larger laptop presentation) === */
/* Enlarged min-height so image + content feel balanced (was 240px) */
.dish-card {
    height: auto !important;
    min-height: 350px; /* increased for laptop */
    cursor: default;
    background: rgba(35,35,35,0.12) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Remove dramatic hover elevation / gradient */
.dish-card:hover {
    transform: none !important;
    background: rgba(35,35,35,0.18) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    border-color: rgba(255,215,0,0.35);
}

/* Enlarged image band (was 158px) to match homepage proportions */
.dish-card-image {
    height: 228px !important;
    display: block;
}
.dish-card-image .card-photo, .dish-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* fill area cleanly */
    transform: none !important;
}

/* Keep title always visible */
.dish-card-title {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}
.dish-card:hover .dish-card-title { opacity: 1 !important; visibility: visible !important; }

/* Price inline & always visible (remove absolute center positioning) */
.dish-card-price {
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    margin: 0.15rem 0 0.35rem !important;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}
.dish-card:hover .dish-card-price { opacity: 1 !important; visibility: visible !important; top: auto !important; }

/* Order / Add to Cart button persistent (converted from hover reveal) */
.dish-card-order-btn, .add-to-cart-btn {
    position: static !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
    margin-top: 0.4rem !important;
    background: linear-gradient(135deg,#ffd700,#ffb400) !important;
    color: #141313 !important;
    box-shadow: 0 4px 14px rgba(255,215,0,0.25) !important;
}
.dish-card:hover .dish-card-order-btn, .dish-card:hover .add-to-cart-btn {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(255,215,0,0.3) !important;
}

/* Neutralize any previous hover fade-outs */
.dish-card:hover .card-photo { transform: none !important; }
.dish-card:hover .dish-card-order-btn { opacity: 1 !important; }

/* Content spacing refinement */
.dish-card-content {
    position: relative;
    padding: 0.75rem 0.9rem 1rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
}

/* Touch feedback subtle press */
.dish-card:active { box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
/* Enhanced flipbook styling */
.flip-menu { position:relative; background:linear-gradient(135deg,#111,#1a1a1a); padding:4rem 0; }
#flipbook { 
    margin:0 auto; 
    box-shadow:0 18px 48px -12px rgba(0,0,0,.6),0 8px 22px -8px rgba(255,215,0,.18); 
    border:2px solid rgba(255,215,0,.28); 
    background:#181818; 
    border-radius:18px; 
    overflow:hidden; 
    display:block; 
    position:relative;
    width:100%; /* fill wrapper */
    max-width:980px;
    margin-bottom:0.5rem;
}
#flipbook .turn-page { background:#111 !important; border:none !important; }
/* Prevent stacked images flash before Turn.js init */
html:not(.flipbook-active) #flipbook > div { display:none; }
html:not(.flipbook-active) #flipbook > div:first-child { display:block; }
#flipbook .turn-page { display:flex; align-items:center; justify-content:center; background:#111 !important; }
#flipbook .turn-page img { filter:brightness(.98) contrast(1.05); object-fit:contain; width:100%; height:100%; }
/* Generic images inside flipbook (fallback) */
#flipbook > div > img { width:100%; height:100%; object-fit:contain; display:block; background:#111; }
@media (max-width:1180px){ #flipbook{ max-width:900px; } }
@media (max-width:1024px){ #flipbook{ max-width:820px; } }
@media (max-width:880px){ #flipbook{ max-width:92vw; } }
@media (max-width:740px){ #flipbook{ max-width:96vw; border-radius:16px; } }
/* ====== Enhanced visual book effects ====== */
#flipbook-wrapper{max-width:1160px;margin:0 auto;padding:1.8rem 2rem;border-radius:28px;position:relative;background:radial-gradient(circle at 30% 35%,#222 0%,#101010 70%);box-shadow:0 28px 60px -18px rgba(0,0,0,.75),0 0 0 2px rgba(255,215,0,.08),inset 0 0 38px -10px rgba(255,215,0,.15);} 
#flipbook-wrapper:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(255,215,0,.35),rgba(255,107,53,.15) 45%,rgba(255,215,0,.25));pointer-events:none;opacity:.85;mix-blend-mode:overlay;}
#flipbook .turn-page{position:relative;overflow:hidden;box-shadow:inset 0 0 18px -6px rgba(0,0,0,.8);background:#181818 !important;}
#flipbook .turn-page:before{content:"";position:absolute;top:0;bottom:0;width:38px;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0));opacity:.55;mix-blend-mode:overlay;}
#flipbook .turn-page.odd:before{left:auto;right:0;background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,0));}
#flipbook:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,215,0,.45),rgba(255,215,0,0) 55%);opacity:.35;pointer-events:none;}
#flipbook.show-single:after{display:none;}
#flipbook .flipbook-page-number{position:absolute;bottom:6px;right:10px;font:600 .65rem 'Montserrat',sans-serif;color:rgba(255,215,0,.75);letter-spacing:.5px;padding:.25rem .5rem;border-radius:10px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);box-shadow:0 0 0 1px rgba(255,215,0,.25);} 
.flipbook-bottom-nav .flipbook-page-indicator{font:600 .8rem 'Montserrat',sans-serif;color:#ffd700;letter-spacing:.75px;display:inline-block;padding:.35rem .9rem;border-radius:30px;background:linear-gradient(135deg,#222,#181818);box-shadow:0 4px 14px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,215,0,.15);}