/* =============================================================
   ORIS — THE MASTERPIECE COLLECTION · MENU 6
   4-in-1 Fusion: Globe → Radial Wheel → Cinematic → Magazine
   Palette: Titanium Platinum (#F8F9FB) · Charcoal Slate (#26282E) · Solar Gold (#D4AF37)
   ZERO: Red · Pink · Black · Blue · Navy · Purple · Green · Beige
   ============================================================= */

:root {
    --bg:           #F8F9FB;
    --bg-alt:       #EEF1F6;
    --slate:        #26282E;
    --slate-mid:    #3D4149;
    --slate-muted:  #636872;
    --gold:         #D4AF37;
    --gold-dark:    #B59020;
    --gold-pale:    rgba(212,175,55,0.12);
    --white:        #FFFFFF;
    --card-glass:   rgba(255,255,255,0.82);

    --font-en:   'Cinzel', serif;
    --font-ar:   'El Messiri', sans-serif;
    --font-body: 'Tajawal', sans-serif;
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:var(--font-body); color:var(--slate); -webkit-font-smoothing:antialiased; }
body.locked { overflow:hidden; }
::selection { background:var(--gold); color:var(--white); }

/* =============================================================
   NEBULA PARTICLES CANVAS (always behind everything)
   ============================================================= */
#nebula-canvas {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    width:100vw; height:100vh;
}

/* =============================================================
   SCREEN SYSTEM
   ============================================================= */
.screen {
    position:fixed; inset:0; z-index:10;
    width:100vw; height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity 0.5s var(--ease);
}
.screen.active-screen { opacity:1; pointer-events:auto; }

/* =============================================================
   SCREEN 1 — GLOBE ENTRANCE
   ============================================================= */
#screen-globe { background:transparent; }

#globe-canvas {
    position:absolute; inset:0; width:100%; height:100%; z-index:1;
}

.globe-center-ui {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:0.7rem;
    background:transparent;
    border:none;
    border-radius:0;
    padding:2.5rem 2rem;
    box-shadow:none;
    max-width:500px; width:90%;
}

.globe-logo-ring {
    position:relative; width:130px; height:130px;
    display:flex; justify-content:center; align-items:center;
    margin-bottom:0.8rem;
}
.g-ring {
    position:absolute; border-radius:50%; pointer-events:none;
}
.g-ring-1 {
    inset:0; border:1.5px dashed var(--gold);
    animation:spin 18s linear infinite;
}
.g-ring-2 {
    inset:-14px; border:1px dotted rgba(38,40,46,0.35);
    animation:spin 28s linear infinite reverse;
}
@keyframes spin { to { transform:rotate(360deg); } }

.globe-logo {
    width:88px; height:88px; border-radius:50%; object-fit:cover;
    border:3px solid var(--white);
    box-shadow:0 12px 30px rgba(38,40,46,0.2);
    position:relative; z-index:2;
    animation:glowPulse 3s infinite alternate;
}
@keyframes glowPulse {
    from { box-shadow:0 12px 30px rgba(38,40,46,0.2), 0 0 0 rgba(212,175,55,0); }
    to   { box-shadow:0 12px 30px rgba(38,40,46,0.22), 0 0 30px rgba(212,175,55,0.5); }
}

.globe-tag {
    font-family:var(--font-en); font-size:0.65rem; letter-spacing:0.45em;
    color:var(--gold); direction:ltr; font-weight:600;
}
.globe-title {
    font-family:var(--font-en); font-weight:800;
    font-size:clamp(2rem,6vw,3rem); letter-spacing:0.12em; line-height:1.1;
    background:linear-gradient(120deg,var(--slate),var(--gold),var(--gold-dark),var(--gold),var(--slate));
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shineText 6s linear infinite;
}
@keyframes shineText { to { background-position:200% center; } }
.globe-title-ar { display:none; }

.globe-sub { font-size:0.95rem; color:var(--slate-muted); text-shadow:0 1px 12px rgba(255,255,255,0.9); }

/* Text legibility helpers against transparent background */
.globe-tag, .globe-title, .globe-sub {
    text-shadow:0 2px 18px rgba(255,255,255,0.95), 0 0 40px rgba(255,255,255,0.7);
}

