/* =================================================================
   NVN Registration — Multistep Form Styles
   Primary color from style.css (--primary-color: #0071A9)
   Modern minimalist field redesign + responsive
================================================================= */

/* ----------------------------------------------------------------
   1. Form container & rhythm
---------------------------------------------------------------- */
/* The card owns the tokens as well as the form: the step header, the
   stepper and the footer bar all sit outside the <form> element now. */
.nvn-ms-shell,
.nvn-multistep-form {
    --nvn-field-radius: 10px;
    --nvn-field-border: #d6dde6;
    --nvn-field-border-hover: #b9c4d0;
    --nvn-field-border-focus: var(--primary-color, #0071A9);
    --nvn-field-bg: #fff;
    --nvn-label-color: #364150;
    --nvn-muted: #6b7785;
    --nvn-error: #d8000c;
    --nvn-error-bg: #fdecee;
    --nvn-error-border: #f5c2c7;
    --nvn-success: #2EAE49;
    --nvn-step-gap: 16px;
    --nvn-gap-field: 16px;
    --nvn-gap-answer: 8px;
    --nvn-gap-block: 26px;

    color: #2a3340;
    font-size: 15px;
    line-height: 1.55;
}

/* Bootstrap gives every column `margin-top: var(--bs-gutter-y)` - that is
   the whole mechanism by which a row spaces its wrapped lines. Zeroing it
   here left folded rows with no gap at all, so a label landed flush against
   the control on the line above. The gutter is set per row instead. */
.nvn-multistep-form .row > [class*="col-"] {
    margin-top: var(--bs-gutter-y, 0);
}

/*
 * The student template pins mt-0 on its field columns. That utility is
 * !important, so it cancelled the grid's vertical gutter and left every
 * label sitting directly on top of the field it labels - while the
 * instructor form, which does not carry it, spaced correctly. Vertical
 * rhythm is the grid's job on both.
 */
.nvn-multistep-form .nvn-ms-step-inner > [class*="col-"].mt-0,
.nvn-multistep-form .row > [class*="col-"].mt-0 {
    margin-top: var(--bs-gutter-y, 0) !important;
}

/*
 * Rows are spaced by the grid's own vertical gutter and by nothing else.
 * This rule used to add a second 22px underneath every column on top of the
 * 18px gutter above the next one, so each field sat 40px from its neighbour
 * and a label 48px from the box it labelled.
 */
.nvn-multistep-form .nvn-ms-step-inner > [class*="col-"] {
    margin-bottom: 0;
}

/*
 * Caption columns take the same gutter as everything else.
 *
 * An earlier version pulled them tighter with a negative margin, but the two
 * templates write their caption columns differently - one carries mb-2, the
 * other nothing - so the same pull left a 9px gap on the instructor form and
 * overlapped the field by 7px on the student one. One gutter in both
 * directions is what the eye reads as even, and it is the same number
 * wherever it lands.
 */
.nvn-multistep-form .nvn-ms-step-inner > [class*="col-"]:has(> label):not(:has(input, select, textarea)),
.nvn-multistep-form .row > [class*="col-"]:has(> label):not(:has(input, select, textarea)) {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   2. Labels
---------------------------------------------------------------- */
.nvn-multistep-form label {
    color: var(--nvn-label-color);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    letter-spacing: 0;
    line-height: 1.35;
}

.nvn-multistep-form label .text-danger {
    color: var(--nvn-error) !important;
    font-size: 14px !important;
    font-weight: 700;
    margin-left: 2px;
}

/* Inline labels for radios/checkboxes */
.nvn-multistep-form label.d-flex {
    margin-bottom: 0;
    font-weight: 500;
    color: #2a3340;
}

/* ----------------------------------------------------------------
   3. Inputs / Selects / Textareas — minimalist style
---------------------------------------------------------------- */
.nvn-multistep-form input[type="text"],
.nvn-multistep-form input[type="email"],
.nvn-multistep-form input[type="password"],
.nvn-multistep-form input[type="tel"],
.nvn-multistep-form input[type="number"],
.nvn-multistep-form input[type="date"],
.nvn-multistep-form input[type="url"],
.nvn-multistep-form select,
.nvn-multistep-form textarea {
    width: 100%;
    background: var(--nvn-field-bg);
    border: 1.5px solid var(--nvn-field-border);
    border-radius: var(--nvn-field-radius);
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: #1f2937;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 0;
}

.nvn-multistep-form input::placeholder,
.nvn-multistep-form textarea::placeholder {
    color: #9aa3af;
    opacity: 1;
}

.nvn-multistep-form input:hover,
.nvn-multistep-form select:hover,
.nvn-multistep-form textarea:hover {
    border-color: var(--nvn-field-border-hover);
}

.nvn-multistep-form input:focus,
.nvn-multistep-form select:focus,
.nvn-multistep-form textarea:focus {
    border-color: var(--nvn-field-border-focus);
    box-shadow: 0 0 0 4px rgba(0, 113, 169, 0.12);
}

/* Date field consistency (height differs across browsers) */
.nvn-multistep-form input[type="date"] {
    padding: 10px 14px;
    min-height: 44px;
}

/* Selects: chevron arrow */
.nvn-multistep-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
    background-color: var(--nvn-field-bg);
}

.nvn-multistep-form.rtl select,
.rtl .nvn-multistep-form select {
    background-position: left 14px center;
    padding-right: 14px;
    padding-left: 38px;
}

.nvn-multistep-form select.bg-silver {
    background-color: var(--nvn-field-bg) !important;
}

/* Ensure select2 widgets visually match the input fields */
.nvn-multistep-form .select2-container .select2-selection--single {
    height: 44px;
    border: 1.5px solid var(--nvn-field-border) !important;
    border-radius: var(--nvn-field-radius) !important;
    background: var(--nvn-field-bg) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: none !important;
}
.nvn-multistep-form .select2-container .select2-selection--single:hover {
    border-color: var(--nvn-field-border-hover) !important;
}
.nvn-multistep-form .select2-container--open .select2-selection--single,
.nvn-multistep-form .select2-container--focus .select2-selection--single {
    border-color: var(--nvn-field-border-focus) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 169, 0.12) !important;
    outline: none;
}
.nvn-multistep-form .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding-left: 14px;
    padding-right: 28px;
    color: #1f2937;
    font-size: 15px;
}
.nvn-multistep-form .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 8px;
}
.nvn-multistep-form .select2-container .select2-selection--single .select2-selection__placeholder {
    color: #000;
}

