@font-face {
    font-family: 'blacker-pro-display';
    src: url('../media/fonts/zetafonts_-_blacker_pro_display_extrabold-webfont.woff2') format('woff2'), url('../media/fonts/zetafonts_-_blacker_pro_display_extrabold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    font-feature-settings: "dlig" 1;
    font-variant-ligatures: discretionary-ligatures;
}

.holiday-popup {
    background-color: #00aeef;
    width: 65vw;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 7em 3em;
    border-radius: 2.5em;
    color: #fff;
    display: flex;
    justify-content: center;
    box-shadow: 4px 10px 20px rgba(0, 0, 0, 0.2),  /* Shadow on bottom-right */
                -4px 10px 20px rgba(0, 0, 0, 0.7); /* Shadow on bottom-left */
    transition: all .25s;
}

.holiday-popup.hide {
    opacity: 0;
    transform: translate(-50%, -25%);
    pointer-events: none;
}

.holiday-popup .text {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.holiday-popup .text h1 {
    font-family: 'blacker-pro-display';
    font-size: clamp(3em, 5vw, 5em);
    margin: 0;
    text-align: center;
}

.holiday-popup .text p {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1.5em, 3vw, 2em);
    text-align: center;
}

.holiday-popup-image-desktop {
    display: none;
}

.holiday-popup-image-mobile {
    display: block;
    position: absolute;
    transform: translateX(-50%);
    width: calc(100% + 4px);
    height: 10em;
    object-fit: cover;
    bottom: -2.5em;
    left: 50%;
}

.holiday-popup button {
    all: unset; /* Removes all default styles (including padding, border, etc.) */
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    font: inherit; /* Inherit font styles from parent */
    cursor: pointer; /* Set cursor to pointer for clickable behavior */
}

.holiday-popup .close {
    position: absolute;
    top: 2em;
    right: 2em;
    width: 2em;
    height: auto;
}

.holiday-popup .close svg {
    display: block;
    width: 100%;
    height: auto;
}

.holiday-popup .close svg path {
    fill: #fff;
}

/* Tablet and larger styles */
@media (min-width: 768px) {
    .holiday-popup {
        padding-bottom:7em;
    }

    .holiday-popup-image-desktop {
        display: block;
        position: absolute;
        top: 50%;
        left: -10%;
        transform: translateY(-50%);
        width: 30%;
        height: calc(100% + 4px);
        object-fit: cover;
        aspect-ratio: 15/27;
    }

    .holiday-popup-image-mobile {
        display: none;
    }

    .holiday-popup .text {
        width: 60%;
    }

    .holiday-popup .text p {
        text-align: left;
    }
}