/* 
-------------
استایل های بخش ثبت نام و ورود
-----------------
*/


 :root{
    --bg:#fdfcf8;
    --card:#ffffff;
    --gold:#c9a24d;
    --gold-soft:#ead9a6;
    --text:#2b2b2b;
    --muted:#777;
    --border:#eee;
    --danger:#e25555;
  }

  body{
    background:var(--bg);
    font-family: "Kalameh", -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    margin:70px auto;
    color:var(--text);
  }

  /* ✅ ورود کارت */
  @keyframes cardIn{
    from{
      opacity:0;
      transform:translateY(25px) scale(.97);
    }
    to{
      opacity:1;
      transform:none;
    }
  }

  .box{
    background:var(--card);
    border-radius:20px;
    padding:26px;
    box-shadow:
      0 20px 40px rgba(0,0,0,.06),
      inset 0 0 0 1px var(--border);
    animation:cardIn .5s ease;
  }

  h3{
    margin:0 0 20px;
    text-align:center;
    font-weight:600;
  }

  label{
    display:block;
    margin:14px 0 6px;
    font-size:14px;
    color:var(--muted);
  }

  input[type="text"],
  input[type="tel"],
  input[type="password"]{
    width:90%;
    padding:14px;
    font-size:16px;
    border-radius:14px;
    border:1px solid var(--border);
    transition:.25s;
  }

  input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,162,77,.18);
  }

  button{
    width:100%;
    padding:14px;
    margin-top:18px;
    border:none;
    border-radius:16px;
    font-size:16px;
    font-weight:500;
    cursor:pointer;
    background:linear-gradient(135deg,var(--gold),var(--gold-soft));
    color:#3a2c0d;
    box-shadow:0 10px 22px rgba(201,162,77,.35);
    transition:.25s;
  }

  button:hover{ transform:translateY(-1px); }
  button:disabled{ opacity:.5; cursor:not-allowed; }

  .msg{
    background:#f7f5ee;
    border:1px solid #efe4c5;
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
    margin-bottom:10px;
  }

  .err{
    background:#fff0f0;
    border:1px solid #ffd2d2;
    color:var(--danger);
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
    margin-top:8px;
  }

  .small{
    margin-top:12px;
    font-size:13px;
    text-align:center;
    color:var(--muted);
  }

  .small a{
    color:var(--gold);
    text-decoration:none;
  }
  .small a:hover{ text-decoration:underline; }

  /* OTP */
  .otp-wrap{
    display:flex;
    gap:10px;
    justify-content:space-between;
    margin-top:8px;
  }

  .otp{
    width:100%;
    max-width:64px;
    height:64px;
    text-align:center;
    font-size:22px;
    border-radius:16px;
    border:1px solid var(--border);
    transition:.25s;
  }

  .otp:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,162,77,.18);
  }
  /* =========================
   ✅ Responsive – Mobile First
   ========================= */

/* موبایل */
@media (max-width: 480px){

  body{
    margin:0;
    padding:16px;
    max-width:100%;
  }

  .box{
    padding:20px 16px;
    border-radius:18px;
    box-shadow:
      0 10px 24px rgba(0,0,0,.06),
      inset 0 0 0 1px var(--border);
  }

  h3{
    font-size:18px;
    margin-bottom:16px;
  }

  label{
    font-size:13px;
    margin-top:12px;
  }

  input[type="text"],
  input[type="tel"],
  input[type="password"]{
    font-size:16px; /* جلوگیری از zoom iOS */
    padding:13px;
    border-radius:14px;
  }

  button{
    font-size:15px;
    padding:14px;
    border-radius:16px;
  }

  .msg,
  .err{
    font-size:13px;
    padding:10px 12px;
  }

  .small{
    font-size:12px;
    margin-top:10px;
  }

  /* OTP */
  .otp-wrap{
    gap:8px;
  }

  .otp{
    height:56px;
    max-width:none;
    font-size:20px;
    border-radius:14px;
  }
}

/* موبایل خیلی کوچک */
@media (max-width: 360px){
  .otp{
    height:52px;
    font-size:18px;
  }
}


/*
-------------
 پایان استایل های بخش ثبت اگهی
-----------------
*/