@font-face {
    font-family: "Primary";
    font-weight: 400;
    src: url("../fonts/New-Hero-Regular.woff2");
    ascent-override: 90%;
    descent-override: 10%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Primary";
    font-weight: 700;
    src: url("../fonts/New-Hero-Bold.woff2");
    ascent-override: 90%;
    descent-override: 10%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Secondary";
    font-weight: 400;
    src: url("../fonts/Verdana-Pro-Cond-Black.woff2");
}


/*VARS & CONFIGURATION*/
:where(:root, ::before, ::after) {
    --spacing-default: var(--unit-16);
    --color-red: #FF3A00;
    --color-red-dark: #B13238;
    --color-blue: #1f3b90;
    --color-blue-light: #00b6eb;
}

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

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

.color-blue {
    color: var(--color-blue);
}

img {
    pointer-events: none;
}

.main {
    position: relative;
    width: 100%;
}

.main__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.main__title,
.main__poti-castiga,
.main__fluor {
    color: var(--color-white);
    line-height: .95;
    text-align: center;
    text-shadow: 0 var(--unit-2) var(--unit-6) rgba(31, 59, 144, .35);
}

.main__title span {
    font-size: .54em;
}

.main__poti-castiga {
    line-height: 1.15;
}

.prizes {
    gap: calc(1.5 * var(--spacing-default));
    pointer-events: none;
}

.prizes__item {
    height: auto;
}

.cta {
    color: var(--color-white);
    background-color: var(--color-red);
    font-size: var(--font-22);
    letter-spacing: var(--unit-1);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    white-space: nowrap;
    padding: var(--spacing-default) calc(2 * var(--spacing-default));
    border: 0px;
    outline: 0;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
}

.cta--wider {
    padding: var(--spacing-default) calc(6 * var(--spacing-default));
}

.cta--black {
    background-color: var(--color-black);
}

.cta--modal {
    font-size: var(--font-18);
}

footer {
    color: var(--color-blue);
    background-color: #f7f7f7;
}

footer ul {
    list-style-type: none;
}

.footer__info {
    padding: var(--unit-24) 0;
}

.footer__poster {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes dog-hop {

    0%,
    76%,
    100% {
        transform: translateY(0) scale(1, 1);
    }

    80% {
        transform: translateY(1.5%) scale(1.05, 0.93);
    }

    86% {
        transform: translateY(-7%) scale(0.97, 1.05);
    }

    91% {
        transform: translateY(0.5%) scale(1.03, 0.95);
    }

    95% {
        transform: translateY(0) scale(1, 1);
    }
}

.main__dog img,
.pastes__dog {
    animation: dog-hop 5s ease-in-out infinite;
    transform-origin: bottom center;
}

@media (prefers-reduced-motion: reduce) {

    .main__dog img,
    .pastes__dog {
        animation: none;
    }
}

.form--1 input,
.form--1 select,
.form--1 .label-file__button {
    border: var(--unit-1) var(--color-black) solid;
    border-radius: var(--border-radius-large);
    padding: var(--spacing-default) calc(2 * var(--spacing-default));
    width: 100%;
    outline: 0;
    background-color: transparent;
}

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

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

.form--1 .label-virtual-cnt:has(.datepicker.active) {
    position: relative;
}

.form--1 .label-file__button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
}

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

.form--1 .label-virtual-cnt:has(input[name="receipt_date"]) input {
    cursor: pointer;
}

.modal__custom .modal__wrapper {
    border-radius: var(--border-radius-large);
}

.modal__custom .modal__btn-close svg {
    padding: .4rem;
}

.modal--response .modal__wrapper {
    font-weight: var(--font-bold);
    text-align: center;
}

