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

:root {
    /*Font family*/
    --theme-font-family: "Poppins", sans-serif;
    /*Primary colors*/
    --theme-primary-50: #fff;
    --theme-primary-100: #ffe0cf;
    --theme-primary-200: #ffc0a1;
    --theme-primary-300: #ffa073;
    --theme-primary-400: #ff7e46;
    --theme-primary-500: #eb541e;
    --theme-primary-600: #c74814;
    --theme-primary-700: #933813;
    --theme-primary-800: #612811;
    --theme-primary-900: #1f2232;
    --theme-primary-A100: #000000;
    --theme-primary-A200: #a65959;
    --theme-primary-A400: #ff7e46;
    --theme-primary-A700: #933813;
    --theme-primary-contrast-50: #333;
    --theme-primary-contrast-100: #333;
    --theme-primary-contrast-200: #333;
    --theme-primary-contrast-300: #333;
    --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: #fff;
    --theme-primary-contrast-A200: #FFFFFF;
    --theme-primary-contrast-A400: #FFFFFF;
    --theme-primary-contrast-A700: #FFFFFF;
    /*Force font weight*/
    --theme-headline-5-font-weight: 300;
    --theme-headline-6-font-weight: 300;
    --theme-subtitle-1-font-weight: 300;
    --theme-body-1-font-weight: 300;
    --theme-body-2-font-weight: 300;
    --theme-caption-font-weight: 300;
    --theme-headline-1-font-weight: 600;
    --theme-headline-2-font-weight: 600;
    --theme-headline-3-font-weight: 600;
    --theme-headline-4-font-weight: 600;
    --theme-button-font-weight: 600;
    /*Obfooter: logo filter*/
    --ob-custom-logo-filter: brightness(20);
}


/*=================================================================================================
    INDEX
    1) Appends an Apple Pay & Google Pay logo badge after the payment method label
    2) Top bar
    3) Buttons
    4) Billboard
    5) OB Footer
    6) Remplaza icono/imagen por otra
    7) TYP
==================================================================================================*/

/*------------------------------------------------------------------------------------------------
    1) Appends an Apple Pay & Google Pay logo badge after only the payment method redsys label
-------------------------------------------------------------------------------------------------*/

.checkout ob-payment-methods mat-radio-button[id^="payment-method-redsys-"] .label-container>div::after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 24px;
    background-image: url('https://client-dists-resources.s3.eu-west-1.amazonaws.com/channels-client/tarracoarena/assets/icons/appelpay_googlepay.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
}

/*------------------------------------------------------------------------------------------------
    2) Top bar
-------------------------------------------------------------------------------------------------*/

/*cart with dark color*/
mat-toolbar .mat-mdc-unelevated-button:disabled {
    color: #FFFFFF61;
    background: #FFFFFF1F;
}

/*Navbar*/
mat-toolbar.mat-toolbar.ob-top-bar.mat-toolbar-single-row {
    background-color: #eb541e;
}

.mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
    color: #fff;
}

/*Logo adaptado*/
img.logo {
    height: 3.5rem;
}

/*------------------------------------------------------------------------------------------------
    3) Buttons
-------------------------------------------------------------------------------------------------*/

/*General button*/
button.mdc-button {
    border-radius: 50px !important;
}

button.mdc-button:hover {
    background-color: #dbd9d9;
}

/*------------------------------------------------------------------------------------------------
    4) Billboard
-------------------------------------------------------------------------------------------------*/

/*Background only in initial billboard*/
body ob-page-events {
    background: url("https://client-dists-resources.s3.amazonaws.com/channels-client/tarracoarena/assets/bg.png") center/cover no-repeat;
    /*background-attachment: fixed;*/
}

ob-page-events .main-container {
    margin: 2rem 0 !important;
    background-color: rgb(13 11 11 / 50%);
    border-radius: 5px;
}

ob-catalog-card .flex.items-start.flex-col.content-container span.title,
ob-catalog-card .flex.items-start.flex-col.content-container .min-price-label,
ob-catalog-card .flex.items-start.flex-col.content-container span.subtitle.vertical-subtitle {
    color: #fff;
}

/*Text only only in initial billboard*/
body ob-page-events .ob-catalog-card {
    color: #FFFFFF !important;
}

body ob-page-events .ob-catalog-card .dates,
body ob-page-events .ob-catalog-card ob-event-location-venue {
    color: #FFFFFF !important;
}

/*------------------------------------------------------------------------------------------------
    5) OB Footer
-------------------------------------------------------------------------------------------------*/

/*Dark version subfooter*/
ob-footer.main-footer {
    background-color: #211d2e !important;
}

ob-footer.main-footer span.mdc-button__label {
    color: #fff !important;
}

ob-footer.main-footer .mat-mdc-outlined-button:not(:disabled) {
    color: #fff !important;
}

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

span.flex.items-center.gap-1 {
    color: #fff !important;
}

ob-footer#desktop-footer span.footer-copyright {
    color: #fff;
}

/*CAMBIO DE COLOR ETIQUETA LEER MÁS*/
.flex.view-more-info.ob-link {
    color: #ffffff;
}

/*COLOR ETIQUETAS FOOTER*/
.footer-links,
.ob-footer.main-footer span.footer-copyright {
    color: #ffffff;
}

/*------------------------------------------------------------------------------------------------
    6) Remplaza icono/imagen por otra
-------------------------------------------------------------------------------------------------*/

/*remplaza icono/imagen por otra*/
img.donations-icon {
    box-sizing: border-box;
    display: block;
    width: 115px;
    /*Ancho de la imagen nueva, aunque en este caso son iguales.*/
    height: 115px;
    /*Alto de la imagen nueva, aunque en este caso son iguales.*/
    padding-left: 115px;
    /*Padding igual al ancho de la imagen nueva*/
    background-image: url('https://client-dists-resources.s3.amazonaws.com/channels-client/tarracoarena/assets/donacion.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*ajusta margen superior de la seccion donaciones para ajustar nueva imagen*/
.donations-container .donations-icon {
    height: 4rem;
}

/*------------------------------------------------------------------------------------------------
    7) TYP
-------------------------------------------------------------------------------------------------*/

/* TYP */
.typ-banner {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 1.5rem;
}

.link a {
    background-color: #eb541e !important;
    padding: 14px 16px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;

}

.link a:hover {
    background-color: #c74814 !important;
    padding: 14px 16px;
    border-radius: 4px;
    color: #fff;

}

p .link {
    padding: 16px 0px !important;
}

.typ {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.typ p {
    margin: 0px !important;
    font-size: 18px !important;
    line-height: 26px !important;
}

p.text-italic {
    font-style: italic;
    font-size: 16px !important;
}

.link {
    padding: 10px 0px !important;
}

/* TYP */