.globe-enter-btn {
    margin-top:1rem;
    background:linear-gradient(135deg, var(--slate), var(--slate-mid));
    color:var(--white); border:1px solid var(--gold);
    padding:1.1rem 3rem; border-radius:100px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:0.2rem;
    box-shadow:0 14px 35px rgba(38,40,46,0.35), 0 0 0 8px rgba(255,255,255,0.55);
    transition:all 0.4s var(--ease); position:relative; width:100%;
}
.globe-enter-btn:hover {
    background:linear-gradient(135deg,var(--gold-dark),var(--gold));
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 20px 50px rgba(212,175,55,0.45);
}
.globe-enter-btn span { font-family:var(--font-body); font-size:1.1rem; font-weight:700; }
.globe-enter-btn small { font-family:var(--font-en); font-size:0.6rem; letter-spacing:0.22em; opacity:0.8; }
.globe-enter-btn i { position:absolute; left:1.5rem; top:50%; transform:translateY(-50%); font-size:1rem; }

.globe-hint {
    position:absolute; bottom:2.2rem; z-index:2;
    font-family:var(--font-en); font-size:0.65rem; letter-spacing:0.25em;
    color:var(--slate-muted); display:flex; align-items:center; gap:0.5rem;
    direction:ltr;
}
.globe-hint i { color:var(--gold); }

/* =============================================================
   SCREEN 2 — RADIAL STAR WHEEL
   ============================================================= */
#screen-wheel {
    background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(212,175,55,0.1),transparent 80%),
               radial-gradient(ellipse 100% 100% at 50% 50%,var(--bg) 0%,var(--bg-alt) 100%);
}

.wheel-scene {
    position:relative;
    width:min(80vmin,560px); height:min(80vmin,560px);
    display:flex; align-items:center; justify-content:center;
}

.wheel-center {
    position:absolute;
    width:130px; height:130px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    z-index:5;
}
.wc-ring {
    position:absolute; border-radius:50%; pointer-events:none;
}
.wc-ring-1 { inset:0; border:1.5px dashed var(--gold); animation:spin 16s linear infinite; }
.wc-ring-2 { inset:-12px; border:1px dotted rgba(38,40,46,0.25); animation:spin 26s linear infinite reverse; }
.wc-ring-3 {
    inset:-24px; border:1px solid rgba(212,175,55,0.15);
    animation:spin 40s linear infinite;
}
.wc-logo {
    width:82px; height:82px; border-radius:50%; object-fit:cover;
    border:3px solid var(--white); box-shadow:0 10px 28px rgba(38,40,46,0.2);
    position:relative; z-index:2;
}
.wc-label {
    margin-top:0.4rem; font-size:0.8rem; font-weight:500;
    color:var(--slate-muted); text-align:center;
}

/* Orbit ring visual */
.wheel-orbit-ring {
    position:absolute; inset:0; border-radius:50%;
    border:1px dashed rgba(212,175,55,0.35);
    pointer-events:none; z-index:2;
}

/* Orbit nodes container — fills the scene */
.wheel-orbit {
    position:absolute; inset:0; z-index:4;
}

/* Each orbit node positioned with JS */
.orbit-node {
    position:absolute;
    width:100px; height:100px;
    transform:translate(-50%, -50%);
    background:var(--card-glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1.5px solid rgba(212,175,55,0.3);
    border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3rem;
    cursor:pointer;
    transition:all 0.4s var(--ease);
    box-shadow:0 12px 30px rgba(38,40,46,0.08);
}
.orbit-node:hover, .orbit-node.active-node {
    border-color:var(--gold);
    box-shadow:0 18px 50px rgba(38,40,46,0.18), 0 0 40px rgba(212,175,55,0.3);
    transform:translate(-50%,-50%) scale(1.15);
    background:var(--white);
}
.orbit-node i { font-size:1.5rem; color:var(--gold); }
.node-count {
    font-size:0.75rem; font-weight:700;
    background:var(--gold); color:var(--white);
    border-radius:100px; padding:0.1rem 0.55rem;
}
.node-glow {
    position:absolute; inset:-12px; border-radius:50%;
    background:radial-gradient(circle, rgba(212,175,55,0.25) 0%, transparent 70%);
    animation:glowPulse 2.5s infinite alternate;
    pointer-events:none;
}

/* =============================================================
   WHEEL SCREEN — PARALLAX AMBIENT GLOW
   ============================================================= */
.wheel-parallax-glow {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(circle 320px at var(--gx, 50%) var(--gy, 50%),
        rgba(212,175,55,0.09) 0%,
        rgba(212,175,55,0.03) 40%,
        transparent 70%);
    transition:background 0.12s linear;
}

/* =============================================================
   WHEEL SCREEN — ORIS SIGNATURE (top)
   ============================================================= */
.wheel-signature {
    position:absolute;
    top:max(2.2rem, env(safe-area-inset-top, 1.5rem));
    left:0; right:0;
    display:flex; flex-direction:column; align-items:center; gap:0.45rem;
    z-index:5; pointer-events:none;
}
.ws-brand {
    font-family:var(--font-en); font-weight:800;
    font-size:clamp(1.4rem, 5vw, 2.2rem); letter-spacing:0.55em; margin-right:-0.55em;
    color:var(--slate);
    opacity:0.1;
    user-select:none;
}
.ws-tagline {
    display:flex; align-items:center; gap:0.75rem;
}
.ws-rule {
    width:36px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,175,55,0.5));
    display:block;
}
.ws-tagline .ws-rule:last-child {
    transform:scaleX(-1);
}
.ws-text {
    font-family:var(--font-en); font-size:0.52rem; letter-spacing:0.3em;
    color:rgba(38,40,46,0.4); direction:ltr; white-space:nowrap;
}

