/* ════════════════════════════════════════════════════════════
   responsive.css — DosTime WebApp (Phone Frame)
   نمایش همیشه به‌صورت وب‌اپ با سایز گوشی (max 480px وسط‌چین)
   ریسپانسیو فقط برای سایزهای کوچک 280-480 + ارتفاع کوتاه
   ════════════════════════════════════════════════════ */

/* ─── 0) پایه — وب‌اپ فریم گوشی ─── */
:root {
  --app-frame: 480px;
  --content-pad: 14px;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#app {
  width: 100%;
  max-width: var(--app-frame);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-page);
  box-shadow: 0 0 80px rgb(0 0 0 / 0.08);
  overflow: visible;
}

#view {
  flex: 1;
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  min-height: calc(100dvh - var(--header-h) - var(--nav-h));
  padding: 20px 14px calc(var(--nav-h) + 24px);
  overflow: visible;
  overflow-x: clip;
}

/* ─── 1) دسکتاپ — همچنان فریم گوشی وسط‌چین (مثل قبل) ─── */
@media (min-width: 481px) {
  body {
    background: var(--neutral-100, #f5f3fa);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
  }
  #app {
    width: var(--app-frame);
    max-width: var(--app-frame);
    min-height: 100vh;
    min-height: 100dvh;
    border-inline: 1px solid var(--border);
    box-shadow: 0 0 80px rgb(0 0 0 / 0.10);
  }
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: var(--app-frame);
    max-width: var(--app-frame);
  }
}

/* ─── 2) مینی‌فون 280-320 (Fold Cover) ─── */
@media (max-width: 320px) {
  :root { --content-pad: 8px; }
  #app { max-width: 100vw; width: 100vw; border-inline: none; box-shadow: none; }
  #view { padding: 12px 8px calc(var(--nav-h) + 18px); }
  .topbar { padding-inline: 8px; gap: 3px; }
  .topbar-title { font-size: 13px; }
  .icon-box { width: 32px; height: 32px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 6px; }
  .grid-2 { gap: 6px; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .quick-card { padding: 10px 4px; }
  .quick-card .icon-tile { width: 36px; height: 36px; }
  .bottom-nav { width: 100vw; max-width: 100vw; left: 0 !important; transform: none !important; border-radius: 0; bottom: 0; height: 56px; }
  .bottom-nav a, .bottom-nav button { font-size: 7px; gap: 1px; }
  .bottom-nav svg { width: 16px; height: 16px; }
  .bottom-nav .ai-bubble { width: 28px; height: 28px; }
  .stat-card-value { font-size: 18px; }
  .page-head h1 { font-size: 16px; }
  .med-actions { gap: 4px; flex-wrap: wrap; }
  .med-actions .btn { font-size: 9px; padding-inline: 6px; height: 28px; flex: 1 1 auto; }
  .hh-tabs { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .hh-tab { min-height: 44px; font-size: 10px; padding: 6px 4px; }
}

/* ─── 3) 321-360 (Galaxy S8, Pixel 3) ─── */
@media (min-width: 321px) and (max-width: 360px) {
  #view { padding: 14px 10px calc(var(--nav-h) + 24px); }
  .grid-3 { gap: 8px; }
  .quick-grid { gap: 6px; }
  .hh-tabs { gap: 5px; }
}

/* ─── 4) 361-375 (iPhone SE2/X) ─── */
@media (min-width: 361px) and (max-width: 375px) {
  #view { padding-inline: 12px; }
  .card-pad { padding: 12px; }
}

/* ─── 5) 376-390 (iPhone 12/13) ─── */
@media (min-width: 376px) and (max-width: 390px) {
  /* بدون تغییر — فریم 480 */
}

/* ─── 6) 391-414 (Pixel 7, Plus) ─── */
@media (min-width: 391px) and (max-width: 414px) {
}

/* ─── 7) 415-480 (Pro Max) ─── */
@media (min-width: 415px) and (max-width: 480px) {
}

/* ─── 8) ارتفاع کوتاه — لندسکیپ ─── */
@media (max-height: 600px) {
  #view { padding-top: 10px; padding-bottom: calc(var(--nav-h) + 16px); }
  .auth-center { padding-block: 12px; }
  .bottom-nav { height: 52px; }
  .greeting-card { padding: 12px !important; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 44px; min-height: 44px; }
  #view { padding-bottom: 16px; }
  /* ناو مخفی نشود — فقط فشرده شود */
  .bottom-nav { height: 48px; }
}

/* ─── 9) تراکم پیکسل بالا ─── */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .card, .bottom-nav, .topbar { border-width: 0.5px; }
}

/* ─── 10) اسکرول — رفع خطای قفل شدن ─── */
html, body {
  overscroll-behavior-y: auto;
}

#app, #view {
  overscroll-behavior-y: auto;
}

.bottom-nav, .modal-overlay {
  overscroll-behavior: contain;
}

/* جلوگیری از overflow-x بدون بستن scroll عمودی */
html, body, #app, #view {
  overflow-x: clip;
}

/* کارت‌ها بدون overflow */
.card, .stat-card, .quick-card, .drug-card, .med-card {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* ورودی — جلوگیری زوم iOS */
@media (max-width: 480px) {
  input, select, textarea { font-size: max(16px, 14px); }
}

/* لمس */
.bottom-nav {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a, .bottom-nav button { -webkit-tap-highlight-color: transparent; }

/* لوگو سیال */
.topbar-logo { width: clamp(20px, 6vw, 24px); height: clamp(20px, 6vw, 24px); }

/* گرید خدمات در گوشی کوچک */
@media (max-width: 360px) {
  .srv-provider-card .row-between { flex-direction: column; align-items: flex-start; }
}

/* ─── 11) حذف حس «رفرش»: ورود و تعامل صفحه بدون انیمیشن —
   محتوا لحظه‌ای و ثابت نمایش داده می‌شود (فقط مودالِ تازه‌بازشده محوی دارد) */
.screen {
  animation: none !important;
}
.screen > .stack > *,
.screen > .grid-3 > *,
.screen > section > * {
  animation: none !important;
}

/* ─── 12) پاپاپ‌ها — تک‌اجرایی، بدون بگراند مشکی ─── */
/* مودال‌ها خواهر .screen هستند (نه فرزند آن) پس انیمیشن transform صفحه
   روی position:fixed آن‌ها اثر نمی‌گذارد — بدون پرش و ریسایز */
.modal-overlay,
.srv-map-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.modal {
  animation: none;
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 70px rgb(10 12 30 / 0.28), 0 4px 16px rgb(10 12 30 / 0.12);
  max-height: 92vh;
  max-height: 92dvh;
}
.modal.modal-anim {
  animation: modal-center-in 0.15s ease;
}
.srv-map-shell {
  animation: none;
  height: 92vh;
  height: 92dvh;
  border: 1px solid var(--border-strong);
}
@media (min-width: 640px) {
  .srv-map-shell {
    height: 88vh;
    height: 88dvh;
  }
}
#net-invite-results { min-height: 72px; display: block; }
.modal-body { min-height: 0; }