/* ==========================================================================
   Compound Residence Portal — mobile-first stylesheet
   --------------------------------------------------------------------------
   Two rules govern everything here:

   1. THEME. The complete light palette is defined on bare :root. Dark is a
      token swap in two places — a prefers-color-scheme block guarded with
      :not([data-theme="light"]) so an explicit light choice wins, and a
      [data-theme="dark"] block so an explicit dark choice wins. No colour is
      ever defined only inside one of those blocks.

   2. DIRECTION. Arabic renders RTL on <html dir="rtl">. Layout therefore uses
      LOGICAL properties (margin-inline-start, padding-inline, inset-inline,
      border-start-*) everywhere. The only places that pin physical direction
      are ones that are genuinely direction-independent — star ratings, phone
      numbers and latin identifiers — which carry direction:ltr explicitly.
   ========================================================================== */

:root {
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --border:        #e4e6ea;
  --text:          #14161a;
  --text-muted:    #646b76;
  --text-faint:    #8b929c;

  --brand:         #0f766e;
  --brand-strong:  #115e57;
  --brand-soft:    #e6f4f2;
  --on-brand:      #ffffff;

  --ok:            #15803d;
  --ok-soft:       #e7f6ec;
  --warn:          #b45309;
  --warn-soft:     #fdf3e3;
  --danger:        #b91c1c;
  --danger-soft:   #fdeaea;
  --info:          #1d4ed8;
  --info-soft:     #e8eefc;

  --shadow:        0 1px 2px rgba(16, 18, 22, .05), 0 4px 16px rgba(16, 18, 22, .06);
  --shadow-lg:     0 -2px 24px rgba(16, 18, 22, .14);

  --radius:        14px;
  --radius-sm:     10px;
  --radius-pill:   999px;

  --tabbar-h:      62px;
  --maxw:          640px;

  --font: "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic",
          "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0e1014;
    --surface:      #171a20;
    --surface-2:    #1e222a;
    --border:       #2a2f39;
    --text:         #eef0f3;
    --text-muted:   #9aa2ae;
    --text-faint:   #6f7783;

    --brand:        #2dd4bf;
    --brand-strong: #5eead4;
    --brand-soft:   #14312e;
    --on-brand:     #06201d;

    --ok:           #4ade80;
    --ok-soft:      #12301d;
    --warn:         #fbbf24;
    --warn-soft:    #33260c;
    --danger:       #f87171;
    --danger-soft:  #351616;
    --info:         #93b4fd;
    --info-soft:    #17203a;

    --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --shadow-lg:    0 -2px 28px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --bg:           #0e1014;
  --surface:      #171a20;
  --surface-2:    #1e222a;
  --border:       #2a2f39;
  --text:         #eef0f3;
  --text-muted:   #9aa2ae;
  --text-faint:   #6f7783;

  --brand:        #2dd4bf;
  --brand-strong: #5eead4;
  --brand-soft:   #14312e;
  --on-brand:     #06201d;

  --ok:           #4ade80;
  --ok-soft:      #12301d;
  --warn:         #fbbf24;
  --warn-soft:    #33260c;
  --danger:       #f87171;
  --danger-soft:  #351616;
  --info:         #93b4fd;
  --info-soft:    #17203a;

  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-lg:    0 -2px 28px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.3; font-weight: 650; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8em; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }
[hidden] { display: none !important; }

/* Latin/numeric runs that must not be reordered by the RTL algorithm. */
.ltr, .num, .plate { direction: ltr; unicode-bidi: isolate; }

.muted  { color: var(--text-muted); }
.faint  { color: var(--text-faint); font-size: .85rem; }
.center { text-align: center; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 16px calc(var(--tabbar-h) + 28px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}

.topbar__title {
  font-weight: 650;
  font-size: 1.02rem;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__lead { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

.topbar__actions { display: flex; align-items: center; gap: 6px; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); text-decoration: none; }
.iconbtn--admin { padding-inline: 0; width: 38px; border-color: var(--brand); background: var(--brand); color: #fff; }
.iconbtn--admin:hover { background: var(--brand-strong); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-block-end: 12px;
}

.card--flush { padding: 0; overflow: hidden; }

.card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-end: 8px;
}
.card__title { margin: 0; font-size: 1rem; font-weight: 650; }
.card__body  { color: var(--text-muted); }

.section-title {
  margin: 22px 0 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.section-title:first-child { margin-block-start: 4px; }

/* Avatar / monogram */
.avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand-soft);
  color: var(--brand-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   List rows (directory, admin tables)
   -------------------------------------------------------------------------- */

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--border);
}
.row:last-child { border-block-end: 0; }
.row__main  { flex: 1; min-width: 0; }
.row__name  { font-weight: 600; }
.row__meta  { font-size: .85rem; color: var(--text-muted); }
.row__side  { flex: 0 0 auto; text-align: end; }

/* --------------------------------------------------------------------------
   Badges & pills
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-muted);
}
.badge--ok     { background: var(--ok-soft);     color: var(--ok); }
.badge--warn   { background: var(--warn-soft);   color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info   { background: var(--info-soft);   color: var(--info); }
.badge--brand  { background: var(--brand-soft);  color: var(--brand-strong); }

/* --------------------------------------------------------------------------
   Buttons & forms
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--brand-strong); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--surface-2); }

.btn--ok     { background: var(--ok);     color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--sm     { width: auto; min-height: 34px; padding: 5px 12px; font-size: .84rem; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { width: auto; flex: 1 1 auto; }

.field { margin-block-end: 14px; }
.field > label {
  display: block;
  margin-block-end: 5px;
  font-size: .86rem;
  font-weight: 620;
  color: var(--text-muted);
}

input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"],
select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
textarea { min-height: 96px; resize: vertical; }

.help { font-size: .82rem; color: var(--text-faint); margin-block-start: 4px; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-block-end: 14px;
  border-inline-start: 3px solid var(--info);
  background: var(--info-soft);
  color: var(--text);
}
.alert--ok     { border-inline-start-color: var(--ok);     background: var(--ok-soft); }
.alert--warn   { border-inline-start-color: var(--warn);   background: var(--warn-soft); }
.alert--danger { border-inline-start-color: var(--danger); background: var(--danger-soft); }

/* --------------------------------------------------------------------------
   Bottom tab bar — 4 items, thumb-reachable, safe-area aware
   -------------------------------------------------------------------------- */

.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--surface);
  border-block-start: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--tabbar-h);
  color: var(--text-faint);
  font-size: .68rem;
  font-weight: 600;
  text-decoration: none;
}
.tab:hover { text-decoration: none; }
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tab[aria-current="page"] { color: var(--brand); }

