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

    .registration-form {
        max-width: 22rem;
        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:has(.error){
      .field__input {
          border-color: rgba(208,6,43,.25);
      }
    }

    .error {
      margin-top: .275rem;
      font-size: .8rem;
    }

    .field__input {
        width: 100%;
        box-sizing: border-box;
        padding: .7rem .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);
        &:disabled {
            cursor: not-allowed;
        }
    }

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

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

    .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);
    }

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

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

    .twofa {
        margin-top: 3rem;
        &:disabled {
            opacity: 50%;
            cursor: not-allowed;
        }
    }

    .twofa__button {
        width: 100%;
        margin-top: 1rem;
        padding: .85rem 1.15rem;
        border-radius: 9999px;
        border: 2px solid var(--color-elk-blue-500);
        background: var(--color-elk-blue-500);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        &:disabled {
            cursor: not-allowed;
        }
    }

    .twofa__button:not(:disabled):hover {
        background: var(--color-elk-blue-700);
        border-color: var(--color-elk-blue-700);
    }

    .verification-code {
        input {
            text-align: center;
            font-size: 1.1rem;
            letter-spacing: 1rem;
            padding-left: 2rem;
        }
        ::placeholder {
            text-align: center;
        }
    }

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

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

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

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

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

    /* Hide widget when not idle AND create-account fields are present */
    .twofa.fieldset:not(:has(.idle)):has(.create-account) {
      #registration_call_widget {
        display: none;
      }
    }
    /* Hide create-account fields when idle */
    .twofa.fieldset:has(.idle) {
      .create-account {
        display: none;
      }
    }

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

    .form-errors {
        border: 2px solid rgba(208,6,43,.25);
        background: var(--color-elk-red-50);
        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;
    }
}