/*  =========================================================================================
    Razakar portal - public registration forms
    =========================================================================================

    The same design language as the sign-in page and the dashboard shell, so a razakar meets
    one product rather than three. Loaded by _SignUpLayout, which is shared by the event
    registration form, the applicant form, sign-up and the sector pages - they all get it.

    THIS IS THE PAGE THE PUBLIC FILLS IN, so nothing here changes layout mechanics: the step
    wizard, the two-column grid and the validation plumbing are left exactly as they are. Only
    colour, type, spacing and the states of controls.

    Particular care on the DROPDOWN MENUS. bootstrap-select renders its list as a popup of
    .dropdown-item elements, and the states that matter are hover, selected and the active
    keyboard row. Get one of those wrong and the text is the same colour as what is behind it -
    which is exactly the fault this file exists to avoid, not create.
    ========================================================================================= */

:root {
    --rz-brand-deep: #2B0B5E;
    --rz-brand-mid:  #3F1178;
    --rz-brand:      #5B21B6;
    --rz-brand-lift: #7C3AED;
    --rz-brand-wash: #F3EFFE;

    --rz-ink:     #1C1830;
    --rz-muted:   #6E6A85;
    --rz-line:    #E7E4EF;
    --rz-ground:  #F7F6FA;
    --rz-surface: #FFFFFF;

    --rz-danger:  #C0392B;
    --rz-ok:      #2F7A4F;

    --rz-radius:    14px;
    --rz-radius-sm: 10px;
    --rz-shadow: 0 1px 2px rgba(28,24,48,.04), 0 8px 24px -12px rgba(28,24,48,.18);
}

body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--rz-ground);
    color: var(--rz-ink);
}

/* =========================================================================== masthead */
.kt-portlet {
    background: var(--rz-surface);
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius);
    box-shadow: var(--rz-shadow);
}

.kt-portlet__head {
    border-bottom: 1px solid var(--rz-line);
    min-height: 74px;
    padding: 0 22px;
}

.kt-portlet__head-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rz-ink);
    letter-spacing: -.01em;
    line-height: 1.3;
}

/* =========================================================================== the steps */
#StepsInfoDiv { padding-block: 8px 4px; }

#progressbar { display: flex; justify-content: space-between; list-style: none; margin: 0 0 18px; }

#progressbar li {
    position: relative;
    flex: 1;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rz-muted);
}

#progressbar li strong { font-weight: 600; }

#progressbar li.active { color: var(--rz-brand); }

/* The bar under the step markers. Slimmer than the striped original, and in the brand. */
.progress {
    height: 6px !important;
    background: var(--rz-line);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--rz-brand) !important;
    background-image: none !important;      /* the stripes read as "busy", not as progress */
    border-radius: 999px;
    transition: width .35s ease;
}

/* "Step One" and "Step 1 - 3" */
.fs-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--rz-ink);
    letter-spacing: -.02em;
    margin: 0;
}

.steps {
    font-size: .92rem;
    font-weight: 600;
    color: var(--rz-muted);
    margin: 0;
    text-align: right;
}

/* =========================================================================== sections */
/*  overflow MUST stay visible. It was `hidden` to keep the section header inside the rounded
    corner, and that quietly clipped every dropdown whose list runs past the bottom of its
    card - the options were drawn, then cut off mid-row. The header gets its own radius
    instead, which buys the same corner without trapping the popups.  */
.card.card-default {
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius);
    box-shadow: var(--rz-shadow);
    overflow: visible;
    background: var(--rz-surface);
}

/*  The section name. It was a flat grey strip; now it reads as a heading, with a brand rule
    marking where each part of the form begins.  */
