/* UM Login Styles FOR CENTRALIZED LOGIN PORTAL ADMIN / USER "/login" */

/* Apply DM Sans font to the entire login form */
body.login, 
body.login .um-login, 
body.login .um-login * {
    font-family: 'DM Sans', Inter, system-ui, -apple-system, sans-serif;

}


/* Form container */
.um-login .um-form {
    max-width: 400px !important;
    margin: auto !important;
    padding: 32px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
}

/* Labels */
.um-login .um-field-label label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* Text / Password Inputs */
.um-login .um-field-area input[type="text"],
.um-login .um-field-area input[type="password"],
.um-login .um-field-area input[type="email"] {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    font-size: 14px !important;
    color: #111827 !important;
    transition: all 0.2s ease !important;
}

/* Input focus */
.um-login .um-field-area input[type="text"]:focus,
.um-login .um-field-area input[type="password"]:focus,
.um-login .um-field-area input[type="email"]:focus {
    border-color: #E6AB40 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15) !important;
}

/* Submit button */
.um-login .um-button,
.um-login input#um-submit-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #c49134, #E6AB40) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Button hover / active */
.um-login .um-button:hover,
.um-login input#um-submit-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(230, 171, 64, 0.35) !important;
}
.um-login .um-button:active,
.um-login input#um-submit-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 8px 20px rgba(230, 171, 64, 0.35) !important;
}

/* Checkbox color - match wp-admin style */
.um-login .um-field-checkbox input[type="checkbox"] {
    accent-color: #E6AB40 !important; /* modern browsers */
}

/* UM icon for checkbox (older versions of UM that use <i>) */
.um-login .um-field-checkbox .um-field-checkbox-state i {
    color: #E6AB40 !important;
}

/* Hover effect for checkbox */
.um-login .um-field-checkbox:hover .um-field-checkbox-state i {
    color: #BB7901DB !important; /* hover color */
}

/* Links */
.um-login .um-form a,
.um-login .um-form .um-link {
    color: #E6AB40 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}
.um-login .um-form a:hover,
.um-login .um-form .um-link:hover {
    text-decoration: underline !important;
}

/* Optional: background */
body.um-login {
    background: #f9fafb !important;
}

/* Style for the main heading in the login form */
.um-row-heading {
    font-size: 32px;       /* Adjust heading size */
    font-weight: 800;      /* Bold */
    color: #111827;        /* Dark text color */
    margin-bottom: 8px;    /* Space between heading and subheading */
}

/* Add subheading text using CSS pseudo-element */
.um-login .um-row-heading::after {
    content: "Access your dashboard and data."; /* The subheading text */
    display: block;
    font-size: 14px;       /* Smaller than heading */
    font-weight: 400;      /* Normal weight */
    color: #6b7280;        /* Gray text like labels */
    margin-top: 4px;       /* Space between heading and subheading */
    margin-bottom: 20px;   /* Space before form fields */
}