/* --------------------------------------------------------------------------
   Bottom sheet — the one-time announcement popup
   -------------------------------------------------------------------------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 8, 12, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet {
  width: 100%;
  max-width: var(--maxw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0));
  animation: sheet-up .26s ease-out;
}

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

.sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border);
  margin: 6px auto 14px;
}

/* --------------------------------------------------------------------------
   Star rating
   --------------------------------------------------------------------------
   direction:ltr is deliberate and must stay. A 1-to-5 scale reads
   left-to-right in both languages; letting it mirror under dir="rtl" would
   silently turn a 5-star tap into a 1-star vote.
   -------------------------------------------------------------------------- */

.stars {
  display: inline-flex;
  direction: ltr;
  unicode-bidi: isolate;
  gap: 4px;
}

.stars button {
  border: 0;
  background: none;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
  font-size: 1.6rem;
  color: var(--border);
}
.stars button[aria-checked="true"],
.stars button.is-lit { color: #f5a524; }
.stars button:hover  { color: #f5a524; }

.poll-item {
  padding: 14px 0;
  border-block-end: 1px solid var(--border);
}
.poll-item:last-child { border-block-end: 0; }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
table.data th, table.data td {
  padding: 9px 10px;
  text-align: start;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
table.data th { color: var(--text-muted); font-weight: 650; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .grid-2 { grid-template-columns: 1fr; } }

.stack > * + * { margin-block-start: 10px; }

/* Community links (home page) */
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.links__item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; text-decoration: none !important;
  color: inherit; background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform .15s, background .2s; min-height: 52px; }
.links__item:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 18%, transparent); }
.links__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--c); }
.links__text { font-weight: 600; font-size: .92rem; line-height: 1.3; }

/* Services directory — every category carries its own hue (--h) */
@keyframes fac-up { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fac-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes fac-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px,12px) scale(1.12); } }

.fac-hero { --h: 172; position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 22px 20px 20px; margin-block-end: 18px;
  color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 34%), hsl(calc(var(--h) + 14) 72% 44%) 55%, hsl(calc(var(--h) + 28) 78% 54%));
  box-shadow: 0 14px 34px -14px hsl(var(--h) 70% 35% / .7); animation: fac-up .45s ease-out both; }
.fac-hero--main { background: linear-gradient(135deg, var(--brand-strong), var(--brand) 55%, color-mix(in srgb, var(--brand) 55%, #7dd3fc));
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--brand) 70%, transparent); }
.fac-hero__blob { position: absolute; z-index: -1; width: 220px; height: 220px; border-radius: 50%; inset-block-start: -90px; inset-inline-end: -70px;
  background: radial-gradient(circle, rgb(255 255 255 / .35), transparent 70%); animation: fac-drift 9s ease-in-out infinite; }
.fac-hero__blob--2 { width: 160px; height: 160px; inset-block: auto -70px; inset-inline: -50px auto; animation-delay: -4s; }
.fac-hero__title { margin: 0 0 4px; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.fac-hero__sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; opacity: .95; font-size: .92rem; }
.fac-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-block-start: 12px; font-size: .88rem; }
.fac-hero__meta > span { background: rgb(255 255 255 / .16); padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.fac-hero__score b { font-size: 1rem; }
.fac-hero__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; font-size: 2.2rem;
  background: rgb(255 255 255 / .22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); backdrop-filter: blur(6px); animation: fac-float 5s ease-in-out infinite; }
.fac-hero--cat { display: flex; align-items: center; gap: 16px; }
.fac-hero--item { text-align: center; padding-block: 26px 20px; }
.fac-hero--item .fac-hero__icon { width: 88px; height: 88px; font-size: 3rem; border-radius: 28px; margin: 0 auto 12px; }
.fac-hero--item .fac-hero__sub { justify-content: center; }
.fac-tag { background: #fff; color: hsl(var(--h) 65% 32%) !important; padding: 3px 12px; border-radius: 999px; font-weight: 700; text-decoration: none !important; }

.fac-searchbox { display: flex; align-items: center; gap: 10px; margin-block-start: 16px; padding: 4px 6px 4px 14px; padding-inline: 14px 6px;
  background: var(--surface); border-radius: 16px; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .35); }
.fac-searchbox input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 12px 4px; min-width: 0; }
.fac-searchbox input:focus-visible { outline: none; }

.fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin-block-end: 10px; }
.fac-grid--in { grid-template-columns: repeat(2, 1fr); }
.fac-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 116px; padding: 16px 8px 12px; border-radius: 22px; color: inherit; text-align: center; text-decoration: none !important;
  background: linear-gradient(160deg, color-mix(in srgb, hsl(var(--h) 80% 60%) 16%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, hsl(var(--h) 70% 50%) 22%, transparent);
  box-shadow: 0 6px 16px -10px hsl(var(--h) 60% 35% / .45);
  transition: transform .18s, box-shadow .18s; animation: fac-up .4s ease-out both; animation-delay: calc(var(--d, 0) * 35ms); }
