/**
 * Auth Screens Shared Styles
 * Centralizes styles for SignIn, EmailInput, CheckEmail, etc.
 */

/* Responsive Button and Input sizing using clamp */
.auth-input-lg {
    height: 60px !important;
    font-size: 1.125rem !important; /* 18px */
}

.auth-btn-lg {
    height: 60px !important;
    font-size: 1.125rem !important; /* 18px */
}

.auth-arrow-icon {
    font-size: 18px;
}

@media (min-width: 640px) {
    .auth-arrow-icon {
        font-size: 28px;
    }
}

@media (min-width: 768px) {
    .auth-arrow-icon {
        font-size: 32px;
    }
}

/* OTP Input Shake Animation */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake-animation {
    animation: shake 0.4s ease-in-out;
    border-color: #ef4444 !important;
    /* red-500 */
}

.signin-form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.signin-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* gap-6 equivalent */
}

.signin-input-custom {
    background-color: #F3F4F6 !important;
    border: none !important;
}

.signin-input-custom:focus {
    box-shadow: 0 0 0 1px #3b82f6 !important;
    /* focus:ring-1 focus:ring-blue-500 */
}

.signin-input-custom.error {
    background-color: #fef2f2 !important;
    /* bg-red-50 */
    border: 1px solid #ef4444 !important;
    /* border-red-500 */
}

.signin-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* gap-2 */
    margin-top: auto;
    padding-top: 2.5rem;
    /* pt-10 */
}

.signin-signup-text {
    width: 100%;
    max-width: 380px;
    text-align: center;
    margin-top: 1rem;
    /* mt-4 */
    font-size: 0.875rem;
    /* text-sm */
    font-family: 'Segoe UI Variable', sans-serif;
    background: linear-gradient(180deg, rgba(0, 212, 178, 0.9) 0.48%, rgba(1, 198, 177, 0.9) 9.62%, rgba(1, 180, 176, 0.9) 21.63%, rgba(3, 141, 173, 0.9) 47.12%, rgba(6, 61, 167, 0.9) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.signin-signup-link {
    color: #2563eb;
    /* text-blue-600 */
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

.signin-signup-link:hover {
    color: #1d4ed8;
    /* text-blue-700 */
}