@charset "UTF-8";

/*El resto de tu código CSS aquí*/
/*import*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tac+One&display=swap');

:root {
    --theme-font-family: "Noto Sans Arabic", "Noto Sans", serif;

    /*Sidenav*/
    --ob-nav-text-color: #fff;
    --ob-nav-bg-color: #8a1538;

    /*Active button sidenav*/
    --ob-nav-list-active-text-color: #fff;
    --ob-nav-list-active-bg-color: #e65300;

    /*Topbar inside*/
    --ob-custom-nav-bg-color: #8a1538;
    --ob-custom-nav-text-color: #fff;

    /*Topbar login*/
    --ob-public-nav-bg-color: #8a1538;
    --ob-public-nav-text-color: #fff;

    /*color primary*/
    --theme-primary-50: #F6F7F7;
    --theme-primary-100: #E1BCCD;
    --theme-primary-200: #CE8EAD;
    --theme-primary-300: #BA608D;
    --theme-primary-400: #AB3E75;
    --theme-primary-500: #e65300;
    --theme-primary-600: #7C1232;
    --theme-primary-700: #6A0F2B;
    --theme-primary-800: #580C24;
    --theme-primary-900: #8a1538;
    --theme-primary-A100: #FF7FA6;
    --theme-primary-A200: #FF4C7D;
    --theme-primary-A400: #FF1954;
    --theme-primary-A700: #E6003F;
    --theme-primary-contrast-50: #212121;
    --theme-primary-contrast-100: #212121;
    --theme-primary-contrast-200: #212121;
    --theme-primary-contrast-300: #FFFFFF;
    --theme-primary-contrast-400: #FFFFFF;
    --theme-primary-contrast-500: #fff;
    --theme-primary-contrast-600: #FFFFFF;
    --theme-primary-contrast-700: #FFFFFF;
    --theme-primary-contrast-800: #FFFFFF;
    --theme-primary-contrast-900: #FFFFFF;
    --theme-primary-contrast-A100: #212121;
    --theme-primary-contrast-A200: #212121;
    --theme-primary-contrast-A400: #FFFFFF;
    --theme-primary-contrast-A700: #FFFFFF;
    /*Radius*/
    --theme-border-radius: 8px;
    /*Footer*/
    --theme-footer-background: #8a1538;
    /*Fever*/
    --theme-title-fever: #031419;
    --theme-body-fever: #536B75;
}

/**********************************************************************************************************************
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ NO BORRAR ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
**********************************************************************************************************************/

/*=============================================================================
    ÍNDICE
    1) Typographic behaviors & text formating
    2) OB Footer
    3) ob-page-events
    4) ob-page-event
    5) Footer Sponsors U17
    6) Elementos quedan ocultos
    8) Authentication & Login (Fever oauth / gmail instructions)
    9) Login
    10) ob-not-graphic-selection
    11) Top bar
    12) ob-page-suggestions
    13) The PMR message goes in venue-filters-content "Accessibility tickets..."
    14) MATCH SCHEDULE CONTAINER & LAYOUT BASE (event description)
    15) PAYMENT METHOD & BRAND ICONS OVERRIDES
    16) Custom Footer
    17) Short Description Card Navigation Theme Overrides
    18) Fixes
    19) Sponsors on specific Event ---- 60383
=============================================================================*/

/*============================================================================
    1) Typographic behaviors & text formating
============================================================================*/
.title,
h2#eventSessions,
[data-testid="content-card-title"],
.ob-title:not(ob-cart-summary-card-item *, ob-cart-summary-card-pack *, ob-view-info-dialog *) {
    font-weight: 800 !important;
}

/*============================================================================
   2) OB Footer
============================================================================*/

/*Background subfooter*/
ob-footer.main-footer {
    background: var(--theme-footer-background);
}

/*Color links subfooter & 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: #fff !important;
}

/*Button language links subfooter*/
/*Language & icon*/
ob-footer.main-footer span.mdc-button__label,
ob-footer.main-footer mat-icon.mat-icon {
    color: #fff !important;
    font-weight: 400;
}

/*Border*/
ob-footer.main-footer ob-button>.mat-mdc-outlined-button {
    border: 1px solid #fff !important;
}

