/* ===============================================================
   ISPPD PG 2027 -- shared UI design system (regv2)
   Used by: OnlineRegistration, Result, Login, Home, ViewRegistration
   Scoped to .regv2 so nothing here leaks into the master page or
   other pages. Legacy Bootstrap classes (.row/.col-md-*/.aligntext)
   are kept in the markup and restyled from here, so every server
   control, validator and postback keeps working untouched.
   =============================================================== */
.hidden {
    display: none !important;
}

.regv2 {
    --brand-900: #0b1f4b;
    --brand-800: #12306e;
    --brand-700: #14207f;
    --brand-600: #9814a7;
    --brand-500: #b400a4;
    --brand-050: #eef4ff;
    --accent-600: #c2410c;
    --ok-600: #15803d;
    --ok-050: #ecfdf3;
    --err-600: #b42318;
    --err-050: #fef3f2;
    --ink-900: #101828;
    --ink-700: #344054;
    --ink-500: #667085;
    --ink-300: #98a2b3;
    --line: #e4e7ec;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --sh-focus: 0 0 0 4px rgba(47,123,240,.18);
    color: var(--ink-900);
    font-size: 15px;
    line-height: 1.55;
}

    .regv2 *, .regv2 *::before, .regv2 *::after {
        box-sizing: border-box;
    }

/* -- utility / helpdesk bar ------------------------------------- */
.regv2-utility {
    background: var(--brand-900);
    color: #c7d5f2;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: var(--r-md);
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    text-align: left;
}

    .regv2-utility strong {
        color: #fff;
        font-weight: 600;
    }

    .regv2-utility a {
        color: #c9a8dc;
        text-decoration: none;
        font-weight: 600;
    }

        .regv2-utility a:hover {
            text-decoration: underline;
        }

.regv2-utility__spacer {
    flex: 1 1 auto;
}

/* -- step indicator --------------------------------------------- */
.regv2-steps {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    padding: 4px 0 18px;
}

.regv2-step {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1 1 0;
    min-width: 175px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    background: #f6f8fc;
    border: 1px solid var(--line);
    text-align: left;
}

.regv2-step__num {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: #e6eaf2;
    color: var(--ink-500);
    border: 2px solid transparent;
}

.regv2-step__label {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-300);
    font-weight: 700;
    display: block;
}

.regv2-step__name {
    font-weight: 600;
    color: var(--ink-500);
    font-size: 14px;
}

.regv2-step.is-active {
    background: var(--brand-050);
    border-color: #e4c7ee;
}

    .regv2-step.is-active .regv2-step__num {
        background: var(--brand-600);
        color: #fff;
        box-shadow: var(--sh-focus);
    }

    .regv2-step.is-active .regv2-step__name {
        color: var(--brand-800);
    }

    .regv2-step.is-active .regv2-step__label {
        color: var(--brand-600);
    }

.regv2-step.is-done .regv2-step__num {
    background: var(--ok-050);
    color: var(--ok-600);
    border-color: var(--ok-600);
}

.regv2-step.is-done .regv2-step__name {
    color: var(--ink-700);
}

.regv2-step__bar {
    height: 2px;
    flex: 0 1 34px;
    background: var(--line);
}

@media (max-width: 767px) {
    .regv2-step__bar {
        display: none;
    }

    .regv2-step {
        min-width: 138px;
        padding: 8px;
    }
}

/* -- two-column layout: cards + persistent sidebar -------------- */
.regv2 {
    background: #f4f6fb;
    padding: 16px;
}

/* Single-purpose pages (lookup, sign-in style) read better centred and capped
   than stretched across a 1400px monitor. */
.regv2.regv2-narrow {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px;
}

    .regv2.regv2-narrow .regv2-gridwrap--compact {
        max-width: 100%;
    }

    /* the search field should not run the full width of the card either */
    .regv2.regv2-narrow .form-control {
        max-width: 420px;
    }

.regv2-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 0 22px;
    align-items: start;
}

.regv2-main {
    min-width: 0;
}

.regv2-side {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 16px;
}

@media (max-width: 1100px) {
    .regv2-layout {
        grid-template-columns: minmax(0,1fr);
    }

    .regv2-side {
        position: static;
        margin-top: 4px;
    }
}

.regv2-scard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--sh-1);
    text-align: left;
}

    .regv2-scard h4 {
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-500);
        margin: 0 0 12px;
        font-weight: 700;
    }

.regv2-scard__foot {
    font-size: 12px;
    color: var(--ink-500);
    margin: 12px 0 0;
    line-height: 1.45;
}

.regv2-sum {
    display: grid;
    gap: 9px;
    margin: 0;
    font-size: 13.5px;
}

    .regv2-sum > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .regv2-sum dt {
        color: var(--ink-500);
        font-weight: 500;
    }

    .regv2-sum dd {
        margin: 0;
        font-weight: 600;
        color: var(--ink-900);
        text-align: right;
    }

    /* GST bifurcation lines: subordinate to the payable total above which they sit */
    .regv2-sum .split {
        font-size: 13px;
    }

        .regv2-sum .split:first-of-type {
            border-top: 1px solid var(--line);
            padding-top: 10px;
            margin-top: 4px;
        }

        .regv2-sum .split dt {
            color: var(--ink-500);
        }

        .regv2-sum .split dd {
            color: var(--ink-700);
            font-weight: 600;
        }

    .regv2-sum .total {
        border-top: 1px solid var(--line);
        padding-top: 10px;
        margin-top: 3px;
        font-size: 15.5px;
    }

        .regv2-sum .total dd {
            color: var(--brand-700);
            font-weight: 800;
        }