/* =============================================================
   WHEEL SCREEN — ARCHITECTURAL CORNER LINES
   ============================================================= */
.arch-corner {
    position:absolute; width:32px; height:32px;
    z-index:5; pointer-events:none;
    opacity:0.55;
    transition:opacity 0.6s var(--ease);
}
#screen-wheel:hover .arch-corner { opacity:0.85; }

.arch-tl {
    top:max(1rem, env(safe-area-inset-top, 0.8rem));
    right:1.1rem;
    border-top:1.5px solid rgba(212,175,55,0.6);
    border-right:1.5px solid rgba(212,175,55,0.6);
    border-radius:0 4px 0 0;
}
.arch-tr {
    top:max(1rem, env(safe-area-inset-top, 0.8rem));
    left:1.1rem;
    border-top:1.5px solid rgba(212,175,55,0.6);
    border-left:1.5px solid rgba(212,175,55,0.6);
    border-radius:4px 0 0 0;
}
.arch-bl {
    bottom:max(1rem, env(safe-area-inset-bottom, 0.8rem));
    right:1.1rem;
    border-bottom:1.5px solid rgba(212,175,55,0.6);
    border-right:1.5px solid rgba(212,175,55,0.6);
    border-radius:0 0 4px 0;
}
.arch-br {
    bottom:max(1rem, env(safe-area-inset-bottom, 0.8rem));
    left:1.1rem;
    border-bottom:1.5px solid rgba(212,175,55,0.6);
    border-left:1.5px solid rgba(212,175,55,0.6);
    border-radius:0 0 0 4px;
}

/* =============================================================
   WHEEL SCREEN — BOTTOM ELEGANT FOOTER
   ============================================================= */
.wheel-footer {
    position:absolute;
    bottom:max(2.5rem, env(safe-area-inset-bottom, 2rem));
    left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:0.9rem;
    z-index:5; pointer-events:none;
    opacity:0.65;
}
.wf-line {
    width:28px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(212,175,55,0.6));
    display:block;
}
.wheel-footer .wf-line:last-child { transform:scaleX(-1); }
.wf-text {
    font-family:var(--font-ar); font-size:0.75rem;
    color:var(--slate-muted); letter-spacing:0.05em; white-space:nowrap;
}

/* =============================================================
   SCREEN 3 — CINEMATIC FULL-SCREEN HORIZONTAL SLIDES
   ============================================================= */
#screen-cinema {
    background:var(--bg);
    display:block; padding:0;
    overflow:hidden;
}