/*============================================================================
   3) ob-page-events
============================================================================*/


/*Variable de fondo general de la página*/
ob-page-events,
ob-page-events section.main-container {
    background-color: #fff !important;
}

/*Variable de fondo de la tarjeta*/
ob-page-events ob-catalog-card .ob-catalog-card {
    background-color: #A0003C !important;
}

/*Título de la tarjeta*/
ob-page-events ob-catalog-card .ob-catalog-card .title {
    color: #fff !important;
}

/*Subtítulo de la tarjeta*/
ob-page-events ob-catalog-card .subtitle {
    color: #ffffff !important;
}

/*Fecha y recinto*/
ob-page-events ob-catalog-card .ob-catalog-card .content .dates,
span.ob-time {
    color: #ffffff !important;
}

/*Precio mínimo*/
ob-page-events ob-catalog-card .min-price-label {
    color: #ffffff !important;
}

/*Color de texto mas información*/
ob-page-events ob-catalog-card .ob-catalog-card .content .more-info {
    color: #e5cbd3 !important;
}

/*Color de acento o enlace detectado/ajustado*/
ob-page-events ob-catalog-card .ob-catalog-card .content .view-more-info.ob-link {
    color: #ffffff !important;
}

/*Padding condicional (solo con fondos de color)*/
ob-page-events ob-catalog-card .content {
    padding: 14px !important;
}

/*Apply rounded top corners to the header image container*/
.header .ob-image-container,
.ob-header .ob-image-container {
    border-radius: 4px 4px 0 0 !important;
}

/*Event title text color inside the blurred header section*/
ob-page-select-locations .page-header-blur h2.mat-mdc-tooltip-trigger.title {
    color: #fff;
}

/*Apply color icons in the blurred header*/
ob-page-select-locations .page-header-blur mat-icon.mat-icon {
    color: #fff;
}

/*Remove top padding on event header when an image is present (Mobile screens only)*/
@media (max-width: 768px) {
    ob-page-event .event-main-header .page-header-blur .page-header-content-full .page-header-main .header-main:not(.no-image) {
        padding-top: 0 !important;
    }
}

/*alinear texto de la card horizontal al centro horizontal*/
.ob-catalog-card.horizontal .content {
    align-self: center !important;
}

/*cambio location en evento*/
ob-catalog-card#eventId-61768 .ob-event-location-venue {
    font-size: 0px;
}

ob-catalog-card#eventId-61768 .ob-event-location-venue {
    display: flex !important;
    align-items: center !important;
    /* Alinea icono y texto en el centro vertical */
}

[lang="en"] ob-catalog-card#eventId-61768 .ob-event-location-venue:after {
    content: 'Abdullah bin Khalifa Stadium / استاد عبدالله بن خليفة, Doha';
    font-size: 14px;
    line-height: 1;
}

[lang="ar"] ob-catalog-card#eventId-61768 .ob-event-location-venue:after {
    content: 'Abdullah bin Khalifa Stadium, \0627\0644\062F\0648\062D\0629';
    font-size: 14px;
    line-height: 1;
}

/*============================================================================
   4) ob-page-event
============================================================================*/

/*Variable de fondo general de la pagina*/
ob-page-event,
ob-page-event .main-container {
    background-color: #fff !important;
}

/*Variable de fondo de la tarjeta*/
ob-page-event ob-catalog-item-card-vertical .ob-catalog-item-card,
ob-page-event .ob-content-card {
    background-color: #a0003c !important;
}

/*Título de la pagina*/
ob-page-event h2#eventSessions {
    color: #8a1538 !important;
}

/*Título de la tarjeta*/
ob-page-event ob-catalog-item-card-vertical .ob-catalog-item-card .title,
ob-page-event [data-testid="content-card-title"] {
    color: #fff !important;
}

/*Informacion de la tarjeta*/
ob-page-event ob-catalog-item-card-vertical .ob-catalog-item-card .info-container,
ob-page-event .ob-content-card-horizontal .ob-text {
    color: #ead5dc !important;
}