/* Error-state mirror for select2 wrappers (set by JS sync()) */
.nvn-multistep-form .select2-container.has-error .select2-selection--single {
    border-color: var(--nvn-error) !important;
    background: #fff7f8 !important;
}
.nvn-multistep-form .select2-container.is-valid .select2-selection--single {
    border-color: var(--nvn-success) !important;
}

/* Dropdown panel — match radius & subtle shadow */
.select2-container--default .select2-dropdown {
    border: 1.5px solid var(--primary-color, #0071A9) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(15, 35, 55, 0.12);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2eaf1 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color, #0071A9) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 169, 0.10) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-color, #0071A9) !important;
    color: #fff !important;
}
.nvn-multistep-form.rtl .select2-container .select2-selection--single .select2-selection__rendered,
.rtl .nvn-multistep-form .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 28px;
    padding-right: 14px;
}
.nvn-multistep-form.rtl .select2-container .select2-selection--single .select2-selection__arrow,
.rtl .nvn-multistep-form .select2-container .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 8px;
}

/* ----------------------------------------------------------------
   4. Radio / Checkbox — modern accent
---------------------------------------------------------------- */
.nvn-multistep-form input[type="radio"],
.nvn-multistep-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #0071A9);
    border-radius: 4px;
    cursor: pointer;
    margin-right: 6px;
    flex-shrink: 0;
}

/* A choice is drawn as a pill. Keyed off the label actually containing a
   radio or a checkbox rather than off the `gap-4` utility that happened to
   be on its parent, so a group styled any other way still looks the same. */
.nvn-multistep-form label:has(> input[type="radio"]),
.nvn-multistep-form label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fbfcfd;
    border: 1.5px solid var(--nvn-field-border);
    padding: 9px 16px;
    border-radius: var(--nvn-field-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin: 0;
    line-height: 1.3;
}

.nvn-multistep-form label:has(> input[type="radio"]):hover,
.nvn-multistep-form label:has(> input[type="checkbox"]):hover {
    border-color: var(--nvn-field-border-hover);
    background: #f5f8fb;
}

