/* CSS Variables */
:root {
  --color-surface: #f8f7f4;
  --color-tertiary-container: #ceb05a;
  --color-surface-variant: #e6e5e3;
  --color-surface-container: #ebe8e2;
  --color-on-tertiary-fixed: #241a00;
  --color-tertiary-fixed: #ffe089;
  --color-on-secondary-fixed-variant: #584400;
  --color-on-tertiary-fixed-variant: #574400;
  --color-on-error-container: #ffdad6;
  --color-primary: #c7a230;
  --color-error-container: #93000a;
  --color-surface-container-lowest: #ffffff;
  --color-secondary-container: #ffe68f;
  --color-surface-dim: #dbdad8;
  --color-primary-container: #ffe68a;
  --color-secondary: #a6882c;
  --color-tertiary: #ebcc72;
  --color-primary-fixed: #ffe088;
  --color-tertiary-fixed-dim: #e3c46b;
  --color-secondary-fixed: #ffe08b;
  --color-on-primary-fixed: #241a00;
  --color-on-primary-container: #3d3000;
  --color-on-secondary-fixed: #241a00;
  --color-on-secondary-container: #332800;
  --color-outline: #797875;
  --color-inverse-surface: #313030;
  --color-on-primary-fixed-variant: #574500;
  --color-surface-container-high: #e3ded8;
  --color-primary-fixed-dim: #e9c349;
  --color-on-surface: #2d2a26;
  --color-inverse-primary: #735c00;
  --color-outline-variant: #e0dcd5;
  --color-surface-container-highest: #e2e1df;
  --color-error: #ffb4ab;
  --color-surface-container-low: #f3f1ec;
  --color-on-tertiary-container: #554300;
  --color-on-error: #690005;
  --color-on-primary: #ffffff;
  --color-secondary-fixed-dim: #eac249;
  --color-surface-bright: #ffffff;
  --color-inverse-on-surface: #f5f4f3;
  --color-background: #f8f9eb;
  --color-on-background: #131313;
  --color-on-secondary: #ffffff;
  --color-on-surface-variant: #4d4c4b;
  --color-surface-tint: #b89a36;
  --color-on-tertiary: #3d2f00;
  --rgb-background: 248, 247, 244;
}

.dark {
  --color-surface: #131313;
  --color-tertiary-container: #ceb05a;
  --color-surface-variant: #353535;
  --color-surface-container: #20201f;
  --color-on-tertiary-fixed: #241a00;
  --color-tertiary-fixed: #ffe089;
  --color-on-secondary-fixed-variant: #584400;
  --color-on-tertiary-fixed-variant: #574400;
  --color-on-error-container: #ffdad6;
  --color-primary: #f2ca50;
  --color-error-container: #93000a;
  --color-surface-container-lowest: #0e0e0e;
  --color-secondary-container: #b08c10;
  --color-surface-dim: #131313;
  --color-primary-container: #d4af37;
  --color-secondary: #eac249;
  --color-tertiary: #ebcc72;
  --color-primary-fixed: #ffe088;
  --color-tertiary-fixed-dim: #e3c46b;
  --color-secondary-fixed: #ffe08b;
  --color-on-primary-fixed: #241a00;
  --color-on-primary-container: #554300;
  --color-on-secondary-fixed: #241a00;
  --color-on-secondary-container: #352800;
  --color-outline: #99907c;
  --color-inverse-surface: #e5e2e1;
  --color-on-primary-fixed-variant: #574500;
  --color-surface-container-high: #2a2a2a;
  --color-primary-fixed-dim: #e9c349;
  --color-on-surface: #e5e2e1;
  --color-inverse-primary: #735c00;
  --color-outline-variant: #4d4635;
  --color-surface-container-highest: #353535;
  --color-error: #ffb4ab;
  --color-surface-container-low: #1c1b1b;
  --color-on-tertiary-container: #554300;
  --color-on-error: #690005;
  --color-on-primary: #3c2f00;
  --color-secondary-fixed-dim: #eac249;
  --color-surface-bright: #393939;
  --color-inverse-on-surface: #313030;
  --color-background: #131313;
  --color-on-background: #e5e2e1;
  --color-on-secondary: #3d2f00;
  --color-on-surface-variant: #d0c5af;
  --color-surface-tint: #e9c349;
  --color-on-tertiary: #3d2f00;
  --rgb-background: 19, 19, 19;
}
/*
    Legend Automotive - Custom Styles
    This file contains global styles, utility classes, and specific component overrides
    that extend the Tailwind CSS framework configuration.
*/

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Global Font Settings */
body {
    font-family: 'Inter', sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--color-background);
    color: var(--color-on-background);
}

h1, h2, h3, h4, h5, h6, .font-headline {
    font-family: 'Manrope', sans-serif;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* iOS Drag & Select Fix */
[draggable="true"] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: element;
    touch-action: none;
}

/* Ensure smooth scrolling on iOS */
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar Utilities */
.scrollbar-hide::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide,
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-background);
}
::-webkit-scrollbar-thumb {
    background: var(--color-surface-container-high);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-container);
}

