/*VARS & CONFIGURATION*/
:where(:root, ::before, ::after) {
    --color-green-rgb: 15, 63, 32;
    --color-green: rgb(var(--color-green-rgb));
    --color-amber-rgb: 228, 125, 52;
    --color-amber: rgb(var(--color-amber-rgb));
    --color-red-rgb: 223, 31, 38;
    --color-red: rgb(var(--color-red-rgb));
    --background-gradient: linear-gradient(90deg, rgba(13, 64, 33, 1) 0%, rgba(26, 93, 57, 1) 50%);
    /* --color-red: #D23030;
    --color-red-dark: #972329;
    --color-cream: #F8B075;
    --color-cream-dark: #D0914E; */
}

::selection {
    background: var(--color-green);
    color: var(--color-white);
}

@font-face {
    font-family: "Primary";
    font-weight: 400;
    src: url("../fonts/MyriadPro-Regular.woff2");
}

@font-face {
    font-family: "Primary";
    font-weight: 700;
    src: url("../fonts/MyriadPro-Bold.woff2");
}

@font-face {
    font-family: "Secondary";
    font-weight: 400;
    src: url("../fonts/Monea-Alegante.woff2");
}

html [data-network] {
    display: none !important;
}

html[data-network="kaufland"] [data-network~="kaufland"],
html[data-network="mega-image"] [data-network~="mega-image"],
html[data-network="penny"] [data-network~="penny"],
html[data-network="carrefour"] [data-network~="carrefour"] {
    display: block !important;
}

html[data-network="kaufland"] .cta[data-network~="kaufland"],
html[data-network="mega-image"] .cta[data-network~="mega-image"],
html[data-network="penny"] .cta[data-network~="penny"],
html[data-network="carrefour"] .cta[data-network~="carrefour"] {
    display: flex !important;
}

/* GENERAL */
body {
    background: var(--background-gradient);
    color: var(--color-white);
}

.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--font-24);
    text-transform: uppercase;
    border-radius: var(--border-radius-medium);
    outline: 0;
    border: 0;
    cursor: pointer;
}

.cta--primary {
    background-color: var(--color-red);
    color: var(--color-white);
    padding: calc(.75 * var(--spacing-default)) calc(4 * var(--spacing-default));
}

.cta--text-transform-initial {
    text-transform: initial;
}

.cta--secondary {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-red);
    padding: calc(.5 * var(--spacing-default)) calc(1.5 * var(--spacing-default));
}

.modal__wrapper {
    background: var(--background-gradient);
    padding: var(--spacing-default);
}

.datepicker {
    color: var(--color-black);
}

.api-response-message {
    font-size: var(--font-24);
    text-align: center;
}

.api-response-message .cta {
    padding: calc(.75 * var(--spacing-default)) calc(2 * var(--spacing-default));
}

/* END GENERAL */

/* UTILITIES */
.color-amber {
    color: var(--color-amber);
}

/* END UTILITIES */

/* MASK */
.mask-container,
.mask {
    position: relative;
}

.mask__logo {
    position: absolute;
    z-index: 9;
    pointer-events: none;
}

.mask__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: none;
}

.mask__beer {
    position: absolute;
    pointer-events: none;
}

/* END MASK */


/* CONTENT */
.network {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    aspect-ratio: 1;
    flex: 1;
}

.network img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* END CONTENT*/


/* FORMS */
.form--1 input,
.form--1 select,
.form--1 .label-file__button {
    border: 1px solid var(--color-primary);
    padding: calc(.75 * var(--spacing-default));
    border-radius: var(--border-radius-small);
    background-color: var(--color-white);
    outline: 0;
    margin: 0;
    color: var(--color-black);
}

.form--1 select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.form--1 input[type="number"] {
    -moz-appearance: textfield;
}

.form--1 input[type="number"]::-webkit-outer-spin-button,
.form--1 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form--1 .label-file svg {
    color: var(--color-primary);
    height: var(--unit-20);
    width: auto;
}

.form--1 .label-virtual-cnt .datepicker.datepicker-dropdown.active {
    top: initial !important;
    left: initial !important;
}

.form--1 .label-file:has([data-field-invalid]) .label-file__button {
    border-color: var(--color-error) !important;
    animation: shake 500ms linear;
}

.form--1 .label-file .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* END FORMS */


