/*!
 * =======================================================================
 * EASYPARCEL AUTH LOGIN STYLES
 * =======================================================================
 * 
 * Specific styles for the login form, including fixes for
 * eye icon alignment issues
 * 
 * Author: EasyParcel Development Team
 * Version: 1.0.0
 * =======================================================================
 */

/* 
 * LOGIN FORM SPECIFIC STYLES
 * 
 * Note: Eye icon positioning is now handled globally in app.css
 * This file focuses only on login-specific styling needs
 */

/* Ensure the eye icon itself is properly styled */
.login-card .login-main .show-hide span {
    cursor: pointer !important;
    font-size: 14px !important; /* Slightly smaller for better balance */
    color: var(--theme-default, #6c757d) !important; /* Fallback color */
    font-family: "bootstrap-icons" !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transition: color 0.15s ease-in-out !important;
    width: 14px !important;
    height: 14px !important;
    text-align: center !important;
}

/* Icon hover state for better UX */
.login-card .login-main .show-hide:hover span {
    color: var(--bs-primary, #0d6efd) !important;
}

/* Ensure the button itself is properly sized for touch targets */
.login-card .login-main .show-hide {
    min-width: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
}

/* Make sure validation feedback doesn't interfere */
.login-card .login-main .form-input .invalid-feedback {
    margin-top: 0.25rem !important;
    position: relative !important;
}

/* 
 * LOGIN BUTTON ENHANCEMENTS
 * Styles for disabled state and loading spinner
 */

/* Disabled login button styling */
.login-card .login-main .btn[disabled],
.login-card .login-main .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Loading spinner in button */
.login-card .login-main .btn .spinner-border-sm {
    width: 0.875rem !important;
    height: 0.875rem !important;
    border-width: 0.125rem !important;
}

/* Ensure submit button text alignment during loading - only target submit button */
.login-card .login-main .btn[type="submit"],
.login-card .login-main .btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.5rem !important;
}

/* Ensure social buttons remain inline */
.login-card .login-main .btn-showcase .btn {
    display: inline-block !important;
}

/* 
 * ACCESSIBILITY ENHANCEMENTS
 * Focus states, keyboard navigation, and ARIA support
 */

/* Checkbox focus highlighting - Back to original .checkbox class */
.login-card .login-main .checkbox input[type="checkbox"]:focus,
.login-card .login-main input#remember:focus,
body .login-card .login-main input#remember:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    border-color: #86b7fe !important;
}

/* Checkbox focus-visible for keyboard navigation */
.login-card .login-main .checkbox input[type="checkbox"]:focus-visible,
.login-card .login-main input#remember:focus-visible,
body .login-card .login-main input#remember:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    border-color: #86b7fe !important;
}

/* Enhanced checkbox styling - Completely hide the input since label creates the visual checkbox */
.login-card .login-main .checkbox input[type="checkbox"],
.login-card .login-main input#remember {
    /* Completely hide the input - label pseudo-elements handle the visual appearance */
    margin-left: -13px !important;
}

/* Ensure the checkbox container has relative positioning for proper label pseudo-element positioning */
.login-card .login-main .checkbox {
    position: relative !important;
}

/* Fix label pseudo-element positioning to appear before the text */
.login-card .login-main .checkbox label {
    padding-left: 25px !important; /* Add space for the checkbox */
}

.login-card .login-main .checkbox label::before {
    left: 0 !important; /* Position checkbox at the start */
    margin-left: 0 !important; /* No negative margin */
    top: 50% !important; /* Center vertically */
    transform: translateY(-50%) !important; /* Perfect vertical centering */
}

/* Enhanced focus styling for the custom checkbox label pseudo-elements */
.login-card .login-main .checkbox input[type="checkbox"]:focus + label::before,
.login-card .login-main input#remember:focus + label::before {
    /* Add focus ring to the custom checkbox */
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    border-color: #86b7fe !important;
}

/* Focus-visible for keyboard navigation */
.login-card .login-main .checkbox input[type="checkbox"]:focus-visible + label::before,
.login-card .login-main input#remember:focus-visible + label::before {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    border-color: #86b7fe !important;
}

/* Original checkbox label styling */
.login-card .login-main .checkbox label {
    cursor: pointer !important;
    user-select: none !important;
}

/* Remove custom positioning - let Bootstrap handle alignment */

/* Password toggle button accessibility and focus states */
.login-card .login-main .show-hide {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.25rem !important; /* Consistent with above */
    border-radius: 0.25rem !important; /* Consistent with above */
    transition: all 0.15s ease-in-out !important;
}

/* Password toggle button focus states */
.login-card .login-main .show-hide:focus {
    outline: 2px solid var(--bs-primary, #0d6efd) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.login-card .login-main .show-hide:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Password toggle button hover state */
.login-card .login-main .show-hide:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Enhance form control focus states */
.login-card .login-main .form-control:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Button focus enhancement */
.login-card .login-main .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Link focus enhancement */
.login-card .login-main a:focus {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}