/**
 * SAPHIR Menu - shared public styles (landing page + menu)
 * Navy and gold glassmorphism over the background photo.
 * Tailwind (CDN) supplies the utilities; this file holds the custom tokens.
 */

/* ==================== BACKGROUND IMAGE ====================
   Single source of truth for the brand background photo.
   Swap ONLY this URL to change the background everywhere. */
:root {
    /* Bump ?v= whenever the photo file is replaced, so browsers drop the cached copy. */
    --bg-image: url('../assets/images/saphir-background.jpg?v=10');
    /* One light vertical shade over the photo; the glass cards carry readability,
       so keep this light to preserve the photo's original colours. */
    --bg-overlay: linear-gradient(180deg, rgba(5, 10, 24, 0.25), rgba(5, 10, 24, 0.70));
}

/* The photo lives on a fixed, viewport-sized layer (not on body/html), so
   `cover` scales it to the screen, not to the full scrollable page height.
   No background-attachment:fixed: mobile browsers size that against the whole
   document, which zooms and softens the photo. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--bg-overlay), var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto !important; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in   { animation: fadeInUp 0.6s ease-out both; }
.fade-in-1 { animation-delay: 0.05s; }
.fade-in-2 { animation-delay: 0.15s; }
.fade-in-3 { animation-delay: 0.25s; }
.fade-in-4 { animation-delay: 0.35s; }
.fade-in-5 { animation-delay: 0.45s; }

/* Glassmorphism base: frosted navy-tinted glass, thin white border, crisp rounded edges */
.glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 32px rgba(2, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Dominant CTA glass: same frosted treatment, sapphire-tinted for prominence */
.glass-cta {
    background: linear-gradient(135deg, rgba(20, 43, 102, 0.70), rgba(10, 22, 51, 0.55));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(2, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Footer glass: darker/denser for guaranteed text contrast */
.glass-footer,
.glass-strong {
    background: rgba(5, 10, 24, 0.60);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 32px rgba(2, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Metallic gold: primary CTA and discount badge */
.gold-metal { background: linear-gradient(135deg, #F3D77A, #D4AF37 55%, #A8852A); }
.gold-cta {
    background: linear-gradient(135deg, #F3D77A, #D4AF37 55%, #A8852A);
    border: 1px solid rgba(243, 215, 122, 0.60);
    box-shadow: 0 8px 32px rgba(2, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Focused search: gold-tinted glass */
.search-glass:focus-within {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(243, 215, 122, 0.60);
}
.search-glass:focus-within input,
.search-glass:focus-within i { color: #F3D77A; }

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

/* Arabic typography: swap font family, keep sizes/spacing untouched */
body.font-arabic { font-family: 'Cairo', 'Tajawal', sans-serif; }
body.font-arabic .font-serif { font-family: 'El Messiri', 'Cairo', 'Tajawal', sans-serif; }

html { scroll-behavior: smooth; }

/* Back-arrow icon should point the opposite direction in RTL */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* Top bar: always translucent/blurred so it stays legible over the hero image.
   The blur lives on a ::before layer, because backdrop-filter directly on a
   position:fixed element triggers an iOS Safari repaint bug (bar scrolls away). */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#top-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 10, 24, 0.50);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Floating scroll-to-top button: hidden until JS reveals it (past hero) */
#scroll-top-btn {
    position: fixed;
    bottom: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 30;
}

/* Category nav: hide scrollbar but keep native touch/drag scroll */
#category-nav { scrollbar-width: none; -ms-overflow-style: none; }
#category-nav::-webkit-scrollbar { display: none; }

/* Category bar (browse button + chips): static in normal flow until JS marks it
   .is-sticky (it has reached the fixed top bar) - see menu.js initStickyNav().
   The blur sits on ::before, like #top-bar, so the panel inside keeps its own backdrop blur. */
#category-bar {
    position: relative;
    z-index: 20;
}
#category-bar.is-sticky {
    position: sticky;
    top: 72px; /* directly below the fixed top bar */
}
#category-bar.is-sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 10, 24, 0.60);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.cat-nav-active {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(243, 215, 122, 0.60);
    color: #F3D77A !important;
}

/* Browse-all button: same height as a chip (text-sm 20px line + py-2.5 + 1px glass border) */
.cat-all-btn { width: 42px; height: 42px; border-radius: 12px; cursor: pointer; }
.cat-all-btn:focus-visible { outline: 2px solid rgba(243, 215, 122, 0.6); outline-offset: 2px; }
.cat-all-btn .icon-close,
.cat-all-btn[aria-expanded="true"] .icon-grid { display: none; }
.cat-all-btn[aria-expanded="true"] .icon-close { display: block; }
.cat-all-btn[aria-expanded="true"] {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(243, 215, 122, 0.60);
    color: #F3D77A;
}

/* All-categories panel: glass under the bar, fade + slide down (~200ms) */
.cat-panel {
    position: absolute;
    top: 100%;
    inset-inline: 1rem;
    max-width: 36rem;
    margin-inline: auto;
    max-height: var(--cat-panel-max, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    border-radius: 1.5rem;
    /* the glass gradient over a dark navy base keeps text legible over the photo */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)), rgba(5, 10, 24, 0.78);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.cat-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}
html.cat-panel-lock { overflow: hidden; scrollbar-gutter: stable; }

/* Header: title, then a thin gold line with a small diamond (brand divider) */
.cat-panel-head { margin-bottom: 0.875rem; }
.cat-panel-divider { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.cat-panel-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4AF37);
}
.cat-panel-divider span:last-child { background: linear-gradient(270deg, transparent, #D4AF37); }
.cat-panel-divider i {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #F3D77A, #A8852A);
}

.cat-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.cat-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.cat-card:active { transform: scale(0.98); }
.cat-card:focus-visible { outline: 2px solid rgba(243, 215, 122, 0.6); outline-offset: 2px; }
.cat-card.is-current { border-color: rgba(243, 215, 122, 0.60); }
.cat-card-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #142B66, #0A1633); }
.cat-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(5, 10, 24, 0.55));
    pointer-events: none;
}
.cat-card-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #D4AF37; }

/* Collapsible category sections: the name bar is the toggle.
   grid-template-rows 1fr -> 0fr animates the height without JS measuring. */
.section-toggle { cursor: pointer; }
.section-toggle:focus-visible { outline: 2px solid rgba(243, 215, 122, 0.6); outline-offset: 2px; }
.section-toggle .chevron { transition: transform 0.3s ease; }
.category-section.is-collapsed .section-toggle .chevron { transform: rotate(-90deg); }
html[dir="rtl"] .category-section.is-collapsed .section-toggle .chevron { transform: rotate(90deg); }

.section-content {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease-out;
}
.category-section.is-collapsed .section-content { grid-template-rows: 0fr; }
.section-inner { min-height: 0; overflow: hidden; }
/* Fully open and idle: let card shadows render instead of being clipped */
.category-section.is-settled .section-inner { overflow: visible; }

/* Popular carousel: horizontal snap scroller, scrollbar hidden */
.snap-scroller { scrollbar-width: none; -ms-overflow-style: none; }
.snap-scroller::-webkit-scrollbar { display: none; }

/* Page loader (inline-safe: no Tailwind needed, so it paints before the CDN runs) */
#pageLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #050A18 0%, #0A1633 55%, #050A18 100%);
    transition: opacity 0.4s ease;
}
#pageLoader.is-hiding { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; color: #F5F7FC; }
.loader-logo  { width: 220px; max-width: 70vw; height: auto; display: block; margin: 0 auto 26px; animation: loaderFloat 1.6s ease-in-out infinite; }
.loader-bar      { width: 160px; height: 3px; background: rgba(255, 255, 255, 0.18); border-radius: 99px; margin: 0 auto; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #D4AF37, #F3D77A); border-radius: 99px; animation: loaderFill 1.4s ease-in-out forwards; }
@keyframes loaderFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes loaderFill  { to { width: 100%; } }

/* ==================== LANDING PAGE (index.php) ==================== */

/* Brand divider: thin gold line with a tiny diamond in the centre */
.brand-divider { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.brand-divider span { display: block; flex: 0 0 40px; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, #D4AF37); }
.brand-divider span:last-child { background: linear-gradient(270deg, transparent, #D4AF37); }
.brand-divider i { display: block; flex: 0 0 6px; width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #F3D77A, #A8852A); }

/* Venue gallery: snap scroller, 4:5 cards with the caption overlaid on the photo */
.gallery-track { scrollbar-width: none; -ms-overflow-style: none; scroll-padding-inline: 1.5rem; -webkit-overflow-scrolling: touch; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card { cursor: zoom-in; display: block; }
.gallery-card:focus-visible { outline: 2px solid rgba(243, 215, 122, 0.6); outline-offset: 2px; }
.gallery-caption { background: linear-gradient(180deg, transparent, rgba(5, 10, 24, 0.88)); pointer-events: none; text-align: start; }
.gallery-dot { width: 6px; height: 6px; border-radius: 99px; background: rgba(212, 175, 55, 0.30); transition: width 0.25s ease, background 0.25s ease; }
.gallery-dot.is-active { width: 16px; background: #D4AF37; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    background: rgba(2, 6, 18, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox-figure { margin: 0; max-width: 100%; text-align: center; }
.lightbox-figure img { max-width: 100%; max-height: calc(100dvh - 9rem); border-radius: 1rem; object-fit: contain; }
.lightbox-close, .lightbox-nav {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F5F7FC;
    cursor: pointer;
}
.lightbox-close { top: 1rem; inset-inline-end: 1rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }
html.lightbox-lock { overflow: hidden; }

/* Social buttons: gold icons, gold glow on hover / tap */
.social-btn:hover,
.social-btn:active,
.social-btn:focus-visible {
    border-color: rgba(243, 215, 122, 0.60);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.45), 0 8px 32px rgba(2, 6, 18, 0.55);
    outline: none;
}

/* ==================== PROMO CAROUSEL (2+ active banners) ==================== */
.promo-carousel { max-width: 28rem; margin-inline: auto; position: relative; }
.promo-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.promo-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    aspect-ratio: 4 / 5;
    background: #0A1633;
}
.promo-slide img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
/* dots get their own strip under the poster so they never cover its text */
.promo-dots {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0 0.75rem;
    background: #0A1633;
}
.promo-dots .gallery-dot { cursor: pointer; border: 0; padding: 0; }

/* Odd category count: the last card spans both columns with a wider (21:9) cover */
.cat-card-wide { grid-column: 1 / -1; }
.cat-card-wide .cat-card-media { aspect-ratio: 21 / 9; }