/* MEMBER SECTIONS */
.login-section, .register-section {width:100%;min-height:calc(100vh - 80px);display:flex;align-items:center}
.login-container, .register-container {max-width:500px;width:100%;margin:0 auto;background:var(--white);border-radius:20px;padding:40px;border:1px solid var(--gray-05)}

/* MEMBER HEADERS */
.login-header, .register-header {text-align:center;margin-bottom:30px}
.login-header h1, .register-header h1 {font-size:28px;font-weight:700;color:var(--gray-99);margin:0}

/* MEMBER FORMS */
.login-form, .register-form {display:flex;flex-direction:column;gap:20px}
.form-input {padding:12px 16px;border:1px solid var(--gray-10);border-radius:12px;font-size:16px;transition:all 0.3s ease}
.form-input:focus {border-color:var(--orange-bg);outline:none;background:var(--white);box-shadow:0 0 0 3px var(--rgba-10)}
.form-input::placeholder {color:var(--gray-30)}
.form-input.error {border-color:var(--red)}
.form-input.success {border-color:var(--green)}
.form-group.login, .form-group.register {display:flex;flex-direction:column;gap:6px}

/* CHECKBOX */
.checkbox-group {flex-direction:row;align-items:center;gap:0}
.register-form .checkbox-group {align-items:flex-start;margin-top:10px}
.checkbox-label {display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--gray-90)}
.register-form .checkbox-label {align-items:flex-start;line-height:1.4}
.checkbox-label input[type="checkbox"] {display:none}
.checkmark {width:18px;height:18px;border:2px solid var(--gray-20);border-radius:4px;position:relative;transition:all 0.3s ease}
.register-form .checkmark {flex-shrink:0;margin-top:1px}
.checkbox-label input[type="checkbox"]:checked + .checkmark {background:var(--orange-bg);border-color:var(--orange-bg)}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--white);font-size:12px;font-weight:bold}

/* MEMBER BUTTONS */
.login-btn, .register-btn {width:100%;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--orange-bg);color:var(--white);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;margin-top:10px}
.login-btn:hover, .register-btn:enabled:hover {background:var(--primary-90);transform:translateY(-1px)}
.login-btn:disabled, .register-btn:disabled {background:var(--gray-20);cursor:not-allowed;transform:none}
.register-btn:disabled {cursor:not-allowed}
.register-btn:enabled {background:var(--orange-bg);cursor:pointer}

/* MEMBER LINKS */
.login-links, .register-links {display:flex;justify-content:center;gap:20px;margin-top:20px}
.register-links {align-items:center;gap:8px;font-size:14px}
.login-link, .register-link {font-size:15px;font-weight:500;color:var(--gray-99);text-decoration:none;transition:color 0.3s ease;text-decoration:underline}
.login-link:hover, .register-link:hover {color:var(--orange-bg)}
.register-links span {color:var(--gray-60)}
.register-link {color:var(--orange-bg);font-weight:600}
.register-link:hover {color:var(--primary-90);text-decoration:underline}

/* MESSAGES */
.error-message {color:var(--red);font-size:12px;margin-top:4px;display:none}
.success-message {color:var(--green);font-size:12px;margin-top:4px;display:none}

/* PASSWORD STRENGTH */
.strength-indicator {margin-top:4px;height:4px;border-radius:2px;background:var(--gray-05);overflow:hidden;display:none}
.strength-bar {height:100%;transition:all 0.3s ease;border-radius:2px}
.strength-weak {width:25%;background:var(--red)}
.strength-medium {width:60%;background:var(--orange)}
.strength-strong {width:100%;background:var(--green)}

/* PASSWORD RESET */
.password-reset-info {margin-bottom:30px;padding:20px;background:var(--gray-02);border-radius:12px;border-left:4px solid var(--orange-bg)}
.password-reset-info p {color:var(--gray-70);font-size:14px;line-height:1.6;margin:0}
.reset-success {background:var(--rgba-05);border-left-color:var(--green)}
.reset-success p {color:var(--green)}

/* 768PX MEDIA QUERY */
@media (max-width: 768px) {
    .login-container, .register-container {padding:40px 20px}
}