.card.card-default > .card-header {
    background: var(--rz-brand-wash);
    border-bottom: 1px solid var(--rz-line);
    border-left: 3px solid var(--rz-brand);
    color: var(--rz-brand-deep);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 13px 18px;
    /* 1px inside the card's own border, so the two curves sit concentric. */
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

/* Same reason: a dropdown opening near the foot of the panel must not be cut off by it. */
.card.card-default > .card-body { overflow: visible; }

.card.card-default > .card-body { padding: 22px 18px 8px; }

/* =========================================================================== fields */
.card-body .form-group.row { margin-bottom: 18px; align-items: flex-start; }

/*  Puts the caption's FIRST LINE on the same centre line as the first line of its control.
    14px is measured, not guessed: a 44px control centres its text 14px below where a caption
    with this line-height centres its own. It has to be the first line specifically - a caption
    that wraps to three lines has a box centre nowhere near the control it belongs to.

    It must NOT reach a radio or checkbox. Those are also <label>s, but Metronic builds them as
    a bare text node with the visual control ABSOLUTELY POSITIONED at top:1px inside them, so
    padding moves the text and leaves the circle behind - which is how the two came apart.  */
.card-body label:not(.kt-radio):not(.kt-checkbox) {
    font-size: .86rem;
    font-weight: 600;
    color: var(--rz-ink);
    line-height: 1.45;
    padding-top: 14px;
    margin-bottom: 0;
}

/* The required marker. It was a bare red asterisk jammed against the label. */
mandatory {
    color: var(--rz-danger);
    font-weight: 700;
    margin-left: 2px;
}

.form-control {
    min-height: 44px;
    border-radius: var(--rz-radius-sm);
    border: 1px solid var(--rz-line);
    color: var(--rz-ink);
    font-size: .93rem;
    background: var(--rz-surface);
    box-shadow: 0 1px 2px rgba(28,24,48,.03);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: #A9A5BC; }
.form-control:hover { border-color: #D7D2E4; }

.form-control:focus {
    border-color: var(--rz-brand-lift);
    box-shadow: 0 0 0 4px rgba(124,58,237,.13);
    outline: none;
}

/*  A textarea's text starts at its TOP, not its middle, so it does not gain the 14px an input
    gets from centring. Its own top padding makes up the difference - otherwise every caption
    would line up with its input and sit 4px low against every textarea.  */
textarea.form-control { min-height: 92px; padding-top: 14px; }

/*  Urdu wants its own face. The FONT is safe to set on anything carrying the class, but the
    READING DIRECTION is not: the class also sits on column wrappers in this form, and setting
    direction there reverses the column order - putting the label to the right of its own input
    and breaking the row. So direction is set only on the controls that hold Urdu text.  */
.urdufont, .urdu {
    font-family: "Noto Naskh Arabic", "Jameel Noori Nastaleeq", serif;
}

input.urdufont, textarea.urdufont,
input.urdu, textarea.urdu {
    direction: rtl;
    text-align: right;
}

/* =========================================================================== dropdowns */
/*  The closed control.  */
.bootstrap-select > .btn.dropdown-toggle,
.bootstrap-select > button.btn {
    min-height: 44px;
    border-radius: var(--rz-radius-sm) !important;
    border: 1px solid var(--rz-line) !important;
    background: var(--rz-surface) !important;
    color: var(--rz-ink) !important;
    font-size: .93rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(28,24,48,.03);
    padding-inline: 14px;
}

.bootstrap-select > .btn.dropdown-toggle:hover { border-color: #D7D2E4 !important; }

.bootstrap-select > .btn.dropdown-toggle:focus,
.bootstrap-select.show > .btn.dropdown-toggle {
    border-color: var(--rz-brand-lift) !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,.13) !important;
    outline: none !important;
}

/* "Please Select" reads as a placeholder, not as an answer. */
.bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner { color: var(--rz-ink); }
.bootstrap-select.bs-placeholder > .btn.dropdown-toggle .filter-option-inner-inner { color: #A9A5BC; }

/*  THE OPEN LIST. Every state below sets BOTH a background and a text colour, deliberately -
    setting only one is how a row ends up the same colour as its text.  */
.bootstrap-select .dropdown-menu {
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-sm);
    box-shadow: 0 18px 44px -18px rgba(28,24,48,.42);
    padding: 6px;
    background: var(--rz-surface);
}

.bootstrap-select .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 9px 12px;
    font-size: .9rem;
    color: var(--rz-ink);
    background: transparent;
}

/*  bootstrap-select does NOT put the option's words in the .dropdown-item. It wraps them in
    an inner <span class="text">, and the theme gives that span its own grey. Colouring only
    the row therefore changes nothing a reader can see: on the purple selected row the row
    went white while the span stayed #595D6E, which is 1.4:1 - invisible.

    Inheriting is the fix rather than another fixed colour, because it makes the span follow
    whatever each state below sets on its row, with no state able to be forgotten here.  */
.bootstrap-select .dropdown-menu .dropdown-item .text,
.bootstrap-select .dropdown-menu .dropdown-item span,
.bootstrap-select .dropdown-menu li a .text { color: inherit !important; }

/* Pointer over a row, and the row the keyboard is on. */
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item.active:not(.selected),
.bootstrap-select .dropdown-menu li a.dropdown-item:hover {
    background: var(--rz-brand-wash) !important;
    color: var(--rz-brand-deep) !important;
}

/* The option actually chosen. */
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item.selected.active,
.bootstrap-select .dropdown-menu li.selected a.dropdown-item {
    background: var(--rz-brand) !important;
    color: #fff !important;
    font-weight: 600;
}

.bootstrap-select .dropdown-menu .dropdown-item.selected .check-mark { color: #fff !important; }

/* A disabled row must still be legible - greyed, not invisible. */
.bootstrap-select .dropdown-menu .dropdown-item.disabled,
.bootstrap-select .dropdown-menu .disabled a.dropdown-item {
    color: #A9A5BC !important;
    background: transparent !important;
}

/* The search box inside a searchable dropdown. */
.bootstrap-select .bs-searchbox { padding: 6px 6px 8px; }
.bootstrap-select .bs-searchbox .form-control {
    min-height: 38px;
    border-radius: 8px;
    font-size: .88rem;
}

/* "No results" - it had no colour of its own and inherited whatever was around it. */
.bootstrap-select .no-results {
    color: var(--rz-muted);
    background: transparent;
    font-size: .86rem;
    padding: 10px 12px;
}

/* Select-all / deselect-all on multi-selects. */
.bootstrap-select .bs-actionsbox .btn {
    background: var(--rz-surface);
    border: 1px solid var(--rz-line);
    color: var(--rz-brand);
    font-weight: 600;
}
.bootstrap-select .bs-actionsbox .btn:hover { background: var(--rz-brand-wash); }

/* =========================================================== radios and checkboxes */
.kt-radio > input:checked ~ span,
.kt-checkbox > input:checked ~ span {
    background: var(--rz-brand) !important;
    border-color: var(--rz-brand) !important;
}

/*  The control is an 18px box pinned at top:1px, so the caption beside it has to sit on a
    20px line for the two to share a centre: 1 + 18/2 = 10, and 20/2 = 10. Anything else and
    the circle floats above or below its own word.

    The 12px then drops the whole group onto the same centre line as the caption in the column
    beside it, exactly as the 14px does for an input.

    THE MARGIN IS ON THE RADIO ITSELF, NOT ON A PARENT. An earlier version put it on
    ".form-group.row > div > .kt-radio", which requires the radio to be a DIRECT child of the
    column. It is on some rows and not on others - the venue and admission questions wrap
    theirs in a further <div id="...">  - so half the form was aligned and half was 7px out,
    with the circles sitting above their own captions. Matching the element itself cannot
    care how deeply it is nested.  */
.card-body .kt-radio,
.card-body .kt-checkbox {
    color: var(--rz-ink);
    font-size: .9rem;
    font-weight: 500;
    padding-top: 0;
    line-height: 20px;
    min-height: 20px;
    margin-top: 12px;
    margin-bottom: 0;
}

/*  Radios sit as siblings on one line, so the gap between "Yes" and "No" comes from this
    margin rather than from the row.  */
.card-body .kt-radio + .kt-radio,
.card-body .kt-checkbox + .kt-checkbox { margin-left: 22px; }

input[type="radio"], input[type="checkbox"] { accent-color: var(--rz-brand); }

/* =========================================================================== buttons */
.btn {
    border-radius: var(--rz-radius-sm);
    font-weight: 600;
    font-size: .9rem;
    padding: .62rem 1.3rem;
    transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}

.btn.btn-primary,
.btn.next, .btn.submit {
    background: var(--rz-brand);
    border-color: var(--rz-brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(91,33,182,.22);
}
.btn.btn-primary:hover, .btn.next:hover, .btn.submit:hover {
    background: var(--rz-brand-lift);
    border-color: var(--rz-brand-lift);
}
.btn.btn-primary:active { transform: translateY(1px); }

.btn.btn-secondary, .btn.previous {
    background: var(--rz-surface);
    border: 1px solid var(--rz-line);
    color: var(--rz-ink);
}
.btn.btn-secondary:hover, .btn.previous:hover { background: var(--rz-ground); border-color: #D7D2E4; }

.button-container { padding-block: 6px 18px; }

/* =========================================================================== validation */
.form-control.error, .form-control:invalid.is-invalid { border-color: var(--rz-danger); background: #FEFAF9; }

label.error, .help-block, .invalid-feedback {
    color: var(--rz-danger) !important;
    font-size: .78rem;
    font-weight: 500;
    margin-top: 5px;
}

/* =========================================================================== responsive */
@media (max-width: 768px) {
    .card-body label { padding-top: 0; margin-bottom: 6px; }
    .card.card-default > .card-body { padding: 18px 14px 4px; }
    .steps { text-align: left; }
    #progressbar li { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* =========================================================== bidi in mixed labels */
/*  A label like "مکمل نام (اردو میں)" was painting as "(مکمل نام (اردو میں" - the brackets
    at each end are direction-NEUTRAL characters, so in an ltr label they take the label's
    direction and end up on the wrong sides of the Urdu they enclose. Nothing is wrong with
    the source text; it is the bidi algorithm resolving the neutrals against an ltr paragraph.

    `plaintext` resolves each label against its OWN first strong character instead: a label
    that starts in Urdu is laid out rtl, one that starts in English ("Are You an Alim ? /
    کیا آپ عالم ہیں؟") stays ltr with the Urdu as a correct rtl run inside it. This is a
    text-level property, so unlike `direction` it cannot reorder the columns of the grid -
    which is the trap that flipped the Urdu name row earlier.  */
.card-body label { unicode-bidi: plaintext; }

/*  A parenthesised Urdu gloss inside an otherwise English label is its own unit: isolating it
    keeps its brackets with it rather than letting them bind to the English around it.  */
.card-body label span.urdufont,
.card-body label span.urdu { unicode-bidi: isolate; }

/* =====================================================================================
   STACKED FIELDS - the event registration form only (.rz-reg is on its outer portlet)
   =====================================================================================

   Every field was a caption in a one-third column beside its control, two pairs to a row:
   a four-column grid of slivers. Captions like "Admission Type for your circle (Public
   circles allow anyone to apply...)" wrapped to six lines in that sliver, rows took the
   height of their longest caption, and no amount of nudging offsets made it look current -
   the problem was the pattern, not the pixels.

   Here the caption sits ABOVE its control and both span the field's full column. Nothing
   in the markup changes: the label column and control column are simply both made full
   width, so they stack. The side-by-side rules earlier in this file stay in force for the
   other pages that load it.

   ONE BOOTSTRAP DETAIL EVERYTHING BELOW DEPENDS ON: every .col-* carries width:100%. A flex
   item with flex-basis:auto takes its WIDTH as its basis, so "flex: 0 0 auto" on a column
   does not mean "as wide as its content" - it means "a whole line". That is what first
   dropped Add New onto its own line, crushed the skip notice's text into a sliver, and at
   phone width let the area picker collapse to zero width. Any column given an auto basis
   here also gets width:auto.  */

.rz-reg .card.card-default > .card-body { padding: 24px 24px 6px; }

.rz-reg .card-body .form-group.row { margin-bottom: 22px; }

.rz-reg .card-body .form-group.row > .col-md-4,
.rz-reg .card-body .form-group.row > .col-md-8,
.rz-reg .card-body .form-group.row > .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/*  "Seerat Circle Area": a picker plus an Add New button, on the line under the caption.
    The picker's basis is 1px, not 0: a zero-basis item still "fits" on the caption's
    already-full line and gets laid out there at zero width - invisible on a phone. One pixel
    cannot fit, so it wraps to the next line, then grows to take the room.  */
.rz-reg .card-body .form-group.row > .col-md-6 {
    flex: 1 1 1px;
    width: auto;
    max-width: none;
    min-width: 0;
}
.rz-reg .card-body .form-group.row > .col-md-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
}
.rz-reg .card-body .form-group.row > .col-md-2 .btn { margin-left: 0 !important; min-height: 44px; }

/*  The caption. Layout properties only - see the next rule for why font is separate.  */
.rz-reg .card-body label:not(.kt-radio):not(.kt-checkbox) {
    display: block;
    padding-top: 0;
    margin-bottom: 7px;
    font-size: 13px;          /* px, not rem: Metronic sets the root to 13px, so .875rem was 11.4px */
    font-weight: 600;
    color: var(--rz-ink);
}

/*  The view's own <style> sets label font and leading through "#UserForm label" - an ID
    selector, so it has been beating this file all along and captions were rendering in
    Poppins while every control was in Plus Jakarta Sans. Restated here with the ID so it
    wins. The Nastaliq face stays in the stack, after the Latin one, so Urdu captions keep
    the lettering people are used to while Latin text gets the form's own face.

    text-align:start is what puts an Urdu caption on the RIGHT, over the right-to-left input
    it names, while English captions stay left. unicode-bidi:plaintext (set earlier) already
    works out each caption's own direction; the column was forcing text-align:left on top of
    it, which pinned "مکمل نام" to the far side of the field from where its text is typed.  */
.rz-reg #UserForm label {
    font-family: "Plus Jakarta Sans", 'JameelNooriNastaliqRegular', "Noto Naskh Arabic",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rz-reg #UserForm .form-group label:not(.kt-radio):not(.kt-checkbox) {
    line-height: 1.45;
    text-align: start;
}

/*  Radios keep their 20px line - the circle is pinned at top:1px and needs it to stay
    centred on its word. The 12px from the base rule now reads as the gap under the caption,
    which puts the options' centre where a 44px input's text sits in the next column.  */
.rz-reg #UserForm .kt-radio,
.rz-reg #UserForm .kt-checkbox { line-height: 20px; }
.rz-reg .card-body .kt-radio + .kt-radio { margin-left: 28px; }

/*  Text in a textarea starts at its top; 12px puts it level with where an input's text sits.
    The base 14px was only there to meet a side caption, which no longer exists here.  */
.rz-reg textarea.form-control { padding-top: 12px; }

/* ----------------------------------------------------------------- skip-venue notice */
/*  Was a saturated amber bar holding a full-size bold <h3> - the loudest thing on the page,
    for an optional opt-out. Now a quiet notice: tinted, one line, the checkbox beside it.  */
.rz-reg .card-body .form-group.row.alert.alert-warning {
    background: #FFF8E8;
    border: 1px solid #F1D79B;
    border-radius: var(--rz-radius-sm);
    color: #6B4A00;
    padding: 14px 16px;
    margin: 0 0 26px;
    /*  flex-start, not center: on a phone the sentence wraps to two lines, and centring put the
        checkbox between them - 6px below the first line it belongs to. The checkbox's 20px
        line and the text's first line share a centre, so pinning both to the top keeps them
        level at every width.  */
    align-items: flex-start;
    flex-wrap: nowrap;
}
.rz-reg .card-body .alert.alert-warning > .col-md-1 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 14px 0 0;
}
.rz-reg .card-body .alert.alert-warning > .col-md-11 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}
.rz-reg .card-body .alert.alert-warning label { margin: 0; padding: 0; cursor: pointer; }
.rz-reg .card-body .alert.alert-warning .kt-checkbox { margin-top: 0; }
.rz-reg label[for="SkipSeeratCircleVenueInformation"] h3 {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    color: #6B4A00;
    margin: 0;
}
.rz-reg label[for="SkipSeeratCircleVenueInformation"] h3 b { font-weight: 600; }

/* ----------------------------------------------------------------- one text scale */
/*  Sizes here are px on purpose. Metronic sets the root font to 13px, so every rem above is a
    fraction of 13 - which is how captions ended up at 11.4px and dropdown text at 12.1px
    beside 13px inputs: three sizes for what should read as one. Controls are 14px; captions
    13px. On a phone the view's own rules raise controls to 16px (with !important, so iOS
    does not zoom on focus) and that is left to win.  */
.rz-reg .form-control,
.rz-reg .bootstrap-select > .btn.dropdown-toggle { font-size: 14px; }

/*  An answer and an empty control must look different at a glance, and must look the SAME
    whether the control is a text box or a picker. Inputs showed a grey placeholder; pickers
    showed "Select Country" in near-black semi-bold, so an empty picker read as answered.  */
.rz-reg .bootstrap-select > .btn.dropdown-toggle,
.rz-reg .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner { font-weight: 400; }

.rz-reg .form-control::placeholder { color: #75718B; opacity: 1; }

/*  .rz-empty is set by the view's markEmptyPicker(). bootstrap-select's own bs-placeholder
    class only appears when it draws a title= placeholder, and this form uses a real empty
    <option> instead - so the class never came and the grey never applied.  */
.rz-reg .bootstrap-select.rz-empty > .btn.dropdown-toggle .filter-option-inner-inner { color: #75718B; }

/* ----------------------------------------------------------------- notice checkbox */
/*  The checkbox's square is absolutely positioned inside a label with no width, so its column
    collapsed to 14px and the square hung 4px into the sentence. Giving the label the square's
    own size makes the column real, and the column's padding becomes the gap.  */
.rz-reg .card-body .alert.alert-warning .kt-checkbox {
    display: block;
    width: 18px;
    height: 20px;
    padding: 0;
    margin: 0;
}

/* =====================================================================================
    SELECT2 - the two pickers this stylesheet never covered
    =====================================================================================

    Everything above dresses native inputs and bootstrap-select. The registration form also
    carries TWO select2 controls - "City (Where Student Want to Apply)" and "Location
    (Preferred Area of the circle)" - and select2 ships its own default skin, so those two
    sat in the middle of the form looking like a different product: shorter, squarer, a
    thinner border, a grey default focus ring and an unstyled search box.

    All of it is scoped to .rz-reg. Five other public pages share this file and two of them
    also use select2; leaving them alone is deliberate.
    ===================================================================================== */

/* ------------------------------------------------------------------ the closed control */
.rz-reg .select2-container { width: 100% !important; }

.rz-reg .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 46px;
    padding: 0;
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-sm);
    background: var(--rz-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rz-reg .select2-container--default .select2-selection--single:hover {
    border-color: #D7D2E4;
}

.rz-reg .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 14px;
    padding-right: 38px;
    color: var(--rz-ink);
    font-weight: 400;
}

.rz-reg .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
}

/*  The placeholder must read as "nothing chosen yet", not as an answer. select2 puts the
    placeholder in its own span, so this does not touch a real selection. */
.rz-reg .select2-container--default .select2-selection__placeholder {
    color: #75718B;
    font-weight: 400;
}

/*  Focus. select2's own default is a grey 1px outline that is easy to miss; this matches the
    ring the other controls on this form already use. */
.rz-reg .select2-container--default.select2-container--focus .select2-selection--single,
.rz-reg .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--rz-brand);
    box-shadow: 0 0 0 3px rgba(91,33,182,.13);
    outline: 0;
}

/* ------------------------------------------------------------------ the open panel */
.select2-container--default .select2-dropdown.rz-dd,
.rz-reg .select2-container--default .select2-dropdown {
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-sm);
    box-shadow: var(--rz-shadow);
    overflow: hidden;
}

