/* ============================================================
   material-common.css
   Shared styles for Registration & Login pages
   Variables extend custom-style.css  (--corix-* vars already global)
   Class prefix: fm-  (form-material)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. PAGE ROOT
   ════════════════════════════════════════════════════════════ */

/* Standard registration/wizard page root */
.fm-page {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                40px;
    padding:            48px 16px 40px;
    box-sizing:         border-box;
    min-height:         calc(100vh - var(--corix-appbar-height));
    width:              100%;
    font-family:        var(--corix-font-ui);
}

/* Centered full-viewport root (login / checking-location) */
.fm-page-centered {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    gap:                40px;
    padding:            60px 16px;
    box-sizing:         border-box;
    min-height:         calc(100vh - var(--corix-appbar-height));
    width:              100%;
    font-family:        var(--corix-font-ui);
}


/* ════════════════════════════════════════════════════════════
   2. PAGE HEADER  (title + subtitle block above the card)
   ════════════════════════════════════════════════════════════ */

.fm-page-header {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                12px;
    text-align:         center;
    width:              100%;
    max-width:          540px;
}

.fm-title {
    font-family:        var(--corix-font-ui);
    font-weight:        700;
    font-size:          24px;
    line-height:        125%;
    color:              var(--corix-text-ui);
    text-align:         center;
    margin:             0;
}

.fm-subtitle {
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          16px;
    line-height:        1.5;
    color:              var(--corix-text-ui);
    text-align:         center;
    margin:             0;
}


/* ════════════════════════════════════════════════════════════
   3. CARD
   ════════════════════════════════════════════════════════════ */

.fm-card {
    width:              100%;
    max-width:          var(--corix-card-max-width);
    background:         var(--corix-surface);
    border-radius:      var(--corix-radius-lg);
    padding:            var(--corix-card-padding);
    box-sizing:         border-box;
    display:            flex;
    flex-direction:     column;
    gap:                24px;
}


/* ════════════════════════════════════════════════════════════
   4. FORM  &  SECTIONS
   ════════════════════════════════════════════════════════════ */

/* Top-level form column */
.fm-form {
    display:            flex;
    flex-direction:     column;
    gap:                12px;
}

/* Grouped section (question heading + fields) */
.fm-section {
    display:            flex;
    flex-direction:     column;
    gap:                8px;
}

/* Section heading — muted label */
.fm-section-title {
    font-family:        var(--corix-font-ui);
    font-weight:        700;
    font-size:          14px;
    line-height:        142%;
    letter-spacing:     0.25px;
    color:              var(--corix-text-ui-muted);
    margin:             0;
}

/* Single field (label + control) */
.fm-field {
    display:            flex;
    flex-direction:     column;
    gap:                4px;
    width:              100%;
}

/* Side-by-side field row (e.g. city + state) */
.fm-field-row {
    display:            flex;
    flex-direction:     row;
    gap:                8px;
    align-items:        flex-start;
}

.fm-field-row .fm-field-grow  { flex: 1;          min-width: 0; }
.fm-field-row .fm-field-fixed { flex: 0 0 100px; }


/* ════════════════════════════════════════════════════════════
   5. LABELS
   ════════════════════════════════════════════════════════════ */

.fm-label {
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          14px;
    line-height:        24px;
    color:              var(--corix-text-ui);
    display:            flex;
    align-items:        center;
    gap:                6px;
    margin-bottom:      2px;
}

.fm-label-optional {
    font-style:         italic;
    font-size:          12px;
    color:              var(--corix-text-ui-hint);
    margin-left:        4px;
}


/* ════════════════════════════════════════════════════════════
   6. INPUT WRAPPER  (native inputs + password toggle)
   ════════════════════════════════════════════════════════════ */

.fm-input-wrapper {
    display:            flex;
    align-items:        stretch;
    height:             34px;
    border:             1px solid var(--corix-border-ui);
    border-radius:      4px;
    background:         var(--corix-surface);
    overflow:           hidden;
}

.fm-input-wrapper:focus-within {
    border-color:       var(--corix-primary);
}

