/* ==========================================================================
   Auth pages (login / register / pending) — extracted from design/*.html
   صفحات احراز هویت — استخراج‌شده از design/*.html
   ========================================================================== */

.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}

/* Two-column shell / قاب دو ستونه */
.shell{width:100%;max-width:960px;min-height:560px;background:var(--card);border-radius:22px;
       box-shadow:0 20px 50px rgba(16,24,40,.12);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}

/* Brand side / بخش برند */
.brand{background:linear-gradient(150deg,var(--primary) 0%,var(--primary-dark) 60%,#0f2a44 100%);
       color:#fff;padding:48px 40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.brand::before,.brand::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.brand::before{width:320px;height:320px;top:-120px;left:-120px}
.brand::after{width:220px;height:220px;bottom:-80px;right:-60px;background:rgba(43,179,163,.18)}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;position:relative;z-index:1}
.logo-mark{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0}
/* The system name may wrap to two lines / نام سامانه می‌تواند دو خطی شود */
.logo-text{min-width:0;line-height:1.6;overflow-wrap:anywhere}
.brand h2{font-size:26px;font-weight:800;line-height:1.7;position:relative;z-index:1}
.brand p{opacity:.8;line-height:2;font-size:14px;margin-top:10px;position:relative;z-index:1}
.features{list-style:none;display:grid;gap:10px;font-size:13px;position:relative;z-index:1}
.features li{display:flex;align-items:center;gap:8px;opacity:.9}
.features li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Form side / بخش فرم */
.form-side{padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.form-side h1{font-size:24px;font-weight:800}
.subtitle{color:var(--muted);font-size:14px;margin:8px 0 32px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:8px}
.input-wrap{position:relative}
.input-wrap svg.ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.input-wrap input{width:100%;height:48px;border:1.5px solid var(--border);border-radius:var(--radius);
     padding:0 44px 0 44px;font-family:inherit;font-size:15px;background:#fcfcfd;transition:.2s;color:var(--text)}
.input-wrap input.ltr{direction:ltr;text-align:right;letter-spacing:2px}
.input-wrap input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(31,78,121,.12)}
.input-wrap input.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(217,45,32,.1)}
.toggle-pass{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--muted);padding:6px;display:grid;place-items:center}
.error-msg{color:var(--danger);font-size:12px;margin-top:6px;min-height:16px}
.row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:24px}
.row label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)}
.row a{color:var(--primary);text-decoration:none;font-weight:500}
.btn{width:100%;height:50px;border:0;border-radius:var(--radius);background:var(--primary);color:#fff;
     font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:.2s}
.btn:hover{background:var(--primary-dark)}
.btn:disabled{opacity:.7;cursor:wait}
a.btn{display:grid;place-items:center;text-decoration:none}
.switch{text-align:center;margin-top:24px;font-size:14px;color:var(--muted)}
.switch a{color:var(--primary);font-weight:700;text-decoration:none}
.alert{display:none;padding:12px 14px;border-radius:12px;font-size:13px;margin-bottom:20px;line-height:1.9}
.alert.show{display:block}
.alert.warn{background:#fffaeb;color:#b54708;border:1px solid #fedf89}
.alert.err{background:#fef3f2;color:var(--danger);border:1px solid #fecdca}
/* Added for server messages / اضافه‌شده برای پیام‌های سرور */
.alert.ok{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}
.alert.info{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff}

/* CAPTCHA row / ردیف کپچا */
.captcha-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.captcha-row .input-wrap input{padding:0 44px 0 14px}
.captcha-img{display:block;width:120px;height:48px;border:1.5px solid var(--border);border-radius:var(--radius);
             background:#f4f7fb;object-fit:cover;cursor:pointer}
.captcha-refresh{width:48px;height:48px;border:1.5px solid var(--border);border-radius:var(--radius);background:#fcfcfd;
                 color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.2s}
.captcha-refresh:hover{color:var(--primary);border-color:var(--primary)}
.captcha-refresh:disabled{opacity:.6;cursor:wait}
.captcha-refresh.spinning svg{animation:spin .6s linear}
@keyframes spin{to{transform:rotate(-360deg)}}

@media (max-width:820px){
  .shell{grid-template-columns:1fr;min-height:auto}
  .brand{padding:28px 24px}
  .brand .desc,.features{display:none}
  .form-side{padding:32px 24px}
}
@media (max-width:420px){
  .captcha-row{grid-template-columns:1fr auto}
  .captcha-row .input-wrap{grid-column:1 / -1}
  .captcha-img{width:100%}
}

/* ==========================================================================
   Register & pending pages / صفحه ثبت‌نام و انتظار تایید
   ========================================================================== */
.page-register .shell{max-width:1040px}
.page-register .form-side{padding:40px 44px}
.page-register .subtitle{margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.input-wrap input.no-ic{padding:0 14px}
.date-row{display:grid;grid-template-columns:.8fr 1.3fr 1fr;gap:8px}
.auth-body select{height:48px;border:1.5px solid var(--border);border-radius:var(--radius);padding:0 10px;font-family:inherit;font-size:14px;background:#fcfcfd;color:var(--text);width:100%}
.auth-body select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(31,78,121,.12)}
.auth-body select.invalid{border-color:var(--danger)}
.strength{height:4px;border-radius:4px;background:#eaecf0;margin-top:8px;overflow:hidden}
.strength span{display:block;height:100%;width:0;transition:.3s}
.hint{font-size:11px;color:var(--muted);margin-top:4px}
.steps{display:flex;gap:8px;margin-bottom:24px;font-size:12px;color:var(--muted)}
.steps div{flex:1;padding-top:8px;border-top:3px solid #eaecf0}
.steps div.on{border-color:var(--primary);color:var(--primary);font-weight:700}
.pending{text-align:center;padding:20px 0}
.pending .icon{width:84px;height:84px;border-radius:50%;background:#fffaeb;display:grid;place-items:center;margin:0 auto 20px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(247,144,9,.35)}50%{box-shadow:0 0 0 14px rgba(247,144,9,0)}}
.pending h1{margin-bottom:10px}
.pending p{color:var(--muted);line-height:2;font-size:14px}
.summary{background:#f9fafb;border:1px solid #eaecf0;border-radius:12px;padding:14px 18px;margin:22px 0;text-align:right;font-size:13px;display:grid;gap:8px}
.summary div{display:flex;justify-content:space-between}
.summary b{font-weight:500}
.badge{display:inline-block;background:#fffaeb;color:#b54708;border:1px solid #fedf89;padding:3px 10px;border-radius:20px;font-size:12px}
@media (max-width:820px){ .grid2{grid-template-columns:1fr} .page-register .form-side{padding:28px 20px} }

/* Simple centered card for error pages / کارت ساده برای صفحات خطا */
.error-card{max-width:520px;width:100%;background:var(--card);border-radius:22px;box-shadow:0 20px 50px rgba(16,24,40,.12);padding:48px 40px;text-align:center}
.error-card .code{font-size:56px;font-weight:800;color:var(--primary);line-height:1}
.error-card h1{font-size:22px;margin:16px 0 8px}
.error-card p{color:var(--muted);line-height:2;font-size:14px;margin-bottom:24px}