/*  The search box inside the panel. It was the browser's default box - square, full bleed,
    hard against the first result. */
.select2-container--default .select2-dropdown.rz-dd .select2-search--dropdown,
.rz-reg .select2-container--default .select2-search--dropdown {
    padding: 10px 10px 8px;
    border-bottom: 1px solid #F0EDF7;
    background: var(--rz-surface);
}

.select2-container--default .select2-dropdown.rz-dd .select2-search--dropdown .select2-search__field,
.rz-reg .select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-sm);
    background: var(--rz-ground);
    font-size: 15px;
    color: var(--rz-ink);
}

.select2-container--default .select2-dropdown.rz-dd .select2-search--dropdown .select2-search__field:focus,
.rz-reg .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: 0;
    border-color: var(--rz-brand);
    box-shadow: 0 0 0 3px rgba(91,33,182,.13);
    background: var(--rz-surface);
}

/* ------------------------------------------------------------------ the results */
.select2-container--default .select2-dropdown.rz-dd .select2-results__options,
.rz-reg .select2-container--default .select2-results__options {
    max-height: 320px;
}

.select2-container--default .select2-dropdown.rz-dd .select2-results__option,
.rz-reg .select2-container--default .select2-results__option {
    padding: 11px 14px;
    font-size: 15px;
    color: var(--rz-ink);
    line-height: 1.45;
}

