/* /Components/Pages/Affordability.razor.rz.scp.css */
.affordability-page[b-twxld53sne] {
    padding-top: var(--space-xs);
}

.affordability-content[b-twxld53sne] {
    width: min(1180px, calc(100% - 2.5rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    gap: var(--space-2xl);
    align-items: start;
}

/* Hero column - left on desktop */
.hero-column[b-twxld53sne] {
    order: 1;
}

[b-twxld53sne] .hero-panel {
    overflow: hidden;
    background: var(--hero-background);
    min-height: 29rem;
}

[b-twxld53sne] .hero-panel picture,
[b-twxld53sne] .hero-panel img {
    display: block;
    width: 100%;
    height: 100%;
}

[b-twxld53sne] .hero-panel img {
    object-fit: cover;
}

/* Right panel */
.affordability-panel[b-twxld53sne] {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Greeting card */
.greeting-card[b-twxld53sne] {
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-md);
    color: #2f2f2f;
}

.greeting-card > *[b-twxld53sne] {
    margin: 0 0 var(--space-xs);
}

.greeting-card > *:last-child[b-twxld53sne] {
    margin-bottom: 0;
}

.greeting-name[b-twxld53sne] {
    font-size: var(--font-size-2xl);
    font-weight: 500;
}

.greeting-headline strong[b-twxld53sne] {
    font-size: var(--font-size-md);
}

.greeting-body[b-twxld53sne] {
    color: #4a4a4a;
}

.greeting-expiry[b-twxld53sne] {
    color: #6e6e6e;
}

/* Form section */
.affordability-heading[b-twxld53sne] {
    margin: 0 0 0.15rem;
    font-size: var(--font-size-heading);
    font-weight: 500;
    color: var(--heading-color);
}

.required-note[b-twxld53sne] {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-xs);
    color: var(--muted-text);
}

.field-block[b-twxld53sne] {
    margin-bottom: var(--space-md);
}

.field-block label[b-twxld53sne] {
    display: block;
    font-size: var(--font-size-sm);
    color: #2f2f2f;
    margin-bottom: var(--space-2xs);
}

.disclaimer-copy[b-twxld53sne] {
    margin: var(--space-xs) 0 var(--space-2xs);
    font-size: var(--font-size-xs);
    color: #4a4a4a;
}

.read-more-link[b-twxld53sne] {
    color: inherit;
}

.tandc-copy[b-twxld53sne] {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--muted-text);
}

.apply-button[b-twxld53sne] {
    width: 100%;
    border-radius: var(--radius-control);
    background: var(--button-background);
    color: var(--button-text);
    border: 1px solid var(--button-background);
    font-weight: 700;
    margin-top: var(--space-xs);
}

.affordability-result[b-twxld53sne] {
    margin-top: var(--space-sm);
}

/* Form-feedback styles (.field-error / .form-status*) are global in css/forms.css
   so they apply to the htmx-swapped string fragments. */

/* Processing modal — same pattern as IdCheck */
.processing-modal.htmx-indicator[b-twxld53sne] {
    display: none;
}

.processing-modal.htmx-request[b-twxld53sne],
.htmx-request .processing-modal[b-twxld53sne] {
    display: flex;
}

.processing-modal[b-twxld53sne] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.86);
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.processing-modal-content[b-twxld53sne] {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    min-width: min(92vw, 26rem);
}

.processing-spinner[b-twxld53sne] {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto var(--space-sm);
    border: 0.25rem solid #d0d0d0;
    border-top-color: #000000;
    border-radius: var(--radius-circle);
    animation: processing-spin-b-twxld53sne 0.8s linear infinite;
}

.processing-modal-content p[b-twxld53sne] {
    margin: 0;
    color: #1f1f1f;
    font-size: var(--font-size-xl);
}

