/* RTL Auth Styles */

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.animated-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.custom-input:focus {
    box-shadow: 0 0 0 4px rgba(108, 13, 154, 0.1);
}

/* Floating shapes */
.shape-blob {
    position: absolute;
    background: linear-gradient(135deg, rgba(108, 13, 154, 0.4) 0%, rgba(239, 197, 74, 0.4) 100%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    z-index: 0;
    animation: blob-float 10s infinite alternate;
}

@keyframes blob-float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-20px, 40px) rotate(-20deg);
    }

    /* Mirrored Float */
}

/* Layout Directions Overrides */
body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif;
    /* Ensure Arabic font is prioritized */
}

/* Icon positioning fixes for RTL if Tailwind doesn't catch them all */
.absolute.start-0 {
    right: 0;
    left: auto;
}

.absolute.end-0 {
    left: 0;
    right: auto;
}

.ps-10 {
    padding-right: 2.5rem !important;
    /* 10 * 0.25rem */
    padding-left: 0.75rem !important;
}

.pe-3 {
    padding-left: 0.75rem !important;
    padding-right: 2.5rem !important;
    /* Adjust if needed */
}

/* Input Specifics */
input {
    text-align: right;
}

/* Margin Mirrors */
.ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

.me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Flex directions */
.flex-row {
    flex-direction: row-reverse;
}

/* Background blob mirroring */
.shape-blob.top-\[-10\%\] {
    right: -10%;
    left: auto;
}

.shape-blob.left-\[-10\%\] {
    right: -10%;
    left: auto;
}

.login-password-toggle{
    flex-direction: row-reverse;
}