.regv2-scard--help {
    background: linear-gradient(160deg,var(--brand-900),var(--brand-700));
    border: 0;
    color: #dce7ff;
}

    .regv2-scard--help h4 {
        color: #c9a8dc;
    }

    .regv2-scard--help p {
        margin: 0 0 4px;
    }

    .regv2-scard--help .lead {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .regv2-scard--help a {
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        font-size: 17px;
    }

    .regv2-scard--help .hours {
        font-size: 12px;
        color: #a9c2ee;
        margin-top: 12px;
        line-height: 1.45;
    }

.regv2-check {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
    font-size: 13px;
    color: var(--ink-700);
    line-height: 1.4;
}

/* -- cards ------------------------------------------------------ */
.regv2-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    margin-bottom: 20px;
    padding: 0 0 6px;
    overflow: hidden;
}

.regv2-cardhd {
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,#fbfcff,#fff);
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    margin-bottom: 14px;
}

    .regv2-cardhd .ico {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border-radius: 10px;
        background: var(--brand-050);
        color: var(--brand-700);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 15px;
    }

    .regv2-cardhd h3 {
        font-size: 16.5px;
        font-weight: 700;
        margin: 0;
        color: var(--ink-900);
        line-height: 1.25;
    }

    .regv2-cardhd p {
        font-size: 13px;
        color: var(--ink-500);
        margin: 2px 0 0;
    }

/* inner padding for card bodies built from legacy .row blocks */
.regv2-card > .row,
.regv2-card > .panel-body,
.regv2-card > div > .row {
    padding-left: 20px;
    padding-right: 20px;
}

/* -- form rows: legacy label col + field col becomes a real grid - */
.regv2 .row {
    margin-left: 0;
    margin-right: 0;
}

.regv2 .aligntext {
    text-align: left !important;
    font-size: 13.5px !important;
    font-weight: 600;
    color: var(--ink-700);
    padding-top: 8px;
    padding-bottom: 2px;
}

.regv2 .aligntext1 {
    text-align: left !important;
    padding-bottom: 14px;
}

@media (min-width: 992px) {
    /* two readable columns instead of the old 6/5/1 split */
    .regv2 .aligntext {
        width: 34%;
        padding-top: 10px;
    }

    .regv2 .aligntext1 {
        width: 62%;
    }
}

.regv2 .LabelStyles,
.regv2 .LabelStyle {
    font-size: 13.5px !important;
    font-weight: 600;
}

/* -- inputs ----------------------------------------------------- */
.regv2 .form-control,
.regv2 input[type=text],
.regv2 input[type=password],
.regv2 textarea,
.regv2 select {
    width: 100%;
    max-width: 460px;
    padding: 10px 13px;
    font-size: 15px;
    color: var(--ink-900);
    background: #fff;
    border: 1px solid #cfd6e4;
    border-radius: var(--r-sm);
    box-shadow: none;
    height: auto;
    transition: border-color .15s, box-shadow .15s;
}

    /* The legacy markup puts Height="35px" inline on the Country / State / City
       dropdowns. An inline height beats the stylesheet, and 35px is not enough
       for 15px text plus padding and borders, so the selected value was being
       sliced in half. !important is needed here to defeat the inline style. */
    .regv2 select,
    .regv2 select.form-control {
        height: auto !important;
        min-height: 44px;
        line-height: 1.35;
        padding-top: 9px;
        padding-bottom: 9px;
        text-overflow: ellipsis;
    }

    .regv2 .form-control:hover {
        border-color: #adb8cc;
    }

    .regv2 .form-control:focus,
    .regv2 select:focus,
    .regv2 textarea:focus {
        outline: 0;
        border-color: var(--brand-500);
        box-shadow: var(--sh-focus);
    }

    .regv2 .form-control[readonly] {
        background: #f6f8fc;
    }

    /* inline pairs (country code + number) keep sitting side by side */
    .regv2 .form-control[style*="inline"] {
        display: inline-block !important;
        vertical-align: middle;
    }

.regv2 textarea {
    max-width: 560px;
    resize: vertical;
}

/* validation feedback */
.regv2 .LabelStyleRequired,
.regv2 .LabelStyleValidation {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
}

.regv2 span.LabelStyleRequired[style*="visible"],
.regv2 .regv2-invalid {
    /* applied by script when an ASP.NET validator fires */
}

.regv2 .regv2-invalid .form-control,
.regv2 .form-control.regv2-invalid {
    border-color: var(--err-600);
    background: var(--err-050);
}

.regv2 .form-control.regv2-valid {
    border-color: var(--ok-600);
}

/* -- radio button lists become pills ---------------------------- */
/* RadioButtonList renders a fixed-width <table> (the control carries an inline
   Width, e.g. 285px on the Title list). On a phone that clips the last options
   off the row. Flattening tbody/tr with display:contents turns every option
   into a flex item of the table, so the list wraps onto as many lines as it
   needs instead of being cut off. */
