/* ⚠ روی سافاری آیفون، vh ارتفاعِ «بزرگ» صفحه است — یعنی حالتی که
   نوار پایین مرورگر پنهان است. تا وقتی آن نوار دیده می‌شود، هر چیزی
   که با vh اندازه گرفته شده زیرش می‌رود و دست‌نیافتنی می‌ماند؛ دقیقاً
   همان بلایی که سر دکمه‌های پایین مودال می‌آمد.
   dvh همیشه اندازهٔ همان چیزی است که واقعاً دیده می‌شود. vh پیش از آن
   نوشته شده تا مرورگرهای قدیمی‌تر بی‌خانمان نمانند. */
.modal-back{
  position:fixed; inset:0; background:rgba(22,39,63,.55); backdrop-filter:blur(4px);
  height:100vh;
  height:100dvh;
  display:none; align-items:center; justify-content:center; z-index:200; padding:var(--sp4);
  animation:fade .18s ease;
}
.modal-back.on{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
.modal{
  background:var(--paper); border-radius:var(--r-xl); box-shadow:var(--shadow-l);
  width:100%; max-width:640px; display:flex; flex-direction:column;
  max-height:92vh;
  max-height:92dvh;
  animation:pop .2s cubic-bezier(.2,.8,.3,1); border:1px solid var(--line); overflow:hidden;
}
.modal.wide{max-width:900px}
.modal.narrow{max-width:440px}
.modal-head{
  padding:var(--sp4) var(--sp5); border-bottom:1px solid var(--line); display:flex;
  align-items:center; gap:var(--sp3); flex:0 0 auto; background:var(--paper);
}
.modal-head h2{margin:0; font-size:1.08rem; font-weight:700; flex:1}
.modal-body{padding:var(--sp5); overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch}
.modal-foot{
  padding:var(--sp4) var(--sp5); border-top:1px solid var(--line); display:flex; gap:var(--sp3);
  justify-content:flex-end; flex:0 0 auto; background:var(--cream); flex-wrap:wrap;
  padding-bottom:calc(var(--sp4) + env(safe-area-inset-bottom));
}