/* Native <input> inside the wrapper */
.fm-input {
    flex:               1;
    border:             none;
    outline:            none;
    padding:            10px 16px;
    font-family:        var(--corix-font-ui);
    font-size:          16px;
    color:              var(--corix-text-ui);
    background:         transparent;
}

.fm-input::placeholder {
    color:              var(--corix-text-ui-hint);
}

/* Eye/toggle button inside the wrapper */
.fm-input-suffix-btn {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    padding:            6px 12px;
    border:             none;
    background:         transparent;
    cursor:             pointer;
    flex-shrink:        0;
    color:              var(--corix-text-ui-hint);
}


/* ════════════════════════════════════════════════════════════
   7. HINT ROW  (icon + helper text below a field)
   ════════════════════════════════════════════════════════════ */

.fm-hint-row {
    display:            flex;
    flex-direction:     row;
    align-items:        flex-start;
    gap:                4px;
    width:              100%;
    margin-top:         2px;
}

.fm-hint-icon {
    flex-shrink:        0;
    width:              16px;
    height:             16px;
    margin-top:         1px;
}

.fm-hint-text {
    font-family:        var(--corix-font-ui);
    font-size:          10px;
    font-weight:        400;
    color:              var(--corix-text-ui-hint);
    line-height:        1.4;
}

/* Inline badge — e.g. "Strong" password badge */
.fm-badge {
    display:            inline-block;
    padding:            2px 8px;
    border-radius:      4px;
    font-family:        var(--corix-font-ui);
    font-size:          10px;
    font-weight:        500;
    border:             1px solid rgba(0, 0, 0, 0.08);
}

.fm-badge-success {
    background:         #00C9B1;
    color:              #FFFFFF;
}

.fm-badge-medium {
    background: #F59E0B;
    color: #FFFFFF;
}