.regv2 .RadioButtonWidth {
    width: auto !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .regv2 .RadioButtonWidth tbody,
    .regv2 .RadioButtonWidth tr {
        display: contents;
    }

    .regv2 .RadioButtonWidth td {
        display: block;
        padding: 0 10px 8px 0 !important;
    }

    .regv2 .RadioButtonWidth input[type=radio] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .regv2 .RadioButtonWidth label {
        display: inline-block;
        cursor: pointer;
        padding: 8px 16px 8px 34px;
        border: 1.5px solid #d3dae7;
        border-radius: 999px;
        background: #fff;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-700);
        position: relative;
        margin: 0;
        transition: border-color .15s, background .15s, box-shadow .15s;
        white-space: nowrap;
    }

        .regv2 .RadioButtonWidth label::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid #b3bece;
            background: #fff;
            transition: .15s;
        }

        .regv2 .RadioButtonWidth label:hover {
            border-color: var(--brand-500);
            background: var(--brand-050);
        }

    .regv2 .RadioButtonWidth input[type=radio]:checked + label {
        border-color: var(--brand-600);
        background: var(--brand-050);
        color: var(--brand-800);
        box-shadow: 0 0 0 3px rgba(47,123,240,.14);
    }

        .regv2 .RadioButtonWidth input[type=radio]:checked + label::before {
            border-color: var(--brand-600);
            background: radial-gradient(circle, var(--brand-600) 0 4px, #fff 5px);
        }

    .regv2 .RadioButtonWidth input[type=radio]:focus + label {
        box-shadow: var(--sh-focus);
    }

/* -- Step 1 registration type: description tiles ---------------- */
/* the tiles get the full card width instead of the label/field split */
@media (min-width: 992px) {
    .regv2 .regv2-typerow .aligntext,
    .regv2 .regv2-typerow .aligntext1 {
        width: 100%;
    }
}

.regv2 .regv2-typerow .aligntext {
    margin-bottom: 4px;
}

/* The grid lives on the table itself; tbody/tr are flattened with
   display:contents so the cells become the grid items. That works
   whether ASP.NET renders one row of three cells (RepeatColumns=3)
   or three rows of one cell (RepeatColumns=1). */
.regv2 table.regv2-typelist {
    width: 100% !important;
    display: grid;
    /* auto-fit so the row adapts as categories are added or removed
       (3 tiles, 4 tiles, ...) without needing a column count here */
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
}

    .regv2 table.regv2-typelist tbody,
    .regv2 table.regv2-typelist tr {
        display: contents;
    }

    .regv2 table.regv2-typelist td {
        display: block;
        padding: 0 !important;
        min-width: 0;
    }

    .regv2 table.regv2-typelist label {
        display: block;
        white-space: normal;
        height: 100%;
        font-size: 15px !important;
        padding: 14px 16px 14px 42px !important;
        border-radius: var(--r-md) !important;
        line-height: 1.3;
    }

        .regv2 table.regv2-typelist label::before {
            left: 15px;
            top: 21px;
            transform: none;
        }

        /* description injected by script, keyed on the ListItem value */
        .regv2 table.regv2-typelist label .regv2-tile__d {
            display: block;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--ink-500);
            margin-top: 5px;
        }

    .regv2 table.regv2-typelist input[type=radio]:checked + label .regv2-tile__d {
        color: var(--brand-700);
    }

@media (max-width: 620px) {
    .regv2 table.regv2-typelist {
        grid-template-columns: minmax(0,1fr);
    }
}

/* -- buttons ---------------------------------------------------- */
.regv2 .btn-primary {
    /* BackColor is set inline on the server control, so paint over it
       with a gradient image -- inline background-color still loses. */
    background-image: linear-gradient(180deg,#b400a4,#14207f);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 2px 8px rgba(23,70,162,.30);
    transition: filter .16s, transform .16s, box-shadow .16s;
}

    .regv2 .btn-primary:hover,
    .regv2 .btn-primary:focus {
        filter: brightness(1.08);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(23,70,162,.34);
        color: #fff;
    }

    .regv2 .btn-primary:active {
        transform: none;
    }

/* Reset reads as the secondary action */
.regv2 input[id$="btn_Reset"] {
    background-image: none !important;
    background-color: #fff !important;
    color: var(--ink-700) !important;
    border-color: #cfd6e4 !important;
    box-shadow: none;
}

    .regv2 input[id$="btn_Reset"]:hover {
        background-color: #f7f9fc !important;
        border-color: var(--ink-300) !important;
        color: var(--ink-700) !important;
    }

.regv2 .regv2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    padding: 18px 20px;
    margin: 10px -1px -7px;
    border-top: 1px solid var(--line);
    background: #fafbfe;
}

    .regv2 .regv2-actions input[type=submit] {
        min-width: 150px;
    }

/* -- fee grid --------------------------------------------------- */
table.Admingridtable1 {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-900);
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

    table.Admingridtable1 th {
        text-align: left;
        padding: 11px 14px;
        font-size: 12.5px;
        letter-spacing: .06em;
        text-transform: uppercase;
        background-color: var(--brand-800);
        color: #fff;
        border: 0;
        white-space: nowrap;
    }

    table.Admingridtable1 td {
        text-align: left;
        padding: 11px 14px;
        border: 0;
        border-top: 1px solid var(--line);
    }

    table.Admingridtable1 tr:nth-child(even) td {
        background: #fafbfe;
    }

        table.Admingridtable1 td span {
            font-size: 14px;
        }