/*  Both states set a background AND a colour on purpose. Setting only one leaves the other
    inherited from whichever theme rule wins, which is how you get white text on white. */
.select2-container--default .select2-dropdown.rz-dd .select2-results__option--highlighted[aria-selected],
.rz-reg .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--rz-brand-wash);
    color: var(--rz-ink);
}

.select2-container--default .select2-dropdown.rz-dd .select2-results__option[aria-selected=true],
.rz-reg .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--rz-brand);
    color: #fff;
}

.select2-container--default .select2-dropdown.rz-dd .select2-results__message,
.rz-reg .select2-container--default .select2-results__message {
    padding: 14px;
    color: var(--rz-muted);
    font-size: 14.5px;
}

/* ------------------------------------------------------------------ phones */
/*  A control under 44px is awkward to hit, and iOS zooms the page in on any field whose text
    is under 16px - which then leaves the form scrolled sideways. */
@media (max-width: 768px) {
    .rz-reg .select2-container--default .select2-selection--single { min-height: 48px; }

    .rz-reg .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 46px;
        font-size: 16px;
    }

    .rz-reg .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

    .select2-container--default .select2-dropdown.rz-dd .select2-search--dropdown .select2-search__field,
    .rz-reg .select2-container--default .select2-search--dropdown .select2-search__field { font-size: 16px; }

    .select2-container--default .select2-dropdown.rz-dd .select2-results__option,
    .rz-reg .select2-container--default .select2-results__option { font-size: 15.5px; padding: 13px 14px; }

    /* The same reason, for the controls the rest of this file dresses. */
    .rz-reg .form-control,
    .rz-reg .bootstrap-select > .btn.dropdown-toggle { font-size: 16px; }
}