.cinema-header {
    position:absolute; top:0; left:0; right:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between;
    padding:0.9rem 1.2rem;
    background:rgba(248,249,251,0.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(212,175,55,0.2);
}
.cinema-back {
    background:none; border:1px solid rgba(212,175,55,0.4);
    color:var(--slate); padding:0.55rem 1.2rem; border-radius:100px;
    cursor:pointer; font-family:var(--font-body); font-size:0.88rem; font-weight:700;
    display:flex; align-items:center; gap:0.5rem;
    transition:all 0.35s var(--ease);
}
.cinema-back:hover { background:var(--gold); color:var(--white); border-color:var(--gold); }
.cinema-category-label {
    font-family:var(--font-ar); font-weight:700; font-size:1.15rem; color:var(--slate);
}
.cinema-counter {
    font-family:var(--font-en); font-size:0.95rem; font-weight:700; color:var(--gold-dark);
    letter-spacing:0.1em;
}

/* Slides track — horizontal strip */
.cinema-slides-track {
    position:absolute;
    top:0; left:0; bottom:0;
    /* NO right constraint — track grows with all slides */
    display:flex; align-items:stretch;
    transition:transform 0.75s var(--ease);
    will-change:transform;
}

/* Each slide = full viewport */
.cinema-slide {
    width:100vw;
    height:100vh;
    flex-shrink:0; /* Critical: prevents slides from squishing */
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    cursor:pointer;
}

.slide-bg-blur {
    position:absolute; inset:-20px;
    background-size:cover; background-position:center;
    filter:blur(30px) brightness(1.12) saturate(0.5);
    transform:scale(1.15);
    z-index:1;
}

/* Large floating drink image */
.slide-drink-wrap {
    position:relative; z-index:3;
    display:flex; flex-direction:column; align-items:center;
    padding-top:5rem;
}
.slide-drink-img {
    width:min(55vmin,350px); height:min(55vmin,350px);
    border-radius:50%; object-fit:cover;
    border:5px solid rgba(255,255,255,0.9);
    box-shadow:0 30px 80px rgba(38,40,46,0.28), 0 0 60px rgba(212,175,55,0.22);
    transition:transform 0.8s var(--ease);
    animation:floatUp 4s ease-in-out infinite alternate;
}
@keyframes floatUp {
    from { transform:translateY(0px); }
    to   { transform:translateY(-16px); }
}
.cinema-slide:hover .slide-drink-img {
    transform:scale(1.07);
    box-shadow:0 40px 100px rgba(38,40,46,0.35), 0 0 80px rgba(212,175,55,0.35);
}

.slide-drink-shadow {
    width:min(45vmin,270px); height:24px; border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(38,40,46,0.22) 0%,transparent 80%);
    margin:-10px auto 0; transition:all 0.8s var(--ease);
    animation:shadowBreath 4s ease-in-out infinite alternate;
}
@keyframes shadowBreath {
    from { width:min(45vmin,270px); opacity:0.8; }
    to   { width:min(38vmin,230px); opacity:0.35; }
}

/* Slide text info block */
.slide-info {
    position:absolute; bottom:0; left:0; right:0; z-index:4;
    padding:3rem 3rem 8rem;
    background:linear-gradient(to top,rgba(248,249,251,0.97) 0%,rgba(248,249,251,0.7) 60%,transparent 100%);
    text-align:center;
}
.slide-num { font-family:var(--font-en); font-size:1.2rem; font-weight:700; color:var(--gold); }
.slide-name-en {
    font-family:var(--font-en); font-weight:700; font-size:0.78rem;
    letter-spacing:0.4em; color:var(--gold-dark); display:block; margin-bottom:0.3rem;
}
.slide-name-ar {
    font-family:var(--font-ar); font-weight:700; font-size:clamp(2rem,6vw,3.2rem);
    color:var(--slate); margin-bottom:0.5rem;
}
.slide-tap-badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    background:var(--slate); color:var(--white);
    padding:0.5rem 1.4rem; border-radius:100px;
    border:1px solid var(--gold); font-size:0.82rem; font-weight:700;
    box-shadow:0 8px 20px rgba(38,40,46,0.2);
    animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { box-shadow:0 8px 20px rgba(38,40,46,0.2), 0 0 0 rgba(212,175,55,0); }
    50%      { box-shadow:0 8px 20px rgba(38,40,46,0.2), 0 0 20px rgba(212,175,55,0.5); }
}
.slide-tap-badge i { color:var(--gold); font-size:0.9rem; }

/* Cinema navigation */
.cinema-nav {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    z-index:30; display:flex; align-items:center; gap:1.4rem;
    pointer-events:auto;
}
.cinema-arrow {
    width:52px; height:52px; border-radius:50%;
    border:1.5px solid rgba(212,175,55,0.5);
    background:var(--card-glass);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:var(--slate); font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.35s var(--ease);
    box-shadow:0 8px 24px rgba(38,40,46,0.1);
}
.cinema-arrow:hover { background:var(--gold); color:var(--white); border-color:var(--gold); transform:scale(1.1); }
.cinema-arrow:disabled { opacity:0.3; cursor:default; transform:none; }

