main > .container {
    padding: 70px 15px 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.not-set {
    color: var(--bs-danger);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--bs-body-color);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--bs-body-color);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--bs-secondary-color);
}

.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 3px solid var(--bs-danger-border-subtle);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}

/* footer logo: light logo by default (light bg-body-tertiary), dark logo for dark theme */
.footer-logo-dark { display: none; }

[data-bs-theme="dark"] .footer-logo-light { display: none; }
[data-bs-theme="dark"] .footer-logo-dark  { display: inline-block; }

/* login inputs: seamless icon inside input (Volt style) */
.login-split-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-split-card .input-group .input-group-text {
    background: transparent;
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-card .input-group .form-control {
    border: 0;
    background: transparent;
}

.login-split-card .input-group .form-control:focus {
    box-shadow: none;
}

.login-split-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for login split card (browsers with :has()) */
@supports selector(.input-group:has(.is-invalid)) {
    .login-split-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .login-split-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for login split card (browsers without :has()) */
@supports not selector(.input-group:has(.is-invalid)) {
    .login-split-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .login-split-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* full-page split login using logo colors */
.login-page-body {
    min-height: 100vh;
    overflow-x: hidden;
}

/* shared split card used by other auth forms (register, enroll, contact...) */
.login-split-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
    background-color: var(--bs-gray-100);
    width: 100%;
    max-width: 960px;
}

.login-split-card-wide {
    max-width: 960px;
}

[data-bs-theme="dark"] .login-split-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 24px rgba(0, 0, 0, .4);
}

.login-page-main {
    min-height: 100vh;
}

.login-split-row {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 768px) {
    .login-split-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

/* brand panel: full-height left half */
.login-brand-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 85%, rgba(223, 140, 11, .35) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(35, 141, 98, .45) 0%, transparent 45%),
        radial-gradient(circle at 80% 85%, rgba(35, 141, 98, .2) 0%, transparent 40%),
        linear-gradient(135deg, #023668 0%, #02447d 45%, #238D62 130%);
    padding: 3rem 1.5rem;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("/all-schools/web/images/all-schools-logo.png");
    background-size: 620px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .08;
    filter: blur(2px);
}

.login-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.25rem;
    padding: 3rem 2.5rem;
    max-width: 520px;
}

.login-brand-logo {
    width: 260px;
    height: 260px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    border: 3px solid rgba(255, 255, 255, .3);
}

.login-brand-copy {
    color: #fff;
}

.login-brand-title {
    font-size: 2rem;
    line-height: 1.25;
}

.login-brand-text {
    font-size: .95rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.login-brand-btn {
    border-radius: 2rem;
    background: #DF8C0B;
    border: none;
    font-weight: 600;
    color: #fff;
    padding: .6rem 1.6rem;
    transition: opacity .2s, transform .1s;
}

.login-brand-btn:hover {
    color: #fff;
    opacity: .92;
    transform: translateY(-1px);
}

/* form panel: full-height right half */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--bs-body-bg);
    background-image: radial-gradient(circle at 100% 0%, rgba(35, 141, 98, .06), transparent 40%);
}

.login-form-inner {
    width: 100%;
    max-width: 440px;
}

.login-form-inner-wide {
    max-width: 620px;
}

.login-form-head .login-mobile-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(2, 54, 104, .25);
    border: 2px solid rgba(255, 255, 255, .6);
}

.login-form-head h1 {
    color: #023668;
}

.login-form-inner .form-label {
    color: #0066b3;
}

.login-form-inner .input-group-text {
    color: #0066b3;
}