/* =====================================================================================
    THE CIRCLE PICKER - "Location (Preferred Area of the circle)"
    =====================================================================================
    Its rows are drawn by the view, which needs the panel to be wider than the field and to
    keep its grouping legible. The row itself is styled in the view beside the markup that
    builds it; only what belongs to the panel is here.
    ===================================================================================== */
.select2-container--default .select2-dropdown.circle-dd { border-radius: var(--rz-radius-sm); }

.select2-container--default .select2-dropdown.circle-dd .select2-results__option { padding: 0; }

.select2-container--default .select2-dropdown.circle-dd .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-dropdown.circle-dd .select2-results__option[aria-selected=true] {
    background: transparent;
    color: inherit;
}

/* =====================================================================================
    ONE CONTROL SIZE FOR THE WHOLE FORM
    =====================================================================================

    Measured on the built page, the registration form was drawing its controls at three
    different sizes, because three different widgets draw them:

        text inputs          38px tall, 11.44px text, 8px corners
        bootstrap-select     44px tall, 14px    text, 10px corners
        select2              63px tall, 13px    text, 10px corners

    Reading down a column of fields, nothing lined up and the text inputs were small enough
    to be genuinely hard to read. This settles all three on one size.

    The select2 height was not a height at all: its inner .select2-selection__rendered was
    inheriting 8.45px of vertical padding on top of the 44px line box, so the control grew
    by 17px that nobody asked for.

    Scoped to .rz-reg. The other five pages sharing this file keep what they had.
    ===================================================================================== */
