@font-face {
    font-family: "Primary";
    src: url("../fonts/Gotham-Black.woff2");
    font-weight: 800;
    font-display: swap;
}

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

@font-face {
    font-family: "Primary";
    src: url("../fonts/Gotham-Medium.woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Primary";
    src: url("../fonts/Gotham-Book.woff2");
    font-weight: 400;
    font-display: swap;
}

/* VARS & CONFIGURATION */
:where(:root, ::before, ::after) {
    --color-primary-rgb: 0, 107, 164;
    --color-primary: rgb(var(--color-primary-rgb));
    --color-secondary-rgb: 245, 207, 16;
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-red-rgb: 223, 31, 38;
    --color-red: rgb(var(--color-red-rgb));
}

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

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

/* END VARS & CONFIGURATION */



/* GENERAL */
body {
    font-size: clamp(14px, calc(10px + 0.3125vw), 18px);
    font-family: 'Primary';
}

.main__container {
    min-height: 100vh;
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    background-color: var(--color-secondary);
}

.api-response-message {
    font-size: var(--font-18);
    font-weight: var(--font-bold);
    padding: calc(1.5 * var(--spacing-default));
    text-align: center;
}
/* END GENERAL */



/* UTILITIES */
.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;
    padding: calc(.75 * var(--spacing-default)) calc(2 * var(--spacing-default));
}

.cta--primary {
    background-color: var(--color-red);
    color: var(--color-white);
}

.cta--secondary {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-secondary);
}

.width-90 {
    width: 90%;
}

/* END UTILITIES */



/* DECORATION */
.decoration__background path {
    fill: var(--color-primary);
}

.decoration__text {
    transform: translateY(-12.5%);
}

/* END DECORATION */



/* MAIN */
.main {
    flex: 1 1 auto;
}

/* END MAIN */



/* NETWORK */
.network {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

/* .network img {
    width: 100%;
    height: 100%;
} */

.network--penny {
    background-color: #D2232A;
}

/* END NETWORK */


/* FOOTER */
.footer__content {
    background-color: var(--color-white);
    flex: 0 0 auto;
}

.footer__disclaimer-logo img {
    width: 100%;
}

/* END FOOTER */


/* 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 */

#modal[data-active] {
    display: initial;
}

/* SMALL ONLY */
@media (max-width: 63.9375rem) {

    /* DECORATION */
    .decoration__background {
        transform: translateX(-1%);
    }

    .decoration__text {
        padding-right: var(--grid-container-padding-x, .9375rem);
        padding-left: var(--grid-container-padding-x, .9375rem);
    }

    /* END DECORATION */

    /* MAIN */
    .main__content {
        width: 60%;
    }

    .main__bottle {
        width: 35%;
    }

    /* END MAIN */



    /* END RESPONSIBLE */
    .footer__responsible svg {
        max-width: calc(.75 * var(--unit-100));
    }

    /* END RESPONSIBLE */

    .footer__bergenbier {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    .footer__bergenbier img {
        width: 100%;
    }
}

/* END SMALL ONLY */

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

    /* GENERAL */
    html {
        scrollbar-gutter: auto;
    }

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

    /* .container {
        height: 100vh;
        padding: var(--spacing-default);
    } */

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

    /* END GENERAL */


    /* UTILITIES */
    .cta--primary:hover,
    .cta--primary:focus {
        color: var(--color-white);
    }

    .large-width-90 {
        width: 90%;
    }

    /* END UTILITIES */



    /* DECORATION */
    .decoration {
        width: 100%;
        height: 40vh;
        flex: 0 0 40vh;
    }

    /* END DECORATION */



    /* MAIN */
    .main {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .main--homepage {
        width: 60%;
    }

    .main__prizes {
        margin-left: auto;
        margin-right: auto;
    }

    /* END MAIN */



    /* NETWORK */
    .network {
        width: 50%;
    }

    /* END NETWORK */


    /* FORMS */
    .form--1 .form__actions>* {
        width: auto;
    }

    .form--1 .form__actions button[type="submit"] {
        min-width: calc(3 * var(--unit-100));
    }

    /* END FORMS */

    /* RESPONSIBLE */
    .responsible {
        bottom: 10%;
        right: var(--grid-container-padding-x);
        writing-mode: vertical-rl;
    }

    .responsible__text {
        transform: rotate(180deg);
    }

    .responsible svg {
        width: var(--unit-20);
        fill: var(--color-primary);
    }

    /* END RESPONSIBLE */



    /* BOTTLE */
    .bottle {
        right: calc(5 * var(--grid-container-padding-x));
        bottom: 10%;
    }

    .bottle__bottle {
        max-height: 35vh;
    }

    /* END BOTTLE */
}

/* END LARGE ONLY */

/* SPECIFICS */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    .decoration__text {
        transform: translateY(-22.5%);
    }
}

/* END SPECIFICS */