/*Fecha y recinto*/
ob-page-event ob-catalog-item-card-vertical .ob-catalog-item-card .min-price,
ob-page-event ob-catalog-item-card-vertical .ob-catalog-item-card .whitespace-nowrap,
ob-page-event [data-testid="content-card-price-value"],
ob-page-event ob-content-card-price .ob-card-from-label {
    color: #ffffff !important;
}

/*Contenedor de fecha*/
ob-page-event ob-catalog-item-card-vertical .item-date-container,
ob-page-event [data-testid="content-card-date-box"] .ob-date-box {
    background-color: #e65300 !important;
    color: #fff !important;
}

/*Override the background color of the blurred page header section*/
ob-page-event .page-header-blur.flex.with-image {
    background-color: #8a1538 !important;
    border-top: 1px solid #e65300;
}

/*Apply high-visibility lime/yellow highlight (#e65300) to the "Load More" action button text*/
button.load-more-button.ob-link,
button.ob-load-more-button.ob-link {
    color: #e65300;
}

/*venue location*/
ob-content-card-vertical .ob-detail.ob-venue-line {
    color: #fff;
}

/*title and icon go back specific colour*/
div#eventId-61768 .page-header-blur mat-icon.mat-icon.notranslate.ob-icon.mat-icon-rtl-mirror.material-symbols-outlined.mat-icon-no-color.ng-star-inserted,
div#eventId-61768 .page-header-blur .title {
    color: #fff !important;

}

/*============================================================================
    5) Footer Sponsors U17
============================================================================*/

.banner-resp {
    background-color: #8a1538;
    padding: 2rem;
}

.banner-resp img {
    width: 70%;
}

.banner-resp picture,
.banner-resp img {
    display: block;
    margin: 0 auto;
    height: auto;
}

@media only screen and (max-width: 40.063em) {
    .banner-resp img {
        width: 40%;
    }
}

*/
/*============================================================================
   6) Elementos quedan ocultos
============================================================================*/

/*Ocultar titutlo pack  en ficha sesión (packs)*/
.pack-title {
    display: none;
}

/*Agreements de onebox solo en el login*/
ob-fever-vendor-login .agreements {
    display: none;
}

/*Powered by on subfooter OB*/
ob-footer#desktop-footer section.copyright-wrapper span.flex.items-center {
    display: none;
}

/*Texto from*/
.ob-from-label {
    display: none;
}

/*Show matches*/
.sidebar-content ob-min-price-card {
    display: none;
}

/*Fees*/
mat-dialog-actions.mat-mdc-dialog-actions .description.surcharges,
.ob-rate-fees,
.ob-card-items-fees,
.ob-surcharge,
.ob-charges {
    display: none !important;
}

/*Ticket available*/
.ob-availability,
.view-list ob-availability-item {
    display: none !important;
}

/*Módulo de nombre pack en sesion*/
ob-catalog-item-card#sessionId-2597158 .pack-title {
    display: none;
}

/*Show show matches*/
.min-price-card,
.ob-min-price-card {
    display: none;
}

/*Section descripción*/
section[aria-labelledby="eventInformation"],
section[aria-labelledby="eventInformation-tab"] {
    display: none;
}

/*Decoración > antes de los títulos*/
ob-section-header .mat-icon {
    display: none;
}

/*Botones subfooter OB - Cookies settings y Accesibility Statement*/
.footer-links button:nth-of-type(2),
.footer-links button:nth-of-type(5) {
    display: none;
}

/*Separadores son spans justo antes de nbotones subfooter OB - Cookies settings y Accesibility Statement*/
.footer-links span[role="separator"]+button:nth-of-type(2),
.footer-links span[role="separator"]+button:nth-of-type(5),
.footer-links span[role="separator"]+button:nth-of-type(3),
.footer-links span[role="separator"]:has(+ button:nth-of-type(2)),
.footer-links span[role="separator"]:has(+ button:nth-of-type(5)),
.footer-links span[role="separator"]:has(+ button:nth-of-type(3)) {
    display: none;
}

/*Boton filtros vista recinto*/
ob-venue-viewer ob-button.open-filters-btn {
    display: none;
}

/*MOBILE*/
@media only screen and (max-width: 40.063em) {

    /*Powered by*/
    ob-footer .copyright-wrapper span.flex.items-center.gap-1 {
        display: none;
    }
}