.login-btn {
    background: linear-gradient(135deg, #023668, #02447d);
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.login-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

[data-bs-theme="dark"] .login-form-panel {
    background: var(--bs-body-bg);
    background-image: radial-gradient(circle at 100% 0%, rgba(35, 141, 98, .08), transparent 40%);
}

[data-bs-theme="dark"] .login-mobile-logo {
    filter: invert(1);
}

/* contact form textarea height */
.site-contact textarea.form-control {
    height: 140px;
}

/* captcha: blend with card background */
.site-contact img[src*="captcha"] {
    border-radius: var(--bs-border-radius);
    mix-blend-mode: multiply;
}

/* dark mode: invert captcha for visibility on dark background */
[data-bs-theme="dark"] .site-contact img[src*="captcha"] {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);
}

/* centered page layout */
.site-login,
.site-contact,
.site-index,
.site-error,
.site-about,
.site-contact-success {
    flex: 1;
}

/* allow the school-profile/about main area to scroll when content overflows */
.scroll-area {
    overflow-y: auto;
    max-height: 100%;
}

.site-error .site-error-content,
.site-about .site-about-content,
.site-contact-success .site-contact-success-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 50%;
    }
}

/* =========================================================
   Brand tables, search & pagination (main #023668, secondary #238D62)
   ========================================================= */

