/* Student Onboarding */
.onboarding-scene {
    display: grid;
    place-items: center;
    /* 7.8rem is the public header, so the card centres in the visible area below it */
    min-height: min(64rem, calc(100svh - 7.8rem));
    padding: 1.5rem 1rem;
    background: var(--gray-clr-100) url("../../images/student-registration/onboarding-bg.jpg") center / cover no-repeat;

    @media (width <= 768px) {
        padding-block: 1rem;
    }
}

.onboarding-card {
    --_line-clr: #d7dae8;
    --_muted-clr: #687497;
    --_label-clr: var(--midnight-blue-clr-700);
    --_accent-clr: var(--primary-clr-400);
    --_accent-strong-clr: var(--primary-clr-600);
    --_accent-soft-clr: var(--primary-clr-50);
    --_control-border-clr: var(--gray-clr-200);

    position: relative;
    width: min(100%, 56rem);
    border-radius: 1.375rem;
    background-color: var(--white-clr);
    box-shadow: var(--shadow-lg);
    font-family: var(--ff-inter);
    color: var(--midnight-blue-clr-900);
}

.onboarding-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1rem 1.5rem 0;
}

.onboarding-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.onboarding-back {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.25rem;
    padding: 0;
    border: 0.0703rem solid var(--_accent-strong-clr);
    border-radius: 50%;
    background-color: var(--_accent-soft-clr);
    cursor: pointer;

    &:focus-visible {
        outline: 2px solid var(--_accent-strong-clr);
        outline-offset: 2px;
    }
}

.onboarding-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--fw-600);
    line-height: normal;
    color: var(--black-clr);
}

.onboarding-time {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    height: 1.5625rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--gray-clr-200);
    border-radius: 100px;
    background-color: var(--gray-clr-50);
    font-size: var(--fs-100);
    font-weight: var(--fw-500);

    span {
        background: linear-gradient(158deg, #d83775 12%, #772393 99%);
        background-clip: text;
        color: transparent;
    }

    @media (width <= 480px) {
        display: none;
    }
}

.onboarding-pill {
    padding: 0.375rem 0.625rem;
    border-radius: 1.25rem;
    background-color: var(--gray-clr-100);
    font-size: var(--fs-200);
    font-weight: var(--fw-600);
    line-height: 1rem;
    color: var(--_accent-clr);
    white-space: nowrap;
}

.onboarding-progress {
    display: flex;
    gap: 0.375rem;
    margin: 0;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--_line-clr);
    list-style: none;

    .form-step {
        position: relative;
        flex: 1 0 0;
        min-width: 0;
        height: 0.25rem;
        border-radius: 1rem;
        background-color: var(--gray-clr-200);
        transition: background-color 200ms ease;

        &::before {
            content: none;
        }

        /* Click area taller than the 4px bar */
        &::after {
            content: "";
            position: absolute;
            inset: -0.625rem 0;
        }

        &.active,
        &.completed {
            background-color: var(--_accent-clr);
        }

        &.completed,
        &.reachable {
            cursor: pointer;
        }
    }
}

.onboarding-card .onboarding-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;

    &.active {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
    }
}

.onboarding-card:has(.onboarding-step--plain.active) :is(.onboarding-footer, .onboarding-pill, .onboarding-time, .onboarding-progress) {
    display: none;
}

.onboarding-mascot-row {
    display: flex;
    align-items: flex-end;
    gap: 0.875rem;
}

