/* fonts load from App.razor's <head> (one request, no @import chain) */


/* LIU Theme */
:root {
    --liu-blue: #69b3e7;
    --liu-blue-dark: #357ABD; /* darker text/icon tone */
    --liu-blue-light: #E8F4FB; /* soft pill background */
    --liu-navy: #08234e; /* banner */
    --liu-gold: #FFC72C;
    --liu-gray: #f3f5f7;
    --liu-dark-gray: #888888;
    --liu-medium-gray: #cecece;
    --liu-light-gray: #f3f5f7;
    --rz-primary: #69B3E7 !important;
    --rz-input-disabled-color: #616161 !important;
    --rz-button-hover-shadow: var(--rz-shadow-2);
}


html, body {
    font-family: Arial;
}

/* Public pages: Barlow for text and every form control (Radzen reads its font from
   --rz-text-font-family), and the banner's athletic caps for section headings. */
.page {
    --page-font: 'Barlow', 'Segoe UI', Arial, sans-serif;
    font-family: var(--page-font);
    --rz-text-font-family: var(--page-font);
}

    .page :is(input, textarea, select, button, .rz-label, .rz-dropdown-label, .rz-button-text, .rz-radiobutton-label, .rz-chkbox-label) {
        font-family: var(--page-font);
    }

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


.content {
    padding: 0 !important;
    display: flex;
    justify-content: center;
    width:100%;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    /*
       outline: 1px solid #26b050;
   */
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* Public pages: LIU blue washing down from the top into grey, and a big faint GSF logo
   fixed in the bottom-right corner behind everything. */
.page {
    background: linear-gradient(180deg, #cfe6f7 0, #e6f1fa 260px, #f3f4f6 620px) no-repeat, #f3f4f6;
    /* at least the whole window, so a short card (closed, thank-you) doesn't leave white below */
    min-height: 100vh;
    min-height: 100dvh;
}

    .page::before {
        content: "";
        position: fixed;
        right: -60px;
        bottom: -30px;
        width: 560px;
        height: 280px;
        background: url('img/brand/gsf-ink.png') center / contain no-repeat;
        opacity: 0.06;
        pointer-events: none;
    }

    .page main {
        position: relative;   /* above the logo */
        z-index: 1;
    }

/* ================================
   Page shell (your own markup)
   ================================ */

/* .content is a centred flex container; without an explicit width the page (and the
   form card inside it) shrinks to fit its content instead of filling the column. */
.reg-page,
.thankyou-page {
    width: 100%;
    min-width: 0;
}

.reg-page {
    min-height: 100vh;
    background: transparent;   /* .page paints the blue wash and logo */
    padding: 2.5rem 0 1.5rem;
}

.reg-shell {
    max-width: 1100px;
}

/* ================================
   Hero / banner (RadzenCard output)
   ================================ */

.reg-page  .reg-card.rz-card {
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    background-color: #ffffff;
    padding: 0; /* important: content handles its own padding */
    overflow: hidden; /* so the gradient + form share the same rounded corners */
    overflow: clip;   /* same, but without trapping the sticky button row inside the card */
}

/* The card is a frame that fits the screen: banner at the top, button row at the bottom, and
   only the form between them scrolls, with the same gap above and below the card. Short pages
   (the thank-you page) simply end sooner. On short laptop screens the banner, button row and
   page gaps slim down (further below) so the form still gets most of the height; below 680px
   tall even that leaves too little, so the page scrolls instead, with the button row stuck to
   the bottom of the screen. Phones keep the frame down to 600px. */
.reg-page,
.thankyou-page {
    --reg-outside: calc(6rem + 2px);   /* the page's top gap, plus room for the footer line */
}

@media (max-width: 576px) and (min-height: 600px), (min-width: 577px) and (min-height: 680px) {
    .reg-page .reg-card.rz-card,
    .thankyou-page .thankyou-card.rz-card {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--reg-outside));
        max-height: calc(100dvh - var(--reg-outside));   /* phones: the visible screen, not counting the address bar */
    }

    .reg-hero { flex: none; }

    .reg-form-wrapper,
    .thankyou-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;      /* reaching the end doesn't drag the page along */
        scroll-padding-bottom: 6rem;       /* Tab keeps the focused field above the button row */
        scrollbar-width: none;             /* no scrollbar: the card looks cleaner, and the form */
    }                                      /* visibly carries on behind the button row */

    .reg-form-wrapper::-webkit-scrollbar,
    .thankyou-body::-webkit-scrollbar { display: none; }   /* older Chrome / Safari */

    .reg-page { min-height: 0; }
    .thankyou-page { min-height: 0; }
}

.reg-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
    padding: 1.75rem 2.5rem;
    /* navy + white, gold accent */
    background: var(--liu-navy);
    border-bottom: 4px solid var(--liu-gold);
    color: #ffffff;
}



.reg-title {
    /* tall athletic caps, the closest free match to the lettering on LIU's own graphics */
    font-family: 'Saira Condensed', 'Arial Narrow', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 0.35rem;
    text-shadow: 0 1px 3px rgba(15, 53, 84, 0.45);
}

.reg-subtitle {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(15, 53, 84, 0.45);
}

    .reg-subtitle strong {
        color: var(--liu-gold);
    }

/* the Global Spirit Federation logo: white and gold, made for this blue */
.reg-hero-art {
    flex: 0 0 auto;
    width: 132px;
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(15, 53, 84, 0.35));
}

@media (max-width: 576px) {
    .reg-hero {
        padding: 1.25rem 1.25rem;
    }

    .reg-title {
        font-size: 1.8rem;
    }

    .reg-hero-art {
        width: 84px;
    }
}