/*Hide the main filter container block across the portal*/
ob-page-events .filter-container {
    display: none;
}

/*Hide the centered sub-header item within the main event header component*/
ob-page-event-header section.page-header-item {
    display: none !important;
}

/*Hide the blurred background image container in the event header*/
ob-page-event .page-header-blur .image-container {
    display: none !important;
}

/*Hide button "Sesaron ticket" on menu panel on top bar*/
button.mat-mdc-menu-item.mat-focus-indicator[data-testid="my-season-tickets"] {
    display: none;
}


/*Hide target the specific download action button inside the Fever legal terms modal*/
.fever-legal-terms-dialog mat-dialog-actions.mat-mdc-dialog-actions.mdc-dialog__actions ob-button.medium[prefixicon="download"] {
    display: none;
    /*Suppresses the button visually and layout-wise*/
}

/*Hide the agreement terms paragraph inside the legal dialog*/
.fever-legal-terms-dialog p.fever-agreements {
    display: none;
}

/*Remove internal padding and margins from the legal terms grid container*/
.fever-legal-terms-dialog .grid.gap-8.pb-6.pt-8 {
    margin: 0 !important;
    padding: 0 !important;
}

/*============================================================================
   7) ob-page-select-locations
============================================================================*/

/*Override the background color of the blurred page header section*/
ob-page-select-locations .page-header-blur.flex.items-center {
    background-color: #8a1538 !important;
    color: #fff;
    border-top: 1px solid #e65300;
}

/*---------------------------------------------------------------------------
  8) 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;
}

/*-----------------------------------------------------
  9) 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*/
/*eng*/
ob-fever-vendor-login .otp-email-title:before {
    background-image: url("https://client-dists-resources.s3.eu-west-1.amazonaws.com/channels-client/portal/assets/road-to-qatar-logo.jpg");
}

/*arabe*/
html[lang="ar"] ob-fever-vendor-login .otp-email-title:before {
    background-image: url("https://client-dists-resources.s3.eu-west-1.amazonaws.com/channels-client/portal/assets/road-to-qatar-logo.jpg");
    background-repeat: no-repeat !important;
    background-position: right center !important;
    direction: rtl !important;
    display: block !important;
    text-align: right !important;
    padding-right: 30px !important;
    padding-left: 0 !important;
}

/*Apply global navigation theme variables and custom display typography to the Fever vendor dialog container and its modal heading*/
ob-dialog-header#fever-vendor-title,
ob-dialog-header#fever-vendor-title h2 {
    background-color: var(--ob-nav-bg-color) !important;
    color: var(--ob-nav-text-color) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

/*-----------------------------------------------------
    10) ob-not-graphic-selection
-----------------------------------------------------*/
/*Style the price zone / seat selection sidebar header using theme variables "Choose your tickets"- Sets the header background and text color to match the primary navigation bar theme*/
.bottom-main-content .side-pzs-selection .side-pzs-selection-header,
.side-pzs-selection-title,
.mat-mdc-dialog-inner-container.mdc-dialog__container mat-card-title.mat-mdc-card-title,
.mat-mdc-dialog-title.mdc-dialog__title header {
    background-color: var(--ob-nav-list-active-bg-color);
    color: var(--ob-nav-list-active-text-color) !important;
}

.side-pzs-selection-content-mbl {
    background-color: #FFF;
}


/*Especificidad completa del contenedor*/
.bottom-main-content .side-pzs-selection .side-pzs-selection-header,
.bottom-main-content .side-pzs-selection .side-pzs-selection-header *,
.side-pzs-selection-title {
    /*font-family: "Tac One", sans-serif !important;*/
    font-size: 22px !important;
    line-height: 1.15 !important;
}

/*-----------------------------------------------------
    11) Top bar
-----------------------------------------------------*/
img.logo {
    height: 50px;
}

/*-----------------------------------------------------
    12) ob-page-suggestions
-----------------------------------------------------*/

/*Page Background
   --------------------------------------------------------------------------*/
ob-page-suggestions,
ob-page-suggestions .main-container {
    background-color: #8A1538 !important;
}

/*Page Section Title
   --------------------------------------------------------------------------*/