/* Legend Automotive Specific Styles */
.glass-card {
    background: rgba(var(--rgb-background), 0.4);
    backdrop-filter: blur(20px);
}

.hero-gradient {
    background: linear-gradient(180deg, rgba(var(--rgb-background), 0) 0%, rgba(var(--rgb-background), 1) 100%);
}

.gold-shimmer {
    background: linear-gradient(135deg, #f2ca50 0%, #d4af37 100%);
}

/* Sold Out Overlay */
.sold-out-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    color: #f2ca50;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    z-index: 30;
    pointer-events: none;
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    white-space: nowrap;
}

/* Hero Carousel Transitions */
.hero-carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 1.5s ease-in-out;
}

.hero-carousel-img {
    opacity: 0;
    pointer-events: none;
}

.hero-carousel-img.active {
    opacity: 1;
    pointer-events: auto;
}

/* Input Styles for Legend */
input, textarea, select {
    background-color: var(--color-surface-container-lowest) !important;
    border: 1px solid rgba(77, 70, 53, 0.15) !important;
    color: var(--color-on-surface) !important;
    transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: #f2ca50 !important;
    box-shadow: 0 1px 0 0 #f2ca50 !important;
    outline: none !important;
}

/* RTL Support */
[dir="rtl"] {
    font-family: 'Inter', 'Noto Sans Arabic', sans-serif;
}

[dir="rtl"] .font-headline {
    font-family: 'Manrope', 'Noto Sans Arabic', sans-serif;
}

/* Floating Mobile Menu */
#mobile-menu-drawer {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu-overlay {
    transition: opacity 0.4s ease;
}

.mobile-menu-open {
    overflow: hidden;
}

/* Grayscale for sold out cars */
.grayscale {
    filter: grayscale(100%);
}

.sold-out-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(238, 33, 34, 0.9);
    color: white;
    font-weight: 900;
    padding: 0.5rem 1.5rem;
    border: 4px solid white;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 10;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Event Themes */