.rz-reg .card-body input.form-control,
.rz-reg .card-body select.form-control,
.rz-reg .card-body textarea.form-control,
.rz-reg .card-body .bootstrap-select > button.btn,
.rz-reg .card-body .select2-container--default .select2-selection--single {
    min-height: 46px;
    font-size: 15px;
    border-radius: var(--rz-radius-sm);
}

.rz-reg .card-body input.form-control,
.rz-reg .card-body select.form-control {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.4;
}

.rz-reg .card-body textarea.form-control {
    min-height: 96px;
    line-height: 1.5;
}

/*  The 17px of stray padding. Height comes from the line box alone now. */
.rz-reg .card-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 44px;
    font-size: 15px;
}

.rz-reg .card-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

/*  An input group (the +92 dial code beside a phone number) squares off its inner corners so
    the two halves meet. Only the outer corners should stay round. */
.rz-reg .card-body .input-group > .form-control:not(:last-child),
.rz-reg .card-body .input-group > .bootstrap-select:not(:last-child) > button.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.rz-reg .card-body .input-group > .form-control:not(:first-child),
.rz-reg .card-body .input-group > .bootstrap-select:not(:first-child) > button.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*  Captions. Two of them were under 13px, which is below what most people read comfortably
    on a form they are filling in for the first time. */
