/* Rouse Refresh form thank-you banner (#15110).
   Shared by Contact Us, Talk to Us and the job vacancy form: Views/Partials/RouseRefresh/thank-you-new.cshtml.
   The background art comes from the "thankYouBackground" media field (inline style); navy when none is set. */

.rr-thank-you {
    --thank-you-navy: #171245;
    --thank-you-white: #f9f9f9;
    --thank-you-cyan: #28ffff;
    --thank-you-heading-font: 'Archivo', sans-serif;
    --thank-you-body-font: 'Noto Sans', sans-serif;
}

/* Reset the legacy .thank-you-banner rules (page_style.css / responsive.css): the JS hook class stays. */
.rr-thank-you.thank-you-banner {
    position: relative;
    z-index: auto;
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    color: inherit;
    background: none;
}

    .rr-thank-you.d-none {
        display: none !important;
    }

/* Contact Us / Talk to Us: covers the form card; the banner sits at the top at the card's width. */
.rr-thank-you.rr-thank-you--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 20px;
    background: var(--thank-you-white);
}

.rr-thank-you__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Wilson's mock (#15110): text tight in the top-left; the ribbon is cropped from its top so the
       two bands meet at the bottom edge. */
    justify-content: flex-start;
    gap: 8px;
    min-height: 400px;
    padding: 32px 40px;
    border-radius: 20px;
    color: var(--thank-you-white);
    background: var(--thank-you-navy) center top / cover no-repeat;
}

.rr-thank-you .rr-thank-you__title {
    margin: 0;
    padding-right: 48px;
    color: var(--thank-you-white);
    font: 400 80px/1 var(--thank-you-heading-font) !important;
}

.rr-thank-you .rr-thank-you__message,
.rr-thank-you .rr-thank-you__message > * {
    margin: 0;
    color: var(--thank-you-white);
    font: 400 20px/1.3 var(--thank-you-body-font);
}

    .rr-thank-you .rr-thank-you__message > * + * {
        margin-top: 8px;
    }

    .rr-thank-you .rr-thank-you__message a,
    .rr-thank-you .rr-thank-you__message a:is(:hover, :focus-visible) {
        color: var(--thank-you-white) !important;
        text-decoration: underline;
    }

.rr-thank-you__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--thank-you-white);
    transition: background-color .2s ease, box-shadow .2s ease;
}

    .rr-thank-you__close::before,
    .rr-thank-you__close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 1.5px;
        background: var(--thank-you-navy);
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .rr-thank-you__close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .rr-thank-you__close:is(:hover, :focus-visible) {
        background: var(--thank-you-navy);
        box-shadow: inset 0 0 0 1px var(--thank-you-white);
    }

        .rr-thank-you__close:is(:hover, :focus-visible)::before,
        .rr-thank-you__close:is(:hover, :focus-visible)::after {
            background: var(--thank-you-white);
        }

    .rr-thank-you__close:focus {
        outline: none;
    }

    .rr-thank-you__close:focus-visible {
        box-shadow: inset 0 0 0 1px var(--thank-you-cyan);
    }

/* Small (same breakpoint as contact-us-new.css / talk-consultant-new.css) */
@media (max-width: 749.98px) {
    .rr-thank-you__panel {
        padding: 24px;
    }

    .rr-thank-you .rr-thank-you__title {
        font-size: 40px !important;
    }

    .rr-thank-you .rr-thank-you__message,
    .rr-thank-you .rr-thank-you__message > * {
        font-size: 18px;
    }
}