.onboarding-mascot {
    flex: none;
    width: 4rem;
    height: 3.75rem;

    img,
    .mascot-lottie {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

:is(.onboarding-mascot, .matching-owl) {
    .mascot-lottie[hidden] {
        display: none;
    }

    &:has(.mascot-lottie:not([hidden])) > img {
        display: none;
    }
}

.onboarding-question {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 3.5625rem;
    margin: 0;
    padding: 0.5rem 0.9375rem;
    border-radius: 1.0625rem;
    background-color: var(--gray-clr-50);
    font-size: var(--fs-400);
    font-weight: var(--fw-500);
}

.onboarding-body {
    display: grid;
    grid-template-columns: 19.875rem minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;

    @media (width <= 768px) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.onboarding-photo {
    position: relative;
    aspect-ratio: 318 / 350;
    border-radius: 1.1875rem;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 31%;
        background: linear-gradient(to bottom, rgb(143 61 178 / 0), #c32d7c);
    }

    @media (width <= 768px) {
        display: none;
    }
}

.onboarding-content {
    --_control-height: 2.5rem;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    font-size: var(--fs-300);

    .onboarding-intro {
        display: grid;
        gap: 0.375rem;
        margin-bottom: 0.25rem;

        h2 {
            margin: 0;
            font-size: var(--fs-400);
            font-weight: var(--fw-500);
            letter-spacing: 0.02em;
            line-height: normal;
            color: var(--black-clr);
        }

        p {
            margin: 0;
            font-size: var(--fs-300);
            color: var(--_muted-clr);
        }
    }

    .onboarding-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1rem 0.75rem;

        @media (width <= 480px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .span-2 {
        grid-column: 1 / -1;
    }

    /* With a booked test the score field is hidden, so the date has the row to itself */
    &:has(input[name="EnglishTestStatus"][value="Booked"]:checked) [data-booked-value] {
        grid-column: 1 / -1;
    }

    .form-group,
    .chip-more {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        min-width: 0;
    }

    .form-group > label,
    .chip-more > label,
    legend.form-optionset-title {
        margin: 0;
        font-size: var(--fs-300);
        font-weight: var(--fw-500);
        line-height: 1.25rem;
        letter-spacing: -0.01em;
        color: var(--_label-clr);
    }

    .required {
        color: var(--danger-clr);
    }

    .form-control,
    .onboarding-input-icon input,
    .bootstrap-select > .dropdown-toggle {
        width: 100%;
        height: var(--_control-height);
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--_control-border-clr);
        border-radius: 0.625rem;
        background-color: var(--white-clr);
        font-family: inherit;
        font-size: var(--fs-300);
        line-height: 1.25rem;
        letter-spacing: -0.01em;
        color: var(--midnight-blue-clr-900);
        box-shadow: none;

        &::placeholder {
            color: var(--gray-clr-400);
        }

        &:focus-visible {
            outline: 2px solid var(--_accent-clr);
            outline-offset: -1px;
        }

        &.input-validation-error {
            outline: 2px solid var(--danger-clr);
        }
    }

    .bootstrap-select {
        width: 100%;

        > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
            color: var(--gray-clr-400);
        }

        .filter-option-inner-inner {
            color: var(--midnight-blue-clr-900);
        }
    }

    .onboarding-select,
    .onboarding-input-icon {
        position: relative;

        > .iconify {
            position: absolute;
            top: 50%;
            translate: 0 -50%;
            font-size: 1.25rem;
            color: var(--gray-clr-400);
            pointer-events: none;
        }
    }

    .onboarding-select > .iconify {
        right: 0.75rem;
    }

    .onboarding-select .bootstrap-select > .dropdown-toggle::after {
        display: none;
    }

    .bootstrap-select > .dropdown-toggle {
        padding-right: 3.25rem;

        .bs-select-clear-selected {
            position: absolute;
            top: 50%;
            right: 2rem;
            display: grid;
            place-items: center;
            width: 1.25rem;
            height: 1.25rem;
            margin: 0;
            translate: 0 -50%;
            font-size: var(--fs-400);
            line-height: 1;
            color: var(--gray-clr-400);
            opacity: 1;

            &:hover {
                color: var(--midnight-blue-clr-900);
            }

            > span {
                top: 0;
            }
        }

        &.bs-placeholder .bs-select-clear-selected {
            display: none;
        }
    }

    .onboarding-input-icon {
        > .iconify {
            left: 0.75rem;
        }

        input {
            padding-left: 2.5rem;
        }
    }

    .input-icon-group {
        display: grid;
        grid-template-areas: "stack";

        > * {
            grid-area: stack;
        }
    }

    .input-icon {
        justify-self: end;
        align-self: center;
        margin-right: 0.75rem;
        font-size: 1.25rem;
        color: var(--gray-clr-400);

        .iconify {
            display: block;
            width: 1.25rem;
            height: 1.25rem;
        }
    }

    /* Edge draws its own reveal icon over the field, doubling the custom toggle */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear {
        display: none;
    }

    .toggle-password {
        cursor: pointer;

        &:hover,
        &:focus-visible {
            color: var(--midnight-blue-clr-900);
        }
    }

    .select-box .selected {
        height: var(--_control-height);
        margin-block: 0;
        border-color: var(--_control-border-clr);
        border-radius: 0.625rem;
    }

    .text-danger,
    .field-validation-error {
        font-size: var(--fs-200);
        color: var(--danger-clr);
    }

    .checkbox-wrapper {
        grid-template-columns: auto 1fr;
        align-items: center;
        margin-top: 0;

        input {
            margin: 0;
            accent-color: var(--_accent-clr);
        }

        label {
            font-size: var(--fs-200);
            color: var(--gray-clr-600);
        }
    }

    .onboarding-note {
        margin: 0;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        background-color: var(--gray-clr-50);
        color: var(--_muted-clr);
    }

    .form-optionset {
        display: grid;
        gap: 0.375rem;
    }

    .form-group-radio-btn {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0.25rem;
        padding: 0.25rem;
        border-radius: 0.625rem;
        background-color: var(--gray-clr-100);

        @media (width <= 480px) {
            grid-auto-flow: row;
        }

        label {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            border: 1px solid transparent;
            border-radius: 0.5rem;
            font-size: var(--fs-250);
            color: var(--gray-clr-400);
            text-align: center;
            cursor: pointer;
            user-select: none;
            transition: background-color 150ms ease;

            /* Narrower layouts keep wrapping so labels never overflow their cell */
            @media (width >= 1024px) {
                white-space: nowrap;
            }

            &:has(input:checked) {
                border-color: var(--_accent-strong-clr);
                background-color: var(--white-clr);
                color: var(--black-clr);
            }

            &:has(input:focus-visible) {
                outline: 2px solid var(--_accent-clr);
                outline-offset: 2px;
            }
        }

        input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
    }
}

.chip-select {
    display: grid;
    gap: 1.25rem;

    > span:empty {
        display: none;
    }
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    position: relative;
    cursor: pointer;

    input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    span {
        display: block;
        padding: 0.5625rem 1rem;
        border: 1px solid var(--gray-clr-200);
        border-radius: 100px;
        background-color: var(--white-clr);
        font-size: var(--fs-300);
        color: var(--midnight-blue-clr-900);
        transition:
            background-color 150ms ease,
            border-color 150ms ease;
    }

    &:hover span {
        border-color: var(--primary-clr-200);
        background-color: var(--gray-clr-50);
    }

    input:checked + span {
        border-color: var(--primary-clr-600);
        background-color: var(--primary-clr-50);
    }

    input:focus-visible + span {
        outline: 2px solid var(--primary-clr-400);
        outline-offset: 2px;
    }
}

.budget-slider {
    display: grid;
    gap: 0.5rem;
}

.budget-slider-track {
    --_thumb-size: 1.125rem;

    position: relative;
    height: var(--_thumb-size);

    &::before {
        content: "";
        position: absolute;
        inset: 50% 0 auto;
        height: 0.25rem;
        translate: 0 -50%;
        border-radius: 0.25rem;
        background:
            linear-gradient(to right, transparent var(--_from, 0%), var(--primary-clr-400) var(--_from, 0%) var(--_to, 100%), transparent var(--_to, 100%)),
            var(--gray-clr-200);
    }

    input[type="range"] {
        position: absolute;
        inset: 0;
        width: 100%;
        margin: 0;
        appearance: none;
        background: transparent;
        pointer-events: none;

        &::-webkit-slider-runnable-track {
            background: transparent;
        }

        &::-moz-range-track {
            background: transparent;
        }

        &::-webkit-slider-thumb {
            width: var(--_thumb-size);
            height: var(--_thumb-size);
            appearance: none;
            border: 2px solid var(--primary-clr-400);
            border-radius: 50%;
            background-color: var(--white-clr);
            pointer-events: auto;
            cursor: pointer;
        }

        &::-moz-range-thumb {
            width: var(--_thumb-size);
            height: var(--_thumb-size);
            box-sizing: border-box;
            border: 2px solid var(--primary-clr-400);
            border-radius: 50%;
            background-color: var(--white-clr);
            pointer-events: auto;
            cursor: pointer;
        }

        &:focus-visible {
            outline: none;

            &::-webkit-slider-thumb {
                outline: 2px solid var(--primary-clr-400);
                outline-offset: 2px;
            }
        }
    }
}

.budget-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-200);
    color: var(--gray-clr-600);
}