.nvn-multistep-form label:has(> input:checked) {
    border-color: var(--primary-color, #0071A9);
    background: rgba(0, 113, 169, 0.06);
    color: var(--primary-color, #0071A9);
    font-weight: 600;
}

/* Password toggle button */
.nvn-multistep-form .password-wrapper {
    position: relative;
}
.nvn-multistep-form .password-wrapper .toggle-pwd {
    color: var(--nvn-muted);
    transition: color 0.15s;
}
.nvn-multistep-form .password-wrapper .toggle-pwd:hover {
    color: var(--primary-color, #0071A9);
}

/* ----------------------------------------------------------------
   5. Form group spacing
---------------------------------------------------------------- */
.nvn-multistep-form .tutor-form-group {
    margin-bottom: 0;
}

.nvn-multistep-form .tutor-form-group + .tutor-form-group {
    margin-top: var(--nvn-gap-field);
}

/* ----------------------------------------------------------------
   5b. One rhythm for the conditional question blocks
   ----------------------------------------------------------------
   The yes/no questions and the sections they reveal were spaced with
   whatever Bootstrap utility was to hand - mt-0 here, mt-4 there, mb-4
   on one row and nothing on the next - so a question sat 8px from its own
   answer and 46px from the one before it. These three values replace all
   of that: a question is separated from the previous block, its answer
   sits close underneath it, and the fields it reveals are one field-gap
   below that.
---------------------------------------------------------------- */
.nvn-multistep-form h6 {
    margin-top: var(--nvn-gap-block);
    margin-bottom: var(--nvn-gap-answer);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #22303f;
}

.nvn-multistep-form h6:first-child {
    margin-top: 0;
}

/* The radio row that answers a question. */
.nvn-multistep-form h6 + .d-flex,
.nvn-multistep-form h6 + .row > .d-flex:first-child {
    margin-top: 0 !important;
    margin-bottom: var(--nvn-gap-field);
}

/* Anything a question reveals. */
.nvn-multistep-form [id^="toggle"],
.nvn-multistep-form [id$="-to-toggle"],
.nvn-multistep-form #has_nid,
.nvn-multistep-form #has_birth_cert {
    margin-top: var(--nvn-gap-field);
}

/* Utility gutters defer to the same scale, so a row marked g-4 does not
   quietly open up wider than the row above it. */
.nvn-multistep-form .row[class*="g-"] {
    --bs-gutter-x: var(--nvn-gap-field);
    --bs-gutter-y: var(--nvn-gap-field);
}

.nvn-multistep-form .row.g-4.mb-4,
.nvn-multistep-form .row.mb-4 {
    margin-bottom: var(--nvn-gap-block) !important;
}

/* A bare heading dropped straight into a .row is a flex item with no
   column class; give it the full width it was written to have. */
.nvn-multistep-form .row > h6 {
    width: 100%;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ----------------------------------------------------------------
   6. Section heading inside step
---------------------------------------------------------------- */
.nvn-multistep-form .nvn-ms-step > .nvn-ms-step-inner > .col-12 > h3.fw-bold,
.nvn-multistep-form .nvn-ms-step > .nvn-ms-step-inner > div > h3.fw-bold,
.nvn-multistep-form .nvn-ms-step > .col-12 > h3.fw-bold,
.nvn-multistep-form .nvn-ms-step > div > h3.fw-bold {
    /* Hide original section header — we render the active title in the
       progress header. Keep DOM intact for legacy. */
    display: none;
}

/* ----------------------------------------------------------------
   7. The registration card: side pane + form pane
---------------------------------------------------------------- */
.nvn-ms-shell {
    /* The side pane is the theme's primary blue, the same one the page
       banners use, shaded a little towards the bottom so the panel reads as
       a surface rather than a flat block. */
    --nvn-aside-bg: var(--primary-color, #0071A9);
    --nvn-aside-bg-2: color-mix(in srgb, var(--primary-color, #0071A9) 82%, #ffffff);
    --nvn-aside-fg: #ffffff;
    --nvn-aside-muted: rgba(255, 255, 255, 0.68);
    --nvn-aside-rule: rgba(255, 255, 255, 0.16);

    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    align-items: stretch;
    margin: 18px 0 32px;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(13, 38, 59, 0.10);
    overflow: hidden;
}

/* ---- left pane ---- */
.nvn-ms-aside {
    position: relative;
    padding: 38px 30px 32px;
    background: var(--nvn-aside-bg);
    background: linear-gradient(170deg, var(--nvn-aside-bg-2) 0%, var(--nvn-aside-bg) 68%);
    color: var(--nvn-aside-fg);
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.nvn-ms-aside__title {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.12;
    font-weight: 800;
    color: var(--nvn-aside-fg);
}

.nvn-ms-aside__lead {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--nvn-aside-muted);
}

/* ---- stepper ---- */
.nvn-ms-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: nvn-step;
}

.nvn-ms-stepper__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 0 22px;
    color: var(--nvn-aside-muted);
}

.nvn-ms-stepper__item:last-child {
    padding-bottom: 0;
}

/* The rule joining one number to the next. */
.nvn-ms-stepper__item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 19px;
    top: 40px;
    bottom: 2px;
    width: 1px;
    background: var(--nvn-aside-rule);
}

.nvn-ms-stepper__num {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--nvn-aside-rule);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nvn-ms-stepper__label {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}

.nvn-ms-stepper__item.is-active {
    color: var(--nvn-aside-fg);
}

.nvn-ms-stepper__item.is-active .nvn-ms-stepper__num {
    background: #fff;
    border-color: #fff;
    color: var(--nvn-aside-bg);
}

.nvn-ms-stepper__item.is-completed {
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.nvn-ms-stepper__item.is-completed .nvn-ms-stepper__num {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* A completed number turns into a tick, so "done" reads at a glance. */
.nvn-ms-stepper__item.is-completed .nvn-ms-stepper__num {
    font-size: 0;
}
.nvn-ms-stepper__item.is-completed .nvn-ms-stepper__num::after {
    content: "\2713";
    font-size: 15px;
    line-height: 1;
}

/* ---- intro text, moved here from above the fields ---- */
/*
 * No height cap and no scroller. The instructions are the first thing a
 * visitor needs and they were being shown through a 190px window on a phone,
 * which is the one place there is least reason to hide text: the page
 * scrolls anyway, so the panel can simply be as tall as its contents.
 */
.nvn-ms-aside__intro {
    margin: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--nvn-aside-rule);
    font-size: 13px;
    line-height: 1.6;
    color: var(--nvn-aside-muted);
}

.nvn-ms-aside__intro .fs-18 {
    font-size: 13px !important;
}

.nvn-ms-aside__intro strong {
    display: block;
    margin-bottom: 8px;
    color: var(--nvn-aside-fg);
    font-size: 14px;
}

.nvn-ms-aside__intro ul {
    margin: 10px 0 0;
    padding-inline-start: 18px;
}

.nvn-ms-aside__intro li + li {
    margin-top: 7px;
}

.nvn-ms-aside__intro br {
    display: none;
}

.nvn-ms-aside__intro .text-danger {
    color: #ffb4bb !important;
    font-size: 13px !important;
}

.nvn-ms-aside__note {
    margin: auto 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--nvn-aside-rule);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nvn-aside-muted);
}

/* ---- right pane ---- */
.nvn-ms-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 38px 40px 0;

    /* The grid inside is written in Bootstrap's viewport breakpoints, but
       this pane is only about two thirds of the page. A col-xl-3 that was
       275px wide across the full container is 219px here - too narrow for a
       pair of radio pills or a country dropdown. Measuring the pane rather
       than the window lets those rows fold on their own. */
    container-type: inline-size;
    container-name: nvnpane;
}

@container nvnpane (max-width: 1040px) {
    .nvn-ms-main .nvn-multistep-form .col-xl-3,
    .nvn-ms-main .nvn-multistep-form .col-xxl-3,
    .nvn-ms-main .nvn-multistep-form .col-xxl-9 {
        width: 50%;
    }
}

@container nvnpane (max-width: 560px) {
    .nvn-ms-main .nvn-multistep-form [class*="col-"] {
        width: 100%;
    }
}

.nvn-ms-pane-head {
    margin-bottom: 30px;
}

.nvn-ms-eyebrow {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color, #0071A9);
}

.nvn-ms-pane-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 800;
    color: #10202e;
}