/* -- amount callout --------------------------------------------- */
.regv2-amount {
    background: linear-gradient(135deg,var(--brand-800),var(--brand-600)) !important;
    color: #fff !important;
    border-radius: var(--r-md);
    padding: 18px !important;
    margin: 0 20px 8px;
}

    .regv2-amount span,
    .regv2-amount .LabelStyle,
    .regv2-amount .LabelStyles {
        color: #fff !important;
    }

/* "inclusive of GST" caption shown wherever a GST-inclusive payable amount
   appears. The default variant sits on the dark amount band; the --ink variant
   is for normal white-card backgrounds. */
.regv2 .regv2-gstnote {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #dbe7ff !important;
    text-align: center;
}

.regv2 .regv2-gstnote--ink {
    color: var(--accent-600) !important;
    text-align: left;
    margin-top: 4px;
}

    /* inside a key/value row the note is a caption under the label, so it must
       not inherit the label's size from the .regv2-kv .k span rule */
    .regv2 .regv2-kv .regv2-gstnote {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: var(--ink-300) !important;
        display: block;
        margin-top: 2px;
        text-align: left;
    }

/* "Registration Category" line under the amount band */
.regv2 .regv2-catline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding: 14px 20px 16px;
    text-align: left;
}

.regv2 .regv2-catline__k {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ink-500) !important;
    flex: 0 0 auto;
}

    .regv2 .regv2-catline__k::after {
        content: ":";
    }

.regv2 .regv2-catline__v {
    min-width: 0;
}

    .regv2 .regv2-catline__v span {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--brand-800) !important;
        word-break: break-word;
    }

/* section divider bars (Accompanying Person / Payment Information) */
.regv2 [style*="background-color: #e0dfde"] {
    background: var(--brand-050) !important;
    border-radius: var(--r-md);
    border: 1px solid #d8e5fb;
}

/* -- photo upload drop zone ------------------------------------- */
.regv2-drop {
    border: 1.5px dashed #cbd4e2;
    border-radius: var(--r-md);
    background: #fbfcfe;
    padding: 18px;
    transition: border-color .18s, background .18s;
    max-width: 460px;
}

    .regv2-drop:hover,
    .regv2-drop.is-over {
        border-color: var(--brand-500);
        background: var(--brand-050);
    }

    .regv2-drop .fileupload,
    .regv2-drop input[type=file] {
        width: 100%;
        font-size: 14px;
    }

.regv2-drop__hint {
    font-size: 12.5px;
    color: var(--ink-500);
    margin-top: 8px;
}

.regv2-photoframe {
    border: 1.5px dashed #cbd4e2 !important;
    border-radius: var(--r-md);
    background: #f8fafc;
    width: 126px !important;
    height: 150px !important;
    padding: 6px !important;
    float: none !important;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .regv2-photoframe img {
        width: 112px !important;
        height: 136px !important;
        object-fit: cover;
        border: 0 !important;
        border-radius: var(--r-sm);
    }

.regv2-filename {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--ok-050);
    border: 1px solid #a6e6bd;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--ok-600);
    font-weight: 600;
    max-width: 460px;
}

    .regv2-filename.show {
        display: flex;
    }

/* -- notes / helper text ---------------------------------------- */
.regv2-note {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    border: 1px solid #e4c7ee;
    background: var(--brand-050);
    color: var(--brand-800);
    margin: 0 20px 14px;
    text-align: left;
}

.regv2 hr {
    border-top: 1px solid var(--line);
    margin: 14px 20px;
}

/* =======================================================================
   SHARED COMPONENTS -- Result / Login / Home / ViewRegistration
   All scoped under .regv2 so they cannot affect untouched pages.
   ======================================================================= */

/* -- page title bar --------------------------------------------------- */
.regv2-pagehd {
    background: linear-gradient(135deg,var(--brand-800),var(--brand-600));
    color: #fff;
    border-radius: var(--r-md);
    padding: 16px 22px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: left;
}

    .regv2-pagehd h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -.01em;
        color: #fff;
    }

    .regv2-pagehd p {
        margin: 3px 0 0;
        font-size: 13.5px;
        color: #cfdefb;
    }

    .regv2-pagehd .ico {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        border-radius: 12px;
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.24);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
    }

.regv2-pagehd__spacer {
    flex: 1 1 auto;
}

/* -- KPI stat tiles (dashboard) --------------------------------------- */
.regv2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.regv2-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-600);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--sh-1);
    text-align: left;
}

    .regv2-stat .k,
    .regv2-stat .k span {
        display: block;
        font-size: 12px !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-500) !important;
        font-weight: 700 !important;
        margin-bottom: 6px;
        line-height: 1.35;
    }

    .regv2-stat .v,
    .regv2-stat .v span {
        font-size: 27px !important;
        font-weight: 800 !important;
        color: var(--brand-700) !important;
        line-height: 1.1;
        letter-spacing: -.02em;
    }

    .regv2-stat--ok {
        border-left-color: var(--ok-600);
    }

        .regv2-stat--ok .v, .regv2-stat--ok .v span {
            color: var(--ok-600) !important;
        }

    .regv2-stat--warn {
        border-left-color: var(--accent-500);
    }

        .regv2-stat--warn .v, .regv2-stat--warn .v span {
            color: var(--accent-600) !important;
        }