.reg-form-wrapper {
    padding: 1.5rem 2rem 0;   /* the button row at the end carries the bottom padding */
    background-color: #ffffff;
}

/* ================================
   Main form card (RadzenCard)
   ================================ */

.reg-page  .reg-card.rz-card {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    padding: 0;
    background-color: #ffffff;
}

/* This is a class on RadzenTemplateForm */
.reg-page  .reg-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ================================
   Sections (your own markup)
   ================================ */

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-section-header {
    margin-bottom: 0.25rem;
}

    .form-section-header h2,
    .form-section-header h6 {
        font-family: 'Saira Condensed', 'Arial Narrow', sans-serif;
        font-size: 1.15rem;
        color: #5293b7;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 0.25rem;
    }

.section-helper-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* ================================
   Radzen fieldsets
   ================================ */

.reg-page  .form-fieldset.rz-fieldset {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 1.25rem 1.25rem 1.1rem;
    margin: 0;
    background-color: #ffffff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

/* legend rendered by RadzenFieldset */
.reg-page  .form-fieldset .rz-fieldset-legend {
    display: none; /* we use our own section headers */
}

/* ================================
   Layout helpers (your own markup)
   ================================ */


.form-row-item {
}



.form-row-span {
    grid-column: 1 / -1;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.form-di-content {
    gap: 1.25rem
}

.form-di-row {
    gap: 1.25rem;
}


    /* equal halves whatever is inside, so changing content (a hex code while dragging a color)
       can't push the neighbouring field around */
    .form-di-row .form-row-item {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

.form-row-item.or {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0px;
}

.form-section.submit .form-di-row {
    gap: 0rem !important;
    align-items: flex-start !important;
}






.form-di-row .or span {
    font-size: 0.8rem; /* slightly larger */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af; /* slate-400-ish */
    padding: 0.25rem 0.75rem; /* more breathing room */
    border-radius: 999px;
    /*background-color: #f3f4f6; */
    font-weight: 500; /* adds presence */
}



/* ================================
   Inputs / labels / radios (Radzen)
   ================================ */

.reg-page  .reg-form .rz-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.reg-page  .reg-form .rz-dropdown,
.reg-page  .reg-form .rz-numeric-input,
.reg-page  .reg-form .rz-textbox:not(.address) {
    width: 100% !important;
}

/* Required-field marker: <RadzenLabel class="required" /> */
.reg-page .reg-form .rz-label.required::after {
    content: " *";
    color: #c0392b;
    font-weight: 700;
}

.required-legend {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

/* "* Required" sits at the right end of the first section heading. The topbar takes no
   height of its own, and cancels the form's gap after it, so the form starts right after the
   stepper. */
.form-topbar {
    position: relative;
    height: 0;
    margin-bottom: -1.75rem;   /* the .reg-form gap */
}

    .form-topbar .required-legend {
        position: absolute;
        right: 0;
        top: 0.45rem;   /* level with the first heading */
    }

/* the first heading sits close under the stepper; later ones keep their space above */
.reg-form > .form-section:first-of-type .form-section-header h2 { margin-top: 0.25rem !important; }

    /* Testing only: the button that fills the form with sample data floats in the
       bottom-left corner, outside the form, so it never looks like part of it. */
    .reg-page .form-topbar .test-fill-btn.rz-button {
        position: fixed;
        left: 12px;
        bottom: 12px;
        z-index: 1400;
        height: 1.9rem;
        padding: 0 0.65rem;
        font-size: 0.78rem;
        font-weight: 600;
        border-radius: 3px;
        background: #ffffff;
        border: 1px dashed #94a3b8;
        color: #475569;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

        .reg-page .form-topbar .test-fill-btn.rz-button:hover { background: #f1f5f9; }

    /* same size as the asterisk on the field labels (0.9rem), so it reads as the same mark
       and not as a dot */
    .required-legend span {
        color: #c0392b;
        font-weight: 700;
        font-size: 0.9rem;
    }

@media (max-width: 640px) {
    .reg-form-wrapper {
        padding: 1rem 1rem 0;
    }
}

/* Slight spacing between label and control */
.reg-page  .form-row-item .rz-dropdown,
.reg-page  .form-row-item .rz-numeric-input,
.reg-page  .form-row-item .rz-textbox,
.reg-page  .form-stack .rz-dropdown,
.reg-page  .form-stack .rz-numeric-input,
.reg-page .form-stack .rz-textbox {
    margin-top: 0.15rem;
}

/* Radio button horizontal spacing */
.reg-page .reg-form .rz-radiobutton-list-horizontal .rz-radiobutton {
    margin-right: 1.2rem;
}

.reg-page .reg-form .rz-radiobutton-label {
    font-size: 0.88rem;
}

/* Checkbox + label alignment */
.reg-page .reg-form .rz-checkbox + .rz-label,
.reg-page .reg-form .rz-checkbox + label {
    margin-left: 0.4rem;
    font-size: 0.9rem;
}

/* Small muted text styles (used on RadzenLabel) */
.reg-page .text-muted {
    color: #6b7280 !important;
}

/* ================================
   Review & submit
   ================================ */
/*



/* Submit button */
.reg-page .reg-submit-btn.rz-button,
.thankyou-page .reg-submit-btn.rz-button {
    min-width: 150px;
    border-radius: 3px;
    font-weight: 600;
    background-color: #FFE896; /* soft gold */
    border-color: #FFE896;
    color: #816009; /* golden text, dark enough to read on the soft gold (4.8:1) */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    align-self: end;
    margin-top: 1rem;
}

    /* Hover state */
    .reg-page .reg-submit-btn.rz-button:hover,
    .thankyou-page .reg-submit-btn.rz-button:hover {
        background-color: #F4D97C; /* slightly darker gold */
        border-color: #F4D97C;
        color: #6b4f05; /* deeper, so it still reads on the darker hover gold */
    }

    /* Active / pressed state */
    .reg-page .reg-submit-btn.rz-button:active,
    .thankyou-page .reg-submit-btn.rz-button:active {
        background-color: #E8C967; /* warm, deeper gold */
        border-color: #E8C967;
        color: #5c4400;
    }




/* Radio button container tweak */
.reg-page  .rz-radio-btn {
    display: flex !important;
}



.field-helper-text {
    font-size: 0.75rem;
    color: #6b7280; /* slate-500 */
    margin-top: 0.25rem;
    margin-bottom: 0;
    margin-left: 0;   /* flush with the field's edge, like labels and error messages */
}

/*rz overrides*/

.reg-page  .rz-radio-button-list .rz-stack {
    margin-top: 0.5rem !important;
    margin-left: 0.25rem !important;
}





#dvCaptcha {
    align-self: end;
}

.rz-button-box{
    gap:0.5rem !important;
}




/* Payment in progress: frosts the card (banner, form and buttons) and blocks its clicks until
   the gateway answers, with the spinner and a line saying what's happening. Only the card, like
   the form screens' loader: the page around it stays as it was. On a phone the card is the
   whole screen anyway. */
.reg-page .reg-card.rz-card { position: relative; }

.reg-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;   /* above the step tracker and the "More below" hint */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.82);   /* same white as the form screens' loader */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: reg-fade-in 0.15s ease-out;
}

.reg-loading-card {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: center;   /* no box of its own: the spinner and two lines, like the form loader */
}

.reg-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid #e3f0fa;
    border-top-color: var(--liu-blue);
    animation: reg-spin 0.8s linear infinite;
}

@keyframes reg-spin {
    to { transform: rotate(360deg); }
}

@keyframes reg-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .reg-spinner { animation-duration: 2.4s; }
    .reg-loading-overlay { animation: none; }
}

.reg-loading-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}