@keyframes processing-spin-b-twxld53sne {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .affordability-content[b-twxld53sne] {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    /* Hide hero image on mobile */
    .hero-column[b-twxld53sne] {
        display: none;
    }

    .affordability-panel[b-twxld53sne] {
        order: 1;
    }

    .affordability-form-section[b-twxld53sne] {
        padding: var(--space-lg) var(--space-md) 0;
    }
}
/* /Components/Pages/IdCheck.razor.rz.scp.css */
.limit-increase-page[b-m3xxfgnsiv] {
    padding-top: var(--space-xs);
}

.limit-content[b-m3xxfgnsiv] {
    width: min(1180px, calc(100% - 2.5rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    gap: var(--space-2xl);
    align-items: start;
}

[b-m3xxfgnsiv] .hero-panel {
    overflow: hidden;
    background: var(--hero-background);
    min-height: 29rem;
}

[b-m3xxfgnsiv] .hero-panel picture,
[b-m3xxfgnsiv] .hero-panel img {
    display: block;
    width: 100%;
    height: 100%;
}

[b-m3xxfgnsiv] .hero-panel img {
    object-fit: cover;
}

.application-panel h1[b-m3xxfgnsiv] {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-heading);
    font-weight: 500;
    color: var(--heading-color);
}

.field-block[b-m3xxfgnsiv] {
    margin-bottom: var(--space-md);
}

.support-copy[b-m3xxfgnsiv] {
    margin: var(--space-md) 0;
    font-size: var(--font-size-sm);
    color: var(--muted-text);
}

.apply-button[b-m3xxfgnsiv] {
    width: 100%;
    border-radius: var(--radius-control);
    background: var(--button-background);
    color: var(--button-text);
    border: 1px solid var(--button-background);
    font-weight: 700;
    margin-top: var(--space-sm);
}

.application-result[b-m3xxfgnsiv] {
    margin-top: var(--space-md);
}

.htmx-indicator[b-m3xxfgnsiv] {
    display: none;
    margin-left: var(--space-xs);
    font-size: var(--font-size-xs);
}

.htmx-request .htmx-indicator[b-m3xxfgnsiv],
.htmx-request.htmx-indicator[b-m3xxfgnsiv] {
    display: inline-block;
}

.processing-modal.htmx-indicator[b-m3xxfgnsiv] {
    display: none;
}

.processing-modal.htmx-request[b-m3xxfgnsiv] {
    display: flex;
}

.processing-modal[b-m3xxfgnsiv] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.86);
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.processing-modal-content[b-m3xxfgnsiv] {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    min-width: min(92vw, 26rem);
}

.processing-spinner[b-m3xxfgnsiv] {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto var(--space-sm);
    border: 0.25rem solid #d0d0d0;
    border-top-color: #000000;
    border-radius: var(--radius-circle);
    animation: processing-spin-b-m3xxfgnsiv 0.8s linear infinite;
}

.processing-modal-content p[b-m3xxfgnsiv] {
    margin: 0;
    color: #1f1f1f;
    font-size: var(--font-size-xl);
}

@keyframes processing-spin-b-m3xxfgnsiv {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 960px) {
    .limit-content[b-m3xxfgnsiv] {
        grid-template-columns: 1fr;
        width: min(720px, calc(100% - 2rem));
        gap: var(--space-xl);
    }

    [b-m3xxfgnsiv] .hero-panel {
        min-height: 23rem;
    }
}
/* /Components/Pages/Pay3/AuthenticationUnavailable.razor.rz.scp.css */
/* Black at the body size, as both brands' Flow 4 frames set every line under the heading: not the
   grey lead the thank-you pages carry. 16/24 on a desktop frame and 14/21 on a phone. */
.unavailable-copy[b-1z9sxyuwtm],
.unavailable-contact[b-1z9sxyuwtm] {
    /* Wide enough for Truworths' second paragraph to break after "store by", where the desktop frame
       breaks it. */
    max-width: 55rem;
    margin: 0 auto 0.875rem;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--heading-color);
}

/* Printed rather than picked out, as the footer prints the same line: only the affordance survives. */
.unavailable-contact a[b-1z9sxyuwtm] {
    color: inherit;
    text-decoration: none;
}

.unavailable-contact-sep[b-1z9sxyuwtm] {
    padding-inline: 0.55rem;
}

@media (max-width: 899px) {
    .unavailable-copy[b-1z9sxyuwtm],
    .unavailable-contact[b-1z9sxyuwtm] {
        /* Both brands' phone frames break these lines in a 312px box on their 360 width, a little
           inside the page's own inset. */
        padding-inline: 0.625rem;
        font-size: var(--font-size-sm);
    }

    .unavailable-contact-sep[b-1z9sxyuwtm] {
        display: none;
    }

    .unavailable-contact-email[b-1z9sxyuwtm] {
        display: block;
    }
}
/* /Components/Pages/Pay3/ComingSoon.razor.rz.scp.css */
.coming-soon-copy[b-igy5g7k4uk] {
    max-width: 44rem;
    margin: 0 auto var(--space-md);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-relaxed);
    color: var(--muted-text);
}

