.img-slot{display:block;width:100%;height:100%;min-height:48px;background:#e8f0e2 center/cover no-repeat;border-radius:12px}
.img-slot-circle{border-radius:50%}

/* ---------------------------------------------------------------------------
   Portal side navigation.

   On a desktop the sidebar is a normal column in the page's flex row. On a
   phone it slides in from the start edge (the right, in RTL) over the content,
   hidden until the "القائمة" button opens it.

   The sidebar's own styling is inline (it came from the approved design), so
   the mobile overrides here need !important to win against it.
--------------------------------------------------------------------------- */
.nav-toggle,
.nav-overlay,
.nav-close{display:none}

@media (max-width:860px){
  .nav-toggle{
    display:inline-flex;align-items:center;gap:8px;
    position:fixed;top:10px;inset-inline-start:10px;z-index:60;
    min-height:44px;padding:9px 15px;
    font-family:'El Messiri',Georgia,serif;font-size:.95rem;font-weight:700;
    color:#2E6129;background:#fff;border:2px solid #dfe6d4;border-radius:999px;
    box-shadow:0 8px 20px -12px rgba(46,97,41,.8);cursor:pointer;
  }
  .nav-toggle:hover{border-color:#3B7A34}

  .nav-sidebar{
    position:fixed !important;top:0;bottom:0;inset-inline-start:0;
    width:min(84vw,300px) !important;height:100% !important;z-index:70;
    transform:translateX(100%);transition:transform .25s ease;
    box-shadow:0 0 40px -8px rgba(35,51,27,.45);
  }
  /* RTL puts the panel on the right, so it hides by moving right (+X).
     An LTR page would need the mirror image. */
  html[dir="ltr"] .nav-sidebar{transform:translateX(-100%)}

  body.nav-open .nav-sidebar{transform:translateX(0)}
  body.nav-open .nav-overlay{
    display:block;position:fixed;inset:0;z-index:65;
    background:rgba(35,51,27,.45);
  }

  .nav-close{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-inline-start:auto;margin-bottom:6px;
    color:#5C6E4E;background:#F8FCF4;border:2px solid #dfe6d4;
    border-radius:50%;cursor:pointer;
  }

  /* Keep the floating button clear of the page heading. */
  .nav-scope > main{padding-top:64px !important}
}

@media (prefers-reduced-motion:reduce){
  .nav-sidebar{transition:none}
}

/* ---------------------------------------------------------------------------
   Print: a receipt is a document, not a screenshot of the portal.

   Everything outside the element marked [data-print-doc] is hidden, and the
   document itself is lifted to the top of the sheet.
--------------------------------------------------------------------------- */
@media print {
  .nav-sidebar,
  .nav-toggle,
  .nav-overlay,
  .nav-close,
  .no-print { display: none !important; }

  body.printing-doc * { visibility: hidden; }
  body.printing-doc [data-print-doc],
  body.printing-doc [data-print-doc] * { visibility: visible; }
  body.printing-doc [data-print-doc] {
    position: absolute; top: 0; inset-inline-start: 0;
    width: 100%; margin: 0;
    border: 0 !important; box-shadow: none !important;
  }
  body.printing-doc [data-print-doc] .no-print { display: none !important; }

  @page { margin: 14mm; }
}

/* ---------------------------------------------------------------------------
   Public site top bar.

   On a wide screen the bar is a single row of links. On a phone those ten
   links wrap into a tall stack that pushes the page down, so the bar keeps
   only the logo and a button, and the links drop down when asked for.
--------------------------------------------------------------------------- */
.site-nav-switch { display: none; }
.site-nav-toggle { display: none; }

@media (max-width: 860px) {
  .site-nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 15px; cursor: pointer;
    font-family: 'El Messiri', Georgia, serif; font-size: .95rem;
    font-weight: 700; color: #2E6129;
    background: #fff; border: 2px solid #dfe6d4; border-radius: 999px;
  }
  .site-nav-toggle:hover { border-color: #3B7A34; }

  /* The links leave the bar and become a dropped panel under it. */
  .site-nav {
    display: none !important;
    width: 100%; order: 3;
    flex-direction: column; align-items: stretch !important;
    gap: 2px !important;
    padding-top: 10px; margin-top: 8px;
    border-top: 1px dashed #dfe6d4;
  }
  /* The checkbox is the whole mechanism — no script involved, so a
     stale or blocked nav.js cannot leave the button dead. */
  .site-nav-switch:checked ~ .site-nav { display: flex !important; }
  .site-nav-switch:focus-visible ~ .site-nav-toggle {
    outline: 2px solid #3B7A34; outline-offset: 2px;
  }
  .site-nav > a { width: 100%; box-sizing: border-box; }
}

@media print { .site-nav-toggle { display: none !important; } }


/* ---------------------------------------------------------------------------
   نجوم غرس — a slow star field drifting behind the section.

   Two pseudo-element layers of dotted radial-gradients moving in opposite
   directions: the parallax reads as depth without a single image request or
   line of script. isolation:isolate pins z-index:-1 inside the section, so
   the stars never fall behind the page itself.
   --------------------------------------------------------------------------- */
.stars-sky { isolation: isolate; }

.stars-sky::before,
.stars-sky::after {
  content: "";
  position: absolute;
  inset: -28px -18px;
  z-index: -1;
  pointer-events: none;
  border-radius: 28px;
}

/* Near layer: larger, warmer, faster. */
.stars-sky::before {
  background-image:
    radial-gradient(circle, rgba(255,200,68,.75) 0 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(238,111,160,.55) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(59,122,52,.45) 0 1.3px, transparent 2px);
  background-size: 190px 150px, 260px 210px, 150px 190px;
  background-position: 0 0, 60px 30px, 25px 90px;
  animation: ghars-star-drift 38s linear infinite;
}

/* Far layer: smaller, dimmer, slower, and drifting the other way. */
.stars-sky::after {
  background-image:
    radial-gradient(circle, rgba(255,200,68,.5) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(46,97,41,.35) 0 1px, transparent 1.6px);
  background-size: 120px 100px, 165px 135px;
  background-position: 40px 12px, 0 55px;
  animation: ghars-star-drift 72s linear infinite reverse,
             ghars-star-twinkle 6.5s ease-in-out infinite;
}

@keyframes ghars-star-drift {
  to { background-position: 190px -150px, 250px -180px, 175px -100px; }
}

@keyframes ghars-star-twinkle {
  0%, 100% { opacity: .4; }
  50%      { opacity: .95; }
}

/* Motion is decoration; never impose it on someone who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
  .stars-sky::before,
  .stars-sky::after { animation: none; }
}

@media print {
  .stars-sky::before,
  .stars-sky::after { display: none; }
}

/* ---------------------------------------------------------------------------
   نجوم غرس in the top bar — the same drifting sky, shrunk into the pill.

   Sized for a chip rather than a section: the star grid is small enough that
   several dots cross the link, and fast enough to read as motion in the two
   seconds an eye rests on a nav item. Text sits above via isolation +
   z-index:-1, so contrast is untouched.
   --------------------------------------------------------------------------- */
.nav-stars {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f2f8ea;
}

.nav-stars::before,
.nav-stars::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
}

.nav-stars::before {
  background-image:
    radial-gradient(circle, rgba(255,200,68,.95) 0 1.3px, transparent 2px),
    radial-gradient(circle, rgba(238,111,160,.7) 0 1.1px, transparent 1.8px);
  background-size: 44px 32px, 60px 42px;
  background-position: 0 0, 17px 11px;
  animation: ghars-navstar-near 13s linear infinite;
}

.nav-stars::after {
  background-image:
    radial-gradient(circle, rgba(59,122,52,.6) 0 .9px, transparent 1.5px);
  background-size: 33px 25px;
  animation: ghars-navstar-far 23s linear infinite reverse,
             ghars-star-twinkle 4s ease-in-out infinite;
}

@keyframes ghars-navstar-near {
  to { background-position: 44px -32px, 77px -31px; }
}

@keyframes ghars-navstar-far {
  to { background-position: 33px -25px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-stars::before,
  .nav-stars::after { animation: none; }
}

@media print {
  .nav-stars::before,
  .nav-stars::after { display: none; }
}


/* ---------------------------------------------------------------------------
   Watermark — the Ghars seal, faint behind every receipt and statement.

   Applied to every [data-print-doc] (receipts, slips, vouchers, كشوف): a
   centered, very light logo that survives printing (print-color-adjust).
   pointer-events:none keeps every control above it clickable, and z-index
   stacking is created by position:relative on the document itself.
   --------------------------------------------------------------------------- */
[data-print-doc] {
  position: relative;
}

[data-print-doc]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/ghars/80b8d74964.png') center / min(55%, 320px) no-repeat;
  opacity: .06;
  pointer-events: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {
  [data-print-doc]::before { opacity: .07; }
}