/* ===========================
   1) فونت‌های محلی Vazirmatn
=========================== */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 100 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   2) پایه
=========================== */
:root{
  --bg-1: linear-gradient(180deg,#0f1724 0%, #071227 100%);
  --card-bg: rgba(255,255,255,0.03);
  --card-surface: rgba(255,255,255,0.06);
  --brand: #ff7a00;
  --brand-2: #ffad5a;
  --muted: #9aa4b2;
  --accent-contrast: #0b0b0b;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0; padding:30px; direction:rtl; background:var(--bg-1);
  font-family:"Vazirmatn", Tahoma, Arial, sans-serif; color:#e6eef8;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

body, button, input, textarea, .tab, .submit-btn, .form-title, strong, b {
  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;
  font-weight:700;
}

/* ===========================
   3) کارت و تیتر
=========================== */
.card{
  max-width:760px; margin:0 auto; position:relative; overflow:visible;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04); backdrop-filter: blur(8px);
  padding:26px; border-radius:14px; box-shadow:0 10px 40px rgba(2,6,23,0.6);
  color:#eaf0f6;
}
.form-title{ text-align:center; font-size:1.3rem; margin-bottom:16px; }

/* ===========================
   4) تب‌ها
=========================== */
.tabs{ display:flex; gap:10px; margin:0 auto 18px; justify-content:center; width:60%; min-width:220px; }
.tab{
  flex:1 1 0; padding:10px 14px; border-radius:12px; cursor:pointer; background:transparent;
  color:var(--muted); border:1px solid rgba(255,255,255,0.05); text-align:center; transition:all .18s ease;
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:80px;
}
.tab:hover{ transform:translateY(-2px); opacity:.95; }
.tab.active{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:var(--accent-contrast);
  box-shadow:0 8px 26px rgba(255,122,0,0.14);
}

/* ===========================
   5) فرم و ورودی‌ها
=========================== */
.is-hidden{ display:none !important; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.form-group{ margin-bottom:10px; }
label{ display:block; margin-bottom:8px; color:#dbe7f7; }

input[type=text], input[type=time], textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:#eaf0f6; outline:none; font-size:1rem; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25);
}
input[type=text]::placeholder, textarea::placeholder{ color:rgba(255,200,140,0.45); font-weight:600; font-size:.95rem; }
input[readonly]{ background:transparent; border:1px dashed rgba(255,255,255,0.03); }
input:focus, textarea:focus{ box-shadow:0 6px 20px rgba(255,122,0,0.06); border-color:rgba(255,122,0,0.22); }
textarea{ resize:none; } /* کاربر نتواند اندازه را تغییر دهد */

/* ===========================
   6) فیلد مدت
=========================== */
.duration-field{
  font-weight:700; text-align:center; color:#081018;
  background:linear-gradient(90deg, rgba(255,165,80,0.16), rgba(255,122,0,0.12));
  border:1px solid rgba(255,122,0,0.18); padding:10px 12px; border-radius:10px;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.08), 0 6px 20px rgba(255,122,0,0.06);
  letter-spacing:.2px;
}
.note{ font-size:.92em; color:var(--muted); margin-top:10px; }

/* ===========================
   7) دکمه ارسال
=========================== */
.submit-btn{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:var(--accent-contrast);
  border:none; padding:12px 18px; border-radius:12px; cursor:pointer; letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(255,122,0,0.12); display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.submit-btn:hover{ transform:translateY(-1px); }
.btn-inner{ display:inline-flex; align-items:center; gap:8px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.submit-btn .spin{ width:16px; height:16px; animation:spin 1s linear infinite; }
.form-actions{ display:flex; justify-content:center; margin-top:12px; }
.submit-status{ margin-top:10px; text-align:center; color:#dbe7f7; font-weight:700; }
.submit-status.success{ color:#8ef0b7; } .submit-status.error{ color:#ffb3a0; }

/* ===========================
   8) خطاها
=========================== */
.field-error{
  display:block; color:#ffb3a0; background:rgba(255,90,0,0.04);
  padding:6px 10px; border-radius:8px; margin-top:8px; font-size:.86em;
  visibility:hidden; opacity:0; transition:opacity .16s ease, visibility .16s ease;
}
.field-error.visible{ visibility:visible; opacity:1; }

/* ===========================
   9) تقویم جلالی
=========================== */
.jalali-calendar{
  position:absolute; z-index:9999; background:#071227; border:1px solid rgba(255,255,255,0.04);
  padding:12px; border-radius:12px; min-width:260px; box-shadow:0 12px 30px rgba(2,6,23,0.6);
}
.cal-header{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; }
.cal-pickers{ display:flex; gap:6px; align-items:center; }
.cal-title{ font-weight:700; margin-right:8px; color:#dbe7f7; }
.cal-nav{ background:transparent; border:1px solid rgba(255,255,255,0.02); color:#eaf0f6; padding:6px 10px; border-radius:8px; transition:all .12s; }
.cal-nav:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.02); }
#calMonthSelect,#calYearSelect{
  background:#071227; border:1px solid rgba(255,255,255,0.04); color:#eaf0f6; padding:6px 8px; border-radius:8px; font-family:inherit;
}
#calDaysHeader{ display:grid; grid-template-columns:repeat(7,36px); gap:6px; text-align:center; font-size:13px; margin-bottom:8px; }
#calDays{ display:grid; grid-template-columns:repeat(7,36px); gap:6px; text-align:center; }
#calDaysHeader div{ color:var(--muted); font-weight:700; }
#calDays div{
  min-height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:600; cursor:pointer; padding:4px;
}
#calDays div:hover{ background:rgba(255,122,0,0.12); transform:translateY(-2px); }
#calDays div.selected{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:var(--accent-contrast);
  box-shadow:0 8px 18px rgba(255,122,0,0.12);
}
#calDays div.disabled{ opacity:.3; pointer-events:none; color:rgba(234,240,246,0.38); }

/* ===========================
   10) ریسپانسیو
=========================== */
@media (max-width:560px){
  .card{ padding:16px; border-radius:12px; }
  .tabs{ gap:6px; width:100%; }
  .tab{ padding:8px 10px; }
}