.nvn-ms-pane-lead {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--nvn-muted, #6b7785);
}

.nvn-ms-main .nvn-multistep-form {
    flex: 1 1 auto;
}

/* A Bootstrap row carries a negative inline margin that assumes a padded
   container around it. The form is not one, so the outermost grid hung half
   a gutter past the pane on each side - just enough to clip the border of
   the last field in a row. Zero it on the outermost row only (a nested row
   inside a column still wants its negative margin) and inset the header by
   the same amount, so the heading and the first field share one edge. */
.nvn-ms-main .nvn-multistep-form > .row {
    margin-inline: 0;
}

.nvn-ms-pane-head {
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/*
 * One gap in both directions.
 *
 * Bootstrap ships a 24px horizontal gutter and no vertical one at all, so
 * fields sat 24px apart side by side and flush on top of each other once a
 * row folded - which is why the Nationality label ended up touching the
 * radio above it. Both axes now take the same value, so a grid of fields
 * reads as an even mesh however it wraps.
 */
.nvn-ms-main .nvn-multistep-form .row {
    --bs-gutter-x: var(--nvn-gap-field);
    --bs-gutter-y: var(--nvn-gap-field);
}

/* One gap between a label and whatever it labels. The markup carried mt-3
   on the gender radios, mt-2 on the country select and nothing at all on
   the date field, so three controls sharing a line started at three
   different heights. */
/* The templates carry mb-2 on some labels and nothing on others, and
   Bootstrap's utility is !important, so the caption gap has to be reset the
   same way to stay one predictable value. Without this the pull below lands
   on an 8px margin in one place and a 0 in another, and a label ends up
   touching its own field. */
.nvn-ms-main .nvn-multistep-form label {
    margin-bottom: 0 !important;
}

/*
 * A label that shares a cell with the thing it labels gets its gap here,
 * because there is no grid gutter between them to do the job - which is why
 * the Nationality and Current Residence labels ended up sitting on top of
 * their own dropdowns.
 */
.nvn-multistep-form label + select,
.nvn-multistep-form label + textarea,
.nvn-multistep-form label + .nvn-datefield,
.nvn-multistep-form label + input:not([type="radio"]):not([type="checkbox"]),
.nvn-multistep-form label + .nvn-q__answer,
.nvn-multistep-form label + .tutor-form-group {
    margin-top: var(--nvn-gap-answer) !important;
}

/*
 * Select2 leaves the original <select> in place, hidden, and draws its own box
 * after it - so `label + select` lands the gap on something nobody can see
 * while the visible control stays flush against the label. That is why
 * Nationality and Current Residence still looked wrong after the labels above
 * them had been fixed.
 */
.nvn-multistep-form label + select + .select2-container,
.nvn-multistep-form label + .select2-container {
    margin-top: var(--nvn-gap-answer) !important;
}

/* A choice pill keeps its own breathing room. */
.nvn-ms-main .nvn-multistep-form label:has(> input[type="radio"]),
.nvn-ms-main .nvn-multistep-form label:has(> input[type="checkbox"]) {
    margin-bottom: 0 !important;
}

.nvn-ms-main .nvn-multistep-form > .row label + .tutor-form-group,
.nvn-ms-main .nvn-multistep-form label + .tutor-form-group,
.nvn-ms-main .nvn-multistep-form label + select,
.nvn-ms-main .nvn-multistep-form label + input,
.nvn-ms-main .nvn-multistep-form label + textarea,
.nvn-ms-main .nvn-multistep-form label + .select2-container {
    margin-top: var(--nvn-gap-answer) !important;
}

/* Radio pills are taller than an input, so a column of them would otherwise
   push its own row taller than the fields beside it for no reason. */
.nvn-ms-main .nvn-multistep-form .tutor-form-group.d-flex > label {
    margin-top: 0 !important;
}

/* The heading and lead now read from the pane header above. */
.nvn-ms-heading-source,
.nvn-ms-lead-source {
    display: none !important;
}

/* ----------------------------------------------------------------
   7b. Question card
   ----------------------------------------------------------------
   A run of questions where the answer to one decides what is asked next,
   drawn as a single card with a numbered rail. Used by the identity
   documents and by the educational background
   ----------------------------------------------------------------
   Three questions asked in order, where each "No" hands the visitor on
   to the next one. Drawn as one card with a numbered rail down the side,
   so it reads as a single "prove who you are" step rather than as three
   unrelated questions that happen to appear and disappear.
---------------------------------------------------------------- */
.nvn-qblock {
    border: 1px solid #e3eaf2;
    border-radius: 14px;
    background: #fbfcfe;
    padding: 22px 24px 8px;
}

.nvn-qblock__head {
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e8eef4;
}

.nvn-qblock__title {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: #22303f;
}

.nvn-qblock__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--nvn-muted, #6b7785);
    max-width: 62ch;
}

/* ---- one question ---- */
.nvn-q {
    position: relative;
    padding-block: 18px;
}

.nvn-q + .nvn-q {
    border-top: 1px dashed #e1e8f0;
}

/* The number, and the rail joining it to the question below. */
/*
 * The number is a flex item of the question row, not an absolutely positioned
 * decoration beside it. Taking it out of the flow meant its vertical position
 * had to be guessed against the label's line height and the pill's height, and
 * the guess was always a few pixels out. As a flex item it simply centres on
 * whatever the row turns out to be.
 */
