/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-shell[b-7g2i8i1qou] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('/img/iws_background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 767.98px) {
    /* fixed attachment is unreliable on mobile browsers */
    .public-shell[b-7g2i8i1qou] {
        background-attachment: scroll;
    }
}

/* the content grows to fill whatever is left so the footer stays at the bottom */
.public-content[b-7g2i8i1qou] {
    flex: 1 1 auto;
    display: flex;
}

/* the shared Footer component renders an opaque bg-white footer,
   soften it so the background image stays visible behind it.
   ::deep is required because the footer element belongs to a child component. */
.public-shell[b-7g2i8i1qou]  footer {
    flex: 0 0 auto;
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(4px);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2sc5ed20t4],
.components-reconnect-repeated-attempt-visible[b-2sc5ed20t4],
.components-reconnect-failed-visible[b-2sc5ed20t4],
.components-pause-visible[b-2sc5ed20t4],
.components-resume-failed-visible[b-2sc5ed20t4],
.components-rejoining-animation[b-2sc5ed20t4] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-retrying[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-failed[b-2sc5ed20t4],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2sc5ed20t4] {
    display: block;
}


#components-reconnect-modal[b-2sc5ed20t4] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2sc5ed20t4 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2sc5ed20t4 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2sc5ed20t4 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2sc5ed20t4]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2sc5ed20t4 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2sc5ed20t4 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2sc5ed20t4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2sc5ed20t4 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2sc5ed20t4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2sc5ed20t4] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2sc5ed20t4] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-2sc5ed20t4] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-2sc5ed20t4] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-2sc5ed20t4] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2sc5ed20t4] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2sc5ed20t4 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2sc5ed20t4] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-2sc5ed20t4 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/PublicPages/Landing.razor.rz.scp.css */
/* the background image lives on the public layout shell,
   this page only draws the centered white panel on top of it */

.landing-wrapper[b-2b6n7kfvfi] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem;
}

.landing-panel[b-2b6n7kfvfi] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
}

.landing-announcements[b-2b6n7kfvfi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

    /* the banner markup belongs to the AnnouncementBanner component, so it needs ::deep.
       the alerts carry Bootstrap's mb-0 utility, so spacing comes from the flex gap above */
    .landing-announcements[b-2b6n7kfvfi]  .row {
        --bs-gutter-x: 0;
    }

.landing-logo[b-2b6n7kfvfi] {
    height: 64px;
    margin-bottom: 1.25rem;
}

.landing-title[b-2b6n7kfvfi] {
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.landing-intro[b-2b6n7kfvfi] {
    text-align: center;
    font-size: 1.05rem;
    max-width: 30rem;
    margin: 0 auto 1.75rem auto;
    color: #55606b;
}

/* two column grid of feature chips, easier to scan than a single long list */
.landing-features[b-2b6n7kfvfi] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 34rem;
    margin: 0 auto 2rem auto;
    padding-left: 0;
}

    .landing-features li[b-2b6n7kfvfi] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        background-color: #fbfcfd;
        font-size: 0.9rem;
        line-height: 1.25;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

        .landing-features li:hover[b-2b6n7kfvfi] {
            border-color: #ced4da;
            box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.06);
        }

    /* the closing item spans the full width so the grid never leaves a hole */
    .landing-features li.landing-features-more[b-2b6n7kfvfi] {
        grid-column: 1 / -1;
        justify-content: center;
        background-color: transparent;
        border-style: dashed;
        color: #6c757d;
    }

