/* =====================================================================
   LOGIN-EXTRA.CSS — استایل‌های اختصاصی صفحه
   مکمل panel.css است و باید بعد از آن لود شود.
   ===================================================================== */


:root{
  --brand:#12385f;
  --brand-2:#0f2f50;
  --accent:#b98a3b;
  --accent-soft:#fff7e8;
  --ink:#172033;
  --text:#1f2937;
  --muted:#697386;
  --bg:#f3f0ea;
  --paper:#ffffff;
  --paper-2:#fbfaf7;
  --line:#ded7cb;
  --line-strong:#cfc4b4;
  --danger-bg:#fff1f2;
  --danger:#9f1239;
  --success-bg:#ecfdf5;
  --success:#047857;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow:0 24px 70px rgba(31,41,55,.16);
  --shadow-soft:0 14px 36px rgba(31,41,55,.10);
}


:root[data-theme="dark"]{
  --brand:#d8b56d;
  --brand-2:#f1d58f;
  --accent:#d7b56b;
  --accent-soft:rgba(215,181,107,.13);
  --ink:#f5efe2;
  --text:#f3f4f6;
  --muted:#b8c0cc;
  --bg:#10151d;
  --paper:#17202b;
  --paper-2:#131b25;
  --line:#303b49;
  --line-strong:#465366;
  --danger-bg:rgba(127,29,29,.24);
  --danger:#fecdd3;
  --success-bg:rgba(5,150,105,.18);
  --success:#bbf7d0;
  --shadow:0 26px 78px rgba(0,0,0,.48);
  --shadow-soft:0 16px 42px rgba(0,0,0,.32);
}


html,body{min-height:100%}


body,button,input,select,textarea,label,.tab-btn,.btn,.app-pill,.alert,.hero,.card,.helper{
  font-family:'Vazir',system-ui,'Segoe UI',Tahoma,Arial,sans-serif;
}


body{
  margin:0;
  color:var(--text);
  background:
    linear-gradient(90deg, rgba(18,56,95,.045) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(180deg, #f8f5ef 0%, var(--bg) 100%);
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}


:root[data-theme="dark"] body{
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(180deg, #0d131b 0%, var(--bg) 100%);
}


body:before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--brand));
  z-index:5;
}


body:after{
  content:"";
  position:fixed;
  right:-220px;
  top:120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(185,138,59,.11), transparent 66%);
  pointer-events:none;
}


body.is-app{background:linear-gradient(180deg,var(--paper-2),var(--bg))}


.page-head,.wrap,.page-foot{position:relative;z-index:1}


.page-head{padding:30px 24px 10px}


.page-head .inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}


.brand-mini{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}


.brand-mini:after{
  content:"سامانه خدمات مشترکین";
  color:var(--ink);
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
}


.brand-mini img{height:38px;display:block;max-width:180px;object-fit:contain}


.theme-toggle{
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  color:var(--brand);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-soft);
  transition:.18s ease;
}


.theme-toggle:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}


.svg-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor}


.svg-icon svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}


.wrap{flex:1;padding:34px 24px 24px;display:flex;align-items:center}


.shell{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:0;
  align-items:stretch;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--paper);
  box-shadow:var(--shadow);
  overflow:hidden;
}


.hero,.card{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:hidden}


.hero{
  position:relative;
  order:2;
  min-height:560px;
  display:flex;
  align-items:stretch;
  border-left:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(18,56,95,.96), rgba(15,47,80,.94)),
    url('/assets/back.jpg') center center / cover no-repeat;
  color:#fff;
}


@media (min-width:901px){.hero{order:1}.card{order:2}}


.hero:before{
  content:"";
  position:absolute;
  inset:26px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  pointer-events:none;
}


.hero:after{
  content:"";
  position:absolute;
  left:42px;
  bottom:42px;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(216,181,109,.45);
  box-shadow:0 0 0 16px rgba(216,181,109,.08), inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
}


.hero .inner{position:relative;z-index:1;padding:58px 52px;display:flex;flex-direction:column;justify-content:center;gap:18px;width:100%}


.hero .title{font-size:clamp(28px,3.1vw,42px);line-height:1.45;margin:0;letter-spacing:-.6px;color:#fff;font-weight:1000;max-width:620px}


.hero .subtitle{margin:0;color:rgba(255,255,255,.76);font-size:15px;line-height:2;max-width:560px}


.hero .list{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:12px;color:rgba(255,255,255,.92)}


.hero .list li{
  position:relative;
  margin:0;
  padding:14px 44px 14px 16px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.065);
  border-radius:14px;
  line-height:1.9;
}


.hero .list li:before{
  content:"";
  position:absolute;
  right:16px;
  top:22px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(216,181,109,.14);
}


.hero .apps{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}


.app-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:900;
  font-size:12.5px;
}