.coming-soon-button[b-igy5g7k4uk] {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-2xl);
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--radius-button);
    font-size: var(--font-size-action);
    text-decoration: none;
}
/* /Components/Pages/Pay3/CustomThankYou.razor.rz.scp.css */
.contact-copy[b-4mq6h70c5o] {
    max-width: 44rem;
    margin: 0 auto;
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-relaxed);
    color: var(--muted-text);
}

.contact-copy a[b-4mq6h70c5o] {
    color: inherit;
}
/* /Components/Pages/Pay3/IdCheck.razor.rz.scp.css */
/* The React page's prompt, between the heading and the field. Set as the step pages set the copy
   beside their forms: the label's size, a step down in colour. */
.id-check-lead[b-7nlht4uxsm] {
    margin: var(--space-md) 0 var(--space-sm);
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    color: var(--muted-text);
}

.id-check-restart[b-7nlht4uxsm] {
    margin: var(--space-lg) 0 0;
}
/* /Components/Pages/Pay3/NoAccess.razor.rz.scp.css */
.restart-copy[b-knzhcv2x22] {
    margin: var(--space-xl) 0 0;
}

.restart-link[b-knzhcv2x22] {
    display: inline-block;
    padding: var(--space-sm) var(--space-2xl);
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--radius-button);
    font-size: var(--font-size-action);
    text-decoration: none;
}
/* /Components/Pages/Pay3/ThankYou.razor.rz.scp.css */
/* Read off Flow 6's thank-you frames in Figma's inspect panel on 16 Oct 2026 (TRU 2192:622 and
   2192:580, IDENTITY 2191:535 and 2191:501). Those frames trim text to its cap height, so a layer's
   Top there is its first line's cap top; the margins here are what puts each cap top on the
   frame's, given Poppins' line box. The two brands' frames space the page differently, by ~30px
   around the rule on a desktop frame, so each takes its own. */
.thank-you[b-vwqes0g2e0] {
    --thank-you-top: 4.5625rem;
    --thank-you-heading-size: 2.0833rem;
    --thank-you-heading-gap: 0.625rem;
    --thank-you-rule-above: 3.9375rem;
    --thank-you-rule-below: 3.71875rem;
    --thank-you-shop-gap: 1.78125rem;
    --thank-you-tile-ratio: 848 / 460;

    /* Truworths' desktop frame leaves 227px between the tiles and the footer, where the other
       terminal pages leave 92. Identity's frame is taller than a screen, so its 391 is not read. */
    padding-bottom: 8.6875rem;
}

.thank-you-identity[b-vwqes0g2e0] {
    --thank-you-heading-size: 2.0625rem;
    --thank-you-heading-gap: 0.4375rem;
    --thank-you-rule-above: 5.875rem;
    --thank-you-rule-below: 5.59375rem;
    --thank-you-shop-gap: 1.84375rem;

    /* Both brands' photos are 848x460, which Truworths' frames draw them at (340x184). Identity's
       crop them taller: 460x262 on a desktop frame, 340x194 on a phone. */
    --thank-you-tile-ratio: 460 / 262;
}

.thank-you[b-vwqes0g2e0]  .terminal-page {
    padding-top: var(--thank-you-top);
}

/* 33.33px on Truworths' desktop frame, 33px on Identity's. */
.thank-you[b-vwqes0g2e0]  .terminal-heading {
    margin-bottom: var(--thank-you-heading-gap);
    font-size: var(--thank-you-heading-size);
}

/* Black, as every line under the heading is on both frames: not the grey lead the other terminal
   pages carry. Its own spacing gives way to the rule's. */
.thank-you[b-vwqes0g2e0]  .terminal-lead {
    margin-bottom: 0;
    color: var(--heading-color);
}

/* Identity's desktop frame sets the line at 14/21 in a 458px box, which breaks it after "on the";
   Truworths' keeps 16/24 on one line. */
.thank-you-identity[b-vwqes0g2e0]  .terminal-lead {
    max-width: 28.625rem;
    font-size: var(--font-size-sm);
    line-height: 1.3125rem;
}

/* Both frames' Line 7: 1px of #dadada, 1398 wide on a desktop frame. */
.thank-you-rule[b-vwqes0g2e0] {
    width: min(87.375rem, 100%);
    height: 0;
    margin: var(--thank-you-rule-above) auto var(--thank-you-rule-below);
    border: 0;
    border-top: 1px solid #dadada;
}

/* The tiles run 250 to 1670 on a desktop frame: a 1420 row of 340 (Truworths) or 460 (Identity),
   20 apart. */