/* -- report cards (dashboard lists) ----------------------------------- */
.regv2-reports {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    align-items: start;
}

.regv2-report {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
    text-align: left;
}

    .regv2-report > h4 {
        margin: 0;
        padding: 14px 18px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg,#fbfcff,#fff);
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ink-900);
    }

.regv2-report__bd {
    padding: 14px 18px 18px;
    overflow: auto;
}

/* DataList / GridView tables rendered inside the redesign */
.regv2 .regv2-report table,
.regv2 table.Admingridtable {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid var(--line) !important;
    font-size: 13.5px;
}

    .regv2 .regv2-report table td,
    .regv2 table.Admingridtable td {
        border: 0 !important;
        border-top: 1px solid var(--line) !important;
        padding: 9px 12px !important;
        color: var(--ink-900);
    }

    /* the DataList header row carries an inline blue background */
    .regv2 .regv2-report table td[style*="#9814a7"] {
        background: var(--brand-800) !important;
        color: #fff !important;
        border: 0 !important;
        font-size: 12.5px;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 11px 12px !important;
    }

    .regv2 .regv2-report table tr:nth-child(even) td {
        background: #fafbfe;
    }

    .regv2 .regv2-report table tr:nth-child(even) td[style*="#9814a7"] {
        background: var(--brand-800) !important;
    }

.regv2 table.Admingridtable th {
    text-align: left !important;
    border: 0 !important;
    padding: 11px 12px !important;
    font-size: 12.5px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    background-color: var(--brand-800) !important;
    color: #fff !important;
    white-space: nowrap;
}

.regv2 table.Admingridtable tr:nth-child(even) td {
    background: #fafbfe;
}

.regv2 [style*="overflow-y: scroll"],
.regv2 [style*="overflow-y:scroll"] {
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    padding: 2px;
}

/* -- result / status card --------------------------------------------- */
.regv2-status {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
    text-align: center;
}

.regv2-status__band {
    padding: 26px 22px 20px;
    background: linear-gradient(135deg,var(--brand-800),var(--brand-600));
    color: #fff;
}

.regv2-status--ok .regv2-status__band {
    background: linear-gradient(135deg,#0f6b34,#16a34a);
}

.regv2-status--fail .regv2-status__band {
    background: linear-gradient(135deg,#8f1d14,#d63b2c);
}

.regv2-status__mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
}

.regv2-status__band .lead,
.regv2-status__band .lead span {
    color: #fff !important;
    font-size: 15px !important;
}

.regv2-status__band .big,
.regv2-status__band .big span {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
}

.regv2-status__bd {
    padding: 6px 22px 4px;
}

.regv2-kv {
    display: grid;
    gap: 0;
    text-align: left;
    margin: 12px 0 0;
}

    .regv2-kv > div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 2px;
        border-bottom: 1px solid var(--line);
        flex-wrap: wrap;
    }

        .regv2-kv > div:last-child {
            border-bottom: 0;
        }

    .regv2-kv .k span,
    .regv2-kv span.k {
        color: var(--ink-500) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }

    .regv2-kv .v span,
    .regv2-kv span.v {
        color: var(--ink-900) !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        text-align: right;
    }

.regv2-status__foot {
    padding: 18px 22px;
    border-top: 1px solid var(--line);
    background: #fafbfe;
}

.regv2-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin: 14px 0 4px;
    border-radius: var(--r-md);
    background: #eafaf1;
    border: 1px solid #a6e6bd;
}

    .regv2-whatsapp a {
        color: #128c4a !important;
        font-weight: 700;
        text-decoration: none;
        font-size: 16px;
    }

/* -- login / auth card ------------------------------------------------ */
.regv2-auth {
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(16,24,40,.10);
    overflow: hidden;
    text-align: left;
}

.regv2-auth__hd {
    padding: 26px 26px 20px;
    background: linear-gradient(135deg,var(--brand-900),var(--brand-700));
    color: #fff;
    text-align: center;
}

    .regv2-auth__hd .ico {
        width: 52px;
        height: 52px;
        margin: 0 auto 12px;
        border-radius: 14px;
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    .regv2-auth__hd h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
    }

    .regv2-auth__hd p {
        margin: 5px 0 0;
        font-size: 13.5px;
        color: #bcd3ff;
    }

.regv2-auth__bd {
    padding: 24px 26px 8px;
}

    .regv2-auth__bd .form-group {
        margin-bottom: 16px;
    }

    .regv2-auth__bd .form-control {
        max-width: 100% !important;
        width: 100% !important;
    }

.regv2-auth__lbl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
}

