/*import*/
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    /*Fonts*/
    --theme-text-1: #111111;
    --theme-text-2: #636363;
    --theme-font-family: "Inter Tight", sans-serif;

    /*Navbar Colors*/
    /* Header claro como el del cliente: el texto tiene que ir en oscuro */
    --ob-nav-text-color: #111111;
    --ob-nav-bg-color: #fff;

    /*color primary*/
    /* Escala anclada en el 500 = #111111 (contrast del cliente, el color de sus
       botones). Los tonos 300 y 400 son los grises reales del cliente. */
    --theme-primary-50: #F9F9F9;
    --theme-primary-100: #F2F2F2;
    --theme-primary-200: #E4E4E4;
    --theme-primary-300: #A4A4A4;
    --theme-primary-400: #636363;
    --theme-primary-500: #111111;
    --theme-primary-600: #0E0E0E;
    --theme-primary-700: #0B0B0B;
    --theme-primary-800: #080808;
    --theme-primary-900: #000000;
    --theme-primary-A100: #F2F2F2;
    --theme-primary-A200: #A4A4A4;
    --theme-primary-A400: #636363;
    --theme-primary-A700: #0B0B0B;

    /* CONTRASTES */
    /* El corte cae entre el 300 (#A4A4A4, 7.6:1 con la tinta) y el
       400 (#636363, 6.0:1 con blanco) */
    --theme-primary-contrast-50: #111111;
    --theme-primary-contrast-100: #111111;
    --theme-primary-contrast-200: #111111;
    --theme-primary-contrast-300: #111111;
    --theme-primary-contrast-400: #FFFFFF;
    --theme-primary-contrast-500: #FFFFFF;
    --theme-primary-contrast-600: #FFFFFF;
    --theme-primary-contrast-700: #FFFFFF;
    --theme-primary-contrast-800: #FFFFFF;
    --theme-primary-contrast-900: #FFFFFF;
    --theme-primary-contrast-A100: #111111;
    --theme-primary-contrast-A200: #111111;
    --theme-primary-contrast-A400: #FFFFFF;
    --theme-primary-contrast-A700: #FFFFFF;

    /*Obfooter: logo filter*/
    /* Footer #111111 -> logo Fever en blanco */
    --ob-custom-logo-filter: brightness(20);

    /* Tokens propios para no repetir literales */
    --paeria-accent: #5b1c08;
    --paeria-hairline: rgba(91, 28, 8, 0.14);
    --paeria-hairline-soft: rgba(91, 28, 8, 0.08);
    --paeria-radius: 12px;
}

/*********
INDEX
0 - GENERAL
1 - NAVBAR
2 - BILLBOARD
3 - CARDS
4 - CHECKOUT
5 - FOOTER
6 - PRESALE
*********/


/*********
0 - GENERAL
*********/

/*General button*/
/* El cliente usa botones pill (border-radius 9999px) */
button.mdc-button,
a.mdc-button {
    border-radius: 50px !important;
}

/*Hover de botones solidos: el cliente pasa de #111111 a #636363*/
button.mdc-button--unelevated:hover,
a.mdc-button--unelevated:hover,
.mat-mdc-unelevated-button:not(.ghost):hover {
    background-color: #636363 !important;
    border-color: #636363 !important;
}

/*Titulares: Inter Tight con tracking negativo, sin uppercase*/
h1, h2, h3 {
    letter-spacing: -1px;
    text-transform: none;
}

/*Foco visible, como en el sitio del cliente*/
button.mdc-button:focus-visible,
a.mdc-button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 2px;
}

/*None shadow button on payment*/
ob-page-full-checkout ob-button.large.full-width.with-shadow {
    box-shadow: none !important;
}


/*********
1 - NAVBAR
*********/

/*Button shopping cart disabled*/
/* Gris sobre fondo blanco, no el gris claro de las navbars oscuras */
mat-toolbar.mat-toolbar button.mdc-button.mat-mdc-button.mat-mdc-button-disabled.mat-unthemed.mat-mdc-button-base {
    color: #11111161;
}