.thank-you[b-vwqes0g2e0]  .category-links {
    width: min(88.75rem, 100%);
    margin-top: 0;
}

.thank-you[b-vwqes0g2e0]  .category-links-heading {
    margin-bottom: var(--thank-you-shop-gap);
    font-size: 2.0833rem;
}

/* Pico's 4px under every list item would widen the frames' 20px (and Identity's 18px) between
   stacked tiles. */
.thank-you[b-vwqes0g2e0]  .category-tile {
    margin: 0;
}

.thank-you[b-vwqes0g2e0]  .category-tile img {
    aspect-ratio: var(--thank-you-tile-ratio);
}

/* The same 192x53 label on every tile, whatever its width, 220 wide on a phone. Poppins SemiBold
   17.33px, which renders Bold until the SemiBold face is bundled with the others. */
.thank-you[b-vwqes0g2e0]  .category-label {
    min-width: 0;
    width: 12rem;
    height: 3.3125rem;
    padding: 0;
    border-radius: 0.25rem;
    font-size: 1.0833rem;
    font-weight: 600;
    line-height: 3.3125rem;
}

@media (max-width: 899px) {
    .thank-you[b-vwqes0g2e0] {
        --thank-you-top: 1.875rem;
        --thank-you-heading-size: 1.5rem;
        --thank-you-heading-gap: 1.0625rem;
        --thank-you-rule-above: 2.75rem;
        --thank-you-rule-below: 2.65625rem;
        --thank-you-shop-gap: 1.4375rem;
        --thank-you-tile-gap: 1.25rem;

        /* Truworths' rule is 340 wide, 10px in from a phone frame's edges; Identity's 332, 14 in. */
        --thank-you-rule-inset: 1.25rem;

        /* 38px between the last tile and the footer on Truworths' phone frame, 40 on Identity's. */
        padding-bottom: 2.375rem;
    }

    .thank-you-identity[b-vwqes0g2e0] {
        --thank-you-top: 2.09375rem;
        --thank-you-heading-size: 1.375rem;
        --thank-you-heading-gap: 1.75rem;
        --thank-you-rule-above: 3.375rem;
        --thank-you-rule-below: 3.28125rem;
        --thank-you-shop-gap: 1.6875rem;
        --thank-you-tile-gap: 1.125rem;
        --thank-you-rule-inset: 1.75rem;

        padding-bottom: 2.5625rem;
    }

    /* 14/21 on both phone frames, which breaks it after "via SMS to". */
    .thank-you[b-vwqes0g2e0]  .terminal-lead {
        font-size: var(--font-size-sm);
        line-height: 1.3125rem;
    }

    .thank-you-rule[b-vwqes0g2e0] {
        width: calc(100% - var(--thank-you-rule-inset));
    }

    /* 340-wide tiles, 10px in from a phone frame's edges. */
    .thank-you[b-vwqes0g2e0]  .category-links {
        width: 100%;
        padding-inline: 0.625rem;
    }

    .thank-you[b-vwqes0g2e0]  .category-links-heading {
        font-size: 1.5rem;
    }

    .thank-you[b-vwqes0g2e0]  .category-grid {
        gap: var(--thank-you-tile-gap);
    }

    .thank-you[b-vwqes0g2e0]  .category-label {
        width: 13.75rem;
    }
}
/* /Components/Pages/PreAgreement.razor.rz.scp.css */
.pre-agreement-page[b-xbxg7ovso8] {
    padding-top: var(--space-xs);
}

.pre-agreement-content[b-xbxg7ovso8] {
    width: min(990px, calc(100% - 2.5rem));
    margin: 0 auto;
}

.agreement-layout[b-xbxg7ovso8] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.95fr);
    gap: 2.3rem;
    align-items: start;
}

.agreement-main-column[b-xbxg7ovso8],
.agreement-side-column[b-xbxg7ovso8] {
    min-width: 0;
}

.agreement-title[b-xbxg7ovso8] {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-display);
    font-weight: 500;
    color: #222;
}

.language-field[b-xbxg7ovso8] {
    margin-bottom: var(--space-lg);
}

.language-field label[b-xbxg7ovso8] {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: var(--font-size-xl);
    color: #4d4d4d;
}

.agreement-select[b-xbxg7ovso8] {
    width: min(240px, 100%);
    border-radius: var(--radius-control);
    border: 1px solid #d7d7d7;
    font-size: var(--font-size-lg);
    color: #464646;
    padding: 0.58rem 2rem 0.58rem 0.7rem;
}

