/* ============================================================
   MFI SaaS Platform - Public / Auth Pages CSS
   ============================================================ */
:root {
    --primary: #1a6b3c; --primary-dark: #0f4526; --primary-light: #2d9b5a;
    --accent: #f0a500; --danger: #dc3545; --success: #198754;
    --text: #1a2e1e; --muted: #6c7a6f; --border: #d4e5d9;
    --font: 'IBM Plex Sans', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font); background: linear-gradient(135deg, #0f4526 0%, #1a6b3c 60%, #2a8a50 100%); min-height:100vh; }
.auth-page { display:flex; flex-direction:column; align-items:center; padding:30px 16px 60px; }

.auth-logo { margin-bottom:24px; text-align:center; }
.auth-logo a { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.logo-mark { width:48px; height:48px; background:var(--accent); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; }
.auth-logo span { font-size:22px; font-weight:700; }

/* Steps */
.progress-steps { display:flex; align-items:center; margin-bottom:24px; }
.step { display:flex; align-items:center; gap:8px; }
.step-num { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.2); color:rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.step.active .step-num { background:var(--accent); color:#fff; }
.step.done .step-num { background:var(--success); color:#fff; }
.step-label { font-size:12px; color:rgba(255,255,255,0.7); white-space:nowrap; }
.step.active .step-label { color:#fff; font-weight:600; }
.step-line { width:50px; height:2px; background:rgba(255,255,255,0.2); margin:0 8px; }
.step-line.done { background:var(--success); }

/* Auth Card */
.auth-card { background:#fff; border-radius:16px; padding:32px; width:100%; max-width:680px; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.auth-card h2 { font-size:20px; font-weight:700; margin-bottom:4px; color:var(--text); }
.subtitle { font-size:13.5px; color:var(--muted); margin-bottom:24px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
label { font-size:13px; font-weight:500; color:var(--text); }
.required::after { content:' *'; color:var(--danger); }
.hint { font-size:11.5px; color:var(--muted); }

input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea {
    padding:9px 12px; border:1.5px solid var(--border); border-radius:7px;
    font-family:var(--font); font-size:13.5px; color:var(--text); width:100%; background:#fff;
    transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(26,107,60,.1); }
textarea { resize:vertical; }

.terms-box { margin:14px 0; font-size:13px; color:var(--muted); }
.terms-box a { color:var(--primary); }

.btn-primary-full {
    width:100%; padding:12px; background:var(--primary); color:#fff; border:none;
    border-radius:8px; font-family:var(--font); font-size:15px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .2s;
}
.btn-primary-full:hover { background:var(--primary-dark); }

.auth-link { text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }
.auth-link a { color:var(--primary); font-weight:600; }

.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13.5px; }
.alert-success { background:#d1f2e2; color:#0a5c2e; border:1px solid #a3d9bb; }
.alert-danger   { background:#fde8ea; color:#9b1c2a; border:1px solid #f5b8be; }
.alert-info     { background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; }
.alert-warning  { background:#fff3cd; color:#856404; border:1px solid #ffecb5; }

/* OTP */
.otp-icon { font-size:48px; color:var(--primary); margin-bottom:12px; }
.otp-field { font-size:28px; letter-spacing:12px; text-align:center; padding:12px; width:100%; border:2px solid var(--border); border-radius:10px; font-family:monospace; }
.otp-field:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,107,60,.1); outline:none; }
.email-notice { background:#f0f4ff; border-radius:8px; padding:12px; margin-top:16px; font-size:13px; color:#1a2e1e; }

/* Review */
.review-table { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:20px; }
.review-row { display:flex; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); font-size:13.5px; }
.review-row:last-child { border-bottom:none; }
.review-row span { color:var(--muted); }
.badge-verified { background:#d1f2e2; color:#0a5c2e; padding:2px 8px; border-radius:20px; font-size:11px; }
.plan-info-box { display:flex; gap:12px; align-items:flex-start; background:#f0faf5; border:1px solid #a3d9bb; border-radius:10px; padding:14px; margin-bottom:20px; font-size:13.5px; }
.plan-info-box i { color:var(--primary); font-size:20px; flex-shrink:0; }

/* Pricing Section */
.pricing-preview { width:100%; max-width:860px; margin-top:32px; text-align:center; }
.pricing-preview h3 { color:#fff; font-size:18px; margin-bottom:20px; }
.plan-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.plan-card { background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-radius:12px; padding:20px 16px; color:#fff; position:relative; border:1px solid rgba(255,255,255,0.15); }
.plan-card.featured { background:rgba(255,255,255,0.2); border-color:var(--accent); }
.plan-badge { background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:2px 10px; border-radius:20px; position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.plan-name { font-size:15px; font-weight:700; margin-bottom:10px; }
.plan-price { font-size:22px; font-weight:800; }
.plan-price span { font-size:13px; font-weight:400; opacity:0.8; }
.plan-yearly { font-size:12px; opacity:0.7; margin-bottom:12px; }
.plan-features { list-style:none; text-align:left; margin-top:12px; }
.plan-features li { font-size:12.5px; padding:4px 0; opacity:0.9; }
.plan-features i { color:var(--accent); margin-right:6px; }

@media (max-width:768px) {
    .form-row { grid-template-columns:1fr; }
    .plan-cards { grid-template-columns:1fr 1fr; }
    .progress-steps .step-label { display:none; }
    .step-line { width:20px; }
}