.cinema-dots { display:flex; gap:0.55rem; }
.cinema-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(38,40,46,0.18); cursor:pointer;
    transition:all 0.4s var(--ease);
}
.cinema-dot.active { width:28px; border-radius:100px; background:var(--gold); }

.cinema-tap-hint {
    position:absolute; top:4.5rem; left:50%; transform:translateX(-50%);
    font-family:var(--font-en); font-size:0.6rem; letter-spacing:0.22em;
    color:var(--slate-muted); z-index:30; white-space:nowrap; direction:ltr;
    pointer-events:none;
}

/* =============================================================
   SCREEN 4 — MAGAZINE EDITORIAL PANEL (Slide-up sheet)
   ============================================================= */
.mag-overlay {
    position:fixed; inset:0; z-index:200;
    background:rgba(38,40,46,0.45);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0; pointer-events:none;
    transition:opacity 0.45s var(--ease);
}
.mag-overlay.visible { opacity:1; pointer-events:auto; }

.magazine-panel {
    position:fixed; bottom:0; left:0; right:0; z-index:201;
    max-height:88dvh; max-height:88vh; /* dvh with vh fallback */
    height:auto;
    background:var(--white);
    border-radius:28px 28px 0 0;
    box-shadow:0 -20px 60px rgba(38,40,46,0.2);
    border-top:2px solid rgba(212,175,55,0.35);
    transform:translateY(100%);
    transition:transform 0.55s var(--ease);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.magazine-panel.open { transform:translateY(0); }

.mag-drag-bar {
    width:52px; height:5px; border-radius:100px;
    background:rgba(38,40,46,0.14);
    margin:1rem auto 0;
}
.mag-close {
    position:absolute; top:1rem; left:1rem;
    background:var(--bg-alt); border:1px solid rgba(212,175,55,0.3);
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    font-size:0.9rem; color:var(--slate);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s; z-index:5;
}
.mag-close:hover { background:var(--gold); color:var(--white); border-color:var(--gold); }

.mag-content {
    /* Extra top padding to clear drag bar + close button, and avoid image clipping */
    padding:4rem 1.4rem 3rem;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:0;
}

.mag-page-num {
    font-family:var(--font-en); font-size:0.7rem; letter-spacing:0.4em;
    color:var(--slate-muted); font-weight:600; align-self:flex-end;
    margin-bottom:1rem;
}

.mag-hero-img-wrap {
    position:relative;
    width:min(170px,46vw); height:min(170px,46vw);
    margin-bottom:1.1rem; flex-shrink:0;
}
.mag-img-gold-frame {
    position:absolute; inset:-6px; border-radius:50%;
    border:2px dashed var(--gold);
    animation:spin 18s linear infinite;
    box-shadow:0 0 30px rgba(212,175,55,0.3);
}
.mag-hero-img {
    width:100%; height:100%; border-radius:50%; object-fit:cover;
    border:4px solid var(--white);
    box-shadow:0 20px 55px rgba(38,40,46,0.24);
}

.mag-rule {
    width:80%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,175,55,0.5),transparent);
    margin:0 auto 1.2rem;
}

.mag-category-tag {
    font-family:var(--font-en); font-size:0.7rem; letter-spacing:0.4em;
    color:var(--gold); font-weight:700; margin-bottom:0.4rem;
}
.mag-title-en {
    font-family:var(--font-en); font-weight:800;
    font-size:clamp(0.95rem,3.5vw,1.4rem); letter-spacing:0.2em;
    color:var(--slate); margin-bottom:0.25rem;
}
.mag-title-ar {
    font-family:var(--font-ar); font-weight:700;
    font-size:clamp(1.5rem,5vw,2.2rem);
    color:var(--slate); margin-bottom:0.9rem;
}

.mag-tasting-note {
    background:var(--bg); border-right:3px solid var(--gold);
    border-radius:0 12px 12px 0; padding:0.9rem 1.1rem;
    text-align:right; width:100%; margin-bottom:1.2rem;
    position:relative;
}
.mag-tasting-note i {
    color:var(--gold); font-size:1rem;
    margin-bottom:0.3rem; display:block;
}
.mag-tasting-note p { font-size:0.9rem; line-height:1.65; color:var(--slate-mid); }