.reg-loading-subtext {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.45;
    color: #6b7280;
}

/* Value display (read-only look) */

    /* Muted placeholder for "�" values */




/* Mobile: stack two-column rows. Fields inside a stacked row get the same gap as
   fields in separate rows (.form-di-content), so every field is evenly spaced. */
@media (max-width: 700px) {
    .form-di-row {
        flex-direction: column !important;
        gap: 1.25rem;
        align-items: stretch;
    }

    .or.form-row-item {
        display: none;
    }




    .reg-submit-btn{
        min-width: 0 !important;
    }
}






/* ================================
   Progress steps (CheckoutSteps.razor)
   ================================ */
/* Stays at the top of the form while it scrolls, under the banner, so you always see which
   step you're on. White, edge to edge across the card, so the form slides under it cleanly. */
.reg-steps {
    position: sticky;
    top: -1.5rem;                     /* the form's top padding: pins flush under the banner */
    z-index: 15;
    list-style: none;
    display: flex;
    gap: 0.35rem;
    margin: -1.5rem -2rem 1.25rem;   /* cancels the form's top padding, so it starts flush */
    padding: 1.1rem 2rem 0.6rem;
    background: #ffffff;
}

@media (max-width: 640px) {
    .reg-steps { top: -1rem; margin: -1rem -1rem 1rem; padding: 0.85rem 1rem 0.5rem; }
}