.fm-badge-weak {
    background: #EF4444;
    color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════
   8. CHECKBOX ROW
   ════════════════════════════════════════════════════════════ */

/* List wrapper — sets Telerik checkbox CSS variables once */
.fm-checkbox-list {
    display:                        flex;
    flex-direction:                 column;
    gap:                            4px;
    --kendo-checkbox-checked-bg:    var(--corix-primary);
    --kendo-checkbox-checked-border:var(--corix-primary);
    --kendo-checkbox-checked-text:  #ffffff;
    --kendo-checkbox-border:        rgba(33, 33, 33, 0.38);
    --kendo-checkbox-bg:            #ffffff;
}

/* Individual row */
.fm-checkbox-row {
    display:            flex;
    flex-direction:     row;
    align-items:        flex-start;
    gap:                8px;
    padding:            8px;
    border-radius:      4px;
    box-sizing:         border-box;
}

/* Highlighted "select all" variant */
.fm-checkbox-row--highlight {
    background:         var(--corix-highlight-ui);
    border-radius:      8px;
}

.fm-checkbox-row .k-checkbox-wrap {
    flex-shrink:        0;
    margin-top:         1px;
}

.fm-checkbox-row .k-checkbox {
    width:              16px;
    height:             16px;
    border-radius:      4px;
    cursor:             pointer;
    flex-shrink:        0;
}

.fm-checkbox-row .k-checkbox:focus-visible {
    outline:            none;
    box-shadow:         0 0 0 2px rgba(0, 101, 255, 0.3);
}

.fm-checkbox-label {
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          14px;
    line-height:        1.5;
    color:              var(--corix-text-ui);
    cursor:             pointer;
    user-select:        none;
    flex:               1;
    min-width:          0;
}

.fm-checkbox-label--bold { font-weight: 500; }


/* ════════════════════════════════════════════════════════════
   9. ACTIONS  (button stack at the bottom of a card)
   ════════════════════════════════════════════════════════════ */

.fm-actions {
    display:            flex;
    flex-direction:     column;
    align-items:        stretch;
    gap:                12px;
}


/* ════════════════════════════════════════════════════════════
   10. NOTE / SIGNATURE LINE  (small centred text)
   ════════════════════════════════════════════════════════════ */

.fm-note {
    font-family:        var(--corix-font-ui);
    font-size:          10px;
    font-weight:        400;
    color:              var(--corix-text-ui-hint);
    text-align:         center;
    margin:             0;
    width:              100%;
}


/* ════════════════════════════════════════════════════════════
   11. INFO / DECLARATION BOX
   ════════════════════════════════════════════════════════════ */

.fm-info-box {
    background:         var(--corix-disabled-bg);
    border-radius:      4px;
    padding:            8px;
    font-family:        var(--corix-font-ui);
    font-size:          12px;
    font-weight:        400;
    color:              var(--corix-text-ui);
    line-height:        1.6;
}


/* ════════════════════════════════════════════════════════════
   12. TOOLTIP CALLOUT
   ════════════════════════════════════════════════════════════ */

.fm-tooltip-wrap {
    position:           relative;
    display:            inline-flex;
    flex-direction:     column;
    align-items:        center;
}

.fm-tooltip {
    display:            none;
    position:           absolute;
    top:                calc(100% + 10px);
    left:               50%;
    transform:          translateX(-50%);
    width:              340px;
    background:         var(--corix-tooltip-bg);
    border:             1px solid var(--corix-accent-light);
    border-radius:      4px;
    padding:            12px 16px;
    box-shadow:         0 4px 12px rgba(0, 0, 0, 0.15);
    font-family:        var(--corix-font-ui);
    font-size:          13px;
    line-height:        1.5;
    color:              var(--corix-text-ui);
    z-index:            100;
    text-align:         left;
}

.fm-tooltip::before {
    content:            '';
    position:           absolute;
    top:                -7px;
    left:               50%;
    width:              12px;
    height:             12px;
    background:         var(--corix-tooltip-bg);
    border-left:        1px solid var(--corix-accent-light);
    border-top:         1px solid var(--corix-accent-light);
    transform:          translateX(-50%) rotate(45deg);
}

.fm-tooltip.visible {
    display:            block;
}


/* ════════════════════════════════════════════════════════════
   13. LINK TEXT
   ════════════════════════════════════════════════════════════ */

.fm-link {
    color:              var(--corix-primary);
    text-decoration:    underline;
    cursor:             pointer;
}

.fm-link:hover {
    color:              var(--corix-primary-hover);
}


/* ════════════════════════════════════════════════════════════
   14. TELERIK COMPONENT OVERRIDES
   ════════════════════════════════════════════════════════════ */

/* ── TextBox ─────────────────────────────────────────────── */
.fm-card .k-textbox,
.fm-form .k-textbox {
    width:              100%;
    border:             1px solid var(--corix-border-ui);
    border-radius:      4px;
    box-shadow:         none;
    background:         var(--corix-surface);
}

.fm-card .k-textbox:hover,
.fm-card .k-textbox.k-hover,
.fm-form .k-textbox:hover,
.fm-form .k-textbox.k-hover {
    border-color:       var(--corix-border-ui-hover);
    box-shadow:         none;
}

.fm-card .k-textbox.k-focus,
.fm-card .k-textbox:focus-within,
.fm-form .k-textbox.k-focus,
.fm-form .k-textbox:focus-within {
    border-color:       var(--corix-primary);
    box-shadow:         0 0 0 1px var(--corix-primary);
}

.fm-card .k-input-inner,
.fm-form .k-input-inner {
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          16px;
    color:              var(--corix-text-ui);
    padding:            10px 16px;
}

.fm-card .k-input-inner::placeholder,
.fm-form .k-input-inner::placeholder {
    color:              var(--corix-text-ui-hint);
}

/* ── DropDownList ────────────────────────────────────────── */
.fm-card .k-dropdownlist,
/* Ensure Telerik dropdown popups appear above TelerikWindow (z-index ~10000) */
.k-animation-container {
    z-index: 20000 !important;
    margin-top: 0 !important;
}


/* Remove default gap between dropdown trigger and popup list */
.fm-field .k-animation-container,
.fm-card .k-animation-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Telerik popup list — no internal top offset */
.fm-field .k-list-container,
.fm-card .k-list-container {
    margin-top: 0 !important;
}

.fm-field .k-popup,
.fm-card .k-popup {
    margin-top: 0 !important;
}

/* Native select replacement for TelerikDropDownList in modals */
.fm-select {
    width:              100%;
    height:             44px;
    padding:            0 12px;
    border:             1px solid var(--corix-border-ui);
    border-radius:      4px;
    background:         var(--corix-surface-primary, #fff);
    font-family:        var(--corix-font-ui);
    font-size:          16px;
    font-weight:        400;
    color:              var(--corix-text-ui);
    appearance:         auto;
    cursor:             pointer;
    box-shadow:         none;
    outline:            none;
}
.fm-select:focus {
    border-color:       var(--corix-primary);
    box-shadow:         0 0 0 1px var(--corix-primary);
}

.fm-field .k-dropdownlist {
    width:              100%;
    border:             1px solid var(--corix-border-ui);
    border-radius:      4px;
    box-shadow:         none;
}

.fm-card .k-dropdownlist:focus-within,
.fm-card .k-dropdownlist.k-focus,
.fm-field .k-dropdownlist:focus-within,
.fm-field .k-dropdownlist.k-focus {
    border-color:       var(--corix-primary);
    box-shadow:         0 0 0 1px var(--corix-primary);
}

.fm-card .k-dropdownlist .k-input-value-text,
.fm-field .k-dropdownlist .k-input-value-text {
    font-family:        var(--corix-font-ui);
    font-size:          16px;
    font-weight:        400;
    color:              var(--corix-text-ui);
}

.fm-card .k-dropdownlist .k-input-button,
.fm-field .k-dropdownlist .k-input-button {
    border:             none;
    background:         transparent;
}

/* ── DatePicker ──────────────────────────────────────────── */
.fm-card .k-datepicker {
    width:              100%;
    border:             1px solid var(--corix-border-ui);
    border-radius:      4px;
    box-shadow:         none;
}

.fm-card .k-datepicker:focus-within {
    border-color:       var(--corix-primary);
    box-shadow:         0 0 0 1px var(--corix-primary);
}

.fm-card .k-datepicker .k-input-inner {
    font-family:        var(--corix-font-ui);
    font-size:          16px;
    padding:            10px 16px;
}

.fm-card .k-datepicker .k-input-button {
    border:             none;
    background:         transparent;
}

/* ── Buttons (inside .fm-actions) ────────────────────────── */
.fm-actions .k-button,
.fm-actions a.k-button {
    width:              100%;
    font-family:        var(--corix-font-ui);
    font-weight:        500;
    font-size:          14px;
    border-radius:      4px;
    padding:            10px 16px;
    height:             auto;
    justify-content:    center;
    text-decoration:    none;
    box-sizing:         border-box;
}

/* Solid primary */
.fm-actions .k-button-solid-primary {
    background-color:   var(--corix-primary);
    border-color:       var(--corix-primary);
    color:              #FFFFFF;
}

.fm-actions .k-button-solid-primary:hover:not(:disabled) {
    background-color:   var(--corix-primary-hover);
    border-color:       var(--corix-primary-hover);
}

.fm-actions .k-button-solid-primary.k-disabled,
.fm-actions .k-button-solid-primary:disabled {
    background-color:   rgba(0, 101, 255, 0.38);
    border-color:       transparent;
    color:              #FFFFFF;
    cursor:             not-allowed;
}

/* Outline primary */
.fm-actions .k-button-outline-primary {
    background-color:   transparent;
    border-color:       var(--corix-primary);
    color:              var(--corix-primary);
}

.fm-actions .k-button-outline-primary:hover {
    background-color:   rgba(0, 101, 255, 0.06);
}

/* Flat / link primary */
.fm-actions .k-button-flat-primary,
.fm-actions .k-button-link-primary {
    background-color:   transparent;
    border-color:       transparent;
    color:              var(--corix-primary);
}

.fm-actions .k-button-flat-primary:hover,
.fm-actions .k-button-link-primary:hover {
    background-color:   rgba(0, 101, 255, 0.06);
}

/* Password-toggle button inside fm-input-wrapper (Telerik variant) */
.fm-input-wrapper .k-button {
    border:             none !important;
    border-radius:      0 !important;
    background:         transparent !important;
    box-shadow:         none !important;
    padding:            6px 12px;
    color:              var(--corix-text-ui-hint);
}

/* Password-toggle button inside fm-input-wrapper (native <button> variant) */
.fm-input-toggle-btn {
    flex-shrink:        0;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    border:             none;
    background:         transparent;
    padding:            6px 12px;
    cursor:             pointer;
    color:              var(--corix-text-ui-hint);
    font-size:          14px;
    line-height:        1;
}

.fm-input-toggle-btn:hover {
    color:              var(--corix-text-ui);
}

/* Link-style button in page header (e.g. "Why do we need this?") */
.fm-tooltip-wrap .k-button {
    font-family:        var(--corix-font-ui);
    font-size:          14px;
    font-weight:        500;
    color:              var(--corix-primary) !important;
}


/* ════════════════════════════════════════════════════════════
   15. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

@media (max-width: 399px) {
    .fm-page,
    .fm-page-centered {
        padding:        28px 12px 32px;
        gap:            24px;
        min-height:     calc(100vh - var(--corix-appbar-height-sm));
    }

    .fm-title    { font-size: 20px; }
    .fm-subtitle { font-size: 14px; }

    .fm-card {
        padding:        16px 12px;
        gap:            20px;
    }

    .fm-tooltip {
        width:          240px;
        left:           0;
        transform:      none;
    }

    .fm-tooltip::before {
        left:           40px;
        transform:      rotate(45deg);
    }

    .fm-field-row {
        flex-direction: column;
    }

    .fm-field-row .fm-field-fixed {
        flex:           1;
    }

    .fm-card .k-input-inner,
    .fm-form .k-input-inner {
        font-size:      15px;
    }

    .fm-checkbox-row {
        padding:        6px;
    }

    .fm-checkbox-label {
        font-size:      13px;
    }
}

@media (min-width: 400px) and (max-width: 499px) {
    .fm-page,
    .fm-page-centered {
        padding:        32px 16px;
        gap:            24px;
    }

    .fm-card     { padding: 20px 16px; }
    .fm-tooltip  { width: 260px; }
}

@media (min-width: 500px) and (max-width: 599px) {
    .fm-page,
    .fm-page-centered {
        padding:        36px 20px;
        gap:            28px;
    }

    .fm-card     { padding: 24px 20px; }
    .fm-tooltip  { width: 280px; }
}

@media (min-width: 600px) and (max-width: 899px) {
    .fm-page,
    .fm-page-centered {
        padding:        40px 32px;
        gap:            32px;
    }

    .fm-card { padding: 28px 24px; }
}

@media (min-width: 900px) {
    .fm-page,
    .fm-page-centered {
        padding:        48px 24px;
    }
}


/* ════════════════════════════════════════════════════════════
   16. REGISTRATION STEPPER
   ════════════════════════════════════════════════════════════ */

/* Outer centering wrapper */
.rs-outer {
    display:            flex;
    justify-content:    center;
    width:              100%;
    padding:            0 16px;
    box-sizing:         border-box;
}

/* Stepper track row */
.rs-wrap {
    position:           relative;
    width:              100%;
    max-width:          466px;
    display:            flex;
    flex-direction:     row;
    justify-content:    space-between;
    align-items:        center;
    height:             59px;
}

/* Gray base track — center of step 1 → center of step 4 */
.rs-track-bg {
    position:           absolute;
    top:                50%;
    transform:          translateY(-50%);
    left:               16px;
    right:              16px;
    height:             2px;
    background:         #ADCEFF;
    border-radius:      1px;
    z-index:            0;
}

/* Blue progress track */
.rs-track-progress {
    position:           absolute;
    top:                50%;
    transform:          translateY(-50%);
    left:               16px;
    height:             2px;
    background:         var(--corix-accent-light);
    border-radius:      1px;
    z-index:            1;
    transition:         width 0.3s ease;
}

/* Step wrapper — white bg blocks track line behind circles */
.rs-step {
    position:           relative;
    z-index:            2;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    width:              32px;
    height:             32px;
    flex-shrink:        0;   
}

/* Circle: inactive */
.rs-circle {
    width:              26px;
    height:             26px;
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          14px;
    line-height:        1;
    box-sizing:         border-box;
    background:         #e8e8e8;
    border:             none;
    color:              rgba(33, 33, 33, 0.6);
}

/* Circle: active — filled + outer ring */
.rs-step.rs-active .rs-circle {
    background:         var(--corix-primary);
    border:             1px solid var(--corix-primary);
    color:              #FFFFFF;
    font-weight:        500;
    box-shadow:         0 0 0 2px var(--corix-surface), 0 0 0 4px var(--corix-primary);
}

/* Circle: done — filled, white checkmark */
.rs-step.rs-done .rs-circle {
    background:         var(--corix-primary);
    border:             1px solid var(--corix-primary);
    color:              #FFFFFF;
}

.rs-step.rs-done .rs-circle .k-svg-icon {
    width:              14px;
    height:             14px;
}

@media (max-width: 399px) {
    .rs-wrap   { height: 44px; }
    .rs-step   { width: 26px; height: 26px; }
    .rs-circle { width: 22px; height: 22px; font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   17. LOGIN PAGE
   ════════════════════════════════════════════════════════════ */

/* Full-viewport root (EmptyLayout — no appbar) */
.login-root {
    position:           relative;
    min-height:         100vh;
    width:              100%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    padding:            24px 16px;
    box-sizing:         border-box;
    font-family:        var(--corix-font-ui);
}

/* Absolute background gradient image */
.login-bg-gradient {
    position:           absolute;
    bottom:             0;
    left:               0;
    width:              100%;
    height:             auto;
    pointer-events:     none;
    z-index:            0;
}

/* Content column: logo + card, centred over the bg */
.login-content {
    position:           relative;
    z-index:            1;
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                40px;
    width:              100%;
    max-width:          var(--corix-card-max-width);
}

/* Logo */
.login-logo {
    width:              167.84px;
    height:             50.85px;
    object-fit:         contain;
    max-width:          100%;
}

/* EditForm renders as <form> — give it the same width constraint as the card */
.login-content > form {
    width:              100%;
    max-width:          var(--corix-card-max-width);
}

/* Card — extends .fm-card with login-specific padding / gap */
.login-card {
    padding:            40px 24px 24px;
    gap:                40px;
}

/* Form — extends .fm-form with larger gap between fields */
.login-form {
    gap:                24px;
}

@media (max-width: 399px) {
    .login-root    { padding: 40px 12px 16px; align-items: flex-start; }
    .login-content { gap: 24px; }
    .login-logo    { width: 130px; height: auto; }
    .login-card    { padding: 28px 16px 20px; gap: 28px; }
}

@media (min-width: 400px) and (max-width: 599px) {
    .login-root    { padding: 48px 20px 24px; align-items: flex-start; }
    .login-content { gap: 28px; }
    .login-card    { padding: 32px 20px 20px; gap: 32px; }
}

@media (min-width: 600px) and (max-width: 899px) {
    .login-root { padding: 32px 24px; }
}

@media (min-width: 900px) {
    .login-root { padding: 0; }
    .login-card { padding: 40px 24px 24px; }
}


/* ════════════════════════════════════════════════════════════
   18. CHECKING LOCATION PAGE
   ════════════════════════════════════════════════════════════ */

/* Card override — centre children vertically */
.cl-card {
    align-items:        center;
}

/* Subtitle override — design calls for 14px here */
.cl-subtitle {
    font-size:          14px;
}

/* Spinner wrapper */
.cl-spinner-wrap {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                8px;
}

/* 4-dot rotating grid */
.cl-dot-grid {
    width:              32px;
    height:             32px;
    position:           relative;
    animation:          cl-spin 1.4s linear infinite;
}

.cl-dot {
    position:           absolute;
    width:              10px;
    height:             10px;
    border-radius:      2px;
    background:         var(--corix-primary);
    animation:          cl-pulse 1.4s ease-in-out infinite;
}

.cl-dot:nth-child(1) { top: 0;    left: 0;  animation-delay: 0.00s; }
.cl-dot:nth-child(2) { top: 0;    right: 0; animation-delay: 0.35s; }
.cl-dot:nth-child(3) { bottom: 0; right: 0; animation-delay: 0.70s; }
.cl-dot:nth-child(4) { bottom: 0; left: 0;  animation-delay: 1.05s; }

@keyframes cl-spin  { to { transform: rotate(360deg); } }
@keyframes cl-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(0.25); opacity: 0.4; }
}

/* "Loading" label beneath the spinner */
.cl-loading-text {
    font-family:        var(--corix-font-ui);
    font-size:          12px;
    font-weight:        500;
    color:              var(--corix-primary);
}

/* Success check circle */
.cl-check-circle {
    width:              52px;
    height:             52px;
    background:         var(--corix-primary);
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    flex-shrink:        0;
}


/* ════════════════════════════════════════════════════════════
   19. CREATE ACCOUNT PAGE
   ════════════════════════════════════════════════════════════ */

/* Phone number field row (country code + number) */
.phone-row {
    display:            flex;
    flex-wrap:          wrap;
    gap:                8px;
    align-items:        flex-start;
}

/* TelerikTextBox variant (CreateAccount / figma pages) */
.phone-row .k-textbox:first-child {
    width:              72px;
    flex-shrink:        0;
}

.phone-row .k-textbox:last-child {
    flex:               1;
}

/* TelerikDropDownList variant (Register page) — compact country-code picker */
.phone-row .k-dropdownlist {
    width:              110px;
    flex-shrink:        0;
}

/* TelerikMaskedTextBox variant (Register page) — fill remaining space */
.phone-row .k-maskedtextbox {
    flex:               1;
    min-width:          0;
}

/* Country code input — compact centred text */
.fm-form .phone-row .k-textbox:first-child .k-input-inner {
    padding:            10px 8px;
    text-align:         center;
}

/* Terms disclaimer below the form */
.ca-terms {
    font-family: var(--corix-font-ui);
    font-size: 12px;
    color: var(--corix-text-ui-muted);
    line-height: 1.5;
    margin: 4px 0 0;
}

.ca-terms a {
    color:              var(--corix-primary);
    text-decoration:    none;
}

.ca-terms a:hover {
    text-decoration:    underline;
}


/* ════════════════════════════════════════════════════════════
   20. ACCOUNT DETAILS PAGE
   ════════════════════════════════════════════════════════════ */

/* Section gap — design uses 12px, fm-section default is 8px */
.ad-section {
    gap:                12px;
}

/* SSN input — spaced digits */
.ssn-input {
    letter-spacing:     0.2em;
}

@media (max-width: 399px) {
    .ssn-input { padding: 8px 12px; font-size: 15px; }
}


/* ════════════════════════════════════════════════════════════
   21. ABOUT YOU PAGE
   ════════════════════════════════════════════════════════════ */

/* Small paragraph above the declaration box */
.ay-declaration-text {
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          14px;
    color:              var(--corix-text-ui);
    margin:             0 0 6px;
}


/* ════════════════════════════════════════════════════════════
   22. VERIFY PHONE PAGE
   ════════════════════════════════════════════════════════════ */

/* Subtitle override — 14px (fm-subtitle defaults to 16px) */
.vp-subtitle {
    font-size:          14px;
}

/* Phone icon circle above the card title */
.vp-icon-circle {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    width:              44px;
    height:             44px;
    border-radius:      50%;
    background:         var(--corix-accent-light);
    flex-shrink:        0;
}

/* OTP digit row */
.otp-row {
    display:            flex;
    flex-direction:     row;
    gap:                4px;
    align-items:        stretch;
}

.otp-cell {
    flex:               1;
    min-width:          0;
}

.otp-cell .k-textbox {
    width:              100%;
    height:             48px;
    border:             1px solid var(--corix-border-ui) !important;
    border-radius:      4px;
    background:         var(--corix-surface);
    box-shadow:         none !important;
    transition:         border-color 0.15s ease;
}

.otp-cell .k-textbox:focus-within {
    border-color:       var(--corix-primary) !important;
    box-shadow:         0 0 0 1px var(--corix-primary) !important;
}

.otp-cell .k-input-inner {
    font-family:        var(--corix-font-ui);
    font-size:          20px;
    font-weight:        400;
    color:              var(--corix-text-ui);
    text-align:         center;
    padding:            0;
    caret-color:        var(--corix-primary);
}

/* Resend code + support text — 12px dark (≠ fm-note which is 10px muted) */
.vp-resend,
.vp-support {
    font-family:        var(--corix-font-ui);
    font-size:          12px;
    color:              var(--corix-text-ui);
    text-align:         center;
    margin:             0;
}

@media (max-width: 399px) {
    .otp-cell .k-textbox    { height: 42px; }
    .otp-cell .k-input-inner { font-size: 18px; }
}


/* ════════════════════════════════════════════════════════════
   23. EMPTY LAYOUT
   ════════════════════════════════════════════════════════════ */

/* Full-viewport shell */
.empty-layout-root {
    position:           relative;
    min-height:         100vh;
    width:              100%;
    background-color:   #F5F5F5;
    overflow:           hidden;
    display:            flex;
    flex-direction:     column;
}

/* Decorative bg image pinned to bottom */
.empty-layout-bg {
    position:           absolute;
    bottom:             0;
    left:               0;
    width:              100%;
    height:             auto;
    pointer-events:     none;
    z-index:            0;
}

/* Scrollable content area */
.empty-layout-body {
    position:           relative;
    z-index:            1;
    flex:               1;
}

/* Footer line */
.empty-layout-footer {
    position:           relative;
    z-index:            1;
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          14px;
    color:              var(--corix-text-ui);
    text-align:         center;
    padding:            16px;
    margin:             0;
}

.empty-layout-footer a {
    color:              var(--corix-primary);
    text-decoration:    none;
}

.empty-layout-footer a:hover {
    text-decoration:    underline;
}


/* ════════════════════════════════════════════════════════════
   24. REGISTRATION LAYOUT
   ════════════════════════════════════════════════════════════ */

/* Full-viewport shell */
.rl-root {
    position:           relative;
    min-height:         100vh;
    width:              100%;
    background-color:   #F5F5F5;
    display:            flex;
    flex-direction:     column;
}

/* Decorative bg image pinned to bottom */
.rl-bg {
    position:           absolute;
    bottom:             0;
    left:               0;
    width:              100%;
    height:             auto;
    pointer-events:     none;
    z-index:            0;
}

/* AppBar */
.rl-header {
    position:           relative;
    z-index:            2;
    display:            flex;
    align-items:        center;
    padding:            0 24px;
    height:             var(--corix-appbar-height);
    background:         var(--corix-surface);
    border-bottom:      1px solid var(--corix-border-ui);
    flex-shrink:        0;
}

.rl-logo {
    width:              134px;
    height:             40px;
    object-fit:         contain;
}

/* Scrollable content area */
.rl-body {
    z-index:            1;
    flex:               1;
}

/* Footer line */
.rl-footer {
    position:           relative;
    z-index:            1;
    font-family:        var(--corix-font-ui);
    font-weight:        400;
    font-size:          14px;
    color:              var(--corix-text-ui);
    text-align:         center;
    padding:            16px;
    margin:             0;
}

.rl-footer a {
    color:              var(--corix-primary);
    text-decoration:    none;
}

.rl-footer a:hover {
    text-decoration:    underline;
}

/* Responsive */
@media (max-width: 599px) {
    .rl-header {
        padding:        0 16px;
        height:         var(--corix-appbar-height-sm);
    }

    .rl-logo {
        width:          100px;
        height:         30px;
    }
}

/* ════════════════════════════════════════════════════════════
   Status message wrapper — matches fm-card width
   ════════════════════════════════════════════════════════════ */
.fm-status-wrapper {
    width:              100%;
    max-width:          var(--corix-card-max-width);
    box-sizing:         border-box;
}

/* ════════════════════════════════════════════════════════════
   Native input inside fm-input-wrapper (e.g. password field)
   ════════════════════════════════════════════════════════════ */
.fm-native-input {
    flex:               1;
    border:             none;
    outline:            none;
    padding:            0 16px;
    height:             100%;
    font-size:          16px;
    background:         transparent;
    box-sizing:         border-box;
}