@layer components {
    .participant-password-card {
        @apply overflow-hidden bg-white;
    }

    .participant-password-card__header {
        @apply items-start gap-5;
    }

    .participant-password-card__title {
        @apply gap-4 text-[2.125rem] font-bold text-slate-900;
    }

    .participant-password-card__title-icon {
        @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-xl text-primary;
    }

    .participant-password-card__subtitle {
        @apply mt-3 text-lg text-slate-600;
    }

    .participant-password-card__actions {
        @apply w-full justify-start md:w-auto md:justify-end;
    }

    .participant-password-card__actions .btn {
        @apply min-w-[8rem] rounded-xl px-6 py-3 text-base font-medium normal-case;
    }

    .participant-password-card__body {
        @apply pt-7;
    }

    .participant-password-form-shell {
        @apply max-w-[42rem];
    }

    .participant-password-form-shell form {
        @apply flex flex-col gap-6;
    }

    .participant-password-form-shell .form-group,
    .participant-password-form-shell .group-container,
    .participant-password-form-shell .form-button {
        @apply m-0;
    }

    .participant-password-form-shell label {
        @apply mb-2 block text-base font-semibold text-slate-600;
    }

    .participant-password-form-shell label.required::after {
        content: ' *';
        @apply text-rose-500;
    }

    .participant-password-form-shell input,
    .participant-password-form-shell select,
    .participant-password-form-shell textarea {
        @apply rounded-xl px-4 py-3.5 text-lg text-slate-800 focus:ring-2 focus:ring-primary/10;
    }

    .participant-password-form-shell .help-block,
    .participant-password-form-shell .theme-help,
    .participant-password-form-shell .theme-error {
        @apply mt-2 text-sm;
    }

    .participant-password-form-shell .theme-help {
        @apply text-slate-500;
    }

    .participant-password-form-shell .help-block,
    .participant-password-form-shell .theme-error {
        @apply text-rose-600;
    }

    .participant-password-form-shell .form-button {
        @apply flex flex-wrap items-center gap-3 pt-2;
    }

    .participant-password-form-shell .form-button .btn {
        @apply min-w-[11rem] rounded-xl px-6 py-3.5 text-base font-semibold normal-case;
    }

    .participant-password-form-shell .form-button .btn-default,
    .participant-password-form-shell .form-button .btn-tertiary {
        @apply bg-white text-slate-700 hover:bg-slate-50;
    }
}