.mag-footer-row {
    display:flex; align-items:center; gap:1.2rem; width:100%;
    padding-top:1rem;
    border-top:1px solid var(--bg-alt);
}
.mag-price-wrap { display:flex; flex-direction:column; align-items:flex-end; }
.mag-price-label { font-size:0.75rem; color:var(--slate-muted); }
.mag-price-val {
    font-family:var(--font-en); font-weight:800; font-size:1.6rem;
    color:var(--slate);
}
.mag-price-val small { font-size:0.75rem; font-weight:500; color:var(--slate-muted); }
.mag-divider-v { width:1px; align-self:stretch; background:var(--bg-alt); }
.mag-issue { display:flex; flex-direction:column; gap:0.3rem; flex:1; }
.mag-issue-en { font-family:var(--font-en); font-size:0.62rem; letter-spacing:0.2em; color:var(--gold-dark); }
.mag-issue-ar { font-size:0.88rem; color:var(--slate-muted); }

/* =============================================================
   FEATURE: LIVE CLOCK + SMART GREETING (Globe Screen)
   ============================================================= */
.globe-greeting-bar {
    display:flex; align-items:center; gap:0.6rem;
    background:rgba(38,40,46,0.72);
    color:var(--white);
    border:1px solid rgba(212,175,55,0.45);
    border-radius:100px;
    padding:0.45rem 1.4rem;
    font-family:var(--font-en); font-size:0.75rem; letter-spacing:0.18em;
    box-shadow:0 4px 18px rgba(38,40,46,0.25), 0 0 20px rgba(212,175,55,0.15);
    margin-bottom:0.5rem;
    direction:ltr;
    width:fit-content; align-self:center;
}
#globe-greeting {
    font-family:var(--font-ar); font-size:0.88rem; font-weight:700;
    color:var(--gold); letter-spacing:0.05em; direction:rtl;
}
.gsep { color:rgba(212,175,55,0.5); }
.globe-clock {
    font-family:var(--font-en); font-size:0.8rem; font-weight:600;
    color:rgba(255,255,255,0.9); letter-spacing:0.18em;
    font-variant-numeric: tabular-nums;
}

/* =============================================================
   FEATURE: PAIRING SUGGESTIONS (Magazine Panel)
   ============================================================= */
.mag-pairing-section {
    width:100%; margin-bottom:1.6rem;
    padding:1.2rem 1.4rem;
    background:linear-gradient(135deg,rgba(212,175,55,0.06),rgba(248,249,251,0.8));
    border:1px solid rgba(212,175,55,0.25);
    border-radius:18px;
    text-align:right;
}
.mag-pairing-header {
    display:flex; align-items:center; gap:0.5rem; justify-content:flex-end;
    margin-bottom:0.9rem;
    font-family:var(--font-ar); font-weight:700; font-size:0.95rem;
    color:var(--slate);
}
.mag-pairing-header i { color:var(--gold); }
.mag-pairing-chips {
    display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:flex-end;
}
.pairing-chip {
    background:var(--white);
    border:1px solid rgba(212,175,55,0.35);
    border-radius:100px;
    padding:0.38rem 1rem;
    font-size:0.88rem; font-weight:500; color:var(--slate-mid);
    box-shadow:0 3px 10px rgba(38,40,46,0.06);
    transition:all 0.3s var(--ease);
}
.pairing-chip:hover {
    background:var(--gold); color:var(--white);
    border-color:var(--gold);
    transform:translateY(-2px);
}

/* =============================================================
   FEATURE: INSTAGRAM SHARE BUTTON (Magazine Panel)
   ============================================================= */
