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

:root{

  --navy-900:#0d1730;
  --navy-800:#152352;
  --navy-700:#1d2f68;
  --gold-500:#c9a227;
  --gold-400:#dcb94e;
  --gold-100:#f5ecce;
  --paper:#ffffff;
  --mist:#f5f7fb;
  --ink:#1b2233;
  --ink-soft:#7a8296;
  --line:#e7eaf2;
  --danger:#d64545;
  --danger-bg:#fdecec;
  --success:#1f9d55;
  --success-bg:#eafaf0;

  --font-main:'Vazirmatn', Tahoma, sans-serif;

  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-card: 0 30px 60px -20px rgba(13,23,48,.35), 0 10px 20px -10px rgba(13,23,48,.15);
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  font-family:var(--font-main);
  background:
    radial-gradient(circle at 15% 10%, rgba(201,162,39,.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(21,35,82,.06), transparent 45%),
    var(--mist);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

form{
  width:100%;
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

.box-root-login{
  position:relative;
  width:100%;
  max-width:920px;
  min-height:600px;
  background:var(--paper);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;
  align-items:stretch;
}

.box-root-login::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:38%;
  background:
    radial-gradient(circle at 25% 20%, rgba(220,185,78,.28), transparent 55%),
    repeating-linear-gradient(45deg, rgba(220,185,78,.14) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, rgba(220,185,78,.14) 0 1px, transparent 1px 28px),
    linear-gradient(165deg, var(--navy-900), var(--navy-700));
}

.box-root-login::after{
  content:"خاجی کالا";
  position:absolute;
  inset-block-start:36px;
  inset-inline-start:28px;
  color:var(--gold-100);
  font-family:var(--font-main);
  font-weight:700;
  font-size:14px;
  letter-spacing:2px;
  opacity:.85;
}

@media (max-width:820px){
  .box-root-login::before,
  .box-root-login::after{
    display:none;
  }
}

.box-Parent{
  position:relative;
  z-index:1;
  width:62%;
  margin-inline-start:38%;
  padding:52px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

@media (max-width:820px){
  .box-Parent{
    width:100%;
    margin-inline-start:0;
    padding:40px 24px;
  }
}

@media (max-width:480px){
  .box-Parent{
    padding:32px 18px;
  }
}

.box-logo{
  margin-bottom:18px;
  padding:14px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--gold-100), var(--paper));
  box-shadow:0 0 0 1px var(--line), 0 12px 24px -10px rgba(201,162,39,.35);
}

.box-logo img{
  display:block;
  max-width:64px;
  max-height:64px;
  object-fit:contain;
}

.box-title{
  margin-bottom:28px;
}

.box-title span{
  font-size:23px;
  font-weight:800;
  color:var(--navy-900);
  position:relative;
  padding-bottom:12px;
  display:inline-block;
}

.box-title span::after{
  content:"";
  position:absolute;
  bottom:0;
  right:50%;
  transform:translateX(50%);
  width:46px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-400));
}

.box-data{
  width:100%;
  max-width:340px;
  display:flex;
  flex-direction:column;
}

.step-mobile,
.step-code{
  width:100%;
  display:flex;
  flex-direction:column;
}

.tit, .tit-pass{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:10px;
  text-align:right;
}

.box-text{
  position:relative;
  margin-bottom:18px;
  text-align:right;
}

.box-text input{
  width:100%;
  height:52px;
  border-radius:var(--radius-md);
  border:1.5px solid var(--line);
  background:var(--mist);
  padding:0 18px;
  font-family:var(--font-main);
  font-size:15px;
  color:var(--ink);
  text-align:right;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.box-text input::placeholder{
  color:var(--ink-soft);
}

.box-text input:focus{
  outline:none;
  border-color:var(--gold-500);
  background:var(--paper);
  box-shadow:0 0 0 4px rgba(201,162,39,.15);
}

.box-text.error input{
  border-color:var(--danger);
  background:var(--danger-bg);
  animation:shake .32s ease;
}

@keyframes shake{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

#err{
  display:block;
  font-size:13px;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid rgba(214,69,69,.25);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  margin-bottom:14px;
  text-align:center;
}

#err:empty{
  display:none;
  padding:0;
  margin:0;
  border:none;
  background:none;
}

/* --- تایمر اعتبار کد --- */
.timer-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  color:var(--ink-soft);
  background:var(--mist);
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  margin-bottom:16px;
}

.timer-text{
  direction:ltr;
  font-weight:700;
  color:var(--navy-800);
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}

.expired-msg{
  font-size:13px;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid rgba(214,69,69,.25);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  margin-bottom:16px;
  text-align:center;
}

.box-btn{
  margin-top:6px;
  margin-bottom:16px;
}

.box-btn button{
  width:100%;
  height:52px;
  border:none;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--navy-800), var(--navy-900));
  color:var(--gold-100);
  font-family:var(--font-main);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 14px 26px -12px rgba(13,23,48,.55);
}

.box-btn button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.box-btn button:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 40px -14px rgba(13,23,48,.6), 0 10px 22px -8px rgba(201,162,39,.35);
}

.box-btn button:hover::after{
  opacity:1;
}

.box-btn button:active{
  transform:translateY(0);
  box-shadow:0 10px 18px -10px rgba(13,23,48,.5);
}

.link-other{
  margin-bottom:10px;
  text-align:center;
}

.link-other a{
  color:var(--navy-800);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1.5px solid var(--gold-400);
  padding-bottom:2px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, opacity .15s ease;
}

.link-other a:hover{
  color:var(--gold-500);
  border-color:var(--navy-800);
}

/* حالت غیرفعال لینک "ارسال مجدد کد" تا زمانی که تایمر تمام نشده */
.link-other a.disabled{
  color:var(--ink-soft);
  border-color:var(--line);
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

.box-extra-links{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.signup-hint{
  font-size:13.5px;
  color:var(--ink-soft);
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.signup-hint a{
  color:var(--navy-800);
  font-weight:700;
  text-decoration:none;
  border-bottom:1.5px solid var(--gold-400);
  padding-bottom:1px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}

.signup-hint a:hover{
  color:var(--gold-500);
  border-color:var(--navy-800);
}

.box-gh{
  font-size:12px;
  color:var(--ink-soft);
  line-height:2;
  margin-top:10px;
}

.box-gh a{
  color:var(--navy-800);
  font-weight:600;
  text-decoration:none;
  margin:0 2px;
}

.box-gh a:hover{
  color:var(--gold-500);
}

@media (max-width:480px){
  .box-root-login{
    min-height:auto;
    border-radius:20px;
  }
  .box-title span{
    font-size:20px;
  }
  .box-btn button{
    height:48px;
    font-size:15px;
  }
}