/* AGE GATE */
.age-gate {
    color: var(--color-black);
    position: fixed;
    left: 0;
    top: 0;
    width: 100lvw;
    height: 100lvh;
    overflow: hidden;
    z-index: 99999;
    backdrop-filter: blur(5px);

    pointer-events: none;
    opacity: 0;
    transition: var(--transition);
}

.age-gate[data-active] {
    opacity: 1;
    pointer-events: all;
}

.age-gate:not([data-active]) {
    opacity: 0;
    pointer-events: none;
}

.age-gate__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* .age-gate__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    z-index: -1;
} */

.age-gate__content {
    background: var(--background-gradient);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-default);
    padding: calc(3 * var(--spacing-default));
}

.age-gate__input {
    /* font-family: 'Secondary'; */
    color: var(--color-green);
    width: calc(2 * var(--unit-100));
    border-radius: var(--border-radius-medium);
    text-align: center;
    line-height: 1;
    background-color: var(--color-white);
    overflow: hidden;
    padding: calc(.5 * var(--spacing-default));
    outline: 0;
    border: 0;
    margin: 0;
}

.age-gate__input::-webkit-outer-spin-button,
.age-gate__input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.age-gate__input[type=number] {
    -moz-appearance: textfield;
}

.age-gate__shadow {
    position: relative;
}

.age-gate__shadow::before {
    background: rgba(32, 64, 45, .561);
    bottom: -5px;
    content: "";
    filter: blur(10px);
    height: 100%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: -1;
}

/* END AGE GATE */

/* SMALL ONLY */
@media (max-width: 63.9375rem) {
    .container {
        overflow-x: hidden;

    }

    .container,
    .container>*,
    .mask-container,
    .mask,
    .content,
    .content__top,
    .content__bottom
    {
        max-width: 100%;
    }

    /* UTILITIES */
    .small-min-100vh {
        min-height: 100vh;
    }

    /* END UTILITIES */

    /* MASK */
    .mask-container {
        margin-bottom: calc(4 * var(--spacing-default));
    }

    .mask {
        width: 100%;
        height: 40vh;
        transform: rotate(180deg);
        clip-path: ellipse(120% 100% at 50% 100%);
    }

    .mask__background,
    .mask__logo {
        transform: rotate(-180deg);
    }

    .mask__logo {
        position: absolute;
        left: 5%;
        bottom: 0;
        width: 45%;
        z-index: 9;
        pointer-events: none;
    }

    .mask__beer {
        bottom: 0;
        right: 0;
        transform: translateY(25%);
        width: 30%;
    }

    /* END MASK */

    /* CONTENT */
    .content__bottom {
        margin-top: auto;
        padding-bottom: calc(1.5 * var(--spacing-default));
    }

    .responsible {
        max-width: var(--unit-50);
    }

    .network {
        padding: calc(var(--spacing-default) * .5);
    }

    /* END CONTENT */

    /* AGE GATE */
    .age-gate__wrapper {
        width: 90%;
        margin: auto;
    }

    /* END AGE GATE */
}

/* END SMALL ONLY */

/* LARGE ONLY */
@media (min-width: 64rem) {

    /* GENERAL */
    .network,
    .cta {
        transition: var(--transition);
    }

    .network:hover,
    .cta:not(.no-hover):hover {
        transform: scale(1.05);
    }

    .cta {
        width: fit-content;
    }

    .container {
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    /* END GENERAL */

    /* MASK */
    .mask-container {
        width: 50%;
        height: 100%;
    }

    .mask {
        width: 100%;
        height: 100%;
        clip-path: ellipse(100% 150% at 0% 50%);
    }

    .mask__logo {
        position: absolute;
        right: 10%;
        z-index: 9;
        pointer-events: none;
    }

    .mask__beer {
        bottom: var(--spacing-default);
        height: 45%;
        right: 0;
        transform: translateX(50%);
    }

    /* END MASK */

    /* CONTENT */
    .content {
        position: relative;
        width: 50%;
        height: 100%;
        padding-left: calc(5 * var(--spacing-default));
        padding-right: calc(5 * var(--spacing-default));
    }

    .content__top {
        height: 90%;
    }

    .content__bottom {
        height: 10%;
    }

    .network {
        padding: var(--spacing-default);
    }

    .network--footer {
        height: var(--unit-100);
        flex-grow: 0;
    }

    .responsible {
        max-width: var(--unit-70);
    }

    /* END CONTENT */

    /* AGE GATE */
    .age-gate__content {
        max-width: 50%;
    }

    /* END AGE GATE*/
}

/* END LARGE ONLY */