.contact-box{
  margin-top:14px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.16);
  font-size:13px;
  line-height:2;
  color:rgba(255,255,255,.84);
}


.contact-box-title{font-weight:1000;margin-bottom:7px;font-size:14px;color:#fff}


.contact-box-row{margin:2px 0;color:rgba(255,255,255,.74)}


.card{min-height:560px;display:flex;flex-direction:column;background:var(--paper)}


.card-head{padding:34px 32px 0}


.tabs{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
  border:1px solid var(--line);
  padding:8px;
  background:var(--paper-2);
  border-radius:18px;
}


.tab-btn{
  width:100%;
  min-height:54px;
  padding:12px 13px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--muted);
  border-radius:13px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
  justify-content:flex-start;
  transition:.18s ease;
  font-size:13.5px;
}


.tab-btn:hover{color:var(--ink);background:rgba(185,138,59,.08)}


.tab-btn.active{background:var(--paper);color:var(--brand);border-color:var(--line-strong);box-shadow:0 10px 24px rgba(31,41,55,.08)}


.tab-btn.active .svg-icon{color:var(--accent)}


.card-body{padding:26px 32px;display:block}


.card-body + .card-body{padding-top:0}


.alert{margin:0;border-radius:14px;padding:13px 15px;border:1px solid transparent;font-size:13px;line-height:1.9}


.alert-danger{background:var(--danger-bg);border-color:rgba(159,18,57,.16);color:var(--danger)}


.alert-success{background:var(--success-bg);border-color:rgba(4,120,87,.16);color:var(--success)}


.form{display:grid;gap:17px}


.field{display:grid;gap:8px}


.field label{font-size:13px;font-weight:1000;color:var(--ink)}


.input{
  min-height:56px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:14px;
  transition:.16s ease;
}


.input:focus-within{border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 4px rgba(185,138,59,.12)}


.input .svg-icon{color:var(--accent)}


.input input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:15px;
  direction:ltr;
  text-align:left;
  padding:15px 0;
}


.input input[name="username"]{direction:rtl;text-align:right}


.helper{font-size:12.5px;color:var(--muted);line-height:1.8}


.btn{
  border:0;
  min-height:54px;
  border-radius:14px;
  padding:0 18px;
  cursor:pointer;
  font-weight:1000;
  font-size:14px;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}


.btn-primary,.btn-otp{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 14px 32px rgba(18,56,95,.25)}


.btn-primary:hover,.btn-otp:hover{transform:translateY(-2px);filter:brightness(1.03)}


#resendBtn{background:var(--paper-2)!important;border:1px solid var(--line)!important;color:var(--ink)!important}


#resendBtn:hover{border-color:var(--accent)!important;color:var(--accent)!important}


.inline-otp{
  margin-top:20px;
  padding:18px;
  border:1px dashed var(--line-strong);
  border-radius:18px;
  background:var(--paper-2);
}


.privacy-box{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);font-size:12.5px;color:var(--muted);line-height:1.9}


.privacy-box label{display:flex;gap:8px;align-items:flex-start;color:var(--text);font-weight:700}


.privacy-link{border:0;background:transparent;color:var(--brand);font-weight:1000;cursor:pointer;text-align:right;padding:0;width:max-content}


.privacy-link:hover{color:var(--accent)}


.page-foot{padding:0 24px 24px;text-align:center;color:var(--muted);font-size:12.5px}


.privacy-modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:22px}


.privacy-modal.show{display:flex}


.pm-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(5px)}


.pm-content{position:relative;width:min(680px,100%);max-height:86vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px;color:var(--text)}


.pm-title{font-size:18px;font-weight:1000;color:var(--ink);margin-bottom:12px}


.pm-body{font-size:13.5px;line-height:2.1;color:var(--muted)}


.pm-body p{margin:0 0 10px}


.pm-close{width:100%;min-height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:1000;cursor:pointer;margin-top:8px;font-family:inherit}


@media (max-width:900px){
  .page-head{padding:18px 14px 0}.brand-mini:after{display:none}.wrap{padding:18px 14px}.shell{grid-template-columns:1fr;gap:0;border-radius:20px}.hero,.card{min-height:auto}.hero{border-left:0;border-bottom:1px solid var(--line)}.hero .inner{padding:34px 26px}.hero .title{font-size:25px}.hero:before{inset:14px}.hero:after{display:none}.card-head,.card-body{padding:20px}.card-body + .card-body{padding-top:0}
}


@media (max-width:480px){
  .page-head .inner{gap:10px}.brand-mini{padding:8px}.brand-mini img{height:32px;max-width:145px}.theme-toggle{width:42px;height:42px;border-radius:12px}.hero .list li{padding-left:12px}.tab-btn{font-size:13px}.input{min-height:52px;border-radius:13px}.btn{min-height:52px;border-radius:13px}.apps{display:none}.contact-box{font-size:12px}
}