.onboarding-card:has(.bootstrap-select > .dropdown-menu.show) .onboarding-step.active {
    z-index: 5;
}

.onboarding-card .bootstrap-select {
    > .dropdown-menu.show:not(.inner) {
        --_menu-gap: 0.25rem;

        padding: 0.5rem;
        border: 1px solid var(--_control-border-clr);
        border-radius: 0.75rem;
        background-color: var(--white-clr);
        box-shadow: var(--shadow-lg);
        font-family: var(--ff-inter);
        font-size: var(--fs-300);
        margin: 0 !important; /* overrides the global menu margin so only --_menu-gap separates panel and field */
        translate: 0 var(--_menu-gap);

        &[data-popper-placement^="top"] {
            translate: 0 calc(-1 * var(--_menu-gap));
        }
    }

    .bs-searchbox {
        padding: 0 0 0.5rem;

        .form-control {
            height: 2.25rem;
            padding: 0.375rem 0.75rem;
            border: 1px solid var(--_control-border-clr);
            border-radius: 0.625rem;
            font-size: var(--fs-300);
            line-height: 1.25rem;
            letter-spacing: -0.01em;
            box-shadow: none;

            &:focus {
                border-color: var(--_accent-clr);
                outline: 0;
            }
        }
    }

    .inner {
        padding: 0;
    }

    .dropdown-menu.inner {
        display: block;
        margin: 0 !important;
        padding: 0;
    }

    .dropdown-item {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        font-size: var(--fs-300);
        line-height: 1.25rem;
        letter-spacing: -0.01em;
        white-space: normal;
        color: var(--midnight-blue-clr-900);

        &:hover,
        &:focus {
            background-color: var(--_accent-soft-clr);
            color: var(--_accent-strong-clr);
        }

        &.active,
        &.selected {
            background-color: var(--_accent-soft-clr);
            font-weight: var(--fw-500);
            color: var(--_accent-strong-clr);
        }

        &.disabled {
            background: none;
            color: var(--gray-clr-400);
        }
    }

    .no-results {
        padding: 0.5rem 0.75rem;
        background: none;
        color: var(--_muted-clr);
    }
}

