@layer components;

@layer components {
    .registration-page {
        background: var(--color-elk-blue-50, #fafbff);
    }

    .registration-form {
        max-width: 25rem;
        margin: 0 auto -2rem;
        padding: 4rem 1rem 5rem;
    }

    .registration-title {
        margin: 0 0 1.5rem 0;
        font-size: 2.25rem;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -0.02em;
        color: var(--color-base-950, #000);
    }

    .registration-form > * {
        margin-bottom: 1.5rem;
    }

    .field__label,
    .fieldset__legend {
        display: block;
        margin-bottom: .4rem;
        font-size: 1.05rem;
        line-height: 1.25;
        font-weight: 600;
        color: var(--color-base-900, #242424);
    }

    .field__input {
        width: 100%;
        box-sizing: border-box;
        padding: .8rem .9rem;
        border-radius: .5rem;
        border: 2px solid rgba(0, 0, 0, .14);
        background: #fff;
        font-size: 1rem;
        line-height: 1.25;
        color: var(--color-base-900, #242424);
    }

    .field__input::placeholder {
        color: rgba(0, 0, 0, .45);
    }

    .field__input:focus {
        outline: none;
        border-color: var(--color-elk-blue-500, #4C54DF);
        box-shadow: 0 0 0 3px rgba(76, 84, 223, .18);
    }

    .fieldset {
        border: 0;
        padding: 0;
        background: transparent;
    }

    .fieldset__content,
    .fieldset--options .options,
    .fieldset .twofa {
        padding: 1rem;
        border-radius: .75rem;
        border: 2px solid rgba(0, 0, 0, .10);
        background: rgba(255, 255, 255, .65);
    }

    .fieldset--options .options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
        margin-top: .4rem;
    }

    .option {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .75rem .9rem;
        border: 2px solid rgba(0, 0, 0, .14);
        border-radius: .6rem;
        background: #fff;
        cursor: pointer;
        user-select: none;
    }

    .option__radio {
        width: 1.05rem;
        height: 1.05rem;
        margin: 0;
        accent-color: var(--color-elk-blue-500, #4C54DF);
    }

    .option__label {
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--color-elk-blue-900, #161265);
    }

    .option:has(input:checked) {
        border-color: var(--color-elk-blue-500, #4C54DF);
        box-shadow: 0 0 0 3px rgba(76, 84, 223, .12);
    }

    .terms {
        margin-top: .25rem;
    }

    .checkbox {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        font-size: .95rem;
        line-height: 1.35;
        color: rgba(0, 0, 0, .70);
    }

    .checkbox__input {
        width: 1.05rem;
        height: 1.05rem;
        margin-top: .2rem;
        accent-color: var(--color-elk-blue-500, #4C54DF);
    }

    .checkbox__link {
        color: var(--color-elk-blue-500, #4C54DF);
        text-decoration: none;
    }

    .checkbox__link:hover {
        text-decoration: underline;
    }

    .twofa {
        display: grid;
        gap: .9rem;
        margin-top: .4rem;
    }

    .twofa__button {
        justify-self: start;
        display: inline-flex;
        border-width: 2px;
        border-radius: 9999px;
        font-size: .95rem;
        line-height: 1.25rem;
        padding: .5rem 1.1rem;
        text-decoration: none;
        border-color: var(--color-elk-blue-500, #4C54DF);
        color: var(--color-elk-blue-500, #4C54DF);
        background: transparent;
    }

    .twofa__button[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

    .actions {
        margin-top: .25rem;
    }

    .submit {
        width: 100%;
        padding: .85rem 1.15rem;
        border-radius: 9999px;
        border: 2px solid var(--color-elk-blue-500, #4C54DF);
        background: var(--color-elk-blue-500, #4C54DF);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
    }

    .submit:hover {
        border-color: var(--color-elk-blue-700, #2426C7);
        background: var(--color-elk-blue-700, #2426C7);
    }

    .form-errors {
        border: 2px solid rgba(208, 6, 43, .25);
        background: var(--color-elk-red-50, #FFF5F7);
        border-radius: .75rem;
        padding: 1rem;
    }

    .form-errors p {
        margin: 0 0 .5rem 0;
        font-weight: 800;
    }

    .form-errors ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    @media (width <= 520px) {
        .registration-title {
            font-size: 1.9rem;
        }

        .fieldset--options .options {
            grid-template-columns: 1fr;
        }
    }
}