.fac-tile:hover, .fac-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 26px -12px hsl(var(--h) 65% 40% / .6); }
.fac-tile:active { transform: scale(.96); }
.fac-tile__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.8rem;
  background: linear-gradient(145deg, hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 30) 80% 50%));
  box-shadow: 0 8px 16px -8px hsl(var(--h) 70% 40% / .8), inset 0 1px 0 rgb(255 255 255 / .4); }
.fac-tile__name { font-weight: 700; font-size: .86rem; line-height: 1.25; }
.fac-tile__n { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 11px;
  background: hsl(var(--h) 65% 42%); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.fac-grid--in .fac-tile { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 14px; text-align: start; }
.fac-grid--in .fac-tile__icon { width: 46px; height: 46px; font-size: 1.5rem; border-radius: 15px; }

.fac-top { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; margin-block-end: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fac-top::-webkit-scrollbar { display: none; }
.fac-topcard { flex: none; width: 138px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 10px; border-radius: 20px; color: inherit; text-decoration: none !important; background: var(--surface);
  border: 1px solid color-mix(in srgb, hsl(var(--h) 70% 50%) 25%, transparent); box-shadow: 0 6px 16px -10px hsl(var(--h) 60% 35% / .45); }
.fac-topcard__name { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.fac-topcard__cat { font-size: .76rem; opacity: .7; }

.fac-ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 1.45rem;
  background: linear-gradient(145deg, hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 30) 80% 50%)); box-shadow: 0 6px 12px -8px hsl(var(--h) 70% 40% / .8); }
.fac-list { display: grid; gap: 10px; }
.fac-in { animation: fac-up .35s ease-out both; animation-delay: calc(var(--d, 0) * 40ms); }
.fac-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; color: inherit; text-decoration: none !important;
  background: var(--surface); border: 1px solid color-mix(in srgb, hsl(var(--h) 60% 50%) 14%, transparent);
  box-shadow: 0 4px 12px -10px rgb(0 0 0 / .35); transition: transform .15s, box-shadow .15s; }
.fac-row:hover { transform: translateX(calc(var(--dirx, 1) * -2px)); box-shadow: 0 10px 20px -12px hsl(var(--h) 60% 40% / .5); }
.fac-row .row__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fac-row .row__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac-row__go { font-size: 1.6rem; color: hsl(var(--h) 60% 45%); opacity: .6; }
.fac-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; vertical-align: middle;
  background: #fff4d6; color: #9a6400; white-space: nowrap; }
.fac-pill small { opacity: .7; }
:root[data-theme="dark"] .fac-pill { background: #3a2e10; color: #fbd26a; }

.fac-calls { display: grid; gap: 10px; margin-block-end: 16px; }
.fac-call { display: flex; gap: 10px; animation: fac-up .35s ease-out both; animation-delay: calc(120ms + var(--d, 0) * 60ms); }
.fac-call__tel { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; color: #fff !important; text-decoration: none !important;
  font-weight: 700; background: linear-gradient(135deg, var(--brand-strong), var(--brand)); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--brand) 80%, transparent);
  transition: transform .15s; }
