@font-face {
    font-family: PlazaTitle;
    src: url('../fonts/zarghan-moala.eot');
    src: url('../fonts/zarghan-moala.eot?#iefix') format('embedded-opentype'),
         url('../fonts/zarghan-moala.woff2') format('woff2'),
         url('../fonts/zarghan-moala.woff') format('woff'),
         url('../fonts/zarghan-moala.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: Plaza;
    src: url('../fonts/IRANSansWeb(FaNum).eot');
    src: url('../fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),
         url('../fonts/IRANSansWeb(FaNum).woff2') format('woff2'),
         url('../fonts/IRANSansWeb(FaNum).woff') format('woff'),
         url('../fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    font-weight: normal;
}
* {
    font-family: 'Plaza';
}
.fontZaraqan {
    font-family: 'PlazaTitle'!important;
}
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
}
body {
    background-image: url(../img/back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-height: 100vh;
    max-height: 100vh;
    background: rgb(3 130 249 / 8%);
}
.header {
    background-color: rgba(0,0,0,0.10);
    padding: 0 1rem;
    min-height: 3.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
}
.footer {
    padding: 0 1rem;
    min-height: 3.5rem;
}
.empty {
    justify-content: flex-end;
    padding: 20px;
}
.empty > img {
    width: 100px;
}
.header > img {
    width: 75px;
}
.glassPanel {
    width: 90%;
    margin: auto;
    padding: 20px 3px;
    border-radius: 10px;
    border: 1px solid #000;
    min-height: calc(35vh - 10px);
    margin-top: 10px;
    margin-bottom: 30px;
}
.glassPanel {
  position: relative;
  overflow: hidden;          /* لبه‌های تمیز */
  /* اختیاری ولی کمک به رندر بهتر */
  isolation: isolate;        /* استکینگ‌کانتکست مستقل */
}

/* لایهٔ افکت شیشه: فقط پشت را تار می‌کند */
.glassPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  /* برای اینکه اثر معلوم شود باید پس‌زمینه نیمه‌شفاف داشته باشیم: */
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  z-index: 0;
}

/* لایهٔ محتوا: بالای افکت و بدون blur */
.glassPanel > * {
  position: relative;
  z-index: 1;
}

/* استایل‌های دلخواه کارت */
.glassPanel {
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  color: #0f172a;
}

.title {
    text-align: center;
    font-size: 3.5rem;
    line-height: 5.5rem;
    font-weight: bold;
}
.starImg {
    text-align: center;
}
.starImg > img {
    width: 40%;
}
.displayFlex {
    display: flex;
}
.justifyBetween {
    justify-content: space-between;
}
.alignItemCenter {
    align-items: center;
}
.alignItemEnd {
    align-items: flex-end;
}
.m0 {
    margin: 0;
}
.flex40 {
    flex: 0.4;
}
.flex60 {
    flex: 0.6;
}
.mb10 {
    margin-bottom: 10px;
}
.mw75px {
    min-width: 75px;
}
.myBut {
    width: 48%;
    margin: auto;
    padding: 10px 5px;
    border-radius: 10px;
    border: none;
    line-height: 1.5;
    cursor: pointer;
    transition: 0.4s all;
}
.myBut:hover {
    outline: none;
    background-color: #a78569;
    color: white;
}
/* پایه‌ی شیشه‌ای برای فیلدها */
.glass-input,
.glass-select,
.glass-textarea {
  background: rgba(255,255,255,0.49);          /* شفاف برای دیده‌شدن افکت */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 12px rgba(0,0,0,0.10);
  color: #0f172a;
  padding: 10px 5px;
  width: 46%;
  line-height: 1.5;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  margin: auto;
}

/* حالت hover/focus */
.glass-input:hover,
.glass-select:hover,
.glass-textarea:hover {
  border-color: rgba(255,255,255,0.4);
}

.glass-input:focus-visible,
.glass-select:focus-visible,
.glass-textarea:focus-visible {
  border-color: rgba(99,102,241,0.7);          /* ارغوانی کم‌رنگ */
  box-shadow:
    0 0 0 3px rgba(99,102,241,0.25),
    inset 0 1px 0 rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.16);
}

/* placeholder خوانا */
.glass-input::placeholder,
.glass-textarea::placeholder {
  color: rgba(15,23,42,0.55);
}

/* غیرفعال/خواندن-تنها */
.glass-input:disabled,
.glass-select:disabled,
.glass-textarea:disabled,
.glass-input[readonly],
.glass-textarea[readonly]{
  opacity: .7;
  cursor: not-allowed;
}

/* دکمه داخل گروه فیلد شیشه‌ای */
.glass-btn {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  padding: 10px 14px;
  color: #0f172a;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
}
.glass-btn:hover { background: rgba(255,255,255,0.18); }
.glass-btn:active { transform: translateY(1px); }

/* حالت تیره */
@media (prefers-color-scheme: dark) {
  .glass-input, .glass-select, .glass-textarea {
    background: rgba(17,24,39,0.40);
    border-color: rgba(255,255,255,0.18);
    color: #e5e7eb;
  }
  .glass-input::placeholder, .glass-textarea::placeholder { color: rgba(229,231,235,0.55); }
  .glass-btn { color: #e5e7eb; }
}

/* رفع رنگ زرد autofill کروم */
input.glass-input:-webkit-autofill,
textarea.glass-textarea:-webkit-autofill,
select.glass-select:-webkit-autofill {
  -webkit-text-fill-color: inherit;
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.12) inset; /* هم‌رنگ بک‌گراند */
}

/* استایل ساده برای گروه فیلد */
.glass-field { margin-bottom: 14px; }
.glass-label  { display:block; margin-bottom: 6px; font-weight:600; color: rgba(15,23,42,.9); }
@media (prefers-color-scheme: dark){
  .glass-label { color: rgba(229,231,235,.95); }
}
.glass-input:hover,
.glass-input:focus,
.glass-input:focus-visible,
.glass-input:active,
.glass-textarea:hover,
.glass-textarea:focus,
.glass-textarea:focus-visible,
.glass-textarea:active,
.glass-select:hover,
.glass-select:focus,
.glass-select:focus-visible,
.glass-select:active {
  outline: none !important;
  box-shadow: none !important;
  color: inherit !important;
  background-color: white;
  border-color: white;
}
.glass-input:read-only {
    cursor: pointer;
}

/* موبایل: حذف هایلایت لمس */
.glass-input, .glass-textarea, .glass-select {
  -webkit-tap-highlight-color: transparent;
}

/* فایرفاکس/دکمه‌ها (اگر input[type=button/submit] داری) */
input::-moz-focus-inner { border: 0; }
:-moz-focusring { outline: none; }

/* کروم Autofill را هم خنثی کن (در صورت نیاز) */
.glass-input:-webkit-autofill,
.glass-textarea:-webkit-autofill,
.glass-select:-webkit-autofill {
  -webkit-text-fill-color: inherit !important;
  transition: background-color 99999s ease-in-out 0s !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
}

:root{
      --jd-bg: rgba(59, 59, 123, 0.55);
      --jd-fg: #eaeaf0;
      --jd-muted:#c8c8d2;
      --jd-border: rgba(255,255,255,.16);
      --jd-card: rgb(206 182 167 / 28%);
      --jd-accent: #6ea8fe;
      --jd-accent-2: #22c55e;
      --jd-danger: #ef4444;
      --jd-shadow: 0 20px 40px rgba(0,0,0,.35);
      --jd-radius: 18px;
      --jd-radius-sm: 12px;
      --jd-gap: 10px;
      --jd-z: 2147483600;
      --jd-font: system-ui, -apple-system, Segoe UI, Roboto, Vazirmatn, "IRANSansX", Tahoma, Arial, sans-serif;
    }
    .demo{display:flex;align-items:center;justify-content:center;height:100%;}
    .demo .field{display:flex;gap:10px;align-items:center}
    .demo input[type="text"]{
      width: 220px; background: rgba(255,255,255,.06); border:1px solid var(--jd-border); color:var(--jd-fg);
      padding: 12px 14px; border-radius: 12px; outline:none; backdrop-filter: blur(8px);
    }

    /* Overlay & Card */
    .jd-overlay{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:var(--jd-z);
      background: rgba(3,5,12,.35); backdrop-filter: blur(6px); }
    .jd-overlay.active{ display:flex; }

    .jd-card{ color: white; width:min(92vw, 380px); background:var(--jd-card); border:1px solid var(--jd-border); box-shadow:var(--jd-shadow);
      border-radius: var(--jd-radius); overflow:hidden; animation: jd-pop .18s ease-out; }

    @keyframes jd-pop{ from{ transform: translateY(8px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }

    .jd-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; gap:10px; }
    .jd-nav{ display:flex; gap:6px; }
    .jd-btn{ all:unset; cursor:pointer; border:1px solid var(--jd-border); padding:8px; border-radius:12px; line-height:0;width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .jd-btn:hover{ background: rgba(255,255,255,.06); }

    .jd-title{ display:flex; align-items:center; gap:8px; font-weight:700; }
    .jd-title .jd-month{ opacity:.95 }
    .jd-title .jd-year{ opacity:.8; font-weight:600 }

    .jd-grid{ padding: 0 12px 10px; display:grid; grid-template-columns: repeat(7,1fr); gap:8px; }
    .jd-dow{ text-align:center; font-size:13px; opacity:.7 }

    .jd-day{ display:flex; align-items:center; justify-content:center; height:42px; border-radius: 12px; border:1px solid transparent; cursor:pointer;
      background: rgba(255,255,255,.05); color:var(--jd-fg); transition: .15s ease; }
    .jd-day:hover{ background: rgba(255,255,255,.08); }
    .jd-day.jd-out{ visibility:hidden; }
    .jd-day.jd-today{ outline:2px dashed rgba(255,255,255,.25); outline-offset: -4px; }
    .jd-day.jd-selected{ background: linear-gradient(180deg, rgba(110,168,254,.18), rgba(110,168,254,.08)); border-color: rgba(110,168,254,.45); box-shadow: inset 0 0 0 1px rgba(110,168,254,.35); }

    .jd-foot{ display:flex; gap:10px; justify-content:space-between; padding:12px; border-top:1px solid var(--jd-border); background: rgba(255,255,255,.03) }
    .jd-action{ all:unset; cursor:pointer; padding:10px 14px; border-radius: 12px; border:1px solid var(--jd-border); }
    .jd-action.primary{ background: linear-gradient(180deg, rgba(110,168,254,.18), rgba(110,168,254,.04)); border-color: rgba(110,168,254,.45); }
    .jd-action.primary:disabled{ opacity:.5; cursor:not-allowed }

    .jd-hidden{ display:none !important }
    .jd-search{ padding:10px 12px; margin: 0 12px 8px; border-radius: 12px; border:1px solid var(--jd-border); background: rgba(255,255,255,.06); color: var(--jd-fg); width: calc(100% - 24px); outline: none; }
    .jd-list{ padding: 6px 12px 10px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
    .jd-item{ all: unset; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: var(--jd-radius-sm); background: rgba(255,255,255,.05); border:1px solid transparent; cursor:pointer; }
    .jd-item:hover{ background: rgba(255,255,255,.08); }
    .jd-item.selected{ background: linear-gradient(180deg, rgba(110,168,254,.18), rgba(110,168,254,.06)); border-color: rgba(110,168,254,.45); box-shadow: inset 0 0 0 1px rgba(110,168,254,.35); }