/* when the whole page scrolls (wide but short screens), the tracker scrolls away and leaves the form the room */
@media (min-width: 577px) and (max-height: 679.98px) {
    .reg-steps { position: static; }
}

    .reg-steps li {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.78rem;
        letter-spacing: 0.01em;
        color: #9ca3af;
        padding-bottom: 0.45rem;
        border-bottom: 2px solid #eef0f3;
    }

    .reg-steps .reg-step-dot {
        width: 1.25rem;
        height: 1.25rem;
        line-height: 1;                      /* hug the digit so flex centers the number, not a tall line box */
        font-variant-numeric: tabular-nums;  /* a fixed-width "1" sits in the middle instead of leaning left */
        flex: 0 0 auto;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        font-weight: 600;
        border: 1px solid #d1d5db;
        color: #9ca3af;
        background: transparent;
    }

    /* Mirrors the hero: LIU blue + white, gold marks where you are. */
    .reg-steps li.current { color: #1f2937; font-weight: 600; border-bottom-color: var(--liu-gold); }
    .reg-steps li.current .reg-step-dot { background: var(--liu-blue); border-color: var(--liu-blue); color: #fff; }
    .reg-steps li.done { color: #4b5563; border-bottom-color: var(--liu-blue); }
    .reg-steps li.done .reg-step-dot { background: #fff; border-color: var(--liu-blue); color: var(--liu-blue-dark); }

    /* a finished step you can go back to: same soft tint on hover as "Add account" */
    .reg-steps .reg-step-link {
        display: inline-flex;
        align-items: center;
        gap: inherit;
        margin: -0.2rem -0.45rem;
        padding: 0.2rem 0.45rem;
        border-radius: 6px;
        color: inherit;
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

        .reg-steps .reg-step-link:hover { background: #eef6fd; color: #1f2937; text-decoration: none; }
        .reg-steps .reg-step-link:focus-visible { outline: 2px solid #69b3e7; outline-offset: 1px; }

@media (max-width: 576px) {
    .reg-steps .reg-step-label { display: none; }
    .reg-steps li.current .reg-step-label { display: inline; }
}

/* ================================
   Review summary (payment page): team header, then school | contact
   ================================ */
.review-summary {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.review-team {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}

/* a little flag in the school's colors: one or two vertical bands */
.review-flag {
    flex: none;
    display: flex;
    width: 3.6rem;      /* 3:2, like a real flag */
    height: 2.4rem;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

    .review-flag span { flex: 1; }

.review-team-name { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 700; color: #111827; line-height: 1.25; overflow-wrap: anywhere; }

/* soft tint on hover instead of an underline, same as "Add account" */
.review-edit {
    padding: 0.2rem 0.5rem;
    margin-right: -0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--liu-blue-dark);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .review-edit:hover { background: #eef6fd; text-decoration: none; }

.review-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.review-col { padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }
.review-col + .review-col { border-left: 1px solid #f0f2f5; }

    .review-col h3 {
        margin: 0 0 0.9rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--liu-blue-dark);
    }

/* labelled fields on a 6-column grid: thirds for the short ones, halves for phones, full rows
   for anything long */
.review-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.95rem 1rem;
}

.rf { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; grid-column: span 6; }
.rf-third { grid-column: span 2; }
.rf-half { grid-column: span 3; }

.rf-label { font-size: 0.75rem; color: #6b7280; }
.rf-value { font-size: 0.92rem; color: #111827; line-height: 1.4; overflow-wrap: anywhere; }

.review-multiline { white-space: pre-line; }

@media (max-width: 700px) {
    .review-cols { grid-template-columns: 1fr; }
    .review-col + .review-col { border-left: 0; border-top: 1px solid #f0f2f5; }
}

.billing-same .rz-label { font-weight: 400 !important; }


/* ================================
   Step footer: same shape on every step. Back (if any) on the left,
   amount + main button on the right, divided from the form by a rule.
   ================================ */
/* The last thing in the form, not stuck to the screen, so the amount and the main button show
   up only once they've scrolled to the end. It runs edge to edge across the card and is the
   card's bottom edge. */
.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem -2rem 0;
    padding: 1.1rem 2rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 640px) {
    .wizard-footer { margin: 1rem -1rem 0; padding: 0.9rem 1rem 1.1rem; }
}

/* wider screens: it keeps the card's rounded bottom corners */
@media (min-width: 577px) {
    .wizard-footer { border-radius: 0 0 17px 17px; }
    html:has(.reg-page) { scroll-padding-bottom: 6rem; }   /* Tab keeps the focused field above the "More below" fade */
}

/* short laptop screens: a slimmer banner, button row and page gaps, so the form gets the height */
@media (min-width: 577px) and (max-height: 850px) {
    .reg-page,
    .thankyou-page { --reg-outside: calc(3.25rem + 2px); }
    .reg-page { padding: 1rem 0 0.5rem; }
    .reg-page .public-footer { margin-top: 0.5rem; }
    .reg-hero { padding: 0.9rem 2.5rem; }
    .reg-hero .reg-title { font-size: 1.9rem; }
    .reg-hero-art { width: 104px; }
    .wizard-footer { margin-top: 1rem; padding: 0.7rem 2rem 0.8rem; }
}

/* "More below" (MoreBelow.razor): the content fades out along the bottom of the card and two
   thin chevrons light up one after the other. It sticks to the bottom of whatever scrolls (the
   card, or the page on short screens) and takes no room of its own. app.js shows it while
   there's more to scroll. */
.scroll-cue {
    position: sticky;
    bottom: 0;
    z-index: 10;   /* under the school list and social menu, which can open over it */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 4rem;
    margin-top: -4rem;
    padding-bottom: 0.6rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 75%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    .scroll-cue.is-shown { opacity: 1; }

.scroll-cue button {
    position: relative;
    width: 2rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .scroll-cue.is-shown button { pointer-events: auto; }

    .scroll-cue button::before,
    .scroll-cue button::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 0.6rem;
        height: 0.6rem;
        margin-left: -0.3rem;
        border-right: 1.5px solid var(--liu-blue-dark);
        border-bottom: 1.5px solid var(--liu-blue-dark);
        transform: rotate(45deg);
        opacity: 0.15;
        animation: scroll-cue-cascade 2.6s ease-in-out infinite;
    }

    .scroll-cue button::before { top: 0.1rem; }
    .scroll-cue button::after { top: 0.55rem; animation-delay: 0.35s; }

@keyframes scroll-cue-cascade {
    0%, 100% { opacity: 0.15; }
    35% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue { transition: none; }
    .scroll-cue button::before,
    .scroll-cue button::after { animation: none; opacity: 0.6; }
}

.wizard-footer-end {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
}

    /* buttons in the footer sit on the footer's center line, not 1rem low */
    .reg-page .wizard-footer .rz-button.rz-button {
        margin-top: 0;
        align-self: center;
        height: 2.75rem;
        padding-inline: 1.25rem;
    }

.total-due {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: right;
    line-height: 1.2;
}

    .total-due strong {
        display: block;
        margin-top: 0.15rem;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 0;
        color: #1f2937;
        font-variant-numeric: tabular-nums;
    }

/* Back: secondary, so the gold button stays the one obvious next step */
.reg-page .reg-back-btn.rz-button {
    min-width: 0;
    border-radius: 3px;
    font-weight: 600;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
    box-shadow: none;
}

    .reg-page .reg-back-btn.rz-button:hover:not(.rz-state-disabled) {
        background-color: #f3f4f6;
        border-color: #9ca3af;
    }

/* Phones: the total gets its own row on top, then Back and the main button share one row at
   the same height, the main button filling the rest so it's the obvious next step. The end
   group steps aside (display: contents) so all three line up as one set. */
@media (max-width: 576px) {
    .wizard-footer { flex-wrap: wrap; gap: 0.75rem; }
    .wizard-footer-end { display: contents; }
    .total-due { order: 0; flex: 1 1 100%; text-align: left; }
    .reg-page .wizard-footer .reg-back-btn.rz-button { order: 1; flex: none; }
    .reg-page .wizard-footer .reg-submit-btn.rz-button { order: 2; flex: 1 1 0; }
}

/* ================================
   School colors: two picker tiles (primary / secondary)
   ================================ */
.school-color-pickers {
    display: flex;
    gap: 0.75rem;
}

/* same 36px height as the text boxes beside it (Mascot) */
.school-color-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    box-sizing: border-box;
    height: 2.25rem;
    margin-top: 0.15rem;
    padding: 0 0.35rem 0 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

    .school-color-field { cursor: pointer; transition: background-color 0.15s ease; }   /* the whole box opens the picker (app.js) */

    /* the whole box is the button now, so it gets Division's hover; the swatch's own hover
       outline (from when it was the only way in) goes */
    .school-color-field:hover { background: #f3f8fd; }

    .school-color-field .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover,
    .school-color-field .rz-colorpicker:focus,
    .school-color-field .rz-colorpicker.rz-state-focused {
        border: 0;
        box-shadow: none;
        outline: none;
        background: transparent;
    }

    .school-color-field:focus-within { border-color: #69b3e7; box-shadow: 0 0 0 3px rgba(105, 179, 231, 0.25); }

    .school-color-field .rz-colorpicker {
        flex-shrink: 0;
        align-self: stretch;
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /* the swatch opens the picker by itself; the arrow only took room from the hex code */
    .school-color-field .rz-colorpicker-trigger { display: none; }

    /* the color fills the box's left edge, like the social media badges below */
    .school-color-field .rz-colorpicker-value {
        width: 2.5rem;
        height: 100%;
        border-radius: 0;
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.08);
    }

    /* empty slot: a checkerboard says "nothing picked yet" better than white */
    .school-color-field.is-empty .rz-colorpicker-value {
        background: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 0 0 / 10px 10px !important;
    }

/* the "#" is fixed and only the six characters are typed; it shows once there's a code or the box is focused */
.school-color-code { flex: 1; display: flex; align-items: center; min-width: 0; font-size: 0.875rem; color: #1f2937; cursor: text; }
.school-color-hash { color: #9ca3af; margin-right: 1px; }
.school-color-code:not(:focus-within):has(.school-color-hex:placeholder-shown) .school-color-hash { display: none; }
.school-color-hex {
    width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; outline: none;
    font: inherit; color: inherit; font-variant-numeric: tabular-nums; text-transform: uppercase; cursor: text;
}
    .school-color-hex::placeholder { color: #9ca3af; text-transform: none; }
    .school-color-hex:focus::placeholder { color: transparent; }

.school-color-field.is-bad { border-color: #dc2626; }

.school-color-clear {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #c4c9d1;
    cursor: pointer;
    opacity: 0;   /* shows on hover or focus, so a filled box stays quiet */
    transition: opacity 0.15s ease;
}

    .school-color-field:hover .school-color-clear,
    .school-color-field:focus-within .school-color-clear { opacity: 1; }
    .school-color-clear .rzi { font-size: 0.9rem; }
    .school-color-clear:hover { background: #f3f4f6; color: #374151; }
    .school-color-clear:focus-visible { outline: 2px solid #69b3e7; outline-offset: 1px; }

/* Read-only color chips (review step, admin detail) */
/* the color leads; its code is a quiet label beside it */
.color-swatches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; }

.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.color-dot {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.color-code { font-size: 0.75rem; color: #9ca3af; letter-spacing: 0.02em; min-width: 3.9rem; text-align: left; }

/* clickable chip: copies the code. Same soft tint on hover as "Add account". */
button.color-chip.is-copyable {
    margin: -0.2rem -0.3rem;
    padding: 0.2rem 0.3rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    cursor: copy;
    transition: background-color 0.15s ease;
}

    button.color-chip.is-copyable:hover { background: #eef6fd; }
    button.color-chip.is-copyable:hover .color-code { color: #6b7280; }
    button.color-chip.is-copyable:focus-visible { outline: 2px solid #69b3e7; outline-offset: 1px; }

/* ================================
   Thank-you page (was ThankYou.razor.css)
   ================================ */
.thankyou-page {
    min-height: 100vh;
    background: transparent;   /* .page paints the blue wash and logo */
    padding: 2.5rem 0 1.5rem;
}

.thankyou-shell { max-width: 1100px; }

.thankyou-page .thankyou-card.rz-card {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    background-color: #ffffff;
    padding: 0;
    overflow: hidden;
}

.thankyou-body {
    padding: 1.5rem 2rem 2.25rem;
    background-color: #ffffff;
}

/* a big check in LIU blue, with a gold outer line like the banner's */
.thankyou-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0.5rem auto 1rem;
    border-radius: 50%;
    background: var(--liu-blue);
    color: #ffffff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--liu-gold), 0 8px 20px rgba(15, 53, 84, 0.15);
}

    .thankyou-badge .rzi { font-size: 3.5rem; }

/* Registration closed (Admin > Settings): sits where the form would, in the thank-you page's style */
.reg-closed { text-align: center; padding: 1rem 0 1.5rem; }
.reg-closed-badge {
    display: flex; align-items: center; justify-content: center;
    width: 96px; height: 96px; margin: 0.5rem auto 1rem;
    border-radius: 50%; background: #eef2f6; color: #64748b;
}
.reg-closed-badge .rzi { font-size: 48px; }
.reg-closed-title { margin: 0; }
.reg-closed-text { margin: 0.65rem auto 0; max-width: 34rem; color: #475569; line-height: 1.6; }

.thankyou-text {
    margin-top: 0.65rem;
    color: #475569;
    line-height: 1.6;
}

/* Confirmation #, amount and division as a receipt card, matching the top of the receipt email */
.thankyou-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 30rem;
    margin: 1.25rem auto 0;
    border: 1px solid #dbe7f2;
    border-radius: 10px;
    background: #eef5fb;
}

    .thankyou-facts > div {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.9rem 0.5rem;
    }

        .thankyou-facts > div + div { border-left: 1px solid #dbe7f2; }

    .thankyou-facts span {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
    }

    .thankyou-facts strong {
        font-size: 1.35rem;
        font-weight: 700;
        color: #1f2937;
        font-variant-numeric: tabular-nums;
    }

.thankyou-receipt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: #475569;
    overflow-wrap: anywhere;   /* a long email address wraps instead of widening the page */
}

    .thankyou-receipt .rzi { font-size: 1.1rem; color: var(--liu-blue-dark); }

@media (max-width: 400px) {
    .thankyou-facts strong { font-size: 1.1rem; }
    .thankyou-facts span { font-size: 0.62rem; letter-spacing: 0.03em; }
}

@media (max-width: 576px) {
    .thankyou-body { padding: 1.25rem 1rem 1.75rem; }
}

/* ================================
   High school search (suggestion list under the box; same pattern as LIUSTS)
   ================================ */
.school-search { position: relative; }

    .school-search input { padding-right: 36px; } /* room for the spinner */

.school-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

    .school-suggestions li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.45rem 0.6rem;
        border-radius: 6px;
        cursor: pointer;
        line-height: 1.3;
    }

        .school-suggestions li:hover { background: #e9f3fc; }

.school-suggestion-name {
    font-size: 0.9rem;
    color: #1e293b;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-suggestion-meta {
    flex: none;
    font-size: 0.78rem;
    color: #94a3b8;
}

.school-suggestions .school-suggestion-other {
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 6px 6px;
    margin-top: 2px;
}

    .school-suggestion-other .school-suggestion-name { color: #357abd; font-weight: 600; }

.school-suggestions li.school-suggestion-status {
    cursor: default;
    color: #94a3b8;
    font-size: 0.85rem;
}

    .school-suggestions li.school-suggestion-status:hover { background: transparent; }

.school-search-spinner {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #cbd5e1;
    border-top-color: #69b3e7;
    border-radius: 50%;
    animation: school-spin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes school-spin { to { transform: rotate(360deg); } }

.school-picked {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: #15803d;
}

    .school-picked .rzi { font-size: 0.95rem; }

/* ================================
   Social media accounts: one row per account, "Add account" menu
   ================================ */
.social-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.15rem; }

/* the badge is the box's first segment (like an input group); remove sits just outside */
.social-item { display: flex; align-items: stretch; }

/* each account box is exactly one column wide, like School Colors above it, with remove just
   outside; a fixed 26rem matched neither the half nor the full width */
@media (min-width: 641px) {
    .social-item { max-width: calc(50% - 1.25rem + 2rem); }
}

    .social-item > .social-badge { border-radius: 4px 0 0 4px; }

    .social-item .handle-input .rz-textbox {
        margin-top: 0;   /* the form's small top margin on text boxes would drop the box below its badge */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

/* brand-colored block with the logo in white; no border of its own, the box's edge divides them */
.social-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    border-radius: 4px;
    background: #f8fafc;
}

.social-logo {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
}

.social-logo-icon { font-size: 1.15rem; }

/* "@" sits inside the box for handle platforms, so people type just the name */
.handle-input { position: relative; flex: 1; min-width: 0; }

    .handle-input.has-at::before {
        content: "@";
        position: absolute;
        left: 0.6rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 0.9rem;
        pointer-events: none;
    }

    .handle-input.has-at .rz-textbox { padding-left: 1.45rem; }

    /* while empty, the placeholder ("Instagram handle") speaks for itself */
    .handle-input.has-at:has(input:placeholder-shown)::before { display: none; }
    .handle-input.has-at:has(input:placeholder-shown) .rz-textbox { padding-left: 0.6rem; }

.social-remove {
    flex: none;
    align-self: center;
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #c4c9d1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .social-remove .rzi { font-size: 1rem; }
    .social-remove:hover { background: #f3f4f6; color: #4b5563; }
    .social-remove:focus-visible { outline: 2px solid #69b3e7; outline-offset: 1px; color: #4b5563; }

.social-add {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: -0.45rem;
    padding: 0.3rem 0.6rem 0.3rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #357abd;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .social-add .rzi { font-size: 1.1rem; }
    .social-add:hover,
    .social-add[aria-expanded="true"] { background: #eef6fd; }
    .social-add:focus-visible { outline: 2px solid #69b3e7; outline-offset: 1px; }

.social-menu-wrap { position: relative; align-self: flex-start; }

/* invisible layer under the open menu: a click anywhere else closes it */
.social-menu-backdrop { position: fixed; inset: 0; z-index: 29; }

/* opens upward: the section sits at the bottom of the card, which clips anything below it */
.social-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: -0.45rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

    .social-menu button {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.35rem 0.5rem;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #1f2937;
        font-size: 0.86rem;
        text-align: left;
        cursor: pointer;
    }

        .social-menu button:hover,
        .social-menu button:focus-visible { background: #e9f3fc; outline: none; }

        .social-menu .social-logo { width: 1rem; height: 1rem; }
        .social-menu .social-logo-icon { font-size: 1.05rem; }

/* Read-only social accounts (review step, admin detail): logo + handle per line */
.social-accounts { display: inline-flex; flex-direction: column; gap: 0.3rem; }
.social-account { display: inline-flex; align-items: center; gap: 0.45rem; }
.social-account .social-logo { width: 0.95rem; height: 0.95rem; flex: none; }
.social-account .social-logo-icon { font-size: 1rem; }

/* admin: handles link to the account; no underline, a soft tint on hover */
.social-account a {
    margin: 0 -0.25rem;
    padding: 0.05rem 0.25rem;
    border-radius: 4px;
    color: #357abd;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .social-account a:hover { background: #eef6fd; text-decoration: none; }

/* reCAPTCHA sits at the end of the Payment card */
.captcha-row { margin-top: 0.25rem; }
/* Same footprint as Google's checkbox (304 x 78) */
.captcha-off {
    width: 304px; max-width: 100%; min-height: 78px; padding: 0.5rem 0.75rem;
    display: flex; align-items: center;
    border: 1px dashed #c4ccd8; border-radius: 3px; background: #f9fafb;
    color: #6b7280; font-size: 0.8rem; line-height: 1.35;
}

/* ================================
   Footer under the card (PublicFooter.razor): same size and grey as the admin footer,
   lined up with the card's left edge.
   ================================ */
.public-footer {
    margin-top: 1rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

    .public-footer a { color: inherit; text-decoration: underline; text-decoration-color: #cbd5e1; }
    .public-footer a:hover { color: #64748b; }

/* ================================
   Team information: the school is one search box (its address opens only when needed, and
   a directory school's address folds to one line with an Edit link), Division is a two-way
   switch, Team Size a plain number box.
   ================================ */
.addr-collapsed .school-picked-note { display: none; }

/* Division: Varsity | JV as one segmented switch, the same height and width as the boxes */
.reg-page .team-fieldset .rz-radio-button-list .rz-stack {
    display: flex !important;
    gap: 0 !important;
    margin: 0.15rem 0 0 !important;
    width: 100%;
}

.reg-page .team-fieldset .rz-radio-btn {
    position: relative;
    flex: 1 1 0;
    margin: 0 !important;
}

    /* the real radio covers its whole segment, invisible, so clicks and keys still go to it */
    .reg-page .team-fieldset .rz-radio-btn .rz-radiobutton {
        position: absolute;
        inset: 0;
        margin: 0 !important;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

        .reg-page .team-fieldset .rz-radio-btn .rz-radiobutton .rz-radiobutton-box { width: 100%; height: 100%; }

    .reg-page .team-fieldset .rz-radio-btn .rz-radiobutton-label {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.25rem;
        margin: 0 !important;
        padding: 0 1rem;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-weight: 500;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .reg-page .team-fieldset .rz-radio-btn:first-child .rz-radiobutton-label { border-radius: 6px 0 0 6px; }
    .reg-page .team-fieldset .rz-radio-btn:last-child .rz-radiobutton-label { border-radius: 0 6px 6px 0; margin-left: -1px !important; }
    .reg-page .team-fieldset .rz-radio-btn:hover .rz-radiobutton-label { background: #f3f8fd; }

    .reg-page .team-fieldset .rz-radio-btn:has(.rz-state-active) .rz-radiobutton-label {
        position: relative;
        background: var(--liu-blue-dark);   /* white reads on the darker blue (4.5:1), not on LIU blue */
        border-color: var(--liu-blue-dark);
        color: #ffffff;
        font-weight: 600;
    }

    .reg-page .team-fieldset .rz-radio-btn:has(:focus-visible) .rz-radiobutton-label {
        outline: 2px solid #69b3e7;
        outline-offset: 1px;
    }

/* Team Size: a plain number box; the tiny up/down arrows were the busiest thing in the row */
.reg-page .team-fieldset .rz-numeric-button { display: none; }


/* the directory address as one quiet line with an Edit link */

.school-addr-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.15rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #1f2937;
}

.school-addr-edit {
    flex: none;
    padding: 0.1rem 0.25rem;
    border: 0;
    background: none;
    color: var(--liu-blue-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ================================
   Phones: the card is the whole screen, like an app. Banner at the top, the form scrolling
   under it with the buttons at its end, and no frame of background around it.
   The © line becomes a thin, faint strip along the very bottom of the screen, under the card.
   ================================ */

@media (max-width: 576px) {
    .reg-page,
    .thankyou-page { padding: 0; min-height: 0; }

    .reg-page .reg-shell,
    .thankyou-page .thankyou-shell { padding: 0; }

        .reg-shell > .row,
        .thankyou-shell > .row { margin: 0; }

            .reg-shell > .row > [class*="col-"],
            .thankyou-shell > .row > [class*="col-"] { padding: 0; }

    .reg-page .reg-card.rz-card,
    .thankyou-page .thankyou-card.rz-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: calc(100vh - 1.5rem);
        min-height: calc(100dvh - 1.5rem);
    }

    .reg-hero { border-radius: 0; }

    /* the © strip sits right under the button row, so the row needs almost no bottom padding */
    .reg-page .wizard-footer { padding-bottom: 0.2rem; }

    .public-footer {
        margin: 0;
        padding: 0 1rem;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.68rem;
        text-align: center;
        color: #a3aebd;
        background: #f8fafc;
        box-sizing: border-box;
        overflow: hidden;   /* the link's underline would otherwise poke 1px below the screen */
    }

    /* the sections' own boxes would be a card inside a card; on a phone the headings divide them */
    .reg-page .form-fieldset.rz-fieldset {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

        .reg-page .form-fieldset .rz-fieldset-content { padding: 0; }

    /* testing only: a small pencil in the banner's corner, clear of the title and the
       full-width Continue button */
    .reg-page .form-topbar .test-fill-btn.rz-button {
        top: 10px;
        right: 10px;
        bottom: auto;
        left: auto;
        width: 2rem;
        height: 2rem;
        padding: 0;
        justify-content: center;
    }

        .reg-page .form-topbar .test-fill-btn.rz-button .rz-button-text { display: none; }
}

@media (max-width: 576px) and (min-height: 600px) {
    .reg-page .reg-card.rz-card,
    .thankyou-page .thankyou-card.rz-card {
        height: calc(100vh - 1.5rem);        /* the rest is the © strip */
        max-height: calc(100vh - 1.5rem);
        height: calc(100dvh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }
}

/* ================================
   Form screen loader (FormLoader.razor). Tall enough that the card is already full size while
   it waits, so nothing jumps when the form arrives. The spinner holds off 200 ms, so a quick
   move between steps shows only the fade.
   ================================ */
.form-loader {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

    .form-loader.short { min-height: 26rem; }

/* In the screen-fitting card (phones), the loader fills exactly the white space under the step
   tracker, so the spinner sits in the middle of what you can see, and the card is already full size. */
@media (max-width: 576px) and (min-height: 600px), (min-width: 577px) and (min-height: 680px) {
    .reg-form-wrapper:has(> .form-loader) { display: flex; flex-direction: column; }
    .reg-form-wrapper > .form-loader { min-height: 0; }
}

@media (min-width: 577px) and (min-height: 680px) {
    .reg-page .reg-card.rz-card:has(.form-loader) {
        height: calc(100vh - var(--reg-outside));
        height: calc(100dvh - var(--reg-outside));
    }
}

/* starts right under the tracker, not after the gap it leaves above the form */
.reg-steps + .form-loader { margin-top: -1.25rem; }

@media (max-width: 640px) {
    .reg-steps + .form-loader { margin-top: -1rem; }
}

    .form-loader .reg-spinner {
        opacity: 0;
        animation: reg-spin 0.8s linear infinite, reg-fade-in 0.2s ease-out 0.2s forwards;
    }

.form-reveal { animation: reg-fade-in 0.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .form-reveal { animation: none; }
}

/* ================================
   Form problems (FormAlert.razor): a card above the step's buttons that stays until it's
   closed or they try again. Red for errors, amber for things to fix.
   ================================ */
.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.75rem 0.85rem 1rem;
    border: 1px solid #f3c2bd;
    border-left: 4px solid #c0392b;
    border-radius: 10px;
    background: #fdf3f2;
    color: #1f2937;
    scroll-margin-bottom: 7rem;   /* clear of the sticky button row */
    animation: reg-fade-in 0.2s ease-out;
}

    .form-alert-warning {
        border-color: #f2dca0;
        border-left-color: #b7791f;
        background: #fffaeb;
    }

.form-alert-icon { flex: none; font-size: 1.35rem; color: #c0392b; }
.form-alert-warning .form-alert-icon { color: #b7791f; }

.form-alert-body { flex: 1; min-width: 0; }
.form-alert-title { font-weight: 700; font-size: 0.95rem; }
.form-alert-text { margin-top: 0.15rem; font-size: 0.88rem; line-height: 1.45; color: #4b5563; }
.form-alert-detail { margin-top: 0.35rem; font-size: 0.75rem; color: #6b7280; overflow-wrap: anywhere; }
.form-alert-detail summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 2px; }
.form-alert-detail summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.form-alert-detail > div { margin-top: 0.2rem; }

.form-alert-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
}

    .form-alert-close .rzi { font-size: 1.05rem; }
    .form-alert-close:hover { background: rgba(0, 0, 0, 0.05); color: #4b5563; }
    .form-alert-close:focus-visible { outline: 2px solid #69b3e7; outline-offset: 1px; }

/* ================================
   Pop-up notifications (admin): white cards with a colored edge in the LIU palette, instead of
   Radzen's solid-colored boxes. How long each stays is set where it's sent.
   ================================ */
.rz-notification { inset-block-start: 1rem; }

.rz-notification-item-wrapper {
    width: 22rem;
    max-width: calc(100vw - 2rem);
    min-width: 0;
    border-radius: 10px;
    background: transparent;
}

.rz-notification .rz-notification-item {
    padding: 0.85rem 0.75rem 0.95rem 1rem;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--liu-blue);
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.rz-notification-success .rz-notification-item { border-left-color: #2e8b57; }
.rz-notification-warn .rz-notification-item { border-left-color: #b7791f; }
.rz-notification-error .rz-notification-item { border-left-color: #c0392b; }

.rz-notification .rz-notification-icon { font-size: 1.3rem; }
.rz-notification .rz-notification-icon.rzi-check { color: #2e8b57; }
.rz-notification .rz-notification-icon.rzi-exclamation-triangle { color: #b7791f; }
.rz-notification .rz-notification-icon.rzi-times { color: #c0392b; }
.rz-notification .rz-notification-icon.rzi-info-circle { color: var(--liu-blue-dark); }

.rz-notification .rz-notification-title { font-size: 0.95rem; color: #1f2937; }
.rz-notification .rz-notification-content { margin-top: 0.15rem; font-size: 0.88rem; line-height: 1.45; color: #4b5563; }
.rz-notification .rz-notification-close { color: #9ca3af; }

/* the countdown bar along the bottom */
.rz-notification-item-wrapper > .rz-progressbar { --rz-progressbar-background-color: #eef2f6; }
.rz-notification-success .rz-progressbar-value { background-color: #2e8b57; }
.rz-notification-warn .rz-progressbar-value { background-color: #b7791f; }
.rz-notification-error .rz-progressbar-value { background-color: #c0392b; }

/* ================================
   Once you've scrolled down (desktop and tablet), a thin shadow sits under the step tracker.
   app.js sets can-up. The "More below" hint covers the other end.
   ================================ */
@media (min-width: 577px) {
    .reg-steps { transition: box-shadow 0.2s ease; }
    .can-up .reg-steps { box-shadow: 0 8px 10px -8px rgba(15, 23, 42, 0.18); }
}