/*==========================================================================
   GLOBAL DESIGN TOKENS & OPTIONAL MODULES
   ==========================================================================*/

/*--------------------------------------------------------------------------
   1. FONT IMPORT DECLARATION
   --------------------------------------------------------------------------
   Defines the external font loading strategy for the channel.
   --------------------------------------------------------------------------*/
   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");


   :root {
       /*----------------------------------------------------------------------
          1. TYPOGRAPHY STACK
          ----------------------------------------------------------------------*/
       --theme-font-family: "Inter", sans-serif; /* Defines default font family */


       /*----------------------------------------------------------------------
          2. MOBILE DRAWER NAVIGATION MENU
          ----------------------------------------------------------------------*/
       --ob-nav-text-color: #ffffff; /* Text color for mobile menu items */
       --ob-nav-bg-color: #0e1039; /* Background color for mobile menu container */
       --ob-nav-list-active-text-color: #ffffff; /* Active route text color */
       --ob-nav-list-active-bg-color: #282a6f; /* Active route background highlight */


       /*----------------------------------------------------------------------
          3. TOP NAVIGATION BAR (TOPBAR)
          ----------------------------------------------------------------------*/
       --ob-custom-nav-bg-color: #292c6a; /* Authenticated topbar background */
       --ob-custom-nav-text-color: #ffffff; /* Authenticated topbar text color */
       --ob-public-nav-bg-color: #292c6a; /* Public/login topbar background */
       --ob-public-nav-text-color: #ffffff; /* Public/login topbar text color */


       /*----------------------------------------------------------------------
          4. PRIMARY COLOR PALETTE SCALE (TINTS & SHADES)
          ----------------------------------------------------------------------*/
       --theme-primary-50: #f3f6ff;
       --theme-primary-100: #e6ebff;
       --theme-primary-200: #d2daff;
       --theme-primary-300: #b7c2fb;
       --theme-primary-400: #98a3ea;
       --theme-primary-500: #282a6f; /* MAIN PRIMARY COLOR: Buttons & brand accents */
       --theme-primary-600: #5860ac;
       --theme-primary-700: #42488f;
       --theme-primary-800: #2c3069;
       --theme-primary-900: #181b44;

       /* Accent variations */
       --theme-primary-A100: #dee5ff;
       --theme-primary-A200: #c1ccff;
       --theme-primary-A400: #95a2ff;
       --theme-primary-A700: #5f68bb; /* ACCENT COLOR: Gift Card promo banners */


       /*----------------------------------------------------------------------
          5. ACCESSIBILITY CONTRAST COLORS (TEXT ON TOP OF PRIMARY PALETTE)
          ----------------------------------------------------------------------*/
       --theme-primary-contrast-50: #000000;
       --theme-primary-contrast-100: #000000;
       --theme-primary-contrast-200: #000000;
       --theme-primary-contrast-300: #000000;
       --theme-primary-contrast-400: #000000;
       --theme-primary-contrast-500: #ffffff; /* MAIN BUTTON TEXT COLOR: Contrast over primary-500 */
       --theme-primary-contrast-600: #ffffff;
       --theme-primary-contrast-700: #ffffff;
       --theme-primary-contrast-800: #ffffff;
       --theme-primary-contrast-900: #ffffff;
       --theme-primary-contrast-A100: #000000;
       --theme-primary-contrast-A200: #000000;
       --theme-primary-contrast-A400: #000000;
       --theme-primary-contrast-A700: #ffffff;


       /*----------------------------------------------------------------------
          6. MODALS & DIALOGS (OPTIONAL)
          ----------------------------------------------------------------------*/
       /* --ob-external-vendor-login-footer-bg-color: #2c3069; /* Modal footer background */


       /*----------------------------------------------------------------------
          7. GLOBAL HEADER DIMENSIONS (OPTIONAL)
          ----------------------------------------------------------------------*/
       /* --ob-channel-header-height: 80px; /* Max channel header height */


       /*----------------------------------------------------------------------
          8. PASSBOOK ACTION BUTTON (OPTIONAL)
          ----------------------------------------------------------------------*/
       /* --ob-passbook-text-color: #ffffff; /* Passbook button text color */
       /* --ob-passbook-button-color: #181b44; /* Passbook button background color */


       /*----------------------------------------------------------------------
          9. FOOTER BRANDING & LOGOS (OPTIONAL)
          ----------------------------------------------------------------------*/
       --ob-custom-logo-filter: brightness(20); /* Footer logo filter */

   }


   /*==========================================================================
      OPTIONAL STYLESHEET MODULES
      NOTE: The sections below are active by default or can be toggled.
      ==========================================================================*/

   /*--------------------------------------------------------------------------
      1. SUBFOOTER (DARK THEME OVERRIDES)
      --------------------------------------------------------------------------*/

   /* Container background & global text color */
   ob-footer.main-footer,
   #desktop-footer {
       background-color: #251b5b !important;
       color: #ffffff !important;
   }

   /* Force all text elements, links, buttons, spans, and icons inside the footer */
   #desktop-footer *,
   ob-footer.main-footer * {
       color: #ffffff !important;
   }

   /* Language selector button (Outlined button border & text fixes) */
   ob-footer.main-footer ob-button .mat-mdc-outlined-button {
       border-color: #ffffff !important;
   }

   /* Logo display toggles & white color filter for dark background */
   .fever-logo {
       display: block !important;
   }

   .onebox-logo {
       display: none !important;
   }


   /*--------------------------------------------------------------------------
      2. LOGIN SCREEN (BACKGROUND IMAGE SCALING) [OPTIONAL]
      --------------------------------------------------------------------------*/
   .background-blur {
       background-image: url("https://tickets.oneboxtds.com/riyadhairmetropolitano/img/background.webp");
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;
       filter: brightness(80%);
   }