.regv2-captcha {
    background: #f6f8fc;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    text-align: center;
}

    .regv2-captcha .sum {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .regv2-captcha .form-control {
        width: 88px !important;
        max-width: 88px !important;
        text-align: center;
        display: inline-block !important;
    }

.regv2-auth__foot {
    padding: 4px 26px 26px;
    display: flex;
    gap: 12px;
}

    .regv2-auth__foot .btn {
        flex: 1 1 0;
    }

/* -- admin filter / toolbar card -------------------------------------- */
.regv2-filters {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 0 0 6px;
    margin-bottom: 20px;
}

    .regv2-filters .row {
        padding-left: 18px;
        padding-right: 18px;
    }

    .regv2-filters .LabelStyles,
    .regv2-filters .LabelStyle {
        display: block;
        font-size: 12.5px !important;
        font-weight: 600;
        color: var(--ink-700);
        margin-bottom: 5px;
    }

    .regv2-filters .form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    .regv2-filters [class^="col-md-"],
    .regv2-filters [class*=" col-md-"] {
        margin-bottom: 12px;
    }

.regv2-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 16px 18px;
    border-top: 1px solid var(--line);
    background: #fafbfe;
    margin-top: 6px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.regv2-toolbar__spacer {
    flex: 1 1 auto;
}

/* -- grid resend button (AJAX, no postback) ---------------------- */
.regv2 .regv2-resend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid #cfd6e4;
    background: #fff;
    color: var(--brand-800);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
}

    .regv2 .regv2-resend:hover {
        background: var(--brand-050);
        border-color: var(--brand-500);
        transform: translateY(-1px);
    }

    .regv2 .regv2-resend:focus {
        outline: 0;
        box-shadow: var(--sh-focus);
    }

    /* in flight */
    .regv2 .regv2-resend.is-busy {
        background: #f6f8fc;
        border-color: var(--line);
        color: var(--ink-500);
        cursor: default;
        transform: none;
    }

    /* delivered */
    .regv2 .regv2-resend.is-sent {
        background: var(--ok-050);
        border-color: var(--ok-600);
        color: var(--ok-600);
    }

        .regv2 .regv2-resend.is-sent:hover {
            background: #d9f5e3;
            border-color: var(--ok-600);
            color: var(--ok-600);
        }

    /* failed - stays clickable so it can be retried */
    .regv2 .regv2-resend.is-failed {
        background: var(--err-050);
        border-color: var(--err-600);
        color: var(--err-600);
    }

/* helper text under a filter field */
.regv2 .regv2-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-500) !important;
}

.regv2-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--brand-050);
    border: 1px solid #e4c7ee;
    color: var(--brand-800);
    font-size: 13px;
    font-weight: 700;
}

/* ---- alert variants (built on .regv2-note) ------------------------- */
.regv2-note--ok {
    background: var(--ok-050);
    border-color: #a6e6bd;
    color: #14532d;
}