.greeting[b-xbxg7ovso8] {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-xl);
    color: #4f4f4f;
}

.intro-copy[b-xbxg7ovso8] {
    margin: 0 0 var(--space-lg);
    line-height: var(--line-height-relaxed);
    max-width: 58ch;
    color: #4f4f4f;
}

.agreement-sections[b-xbxg7ovso8] {
    border-top: 1px solid #ececec;
    margin-bottom: var(--space-md);
}

.agreement-section[b-xbxg7ovso8] {
    border-bottom: 1px solid #ececec;
}

.agreement-section > summary.agreement-row[b-xbxg7ovso8] {
    width: 100%;
    background: #fff;
    border: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    text-align: left;
    font-weight: 600;
    color: #1f1f1f;
    cursor: pointer;
}

.agreement-section > summary.agreement-row[b-xbxg7ovso8]::-webkit-details-marker {
    display: none;
}

.agreement-section > summary.agreement-row[b-xbxg7ovso8]::marker {
    content: "";
    display: none;
}

.agreement-section[open] .row-chevron[b-xbxg7ovso8] {
    transform: rotate(180deg);
}

.row-chevron[b-xbxg7ovso8] {
    font-size: var(--font-size-xl);
    color: #333;
    transition: transform 160ms ease;
}

.agreement-section-panel[b-xbxg7ovso8] {
    padding: 0 0 var(--space-md);
    color: #595959;
    line-height: var(--line-height-relaxed);
}

.agreement-section-panel p[b-xbxg7ovso8] {
    margin: 0 0 var(--space-sm);
}

.agreement-section-panel p:last-child[b-xbxg7ovso8] {
    margin-bottom: 0;
}

.terms-copy p[b-xbxg7ovso8] {
    margin: 0 0 var(--space-xs);
    line-height: var(--line-height-relaxed);
    color: #595959;
}

.terms-copy p:last-child[b-xbxg7ovso8] {
    margin-bottom: 0;
}

.credit-facility-heading[b-xbxg7ovso8] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: #2f2f2f;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid #ececec;
}

.account-details[b-xbxg7ovso8] {
    margin: 0;
    padding: var(--space-md) 0;
    border-bottom: 1px solid #ececec;
}

.account-details div[b-xbxg7ovso8] {
    display: grid;
    grid-template-columns: 1.05fr 1.35fr;
    column-gap: var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.account-details div:last-child[b-xbxg7ovso8] {
    margin-bottom: 0;
}

.account-details dt[b-xbxg7ovso8],
.account-details dd[b-xbxg7ovso8] {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
}

.account-details dt[b-xbxg7ovso8] {
    color: #252525;
}

.account-details dd[b-xbxg7ovso8] {
    color: #666;
}

.credit-summary[b-xbxg7ovso8] {
    margin: 0;
    padding: var(--space-md) 0;
    border-bottom: 1px solid #ececec;
}

.credit-summary div[b-xbxg7ovso8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.credit-summary div:last-child[b-xbxg7ovso8] {
    margin-bottom: 0;
}

.credit-summary dt[b-xbxg7ovso8] {
    margin: 0;
    font-size: var(--font-size-lg);
    color: #2d2d2d;
}

.credit-summary dt small[b-xbxg7ovso8] {
    display: block;
    color: #8f8f8f;
    font-size: var(--font-size-2xs);
    margin-top: 0.1rem;
}

.credit-summary dd[b-xbxg7ovso8] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #1f1f1f;
    white-space: nowrap;
}

.credit-summary dd sup[b-xbxg7ovso8] {
    font-size: 0.56em;
    vertical-align: super;
}

.request-otp-button[b-xbxg7ovso8] {
    width: 100%;
    border-radius: var(--radius-control);
    border: 1px solid var(--button-background);
    background: var(--button-background);
    color: var(--button-text);
    font-size: var(--font-size-action);
    letter-spacing: 0.09em;
    font-weight: 700;
    text-transform: uppercase;
    padding: var(--space-md) var(--space-sm);
    margin-top: var(--space-lg);
}

.request-otp-mobile[b-xbxg7ovso8] {
    display: none;
}

.request-otp-desktop[b-xbxg7ovso8] {
    display: block;
}

/* Processing modal — same pattern as IdCheck */
.processing-modal.htmx-indicator[b-xbxg7ovso8] {
    display: none;
}

.processing-modal.htmx-request[b-xbxg7ovso8],
.htmx-request .processing-modal[b-xbxg7ovso8] {
    display: flex;
}

.processing-modal[b-xbxg7ovso8] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.86);
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.processing-modal-content[b-xbxg7ovso8] {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    min-width: min(92vw, 26rem);
}

