@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body { background: #f4f7ff; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.main-container { display: flex; width: 100vw; height: 100vh; background: #fff; }
.brand-side {
    flex: 1;
    background: linear-gradient(rgba(30, 58, 138, 0.5), rgba(30, 58, 138, 0.5)), 
                url('https://project.syscare.ir/assets/background.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.brand-content h1 { font-size: 2.5rem; margin-bottom: 5px; }
.brand-footer h2 { font-size: 1.5rem; }
.dots { display: flex; gap: 5px; margin-top: 10px; }
.dot { height: 4px; width: 12px; background: rgba(255,255,255,0.3); border-radius: 4px; }
.dot.active { width: 24px; background: #fff; }

.form-side { flex: 1.2; display: flex; align-items: center; justify-content: center; padding: 30px; overflow-y: auto; }
.form-wrapper { width: 100%; max-width: 400px; }

/* Input Styling & Validation Classes */
.input-box { margin-bottom: 12px; }
.input-box label { display: block; font-size: 0.8rem; font-weight: 600; color: #4b5563; margin-bottom: 4px; }

input {
    width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 0.95rem; outline: none; transition: 0.3s;
}

input.input-valid { border-color: #10b981; background-color: #f0fdf4; }
input.input-invalid { border-color: #ef4444; background-color: #fef2f2; }

.error-msg { color: #ef4444; font-size: 0.7rem; height: 14px; margin-top: 2px; }

/* Checklist & Strength */
.checklist { background: #f9fafb; padding: 12px; border-radius: 8px; margin-bottom: 15px; }
.check-item { font-size: 0.75rem; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.check-item.valid { color: #059669; }
.check-item.invalid { color: #9ca3af; }
.check-item.invalid i { color: #ef4444; }

.strength-container { height: 4px; background: #e5e7eb; border-radius: 4px; margin: 8px 0; }
.strength-bar { height: 100%; width: 0; transition: 0.3s; }
.strength-bar.weak { width: 33%; background: #ef4444; }
.strength-bar.medium { width: 66%; background: #f59e0b; }
.strength-bar.strong { width: 100%; background: #10b981; }

.btn-primary { 
    width: 100%; padding: 14px; background: #2563eb; color: #fff; border: none; 
    border-radius: 8px; font-weight: 600; cursor: pointer; 
}
.btn-primary:disabled { background: #d1d5db; cursor: not-allowed; }

.success-banner { margin-top: 15px; padding: 12px; background: #d1fae5; color: #065f46; border: 1px solid #10b981; border-radius: 8px; text-align: center; font-weight: 600; }
@media (max-width: 850px) {
    body { overflow-y: auto; }
    .main-container { flex-direction: column; height: auto; }
    .brand-side { 
        flex: none; 
        height: 30vh;
        padding: 30px;
        border-radius: 0 0 20px 20px;
    }
    .brand-content h1 { font-size: 1.8rem; }
    .brand-footer { display: none; } /* Hide lower text on mobile to save space */
    .form-side { flex: none; width: 100%; padding: 40px 20px; }
}