/*Hairline marron bajo la navbar, el mismo recurso que usa el header del cliente*/
mat-toolbar.mat-toolbar {
    border-bottom: 1px solid var(--paeria-hairline);
}


/*********
2 - BILLBOARD
*********/

/*Background cartelera*/
ob-page-events {
    background-color: #fff !important;
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Imprescindible: si no, el contenedor tapa el fondo */
ob-page-events section.main-container,
ob-page-events .main-container {
    background-color: transparent;
}

/*Buscador ADHOC*/
/* Barra clara sobre fondo blanco: se separa con el hairline, no con color */
ob-page-events .filter-container.ng-star-inserted {
    background-color: #fff;
    color: #111111 !important;
    border-bottom: 1px solid var(--paeria-hairline);
}

ob-page-events .filter-container button.mdc-button.mdc-button--outlined.mat-mdc-outlined-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted {
    color: #111111 !important;
    border-color: var(--paeria-hairline) !important;
    background-color: #fff !important;
}

/*Hover de los filtros: el marron de marca, como el menu del cliente*/
ob-page-events .filter-container button.mdc-button.mdc-button--outlined.mat-mdc-outlined-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted:hover {
    color: var(--paeria-accent) !important;
    border-color: var(--paeria-accent) !important;
    background-color: var(--paeria-hairline-soft) !important;
}


/*********
3 - CARDS
*********/

/* Tarjeta blanca con hairline marron y radio 12px, el patron del cliente */
a.ob-catalog-card.horizontal {
    background-color: #FFFFFF !important;
    padding: 16px;
    border: 1px solid var(--paeria-hairline-soft);
    border-radius: var(--paeria-radius);
}

a.ob-catalog-card.horizontal:hover {
    border-color: var(--paeria-hairline);
}

ob-page-events .ob-image-container {
    border-radius: var(--paeria-radius) !important;
    overflow: hidden;
}

.ob-catalog-card .content {
    color: #111111;
}

/*Fechas en el gris secundario del cliente*/
.ob-catalog-card .dates {
    color: #636363 !important;
}

/*Sin uppercase: el cliente no lo usa en titulares*/
.ob-catalog-card h3 {
    text-transform: none;
    letter-spacing: -0.5px;
    color: #111111 !important;
}


/*********
4 - CHECKOUT
*********/

/* Bordes inputs */
.payment-methods ob-payment-methods mat-radio-group mat-radio-button,
.delivery-methods ob-delivery-methods mat-radio-group mat-radio-button {
    border: 1px solid var(--paeria-hairline-soft) !important;
    border-radius: var(--paeria-radius) !important;
}

/* Borde del circulo cuando NO esta seleccionado */
.mdc-radio .mdc-radio__outer-circle {
    border: 1px solid #A4A4A4 !important;
}

/* Borde del circulo cuando SI esta seleccionado */
.mdc-radio .mdc-radio__native-control:checked~.mdc-radio__background .mdc-radio__outer-circle {
    border: 5px solid #111111 !important;
}

.mat-mdc-radio-button.mat-primary {
    --mdc-radio-selected-focus-icon-color: #FFFFFF;
    --mdc-radio-selected-hover-icon-color: #FFFFFF;
    --mdc-radio-selected-icon-color: #FFFFFF;
}


/*********
5 - FOOTER
*********/

/*Background subfooter*/
/* #111111 exacto: es el `contrast` con el que el cliente pinta su footer */
ob-footer.main-footer {
    background-color: #111111 !important;
}


img.footer {
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* En movil el subfooter va con `hidden tablet:block`, asi que la decoracion se
   oculta tambien para que no quede suelta. Mismo breakpoint que usa minecraft. */
@media only screen and (max-width: 40.063em) {
    .channel-footer {
        display: none;
    }
}

/* Sin skyline en la seleccion de asientos. */
body:has(ob-page-select-locations) .channel-footer {
    display: none !important;
}

/*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: #FFFFFF !important;
}

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

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

/*Text powered by*/
ob-footer.main-footer section.items-center {
    color: #FFFFFF;
}

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

.onebox-logo {
    display: none;
}