/* table headers: navy gradient + white text */
.table thead th,
.grid-view .table thead th {
    background: linear-gradient(135deg, #023668, #02447d) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border-bottom: none;
    border-color: rgba(255, 255, 255, .25);
    vertical-align: middle;
}

.table thead th a,
.table thead a.asc:after,
.table thead a.desc:after {
    color: #fff;
}

/* subtle navy striping + teal hover */
.table-striped {
    --bs-table-striped-bg: rgba(2, 54, 104, .045);
}
.table-hover {
    --bs-table-hover-bg: rgba(35, 141, 98, .10);
}
.table > :not(caption) > * > * {
    vertical-align: middle;
}

/* dashboard list tables inherit the same header treatment */
.dashboard-school .table thead th,
.dashboard-developer .table thead th,
.dashboard-super-admin .table thead th,
.dashboard-student .table thead th {
    background: linear-gradient(135deg, #023668, #02447d) !important;
    color: #fff !important;
    font-weight: 600;
}

/* brand outline buttons (action buttons appear on nearly every table) */
.btn-outline-primary {
    color: #023668;
    border-color: #023668;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: #023668;
    border-color: #238D62;
    color: #fff;
}
.btn-outline-info {
    color: #238D62;
    border-color: #238D62;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #238D62;
    border-color: #023668;
    color: #fff;
}
.btn-outline-success {
    color: #1a7a55;
    border-color: #238D62;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: #238D62;
    border-color: #023668;
    color: #fff;
}

/* search / filter inputs: brand focus ring */
.form-control:focus,
.form-select:focus,
.select2-search__field:focus {
    border-color: #238D62;
    box-shadow: 0 0 0 .25rem rgba(35, 141, 98, .15);
}

/* search modal: submit uses brand navy gradient, reset keeps outline */
.modal .btn-secondary {
    background: linear-gradient(135deg, #023668, #02447d);
    border: none;
}
.modal .btn-secondary:hover {
    background: linear-gradient(135deg, #02447d, #1a6f4c);
}
.modal .btn-outline-secondary:hover {
    background-color: #023668;
    border-color: #238D62;
    color: #fff;
}

/* select2 dropdowns inside the filter modal */
.select2-container--krajee-bs5 .select2-selection {
    border-color: var(--bs-border-color);
}
.select2-container--krajee-bs5 .select2-selection--single:focus,
.select2-container--krajee-bs5 .select2-selection--single.focused,
.select2-container--krajee-bs5 .select2-selection--single:focus .select2-selection__arrow {
    border-color: #238D62;
    box-shadow: 0 0 0 .25rem rgba(35, 141, 98, .15);
}

/* pagination: navy links, teal hover, navy active */
.pagination .page-link {
    color: #023668;
}
.pagination .page-link:hover {
    color: #023668;
    background: rgba(35, 141, 98, .10);
    border-color: #238D62;
}
.pagination .page-item.active .page-link {
    background: #023668;
    border-color: #023668;
}
.pagination .page-item.active .page-link:hover {
    background: #238D62;
    border-color: #238D62;
}

/* dashboard/card headers: teal accent underline + navy heading */
.card-header {
    border-bottom: 2px solid rgba(35, 141, 98, .55);
}
main h4.text-secondary,
.dashboard-school h4,
.dashboard-developer h4,
.dashboard-super-admin h4,
.dashboard-student h4 {
    color: #023668 !important;
}

/* push content below the fixed navbar so nothing hides under it */
header#header ~ main#main {
    padding-top: 4.5rem;
    min-height: calc(100vh - 220px);
}

@media (max-width: 991.98px) {
    /* navbar wraps to two rows (brand row + search/actions row) on smaller screens */
    header#header ~ main#main {
        padding-top: 9rem;
    }
}

/* hero banner */
.hero-banner {
    background: linear-gradient(135deg, #023668 0%, #02447d 45%, #238D62 130%);
    position: relative;
}

.hero-logo {
    height: 120px;
    opacity: .45;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 85%, rgba(223, 140, 11, .28) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(35, 141, 98, .28) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(2, 68, 125, .25) 0%, transparent 60%);
    pointer-events: none;
}

/* extension cards */
.extension-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.extension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.extension-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* dark mode: extension cards */
[data-bs-theme="dark"] .extension-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 2px 8px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .extension-card:hover {
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* =========================================================
   Payment page (main #023668, secondary #238D62)
   ========================================================= */

.payment-page {
    /*
     * Palette taken from web/images/all-schools-logo.png:
     *   navy     #023668   the wordmark and the shield
     *   mid blue #1270B2   the lighter blue in the mark
     *   green    #238D62   the leaf / tick in the mark
     * The amber in the logo is deliberately not used anywhere on the payment
     * pages: waiting states are shown in the mid blue instead.
     */
    --pay-main: #023668;
    --pay-main-soft: #0a3f78;
    --pay-blue: #1270B2;
    --pay-blue-ink: #0d4f80;
    --pay-second: #238D62;
    --pay-second-dark: #1a6f4c;
}

/* the same two blues, as a gradient, for the navy surfaces */
.payment-page {
    --pay-navy-fill: linear-gradient(135deg, #023668 0%, #0a3f78 55%, #1270B2 100%);
}

/* hero banner: navy gradient with a soft green glow, same language as .hero-banner */
.payment-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.6rem;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #023668 0%, #0a3f78 55%, #1270B2 140%);
    box-shadow: 0 12px 28px rgba(2, 54, 104, .18);
}

.payment-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 88% 10%, rgba(35, 141, 98, .45) 0%, transparent 45%);
}

.payment-hero-icon {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}

.payment-hero h1 {
    position: relative;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.payment-hero p {
    position: relative;
    margin: .15rem 0 0;
    font-size: .9rem;
    opacity: .82;
}

/* step chips on the right of the hero */
.payment-steps {
    position: relative;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.payment-steps span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .85);
}

.payment-steps span.active {
    background: #fff;
    color: #023668;
    border-color: #fff;
}

/* a step that is already behind the user */
.payment-steps span.done {
    background: rgba(35, 141, 98, .55);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

/* right hand stack of the hero: expiry chip above the steps */
.payment-hero-side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    margin-left: auto;
}

.payment-expiry {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}

.payment-expiry.expired {
    background: rgba(220, 53, 69, .35);
    border-color: rgba(255, 255, 255, .4);
}

/* cards */
.payment-card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(2, 54, 104, .10);
}

.payment-card > .card-header {
    background: #fff;
    color: #023668;
    font-weight: 700;
    padding: .9rem 1.25rem;
    border-bottom: 2px solid rgba(35, 141, 98, .5);
}

.payment-card > .card-body {
    padding: 1.25rem;
}

/* form labels in the brand navy */
.payment-page .form-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #023668;
    margin-bottom: .35rem;
}

.payment-page .form-control,
.payment-page .form-select,
.payment-page .select2-container--krajee-bs5 .select2-selection--single {
    border-radius: .6rem;
}

