/* ============================================================================
   portal-back.css  (V90 / V91)
   Cosmetic overrides for the portal SPA, served from 'self' (CSP-safe) and
   injected by the portal() route. Pure CSS so it survives React re-renders
   without rebuilding the bundle.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   V90 — Back control: show the Arabic WORD "رجوع" instead of the bare
   chevron icon, matching the classic shop pages. The shared PageHeader back
   button is the only element rendered with aria-label="رجوع".
   ------------------------------------------------------------------------- */
button[aria-label="رجوع"] {
  width: auto !important;
  min-width: 2.5rem;
  padding-left: 0.95rem !important;
  padding-right: 0.95rem !important;
  border-radius: 9999px !important;
  gap: 0 !important;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
}
button[aria-label="رجوع"] > svg {
  display: none !important;
}
button[aria-label="رجوع"]::before {
  content: "رجوع";
}

/* ---------------------------------------------------------------------------
   V91 — Hide leftover mockup chrome shipped inside the SPA bundle.
   ------------------------------------------------------------------------- */

/* (1) Fake "unread" red dot on the notification bell. The bell is not wired
   to any real notifications yet (no onClick / no count), so the permanent dot
   falsely signals unread items. Only the bell's dot uses .bg-coral.pulse-dot
   (the Gmail stock badge uses .bg-success.pulse-dot), so this is precise. */
.pulse-dot.bg-coral {
  display: none !important;
}

/* (2) Decorative fake serial "№ 01" printed on every PageHeader — a leftover
   from the design mockup. Uniquely identified by .num.pb-1[dir="ltr"]. */
[dir="ltr"].num.pb-1 {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   V92 — U9: restore home service-list density so all services fit without
   scrolling (undo the V83 over-sizing) on the CURRENTLY shipped bundle,
   effective immediately without waiting for a rebuild. Mobile only. The
   opt-in 2-column "split" mode ships with the rebuilt bundle. This block can
   be removed once the new bundle (compact py-2.5 rows) is deployed.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  [data-testid^="portal-service-"] {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ---------------------------------------------------------------------------
   V99 — Home services: show the 6 service tiles 3-per-row (two rows of 3) at
   ALL widths, instead of a single stacked column on phones. The shipped
   bundle lays them out grid-cols-1 (mobile) / md:grid-cols-2 / lg:grid-cols-3,
   so we force 3 columns on the tiles' container (matched via :has, so we don't
   depend on a hashed Tailwind class) and restyle each horizontal row into a
   compact vertical card that fits the narrow cell. Pure CSS — no rebuild.
   ------------------------------------------------------------------------- */
*:has(> [data-testid^="portal-service-"]) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  max-width: 100% !important;
}
[data-testid^="portal-service-"] {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 0.45rem !important;
  padding: 0.75rem 0.35rem !important;
  border-bottom: 0 !important;
}
[data-testid^="portal-service-"] > div {
  text-align: center !important;
  flex: none !important;
}
/* no room for the decorative serial number or the chevron in a 3-up card */
[data-testid^="portal-service-"] > .num,
[data-testid^="portal-service-"] > svg:last-child {
  display: none !important;
}