ob-page-suggestions h2.title {
    color: #ffffff;
}

/*Suggestion Card Layout & Background
   --------------------------------------------------------------------------*/
ob-page-suggestions ob-suggestion-card {
    background-color: #A0003C !important;
}

/*Card Content Padding (Applied when background color is active)*/
ob-page-suggestions ob-suggestion-card.content {
    padding: 14px !important;
}

/*Typography & Labels
   --------------------------------------------------------------------------*/
/*Card Title*/
ob-page-suggestions ob-suggestion-card .title {
    color: #ffffff !important;
}

/*Card Subtitles (Horizontal & Vertical)*/
ob-page-suggestions ob-suggestion-card.subtitle,
ob-page-suggestions ob-suggestion-card h4.subtitle.vertical-subtitle {
    color: #ffffff !important;
}

/*Event Details: Dates, Venue & Price*/
ob-page-suggestions ob-suggestion-card .content .dates,
ob-page-suggestions ob-suggestion-card .min-price-label {
    color: #ffffff !important;
}

/*Links & Extra Info*/
ob-page-suggestions ob-suggestion-card .content .more-info {
    color: #e5cbd3 !important;
}

ob-page-suggestions ob-suggestion-card .content .view-more-info.ob-link {
    color: #ffffff !important;
}

ob-suggestion-card .ob-suggestion-card {
    background-color: #A0003C !important;
    border: none !important;
}

span.mdc-button__label {
    font-size: 14px;
}

/*Buttons & Action Items
   --------------------------------------------------------------------------*/
/*Button Border & Radius*/
ob-page-suggestions ob-suggestion-card ob-button button {
    border: 2px solid var(--theme-primary-500) !important;
    border-radius: 10px;
}

/*Button Label Color*/
ob-page-suggestions ob-suggestion-card ob-button.medium .mdc-button__label {
    color: var(--theme-primary-500) !important;
}


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

ob-not-graphic-selection .select-options::before,
ob-not-graphic-selection .select-options::before {
    color: var(--theme-info);
    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-select-graphic-cart-summary .ob-card-items-container::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;
    display: block;
    color: #1976d2;
    font-size: 11px;
    line-height: 14px;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: left 6px;
    padding: 0 0 0 22px;
    margin-bottom: 8px;
}

/*arabe*/
html[lang="ar"] ob-select-graphic-cart-summary .ob-card-items-container::before {
    content: "إذا كنت بحاجة إلى تذاكر ذوي الإعاقة، يرجى إرسال طلبك إلى accessibility.tickets@sc.qa";
    display: block;
    direction: rtl;
    text-align: right;
    color: #1976d2;
    font-size: 11px;
    line-height: 14px;
    background-image: url("https://client-dists-resources.s3.eu-west-1.amazonaws.com/channels-client/fifa-arab-cup/assets/pmr.png");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: right 6px;
    padding: 0 22px 0 0;
    margin-bottom: 8px;
}

/*---------------------------------------------------------------------------
  14) MATCH SCHEDULE CONTAINER & LAYOUT BASE (event description)
---------------------------------------------------------------------------*/

.schedule-text-container {
    max-width: 100%;
    margin: 0 auto;
}

.matches-title {
    padding-bottom: 8px;
}

.daypass-title {
    border-bottom: 1px solid #fff;
    padding-bottom: 6px;
    margin-top: 28px;
}

/*Match Items Cards*/
.match-simple-item {
    color: #3e4347;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #0000001f;
}

.matches-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
}

.match-simple-item {
    margin: 0 !important;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

/*Quita márgenes internos de etiquetas internas si interfieren*/
.match-simple-item strong,
.match-simple-item span {
    display: block;
    margin: 0;
}

/*Notice Box*/
.schedule-notice-item {
    border-radius: 4px;
    color: #ffffff;
    font-style: italic;
    font-size: 14px;
}

/*Day Pass Section*/
.daypass-text-item {
    color: #ffffff;
}

.schedule-section-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
    color: #fff;
    font-weight: 800 !important;
}

.schedule-section-title:nth-child(3) {
    margin-top: 24px !important;
}

/*Center alignment for individual match details*/
.match-simple-item {
    text-align: center;
}