.payment-page .form-control[readonly] {
    background: rgba(2, 54, 104, .04);
    font-weight: 600;
    color: #023668;
}

/* inline validation message (select2 cannot use native bubbles: the original
   select is hidden, and browsers refuse to focus an invisible control) */
.payment-hint {
    display: none;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: #8a1c1c;
    background: rgba(220, 53, 69, .09);
    border: 1px solid rgba(220, 53, 69, .35);
    border-radius: .6rem;
    padding: .6rem .8rem;
}

.payment-hint.show {
    display: flex;
}

/* amount to pay: navy block, mirrors the brand table headers */
.payment-total {
    border-radius: .9rem;
    padding: 1rem 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, #023668, #0a3f78 70%, #1270B2);
}

.payment-total .payment-total-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    opacity: .8;
}

.payment-total .payment-total-amount {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
}

/* filled in by the script when a currency is picked */
.payment-total .payment-total-currency {
    font-size: .95rem;
    font-weight: 600;
    opacity: .85;
    margin-left: .35rem;
}

.payment-total .payment-total-hint {
    font-size: .76rem;
    opacity: .75;
}

/* order summary rows */
.payment-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

.payment-summary-row:last-child {
    border-bottom: 0;
}

.payment-summary-row .payment-summary-key {
    color: var(--bs-secondary-color);
    font-size: .85rem;
    white-space: nowrap;
}

.payment-summary-row .payment-summary-value {
    font-weight: 600;
    color: #023668;
    text-align: right;
}

/* small level tag, e.g. LESSON or COURSE */
.payment-tag {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .12rem .45rem;
    border-radius: .35rem;
    color: #1a6f4c;
    background: rgba(35, 141, 98, .14);
    border: 1px solid rgba(35, 141, 98, .35);
    vertical-align: middle;
}