.onboarding-footer {
    display: flex;
    justify-content: center;
    padding: 1.25rem;
    border-top: 1px solid var(--_line-clr);
}

.onboarding-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: min(100%, 20rem);
    height: 3.125rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 1.25rem;
    background: linear-gradient(90deg, #c62b78 0%, #b8368c 28%, #a146a9 72%, #8439b9 100%);
    box-shadow:
        inset 0 -2px 6px rgb(255 255 255 / 0.18),
        inset 0 2px 8px rgb(255 255 255 / 0.69);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: var(--fw-500);
    line-height: 2rem;
    color: var(--white-clr);
    cursor: pointer;
    transition: filter 150ms ease;

    &:hover {
        filter: brightness(1.08);
    }

    &:focus-visible {
        outline: 2px solid var(--primary-clr-400);
        outline-offset: 2px;
    }
}

.onboarding-card:has(.onboarding-step--plain.active) .onboarding-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--_line-clr);
}

.onboarding-highlight {
    margin-left: 0.25rem;
    font-weight: var(--fw-600);
    color: var(--_accent-strong-clr);
}

.onboarding-photo--plain::after {
    content: none;
}

.onboarding-default-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.onboarding-socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--_line-clr);

    @media (width <= 480px) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.onboarding-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background-color: var(--gray-clr-100);
    font-family: inherit;
    font-size: var(--fs-200);
    color: var(--black-clr);
    cursor: pointer;
    transition: background-color 150ms ease;

    &:hover {
        background-color: var(--gray-clr-200);
    }

    &:focus-visible {
        outline: 2px solid var(--primary-clr-400);
        outline-offset: 2px;
    }

    .iconify {
        font-size: 1.125rem;
    }
}

.onboarding-terms {
    a {
        color: var(--_accent-strong-clr);
        text-decoration: none;
    }

    label {
        font-size: var(--fs-200);
        color: var(--gray-clr-600);
    }
}

/* Notice and reCAPTCHA share one row at the same height; they stack on narrow screens */
.onboarding-verify {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;

    .onboarding-notice {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
    }

    .recaptcha-wrapper {
        flex: none;
        margin: 0;
    }

    @media (width <= 768px) {
        flex-direction: column;
    }
}

