@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/Steelfish Rg.otf') format('opentype'),
        url('/assets/fonts/steelfish rg_0.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/Steelfish RgIt.otf') format('opentype'),
        url('/assets/fonts/steelfish rg it_0.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/Steelfish-Bold.ttf') format('truetype'),
        url('/assets/fonts/steelfish bd_0.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/steelfish bd it_0.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Eb OTF sources (normal) */
@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/Steelfish Eb.otf') format('opentype'),
        url('/assets/fonts/steelfish eb_0.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Eb italic OTF */
@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/steelfish eb it_0.otf') format('opentype'),
        url('/assets/fonts/Steelfish Eb It.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Separate TTF for Eb Regular 800 */
@font-face {
    font-family: 'Steelish';
    src: url('/assets/fonts/SteelfishEb-Regular 800.ttf') format('truetype');
    font-weight: 800;
    font-style: bold;
    font-display: swap;
}

body {
    background-image: url('/assets/img/madri_pattern_bg.png');
    background-repeat: repeat;
    font-family: 'Steelish', sans-serif;
    color: white;
    font-style: normal;
    font-weight: 400;
}

h1 {
    font-weight: 800;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

.age-check-container {
    margin-top: 50px;
}

/* Date inputs row */
.date-row {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.date-input {
    background: #fff;
    border: none;
    padding: 0.55rem 0.6rem;
    width: 115px;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 2px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28) inset;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28) inset;
    -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28) inset;
}

.year-input {
    width: 140px;
}

/* Remember line */
.remember-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: 700;
    margin: 0.5rem 0 1.2rem 0;
}

.remember-checkbox {
    width: 50px;
    height: 50px;
    accent-color: #222;
}

/* Enter button */
.enter-btn {
    display: inline-block;
    background: #fff;
    color: #c61b1f;
    font-weight: 800;
    border: none;
    padding: 0.6rem 2.2rem;
    font-size: 2rem;
    letter-spacing: 2px;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

.madri-label {
    font-size: xx-large;
    font-weight: 800;
    font-style: bold;
}

.age-form .date-input:focus,
.age-form .date-input:focus-visible {
    outline: none !important;
    box-shadow:
        inset 0 -3px 0 rgba(0, 0, 0, 0.06) !important,
        0 6px 0 rgba(0, 0, 0, 0.18) !important;
}

.madri-text {
    display: inline;
    background-color: #EB2E33;
    box-shadow: 10px 0 0 #EB2E33, -10px 0 0 #EB2E33;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.1;
    font-weight: 800;
    font-style: bold;
    font-size: 8rem;
}

.madri-text img {
    display: block;
    margin-top: 0;
    width: 100%;
    height: auto;
    margin-left: -10px;
    width: 30%;
}

.madri-promo-container {
    text-align: right
}

.madri-promo-container2 {
    text-align: left
}


/* small screens: stack vertically */
@media (max-width: 767px) {
    .date-row {
        display: flex;
        gap: 0.8rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        max-width: 100%;
        box-sizing: border-box;
    }

    .date-input {
        background: #fff;
        border: none;
        padding: 0.3rem 0.3rem;
        width: 60px;
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        border-radius: 2px;
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28) inset;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28) inset;
        -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.28) inset;
    }

    .enter-btn {
        width: 100% !important;
    }

    .age-check-container {
        margin-top: 10px;
    }

    .madri-text {
        font-size: 6rem;
    }

    .madri-promo-container {
        text-align: center
    }

    .madri-promo-container2 {
        text-align: center
    }
}