/*Top margin spacing for notice text and Day Pass section*/
p.schedule-notice-item,
.daypass-container {
    margin-top: 14px;
}

/*==========================================================================
Non-Graphic Selection Component Styles
==========================================================================*/

/*1. Global Container Backgrounds Sets the Qatar Maroon (#8A1538) theme for the primary wrappers*/
ob-not-graphic-selection,
ob-not-graphic-selection .main-container {
    background-color: #8A1538;
}

/*2. Side Panel / Selection Area Card styling with white background and rounded corners*/
ob-not-graphic-selection .side-pzs-selection-content,
ob-not-graphic-selection .side-pzs-selection {
    background-color: #ffffff;
}

ob-not-graphic-selection .side-pzs-selection {
    border-radius: 8px;
}

ob-not-graphic-selection .side-pzs-selection-header,
.side-pzs-selection-title,
.mat-mdc-dialog-inner-container.mdc-dialog__container mat-card-title.mat-mdc-card-title,
.mat-mdc-dialog-title.mdc-dialog__title header {
    text-transform: capitalize !important;
    font-weight: 800 !important;
    font-weight: 22px !important;
}

/*3. Icon Overrides Sets dark icon color (#212121) inside primary message banners*/
ob-not-graphic-selection .ob-message mat-icon.mat-primary {
    color: #212121;
}

/*Layout base para Desktop (3 tarjetas por fila)*/
.matches-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
}

/*Responsive: Pantallas Pequeñas / Móviles*/
@media (max-width: 768px) {
    .matches-list-container {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 12px;
    }
}

/*==========================================================================
   Fix para'.ob-short-description-card' (Modal / Dialog Popup)
   ==========================================================================*/

/*Piliten a maysa laeng a kolumna ti agparang no adda iti uneg ti modal*/
.ob-short-description-card .matches-list-container {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
}

/*Vasaran ti padding ken line-height para kadagiti bassit a pagikabilan*/
.ob-short-description-card .match-simple-item {
    padding: 8px 4px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
}

/*Siguraduen a ti text container ket ag-expand iti 100% ti kaaba ti card*/
.ob-short-description-card .schedule-text-container {
    width: 90% !important;
    max-width: 100% !important;
}

/*---------------------------------------------------------------------------
  15) PAYMENT METHOD & BRAND ICONS OVERRIDES
---------------------------------------------------------------------------*/
/*Stripe accent (selected "Card" label and icon): Stripe reads --theme-primary-500 from <html> once, when the form loads,
  and its iframe ignores this stylesheet. Maroon on <html> during payment only; <body> keeps lime for the rest of the page*/
/*Code by Nico Banegas*/
:root:has(ob-page-payment) {
    --theme-primary-500: #8a1538;
}

:root:has(ob-page-payment) body {
    --theme-primary-500: #e65300;
}

/*Change the payment accordion button text color*/
.p-PaymentAccordionButtonText {
    color: #8a1538 !important;
}

/*Change the selected payment method icon color*/
svg.p-Icon.p-Icon--card.Icon.p-Icon--md.TabIcon.p-PaymentAccordionButtonIcon.TabIcon--selected {
    color: #8a1538 !important;
}

/*---------------------------------------------------------------------------
  16) Custom Footer
---------------------------------------------------------------------------*/

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

/*Base styles for the clickable links*/
.afc-action-link {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: #ffffff;
    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: #fff;
    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;
}

/*==========================================================================
   17) Short Description Card Navigation Theme Overrides
   ==========================================================================*/

/*Apply navigation theme background and text colors to the description content area*/
.ob-short-description-card .short-description-content,
.mat-mdc-dialog-inner-container.mdc-dialog__container .description {
    background-color: var(--ob-nav-bg-color) !important;
    color: var(--ob-nav-text-color);
}

/*Match the image container background color with the navigation theme*/
.ob-short-description-card .image-container {
    background-color: var(--ob-nav-bg-color) !important;
}

/*==========================================================================
   18) Fixes
   ==========================================================================*/
/*Notice: Only Visa Cards Accepted (English & Arabic)*/

/*Target the payment form container to attach the disclaimer note at the bottom*/
ob-page-payment ob-in-site-payment-renderer ob-stripe-in-site-extension form#payment-form::after {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    text-align: center;
}