.regv2-note--warn {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.regv2-note--err {
    background: var(--err-050);
    border-color: #fca5a5;
    color: var(--err-600);
}

.regv2-note strong {
    font-weight: 700;
}

/* ---- download buttons (e-receipt) ---------------------------------- */
.regv2-downloads {
    display: grid;
    gap: 12px;
    max-width: 460px;
    margin: 0 auto;
}

.regv2-download {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px;
    border-radius: 12px;
    background-image: linear-gradient(180deg,#b400a4,#14207f);
    color: #fff !important;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    box-shadow: 0 2px 8px rgba(23,70,162,.30);
    transition: filter .16s, transform .16s, box-shadow .16s;
    text-align: center;
}

    .regv2-download:hover,
    .regv2-download:focus {
        filter: brightness(1.08);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(23,70,162,.34);
        color: #fff !important;
    }

    .regv2-download i {
        font-size: 17px;
    }

    .regv2-download--alt {
        background-image: none;
        background-color: #fff;
        color: var(--brand-700) !important;
        border-color: #cfd6e4;
        box-shadow: none;
    }

        .regv2-download--alt:hover {
            background-color: var(--brand-050);
            border-color: var(--brand-500);
            color: var(--brand-800) !important;
        }

/* the greeting above the download buttons */
.regv2-greet {
    text-align: center;
    margin-bottom: 16px;
}

    .regv2-greet .LabelStyles,
    .regv2-greet span {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--ink-900) !important;
    }

/* inline search row: field + button side by side */
.regv2-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

    .regv2-search .form-control {
        flex: 1 1 240px;
        max-width: 100% !important;
    }

    .regv2-search .btn {
        flex: 0 0 auto;
    }

/* reusable secondary button (Reset / Cancel) */
.regv2 .btn.regv2-secondary {
    background-image: none !important;
    background-color: #fff !important;
    color: var(--ink-700) !important;
    border-color: #cfd6e4 !important;
    box-shadow: none;
}

    .regv2 .btn.regv2-secondary:hover,
    .regv2 .btn.regv2-secondary:focus {
        background-color: #f7f9fc !important;
        border-color: var(--ink-300) !important;
        color: var(--ink-700) !important;
    }

.regv2-gridwrap {
    overflow-x: auto;
    border-radius: var(--r-md);
    background: #fff;
}

/* A grid with only a few columns should not be stretched across a wide screen -
   it leaves huge gaps between the values. Cap the width and left-align it. */
.regv2 .regv2-gridwrap--compact {
    max-width: 720px;
}

    .regv2 .regv2-gridwrap--compact table.Admingridtable {
        width: 100% !important;
    }

        /* keep numbers narrow so the descriptive column takes the slack */
        .regv2 .regv2-gridwrap--compact table.Admingridtable th:first-child,
        .regv2 .regv2-gridwrap--compact table.Admingridtable td:first-child {
            width: 70px !important;
            text-align: center !important;
        }

        .regv2 .regv2-gridwrap--compact table.Admingridtable th:nth-child(2),
        .regv2 .regv2-gridwrap--compact table.Admingridtable td:nth-child(2) {
            width: 170px !important;
            text-align: left !important;
        }

        .regv2 .regv2-gridwrap--compact table.Admingridtable td:nth-child(2) {
            font-weight: 700;
            color: var(--brand-700);
        }

        .regv2 .regv2-gridwrap--compact table.Admingridtable td:nth-child(3),
        .regv2 .regv2-gridwrap--compact table.Admingridtable th:nth-child(3) {
            text-align: left !important;
        }

/* -- dashboard report blocks (Home.aspx) --------------------------------
   The 11 report sections all follow the same shape:
     <u><asp:Label text="... wise List"></u>  +  DataList emitting
     <table border="1"> with an inline-blue header row.
   Styling those two hooks turns every block into a card without touching
   the DataList templates or their data binding.
   -------------------------------------------------------------------- */
.regv2-dash u {
    display: block;
    text-decoration: none !important;
    text-align: left;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-900);
    padding: 13px 16px;
    background: linear-gradient(180deg,#fbfcff,#fff);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin-top: 18px;
}

    .regv2-dash u .LabelStyle,
    .regv2-dash u span {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: var(--ink-900) !important;
        text-decoration: none !important;
    }

/* the scroll frame (or the table itself when there is none) closes the card */
.regv2-dash [style*="overflow-y"] {
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: #fff;
    padding: 0 !important;
    box-shadow: var(--sh-1);
}

.regv2-dash table[border="1"] {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid var(--line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    overflow: hidden;
    font-size: 13.5px;
    background: #fff;
    box-shadow: var(--sh-1);
    margin-bottom: 4px;
}

.regv2-dash [style*="overflow-y"] table[border="1"] {
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.regv2-dash table[border="1"] td {
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding: 9px 12px !important;
    text-align: left !important;
    vertical-align: middle;
}

    .regv2-dash table[border="1"] td span,
    .regv2-dash table[border="1"] td .LabelStyle {
        font-size: 13.5px !important;
        color: var(--ink-900) !important;
    }

    /* header cells carry the inline blue background from the HeaderTemplate */
    .regv2-dash table[border="1"] td[style*="#9814a7"] {
        background: var(--brand-800) !important;
        border-top: 0 !important;
        padding: 11px 12px !important;
        position: sticky;
        top: 0;
        z-index: 2;
    }

        .regv2-dash table[border="1"] td[style*="#9814a7"] span,
        .regv2-dash table[border="1"] td[style*="#9814a7"] .LabelStyle {
            color: #fff !important;
            font-size: 12px !important;
            letter-spacing: .05em;
            text-transform: uppercase;
            font-weight: 700 !important;
        }

.regv2-dash table[border="1"] tr:nth-child(even) td {
    background: #fafbfe;
}

    .regv2-dash table[border="1"] tr:nth-child(even) td[style*="#9814a7"] {
        background: var(--brand-800) !important;
    }

/* counts read as numbers, right-aligned */
.regv2-dash table[border="1"] td[align="right"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* summary lines under the reports */
.regv2-dash .regv2-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    padding: 16px 18px;
    margin: 18px 0;
    text-align: left;
}

/* ===============================================================
   REFINEMENT LAYER  --  registration page visual pass
   Appended deliberately: it overrides the base rules above without
   editing them, so the original design system stays intact and this
   pass can be reverted on its own.
   =============================================================== */

/* -- 1. neutral palette ----------------------------------------
   Purple is now reserved for primary actions and the active step;
   everything structural moves to neutral slate so the eye is drawn
   to what is actually clickable.                                  */
.regv2 {
    --line: #e5e7eb;          /* card + divider borders            */
    --line-input: #d1d5db;    /* input borders (stronger than card) */
    --page: #f8fafc;          /* page / inset background           */
    --tile-ink: #334155;
}

.regv2 .regv2-card,
.regv2 .regv2-scard {
    border-color: var(--line);
}

/* card headers: flat neutral, no gradient, no purple chip */
.regv2 .regv2-cardhd {
    background: var(--page);
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
}

    .regv2 .regv2-cardhd .ico {
        background: #eef2f7;
        color: var(--tile-ink);
    }

/* -- 2. consistent 24px internal padding ------------------------ */
.regv2 .regv2-card > .row,
.regv2 .regv2-card > .panel-body,
.regv2 .regv2-card > div > .row {
    padding-left: 24px;
    padding-right: 24px;
}

.regv2 .regv2-card {
    padding-bottom: 12px;
}

.regv2 .regv2-scard {
    padding: 20px;
}

/* -- 3. inputs: neutral borders, calmer focus ------------------- */
.regv2 .form-control,
.regv2 input[type=text],
.regv2 input[type=password],
.regv2 textarea,
.regv2 select {
    border: 1px solid var(--line-input);
    background: #fff;
}

    .regv2 .form-control:focus,
    .regv2 select:focus,
    .regv2 textarea:focus {
        border-color: var(--brand-600);
        box-shadow: 0 0 0 3px rgba(152,20,167,.12);
    }

/* -- 4. sticky sidebar ------------------------------------------ */
.regv2-side {
    position: sticky;
    top: 20px;
    align-self: start;
}

/* -- 5. two-column field grid ----------------------------------
   Wraps a run of legacy .row blocks and lays them out two-up, which
   cuts roughly 40% off the height of the long Step 3 form. Each row
   keeps its own label/field split, so no server control moves.     */
.regv2 .regv2-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
    padding: 0 24px;
}

    .regv2 .regv2-grid2 > .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        display: block;
    }

    /* inside the grid the label sits above the field, not beside it */
    .regv2 .regv2-grid2 > .row > [class*="col-md-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: left !important;
        padding-left: 0;
        padding-right: 0;
    }

    .regv2 .regv2-grid2 > .row .aligntext {
        text-align: left !important;
        margin-bottom: 4px;
    }

    /* let a field span the full width when it needs the room */
    .regv2 .regv2-grid2 > .regv2-span2 {
        grid-column: 1 / -1;
    }

@media (max-width: 780px) {
    .regv2 .regv2-grid2 {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 18px;
    }
}

/* -- 6. selectable tiles for Food Preference --------------------
   Same treatment the category list already uses, so the two radio
   groups on the page read as one control type and both give a
   finger-sized tap target on mobile.                              */
.regv2 .regv2-tiles table,
.regv2 table.regv2-tiles {
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

    .regv2 .regv2-tiles tbody,
    .regv2 .regv2-tiles tr {
        display: contents;
    }

    .regv2 .regv2-tiles td {
        display: block;
        padding: 0 !important;
        min-width: 0;
    }

    .regv2 .regv2-tiles label {
        display: block;
        height: 100%;
        white-space: normal;
        font-size: 15px !important;
        padding: 13px 16px 13px 42px !important;
        border-radius: var(--r-md) !important;
        line-height: 1.3;
    }

        .regv2 .regv2-tiles label::before {
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
        }

/* -- 7. fee-structure modal ------------------------------------- */
.regv2-feebtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line-input);
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    text-decoration: none !important;
}

    .regv2-feebtn:hover {
        border-color: var(--brand-600);
        color: var(--brand-600);
    }