.payment-summary-value .payment-summary-sub {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

/* primary action: the two logo blues, turning to the logo green on hover */
.payment-submit {
    width: 100%;
    font-weight: 600;
    border: 0;
    border-radius: .7rem;
    padding: .8rem 1rem;
    color: #fff;
    background: linear-gradient(135deg, #023668 0%, #0a3f78 55%, #1270B2 100%);
    box-shadow: 0 8px 18px rgba(2, 54, 104, .22);
}

.payment-submit:hover,
.payment-submit:focus,
.payment-submit:active {
    color: #fff;
    background: linear-gradient(135deg, #238D62 0%, #1a6f4c 100%);
    box-shadow: 0 8px 18px rgba(35, 141, 98, .28);
}

.payment-submit:disabled {
    color: #fff;
    background: #b6bfc9;
    opacity: 1;
    cursor: not-allowed;
}

.payment-back {
    color: #023668;
    font-weight: 600;
    text-decoration: none;
}

.payment-back:hover {
    color: #238D62;
}

/* secondary action (Back): the mid blue of the logo, navy when pressed */
.payment-outline-btn {
    width: 100%;
    font-weight: 600;
    border: 1px solid #1270B2;
    border-radius: .7rem;
    padding: .8rem 1rem;
    color: #0d4f80;
    background: rgba(18, 112, 178, .06);
}

.payment-outline-btn:hover,
.payment-outline-btn:focus {
    color: #fff;
    background: linear-gradient(135deg, #023668 0%, #1270B2 100%);
    border-color: #023668;
}

/* trust note */
.payment-trust {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .82rem;
    color: #4a5560;
    background: rgba(35, 141, 98, .08);
    border: 1px solid rgba(35, 141, 98, .28);
    border-radius: .7rem;
    padding: .7rem .85rem;
}

.payment-trust i {
    color: #238D62;
    margin-top: .1rem;
}

/* agreement checkbox: the whole block is the label, so it is clickable */
.payment-agree {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .88rem;
    cursor: pointer;
    color: #4a5560;
    background: rgba(35, 141, 98, .08);
    border: 1px solid rgba(35, 141, 98, .28);
    border-radius: .7rem;
    padding: .8rem .9rem;
}

.payment-agree:hover {
    background: rgba(35, 141, 98, .14);
    border-color: rgba(35, 141, 98, .5);
}

.payment-agree .form-check-input {
    flex: 0 0 auto;
    margin-top: .25rem;
    cursor: pointer;
}

.payment-agree strong {
    color: #023668;
}

/* processing overlay, shared by the prepare and confirm steps */
.payment-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 54, 104, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.payment-overlay-box {
    text-align: center;
    color: #023668;
    background: #fff;
    border-radius: 1rem;
    padding: 1.6rem 2.2rem;
    max-width: 22rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.payment-overlay-box .spinner-border {
    width: 2.6rem;
    height: 2.6rem;
    color: #238D62;
}

.payment-overlay-box .payment-overlay-title {
    font-weight: 700;
    margin: .9rem 0 .2rem;
}

.payment-overlay-box .payment-overlay-hint {
    font-size: .82rem;
    color: #6c757d;
    margin: 0;
}

/* waiting step: the payer approves the request on their phone */
.payment-wait-card .card-body {
    padding: 2rem 1.5rem;
}

.payment-wait-graphic {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

.payment-phone {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    font-size: 1.9rem;
    color: #fff;
    border-radius: 1.4rem;
    background: linear-gradient(140deg, #023668 0%, #0a3f78 55%, #1270B2 140%);
    box-shadow: 0 14px 30px rgba(2, 54, 104, .25);
}

/* the ring that keeps moving while we wait for the payer */
.payment-phone-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 1.6rem;
    border: 2px solid rgba(35, 141, 98, .55);
    animation: payment-pulse 1.8s ease-out infinite;
}

@keyframes payment-pulse {
    0% {
        opacity: .8;
        transform: scale(.92);
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

.payment-wait-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #023668;
    margin-bottom: .4rem;
}

.payment-wait-text {
    color: #495057;
    max-width: 34rem;
    margin: 0 auto .9rem;
}

.payment-wait-text strong {
    color: #023668;
}

.payment-wait-timer {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0d4f80;
    background: rgba(18, 112, 178, .08);
    border: 1px solid rgba(18, 112, 178, .28);
    border-radius: 999px;
    padding: .3rem .8rem;
    margin-bottom: .9rem;
}

.payment-status-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .86rem;
    color: #6c757d;
    min-height: 1.6rem;
}

.payment-status-line .spinner-border {
    width: 1rem;
    height: 1rem;
    color: #238D62;
}

/* the waiting window is over: the spinner stops, the payer decides what next */
.payment-status-line.is-idle {
    color: #0d4f80;
}

.payment-status-line.is-idle .spinner-border {
    display: none;
}

.payment-status-line.is-idle::before {
    content: '\f048';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #1270B2;
}

.payment-wait-note {
    font-size: .8rem;
    color: #6c757d;
    margin: 1rem 0 0;
}

.payment-wait-actions {
    margin-top: 1rem;
}

.payment-result-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    font-size: 2.2rem;
    border-radius: 50%;
}

.payment-result-icon.success {
    color: #fff;
    background: linear-gradient(140deg, #238D62 0%, #1a6f4c 100%);
    box-shadow: 0 12px 26px rgba(35, 141, 98, .3);
}

.payment-result-icon.failed {
    color: #fff;
    background: linear-gradient(140deg, #b4232b 0%, #8d1a21 100%);
    box-shadow: 0 12px 26px rgba(180, 35, 43, .25);
}

.payment-receipt {
    text-align: left;
    max-width: 26rem;
    margin: 1.2rem auto 0;
    padding: .4rem 1rem;
    border: 1px dashed rgba(2, 54, 104, .28);
    border-radius: .8rem;
    background: rgba(2, 54, 104, .03);
}

.payment-wait-footer {
    background: transparent;
}

.payment-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

/* waiting: the mid blue from the logo (the logo's amber is not used) */
.payment-status-pill.is-waiting {
    color: #0d4f80;
    background: rgba(18, 112, 178, .12);
    border-color: rgba(18, 112, 178, .45);
}

.payment-status-pill.is-success {
    color: #1a6f4c;
    background: rgba(35, 141, 98, .16);
    border-color: rgba(35, 141, 98, .5);
}

.payment-status-pill.is-failed {
    color: #8d1a21;
    background: rgba(180, 35, 43, .14);
    border-color: rgba(180, 35, 43, .45);
}

/* dark mode: white cards and navy text are unreadable on a dark canvas */
[data-bs-theme="dark"] .payment-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 6px 22px rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .payment-card > .card-header {
    background-color: var(--bs-body-bg);
    border-bottom-color: rgba(35, 141, 98, .6);
}

[data-bs-theme="dark"] .payment-card > .card-header,
[data-bs-theme="dark"] .payment-page .form-label,
[data-bs-theme="dark"] .payment-summary-row .payment-summary-value,
[data-bs-theme="dark"] .payment-agree strong,
[data-bs-theme="dark"] .payment-back {
    color: #8ecbf7;
}

[data-bs-theme="dark"] .payment-page .form-control[readonly] {
    background: rgba(142, 203, 247, .10);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .payment-total {
    background: linear-gradient(135deg, #01203d, #023668);
}

[data-bs-theme="dark"] .payment-trust,
[data-bs-theme="dark"] .payment-agree {
    color: var(--bs-secondary-color);
    background: rgba(35, 141, 98, .14);
    border-color: rgba(35, 141, 98, .45);
}

[data-bs-theme="dark"] .payment-tag {
    color: #6fd0a4;
    background: rgba(35, 141, 98, .18);
    border-color: rgba(35, 141, 98, .45);
}

[data-bs-theme="dark"] .payment-outline-btn {
    color: #8ecbf7;
    background: transparent;
    border-color: #8ecbf7;
}

[data-bs-theme="dark"] .payment-outline-btn:hover,
[data-bs-theme="dark"] .payment-outline-btn:focus {
    background: linear-gradient(135deg, #023668 0%, #1270B2 100%);
    border-color: #1270B2;
}

[data-bs-theme="dark"] .payment-overlay {
    background: rgba(0, 0, 0, .65);
}

[data-bs-theme="dark"] .payment-overlay-box {
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 24px 60px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .payment-wait-title,
[data-bs-theme="dark"] .payment-wait-text strong,
[data-bs-theme="dark"] .payment-receipt .payment-summary-value {
    color: #8ecbf7;
}

[data-bs-theme="dark"] .payment-wait-text,
[data-bs-theme="dark"] .payment-status-line,
[data-bs-theme="dark"] .payment-wait-note {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .payment-wait-timer {
    color: #8ecbf7;
    background: rgba(142, 203, 247, .12);
    border-color: rgba(142, 203, 247, .35);
}

[data-bs-theme="dark"] .payment-receipt {
    border-color: rgba(142, 203, 247, .35);
    background: rgba(142, 203, 247, .06);
}

[data-bs-theme="dark"] .payment-status-pill.is-waiting {
    color: #8ecbf7;
    background: rgba(18, 112, 178, .24);
    border-color: rgba(18, 112, 178, .6);
}

[data-bs-theme="dark"] .payment-status-pill.is-success {
    color: #6fd0a4;
}

[data-bs-theme="dark"] .payment-status-pill.is-failed {
    color: #ff9ba3;
}

/*
 * Icons carry their own brand colour.
 *
 * Font Awesome's free build is a single-colour font, so an icon simply inherits
 * whatever colour the text around it has. That made every icon on the payment
 * pages read as plain body text. These rules give each icon its own colour from
 * the logo palette (navy #023668, mid blue #1270B2, green #238D62) so the icons
 * read as brand marks in their own right, while the wording stays navy.
 */

/* card headers: the label is navy, the icon is the mid blue */
.payment-card > .card-header i {
    color: #1270B2;
}

/* the step chips on the navy hero */
.payment-steps span i {
    color: rgba(255, 255, 255, .75);
}

.payment-steps span.active i {
    color: #1270B2;
}

.payment-steps span.done i {
    color: #bfe8d4;
}

/* the expiry chip */
.payment-expiry i {
    color: rgba(255, 255, 255, .9);
}

.payment-expiry.expired i {
    color: #ffb3b8;
}

/* the trust note keeps its green shield, and the ticks in the waiting notes
   pick up the same green */
.payment-trust i,
.payment-wait-note i {
    color: #238D62;
}

/* the countdown clock is a shade brighter than its own label */
.payment-wait-timer i {
    color: #1270B2;
}

/* buttons: the icon is the brand accent, the label keeps the button's colour */
.payment-back i,
.payment-outline-btn i {
    color: #238D62;
}

/* the spinner that sits on top of the form while it submits */
.payment-overlay-box i {
    color: #1270B2;
}

/* dark mode: the same accents, lightened so they stay readable on a dark card */
[data-bs-theme="dark"] .payment-card > .card-header i,
[data-bs-theme="dark"] .payment-wait-timer i,
[data-bs-theme="dark"] .payment-overlay-box i {
    color: #8ecbf7;
}

[data-bs-theme="dark"] .payment-back i,
[data-bs-theme="dark"] .payment-outline-btn i,
[data-bs-theme="dark"] .payment-trust i,
[data-bs-theme="dark"] .payment-wait-note i {
    color: #6fd0a4;
}

@media (prefers-reduced-motion: reduce) {

    .payment-phone-pulse {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .payment-steps {
        margin-left: 0;
        width: 100%;
    }

    .payment-hero-side {
        margin-left: 0;
        align-items: flex-start;
    }
}

/* =========================================================
   My Payments (student's own transactions)
   Brand navy #023668, teal #238D62. No red: a reversed or
   unprocessed payment is a warning, not an error the
   student caused.
   ========================================================= */

.my-payment-stats {
    margin-bottom: 1.25rem;
}

.my-payment-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    height: 100%;
    padding: .85rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(2, 54, 104, .12);
    border-left: 4px solid #238D62;
    border-radius: .5rem;
}

.my-payment-stat-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
}

.my-payment-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #023668;
}

.my-payment-stat-value-sm {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.my-payment-stat-note {
    font-size: .75rem;
    color: #6c757d;
}

.my-payment-items {
    margin: 0;
}

.my-payment-item {
    display: flex;
    flex-direction: column;
    padding: .55rem 0;
    border-bottom: 1px dashed rgba(2, 54, 104, .14);
}

.my-payment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.my-payment-item-label {
    font-weight: 600;
    color: #023668;
}

.my-payment-item-meta {
    font-size: .82rem;
    color: #6c757d;
}

.my-payment-receipt dt {
    font-weight: 600;
    color: #023668;
    font-size: .9rem;
}

.my-payment-reversed {
    padding: .5rem .7rem;
    margin-bottom: .85rem;
    font-size: .9rem;
    color: #7a5200;
    background: #fff4d6;
    border-left: 4px solid #d99a00;
    border-radius: .35rem;
}

/*
   GL Processing tab on the wallet.

   Four small figures sitting above the ledger: what the account holds now, and
   what the recorded trail adds up to. Brand navy and teal, matching the rest of
   the page.
*/
.gl-mini-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    background: #f6f9fc;
    border: 1px solid #dde7f0;
    border-left: 3px solid #023668;
    border-radius: .4rem;
}

.gl-mini-label {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6b7c;
}

.gl-mini-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #023668;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .gl-mini-value {
        font-size: 1.05rem;
    }
}




/* form panel: full-height right half */
.privacy-policy-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--bs-body-bg);
    background-image: radial-gradient(circle at 100% 0%, rgba(35, 141, 98, .06), transparent 40%);

}

.privacy-policy-form-inner {
    width: 100%;
    /*max-width: 440px;*/
}

.privacy-policy-form-inner-wide {
    max-width: 620px;
}