/*SMALL ONLY*/
@media (max-width: 63.9375rem) {
    .main {
        height: auto;
        padding-top: calc(1.5 * var(--spacing-default));
        padding-bottom: calc(2 * var(--spacing-default));
    }

    .main .grid-y {
        gap: calc(1.25 * var(--spacing-default));
    }

    .main__mechanic {
        margin-top: calc(1.25 * var(--spacing-default));
    }

    .logo--sensodyne {
        width: clamp(8rem, 34vw, 13rem);
    }

    .logo--aquafresh {
        width: clamp(7.5rem, 32vw, 12rem);
    }

    .main__title {
        font-size: clamp(2rem, 10.5vw, 3.4rem);
    }

    .main__poti-castiga {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .pastes {
        gap: calc(var(--spacing-default) / 2);
        align-items: flex-end;
    }

    .main__fluor {
        margin-top: calc(var(--spacing-default) / 2);
        font-size: clamp(.95rem, 4.4vw, 1.2rem);
    }

    .footer__card {
        background: linear-gradient(180deg, #84cbd7, #38b5e2);
        border-radius: var(--border-radius-large);
        padding: calc(1.5 * var(--spacing-default)) var(--spacing-default);
        color: var(--color-white);
        text-align: center;
    }

    .footer__card-logo {
        width: 7.5rem;
        margin: 0 auto var(--spacing-default);
    }

    .footer__card-heading {
        color: #273b97;
        font-size: var(--font-24);
        margin-bottom: var(--spacing-default);
    }

    .footer__card-list {
        list-style: none;
        text-transform: uppercase;
        text-align: left;
        font-size: var(--font-14);
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing-default) / 2);
        margin-bottom: var(--spacing-default);
    }

    .footer__card-list li {
        position: relative;
        padding-left: var(--spacing-default);
    }

    .footer__card-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: .4em;
        width: var(--unit-6);
        height: var(--unit-6);
        background-color: var(--color-white);
    }

    .footer__card-fine {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing-default) / 4);
        margin-bottom: var(--spacing-default);
    }

    .footer__card-copy {
        opacity: .9;
    }

    .pastes__sensodyne,
    .pastes__aquafresh {
        height: clamp(9.5rem, 34vw, 17rem);
        width: auto;
    }

    .pastes__dog {
        height: clamp(8.5rem, 30vw, 15rem);
        width: auto;
    }

    .prizes {
        gap: var(--spacing-default);
    }

    .prizes__item {
        width: min(clamp(11rem, 24vw, 15rem), calc(50% - var(--spacing-default) / 2));
    }

    .cta--wider {
        padding: var(--spacing-default) calc(3 * var(--spacing-default));
    }

    .modal--response .modal__wrapper,
    .modal--campaign-inactive .modal__wrapper {
        padding: var(--spacing-default);
    }

    .modal--response .modal__wrapper {
        font-size: var(--font-20);
    }

    .footer__info img {
        max-width: min(50vw, 12rem);
        margin-inline: auto;
    }

    .modal__custom.modal__info .modal__content {
        padding: var(--spacing-default);
    }

    .modal__custom .modal__content {
        padding: calc(1.5 * var(--spacing-default)) 0;
    }
}

/*LARGE ONLY*/
@media (min-width: 64rem) {
    .main {
        min-height: var(--screen-height, 100vh);
    }

    .main__content {
        height: var(--screen-height, 100vh);
        padding-top: calc(1.5 * var(--spacing-default));
        padding-bottom: calc(1.5 * var(--spacing-default));
        z-index: 2;
    }

    .main__content .grid-container {
        position: relative;
        z-index: 2;
    }

    .main__mechanic {
        padding-bottom: calc(1.5 * var(--spacing-default));
    }

    .footer__bar-fine {
        position: absolute;
        left: 23.3%;
        top: 66.5%;
        display: flex;
        flex-direction: column;
        gap: .4em;
        color: var(--color-white);
        font-size: clamp(0.65rem, 1vw, 0.875rem);
    }

    .footer__bar-copy {
        position: absolute;
        left: 14.9%;
        top: 77.5%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--color-white);
        font-size: clamp(0.55rem, 0.8vw, 0.72rem);
    }

    .haleon {
        z-index: 1;
    }

    .logo--sensodyne {
        width: clamp(10rem, 14vw, 13rem);
    }

    .logo--aquafresh {
        width: clamp(9rem, 13vw, 12rem);
        margin-right: calc(4 * var(--spacing-default));
    }

    .haleon {
        max-width: var(--unit-100);
        top: var(--spacing-default);
        right: var(--spacing-default);
    }

    .main__title {
        font-size: clamp(3.5rem, 6vw, 5.5rem);
    }

    .main__poti-castiga {
        font-size: clamp(2.3rem, 3.6vw, 3.2rem);
    }

    .prizes__item {
        width: clamp(14rem, 19vw, 18rem);
    }

    .main__paste {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 62vh;
        z-index: 1;
    }

    .main__paste img {
        height: 100%;
        width: auto;
    }

    .main__paste--left {
        left: 3vw;
    }

    .main__paste--right {
        right: 4vw;
        top: 44%;
    }

    .main__dog {
        position: absolute;
        bottom: 0;
        right: 1vw;
        height: 44vh;
        z-index: 1;
    }

    .main__fluor {
        position: absolute;
        right: 20vw;
        bottom: 10vh;
        z-index: 1;
        font-size: clamp(1rem, 1.5vw, 1.375rem);
        white-space: nowrap;
    }

    .main__dog img {
        height: 100%;
        width: auto;
    }

    .modal--response .modal__wrapper,
    .modal--campaign-inactive .modal__wrapper {
        padding: var(--unit-32);
    }

    .modal--response .modal__wrapper {
        font-size: var(--font-24);
    }

    .cta,
    a::after,
    .form--1 .label-file__button {
        transition: var(--transition);
    }

    .cta:hover,
    .form--1 .label-file__button:hover {
        background-color: var(--color-red-dark);
    }

    .form--1 .label-file__button:hover {
        border-color: var(--color-red-dark);
    }

    .main__content .cta:hover {
        transform: scale(1.1);
    }

    footer a,
    #modal a {
        position: relative;
    }

    footer a::after,
    #modal a:not(.cta)::after {
        content: '';
        height: var(--unit-1);
        width: 100%;
        position: absolute;
        bottom: calc(-1 * var(--unit-1));
        left: 0;
        background-color: var(--color-blue);
        opacity: 0;
    }

    footer a:hover::after,
    #modal a:hover::after {
        opacity: 1;
    }

    .modal__custom .modal__content {
        padding: calc(1.5 * var(--spacing-default));
    }
}