/* Modern Login Input Styling */
.login-page .input-group,
.container .input-group {
    border: 1px solid #e0e6ed !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-page .input-group:focus-within,
.container .input-group:focus-within {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.login-page .input-group .input-group-text,
.container .input-group .input-group-text {
    border: none !important;
    border-right: 1px solid #e0e6ed !important;
    background-color: #f8f9fa !important;
}

.login-page .input-group .form-control,
.container .input-group .form-control {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: var(--font-family-primary, 'Cairo', system-ui, sans-serif) !important;
}

.login-page .input-group .form-control:focus,
.container .input-group .form-control:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Arabic language support for login forms */
.login-page :lang(ar) .form-control,
.container :lang(ar) .form-control,
.login-page [lang="ar"] .form-control,
.container [lang="ar"] .form-control {
    font-family: var(--font-family-arabic, 'Cairo', 'Traditional Arabic', 'Tahoma', sans-serif) !important;
    direction: rtl !important;
    text-align: right !important;
}

/* Enhanced typography for login page */
.login-page h1, .login-page h2, .login-page h3, .login-page h4, .login-page h5, .login-page h6,
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6 {
    font-family: var(--font-family-primary, 'Cairo', system-ui, sans-serif) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.login-page :lang(ar) h1, .login-page :lang(ar) h2, .login-page :lang(ar) h3, 
.login-page :lang(ar) h4, .login-page :lang(ar) h5, .login-page :lang(ar) h6,
.login-page [lang="ar"] h1, .login-page [lang="ar"] h2, .login-page [lang="ar"] h3,
.login-page [lang="ar"] h4, .login-page [lang="ar"] h5, .login-page [lang="ar"] h6 {
    font-family: var(--font-family-arabic, 'Cairo', 'Traditional Arabic', 'Tahoma', sans-serif) !important;
    direction: rtl;
    text-align: right;
}

/* Button typography */
.login-page .btn, .container .btn {
    font-family: var(--font-family-primary, 'Cairo', system-ui, sans-serif) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Label styling */
.login-page label, .container label {
    font-family: var(--font-family-primary, 'Cairo', system-ui, sans-serif) !important;
    font-weight: 500;
}

.login-page :lang(ar) label, .login-page [lang="ar"] label,
.container :lang(ar) label, .container [lang="ar"] label {
    font-family: var(--font-family-arabic, 'Cairo', 'Traditional Arabic', 'Tahoma', sans-serif) !important;
    direction: rtl;
    text-align: right;
}

/* Mobile-specific styles - smaller font sizes for mobile devices only */
@media (max-width: 767.98px) {
    /* Smaller placeholder text on mobile */
    .login-page .form-control::placeholder {
        font-size: 0.875rem !important; /* 14px instead of default 16px */
    }
    
    /* Smaller title text on mobile */
    .login-page .card-header {
        font-size: 1.1rem !important; /* Smaller than default h5 size */
    }
    
    /* Ensure input text size matches placeholder size on mobile */
    .login-page .form-control {
        font-size: 0.875rem !important;
    }
}

.logo {
    font-family: cairo;
}