body.theme-ramadan {
    --color-primary: #d4af37;
    background-color: #0f0a02;
    background-image: radial-gradient(circle at 50% top, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
}
body.theme-ramadan .gold-shimmer {
    background: linear-gradient(135deg, #d4af37 0%, #a67c00 100%);
}

body.theme-eid {
    --color-primary: #f2ca50;
    background-color: #1a1515;
    background-image: radial-gradient(circle at 50% top, rgba(242, 202, 80, 0.15) 0%, transparent 60%);
}

body.theme-national {
    --color-primary: #ce1126; /* Egypt Red */
    background-color: #141414;
    background-image: linear-gradient(to bottom, rgba(206, 17, 38, 0.05) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.1) 100%);
}
body.theme-national .gold-shimmer {
    background: linear-gradient(135deg, #ce1126 0%, #8b0000 100%);
}

body.theme-eid-fitr, body.theme-eid-adha {
    --color-primary: #f2ca50;
    background-color: #1a1515;
    background-image: radial-gradient(circle at 50% top, rgba(242, 202, 80, 0.15) 0%, transparent 60%);
}

body.theme-hijri-new-year {
    --color-primary: #bfa15f;
    background-color: #0d1210;
    background-image: radial-gradient(circle at 50% top, rgba(191, 161, 95, 0.1) 0%, transparent 60%);
}

body.theme-mawlid {
    --color-primary: #2e8b57;
    background-color: #0b140e;
    background-image: radial-gradient(circle at 50% top, rgba(46, 139, 87, 0.15) 0%, transparent 60%);
}
body.theme-mawlid .gold-shimmer { background: linear-gradient(135deg, #2e8b57 0%, #006400 100%); }

/* Coptic Holidays */
body.theme-coptic-christmas {
    --color-primary: #8b0000;
    background-color: #120909;
    background-image: radial-gradient(circle at 50% top, rgba(139, 0, 0, 0.15) 0%, transparent 60%);
}
body.theme-coptic-christmas .gold-shimmer { background: linear-gradient(135deg, #8b0000 0%, #500000 100%); }

body.theme-easter {
    --color-primary: #dda0dd;
    background-color: #141014;
    background-image: radial-gradient(circle at 50% top, rgba(221, 160, 221, 0.1) 0%, transparent 60%);
}
body.theme-easter .gold-shimmer { background: linear-gradient(135deg, #dda0dd 0%, #8b008b 100%); }

body.theme-sham-el-nessim {
    --color-primary: #9acd32;
    background-color: #10140e;
    background-image: radial-gradient(circle at 50% top, rgba(154, 205, 50, 0.1) 0%, transparent 60%);
}
body.theme-sham-el-nessim .gold-shimmer { background: linear-gradient(135deg, #9acd32 0%, #556b2f 100%); }

/* National Holidays */
body.theme-police-day {
    --color-primary: #1c528f;
    background-color: #0a0e14;
    background-image: radial-gradient(circle at 50% top, rgba(28, 82, 143, 0.2) 0%, transparent 60%);
}
body.theme-police-day .gold-shimmer { background: linear-gradient(135deg, #1c528f 0%, #0a203f 100%); }

body.theme-sinai-liberation, body.theme-armed-forces-day {
    --color-primary: #8b7355;
    background-color: #14120e;
    background-image: radial-gradient(circle at 50% top, rgba(139, 115, 85, 0.15) 0%, transparent 60%);
}
body.theme-sinai-liberation .gold-shimmer, body.theme-armed-forces-day .gold-shimmer { background: linear-gradient(135deg, #8b7355 0%, #554530 100%); }

/* ============================================================
   LEGEND AUTOMOTIVE — FULLSCREEN GALLERY LIGHTBOX
   ============================================================ */

/* Overlay backdrop */
#lg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.97);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overscroll-behavior: contain;
}

#lg-overlay.lg-open {
    opacity: 1;
    pointer-events: all;
}

/* Cinematic gold top bar */
#lg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #f2ca50 30%, #d4af37 70%, transparent 100%);
    z-index: 20;
    pointer-events: none;
}

/* ── Header ─────────────────────────────────────────────── */
#lg-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 15;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
    pointer-events: none;   /* pass clicks through to image */
}

#lg-header > * { pointer-events: all; }

#lg-counter {
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(242, 202, 80, 0.85);
    text-transform: uppercase;
}

#lg-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(242, 202, 80, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: #f2ca50;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
#lg-close-btn:hover {
    background: rgba(242, 202, 80, 0.15);
    border-color: #f2ca50;
    transform: scale(1.1);
}

/* ── Image stage ─────────────────────────────────────────── */
#lg-stage {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Only reserve space for header top; thumbnail strip overlays bottom */
    padding: 52px 52px 0;
    box-sizing: border-box;
}

/* The image itself — use viewport units to guarantee it fills the screen */
#lg-img {
    display: block;
    max-width: 95vw;
    max-height: calc(100vh - 120px);  /* full screen minus header + thumb strip */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(242,202,80,0.06);
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

#lg-img.lg-fade {
    opacity: 0;
    transform: scale(0.97);
}

/* ── Navigation arrows ─────────────────────────────────── */
/* Positioned on the overlay, not inside the stage, so they never shrink the image */
.lg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(242, 202, 80, 0.25);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f2ca50;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.lg-arrow:hover  { background: rgba(242,202,80,0.18); border-color: #f2ca50; transform: translateY(-50%) scale(1.1); }
.lg-arrow:active { transform: translateY(-50%) scale(0.93); }

#lg-prev { left: 10px; }
#lg-next { right: 10px; }

/* ── Thumbnail strip (overlays bottom, semi-transparent) ── */
#lg-thumbs-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px 10px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
    z-index: 10;
}

#lg-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    justify-content: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#lg-thumbs::-webkit-scrollbar { display: none; }

.lg-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.18s ease;
    opacity: 0.5;
    -webkit-tap-highlight-color: transparent;
}
.lg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.lg-thumb:hover        { opacity: 0.82; border-color: rgba(242,202,80,0.5); }
.lg-thumb.lg-thumb-active {
    opacity: 1;
    border-color: #f2ca50;
    box-shadow: 0 0 0 2px rgba(242,202,80,0.28);
    transform: scale(1.07);
}

/* ── Cursor hint ────────────────────────────────────────── */
#main-image,
#gallery-thumbnails button { cursor: zoom-in; }

/* ── Portrait mobile (narrow screens) ─────────────────── */
@media (max-width: 640px) {
    #lg-stage {
        padding: 52px 36px 0;  /* tighter sides on small phones */
    }
    #lg-img {
        max-width: 96vw;
        max-height: calc(100vh - 110px);
    }
    #lg-prev { left: 4px; }
    #lg-next { right: 4px; }
    .lg-arrow { width: 38px; height: 38px; }
    .lg-arrow .material-symbols-outlined { font-size: 20px; }
    .lg-thumb { width: 54px; height: 38px; }
}

/* ── MOBILE LANDSCAPE — the critical fix ───────────────────
   In landscape the viewport height is very short (~360-420px).
   Goal: image fills ~90%+ of the screen height.
   Thumbnails collapse to a tiny 36px strip overlaying the bottom.
   Header shrinks to 38px. Arrows hug the edges.
   ──────────────────────────────────────────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
    #lg-header { height: 38px; padding: 0 10px; }
    #lg-close-btn { width: 34px; height: 34px; }
    #lg-close-btn .material-symbols-outlined { font-size: 18px; }

    #lg-stage {
        padding: 38px 40px 0;  /* header height top; arrows handle sides */
    }

    #lg-img {
        max-width: 90vw;
        max-height: calc(100vh - 78px);  /* 38px header + 40px thumb strip */
    }

    /* Very tight arrows */
    #lg-prev { left: 4px; }
    #lg-next { right: 4px; }
    .lg-arrow { width: 34px; height: 34px; }
    .lg-arrow .material-symbols-outlined { font-size: 18px; }

    /* Slim thumbnail strip */
    #lg-thumbs-wrap { padding: 4px 8px 6px; }
    .lg-thumb { width: 50px; height: 34px; }
    #lg-thumbs { gap: 5px; }
}