.mag-share-btn {
    width:100%; margin-top:1.5rem;
    background:linear-gradient(135deg, #833AB4, #E1306C, #F77737);
    color:var(--white);
    border:none;
    padding:1rem 2rem;
    border-radius:100px;
    cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:0.15rem;
    box-shadow:0 12px 35px rgba(131,58,180,0.35);
    transition:all 0.4s var(--ease);
    font-family:var(--font-body);
}
.mag-share-btn:hover {
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 20px 50px rgba(131,58,180,0.5);
}
.mag-share-btn i { font-size:1.3rem; margin-bottom:0.2rem; }
.mag-share-btn span { font-size:1.05rem; font-weight:700; }
.mag-share-btn small { font-family:var(--font-en); font-size:0.6rem; letter-spacing:0.25em; opacity:0.85; }

/* =============================================================
   FEATURE: INSTAGRAM SHARE CARD MODAL
   ============================================================= */
.share-modal {
    position:fixed; inset:0; z-index:500;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity 0.4s var(--ease);
}
.share-modal.open { opacity:1; pointer-events:auto; }

.share-modal-backdrop {
    position:absolute; inset:0;
    background:rgba(20,20,25,0.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
}
.share-modal-inner {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:1.2rem;
    padding:1.5rem;
    max-width:400px; width:90%;
}

.share-close-btn {
    position:absolute; top:-0.5rem; left:-0.5rem;
    width:38px; height:38px; border-radius:50%;
    background:var(--white); border:none; cursor:pointer;
    font-size:1rem; color:var(--slate);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    transition:all 0.3s;
    z-index:3;
}
.share-close-btn:hover { background:var(--gold); color:var(--white); transform:scale(1.1); }

/* The Instagram Card itself */
.share-card {
    width:380px; height:380px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
    position:relative;
    background:linear-gradient(145deg, var(--bg), var(--bg-alt));
    border:2px solid rgba(212,175,55,0.4);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:2rem 1.5rem;
    text-align:center;
}
.sc-top-bar {
    position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, #833AB4, #E1306C, #F77737, var(--gold));
}
.sc-logo-img {
    width:60px; height:60px; border-radius:50%;
    object-fit:cover; border:2px solid var(--gold);
    box-shadow:0 6px 18px rgba(38,40,46,0.2);
    margin-bottom:0.6rem;
}
.sc-brand { font-family:var(--font-en); font-weight:800; font-size:1rem; letter-spacing:0.25em; color:var(--slate); margin-bottom:0.8rem; }
.sc-drink-img {
    width:140px; height:140px; border-radius:50%;
    object-fit:cover; border:3px solid var(--white);
    box-shadow:0 14px 35px rgba(38,40,46,0.25), 0 0 30px rgba(212,175,55,0.22);
    margin-bottom:0.8rem;
}
.sc-gold-rule { width:60%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto 0.8rem; }
.sc-name-ar { font-family:var(--font-ar); font-weight:700; font-size:1.4rem; color:var(--slate); margin-bottom:0.2rem; }
.sc-name-en { font-family:var(--font-en); font-weight:600; font-size:0.65rem; letter-spacing:0.3em; color:var(--gold-dark); margin-bottom:0.6rem; }
.sc-price {
    background:var(--slate); color:var(--white);
    padding:0.4rem 1.4rem; border-radius:100px;
    border:1px solid var(--gold);
    font-family:var(--font-en); font-weight:700; font-size:0.88rem;
}
.sc-handle {
    position:absolute; bottom:0.9rem;
    font-family:var(--font-en); font-size:0.6rem; letter-spacing:0.2em;
    color:var(--slate-muted); direction:ltr;
}

.share-actions { display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.share-download-btn {
    background:var(--slate); color:var(--white);
    border:1px solid var(--gold);
    padding:0.75rem 2.4rem; border-radius:100px;
    cursor:pointer; font-family:var(--font-body); font-size:1rem; font-weight:700;
    display:flex; align-items:center; gap:0.6rem;
    box-shadow:0 10px 28px rgba(38,40,46,0.25);
    transition:all 0.35s var(--ease);
}
.share-download-btn:hover { background:var(--gold); color:var(--white); transform:translateY(-3px); }
.share-note { font-family:var(--font-en); font-size:0.65rem; letter-spacing:0.2em; color:rgba(255,255,255,0.7); direction:ltr; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:640px) {
    .globe-center-ui { padding:2.2rem 1.8rem; }
    .globe-enter-btn { padding:0.95rem 1.8rem; }
    .slide-info { padding:2rem 1.5rem 8rem; }
    .mag-content { padding:1.5rem 1.5rem 4rem; }
    .mag-footer-row { flex-direction:column; align-items:flex-start; gap:1rem; }
    .mag-divider-v { display:none; }
    .cinema-nav { bottom:2rem; }
    .share-card { width:320px; height:320px; }
    .sc-drink-img { width:115px; height:115px; }
}