/**
 * Sirmax Academy Custom Login Form Styles
 * Colors: Purple, Green, White, Black
 */

/* Container for positioning (ensures it is centered on a full-width template) */
.sirmax-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Adjust as needed */
    padding: 20px;
    background-color: #1a1a1a00; /* Apply dark background to wrapper for better contrast */
}

.sirmax-login-wrapper .card-bg {
    /* White Card Background */
    background-color: #ffffff; 
}

/* Purple Accent (Primary action color) */
.sirmax-login-wrapper .main-accent {
    background-color: #6d28d9; /* Deep Purple (Violet-700) */
}
.sirmax-login-wrapper .main-accent-text {
    color: #6d28d9;
}
.sirmax-login-wrapper .main-accent:hover {
    background-color: #5b21aa; /* Darker Purple (Violet-800) */
}

/* Green Accent (Success/Highlight color) */
.sirmax-login-wrapper .success-bg {
    background-color: #10b981; /* Emerald Green */
}
.sirmax-login-wrapper .success-text {
    color: #059669;
}

/* Custom shadows for depth */
.sirmax-login-wrapper .card-shadow {
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Input Styles */
.sirmax-login-wrapper input[type="text"],
.sirmax-login-wrapper input[type="password"] {
    border: 1px solid #d1d5db; /* Gray-300 */
}
.sirmax-login-wrapper input[type="text"]:focus,
.sirmax-login-wrapper input[type="password"]:focus {
    border-color: #6d28d9; /* Purple on focus */
    box-shadow: 0 0 0 1px #6d28d9; 
    outline: none;
}

/* Custom checkbox style (for compatibility) */
.sirmax-login-wrapper input[type="checkbox"] {
    border-color: #e5e7eb;
    color: #6d28d9; /* Checkmark color */
}

/* Ensure Logo sizing is consistent if custom logo is used */
.sirmax-login-wrapper img {
    max-width: 80px;
    height: auto;
}

/* Spinner Styles */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Spinner is controlled by JS setting its display property */
.spinner-container {
    display: none; 
}