/**
 * "Unfinished form" banner.
 *
 * Anchored to the bottom rather than the top: it is an offer, not an
 * announcement, and pinning it below keeps it clear of the page someone
 * deliberately navigated to. Fixed positioning also means no layout shift,
 * which matters because it is injected after the page has already painted.
 *
 * The site's pink, which it otherwise spends only on primary calls to action,
 * carrying a deep purple button. A white bar reads as part of whatever page it
 * lands on, and purple reads as chrome because the main nav is purple; pink is
 * the one colour here that nothing else at the bottom of a page competes with.
 */

.gpn-resume-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998; /* Under the exit popup, which is 9999. */
    background: #e9356b;
    /* No top border: against page content the colour change is the edge. */
    box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.22);
    animation: gpn-resume-banner-in 200ms ease-out;
}

@keyframes gpn-resume-banner-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gpn-resume-banner {
        animation: none;
    }
}

.gpn-resume-banner__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 16px;
}

.gpn-resume-banner__message {
    flex: 1 1 auto;
    margin: 0;
    color: #fff;
    font-family: 'Barlow', sans-serif;
    /* Must not drop below 19px: bold text is only treated as large above that,
       which is what lets white sit on the brand pink at 4.05:1 and meet AA. */
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    /* Uppercased in CSS, not in the copy itself, so the editable value stays
       sentence case and screen readers are not handed something to spell out. */
    text-transform: uppercase;
    /* Barlow's caps set tight; without this they run together at this weight. */
    letter-spacing: 0.03em;
}

/* Scoped reset: Astra and Gravity Forms both style bare buttons site-wide. */
.gpn-resume-banner button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.gpn-resume-banner .gpn-resume-banner__action {
    flex: 0 0 auto;
    display: inline-block;
    padding: 11px 28px;
    border-radius: 3px;
    /* Deeper than the brand purple, which at 2.57:1 against this pink left the
       button's own edge too soft to read as a control. */
    background: #3d2263;
    color: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    /* Uppercased here rather than in the label itself, so the editable copy
       stays sentence case and screen readers are not handed an acronym. */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 150ms ease;
}

.gpn-resume-banner .gpn-resume-banner__action:hover,
.gpn-resume-banner .gpn-resume-banner__action:focus-visible {
    background: #2c1949;
    color: #fff;
    text-decoration: none;
}

.gpn-resume-banner .gpn-resume-banner__dismiss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: none;
    /* Dimmed rather than a different colour: declining should be findable
       without competing with the button that matters. */
    color: rgba(255, 255, 255, 0.85);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.gpn-resume-banner .gpn-resume-banner__dismiss:hover,
.gpn-resume-banner .gpn-resume-banner__dismiss:focus,
.gpn-resume-banner .gpn-resume-banner__dismiss:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* White, not the usual blue: on this pink a blue ring is close to invisible. */
.gpn-resume-banner :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .gpn-resume-banner__inner {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 12px;
    }

    .gpn-resume-banner__message {
        /* Sits on its own row above the button, with the close button beside it. */
        flex: 1 1 100%;
        order: 1;
        padding-right: 44px;
        /* Eased down from the desktop size to hold one line, but kept above the
           19px floor so the AA case still holds on the screens where most of
           these registrations are abandoned. */
        font-size: 20px;
    }

    .gpn-resume-banner .gpn-resume-banner__action {
        order: 2;
        width: 100%;
        text-align: center;
    }

    .gpn-resume-banner .gpn-resume-banner__dismiss {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}