/* --------------------------------------------------------------------------
   Disable OpenType locl Numeral Substitution (Prevent GE SS Two 69 -> ٦٩)
   -------------------------------------------------------------------------- */
html, body, *, ::before, ::after {
    font-feature-settings: "locl" 0, "numr" 0, "onum" 0, "pnum" 0 !important;
}

/* --------------------------------------------------------------------------
   Local Fonts with Dual Unicode-Range Strategy
   - Numbers (0-9) & English: Poppins ('popNum' / 'pop')
   - Arabic Text: GE SS Two ('GE SS Two' / 'Ge')
   -------------------------------------------------------------------------- */

/* Numbers (0-9) font family */
@font-face {
    font-family: 'popNum';
    src: url('../fonts/pop-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+0020-007E;
}
@font-face {
    font-family: 'popNum';
    src: url('../fonts/pop-meduim.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+0020-007E;
}
@font-face {
    font-family: 'popNum';
    src: url('../fonts/pop-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+0020-007E;
}

/* English font family (Poppins / pop) */
@font-face {
    font-family: 'pop';
    src: url('../fonts/pop-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-007F;
}
@font-face {
    font-family: 'pop';
    src: url('../fonts/pop-meduim.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-007F;
}
@font-face {
    font-family: 'pop';
    src: url('../fonts/pop-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-007F;
}

/* Arabic GE SS Two font family */
@font-face {
    font-family: 'GE SS Two';
    src: url('../fonts/GE-SS-Two-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFE;
}
@font-face {
    font-family: 'GE SS Two';
    src: url('../fonts/GE-SS-Two-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFE;
}
@font-face {
    font-family: 'GE SS Two';
    src: url('../fonts/GE-SS-Two-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFE;
}

/* Alias 'Ge' family name */
@font-face {
    font-family: 'Ge';
    src: url('../fonts/GE-SS-Two-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFE;
}
@font-face {
    font-family: 'Ge';
    src: url('../fonts/GE-SS-Two-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFE;
}
@font-face {
    font-family: 'Ge';
    src: url('../fonts/GE-SS-Two-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFE;
}

/* --------------------------------------------------------------------------
   Root Design System Tokens & Dual-Theme Color Architecture
   -------------------------------------------------------------------------- */
:root, [data-theme="light"] {
    --waafi-yellow: #F5C518;
    --waafi-yellow-dark: #C9A314;
    --waafi-yellow-light: #FFF0B3;
    --waafi-yellow-rgb: 245, 197, 24;

    --waafi-purple: #2D1F6B;
    --waafi-purple-light: #5B47B8;
    --waafi-purple-dark: #1E134A;
    --waafi-purple-rgb: 45, 31, 107;

    --waafi-bg: #FAFAFC;
    --waafi-surface: #FFFFFF;
    --waafi-surface-elevated: #FFFFFF;
    --waafi-border: #E2E8F0;
    --waafi-text-main: #0F172A;
    --waafi-text-muted: #64748B;
}

html.dark, [data-theme="dark"] {
    --waafi-yellow: #F5C518;
    --waafi-yellow-dark: #D4A50E;
    --waafi-yellow-light: #FFE580;
    --waafi-yellow-rgb: 245, 197, 24;

    --waafi-purple: #7C66DC;
    --waafi-purple-light: #9B8AFB;
    --waafi-purple-dark: #2D1F6B;
    --waafi-purple-rgb: 124, 102, 220;

    --waafi-bg: #0B0F19;
    --waafi-surface: #151C2C;
    --waafi-surface-elevated: #1E293B;
    --waafi-border: rgba(255, 255, 255, 0.08);
    --waafi-text-main: #F8FAFC;
    --waafi-text-muted: #94A3B8;
}

/* Base Body Styles */
body.public-body {
    font-family: 'popNum', 'pop', 'GE SS Two', 'Ge', 'Cairo', system-ui, -apple-system, sans-serif;
    background-color: var(--waafi-bg);
    color: var(--waafi-text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

.public-main {
    flex: 1 0 auto;
}

/* Color Helper Utility Classes */
.bg-waafi-yellow { background-color: var(--waafi-yellow) !important; }
.bg-waafi-yellow-dark { background-color: var(--waafi-yellow-dark) !important; }
.bg-waafi-purple { background-color: var(--waafi-purple) !important; }
.bg-waafi-purple-light { background-color: var(--waafi-purple-light) !important; }

.text-waafi-yellow { color: var(--waafi-yellow) !important; }
.text-waafi-purple { color: var(--waafi-purple) !important; }
.text-waafi-purple-light { color: var(--waafi-purple-light) !important; }

/* --------------------------------------------------------------------------
   Animations & Keyframes
   -------------------------------------------------------------------------- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-spin {
    animation: spin 1s linear infinite !important;
}

.animate-pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}


/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--waafi-bg);
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--waafi-yellow);
}

/* ==========================================================================
   WAAFI Device Safe-Area Inset Tokens & Utilities (UX-XCUT-SAFEAREA-001)
   Responsive mobile browser chrome, notch, home-indicator, and PWA standalone
   ========================================================================== */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    --mobile-bottom-nav-height: 4rem;
    --mobile-bottom-nav-safe-height: calc(var(--mobile-bottom-nav-height) + var(--safe-area-bottom));
}

/* Safe-Area Padding Utilities */
.pt-safe { padding-top: max(0px, env(safe-area-inset-top, 0px)) !important; }
.pb-safe { padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important; }
.pl-safe { padding-left: max(0px, env(safe-area-inset-left, 0px)) !important; }
.pr-safe { padding-right: max(0px, env(safe-area-inset-right, 0px)) !important; }
.px-safe {
    padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
}
.py-safe {
    padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
}
.p-safe {
    padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
}

/* Safe-Area Margin Utilities */
.mt-safe { margin-top: max(0px, env(safe-area-inset-top, 0px)) !important; }
.mb-safe { margin-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important; }
.ml-safe { margin-left: max(0px, env(safe-area-inset-left, 0px)) !important; }
.mr-safe { margin-right: max(0px, env(safe-area-inset-right, 0px)) !important; }
.mx-safe {
    margin-left: max(0px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(0px, env(safe-area-inset-right, 0px)) !important;
}
.my-safe {
    margin-top: max(0px, env(safe-area-inset-top, 0px)) !important;
    margin-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Safe-Area Offset Padding Utilities (Base padding + Device Inset) */
.pt-safe-offset-1 { padding-top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important; }
.pt-safe-offset-2 { padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important; }
.pt-safe-offset-3 { padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important; }
.pt-safe-offset-4 { padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; }
.pt-safe-offset-5 { padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important; }
.pt-safe-offset-6 { padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important; }

.pb-safe-offset-1 { padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px)) !important; }
.pb-safe-offset-2 { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important; }
.pb-safe-offset-3 { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important; }
.pb-safe-offset-4 { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
.pb-safe-offset-5 { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important; }
.pb-safe-offset-6 { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important; }

/* Safe-Area Positioning Utilities (Fixed & Sticky Placement) */
.top-safe { top: env(safe-area-inset-top, 0px) !important; }
.top-safe-4 { top: calc(1rem + env(safe-area-inset-top, 0px)) !important; }
.top-safe-5 { top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important; }
.bottom-safe { bottom: env(safe-area-inset-bottom, 0px) !important; }
.bottom-safe-4 { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
.bottom-safe-6 { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important; }
.bottom-safe-24 { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important; }
.left-safe-4 { left: calc(1rem + env(safe-area-inset-left, 0px)) !important; }
.left-safe-6 { left: calc(1.5rem + env(safe-area-inset-left, 0px)) !important; }
.right-safe-4 { right: calc(1rem + env(safe-area-inset-right, 0px)) !important; }
.right-safe-6 { right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important; }

/* Clearing Fixed Mobile Navigation */
.pb-bottom-nav-safe {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
}

/* Floating Above Mobile Bottom Navigation */
.bottom-nav-safe-offset {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
}
.bottom-nav-safe-offset-6 {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
}

/* PWA Standalone Mode Optimization */
@media (display-mode: standalone) {
    body {
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}