/*1. English Version
html[lang="en"] ob-page-payment ob-in-site-payment-renderer ob-stripe-in-site-extension form#payment-form::after,
:lang(en) ob-page-payment ob-in-site-payment-renderer ob-stripe-in-site-extension form#payment-form::after {
    content: "Visa is the preferred payment method for FU17WC26";
    direction: ltr;
}

/*2. Arabic Version
html[lang="ar"] ob-page-payment ob-in-site-payment-renderer ob-stripe-in-site-extension form#payment-form::after,
:lang(ar) ob-page-payment ob-in-site-payment-renderer ob-stripe-in-site-extension form#payment-form::after {
    content: "Visa هي وسيلة الدفع المفضّلة في بطولة كأس العالم تحت 17 سنة FIFA قطر 2026™";
    direction: rtl;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}*/

/*==========================================================================
   19) Sponsors on specific Event ---- 61768
   ==========================================================================*/
/*Oculta de forma tajante en el evento 61768*/
html:has(#eventId-61767) .footer-sponsors,
html:has(ob-page-events) .footer-sponsors,
html:has(ob-page-select-locations) .footer-sponsors,
html:has(ob-page-payment-success) .footer-sponsors,
html:has(ob-page-full-checkout) .footer-sponsors,
#eventId-61768~footer-sponsors,
#eventId-61768~.footer-sponsors {
    display: none !important;
}

/* MOBILE */
@media only screen and (max-width: 40.063em) {
    .footer-sponsors {
        padding: 20px 16px !important;
        gap: 12px;
        box-sizing: border-box;
        width: 100%;
    }

    /* Ajuste de cada tarjeta de sponsor en móvil (ajusta la clase según tu HTML) */
    .footer-sponsors>div,
    .footer-sponsors>a,
    .footer-sponsors .sponsor-item {
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
        min-width: 120px;
        box-sizing: border-box;
    }

    /* Asegura que la imagen interior no desborde la tarjeta */
    .footer-sponsors img,
    .footer-sponsors svg {
        max-width: 85%;
        height: auto;
    }
}

/* Selector de cada tarjeta blanca (ajusta la clase según tu HTML) */
.footer-sponsors .sponsor-item {
    flex: 0 1 220px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Para que las imágenes/SVGs nunca superen su tarjeta */
.footer-sponsors img,
.footer-sponsors svg {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.footer-sponsors {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 24px;
}

/*==========================================================================
   CODE MAINTAINED BY DESIGN
   ==========================================================================
   This stylesheet is strictly organized by categories to keep the code 
   clean, modular, and easy to maintain. 
   
   If you need to add new CSS rules, please consult Design Ops to identify the 
   correct section before inserting your code.
   
   Always sign your additions:
   - Code by [Your Name]
   ==========================================================================*/


/**********************************************************************************************************************
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ DESIGN ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
**********************************************************************************************************************/

/*Space top Type of admission*/
.side-pzs-selection-content .ob-selection-item {
    padding-top: 8px !important;
}

/*Space between error alert and zone price*/
.bottom-main-content span.ob-tag.error.bold {
    margin-bottom: 4px;
}

/*LAYOUT SELECTION TICKETS SECTION---END*/

/** fix labels cropping **/
label.mdc-floating-label {
    overflow: inherit;
}

/** rtl fix error field message **/
[dir=rtl] .ob-field .mat-mdc-form-field-subscript-wrapper .mat-icon.error-icon {
    margin: 0 0 0 4px;
}

ob-view-info-dialog ob-availability-item {
    display: none;
}

ob-venue-tooltip .ob-availability {
    display: none;
}

/*ORDER PHONE PREFIXES, PUT QATAR FIRST*/

#phone_prefix-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 245px;
}

/*Put all of them in order 0*/
#phone_prefix-panel mat-option {
    order: 0;
}

/*Move Spain to End*/
#phone_prefix-panel mat-option#mat-option-0 {
    order: 99;
}

/*Move Portugal to End*/
#phone_prefix-panel mat-option#mat-option-1 {
    order: 99;
}

/*Move Qatar to Start*/
#phone_prefix-panel mat-option#mat-option-166 {
    order: -1;
}

