.s9-coupon {
    position: fixed;
    inset: 0 0 42px;
    width: min(717px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 74px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 32px;
    color: #181f35;
    background: #c6e1ff;
    overflow: visible;
    font-family: "League Spartan", Arial, sans-serif;
}

.s9-coupon::backdrop {
    background: rgb(3 29 61 / 48%);
}

/* The pricing popup blurs white page sections. Keep the sitewide popup's backdrop independent of page colors. */
html:has([data-coupon-dialog="pricing"][open]) body {
    background-color: #fff;
}

/* Blur the page sections directly so the fixed header keeps its viewport position. */
html:has([data-coupon-dialog="pricing"][open]) #page-root > :is(.s9p-page, header, footer, .s9-promo-banner) {
    filter: blur(12px);
}

@media (prefers-reduced-motion: no-preference) {
    .s9-coupon[open] {
        animation: s9-coupon-enter 240ms cubic-bezier(.2, .7, .3, 1);
    }

    .s9-coupon[open]::backdrop {
        animation: s9-coupon-backdrop-enter 200ms ease-out;
    }

    html:has([data-coupon-dialog="pricing"][open]) #page-root > :is(.s9p-page, header, footer, .s9-promo-banner) {
        animation: s9-coupon-page-blur 200ms ease-out;
    }
}

@keyframes s9-coupon-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes s9-coupon-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes s9-coupon-page-blur {
    from { filter: blur(0); }
    to { filter: blur(12px); }
}

html:has(.s9-coupon[open]) { overflow: hidden; }

.s9-coupon__panel {
    position: relative;
    max-height: inherit;
    overflow: auto;
    border-radius: inherit;
}

.s9-coupon [hidden] { display: none; }

.s9-coupon__close,
.s9-coupon__send {
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.s9-coupon__close {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 21px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
}

.s9-coupon button:focus-visible {
    outline: 2px solid #031d3d;
    outline-offset: 1px;
}

.s9-coupon__title[tabindex="-1"]:focus {
    outline: none;
}

.s9-coupon [data-coupon-offer] {
    padding: 68px 29px 17px;
}

.s9-coupon__title {
    margin: 0;
    color: inherit;
    font: 700 32px/1.18 "League Spartan", Arial, sans-serif;
    text-align: center;
}

.s9-coupon__form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 66px;
    margin: 16px 2px 24px;
    padding: 9px 12px 9px 23px;
    border-radius: 50px;
    background: #077dfd;
    color: #fff;
}

.s9-coupon__form label {
    flex: none;
    margin: 0;
    color: inherit;
    font: 600 22px/1.6 "League Spartan", Arial, sans-serif;
}

.s9-coupon__field {
    display: flex;
    align-items: center;
    gap: 5px;
    width: min(100%, 352px);
    min-height: 44px;
    padding: 0 6px 0 14px;
    border-radius: 45px;
    background: white;
}

.s9-coupon__field input {
    flex: 1;
    width: 0;
    min-height: 36px;
    margin: 0;
    border: 0;
    border-radius: 24px;
    padding: 0 3px;
    color: #181f35;
    background: transparent;
    font: 400 19.375px/1.6 "League Spartan", Arial, sans-serif;
}

.s9-coupon__field input:focus {
    outline: none;
    box-shadow: none;
}

.s9-coupon__field:has(input:focus) {
    box-shadow: inset 0 0 0 2px #175da9, 0 0 0 3px #c6e1ff;
}

.s9-coupon__field:has(input[aria-invalid="true"]) {
    box-shadow: inset 0 0 0 2px #a43236;
}

.s9-coupon__field:has(input[aria-invalid="true"]:focus) {
    box-shadow: inset 0 0 0 2px #a43236, 0 0 0 3px #fbe3e3;
}

@media (forced-colors: active) {
    .s9-coupon__field:has(input:focus) { outline: 2px solid Highlight; }
}

.s9-coupon__send {
    flex: none;
    width: 36px;
    height: 36px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #077dfd;
}

.s9-coupon__send:disabled { cursor: wait; opacity: .6; }

.s9-coupon__error {
    margin: -12px 2px 12px;
    color: #832725;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.s9-coupon__video {
    display: block;
    width: 100%;
    aspect-ratio: 658 / 386;
    border-radius: 25px;
    background: #fff;
    object-fit: cover;
}

.s9-coupon:has(.s9-coupon__success:not([hidden])) { bottom: 82px; }

.s9-coupon__success {
    padding: 54px 24px 0;
    text-align: center;
}

.s9-coupon__success .s9-coupon__title {
    position: relative;
    z-index: 1;
    max-width: 617px;
    margin-inline: auto;
    font-size: 48px;
}

.s9-coupon__art {
    display: block;
    width: min(100%, 457px);
    height: auto;
    margin: -9px auto 0;
}

@media (max-width: 580px), (max-height: 680px) {
    .s9-coupon,
    .s9-coupon:has(.s9-coupon__success:not([hidden])) {
        inset: 0;
        max-height: calc(100dvh - 32px);
    }
}

@media (max-width: 580px) {
    .s9-coupon { border-radius: 24px; }
    .s9-coupon__close { top: 8px; right: 8px; }
    .s9-coupon [data-coupon-offer] { padding: 54px 16px 16px; }
    .s9-coupon__title { font-size: clamp(24px, 5.8vw, 32px); }
    .s9-coupon__form {
        flex-direction: column;
        gap: 4px;
        margin: 12px 0 16px;
        padding: 7px 8px 8px;
        border-radius: 22px;
    }
    .s9-coupon__form label { font-size: 18px; line-height: 1.2; }
    .s9-coupon__video { border-radius: 15px; }
    .s9-coupon__error { margin-top: -5px; }
    .s9-coupon__success { padding: 49px 20px 0; }
    .s9-coupon__success .s9-coupon__title { font-size: clamp(30px, 8vw, 42px); }
    .s9-coupon__art { width: min(100%, 360px); margin-top: 0; }
}