/* public/css/inquiry.css
 * نسخه‌ی بهینه‌شده با ریسپانسیو بهتر موبایل + حذف اسکرول افقی
 * هیچ بخشی حذف نشده؛ فقط خطوط لازم با کامنت مشخص ویرایش/افزوده شده‌اند.
*/

/* ===== پالت و پایه ===== */
:root{ --bg:#f3f4f6; --card:#fff; --muted:#6b7280; --brand:#2563eb; }

/* پایه صفحه */
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  font-family:Tahoma,system-ui;
  overflow-x:hidden;                 /* NEW: جلوگیری قطعی از اسکرول افقی کل صفحه */
}

/* NEW: جلوگیری از بزرگ‌شدن ناخواسته عناصر در جمع‌وجور شدن موبایل */
*, *::before, *::after{ box-sizing:border-box; }

/* ===== لایه و کارت ===== */
.wrap{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
}
.card{
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:24px;
  max-width:520px;
  width:100%;
}

/* ===== تیترها ===== */
.title{ margin:0 0 6px; font-weight:700; font-size:20px; }
.subtitle{ margin:0 0 16px; color:var(--muted); font-size:13px; }

/* ===== فرم ===== */
.field{
  display:flex;
  gap:8px;
}
.input{
  flex:1;
  height:46px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:0 12px;
  font-size:16px;
  direction:ltr;
  text-align:center;
  width:100%;                       /* NEW: روی موبایل کش نیاید */
}
.btn{
  height:46px;
  border:none;
  border-radius:12px;
  padding:0 16px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

/* ===== پیام‌ها/نتیجه ===== */
.error{ color:#b91c1c; font-size:13px; margin-top:10px; }
.result{ margin-top:16px; }
.result-card{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
}
.row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px dashed #e5e7eb;
  padding:8px 0;
}
.row:last-child{ border-bottom:none; }
.k{ color:#6b7280; font-size:13px; }
.v{ font-weight:700; }
.not-found{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#be123c;
  padding:12px;
  border-radius:12px;
}

/* ===== Modal (پاپ‌آپ) ===== */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:50;
}
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  z-index:60;
  overflow-x:hidden;                /* NEW: جلوگیری از اسکرول افقی در مودال */
  overflow-y:auto;                  /* NEW: اسکرول عمودی اگر محتوا بلند شد */
  padding:16px;                     /* NEW: حاشیه امن تا کارت به لبه نچسبد */
}
.modal.show,
.modal-backdrop.show{ display:grid; }

.modal-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  max-width:560px;
  width:92%;                        /* EDIT: به‌جای مقدار ثابت، درصدی برای موبایل */
  padding:18px 16px;
  margin-inline:auto;               /* NEW: وسط‌چین افقی مطمئن */
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.modal-title{ margin:0; font-weight:700; }
.modal-close{
  border:none;
  background:#eef2ff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}
.modal-body{ line-height:1.9; }
.modal-danger{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#be123c;
  padding:12px;
  border-radius:12px;
}

/* ===== ریسپانسیو موبایل ===== */
@media (max-width:480px){
  .wrap{ padding:16px; }            /* NEW: حاشیه کمتر */
  .card{ padding:16px; border-radius:12px; }  /* NEW: جمع‌وجورتر */

  .field{ flex-direction:column; }  /* NEW: دکمه و ورودی زیرِ هم در موبایل */
  .btn{ width:100%; }               /* NEW: دکمه تمام‌عرض در موبایل */

  .modal-card{ border-radius:12px; padding:16px; } /* NEW: کارت مودال جمع‌وجور */
}


/* ========== ریسپانسیو برای موبایل (بهینه‌تر) ========== */
@media (max-width: 480px) {

  /* فرم استعلام */
  form.field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* فیلد ورودی */
  form.field .input {
    font-size: 20px;
    height: 58px;          /* بزرگ و راحت برای لمس */
    padding: 0 18px;
    border-radius: 10px;
  }

  /* دکمه استعلام */
  form.field .btn {
    font-size: 15px;       /* متن کوچکتر */
    height: 38px;          /* حدوداً دو سوم ورودی */
    line-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background-color: #2563eb;
    color: #fff;
    width: 60%;            /* کمی باریک‌تر از ورودی */
    align-self: center;    /* وسط‌چین در فرم */
  }

  /* تیترها */
  .card .title {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .card .subtitle {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* 📱 تغییر اندازه فونت ورودی‌ها در موبایل */
@media (max-width: 480px) {
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    font-size: 13px !important;   /* از 15 به 13 کاهش */
    padding: 8px 10px !important; /* کمی جمع‌تر */
  }

  /* اگر placeholder هم بزرگ است */
  ::placeholder {
    font-size: 13px !important;
  }
}




.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-outline {
  background: #fff;
  border: 1px solid #2563eb;
  color: #2563eb;
}

#btnTehran[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}