@charset "UTF-8";

/*import*/
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Rajdhani:wght@300;400;500;600;700&display=swap');


:root {
  --theme-font-family: "Rajdhani", sans-serif;

  /*Sidenav*/
  --ob-nav-text-color: #FFFFFF;
  --ob-nav-bg-color: #470A68;

  /*Active button sidenav*/
  --ob-nav-list-active-text-color: #470A68;
  --ob-nav-list-active-bg-color: #16D0CB;

  /*Topbar inside*/
  --ob-custom-nav-bg-color: linear-gradient(135deg, #16D0CB 0%, #CE0058 35%, #8A1538 100%);
  --ob-custom-nav-text-color: #FFFFFF;

  /*Topbar login*/
  --ob-public-nav-bg-color: #FFFFFF;
  --ob-public-nav-text-color: #470A68;

  /*color primary*/
  --theme-primary-50: #e3f9f9;
  --theme-primary-100: #b9eff0;
  --theme-primary-200: #8ae4e6;
  --theme-primary-300: #5bd9dc;
  --theme-primary-400: #39d4d4;
  --theme-primary-500: #16d0cb;
  --theme-primary-600: #13c8c0;
  --theme-primary-700: #10beb3;
  --theme-primary-800: #0cb4a6;
  --theme-primary-900: #06a392;
  --theme-primary-A100: #ffffff;
  --theme-primary-A200: #d0fafd;
  --theme-primary-A400: #9df4fa;
  --theme-primary-A700: #83f1f9;
  --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: #000000;
  --theme-primary-contrast-600: #000000;
  --theme-primary-contrast-700: #000000;
  --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: #000000;
}

/*==================================================================================
  INDEX
  1) Ob Footer
  2) Top Bar
  3) Hidden Elements
  4) Login
  5) The PMR message goes in venue-filters-content "Accessibility tickets..."
  6) Authentication & Login (Fever oauth / gmail instructions)
  7) Custom Footer
*=================================================================================*/

/*-----------------------------------------------------
  1) Ob Footer
-----------------------------------------------------*/

/*Subfooter background*/
ob-footer.main-footer {
  background-color: #16d0cb;
}

/*Text and links color (including copyright)*/
ob-footer.main-footer,
ob-footer.main-footer a,
ob-footer.main-footer span.footer-copyright,
ob-footer.main-footer span.justify-end,
ob-footer.main-footer button.ob-link {
  color: #470A68 !important;
}

/*Language selector button (text and icon)*/
ob-footer.main-footer span.mdc-button__label,
ob-footer.main-footer mat-icon.mat-icon {
  color: #470A68 !important;
}

/*Border for outlined buttons in the subfooter*/
ob-footer.main-footer ob-button>.mat-mdc-outlined-button {
  border: 1px solid #470A68 !important;
}

/*Powered by text color*/
ob-footer.main-footer section.items-center {
  color: #470A68;
}

/*Force powered by fever*/
.fever-logo {
  display: block !important;
}

.onebox-logo {
  display: none
}

/*-----------------------------------------------------
  2) Top Bar
-----------------------------------------------------*/

/*Custom logo sizing override within the navigation toolbar*/
mat-toolbar .centered-logo img {
  width: 250px;
}

/*-----------------------------------------------------
  3) Hidden Elements
-----------------------------------------------------*/

/*Hide default text application title when visual logo is used*/
mat-toolbar span.app-title {
  display: none;
}

/*Hide the "Powered by" text in the Onebox subfooter*/
section.copyright-wrapper span.flex.items-center.gap-1 {
  display: none;
}

/*Hide the minimum price card element across the ticketing flow*/
aside.ob-min-price-card {
  display: none;
}

/*Hide the "My Season Tickets" option inside menu panels, uses a wildcard attribute selector [id^="..."] to match dynamically generated panel IDs*/
div[id^="mat-menu-panel-"] button.mat-mdc-menu-item[data-testid="my-season-tickets"] {
  display: none;
}

/*Hide ink button located after the separator line inside the footer*/
/*Cookies settings*/
.footer-links button:nth-of-type(2) {
  display: none !important;
}

/*Legal warning*/
.footer-links button:nth-of-type(3) {
  display: none !important;
}

/*Accessibility Statment*/
.footer-links button:nth-of-type(5) {
  display: none !important;
}

/*Hide ONLY (·)*/
.footer-links span[role="separator"] {
  display: none;
}

/*Hide the Fever agreements block*/
ob-fever-vendor-login .agreements {
   display:none;
}
/*-----------------------------------------------------
  4) Login
-----------------------------------------------------*/

/*Dynamic brand logo insertion container above the OTP email login title*/
ob-fever-vendor-login .otp-email-title:before {
  content: "";
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: 1rem;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

/*Custom login brand logo image injection*/
ob-fever-vendor-login .otp-email-title:before {
  background-image: url("https://client-dists-resources.s3.amazonaws.com/channels-client/b2bvip-u17-gulf-cup/logo-login.svg");
}

/*---------------------------------------------------------------------------
  5) The PMR message goes in venue-filters-content "Accessibility tickets..."
---------------------------------------------------------------------------*/

ob-graphic-selection #venue-filters-content::before,
ob-venue-filters-dialog mat-dialog-content.mat-mdc-dialog-content.mdc-dialog__content::before {
  color: var(--theme-info);
  padding: 8px;
  margin: 8px;
  font-size: var(--theme-body-2-font-size);
  display: block;
  max-width: 100%;
  line-height: 20px;
  white-space: normal;
  word-wrap: break-word;
}

/*ingles*/
html[lang="en"] ob-graphic-selection #venue-filters-content::before,
html[lang="en"] ob-venue-filters-dialog mat-dialog-content.mat-mdc-dialog-content.mdc-dialog__content::before {
  content: "Accessibility tickets are available by emailing accessibility.tickets@sc.qa";
  background: url("https://client-dists-resources.s3.eu-west-1.amazonaws.com/channels-client/fifa-arab-cup/assets/pmr.png") no-repeat left 8px center;
  background-size: 20px 20px;
  padding-left: 40px;
}

/*arabe*/
html[lang="ar"] ob-graphic-selection #venue-filters-content::before,
html[lang="ar"] ob-venue-filters-dialog mat-dialog-content.mat-mdc-dialog-content.mdc-dialog__content::before {
  content: "\0625\0630\0627\0020\0643\0646\062A\0020\0628\062D\0627\062C\0629\0020\0625\0644\0649\0020\062A\0630\0627\0643\0631\0020\0630\0648\064A\0020\0627\0644\0625\0639\0627\0642\0629\060C\0020\064A\0631\062C\0649\0020\0625\0631\0633\0627\0644\0020\0637\0644\0628\0643\0020\0625\0644\0649\0020\20  accessibility.tickets@sc.qa.";
  background: url("https://client-dists-resources.s3.eu-west-1.amazonaws.com/channels-client/fifa-arab-cup/assets/pmr.png") no-repeat left 8px center;
  background-size: 20px 20px;
  padding-left: 40px;
}

/*---------------------------------------------------------------------------
  6) Authentication & Login (Fever oauth / gmail instructions)
---------------------------------------------------------------------------*/

/*English (LTR) language variant*/
[lang="en"] ob-fever-oauth-button:after {
  content: 'Gmail users please log in here';
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
}

/*Arabic (RTL) language variant*/
[lang="ar"] ob-fever-oauth-button:after {
  content: 'يرجى من مستخدمي Gmail تسجيل الدخول من هنا';
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}

/*---------------------------------------------------------------------------
  7) Custom Footer
---------------------------------------------------------------------------*/

/* Full-width Centered Links Container (Desktop First / Base) */
.afc-actions-container {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    background-color: #16d0cb;
}

/* Base styles for the clickable links */
.afc-action-link {
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    color: #470a68;
    text-decoration: none;
    white-space: nowrap;
}

/* Inserts a middle dot ( · ) after every link EXCEPT the last one */
.afc-action-link:not(:last-child)::after {
    content: " \00b7";
    margin: 0 10px;
    color: #470a68;
    font-weight: 700;
    display: inline-block;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Mobile Layout Adaptations (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Stack links vertically and center them */
    .afc-actions-container {
        flex-direction: column;
        gap: 12px;
        padding: 20px 16px;
        text-align: center;
    }

    /* Permit text wrapping on smaller screens if needed */
    .afc-action-link {
        white-space: normal;
        display: block;
    }

    /* Hide the separator dot on mobile vertical layout */
    .afc-action-link:not(:last-child)::after {
        display: none;
    }
}

/*Remove top padding from the desktop footer inner container*/
ob-footer#desktop-footer footer {
    padding-top: 0 !important;
}


/*Single event: one wide card (image left, details right on desktop) instead of a lone card in the first grid column*/
/*Code by Nico Banegas*/
ob-page-events .catalog-container > ob-catalog-card:only-of-type {
    grid-column: 1 / -1;
}

ob-page-events .catalog-container > ob-catalog-card:only-of-type .ob-catalog-card {
    width: 100%;
}

@media (min-width: 769px) {
    ob-page-events .catalog-container > ob-catalog-card:only-of-type .ob-catalog-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    ob-page-events .catalog-container > ob-catalog-card:only-of-type .header .ob-image-container {
        height: 100%;
        border-radius: 4px 0 0 4px !important;
    }

    ob-page-events .catalog-container > ob-catalog-card:only-of-type .header img {
        height: 100%;
    }

    ob-page-events .catalog-container > ob-catalog-card:only-of-type .content {
        display: flex;
        align-items: center;
        padding: 32px !important;
    }

    ob-page-events .catalog-container > ob-catalog-card:only-of-type .content .title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    ob-page-events .catalog-container > ob-catalog-card:only-of-type .content .dates,
    ob-page-events .catalog-container > ob-catalog-card:only-of-type .content .min-price-label {
        font-size: 16px !important;
    }
}