.rz-reg .card-body label:not(.kt-radio):not(.kt-checkbox),
.rz-reg #UserForm .form-group label:not(.kt-radio):not(.kt-checkbox) {
    font-size: 14px;
    line-height: 1.4;
}

/*  The circle picker's own dropdown is appended to <body>, so it sits OUTSIDE .rz-reg and
    none of the scoped rules above can reach it. These match on the panel's own class. */
.select2-container--default .select2-dropdown.circle-dd .select2-search--dropdown {
    padding: 10px 10px 8px;
    border-bottom: 1px solid #F0EDF7;
}

.select2-container--default .select2-dropdown.circle-dd .select2-search--dropdown .select2-search__field {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-sm);
    background: var(--rz-ground);
    font-size: 15px;
    color: var(--rz-ink);
}

.select2-container--default .select2-dropdown.circle-dd .select2-search--dropdown .select2-search__field:focus {
    outline: 0;
    border-color: var(--rz-brand);
    box-shadow: 0 0 0 3px rgba(91,33,182,.13);
    background: var(--rz-surface);
}

@media (max-width: 768px) {
    .rz-reg .card-body input.form-control,
    .rz-reg .card-body select.form-control,
    .rz-reg .card-body textarea.form-control,
    .rz-reg .card-body .bootstrap-select > button.btn,
    .rz-reg .card-body .select2-container--default .select2-selection--single {
        min-height: 48px;
        font-size: 16px;   /* under 16px, iOS zooms the page in on focus */
    }

    .rz-reg .card-body .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 46px;
        font-size: 16px;
    }

    .rz-reg .card-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

    .select2-container--default .select2-dropdown.circle-dd .select2-search--dropdown .select2-search__field { font-size: 16px; }

    .rz-reg .card-body label:not(.kt-radio):not(.kt-checkbox) { font-size: 14.5px; }
}

