/* استایل‌های پایه‌ای مشترک همهٔ صفحات: فونت وزیرمتن، هدر سایت، منو و فوتر.
   ------------------------------------------------------------------
   Zuvor ein Inline-<style>-Block in templates/base.html (rund 12 KB) und
   damit in JEDER einzelnen HTML-Antwort der Seite enthalten - nicht
   cachebar, bei jedem Seitenwechsel erneut uebertragen und render-blockierend
   im <head>. Als eigene Datei liefert Whitenoise den Inhalt gehasht und mit
   "Cache-Control: immutable" aus: der Browser laedt ihn einmal und danach
   nie wieder.

   Die @font-face-Regel unten nutzt bewusst einen RELATIVEN Pfad
   ("../fonts/...") statt des frueheren {% static %}-Tags: CSS-Dateien werden
   von Django nicht als Template gerendert. CompressedManifestStaticFilesStorage
   (core/settings/production.py) schreibt url()-Referenzen beim collectstatic
   ohnehin automatisch auf den gehashten Dateinamen um - das Cache-Busting
   der Schriftdatei bleibt also vollstaendig erhalten. */

    @font-face {
      font-family: "Vazirmatn";
      src: url("../fonts/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2-variations"), url("../fonts/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2");
      font-weight: 100 900;
      font-display: swap;
    }
    html, body {
      font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
    }

    /* Sticky Footer: <body> ist "min-h-screen" (base.html), aber erst als
       Flex-Spalte fuellt <main> die Resthoehe - sonst rutscht der Copyright-
       Footer auf Seiten mit wenig Inhalt nach oben statt am unteren Rand zu
       sitzen. "width: 100%" haelt das bisherige Block-Verhalten von <main>
       ("mx-auto max-w-5xl" zentriert bei voller Breite, statt als Flex-Item
       auf Inhaltsbreite zu schrumpfen). */
    body {
      display: flex;
      flex-direction: column;
    }
    body > main {
      flex: 1 0 auto;
      width: 100%;
    }

    /* HTMX-Ladeindikator: standardmäßig versteckt, während .htmx-request sichtbar */
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator,
    .htmx-request.htmx-indicator { display: flex; }

    /* ── Site-Header: grafisches Farbschema (Cyan / Amber) ── */
    .hz-site-header {
      position: relative;
      z-index: 50; /* über Hero/Main, damit Dropdowns nicht darunter liegen */
      isolation: isolate;
      /* overflow darf NICHT hidden sein — sonst werden Dropdown-Panels abgeschnitten */
      border-bottom: 1px solid rgba(14, 143, 189, 0.18);
      background:
        radial-gradient(ellipse 55% 120% at 8% 0%, rgba(26, 184, 232, 0.22), transparent 58%),
        radial-gradient(ellipse 45% 100% at 92% 100%, rgba(245, 166, 35, 0.18), transparent 55%),
        linear-gradient(180deg, #e8f6fc 0%, #f3fafd 48%, #ffffff 100%);
    }
    .hz-site-header::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.35;
      background-image:
        linear-gradient(rgba(14, 143, 189, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 143, 189, 0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
    }
    .hz-site-header__inner {
      position: relative;
      z-index: 1;
    }
    .hz-nav-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 9999px;
      border: 1px solid rgba(14, 143, 189, 0.16);
      background: rgba(255, 255, 255, 0.88);
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.25;
      color: #334155;
      box-shadow: 0 1px 2px rgba(11, 31, 46, 0.04);
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .hz-nav-link:hover {
      border-color: rgba(26, 184, 232, 0.45);
      color: #0e7490;
      background: #fff;
      box-shadow: 0 4px 12px rgba(26, 184, 232, 0.12);
    }
    /* Auth-CTA: gefüllter Knopf — klar anders als die weißen Outline-Nav-Items */
    .hz-nav-link--auth {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 9999px;
      border: none;
      background: linear-gradient(135deg, #0b1f2e 0%, #0e8fbd 100%);
      padding: 0.55rem 1.15rem;
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.25;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(11, 31, 46, 0.28);
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .hz-nav-link--auth:hover {
      background: linear-gradient(135deg, #0e8fbd 0%, #1ab8e8 100%);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(26, 184, 232, 0.35);
      transform: translateY(-1px);
    }
    /* Einheitliche Icon-Größe in allen Nav-Listen (20×20) */
    .hz-nav-icon {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px;
      min-height: 20px;
      max-width: 20px;
      max-height: 20px;
      flex-shrink: 0;
      display: block;
      align-self: center;
    }
    .hz-nav-icon--chevron {
      width: 16px !important;
      height: 16px !important;
      min-width: 16px;
      min-height: 16px;
      max-width: 16px;
      max-height: 16px;
    }
    .hz-nav-panel {
      z-index: 40;
      border: 1px solid rgba(14, 143, 189, 0.16);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 12px 28px rgba(11, 31, 46, 0.12);
    }
    .hz-nav-panel a:hover,
    .hz-nav-panel button:hover {
      background: #ecfeff;
      color: #0e7490;
    }

    /* ══════════════ ناوبری موبایل (اپ‌مانند): نوار بالا + نوار پایین + منوها ══════════════
       فقط زیر 768px نمایش داده می‌شوند (md:hidden) — دسکتاپ دقیقاً همان چیزی است که بود. */
    :root {
      --hz-ink: #0b1f2e;
      --hz-ink-soft: #143047;
      --hz-cyan: #1ab8e8;
      --hz-cyan-deep: #0e8fbd;
    }

    /* نوار باریک بالای صفحه در موبایل: لوگو + دکمهٔ همبرگر
       توجه: «display» عمداً اینجا تنظیم نشده، چون این <style> بعد از لینک
       Tailwind لود می‌شود و با همان specificity، بی‌قید-و-شرط بودنش روی
       «md:hidden» غالب می‌شد و نوار موبایل را در دسکتاپ هم نشان می‌داد.
       مقدار «display» را @media (max-width: 767px) پایین همین بلوک تنظیم می‌کند. */
    .hz-mobile-topbar {
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.6rem 1rem;
      background: linear-gradient(180deg, #e8f6fc 0%, #f3fafd 100%);
      border-bottom: 1px solid rgba(14, 143, 189, 0.16);
      position: sticky;
      top: 0;
      z-index: 40;
    }
    .hz-mobile-brand {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none !important;
      min-width: 0;
    }
    .hz-mobile-brand img {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      object-fit: contain;
      background: #e2e8f0;
      flex-shrink: 0;
    }
    .hz-mobile-brand span {
      font-weight: 800;
      font-size: 0.95rem;
      color: #115e73;
      white-space: nowrap;
    }
    .hz-mobile-iconbtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.35rem;
      height: 2.35rem;
      flex-shrink: 0;
      border-radius: 999px;
      border: 1px solid rgba(14, 143, 189, 0.18);
      background: #fff;
      color: #0e7490;
    }
    .hz-mobile-iconbtn svg { width: 20px; height: 20px; }

    /* نوار پایین ثابت: خانه / خدمات / سفارش‌ها / حساب من (همان دلیل بالا: «display» عمداً اینجا نیست) */
    .hz-bottom-nav {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 50;
      grid-template-columns: repeat(4, 1fr);
      background: linear-gradient(180deg, #0f2a3d 0%, var(--hz-ink) 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 -6px 20px rgba(11, 31, 46, 0.25);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .hz-bnav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2rem;
      padding: 0.55rem 0.25rem 0.6rem;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.7rem;
      font-weight: 600;
      line-height: 1;
      text-decoration: none !important;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hz-bnav-item svg { width: 20px; height: 20px; }
    .hz-bnav-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .hz-bnav-item.is-active { color: #fff; }
    .hz-bnav-item.is-active .hz-bnav-icon-wrap {
      background: linear-gradient(135deg, var(--hz-cyan), var(--hz-cyan-deep));
      box-shadow: 0 4px 12px rgba(26, 184, 232, 0.4);
    }

    /* پس‌زمینهٔ تیرهٔ مشترک، پشت کشوی همبرگر و شیت‌های پایین‌صفحه */
    .hz-overlay-backdrop {
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(11, 31, 46, 0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .hz-overlay-backdrop.is-open { opacity: 1; pointer-events: auto; }

    /* کشوی همبرگر: بقیهٔ آیتم‌های منو (فعلی و هر آیتمی که بعداً اضافه شود) */
    .hz-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 61;
      width: min(78vw, 300px);
      background: #fff;
      box-shadow: -8px 0 28px rgba(11, 31, 46, 0.18);
      transform: translateX(100%);
      transition: transform 0.22s ease;
      flex-direction: column; /* «display» عمداً حذف شد، همان دلیل .hz-mobile-topbar بالا */
      padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
    }
    .hz-drawer.is-open { transform: translateX(0); }
    .hz-drawer__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid #eef2f7;
    }
    .hz-drawer__head strong { font-size: 0.95rem; color: var(--hz-ink); }
    .hz-drawer__nav { display: flex; flex-direction: column; gap: 0.3rem; }
    .hz-drawer__nav a,
    .hz-drawer__nav button {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.8rem 0.7rem;
      border-radius: 12px;
      font-size: 0.92rem;
      font-weight: 600;
      color: #334155;
      text-decoration: none !important;
      border: none;
      background: transparent;
      text-align: right;
      width: 100%;
      cursor: pointer;
    }
    .hz-drawer__nav svg { width: 19px; height: 19px; flex-shrink: 0; color: #0e8fbd; }
    .hz-drawer__nav a:hover,
    .hz-drawer__nav button:hover { background: #ecfeff; color: #0e7490; }

    /* Bottom-Sheet: زیرمنوی «خدمات» و «حساب من» */
    .hz-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 61;
      background: #fff;
      border-radius: 22px 22px 0 0;
      box-shadow: 0 -10px 30px rgba(11, 31, 46, 0.2);
      transform: translateY(100%);
      transition: transform 0.22s ease;
      padding: 0.6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
      max-height: 70vh;
      overflow-y: auto;
    }
    .hz-sheet.is-open { transform: translateY(0); }
    .hz-sheet__handle {
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: #e2e8f0;
      margin: 0.5rem auto 0.9rem;
    }
    /* Kein <h3>: das Bottom-Sheet steht im DOM vor dem <h1> jeder Seite. */
    .hz-sheet__title { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 800; color: var(--hz-ink); }
    .hz-sheet a,
    .hz-sheet button {
      display: flex;
      align-items: center;
      padding: 0.85rem 0.2rem;
      border-radius: 10px;
      font-size: 0.92rem;
      font-weight: 600;
      color: #334155;
      text-decoration: none !important;
      border: none;
      background: transparent;
      width: 100%;
      text-align: right;
      cursor: pointer;
      border-bottom: 1px solid #f1f5f9;
    }
    .hz-sheet a:last-child,
    .hz-sheet button:last-child { border-bottom: none; }
    .hz-sheet__phone { padding: 0.3rem 0.2rem 0.6rem; font-size: 0.8rem; color: #94a3b8; }
    .hz-sheet__danger { color: #dc2626 !important; }

    /* «display» نوار بالا/پایین/کشوی موبایل - فقط پایین‌تر از 768px (همان
       آستانهٔ md: Tailwind)، تا با «md:hidden» به‌جای رقابت هم‌سطح، هرگز
       هم‌زمان تعریف نشوند (توضیح کامل بالای هرکدام). */
    @media (max-width: 767px) {
      .hz-mobile-topbar { display: flex; }
      .hz-bottom-nav { display: grid; }
      .hz-drawer { display: flex; }
    }

    /* جای خالی معادل ارتفاع نوار پایین، فقط وقتی خودِ نوار در صفحه وجود دارد
       (صفحات waiting-room که page_header را بازنویسی می‌کنند نوار را ندارند) */
    @media (max-width: 767px) {
      body:has(.hz-bottom-nav) {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
      }
    }

    /* حذف نوار کپی‌رایت پایین صفحه فقط در نمای موبایل، در تمام صفحات سایت */
    @media (max-width: 767px) {
      .hz-site-footer { display: none; }
    }

    /* متن کپی‌رایت فوتر — فقط CSS ایستا (بدون انیمیشن/JS)؛ اندازهٔ فونت از text-sm والد به ارث می‌رسد.
       عرض <p> با fit-content دقیقاً به اندازهٔ خود متن است، پس دو خط بالا و پایین (100% عرض آن)
       هم دقیقاً هم‌طول متن می‌شوند، نه هم‌عرض صفحه. */
    .hz-copyright {
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
      font-weight: 500;
      line-height: 1.9;
      color: #64748b;
    }
    .hz-copyright::before,
    .hz-copyright::after {
      content: "";
      display: block;
      height: 1px;
      background: rgba(26, 184, 232, 0.45);
    }
    .hz-copyright::before { margin-bottom: 0.6rem; }
    .hz-copyright::after { margin-top: 0.6rem; }