.processing-spinner[b-xbxg7ovso8] {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto var(--space-sm);
    border: 0.25rem solid #d0d0d0;
    border-top-color: #000000;
    border-radius: var(--radius-circle);
    animation: processing-spin-b-xbxg7ovso8 0.8s linear infinite;
}

.processing-modal-content p[b-xbxg7ovso8] {
    margin: 0;
    color: #1f1f1f;
    font-size: var(--font-size-xl);
}

.otp-form-modal[b-xbxg7ovso8] {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: flex-end;
    background: rgb(0 0 0 / 38%);
    z-index: 1000;
}

.otp-form-modal.is-open[b-xbxg7ovso8] {
    display: flex;
}

.otp-form-modal-content[b-xbxg7ovso8] {
    width: min(430px, 100%);
    min-height: 100vh;
    background: #fff;
    box-shadow: -8px 0 26px rgb(0 0 0 / 14%);
    overflow-y: auto;
    animation: slide-in-right-b-xbxg7ovso8 220ms ease-out;
}

.otp-close-button[b-xbxg7ovso8] {
    border: 0;
    background: transparent;
    color: #646464;
    font-size: var(--font-size-2xl);
    margin: var(--space-sm) var(--space-md) 0 auto;
    display: block;
    padding: 0.2rem;
    cursor: pointer;
}

.otp-form-modal-content form[b-xbxg7ovso8] {
    display: flex;
    flex-direction: column;
    padding: 2rem 2.3rem 1.8rem;
}

.otp-form-heading[b-xbxg7ovso8] {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-5xl);
    line-height: var(--line-height-tight);
    font-weight: 500;
    color: #1f1f1f;
}

.otp-field-block[b-xbxg7ovso8] {
    margin-bottom: var(--space-sm);
}

.otp-field-block label[b-xbxg7ovso8] {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: var(--font-size-lg);
    color: #525252;
}

.otp-actions[b-xbxg7ovso8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-bottom: var(--space-2xl);
}

.otp-resend-button[b-xbxg7ovso8],
.otp-submit-button[b-xbxg7ovso8] {
    border-radius: var(--radius-control);
    /* A step below --font-size-action, unlike every other button: these two share a narrow
       two-column grid, where a translated label ("Thumela kabusha i-OTP") already wraps. */
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.88rem 0.5rem;
}

.otp-resend-button[b-xbxg7ovso8] {
    border: 1px solid #efeff5;
    background: #efeff5;
    color: #bdbfc7;
}

.otp-submit-button[b-xbxg7ovso8] {
    border: 1px solid #23242b;
    background: #23242b;
    color: #fff;
}

.otp-submit-button:disabled[b-xbxg7ovso8] {
    border-color: #dadada;
    background: #dadada;
    color: #a6a6a6;
    cursor: not-allowed;
}

.otp-help-copy[b-xbxg7ovso8],
.otp-help-phone[b-xbxg7ovso8] {
    margin: 0;
    color: #4f4f4f;
    line-height: var(--line-height-body);
}

.otp-help-copy[b-xbxg7ovso8] {
    margin-bottom: var(--space-2xs);
}

.otp-help-phone[b-xbxg7ovso8] {
    font-size: var(--font-size-xl);
}