.landing-feature-icon[b-2b6n7kfvfi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
    color: var(--bs-primary, #0d6efd);
    font-size: 0.85rem;
}

.landing-features-more .landing-feature-icon[b-2b6n7kfvfi] {
    background-color: transparent;
    color: #adb5bd;
}

.landing-actions[b-2b6n7kfvfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.landing-note[b-2b6n7kfvfi] {
    text-align: center;
    margin: 1.25rem 0 0 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.landing-apps[b-2b6n7kfvfi] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    text-align: center;
}

.landing-apps-title[b-2b6n7kfvfi] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.landing-apps-text[b-2b6n7kfvfi] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.landing-apps-badges[b-2b6n7kfvfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.landing-apps-badges img[b-2b6n7kfvfi] {
    height: 44px;
    width: auto;
}

@media (max-width: 767.98px) {
    .landing-panel[b-2b6n7kfvfi] {
        padding: 1.75rem 1.25rem;
    }

    .landing-title[b-2b6n7kfvfi] {
        font-size: 1.6rem;
    }

    .landing-features[b-2b6n7kfvfi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-actions .btn[b-2b6n7kfvfi] {
        width: 100%;
    }
}
/* /Components/Pages/PublicPages/PaymentSubmitted.razor.rz.scp.css */
/* the background image lives on the public layout shell,
   this page only draws the centered white panel on top of it.

   the landing-* and quickpay-* rules are redeclared here on purpose: blazor scoped css
   is per component, so QuickPay.razor.css does not apply to this page */

.landing-wrapper[b-e8bjk7mb22] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem;
}

.landing-panel[b-e8bjk7mb22] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
}

.landing-logo-holder[b-e8bjk7mb22] {
    text-align: center;
}

.landing-logo[b-e8bjk7mb22] {
    height: 64px;
    margin-bottom: 1.25rem;
}

.landing-actions[b-e8bjk7mb22] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.quickpay-expired[b-e8bjk7mb22] {
    text-align: center;
    padding: 1.5rem 1rem 0.5rem 1rem;
}

/* Muted grey, this is a neutral state rather than a success one. */
.quickpay-expired-icon[b-e8bjk7mb22] {
    font-size: 2.5rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

/* Deliberately larger and greener than the neutral icon, matching the quick pay
   completed screen so the two confirmation pages read the same way. */
.quickpay-complete-icon[b-e8bjk7mb22] {
    font-size: 3.5rem;
    color: #1a7f4b;
    margin-bottom: 1rem;
}

.quickpay-expired-title[b-e8bjk7mb22] {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #212529;
}

.quickpay-expired-text[b-e8bjk7mb22] {
    color: #6c757d;
    max-width: 26rem;
    margin: 0 auto;
}
/* /Components/Pages/PublicPages/QuickPay.razor.rz.scp.css */
/* the background image lives on the public layout shell,
   this page only draws the centered white panel on top of it.

   the shared landing-* rules are redeclared here on purpose: blazor scoped css
   is per component, so Landing.razor.css does not apply to this page */

.landing-wrapper[b-afjcajj9x3] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem;
}

.landing-panel[b-afjcajj9x3] {
    position: relative; /* anchors the corner home link */
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
    /* widens only when the two column split is present, so the lookup-only state stays
       a narrow, focused card instead of a mostly empty wide one */
    transition: max-width 0.2s ease;
}

/* Out of the vertical flow entirely so it cannot push the heading down or sit in the
   path between the intro and the input. */
.quickpay-home-link[b-afjcajj9x3] {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    font-size: 0.8125rem;
    color: #6c757d;
    text-decoration: none;
}

.quickpay-home-link:hover[b-afjcajj9x3],
.quickpay-home-link:focus[b-afjcajj9x3] {
    color: #1a7f4b;
    text-decoration: underline;
}

/* Tinted panel so the offer reads as a separate aside rather than more receipt detail,
   but kept quiet enough that the confirmation above stays the point of the screen. */
.quickpay-account-pitch[b-afjcajj9x3] {
    max-width: 26rem;
    margin: 1.5rem auto 0 auto;
    padding: 1rem 1.25rem;
    text-align: center;
    background-color: #f4f8f5;
    border: 1px solid #dfeae2;
    border-radius: 0.5rem;
}

.quickpay-account-pitch-title[b-afjcajj9x3] {
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: #1a7f4b;
}

.quickpay-account-pitch-text[b-afjcajj9x3] {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #55606b;
}

.quickpay-account-pitch-links[b-afjcajj9x3] {
    margin-bottom: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.landing-panel:has(.quickpay-split)[b-afjcajj9x3] {
    max-width: 1040px;
}

/* Single column by default (mobile first). The two column rule lives in the wide
   screen media query below, so narrow viewports never need to override it back. */
.quickpay-split[b-afjcajj9x3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.quickpay-split-side[b-afjcajj9x3] {
    min-width: 0; /* lets grid children shrink instead of forcing the panel wider */
}

/* Supporting detail, not another card: muted and borderless so it never competes with the
   stripe element or the primary action. margin-top auto pushes it to the foot of the column,
   and it yields as soon as the column grows (decline banner, email suggestion), so it fills
   the gap without ever making the left side the taller of the two. */
.quickpay-assurance[b-afjcajj9x3] {
    margin-top: auto;
    padding-top: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6c757d;
}

.quickpay-assurance-line[b-afjcajj9x3] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quickpay-assurance-line:last-child[b-afjcajj9x3] {
    margin-bottom: 0;
}

.quickpay-assurance-icon[b-afjcajj9x3] {
    flex: 0 0 auto;
    width: 0.875rem;
    text-align: center;
    color: #adb5bd;
}

.landing-logo-holder[b-afjcajj9x3],
.quickpay-hero-holder[b-afjcajj9x3] {
    text-align: center;
}

.quickpay-split-header[b-afjcajj9x3] {
    margin-bottom: 1.5rem;
}

.landing-logo[b-afjcajj9x3] {
    height: 64px;
    margin-bottom: 1.25rem;
}

.landing-title[b-afjcajj9x3] {
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.landing-intro[b-afjcajj9x3] {
    text-align: center;
    max-width: 30rem;
    margin: 0 auto 1.75rem auto;
    color: #55606b;
}

/* Each line is its own block so the break is deliberate rather than left to wrapping,
   which would shift as the column narrows in the split layout. */
.landing-intro-lead[b-afjcajj9x3],
.landing-intro-action[b-afjcajj9x3] {
    display: block;
}

.landing-intro-lead[b-afjcajj9x3] {
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Stepped down and lightened so the pair reads as statement then instruction, rather than
   two sentences of equal weight. */
.landing-intro-action[b-afjcajj9x3] {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #7a848e;
}

.landing-actions[b-afjcajj9x3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Sits under the button rather than beside it, so it reads as a response to the click.
   Centred to match the action row it belongs to. */
.quickpay-submit-error[b-afjcajj9x3] {
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-align: center;
    font-size: 0.875rem;
    color: #b02a37;
}

.landing-note[b-afjcajj9x3] {
    text-align: center;
    margin: 1.25rem 0 0 0;
    color: #6c757d;
    font-size: 0.9rem;
}

/* quick pay specific */

/* session countdown */

.quickpay-session[b-afjcajj9x3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    color: #55606b;
    font-size: 0.9rem;
}

/* the last couple of minutes turn amber so the visitor notices before it lapses */
.quickpay-session-warning[b-afjcajj9x3] {
    border-color: #ffe69c;
    background-color: #fff8e6;
    color: #8a6100;
}

.quickpay-expired[b-afjcajj9x3] {
    text-align: center;
    padding: 1.5rem 1rem 0.5rem 1rem;
}

.quickpay-expired-icon[b-afjcajj9x3] {
    font-size: 2.5rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

/* Shares the .quickpay-expired block layout, but this is a success state rather than a
   failure one, so it is deliberately larger and green instead of muted grey. */
.quickpay-complete-icon[b-afjcajj9x3] {
    font-size: 3.5rem;
    color: #1a7f4b;
    margin-bottom: 1rem;
}

/* Sized to match .quickpay-complete-icon so the page opens and closes on the same visual
   weight. Amber rather than the brand blue, the bolt is about speed, not status, and the
   blue is reserved here for actions the payer can take. */
.quickpay-hero-icon[b-afjcajj9x3] {
    font-size: 3.5rem;
    color: #f0a500;
    margin-bottom: 0.75rem;
}

.quickpay-expired-title[b-afjcajj9x3] {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #212529;
}

.quickpay-expired-text[b-afjcajj9x3] {
    color: #6c757d;
    max-width: 26rem;
    margin: 0 auto;
}

.quickpay-expired-redirect[b-afjcajj9x3] {
    margin: 0.75rem auto 0 auto;
    color: #adb5bd;
    font-size: 0.85rem;
}

.quickpay-form[b-afjcajj9x3] {
    margin-bottom: 0.5rem;
}

/* the form layout captions and editors belong to devexpress markup, so ::deep is required */
.quickpay-form[b-afjcajj9x3]  .dxbl-fl-cpt {
    font-weight: 600;
    color: #343a40;
    font-size: 1.0625rem;
}

/* The identifier the payer copies digit by digit off a paper bill, so it is set larger than
   the surrounding text: a mistyped digit here is the difference between finding the account
   and a dead end. */
.quickpay-form[b-afjcajj9x3]  .quickpay-input {
    font-size: 1.125rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* The placeholder is what the payer reads before typing, so it has to track the input size
   rather than staying at the browser default. */
.quickpay-form[b-afjcajj9x3]  .quickpay-input::placeholder {
    font-size: 1.0625rem;
}

.quickpay-hint[b-afjcajj9x3] {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.quickpay-hint-success[b-afjcajj9x3] {
    color: #1a7f4b;
    font-weight: 600;
}

/* The invoice line sits under the confirmed account name, so it is stepped down in weight
   and colour: the name is the confirmation, this is supporting detail. */
.quickpay-hint-detail[b-afjcajj9x3] {
    display: block;
    margin-top: 0.15rem;
    font-weight: 400;
    color: #6c757d;
}

/* One row per fact. Each row is its own flex line so a date can never be broken across
   two lines, which is what made the single sentence version look ragged. */
.quickpay-invoice-detail[b-afjcajj9x3] {
    display: flex;
    gap: 0.35rem;
    line-height: 1.5;
}

/* Fixed width so the values line up in a column regardless of label length. */
.quickpay-invoice-detail-label[b-afjcajj9x3] {
    flex: 0 0 3.25rem;
    color: #868e96;
}

.quickpay-invoice-detail-value[b-afjcajj9x3] {
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

/* The two lookup modes are mutually exclusive and the choice has to be made before the field
   below means anything, so it is presented as an explicitly labelled radio group rather than
   as a pair of buttons that read like actions. */
.quickpay-lookup-choice[b-afjcajj9x3] {
    margin-bottom: 0.75rem;
}

.quickpay-lookup-choice-label[b-afjcajj9x3] {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: #495057;
    font-size: 1.0625rem;
}

.quickpay-lookup-radios[b-afjcajj9x3] {
    display: block;
}

/* The whole row is the label, so the hint text is a click target too rather than a dead
   zone next to the radio. Generous padding keeps the two targets far enough apart to be hard
   to hit by accident. */
.quickpay-lookup-option[b-afjcajj9x3] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

/* Scaled up with the text around it, an unenlarged radio next to larger labels reads as
   disabled. Nudged down to sit on the label line rather than centred against the two line
   block. */
.quickpay-lookup-option-input[b-afjcajj9x3] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    cursor: pointer;
}

.quickpay-lookup-option-text[b-afjcajj9x3] {
    display: flex;
    flex-direction: column;
}

.quickpay-lookup-option-label[b-afjcajj9x3] {
    font-weight: 500;
    font-size: 1.0625rem;
}

/* The number the payer is hunting for on a paper bill, stepped down so it explains the
   choice without competing with it. Kept at body size rather than smaller: this is the line
   that actually tells the two options apart, so it has to stay comfortably readable. */
.quickpay-lookup-option-hint[b-afjcajj9x3] {
    font-size: 0.9375rem;
    color: #6c757d;
}

.quickpay-hint-error[b-afjcajj9x3] {
    color: #b02a37;
}

/* Neutral blue rather than red or amber: paying onto a settled account is a legitimate
   thing to do, this is information the payer should have, not a problem to fix. */
.quickpay-hint-info[b-afjcajj9x3] {
    color: #0b5f8a;
    line-height: 1.5;
}

/* Running character total for the payment note. Right aligned so it reads as a meter
   against the field rather than as instructional text. */
.quickpay-counter[b-afjcajj9x3] {
    text-align: right;
}

.quickpay-counter-warning[b-afjcajj9x3] {
    color: #8a6100;
    font-weight: 600;
}

/* Amber rather than red. A suspected domain typo is advisory, the address is already valid
   and the payer is free to ignore it, so it must not read as a blocking error. */
.quickpay-hint-suggestion[b-afjcajj9x3] {
    color: #8a6100;
}

[b-afjcajj9x3] .quickpay-suggestion-accept {
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    vertical-align: baseline;
}

/* Inline link inside an info hint, sized to sit on the same baseline as the sentence it
   follows so the shortcut reads as part of the advice rather than a separate control. */
[b-afjcajj9x3] .quickpay-hint-action {
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    vertical-align: baseline;
}

[b-afjcajj9x3] .quickpay-suggestion-dismiss {
    padding: 0;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    vertical-align: baseline;
}

.quickpay-info[b-afjcajj9x3] {
    color: #adb5bd;
    cursor: help;
}

.quickpay-required[b-afjcajj9x3] {
    color: #b02a37;
    font-weight: 700;
}

/* ::deep is required, the input is rendered inside the devexpress textbox component
   so the scoped attribute is never applied to it directly. */
[b-afjcajj9x3] .quickpay-input-invalid {
    border-color: #b02a37;
}

/* Container for the inline stripe payment element. Only the wrapper can be styled,
   the element itself renders inside a stripe hosted iframe. */
.quickpay-payment-element[b-afjcajj9x3] {
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    min-height: 3rem;
}

.quickpay-totals[b-afjcajj9x3] {
    margin-top: 0.5rem;
    padding: 1rem 1.25rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
}

.quickpay-total-row[b-afjcajj9x3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.35rem 0;
    color: #55606b;
}

.quickpay-total-row-final[b-afjcajj9x3] {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
    font-weight: 700;
    font-size: 1.15rem;
    color: #212529;
}

.quickpay-surcharge-note[b-afjcajj9x3] {
    margin: 0.75rem 0 0 0;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Inline decline banner. Deliberately heavier than .quickpay-hint-error, that is for a field
   the payer is still filling in, this reports an attempt that already failed. */
.quickpay-payment-error[b-afjcajj9x3] {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    background-color: #fdf2f3;
    border: 1px solid #f1aeb5;
    border-left: 4px solid #b02a37;
    border-radius: 0.5rem;
    color: #842029;
}

.quickpay-payment-error-icon[b-afjcajj9x3] {
    margin-top: 0.15rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.quickpay-payment-error-body[b-afjcajj9x3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.quickpay-payment-error-title[b-afjcajj9x3] {
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .landing-panel[b-afjcajj9x3] {
        padding: 1.75rem 1.25rem;
    }

    .landing-title[b-afjcajj9x3] {
        font-size: 1.6rem;
    }

    .landing-actions .btn[b-afjcajj9x3] {
        width: 100%;
    }
}

/* Side by side only once there is genuinely room for two readable columns. Below this the
   grid above keeps them stacked, which is why there is no single column override here.
   992px is bootstrap's lg breakpoint, matching ColSpanMd behaviour elsewhere on the page. */
@media (min-width: 992px) {
    .quickpay-split[b-afjcajj9x3] {
        grid-template-columns: 1fr 1px 1fr;
        gap: 2rem;
        align-items: start;
    }

    /* The divider is a real grid column rather than a border on a side, so it spans the
       full height of the taller column and stays centered in the gap. */
    .quickpay-split[b-afjcajj9x3]::before {
        content: "";
        grid-column: 2;
        grid-row: 1;
        width: 1px;
        height: 100%;
        background-color: #e9ecef;
    }

    .quickpay-split-side:first-of-type[b-afjcajj9x3] {
        grid-column: 1;
        grid-row: 1;
        /* column flow so the assurance block can be pushed to the bottom with margin-top auto.
           align-items stretch would otherwise leave it sitting directly under the form. */
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }

    .quickpay-split-side:last-of-type[b-afjcajj9x3] {
        grid-column: 3;
        grid-row: 1;
    }
}