.fac-call__tel:active, .fac-call__wa:active { transform: scale(.97); }
.fac-call__ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / .2); }
.fac-call__tel b { margin-inline-start: auto; font-size: 1.08rem; letter-spacing: .03em; }
.fac-call__wa { flex: none; width: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff !important;
  background: linear-gradient(135deg, #1ebe5a, #25D366); box-shadow: 0 10px 20px -12px #25D366; }

.fac-rate { text-align: center; }
.fac-rate .card__title { margin-block-end: 6px; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; direction: ltr; gap: 6px; }
.rate-stars button { border: 0; background: none; cursor: pointer; padding: 2px; font-size: 2.4rem; line-height: 1; color: var(--border, #d1d5db);
  transition: transform .15s, color .15s; }
.rate-stars button.is-lit, .rate-stars button:hover, .rate-stars button:hover ~ button { color: #f5a524; }
.rate-stars:hover button.is-lit:not(:hover):not(:hover ~ button) { color: var(--border, #d1d5db); }
.rate-stars button:hover { transform: scale(1.18) rotate(-6deg); }
.fac-flash { margin-block-start: 8px; color: #15803d; font-weight: 700; animation: fac-up .3s ease-out both; }

.fac-report summary { cursor: pointer; font-weight: 700; list-style: none; color: #b45309; }
.fac-report summary::-webkit-details-marker { display: none; }
.fac-report[open] summary { margin-block-end: 12px; }
.fac-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }
.fac-reason input { position: absolute; opacity: 0; pointer-events: none; }
.fac-reason span { display: inline-block; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: .9rem;
  border: 1px solid var(--border, #e5e7eb); background: var(--surface); transition: all .15s; }
.fac-reason input:checked + span { background: #fef3c7; border-color: #f59e0b; color: #92400e; font-weight: 700; }
.fac-reason input:focus-visible + span { outline: 2px solid #f59e0b; outline-offset: 2px; }
:root[data-theme="dark"] .fac-reason input:checked + span { background: #3a2a0a; color: #fcd34d; }

@media (prefers-reduced-motion: reduce) {
  .fac-hero, .fac-tile, .fac-in, .fac-call, .fac-hero__icon, .fac-hero__blob { animation: none !important; }
}
:root[data-theme="dark"] .fac-hero--main { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 38%, #04110f), color-mix(in srgb, var(--brand) 62%, #062a26) 55%, color-mix(in srgb, var(--brand) 55%, #0c4a6e)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fac-hero--main { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 38%, #04110f), color-mix(in srgb, var(--brand) 62%, #062a26) 55%, color-mix(in srgb, var(--brand) 55%, #0c4a6e)); } }

/* ---------- Home quick tiles ---------- */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-block: 4px 16px; }
.quick__tile {
  display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; text-decoration: none; font-weight: 700;
  color: hsl(var(--h) 60% 22%); background: linear-gradient(135deg, hsl(var(--h) 75% 92%), hsl(calc(var(--h) + 30) 70% 86%));
  box-shadow: 0 4px 14px hsl(var(--h) 50% 40% / .15); transition: transform .15s;
}
.quick__tile:active { transform: scale(.97); }
.quick__icon { font-size: 1.6rem; }
[data-theme="dark"] .quick__tile { color: hsl(var(--h) 70% 88%); background: linear-gradient(135deg, hsl(var(--h) 35% 22%), hsl(calc(var(--h) + 30) 30% 18%)); }

/* ---------- Schedules ---------- */
.sch-tabs { display: flex; gap: 8px; overflow-x: auto; margin-block-end: 12px; }
.sch-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: var(--text); font-weight: 600; }
.sch-tab.is-on { background: var(--brand); color: #fff; border-color: transparent; }
.sch-live { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.25); font-weight: 700; animation: sch-pulse 2s infinite; }
@keyframes sch-pulse { 50% { opacity: .7; } }
.sch-week { display: grid; gap: 10px; }
.sch-day { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px;
  animation: fac-up .35s both; animation-delay: calc(var(--d) * 40ms); }
.sch-day.is-today { border: 2px solid var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.sch-day__name { font-weight: 800; margin-block-end: 8px; display: flex; align-items: center; gap: 8px; }
.sch-today { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: #fff; }
.sch-none { color: var(--text-muted); font-size: .9rem; }
.sch-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-slot { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: hsl(var(--h) 70% 94%); border-inline-start: 4px solid hsl(var(--h) 60% 45%); }
.sch-slot__time { font-weight: 700; font-size: .92rem; }
.sch-slot__lbl { font-size: .82rem; color: hsl(var(--h) 55% 30%); font-weight: 600; }
.sch-slot.is-now { outline: 2px solid hsl(var(--h) 60% 45%); box-shadow: 0 0 0 4px hsl(var(--h) 60% 45% / .2); }
[data-theme="dark"] .sch-slot { background: hsl(var(--h) 30% 20%); }
[data-theme="dark"] .sch-slot__lbl { color: hsl(var(--h) 60% 80%); }
.sch-daypick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sch-daypick label { display: inline-flex; cursor: pointer; }
.sch-daypick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sch-daypick span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .9rem; }
.sch-daypick input:checked + span { background: var(--brand); color: #fff; border-color: transparent; }
.sch-daypick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sch-adminslots { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.sch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; margin: 0;
  background: hsl(var(--h) 70% 93%); font-size: .85rem; }
[data-theme="dark"] .sch-chip { background: hsl(var(--h) 30% 22%); }
.sch-chip button { border: 0; background: rgba(0,0,0,.08); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; color: inherit; padding: 0; }
.field__hint { font-size: .82rem; color: var(--text-muted); margin-block-start: 4px; }

/* ---------- Documents (bylaws) ---------- */
.doc-body { line-height: 1.9; }
.doc-body h2 { font-size: 1.2rem; margin: 18px 0 8px; color: var(--brand); }
.doc-body h3 { font-size: 1.05rem; margin: 14px 0 6px; }
.doc-body p { margin: 0 0 10px; }
.doc-body ul, .doc-body ol { margin: 0 0 12px; padding-inline-start: 22px; }
.doc-body li { margin-block-end: 4px; }

/* ---------- Court booking ---------- */
.bk { border: 2px solid hsl(140 50% 45% / .35); }
.bk-sub { font-size: .85rem; color: var(--text-muted); margin-block: 8px; }
.bk-dates { display: flex; gap: 8px; overflow-x: auto; padding-block: 4px; }
.bk-date { flex: 0 0 auto; min-width: 58px; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; color: var(--text); }
.bk-date small { font-size: .72rem; color: var(--text-muted); }
.bk-date b { font-size: 1.2rem; }
.bk-date.is-on { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.bk-date.is-on small { color: inherit; opacity: .85; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.bk-slot-form { margin: 0; }
.bk-slot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px;
  font: inherit; font-weight: 700; border: 1px solid var(--border); }
.bk-slot small { font-weight: 600; font-size: .75rem; }
.bk-slot.is-free { background: hsl(140 60% 94%); border-color: hsl(140 45% 70%); color: hsl(140 55% 22%); cursor: pointer; transition: transform .12s; }
.bk-slot.is-free:hover { transform: translateY(-2px); }
.bk-slot.is-free:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bk-slot.is-taken { background: var(--surface-2); color: var(--text-faint); text-decoration: line-through; }
.bk-slot.is-mine { background: var(--brand); color: var(--on-brand); border-color: transparent; }
[data-theme="dark"] .bk-slot.is-free { background: hsl(140 30% 18%); border-color: hsl(140 30% 32%); color: hsl(140 60% 82%); }
.bk-mine { background: var(--brand-soft); border-radius: 12px; padding: 4px 12px 8px; margin-block-end: 10px; }
.bk-mine__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-block: 6px; border-top: 1px solid var(--border); }
.bk-mine__row:first-of-type { border-top: 0; }
.bk-mine__row form { margin: 0; }

/* ---------- Visits (invitations) + staff gate ---------- */
.vis-card { border-inline-start: 4px solid var(--brand); }
.vis-card.is-new { box-shadow: 0 0 0 2px var(--ok); animation: fac-up .4s ease both; }
.vis-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800;
  letter-spacing: .12em; font-size: 1.6rem; direction: ltr; unicode-bidi: isolate; }
.vis-code--big { font-size: 2.6rem; text-align: center; margin: 8px 0; }
.vis-qr { background: #fff; border-radius: 14px; padding: 10px; width: 190px; max-width: 100%; margin: 10px auto; }
.vis-qr svg { display: block; width: 100%; height: auto; }
.vis-qr--big { width: 260px; }
.vis-wa { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; }
.vis-pass { text-align: center; max-width: 420px; margin: 3vh auto 0; }
.vis-pass.is-off { opacity: .8; }
.vis-pass__app { color: var(--text-muted); font-weight: 700; }
.vis-pass__name { font-size: 1.4rem; margin: 6px 0 4px; }
.vis-pass__when { color: var(--text-muted); margin-top: 6px; }
.vis-gate__in { width: 100%; font-size: 2.2rem; text-align: center; letter-spacing: .25em; padding: 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; border-radius: 14px;
  border: 2px solid var(--border); background: var(--surface-2); color: var(--text); margin-bottom: 10px; box-sizing: border-box; }
.vis-gate__in:focus { outline: none; border-color: var(--brand); }
.vis-result { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; margin-bottom: 12px; font-weight: 800; font-size: 1.25rem; }
.vis-result.is-ok  { background: var(--ok-soft); color: var(--ok); }
.vis-result.is-bad { background: var(--danger-soft); color: var(--danger); }
.vis-result__icon { font-size: 2.4rem; line-height: 1; }
.vis-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.vis-dl dt { color: var(--text-muted); }
.vis-dl dd { margin: 0; font-weight: 600; }
.vis-in-btn { font-size: 1.2rem; padding: 16px; background: var(--ok) !important; border-color: var(--ok) !important; }

/* ---------- Family join requests alert (home, owners) ---------- */
.fr-alert { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  border: 2px solid var(--warn); animation: fac-up .4s ease both; }
.fr-alert__icon { font-size: 2rem; }
.fr-alert__txt { flex: 1; }
.fr-alert__go { font-size: 1.6rem; color: var(--text-muted); }
[dir="ltr"] .fr-alert__go { transform: scaleX(-1); }

/* ---------- Home: collapsible sections ---------- */
.hsec-bar { display: flex; justify-content: flex-end; margin: 4px 0 2px; }
.hsec-bar__btn { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.hsec-bar__btn:hover { color: var(--brand); border-color: var(--brand); }
.hsec { margin-block: 10px; }
.hsec__head { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  padding: 8px 4px; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.hsec__head::-webkit-details-marker { display: none; }
.hsec__head:hover .hsec__title { color: var(--brand); }
.hsec__icon { font-size: 1.15rem; }
.hsec__title { font-weight: 800; font-size: 1.02rem; color: var(--text); transition: color .15s; }
.hsec__count { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 800; }
.hsec__chev { margin-inline-start: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; }
.hsec__chev::before { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(2px) rotate(-135deg); transition: transform .3s ease; }
.hsec:not([open]) .hsec__chev::before { transform: translateY(-2px) rotate(45deg); }
.hsec__body { overflow: hidden; }
.hsec__body > :first-child { margin-top: 4px; }
.hsec:not([open]) { border-bottom: 1px dashed var(--border); }
.ann-card--alert { border-inline-start: 4px solid var(--danger); }
.ann-card--event { border-inline-start: 4px solid var(--brand); }
.ann-card--new_store { border-inline-start: 4px solid var(--ok); }

/* ---------- Profile: Telegram link ---------- */
.tg-card__head { display: flex; gap: 12px; align-items: center; }
.tg-card__logo { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #229ed9; color: #fff; }
.tg-card:not(.is-on) .tg-card__logo { background: var(--surface-2); color: #229ed9; border: 1px solid var(--border); }
.tg-card.is-on { border-inline-start: 4px solid #229ed9; }
.tg-steps { margin: 12px 0; padding-inline-start: 22px; color: var(--text-muted); line-height: 1.9; }
.tg-btn { background: #229ed9 !important; border-color: #229ed9 !important; color: #fff !important; }

/* ---------- Multi-unit owners ---------- */
.unit-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; white-space: nowrap; }
.mu-row.is-current { background: color-mix(in srgb, var(--brand, #0f766e) 8%, transparent); }
.tr-list { margin: 0; padding-inline-start: 20px; line-height: 1.9; }

/* ---- admin visits stats + tickets ---- */
.vadm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block-end: 12px; }
.vadm-stats--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .vadm-stats--4 { grid-template-columns: repeat(2, 1fr); } }
.vadm-stats .card { margin: 0; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.vadm-stats b { font-size: 1.5rem; color: var(--brand); }
.vadm-stats span { font-size: .8rem; color: var(--text-muted); }
a.row--link { color: inherit; text-decoration: none; }
a.row--link:hover { background: var(--surface-2); }
.tk-check { display: flex; gap: 8px; align-items: center; margin-block-end: 14px; }
.tk-check input { width: auto; }
.btn--danger-text { color: var(--danger); }
.tk-head--urgent { border-inline-start: 4px solid var(--danger); }
.tk-head__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-block-end: 6px; }
.tk-no { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tk-body { margin-block: 10px; white-space: normal; }
.tk-photo { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-block: 8px; border: 1px solid var(--border); }
.tk-photo--sm { max-height: 160px; }
.tk-rating { margin-block: 6px; }
.tk-tl { list-style: none; margin: 0 0 16px; padding: 0 0 0 0; border-inline-start: 2px solid var(--border); }
.tk-tl__i { position: relative; margin-inline-start: 14px; margin-block-end: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.tk-tl__i::before { content: ""; position: absolute; inset-inline-start: -21px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg); }
.tk-tl__i.is-staff { background: var(--brand-soft); }
.tk-tl__i.is-internal { background: var(--warn-soft); border-style: dashed; }
.tk-tl__i--rating::before { background: var(--ok); }
.tk-tl__i--reopened::before { background: var(--danger); }
.tk-tl__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.tk-tl__what { font-size: .85rem; color: var(--text-muted); margin-block-start: 2px; }
.tk-tl__body { margin-block-start: 6px; }
.tk-stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; margin-block-end: 12px; direction: ltr; }
.tk-stars input { position: absolute; opacity: 0; pointer-events: none; }
.tk-stars label { font-size: 2.2rem; color: var(--border); cursor: pointer; line-height: 1; }
.tk-stars input:checked ~ label, .tk-stars label:hover, .tk-stars label:hover ~ label { color: #f59e0b; }
.tk-reopen { margin-block-start: 12px; }
.tk-reopen summary { cursor: pointer; color: var(--text-muted); }
.tk-staff-tile { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: inherit; text-decoration: none; }
.staff-google { display: flex; gap: 10px; justify-content: center; align-items: center; background: #fff; color: #1f1f1f; border: 1px solid var(--border); }
.staff-google svg { width: 20px; height: 20px; }

/* ---- home: Calma initiatives ---- */
.init { display: grid; gap: 10px; }
.init-card { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radius);
  color: #fff; text-decoration: none; overflow: hidden; box-shadow: var(--shadow); }
.init-card--ai { background: linear-gradient(135deg, #312e81 0%, #6d28d9 55%, #db2777 100%); }
.init-card::after { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); }
.init-card__art { position: relative; flex: 0 0 64px; height: 64px; display: grid; place-items: center; font-size: 2.2rem;
  background: rgba(255,255,255,.14); border-radius: 18px; }
.init-card__art span { position: absolute; bottom: -6px; inset-inline-end: -6px; font-size: 1.3rem; }
.init-card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; z-index: 1; }
.init-card__txt b { font-size: 1rem; line-height: 1.35; }
.init-card__txt > span { font-size: .85rem; opacity: .9; }
.init-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.init-card__tags span { font-size: .72rem; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; }
.init-card__go { margin-inline-start: auto; font-size: 1.3rem; opacity: .85; z-index: 1; }
.init-card:hover { filter: brightness(1.07); }
[dir="rtl"] .init-card__go { transform: scaleX(-1); }

/* ---------- Calma market (OLX) ---------- */
.init-card--mk { background: linear-gradient(135deg, #065f46 0%, #0d9488 55%, #f59e0b 100%); }
[dir="ltr"] .init-card--mk .init-card__go { transform: scaleX(-1); }
[dir="rtl"] .init-card--mk .init-card__go { transform: none; }
.mk-gender { border: 2px dashed var(--brand); }
.mk-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-block-end: 6px; scrollbar-width: none; }
.mk-tab { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px;
  background: hsl(var(--h, 200) 70% 50% / .12); color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.mk-tab small { opacity: .7; }
.mk-tab.is-on { background: hsl(var(--h, 200) 65% 42%); color: #fff; }
.mk-add { margin-block-end: 12px; }
.mk-filter { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-block-end: 12px; }
.mk-filter input, .mk-filter select { min-width: 0; }
@media (max-width: 460px) { .mk-filter { grid-template-columns: 1fr 1fr; } .mk-filter input { grid-column: 1 / -1; } }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.mk-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius, 14px); overflow: hidden;
  color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid var(--border); }
.mk-card.is-dim { opacity: .6; }
.mk-card__img { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); display: grid; place-items: center; }
.mk-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mk-card__ph { font-size: 3rem; opacity: .6; }
.mk-card__flag { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 999px; }
.mk-card__flag--free { background: #059669; inset-inline-start: auto; inset-inline-end: 8px; }
.mk-card__body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.mk-card__price { font-size: .95rem; }
.mk-card__title { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card__meta { font-size: .72rem; opacity: .65; }
.mk-gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-block-end: 12px; border-radius: var(--radius, 14px); }
.mk-gallery a { flex: 0 0 88%; scroll-snap-align: center; }
.mk-gallery a:only-child { flex-basis: 100%; }
.mk-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius, 14px); display: block; }
.mk-detail__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-detail__price { font-size: 1.3rem; color: var(--brand); }
.mk-detail__title { font-size: 1.15rem; margin: 6px 0; }
.mk-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 10px; }
.mk-detail__chips span { font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
.mk-detail__body { white-space: normal; line-height: 1.7; }
.mk-wa { background: #25d366; color: #fff; margin-block-end: 12px; }
.mk-actions .btn { flex: 1 1 40%; }
.mk-report summary { cursor: pointer; font-size: .9rem; opacity: .8; }
.mk-report form { margin-top: 10px; }
.mk-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; }
.mk-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; }
.mk-thumb input { width: auto; }
.mk-person .row__side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mk-person select, .mk-person input[type=date] { width: auto; padding: 4px 6px; }
.fam-birth { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: .8rem; }
.fam-birth input[type=date] { width: auto; padding: 3px 6px; font-size: .8rem; }
.fam-birth__hint { font-size: .72rem; margin-top: 2px; }
.quick__tile, .init-card { position: relative; }
.quick__dot { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: .75rem; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.init-card .quick__dot { top: 8px; inset-inline-end: 8px; }
.mk-dot { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; text-align: center; margin-inline-start: 4px; }
[data-pick-btn] { cursor: pointer; }
[data-pick-btn].is-off { opacity: .4; pointer-events: none; }

/* 🆘 emergency */
.quick__tile--sos { background: #d61f1f !important; color: #fff !important; border-color: #b01616 !important; }
.quick__tile--sos .quick__icon { background: rgba(255,255,255,.2) !important; }
.sos-staff-tile { background: #d61f1f; color: #fff; font-weight: 800; }
.sos-form__intro { margin: 0 0 14px; line-height: 1.7; }
.sos-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sos-kind input { position: absolute; opacity: 0; pointer-events: none; }
.sos-kind span { display: flex; align-items: center; gap: 8px; padding: 12px; border: 2px solid var(--border);
  border-radius: 14px; font-weight: 700; cursor: pointer; min-height: 52px; }
.sos-kind i { font-style: normal; font-size: 1.4rem; }
.sos-kind input:checked + span { border-color: #d61f1f; background: rgba(214,31,31,.1); }
.sos-kind input:focus-visible + span { outline: 3px solid #d61f1f; }
.sos-sure { display: flex; gap: 10px; align-items: center; margin: 12px 0; font-weight: 700; }
.sos-sure input { width: 22px; height: 22px; }
.sos-send { background: #d61f1f !important; border-color: #d61f1f !important; color: #fff !important;
  font-size: 1.2rem; padding: 16px; font-weight: 800; }
.sos-denied { font-weight: 700; line-height: 1.7; }
.sos-item { border-inline-start: 5px solid #d61f1f; }
.sos-item--resolved, .sos-item--false_alarm { border-inline-start-color: var(--border); opacity: .85; }
.sos-item.is-focus { box-shadow: 0 0 0 3px rgba(214,31,31,.35); }
.sos-item__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.sos-item__note { margin: 6px 0 0; }
.sos-search { width: 100%; margin: 0 0 10px; }
.sos-alarm { position: fixed; inset: 0; z-index: 9999; background: rgba(160,0,0,.94); display: flex;
  align-items: center; justify-content: center; padding: 20px; animation: sosflash 1s infinite; }
@keyframes sosflash { 50% { background: rgba(230,20,20,.97); } }
.sos-alarm__box { background: #fff; color: #111; border-radius: 22px; padding: 24px 20px; max-width: 420px;
  width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.sos-alarm__icon { font-size: 4rem; line-height: 1; }
.sos-alarm__head { font-size: 1.5rem; font-weight: 900; color: #c00; margin-top: 6px; }
.sos-alarm__kind { font-size: 1.3rem; font-weight: 800; margin: 6px 0; }
.sos-alarm__who { color: #444; }
.sos-alarm__note { margin-top: 8px; font-weight: 700; }
.sos-alarm__tap, .sos-alarm__ok { display: block; width: 100%; margin-top: 14px; padding: 14px; border-radius: 14px;
  border: 0; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.sos-alarm__tap { background: #ffd400; color: #111; }
.sos-alarm__ok { background: #111; color: #fff; }
.sos-alarm__det { display: inline-block; margin-top: 12px; color: #c00; font-weight: 700; }
.fac-map { margin: 12px 0; }

/* 🚗 rides (مشاوير كالما) */
.init-card--rd { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #f59e0b 100%); }
[dir="ltr"] .init-card--rd .init-card__go { transform: scaleX(-1); }
[dir="rtl"] .init-card--rd .init-card__go { transform: none; }
.rd-list { display: grid; gap: 10px; }
.rd-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--card, #fff); color: inherit; text-decoration: none;
  border: 1px solid var(--line, #e5e7eb); border-inline-start: 5px solid var(--rk, #0d9488); }
.rd-card--offer { --rk: #0d9488; } .rd-card--request { --rk: #f59e0b; } .rd-card--share { --rk: #6366f1; }
.rd-card.is-dim { opacity: .55; }
.rd-card__kind { font-weight: 700; color: var(--rk, #0d9488); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rd-flag { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: #6b7280; color: #fff; }
.rd-card__route { display: grid; gap: 2px; font-weight: 600; }
.rd-card__arrow { opacity: .45; font-size: .8rem; padding-inline-start: 4px; }
.rd-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .85rem; opacity: .85; align-items: center; }
.rd-detail { border-inline-start: 5px solid var(--rk, #0d9488); }
.rd-detail__route { font-size: 1.1rem; margin: 10px 0; }
.rd-kindpick { display: grid; gap: 8px; }
.rd-kindpick label { cursor: pointer; }
.rd-kindpick input { position: absolute; opacity: 0; pointer-events: none; }
.rd-kindpick span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line, #e5e7eb); }
.rd-kindpick small { opacity: .7; font-weight: 400; }
.rd-kindpick input:checked + span { border-color: #0d9488; background: rgba(13, 148, 136, .08); }
.rd-kindpick input:focus-visible + span { outline: 2px solid #0d9488; outline-offset: 2px; }
.rd-safety { font-size: .85rem; }

/* 📞 SOS: call the sender */
.sos-item__call{margin-top:8px}
.sos-alarm__call{display:block;margin:10px auto 0;padding:12px 18px;border-radius:14px;background:#16a34a;color:#fff !important;font-weight:800;font-size:1.25rem;text-decoration:none;max-width:280px}

/* ➕ suggest a service */
.fac-suggest{margin:10px 0 14px}

/* 🎥 CCTV review: camera picker */
.cam-group{margin:14px 0 8px;font-size:1rem;font-weight:800}
.cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.cam-pick{position:relative;display:block;border:2px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--surface)}
.cam-pick input{position:absolute;top:8px;inset-inline-start:8px;width:22px;height:22px;z-index:1}
.cam-pick img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#111}
.cam-pick span{display:block;padding:6px 8px;font-weight:700;font-size:.9rem;text-align:center}
.cam-pick.is-on{border-color:var(--brand);box-shadow:0 0 0 3px rgb(15 118 110 / .2)}
.cam-pick:has(input:disabled){opacity:.45}

.app-promo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #0f766e, #14b8a6); border: 0; }
.app-promo .muted { color: rgba(255,255,255,.88); }
.app-promo__icon { font-size: 2rem; }
.app-promo__txt { flex: 1; }
.app-promo__go { font-size: 1.4rem; }

/* 🆘 direct emergency dial + map link on the alarm */
.sos-dial__head { font-weight: 800; margin-bottom: 8px; }
.sos-dial__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sos-dial__btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; text-decoration: none; text-align: center; font-size: .82rem; }
.sos-dial__btn i { font-style: normal; font-size: 1.5rem; }
.sos-dial__btn b { font-size: 1.05rem; }
.sos-alarm__map { display: block; margin: 8px auto; color: #fff; font-weight: 700; }
.sos-alarm__dial { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0; }
.sos-alarm__dial a { background: #ffffff26; color: #fff; border-radius: 999px; padding: 6px 10px; text-decoration: none; font-size: .85rem; }

/* ⭐ favourites */
.fav-form { display: inline-flex; margin: 0; }
.fav-star { border: 0; background: transparent; cursor: pointer; font-size: 1.55rem; line-height: 1; padding: 6px 8px;
  color: #cbd5e1; transition: transform .2s, color .2s, text-shadow .2s; -webkit-tap-highlight-color: transparent; }
.fav-star.is-on { color: #f59e0b; text-shadow: 0 0 12px #fbbf2499; }
.fav-star.is-pop { animation: favPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes favPop { 0% { transform: scale(.6) rotate(-20deg); } 60% { transform: scale(1.45) rotate(12deg); } 100% { transform: scale(1); } }
.fav-form--hero { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; }
.fav-form--hero .fav-star { background: #ffffffd9; border-radius: 999px; font-size: 1.4rem; box-shadow: 0 4px 14px #0002; }
.fav-spark { position: fixed; z-index: 99999; pointer-events: none; font-size: 15px; transform: translate(-50%, -50%);
  animation: favSpark .75s ease-out forwards; }
@keyframes favSpark { to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.4); opacity: 0; } }
.fav-toast { position: fixed; bottom: 86px; left: 50%; transform: translate(-50%, 20px); opacity: 0; z-index: 99999;
  background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 30px #0004; transition: .3s; }
.fav-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.fav-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fav-strip::-webkit-scrollbar { display: none; }
.fav-chip { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 4px; border-radius: 18px; padding: 6px;
  background: linear-gradient(135deg, hsl(var(--h, 170) 80% 94%), #fff); border: 1px solid hsl(var(--h, 170) 60% 85%);
  box-shadow: 0 4px 14px hsl(var(--h, 170) 50% 50% / .15); animation: favIn .45s both; animation-delay: calc(var(--d, 0) * 55ms); }
.fav-chip__main { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: inherit; padding: 4px 8px; min-width: 76px; max-width: 120px; }
.fav-chip__ic { font-size: 1.7rem; }
.fav-chip__name { font-size: .78rem; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.fav-chip__call { align-self: stretch; display: flex; align-items: center; padding: 0 10px; border-radius: 14px; background: #fff; text-decoration: none; font-size: 1.1rem; }
.fav-person { flex: 0 0 auto; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 78px; text-decoration: none; color: inherit; animation: favIn .45s both; animation-delay: calc(var(--d, 0) * 55ms); }
.fav-person .avatar, .fav-person img { width: 58px !important; height: 58px !important; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #fbbf24; }
.fav-person__name { font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.fav-person__on { position: absolute; top: 46px; inset-inline-end: 12px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
@keyframes favIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.fav-hint { font-size: .82rem; color: #64748b; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 12px; padding: 8px 12px; margin: 4px 0 12px; }
.fav-row { display: flex; align-items: center; }
.fav-row__link { flex: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.fac-save { margin-top: 10px; background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }

/* 🆘📸 child SOS media */
.sosm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.sosm-gallery a { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; background: #0f172a; }
.sosm-gallery img { width: 100%; height: 100%; object-fit: cover; }
.sosm-gallery a span { position: absolute; bottom: 0; inset-inline: 0; background: #0009; color: #fff; font-size: .7rem; padding: 2px 6px; }
.sosm-audio { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.sosm-audio audio { flex: 1; height: 36px; }
.sosm-note { background: #eff6ff; border: 1px solid #bfdbfe; line-height: 1.7; }
.sosm-live { background: #fef2f2; border: 2px solid #dc2626; color: #991b1b; font-weight: 800; animation: sosmPulse 1.4s infinite; }
@keyframes sosmPulse { 50% { box-shadow: 0 0 0 6px #dc262633; } }

/* ---- server-health LED (standalone dot right after the page title) ---- */
.net-led{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;align-self:center;
  background:radial-gradient(circle at 32% 30%, #d1d5db, #9ca3af 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25);
  transition:background .3s, box-shadow .3s;
}
.net-led.ok{
  background:radial-gradient(circle at 32% 30%, #86efac, #22c55e 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 0 6px rgba(34,197,94,.8);
  animation:net-pulse 1.6s ease-out infinite;
}
.net-led.down{
  background:radial-gradient(circle at 32% 30%, #fca5a5, #ef4444 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 6px rgba(239,68,68,.75);
  animation:net-blink 1.1s steps(1,end) infinite;
}
@keyframes net-pulse{
  0%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 0 6px rgba(34,197,94,.8), 0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 0 6px rgba(34,197,94,.8), 0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 0 6px rgba(34,197,94,.8), 0 0 0 0 rgba(34,197,94,0)}
}
@keyframes net-blink{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .net-led.ok,.net-led.down{animation:none} }

/* ---- web-only app download link in the footer ---- */
.app-foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px auto 4px;max-width:420px;padding:11px 16px;
  border-radius:14px;text-decoration:none;font-weight:700;
  color:#0f766e;border:2px dashed currentColor;background:color-mix(in srgb,#14b8a6 10%,transparent);
}
.app-foot:active{transform:scale(.98)}

/* --------------------------------------------------------------------------
   Feature locks (includes/features.php): greyed out + 🔒; tap shows the reason
   -------------------------------------------------------------------------- */
[data-lock] { filter: grayscale(1); opacity: .5; position: relative; }
[data-lock]::after {
  content: "🔒"; position: absolute; inset-block-start: 4px; inset-inline-end: 6px;
  font-size: 15px; filter: none; line-height: 1;
}
.tab[data-lock]::after { inset-block-start: 2px; inset-inline-end: 50%; font-size: 11px; }
.quick__tile--sos[data-lock] { background: #888 !important; border-color: #777 !important; }
.feat-locked { text-align: center; padding-block: 28px; }
.feat-locked__i { font-size: 52px; line-height: 1; margin-block-end: 10px; }
.feat-locked p { white-space: normal; margin: 12px 0 18px; }
.lock-sheet { text-align: center; }
.lock-sheet__i { font-size: 44px; line-height: 1; margin: 4px 0 8px; }
.lock-sheet p { margin: 8px 0 18px; }