/* --- AR: Access Restricted Styles --- */
.ar-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.ar-box { background: #fffcf0; border: 2px solid #f1c40f; padding: 40px; text-align: center; border-radius: 8px; max-width: 450px; }
.ar-box h2 { color: #856404; margin-bottom: 10px; }
.ar-options { margin-top: 25px; }
.ar-btn-member { display: block; background: #0073aa; color: #fff; padding: 15px; text-decoration: none; border-radius: 4px; font-weight: bold; }
.ar-divider { margin: 15px 0; font-style: italic; color: #999; }
.ar-btn-guest { display: block; color: #666; text-decoration: underline; }


/* --- CLP: Custom Login Page Styles --- */
.clp-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.clp-box { background: #ffffff; border: 1px solid #ddd; padding: 30px; border-radius: 4px; width: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.clp-error { background: #fff0f0; color: #d00; padding: 10px; margin-bottom: 15px; border-left: 4px solid #d00; font-size: 14px; }

/* Targeting the form elements inside your CLP box */
.clp-box #ziologinform p { margin-bottom: 15px; }
.clp-box label { display: block; margin-bottom: 5px; font-weight: bold; }
.clp-box input[type="text"], 
.clp-box input[type="password"] { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    box-sizing: border-box; /* Ensures padding doesn't push width past 100% */
}

/* UPDATED: Matches the ID in your AJAX handleAjaxLogin() function */
#submit-login { 
    width: 100%; 
    background-color: #0073aa; 
    color: white; 
    border: none; 
    padding: 12px; 
    cursor: pointer; 
    font-size: 16px; 
    border-radius: 4px;
}

#submit-login:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.clp-options { margin-top: 20px; text-align: center; }
.clp-guest-link { color: #666; text-decoration: underline; font-size: 14px; }