/* Same pill as .regv2-feebtn, kept as its own class (not a shared selector)
   because .regv2-feebtn is also the jQuery hook that pops the fee-structure
   modal open - this button needs its click to reach the server instead. */
.regv2-changecat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e0a800;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #b8860b;
    cursor: pointer;
    text-decoration: none !important;
}

    .regv2-changecat-btn:hover {
        background: #fff8e6;
        border-color: #c69500;
    }

.regv2-modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

    .regv2-modal.is-open {
        display: flex;
    }

.regv2-modal__box {
    background: #fff;
    border-radius: 16px;
    max-width: 980px;
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(15,23,42,.3);
}

.regv2-modal__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}

    .regv2-modal__hd h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--ink-900);
    }

.regv2-modal__x {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-500);
    padding: 4px 8px;
    border-radius: 8px;
}

    .regv2-modal__x:hover {
        background: var(--page);
        color: var(--ink-900);
    }

.regv2-modal__body {
    padding: 20px 24px 24px;
    overflow: auto;
}

/* -- 8. compact banner on the registration page -----------------
   The conference artwork is tall; capping it here lifts the form
   above the fold without touching the master page for other pages. */
body.regv2-compact .banner img,
body.regv2-compact .header img[alt="Logo"] {
    max-height: 210px;
    width: auto !important;
    object-fit: cover;
}

@media (max-width: 780px) {
    body.regv2-compact .banner img,
    body.regv2-compact .header img[alt="Logo"] {
        max-height: 120px;
    }
}

/* -- 9. page background ----------------------------------------- */
body.regv2-compact {
    background: var(--page, #f8fafc);
}

/* -- 10. purple only where it means "act here" -------------------
   The page-title band and the amount strip were both solid brand
   purple, which competed with the Submit button. They become quiet
   surfaces; the amount itself keeps the brand colour so the eye
   still lands on the number.                                       */
.regv2 .regv2-pagetitle {
    background: #fff;
    border-bottom: 1px solid var(--line);
    color: var(--ink-900);
    padding: 16px 10px;
    font-size: 19px;
    font-weight: 700;
}

.regv2 .regv2-amount {
    background: var(--page) !important;
    background-image: none !important;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink-900) !important;
}

    .regv2 .regv2-amount .LabelStyles,
    .regv2 .regv2-amount .LabelStyle {
        color: var(--ink-700) !important;
    }

    /* the payable figure keeps the brand colour */
    .regv2 .regv2-amount [id$="lblAmount"] {
        color: var(--brand-600) !important;
        font-size: 20px !important;
    }

/* -- 11. action buttons on small screens -------------------------
   Reset/Submit sat in a right-aligned flex row with a hard 150px
   min-width, so on a phone they overflowed and wrapped raggedly.
   Below 620px they stack full width with the primary action first. */
@media (max-width: 620px) {
    .regv2 .regv2-actions {
        flex-direction: column-reverse;   /* Submit above Reset */
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        padding: 16px;
    }

        .regv2 .regv2-actions input[type=submit] {
            width: 100%;
            min-width: 0;
            margin: 0;
        }
}

/* -- 12. fee modal must clear the sticky navigation ---------------
   .is-sticky .main-navigation takes z-index: 9999 once the header
   sticks, so the purple menu bar was painting over the modal. The
   modal also gets portalled to <body> on open (see the page script),
   which keeps it out of any ancestor stacking context.             */
.regv2-modal,
body > .regv2-modal {
    z-index: 10050;
}