.nvn-q__step {
    flex: 0 0 26px;
    align-self: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #d6dde6;
    color: var(--nvn-muted, #6b7785);
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nvn-q:has(input:checked) .nvn-q__step {
    background: var(--primary-color, #0071A9);
    border-color: var(--primary-color, #0071A9);
    color: #fff;
}

.nvn-q__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;

    /* The row carries .tutor-form-group so the engine hangs its error message
       here, and Tutor's own stylesheet makes that class `position: relative`.
       That would capture the absolutely positioned number and drop it on top
       of the question text, so the row is pinned back to static and the rail
       stays measured from the card edge. */
    position: static;
}

.nvn-q__label {
    flex: 1 1 260px;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #2a3340;
}

/* The answer keeps to the right of the question on a wide pane and drops
   under it on a narrow one, rather than being pinned to a grid column
   that leaves a hand's width of blank between the two. */
.nvn-q__answer {
    flex: 0 0 auto;
    gap: 10px;
    flex-wrap: wrap;
}

/* The error belongs under the question it is about, across the full width
   of the row - not squeezed into the little box that holds the two pills. */
.nvn-q__row > .nvn-ms-error-msg {
    flex-basis: 100%;
    order: 99;
    margin-inline-start: 0;
}

/* The row carries has-error, so keep the red outline on the choices rather
   than on the row itself. */
.nvn-q__row.has-error > .nvn-q__answer label {
    border-color: var(--nvn-error);
}

/* A card can number its own questions rather than have the numbers written
   into the markup, which keeps them right when a question is added, removed
   or reordered. */
.nvn-qblock--counted {
    counter-reset: nvn-q;
}
.nvn-qblock--counted > .nvn-q > .nvn-q__row > .nvn-q__step::before {
    counter-increment: nvn-q;
    content: counter(nvn-q);
}

/* ---- what an answer reveals ---- */
.nvn-q__reveal {
    /* Indented past the number, so it reads as belonging to the question
       above rather than to the card. */
    margin-inline-start: 42px;
    margin-top: 18px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e6edf4;
    border-inline-start: 3px solid var(--primary-color, #0071A9);
    border-radius: 10px;
}

.nvn-q__reveal > .row {
    --bs-gutter-y: var(--nvn-gap-field);
}

/* ---- questions nested inside a revealed panel ---- */
/*
 * The education branches ask further questions once they open, written as a
 * heading followed by a row of choices. They get the same numbered rail as a
 * top-level question without needing the full row markup, so the voice stays
 * the same all the way down.
 */
.nvn-q__reveal {
    counter-reset: nvn-sub;
}

.nvn-multistep-form .nvn-q__reveal h6,
.nvn-multistep-form .row > .nvn-q__reveal h6,
.nvn-q__reveal h6 {
    position: relative;
    padding-inline: 32px 0;
    margin-top: var(--nvn-gap-block);
    margin-bottom: var(--nvn-gap-answer);
}

.nvn-q__reveal h6:first-child {
    margin-top: 0;
}

.nvn-q__reveal h6::before {
    counter-increment: nvn-sub;
    content: counter(nvn-sub, lower-alpha);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef4f9;
    border: 1px solid #dbe5ee;
    color: var(--nvn-muted, #6b7785);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* The choices belong to the heading above them, so they line up with its
   text rather than with the rail. */
.nvn-multistep-form .nvn-q__reveal h6 + .d-flex,
.nvn-multistep-form .nvn-q__reveal h6 + .row > .d-flex:first-child {
    padding-inline-start: 32px;
    margin-top: 0 !important;
}

/* A section a nested question reveals steps in one more level. */
.nvn-q__reveal [id^="toggle"] {
    padding-inline-start: 32px;
    border-inline-start: 2px solid #eaf1f7;
    margin-inline-start: 10px;
}

.nvn-q__note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nvn-muted, #6b7785);
}

/* A file input is a browser widget; the most that can be done is to stop it
   looking foreign beside the text fields. */
.nvn-multistep-form input.nvn-file {
    padding: 8px 10px;
    font-size: 13.5px;
    background: #fff;
}

@media (max-width: 767px) {
    .nvn-qblock {
        padding: 18px 16px 4px;
    }
    .nvn-q__reveal {
        margin-inline-start: 0;
    }
    .nvn-q__answer {
        flex-basis: 100%;
    }
    .nvn-q__reveal {
        padding: 14px;
    }
}

/* ----------------------------------------------------------------
   7c. Date, as three dropdowns
   ----------------------------------------------------------------
   Day, month and year side by side, folding to one per line when there
   is not room for three. Month takes the extra width because its names
   are the long ones in every language.
---------------------------------------------------------------- */
.nvn-datefield {
    display: grid;
    /* Year, month, day - the order the day list depends on. Month takes the
       extra width because its names are the long ones in every language. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 10px;
}

.nvn-datefield select {
    width: 100%;
}

@media (max-width: 480px) {
    .nvn-datefield {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----------------------------------------------------------------
   8. Step transitions
---------------------------------------------------------------- */
/* Hide every wrapped step by default; only the active one is shown.
   `!important` is necessary to defeat Bootstrap's d-flex / d-block
   utility classes that may live on the same element. */
.nvn-multistep-form .nvn-ms-step,
.nvn-ms-step {
    display: none !important;
    animation: nvnMsFade 0.32s ease;
}

.nvn-multistep-form .nvn-ms-step.is-active,
.nvn-ms-step.is-active {
    display: block !important;
}

@keyframes nvnMsFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------
   9. Field error / valid states (real-time)
   IMPORTANT: every error / availability message is forced to render
   on its OWN row directly UNDER the field — even when the parent is
   a flex container (radio groups, dial-code + phone, etc.).
---------------------------------------------------------------- */
.nvn-multistep-form .nvn-ms-error-msg {
    display: none;
    color: var(--nvn-error);
    background: var(--nvn-error-bg);
    border: 1px solid var(--nvn-error-border);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 6px;

    /* Force onto its own line in every layout context */
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    order: 99;
    box-sizing: border-box;
}
.nvn-multistep-form .has-error .nvn-ms-error-msg:not(:empty) {
    display: block;
}

.nvn-multistep-form .has-error input,
.nvn-multistep-form .has-error select,
.nvn-multistep-form .has-error textarea {
    border-color: var(--nvn-error) !important;
    background: #fff7f8;
}
.nvn-multistep-form .has-error input:focus,
.nvn-multistep-form .has-error select:focus,
.nvn-multistep-form .has-error textarea:focus {
    box-shadow: 0 0 0 4px rgba(216, 0, 12, 0.10) !important;
}
.nvn-multistep-form .has-error .select2-selection {
    border-color: var(--nvn-error) !important;
}

.nvn-multistep-form .is-valid input:not([type=radio]):not([type=checkbox]),
.nvn-multistep-form .is-valid select,
.nvn-multistep-form .is-valid textarea {
    border-color: var(--nvn-success) !important;
}

/* Any flex row of controls wraps rather than overflowing. A pair of radio
   pills needs about 235px and the columns they sit in can be 219px, which
   is how the "Female" pill came to be drawn on top of the date field
   beside it. Wrapping makes the row taller; overflowing made it wrong. */
.nvn-multistep-form .tutor-form-group.d-flex {
    flex-wrap: wrap;
    gap: 10px 16px;
}

.nvn-multistep-form .has-error.d-flex {
    flex-wrap: wrap;
}

/* Live availability messages (existing template ids) — same forced
   bottom-row layout. !important is needed to defeat the inline
   `style="display: none;"` already present in the templates. */
.nvn-multistep-form #email-notexist-msg,
.nvn-multistep-form #email-exist-msg,
.nvn-multistep-form #username-notexist-msg,
.nvn-multistep-form #username-exist-msg {
    /* Hidden by default here as well as inline in the template, so that
       whether a message is on screen is decided by .is-shown alone. While
       the inline style was the only thing holding them down, any script
       that cleared it - or animated them open - left a message visible
       that nothing could take back. */
    display: none;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    border-width: 1px;
    border-style: solid;
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    order: 99;
    box-sizing: border-box;
}
.nvn-multistep-form #email-notexist-msg.is-shown,
.nvn-multistep-form #username-notexist-msg.is-shown {
    display: block !important;
    color: var(--nvn-error);
    background: var(--nvn-error-bg);
    border-color: var(--nvn-error-border);
}
.nvn-multistep-form #email-exist-msg.is-shown,
.nvn-multistep-form #username-exist-msg.is-shown {
    display: block !important;
    color: var(--nvn-success);
    background: #e7f7ec;
    border-color: #b7e1c1;
}

/* ----------------------------------------------------------------
   10. Controls (Prev / Next / Submit)
---------------------------------------------------------------- */
.nvn-ms-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    /* A footer bar for the pane: it runs edge to edge, so it is pulled back
       out of the pane's padding rather than inset by it. */
    margin: 30px -40px 0;
    padding: 20px 40px;
    border-top: 1px solid #e8eef4;
    background: #fbfcfe;
}

/*
 * The button's own shape, independent of the bar it usually sits in. It was
 * scoped to .nvn-ms-controls, so the same button on the settings screen kept
 * only its colour and fell back to the dashboard's default border and
 * padding - a green fill inside a grey box.
 */
.nvn-ms-btn {
    min-width: 130px;
    padding: 11px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14.5px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.18s, background 0.18s, color 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

.nvn-ms-controls .nvn-ms-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 113, 169, 0.18);
}

.nvn-ms-btn-prev {
    background: #fff;
    color: var(--primary-color, #0071A9);
    border-color: var(--primary-color, #0071A9);
}
.nvn-ms-btn-prev:hover {
    background: var(--primary-color, #0071A9);
    color: #fff;
}

.nvn-ms-btn-next {
    background: var(--primary-color, #0071A9);
    color: #fff;
}
.nvn-ms-btn-next:hover {
    background: #005a87;
}

.nvn-ms-btn-submit {
    background: var(--secondary-color, #2EAE49);
    color: #fff;
}
.nvn-ms-btn-submit:hover {
    background: #248d3a;
}

.nvn-ms-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.nvn-ms-controls-spacer {
    flex: 1;
}

.nvn-multistep-form .nvn-original-submit {
    display: none !important;
}

/* ----------------------------------------------------------------
   11. Step error banner
---------------------------------------------------------------- */
.nvn-ms-step-banner {
    margin-inline: 0;
    display: none;
    background: var(--nvn-error-bg);
    border: 1px solid var(--nvn-error-border);
    color: #842029;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
}
.nvn-ms-step-banner.is-shown {
    display: block;
    animation: nvnMsFade 0.25s ease;
}

/* ----------------------------------------------------------------
   12. OTP modal
---------------------------------------------------------------- */
.nvn-otp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 35, 55, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: nvnMsFade 0.18s ease;
}
.nvn-otp-modal {
    background: #fff;
    width: 100%;
    max-width: 460px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    padding: 28px 26px 24px;
    text-align: center;
    position: relative;
    animation: nvnMsFade 0.25s ease;
}
.nvn-otp-modal h3 {
    color: var(--primary-color, #0071A9);
    margin: 8px 0 6px;
    font-size: 20px;
    font-weight: 700;
}
.nvn-otp-modal p {
    color: var(--nvn-muted);
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.5;
}
.nvn-otp-modal .nvn-otp-email {
    color: #1f2937;
    font-weight: 600;
    word-break: break-all;
}
.nvn-otp-modal .nvn-otp-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 113, 169, 0.1);
    color: var(--primary-color, #0071A9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 8px;
}
.nvn-otp-input-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
    direction: ltr;
}
.nvn-otp-digit {
    width: 46px;
    height: 54px;
    border: 1.5px solid var(--nvn-field-border);
    border-radius: 10px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    -moz-appearance: textfield;
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
    border-color: var(--primary-color, #0071A9);
    box-shadow: 0 0 0 4px rgba(0, 113, 169, 0.12);
}
.nvn-otp-digit::-webkit-outer-spin-button,
.nvn-otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nvn-otp-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
    flex-wrap: wrap;
}
.nvn-otp-btn {
    padding: 11px 22px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: transform 0.12s, background 0.18s, color 0.18s;
    min-width: 130px;
}
.nvn-otp-btn-primary {
    background: var(--primary-color, #0071A9);
    color: #fff;
}
.nvn-otp-btn-primary:hover {
    background: #005a87;
}
.nvn-otp-btn-secondary {
    background: #fff;
    color: var(--primary-color, #0071A9);
    border-color: var(--primary-color, #0071A9);
}
.nvn-otp-btn-secondary:hover {
    background: rgba(0, 113, 169, 0.06);
}
.nvn-otp-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.nvn-otp-resend {
    margin-top: 16px;
    font-size: 13px;
    color: var(--nvn-muted);
}
.nvn-otp-resend a {
    color: var(--primary-color, #0071A9);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}
.nvn-otp-resend a:hover {
    text-decoration: underline;
}
.nvn-otp-resend a[aria-disabled="true"] {
    color: var(--nvn-muted);
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
.nvn-otp-dev-banner {
    background: #fff8d6;
    border: 1px dashed #d4a017;
    color: #6b4f00;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 12px;
    text-align: left;
}
.nvn-otp-dev-banner strong { color: #6b4f00; }
.nvn-otp-dev-code {
    display: inline-block;
    margin-left: 6px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #0071A9;
    letter-spacing: 2px;
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #ffeaa7;
}

.nvn-otp-error {
    display: none;
    color: var(--nvn-error);
    background: var(--nvn-error-bg);
    border: 1px solid var(--nvn-error-border);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}
.nvn-otp-error.is-shown { display: block; }
.nvn-otp-success {
    display: none;
    color: var(--nvn-success);
    background: #e7f7ec;
    border: 1px solid #b7e1c1;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}
.nvn-otp-success.is-shown { display: block; }

.nvn-otp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    color: var(--nvn-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.nvn-otp-close:hover { color: #1f2937; }
.nvn-multistep-form.rtl ~ .nvn-otp-overlay .nvn-otp-close,
.rtl .nvn-otp-modal .nvn-otp-close {
    right: auto;
    left: 12px;
}

/* ----------------------------------------------------------------
   13. Loading spinner inside buttons
---------------------------------------------------------------- */
.nvn-ms-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: nvnSpin 0.8s linear infinite;
}
@keyframes nvnSpin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------
   14. Responsive
---------------------------------------------------------------- */
@media (max-width: 1199px) {
    .nvn-ms-shell {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }
    .nvn-ms-aside {
        padding: 32px 24px 26px;
    }
    .nvn-ms-main {
        padding: 32px 30px 0;
    }
    .nvn-ms-controls {
        margin-inline: -30px;
        padding-inline: 30px;
    }
}

@media (max-width: 991px) {
    /* One column: the side pane becomes a header for the card. */
    .nvn-ms-shell {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 18px;
    }
    .nvn-ms-aside {
        gap: 20px;
        padding: 28px 24px 24px;
    }
    .nvn-ms-aside__title {
        font-size: 26px;
    }

    /* Horizontal stepper - the vertical rule would point nowhere. */
    .nvn-ms-stepper {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .nvn-ms-stepper__item {
        flex: 1 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0;
        text-align: center;
        min-width: 92px;
    }
    .nvn-ms-stepper__item:not(:last-child)::before {
        inset-inline-start: 50%;
        inset-inline-end: -50%;
        top: 19px;
        bottom: auto;
        width: auto;
        height: 1px;
    }
    .nvn-ms-stepper__label {
        font-size: 12px;
        font-weight: 600;
    }

    .nvn-ms-aside__note {
        display: none;
    }

    .nvn-ms-main {
        padding: 28px 24px 0;
    }
    .nvn-ms-controls {
        margin-inline: -24px;
        padding-inline: 24px;
    }
    .nvn-ms-pane-title {
        font-size: 25px;
    }
}

@media (max-width: 767px) {
    .nvn-ms-shell,
    .nvn-multistep-form {
        font-size: 14.5px;
        --nvn-step-gap: 14px;
        --nvn-gap-field: 14px;
        --nvn-gap-answer: 7px;
        --nvn-gap-block: 22px;
    }

    .nvn-multistep-form input[type="text"],
    .nvn-multistep-form input[type="email"],
    .nvn-multistep-form input[type="password"],
    .nvn-multistep-form input[type="tel"],
    .nvn-multistep-form input[type="number"],
    .nvn-multistep-form input[type="date"],
    .nvn-multistep-form select,
    .nvn-multistep-form textarea {
        padding: 10px 12px;
        font-size: 16px; /* 16px or larger, or iOS zooms the page on focus */
    }

    .nvn-multistep-form label {
        font-size: 13.5px;
    }

    .nvn-ms-shell {
        margin: 12px 0 24px;
        border-radius: 14px;
    }
    .nvn-ms-aside {
        padding: 24px 18px 20px;
    }
    .nvn-ms-aside__title {
        font-size: 23px;
    }
    .nvn-ms-main {
        padding: 24px 18px 0;
    }
    .nvn-ms-controls {
        margin-inline: -18px;
        padding-inline: 18px;
    }
    .nvn-ms-pane-title {
        font-size: 22px;
    }

    .nvn-ms-controls .nvn-ms-btn {
        min-width: 0;
        flex: 1 1 calc(50% - 6px);
        padding: 11px 14px;
        font-size: 14px;
    }
    .nvn-ms-controls-spacer {
        display: none;
    }

    .nvn-otp-modal {
        padding: 22px 18px 18px;
    }
    .nvn-otp-digit {
        width: 38px;
        height: 48px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .nvn-ms-stepper__item {
        min-width: 70px;
    }
    .nvn-ms-stepper__label {
        font-size: 11px;
    }
}

/* ----------------------------------------------------------------
   15. RTL
   ----------------------------------------------------------------
   The card is laid out with logical properties and a grid, so the panes
   swap sides on their own. Only what is drawn with physical values needs
   saying again here.
---------------------------------------------------------------- */
.nvn-multistep-form.rtl,
.rtl .nvn-multistep-form,
.nvn-ms-shell[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.nvn-multistep-form.rtl label .text-danger,
.rtl .nvn-multistep-form label .text-danger {
    margin-left: 0;
    margin-right: 2px;
}

/* The pane gradient reads from the outer edge inwards, whichever edge
   that is. */
.nvn-ms-shell[dir="rtl"] .nvn-ms-aside {
    background: var(--nvn-aside-bg);
    background: linear-gradient(190deg, var(--nvn-aside-bg-2) 0%, var(--nvn-aside-bg) 68%);
}

/* ----------------------------------------------------------------
   16. Settings → Profile Details
   ----------------------------------------------------------------
   The registration form's own field styling is reused wholesale here -
   the form carries .nvn-multistep-form for exactly that reason - so an
   input looks the same whether it is being filled in for the first time
   or corrected a year later. Only the page around it is new.
---------------------------------------------------------------- */
.nvn-profile-edit {
    --nvn-gap-field: 16px;
    --nvn-gap-answer: 8px;
    --nvn-gap-block: 26px;
    margin-top: 20px;
}

.nvn-profile-layout {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.nvn-profile-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 20px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
}

.nvn-profile-nav__item {
    text-align: start;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--nvn-muted, #6b7785);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.nvn-profile-nav__item:hover {
    background: #f3f7fb;
    color: var(--primary-color, #0071A9);
}

.nvn-profile-nav__item.is-active {
    background: rgba(0, 113, 169, 0.08);
    color: var(--primary-color, #0071A9);
    font-weight: 600;
}

.nvn-profile-panel {
    display: none;
}
.nvn-profile-panel.is-active {
    display: block;
}

.nvn-profile-group + .nvn-profile-group {
    margin-top: var(--nvn-gap-block);
}

.nvn-profile-group {
    padding-bottom: 20px;
}

.nvn-profile-fields {
    --bs-gutter-x: var(--nvn-gap-field);
    --bs-gutter-y: var(--nvn-gap-field);
    margin-top: 18px;
}

.nvn-profile-fields > [class*="col-"] {
    margin-top: var(--bs-gutter-y);
}

/* `hidden` is how the script takes a branch off the page; it has to beat
   the grid's own display. */
.nvn-profile-fields > [hidden] {
    display: none !important;
}

.nvn-profile-current {
    margin-bottom: 6px;
}

.nvn-profile-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 26px;
    padding: 16px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
    display: flex;
    justify-content: flex-end;
}

/* Saving a profile is the ordinary action of this screen, so it wears the
   theme's own primary rather than the green the registration form uses to
   mark the end of a long flow. */
.nvn-profile-actions .nvn-ms-btn-submit {
    background: var(--primary-color, #0071A9);
    border-color: var(--primary-color, #0071A9);
    box-shadow: 0 6px 16px rgba(0, 113, 169, 0.22);
}

.nvn-profile-actions .nvn-ms-btn-submit:hover {
    background: #005b87;
    border-color: #005b87;
}

.nvn-profile-actions .nvn-ms-btn-submit:focus-visible {
    outline: 2px solid var(--primary-color, #0071A9);
    outline-offset: 3px;
}

.nvn-profile-notice {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 14px;
}
.nvn-profile-notice.is-ok {
    color: #1c7a36;
    background: #e7f7ec;
    border-color: #b7e1c1;
}
.nvn-profile-notice.is-error {
    color: var(--nvn-error, #d8000c);
    background: var(--nvn-error-bg, #fdecee);
    border-color: var(--nvn-error-border, #f5c2c7);
}
.nvn-profile-notice ul {
    margin: 6px 0 0;
    padding-inline-start: 18px;
}

@media (max-width: 767px) {
    .nvn-profile-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .nvn-profile-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }
    .nvn-profile-nav__item {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}