@layer utilities {
    .page {
        transition: all 0.5s ease-in-out;
    }
    .page.hidden {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }
    .feedback {
        position: fixed;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 1rem 2rem;
        border-radius: 9999px;
        font-weight: bold;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transition: all 0.5s ease-in-out;
        z-index: 50;
        text-align: center;
        max-width: 90%;
    }
    .feedback.hidden {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
    .feedback.success {
        background-color: #10B981;
        color: white;
    }
    .feedback.error {
        background-color: #EF4444;
        color: white;
    }
    .feedback.warning {
        background-color: #F59E0B;
        color: white;
    }
    @keyframes slideDown {
        0% { transform: translate(-50%, -100%); }
        100% { transform: translate(-50%, 0); }
    }
    .animate-slide-down {
        animation: slideDown 0.5s ease-out forwards;
    }
    .invalid-feedback {
        display: none;
        width: 100%;
        margin-top: .25rem;
        font-size: 12px;
        color: #ec536c;
    }
    .is-invalid~.invalid-feedback,
    .is-invalid~.invalid-tooltip,
    .was-validated :invalid~.invalid-feedback,
    .was-validated :invalid~.invalid-tooltip {
        display: block;
    }

    .alert {
        --bs-alert-bg: transparent;
        --bs-alert-padding-x: 1.25rem;
        --bs-alert-padding-y: 0.75rem;
        --bs-alert-margin-bottom: 1rem;
        --bs-alert-color: inherit;
        --bs-alert-border-color: transparent;
        --bs-alert-border: 1px solid #bcf1cd;
        --bs-alert-border-radius: 0.25rem;
        --bs-alert-link-color: inherit;
        position: relative;
        padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
        margin-bottom: var(--bs-alert-margin-bottom);
        color: var(--bs-alert-color);
        background-color: var(--bs-alert-bg);
        border: var(--bs-alert-border);
        border-radius: var(--bs-alert-border-radius);
    }

    .alert-success {
        --bs-alert-color: #235834;
        --bs-alert-bg: #def8e6;
        --bs-alert-border-color: #bcf1cd;
        --bs-alert-link-color: #235834;
    }

    .alert-danger {
        --bs-alert-color: #ff5a5a;
        --bs-alert-bg: #ffb1b1;
        --bs-alert-border-color: #ff8989;
        --bs-alert-link-color: #ff5a5a;
    }
}