.onboarding-notice {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    background-color: #fff7ed;
    font-size: var(--fs-100);
    color: var(--gray-clr-600);

    img {
        flex: none;
        margin-top: 0.125rem;
    }

    p {
        margin: 0;
    }

    .onboarding-notice-title {
        font-size: var(--fs-250);
        color: var(--black-clr);
    }
}

.onboarding-step-footer {
    display: flex;
    justify-content: center;
    margin: 0 -1.5rem -1.25rem;
    padding: 1.25rem;
    border-top: 1px solid var(--_line-clr);
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;

    @media (width <= 768px) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background-color: var(--gray-clr-100);
}

.review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;

    h3 {
        margin: 0;
        font-size: var(--fs-300);
        font-weight: var(--fw-500);
        color: var(--black-clr);
    }
}

.review-edit {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--_accent-strong-clr);
    cursor: pointer;

    &:focus-visible {
        outline: 2px solid var(--_accent-strong-clr);
        outline-offset: 2px;
    }
}

.review-rows {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
    align-content: start;
    gap: 0.75rem 0.5rem;
    margin: 0;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--white-clr);
    font-size: var(--fs-200);

    dt {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        color: var(--gray-clr-400);

        .iconify {
            flex: none;
            font-size: 0.875rem;
            color: var(--_accent-strong-clr);
        }
    }

    dd {
        margin: 0;
        overflow-wrap: anywhere;
        color: var(--black-clr);
    }
}

.matching-dialog {
    margin: auto;
    width: min(100% - 2rem, 32.375rem);
    padding: 3.125rem 2.25rem;
    border: 1px solid var(--gray-clr-200);
    border-radius: 1.25rem;
    background-color: var(--white-clr);
    box-shadow: 0 1rem 2.5rem rgb(27 26 33 / 0.18);
    font-family: var(--ff-inter);
    text-align: center;

    &[open] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    @media (width <= 480px) {
        padding-inline: 1.5rem;
    }

    &::backdrop {
        background-color: rgb(30 20 60 / 0.35);
    }

    &:focus {
        outline: none;
    }

    h2 {
        margin: 0 0 0.375rem;
        font-family: inherit;
        font-size: 1.25rem;
        font-weight: var(--fw-600);
        line-height: normal;
        color: var(--black-clr);
    }

    p {
        margin: 0;
        font-size: var(--fs-300);
        color: var(--gray-clr-600);
    }
}

.matching-bubble {
    position: relative;
    padding: 0.675rem 1.1875rem;
    border: 1px solid var(--gray-clr-200);
    border-radius: 0.844rem;
    background-color: var(--white-clr);
    font-size: 0.844rem;
    font-weight: var(--fw-500);
    color: var(--black-clr);

    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1.1875rem;
        height: 0.5938rem;
        translate: -50% -1px;
        background: url("../../images/student-registration/bubble-tail.svg") no-repeat center / contain;
    }
}

.matching-owl {
    width: 5.5rem;
    margin-top: 0.625rem;

    img,
    .mascot-lottie {
        display: block;
        width: 100%;
        height: auto;
    }
}

.matching-checklist {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0 0;
    list-style: none;
    font-size: var(--fs-300);
    text-align: left;

    li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--black-clr);

        &::before {
            content: "";
            flex: none;
            width: 1.25rem;
            height: 1.25rem;
            background: url("../../images/student-registration/icon-pending.svg") no-repeat center / contain;
        }

        &[data-state="pending"] {
            color: var(--gray-clr-500);
        }

        &[data-state="active"]::before {
            background-image: url("../../images/student-registration/icon-spinner.svg");
            animation: onboarding-spin 900ms linear infinite;
        }

        &[data-state="done"]::before {
            background-image: url("../../images/student-registration/icon-check-done.svg");
        }
    }
}

@keyframes onboarding-spin {
    to {
        rotate: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .matching-checklist li[data-state="active"]::before {
        animation: none;
    }
}

.onboarding-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1.5rem;

    &[hidden] {
        display: none;
    }

    .onboarding-done-owl {
        width: 12rem;
        margin-block: 1.5rem 1.5rem;
    }

    .onboarding-continue {
        width: auto;
        padding-inline: 2.5rem;
        text-decoration: none;
    }
}
/* End of Student Onboarding */