/*  The radio captions ("Male" / "Female") were left out of the caption rule above because
    .kt-radio also carries the control's own layout. They were drawing at 11.7px - the
    smallest readable text on the form, on the one question everybody has to answer. Only
    the type is set here; the positioning rules earlier in this file still apply. */
.rz-reg .card-body label.kt-radio,
.rz-reg .card-body label.kt-checkbox,
.rz-reg #UserForm .kt-radio,
.rz-reg #UserForm .kt-checkbox {
    font-size: 14.5px;
}

@media (max-width: 768px) {
    .rz-reg .card-body textarea.form-control { min-height: 92px; }

    .rz-reg .card-body label.kt-radio,
    .rz-reg .card-body label.kt-checkbox,
    .rz-reg #UserForm .kt-radio,
    .rz-reg #UserForm .kt-checkbox { font-size: 15px; }
}

/* ----------------------------------------------------------- selected circle summary */
/*  Confirms the circle the applicant just picked. Quiet on purpose: it is an answer, not a
    warning, and it sits directly under the field that produced it. */
.rz-reg .rz-circle-summary {
    background: var(--rz-brand-wash);
    border: 1px solid #E3DAFB;
    border-radius: var(--rz-radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;
}

.rz-reg .rz-circle-summary__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rz-brand);
}

/*  Caption column fixed, value column takes the rest. A definition list because that is
    what this is - three labelled facts. */
.rz-reg .rz-circle-summary__list {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 8px 16px;
    margin: 0;
}

.rz-reg .rz-circle-summary__list dt {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rz-muted);
    margin: 0;
}

.rz-reg .rz-circle-summary__list dd {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--rz-ink);
    margin: 0;
    overflow-wrap: anywhere;
    min-height: 1em;
}

@media (max-width: 768px) {
    /*  148px of caption leaves too little for an address on a phone, so the pairs stack. */
    .rz-reg .rz-circle-summary__list { grid-template-columns: 1fr; gap: 2px; }
    .rz-reg .rz-circle-summary__list dd { margin-bottom: 10px; font-size: 15px; }
    .rz-reg .rz-circle-summary__list dd:last-child { margin-bottom: 0; }
}