/*Remove Option*/
#phone_prefix-panel mat-option#mat-option-100 {
    display: none;
}

ob-checkout-summary aside ob-cart-summary {
    padding-bottom: 16px;
}

/** fix labels cropping **/
label.mdc-floating-label {
    overflow: inherit;
}

/** rtl fix error field message **/
[dir=rtl] .ob-field .mat-mdc-form-field-subscript-wrapper .mat-icon.error-icon {
    margin: 0 0 0 4px;
}



/*Full-width sessions grid: drop the sidebar (its min price card is already hidden) and the 806px content cap*/
/*Code by Nico Banegas*/
ob-page-event .sidebar-content {
    display: none !important;
}

ob-page-event .main-content.ob-restricted-width,
ob-page-event ob-sessions-list.ob-vertical-grid {
    width: 100%;
    max-width: none !important;
}


/*Info messages (accessibility, tickets limit) below the ticket selector instead of above it*/
/*Code by Nico Banegas*/
ob-not-graphic-selection .side-pzs-selection-content-mbl,
ob-not-graphic-selection .side-pzs-selection-content {
    display: flex;
    flex-direction: column;
}

ob-not-graphic-selection .side-pzs-selection-content-mbl>*,
ob-not-graphic-selection .side-pzs-selection-content>*,
ob-not-graphic-selection .side-pzs-selection-content .select-options {
    flex-shrink: 0;
}

ob-not-graphic-selection .side-pzs-selection-content-mbl>.pzs-selection-info {
    order: 1;
}

/*Desktop sidebar: unwrap .select-info so only the messages move and the session picker stays on top*/
ob-not-graphic-selection .side-pzs-selection-content>.select-info {
    display: contents;
}

ob-not-graphic-selection .side-pzs-selection-content .select-options {
    order: 1;
    margin: 16px 0 0;
}

/*Tighter selection card: no empty session picker row, no double gap under the last ticket card, closer info lines*/
/*Collapse, never hide: #sessionPicker is the scroll target of the mobile "Select your tickets" button*/
ob-not-graphic-selection .side-pzs-selection-content-mbl>.session-picker:empty {
    padding: 0 !important;
}

ob-not-graphic-selection ob-price-zones-selection>ob-card:last-of-type .mat-mdc-card {
    margin-bottom: 0;
}

ob-not-graphic-selection .select-options {
    gap: 8px !important;
}


/*Pagination: no white box, white text and arrows over the maroon background
   --------------------------------------------------------------------------*/
/*Code by Nico Banegas*/
ob-page-suggestions ob-paginator .mat-mdc-paginator {
    --mat-paginator-container-background-color: transparent;
    --mat-paginator-container-text-color: #ffffff;
    --mat-paginator-enabled-icon-color: #ffffff;
    --mat-paginator-disabled-icon-color: rgba(255, 255, 255, 0.38);
    --mat-icon-button-state-layer-color: #ffffff;
    --mat-icon-button-ripple-color: rgba(255, 255, 255, 0.12);
    background-color: transparent !important;
}

/*Suggestion detail dialog: ticket selector right under the event headers, before the description
   --------------------------------------------------------------------------*/
/*Code by Nico Banegas*/
ob-select-locations-dialog .mat-mdc-dialog-content {
    display: flex;
    flex-direction: column;
}

ob-select-locations-dialog .mat-mdc-dialog-content>* {
    flex-shrink: 0;
}

ob-select-locations-dialog .mat-mdc-dialog-content>ob-not-graphic-selection {
    order: 1;
}

ob-select-locations-dialog .mat-mdc-dialog-content>.description {
    order: 2;
}

/*The selection's 64px mobile bottom margin would now sit between the selector and the description*/
ob-select-locations-dialog ob-not-graphic-selection .main-container>.main-content {
    margin-bottom: 0;
}


/*Mobile: suggestion cards take the full column instead of the fixed 360px / 100dvw - 96px card*/
/*Code by Nico Banegas*/
@media (max-width: 639px) {
    ob-page-suggestions .suggestion-list ob-suggestion-card .ob-suggestion-card {
        width: 100% !important;
        max-width: 100% !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;
    }
}