@keyframes slide-in-right-b-xbxg7ovso8 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes processing-spin-b-xbxg7ovso8 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 960px) {
    .pre-agreement-content[b-xbxg7ovso8] {
        width: 100%;
        padding: 0 var(--space-md);
    }

    .agreement-layout[b-xbxg7ovso8] {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .agreement-title[b-xbxg7ovso8] {
        font-size: var(--font-size-display);
        margin-bottom: var(--space-sm);
    }

    .agreement-side-column[b-xbxg7ovso8] {
        order: 1;
    }

    .agreement-main-column[b-xbxg7ovso8] {
        order: 2;
    }

    .credit-facility-heading[b-xbxg7ovso8] {
        padding-bottom: var(--space-sm);
    }

    .account-details[b-xbxg7ovso8],
    .credit-summary[b-xbxg7ovso8] {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }

    .request-otp-desktop[b-xbxg7ovso8] {
        display: none;
    }

    .request-otp-mobile[b-xbxg7ovso8] {
        display: block;
        margin-top: var(--space-lg);
        margin-bottom: var(--space-sm);
    }

    .otp-form-modal[b-xbxg7ovso8] {
        justify-content: center;
        align-items: flex-start;
    }

    .otp-form-modal-content[b-xbxg7ovso8] {
        width: 100%;
        min-height: auto;
        margin-top: 6.5rem;
        border-radius: var(--radius-surface);
        box-shadow: 0 -1px 0 rgb(0 0 0 / 8%);
        animation: none;
    }

    .otp-close-button[b-xbxg7ovso8] {
        margin: 0.45rem 0.6rem 0 auto;
    }

    .otp-form-modal-content form[b-xbxg7ovso8] {
        padding: var(--space-md) var(--space-md) var(--space-lg);
    }

    .otp-form-heading[b-xbxg7ovso8] {
        font-size: var(--font-size-5xl);
        margin-bottom: var(--space-md);
        max-width: 14ch;
    }

    .otp-actions[b-xbxg7ovso8] {
        margin-bottom: var(--space-md);
    }
}
/* /Components/Shared/Pay3CategoryLinks.razor.rz.scp.css */
.category-links[b-391a5fy5lx] {
    width: var(--pay3-measure);
    margin: var(--space-3xl) auto 0;
    text-align: center;
}

.category-links-heading[b-391a5fy5lx] {
    margin: 0 0 var(--space-xl);
    text-transform: uppercase;
    font-size: var(--font-size-display);
    line-height: var(--line-height-snug);
    color: var(--heading-color);
}

.category-grid[b-391a5fy5lx] {
    display: grid;
    /* One per row on a phone, the brand's full set across on a desktop frame: the artboards draw
       four landscape tiles for Truworths and three for Identity, each one label deep. */
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .category-grid[b-391a5fy5lx] {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}

@media (max-width: 899px) {
    .category-links[b-391a5fy5lx] {
        width: 100%;
        padding-inline: var(--pay3-inset);
    }
}

.category-tile[b-391a5fy5lx] {
    /* See the benefits list: the marker has to be cleared on the item, not only the list. */
    list-style: none;
}

.category-tile a[b-391a5fy5lx] {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.category-tile img[b-391a5fy5lx] {
    display: block;
    width: 100%;
    /* Landscape, as drawn — 345x186 on the 1920 artboard. Fixed so a tile holds its place before
       the CDN image arrives and the row does not reflow around it. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--pay3-panel, var(--hero-background));
}

/* Centred across the tile rather than sitting at its foot, which is where the artboards put it. */
.category-label[b-391a5fy5lx] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 66%;
    padding: var(--space-sm) var(--space-md);
    background: var(--app-background);
    color: var(--heading-color);
    /* Square, not the pill --radius-button gives Pay3 buttons: the shop tiles on both brands'
       artboards sit under plain rectangular labels. */
    border-radius: var(--radius-surface);
    text-transform: uppercase;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.category-tile a:hover .category-label[b-391a5fy5lx],
.category-tile a:focus-visible .category-label[b-391a5fy5lx] {
    background: var(--button-background);
    color: var(--button-text);
}
/* /Components/Shared/Pay3RetainedBenefits.razor.rz.scp.css */
/* The lead sits on the page ground above the band on both brands' artboards, not inside it. */
.retained-benefits-lead[b-2910ih4f7y] {
    margin: 0 auto var(--space-xl);
    max-width: 44rem;
    text-align: center;
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
    color: var(--heading-color);
}

.retained-benefits[b-2910ih4f7y] {
    width: var(--pay3-measure);
    margin: 0 auto var(--space-3xl);
    padding: var(--space-3xl) var(--space-2xl);
    background-color: var(--pay3-band, var(--hero-background));
    background-image: var(--pay3-band-image, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-surface);
}

@media (max-width: 899px) {
    .retained-benefits[b-2910ih4f7y] {
        width: calc(100% - 2 * var(--pay3-inset));
        padding: var(--space-2xl) var(--space-lg);
    }
}

.retained-benefits-grid[b-2910ih4f7y] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

@media (min-width: 900px) {
    .retained-benefits-grid[b-2910ih4f7y] {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
}

.retained-benefit[b-2910ih4f7y] {
    /* Pico gives <article> a card background and border; the artboards sit these blocks straight on
       the band. */
    background: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

/* One rule between the pair, turning with the layout: down the middle when they sit side by side,
   across when they stack. Drawn as an alpha because the band is blue on one brand and grey on the
   other. */
.retained-benefit + .retained-benefit[b-2910ih4f7y] {
    padding-top: var(--space-2xl);
    border-top: 1px solid rgb(0 0 0 / 0.18);
}

@media (min-width: 900px) {
    .retained-benefit[b-2910ih4f7y] {
        padding-inline: var(--space-2xl);
    }

    .retained-benefit + .retained-benefit[b-2910ih4f7y] {
        padding-top: 0;
        border-top: none;
        border-left: 1px solid rgb(0 0 0 / 0.18);
    }
}

/* The tick sits above the title on the artboards, not beside it. */
.retained-benefit-title[b-2910ih4f7y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-4xl);
    font-weight: 400;
    line-height: var(--line-height-snug);
    color: var(--heading-color);
}

/* 51px at both widths on both brands (Group 17552 on the artboards). The disc is part of the image,
   in the brand's colour. */
.retained-benefit-tick[b-2910ih4f7y] {
    display: block;
    width: 3.1875rem;
    height: 3.1875rem;
}

.retained-benefit-body[b-2910ih4f7y] {
    margin: 0;
    max-width: 34rem;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--heading-color);
}
/* /Components/Shared/Pay3Stepper.razor.rz.scp.css */
/* Pico lays <nav> out as flex and pads <nav li>, which collapses a grid of empty bars to its
   content width. Both are overridden here rather than swapping the list for divs, so the steps keep
   their list semantics for a screen reader.

   Width, inset and the space above and below are the page layout's, not the component's — every
   journey layout places this as a grid row, so it holds no measure of its own. */
.pay3-stepper[b-uq3rkhiecw] {
    display: block;
}

.pay3-stepper ol[b-uq3rkhiecw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 40px between 450px segments on the 1920 artboard. */
    gap: var(--space-3xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The mobile frames draw the same three bars far tighter: 106px segments with 11px between them
   across a 340 track, not the desktop gap scaled down. */
@media (max-width: 899px) {
    .pay3-stepper ol[b-uq3rkhiecw] {
        gap: 0.6875rem;
    }
}

.pay3-step[b-uq3rkhiecw] {
    display: block;
    /* The artboards draw the reached bar a pixel heavier than the ones ahead of it. */
    height: 5px;
    margin: 0;
    padding: 0;
    background: var(--pay3-rule, var(--hero-background));
}

.pay3-step-reached[b-uq3rkhiecw] {
    height: 6px;
    background: var(--button-background);
}

.visually-hidden[b-uq3rkhiecw] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Components/Shared/Pay3TerminalPage.razor.rz.scp.css */
.terminal-page[b-7iu2oy3c30] {
    width: var(--pay3-measure);
    margin: 0 auto;
    padding: var(--space-2xl) var(--pay3-inset) 0;
    text-align: center;
}

@media (max-width: 899px) {
    .terminal-page[b-7iu2oy3c30] {
        width: 100%;
    }
}

.terminal-heading[b-7iu2oy3c30] {
    margin: 0 0 var(--space-lg);
    /* The artboards set every terminal heading in caps; the words themselves stay as the funnel
       writes them, so the e2e copy assertions still read what they expect out of the DOM. */
    text-transform: uppercase;
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
    color: var(--heading-color);
}

.terminal-lead[b-7iu2oy3c30] {
    /* Bounded by text length rather than the column, so a short line still reads as one block. */
    max-width: 44rem;
    margin: 0 auto var(--space-lg);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-relaxed);
    color: var(--muted-text);
}
/* /Components/Shared/TextField.razor.rz.scp.css */
.textfield[b-vzwshil3s9] {
    display: block;
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
    border-radius: var(--radius-control);
    border: var(--pico-border-width, 1px) solid var(--pico-form-element-border-color, #bbb);
    background: var(--pico-form-element-background-color, #fff);
    color: var(--pico-form-element-color, #2f2f2f);
    font: inherit;
    font-size: var(--font-size-lg);
    padding: 0.4rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textfield:focus[b-vzwshil3s9] {
    outline: none;
    border-color: var(--pico-primary, #333);
    box-shadow: 0 0 0 2px rgb(0 0 0 / 8%);
}

.textfield[type="number"][b-vzwshil3s9]::-webkit-inner-spin-button,
.textfield[type="number"][b-vzwshil3s9]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.textfield[type="number"][b-vzwshil3s9] {
    -moz-appearance: textfield;
}