/* Base element rules are wrapped in :where() so they never outweigh a component rule (e.g. the header logo's height). */
/* Sareeh — the new website design. One font (Cairo), one icon sprite, no framework.
   Tokens first: the dark set is ready under [data-theme="dark"] (not switched on yet). */

@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand (unchanged) */
  --sr-primary: #6B5CE7; --sr-primary-600: #5848D6; --sr-primary-50: #EFEDFD; --sr-primary-100: #E1DDFB;
  --sr-pink: #E8409A; --sr-pink-50: #FDECF5;
  --sr-navy: #1C1C2E; --sr-navy-700: #2A2A44;
  --sr-star: #FFB000; --sr-star-empty: #D9D9E2;
  --sr-green: #15A36B; --sr-green-50: #E7F7EF; --sr-red: #E5484D; --sr-red-50: #FDECEC; --sr-amber-50: #FFF5DB;

  /* Surfaces & text */
  --sr-bg: #F5F4FC; --sr-surface: #FFFFFF; --sr-surface-2: #F8F7FD; --sr-border: #E7E5F2;
  --sr-text: #1D1B2C; --sr-text-2: #4E4B63; --sr-muted: #625F78;
  --sr-header-bg: var(--sr-navy); --sr-header-text: #FFFFFF;

  /* Scale */
  --sr-space-1: 4px; --sr-space-2: 8px; --sr-space-3: 12px; --sr-space-4: 16px; --sr-space-5: 24px; --sr-space-6: 32px; --sr-space-7: 48px;
  --sr-radius-sm: 10px; --sr-radius: 14px; --sr-radius-lg: 20px; --sr-pill: 999px;
  --sr-shadow: 0 1px 2px rgba(28, 28, 46, .06), 0 6px 18px rgba(28, 28, 46, .06);
  --sr-shadow-lg: 0 12px 32px rgba(28, 28, 46, .12);
  --sr-fs-xs: 12px; --sr-fs-sm: 14px; --sr-fs: 16px; --sr-fs-lg: 18px; --sr-fs-xl: 22px; --sr-fs-2xl: 28px; --sr-fs-3xl: 36px;
  --sr-container: 1200px;
  color-scheme: light;
}
[data-theme="dark"] {
  --sr-bg: #12111C; --sr-surface: #1B1A29; --sr-surface-2: #23223A; --sr-border: #2F2D48;
  --sr-text: #F1F0FA; --sr-text-2: #C9C6DE; --sr-muted: #9A97B3;
  --sr-primary-50: #26224A; --sr-primary-100: #322C63; --sr-pink-50: #3A1A2C; --sr-green-50: #11301F; --sr-red-50: #3A1718; --sr-amber-50: #3A2E10;
  --sr-header-bg: #0E0D17;
  --sr-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; font-size: var(--sr-fs); line-height: 1.65;
  color: var(--sr-text); background: var(--sr-bg); -webkit-font-smoothing: antialiased; }
:where(body:not(.sr-bridge) :is(img, svg, video)) { display: block; max-width: 100%; }
:where(body:not(.sr-bridge) img) { height: auto; }
.sr-header img, .sr-footer img, .sr-drawer img { display: block; max-width: 100%; height: auto; }
a { color: var(--sr-primary); text-decoration: none; }
a:hover { color: var(--sr-primary-600); }
:where(body:not(.sr-bridge) :is(h1, h2, h3, h4)) { margin: 0 0 var(--sr-space-3); line-height: 1.3; font-weight: 800; color: var(--sr-text); }
:where(body:not(.sr-bridge) h1) { font-size: clamp(24px, 4vw, var(--sr-fs-3xl)); } :where(body:not(.sr-bridge) h2) { font-size: clamp(20px, 3vw, var(--sr-fs-2xl)); } :where(body:not(.sr-bridge) h3) { font-size: var(--sr-fs-xl); } :where(body:not(.sr-bridge) h4) { font-size: var(--sr-fs-lg); }
:where(body:not(.sr-bridge) p) { margin: 0 0 var(--sr-space-3); }
.sr-footer h3 { margin: 0 0 var(--sr-space-3); font-weight: 800; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sr-primary-100); outline-offset: 2px; border-radius: 6px; }
.sr-icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; display: inline-block; vertical-align: -0.18em; }
.sr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Layout */
.sr-container { width: 100%; max-width: var(--sr-container); margin-inline: auto; padding-inline: var(--sr-space-4); }
.sr-section { padding-block: var(--sr-space-6); }
.sr-stack > * + * { margin-top: var(--sr-space-4); }
.sr-row { display: flex; align-items: center; gap: var(--sr-space-3); }
.sr-wrap { flex-wrap: wrap; }
.sr-between { justify-content: space-between; }
.sr-grow { flex: 1 1 auto; min-width: 0; }
.sr-grid { display: grid; gap: var(--sr-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sr-two { display: grid; gap: var(--sr-space-5); }
@media (min-width: 992px) { .sr-two { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .sr-sticky { position: sticky; top: 84px; } }
.sr-muted { color: var(--sr-muted); } .sr-small { font-size: var(--sr-fs-sm); } .sr-xs { font-size: var(--sr-fs-xs); }
.sr-bold { font-weight: 800; } .sr-center { text-align: center; }

/* Header */
.sr-header { position: sticky; top: 0; z-index: 50; background: var(--sr-header-bg); color: var(--sr-header-text); }
.sr-header-in { display: flex; align-items: center; gap: var(--sr-space-4); min-height: 64px; }
.sr-logo img { height: 40px; width: auto; }
.sr-nav { display: none; gap: var(--sr-space-1); }
.sr-nav a { color: rgba(255,255,255,.82); padding: 8px 12px; border-radius: var(--sr-radius-sm); font-weight: 600; font-size: var(--sr-fs-sm); }
.sr-nav a:hover, .sr-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.sr-header-search { flex: 1 1 auto; max-width: 420px; display: none; }
.sr-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sr-space-2); }
.sr-header .sr-btn-ghost { color: #fff; border-color: rgba(255,255,255,.25); }
.sr-header .sr-btn-ghost:hover { background: rgba(255,255,255,.08); }
.sr-menu-btn { background: none; border: 0; color: #fff; padding: 8px; border-radius: var(--sr-radius-sm); cursor: pointer; font-size: 22px; }
.sr-drawer { position: fixed; inset: 0; z-index: 100; display: none; }
.sr-drawer[data-open] { display: block; }
.sr-drawer-bg { position: absolute; inset: 0; background: rgba(15, 14, 26, .5); }
.sr-drawer-panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(86vw, 340px); background: var(--sr-surface); color: var(--sr-text); padding: var(--sr-space-4); overflow-y: auto; box-shadow: var(--sr-shadow-lg); }
.sr-drawer-panel a { display: flex; align-items: center; gap: var(--sr-space-3); padding: 12px; border-radius: var(--sr-radius-sm); color: var(--sr-text); font-weight: 600; }
.sr-drawer-panel a:hover { background: var(--sr-surface-2); }
@media (min-width: 992px) { .sr-nav, .sr-header-search { display: flex; } .sr-menu-btn { display: none; } }

/* Buttons */
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sr-space-2); min-height: 44px; padding: 10px 18px; border-radius: var(--sr-radius-sm);
  border: 1.5px solid transparent; font-weight: 700; font-size: var(--sr-fs-sm); line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.sr-btn:active { transform: translateY(1px); }
.sr-btn-primary { background: var(--sr-primary); color: #fff; } .sr-btn-primary:hover { background: var(--sr-primary-600); color: #fff; }
.sr-btn-accent { background: var(--sr-pink); color: #fff; } .sr-btn-accent:hover { filter: brightness(.95); color: #fff; }
.sr-btn-soft { background: var(--sr-primary-50); color: var(--sr-primary); } .sr-btn-soft:hover { background: var(--sr-primary-100); }
.sr-btn-ghost { background: transparent; color: var(--sr-text); border-color: var(--sr-border); } .sr-btn-ghost:hover { background: var(--sr-surface-2); }
.sr-btn-lg { min-height: 52px; padding: 12px 22px; font-size: var(--sr-fs); border-radius: var(--sr-radius); }
.sr-btn-sm { min-height: 36px; padding: 6px 12px; font-size: var(--sr-fs-xs); }
.sr-btn-block { width: 100%; }
.sr-btn[disabled] { opacity: .5; pointer-events: none; }

/* Cards */
.sr-card { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow); }
.sr-card-body { padding: var(--sr-space-5); }
.sr-card-head { padding: var(--sr-space-4) var(--sr-space-5); border-bottom: 1px solid var(--sr-border); display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); }
.sr-card-head h2, .sr-card-head h3 { margin: 0; font-size: var(--sr-fs-lg); }
@media (max-width: 575px) { .sr-card-body { padding: var(--sr-space-4); } }

/* Place card */
.sr-place { display: flex; gap: var(--sr-space-3); padding: var(--sr-space-4); color: var(--sr-text); }
.sr-place:hover { color: var(--sr-text); box-shadow: var(--sr-shadow-lg); }
.sr-place-logo { width: 64px; height: 64px; border-radius: var(--sr-radius); object-fit: cover; background: var(--sr-surface-2); flex: none; }
.sr-place-name { font-weight: 800; font-size: var(--sr-fs); margin: 0; }
.sr-place-meta { font-size: var(--sr-fs-sm); color: var(--sr-muted); }

/* Stars & rating */
.sr-stars { display: inline-flex; gap: 2px; color: var(--sr-star); line-height: 1; }
.sr-stars .sr-icon { width: 18px; height: 18px; } .sr-stars-lg .sr-icon { width: 26px; height: 26px; }
.sr-stars .is-empty { color: var(--sr-star-empty); }
.sr-rating { display: inline-flex; align-items: center; gap: var(--sr-space-2); font-weight: 700; }
.sr-rating-num { font-size: var(--sr-fs-3xl); font-weight: 800; line-height: 1; }
.sr-bars { display: grid; gap: 6px; }
.sr-bar { display: grid; grid-template-columns: 22px 1fr 40px; align-items: center; gap: var(--sr-space-2); font-size: var(--sr-fs-sm); color: var(--sr-text-2); }
.sr-bar-track { height: 8px; border-radius: var(--sr-pill); background: var(--sr-surface-2); overflow: hidden; }
.sr-bar-fill { height: 100%; background: var(--sr-star); border-radius: inherit; }

/* Badges & chips */
.sr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--sr-pill); font-size: var(--sr-fs-xs); font-weight: 700; background: var(--sr-surface-2); color: var(--sr-text-2); white-space: nowrap; }
.sr-badge-verified { background: var(--sr-pink-50); color: var(--sr-pink); }
.sr-badge-visit { background: var(--sr-green-50); color: var(--sr-green); }
.sr-badge-top { background: var(--sr-amber-50); color: #9A6500; }
.sr-badge-primary { background: var(--sr-primary-50); color: var(--sr-primary); }
.sr-badge-open { background: var(--sr-green-50); color: var(--sr-green); } .sr-badge-closed { background: var(--sr-red-50); color: var(--sr-red); }
.sr-chips { display: flex; gap: var(--sr-space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sr-chips::-webkit-scrollbar { display: none; }
.sr-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--sr-pill); border: 1px solid var(--sr-border); background: var(--sr-surface); color: var(--sr-text-2); font-size: var(--sr-fs-sm); font-weight: 600; cursor: pointer; }
.sr-chip[aria-pressed="true"], .sr-chip.is-active { background: var(--sr-primary); border-color: var(--sr-primary); color: #fff; }

/* Review */
.sr-review { padding: var(--sr-space-5); border-bottom: 1px solid var(--sr-border); }
.sr-review:last-child { border-bottom: 0; }
.sr-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--sr-primary-50); color: var(--sr-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.sr-review-title { font-weight: 800; margin: var(--sr-space-2) 0 var(--sr-space-1); }
.sr-review-body { color: var(--sr-text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sr-review-body.is-open { -webkit-line-clamp: unset; display: block; }
.sr-reply { margin-top: var(--sr-space-3); padding: var(--sr-space-3) var(--sr-space-4); background: var(--sr-surface-2); border-radius: var(--sr-radius); border-inline-start: 0; font-size: var(--sr-fs-sm); }

/* Forms */
.sr-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--sr-border); border-radius: var(--sr-radius-sm); background: var(--sr-surface); color: var(--sr-text); }
.sr-input:focus { outline: none; border-color: var(--sr-primary); box-shadow: 0 0 0 4px var(--sr-primary-50); }
.sr-search { position: relative; }
.sr-search .sr-input { padding-inline-start: 44px; border-radius: var(--sr-pill); }
.sr-search .sr-icon { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--sr-muted); }
.sr-label { display: block; font-weight: 700; font-size: var(--sr-fs-sm); margin-bottom: 6px; }

/* Tabs */
.sr-tabs { display: flex; gap: var(--sr-space-1); border-bottom: 1px solid var(--sr-border); overflow-x: auto; scrollbar-width: none; }
.sr-tab { padding: 12px 16px; font-weight: 700; color: var(--sr-muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.sr-tab[aria-current="page"] { color: var(--sr-primary); border-color: var(--sr-primary); }

/* Info list (hours, phone…) */
.sr-info { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-3); }
.sr-info li { display: flex; gap: var(--sr-space-3); align-items: flex-start; }
.sr-info .sr-icon { color: var(--sr-primary); margin-top: 4px; }

/* Bottom action bar (mobile) */
.sr-actionbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; gap: var(--sr-space-2); padding: var(--sr-space-2) var(--sr-space-3) calc(var(--sr-space-2) + env(safe-area-inset-bottom));
  background: var(--sr-surface); border-top: 1px solid var(--sr-border); box-shadow: 0 -6px 18px rgba(28,28,46,.08); }
.sr-actionbar .sr-btn { flex: 1; flex-direction: column; gap: 2px; min-height: 52px; font-size: var(--sr-fs-xs); }
.sr-actionbar .sr-btn .sr-icon { width: 20px; height: 20px; }
@media (min-width: 992px) { .sr-actionbar { display: none; } }
.sr-has-actionbar { padding-bottom: 84px; } @media (min-width: 992px) { .sr-has-actionbar { padding-bottom: 0; } }

/* Hero */
.sr-hero { position: relative; overflow: visible; color: #fff; background: var(--sr-navy); border-radius: 0 0 var(--sr-radius-lg) var(--sr-radius-lg); }
.sr-hero img.sr-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.sr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,28,46,.35), rgba(28,28,46,.85)); }
.sr-hero-in { position: relative; z-index: 1; padding-block: var(--sr-space-7); text-align: center; }
.sr-hero h1 { color: #fff; } .sr-hero p { color: rgba(255,255,255,.85); }
.sr-hero-logo { height: 56px; width: auto; margin: 0 auto var(--sr-space-4); }

/* Footer */
.sr-footer { margin-top: var(--sr-space-7); background: var(--sr-navy); color: #C2C2CF; padding-block: var(--sr-space-6) var(--sr-space-5); font-size: var(--sr-fs-sm); }
.sr-footer a { color: #E2E1EE; } .sr-footer a:hover { color: #fff; }
.sr-footer h3 { color: #fff; font-size: var(--sr-fs); }
.sr-footer-grid { display: grid; gap: var(--sr-space-5); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sr-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sr-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: var(--sr-space-5); padding-top: var(--sr-space-4); display: flex; flex-wrap: wrap; gap: var(--sr-space-3); justify-content: space-between; }

/* Toast (server flash messages) */
.sr-toast { position: fixed; z-index: 200; inset-inline: var(--sr-space-4); bottom: calc(96px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 420px; padding: 12px 16px; border-radius: var(--sr-radius);
  background: var(--sr-navy); color: #fff; box-shadow: var(--sr-shadow-lg); font-weight: 600; }
.sr-toast.is-error { background: var(--sr-red); } .sr-toast.is-success { background: var(--sr-green); }

/* Preview ribbon (admins only) */
.sr-preview { background: var(--sr-pink); color: #fff; font-size: var(--sr-fs-xs); text-align: center; padding: 4px 8px; font-weight: 700; }
.sr-preview a { color: #fff; text-decoration: underline; }

@media (max-width: 575px) { .sr-hide-sm { display: none; } }

/* ── Place card (lists everywhere) ─────────────────────────────── */
.sr-pcard { position: relative; display: flex; flex-direction: column; gap: var(--sr-space-3); padding: var(--sr-space-4); background: var(--sr-surface);
  border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow); color: var(--sr-text); height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.sr-pcard:hover { color: var(--sr-text); transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); border-color: var(--sr-primary-100); }
.sr-pcard-top { display: flex; gap: var(--sr-space-3); align-items: center; min-width: 0; }
.sr-pcard-logo { position: relative; flex: none; }
.sr-pcard-logo img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--sr-surface-2); border: 1px solid var(--sr-border); }
.sr-pcard-tick { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--sr-surface); color: var(--sr-pink); display: grid; place-items: center; }
.sr-pcard-tick .sr-icon { width: 18px; height: 18px; }
.sr-pcard-main { display: grid; gap: 2px; min-width: 0; }
.sr-pcard-name { font-weight: 800; font-size: var(--sr-fs-lg); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pcard-sub { color: var(--sr-muted); font-size: var(--sr-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pcard-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sr-fs-sm); }
.sr-pcard-rating b { font-size: var(--sr-fs); }
.sr-pcard-rating .sr-stars .sr-icon { width: 15px; height: 15px; }
.sr-pcard-text { color: var(--sr-text-2); font-size: var(--sr-fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sr-pcard-tags:empty { display: none; }
.sr-pcard-rank { position: absolute; top: -10px; inset-inline-start: 14px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--sr-pill);
  background: var(--sr-primary); color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(107,92,231,.35); }
.sr-pcard-rank ~ .sr-pcard-logo { margin-top: 6px; }

/* ── Place page ─────────────────────────────────────────────── */
.sr-place-hero { background: var(--sr-surface); border-bottom: 1px solid var(--sr-border); }
.sr-place-cover { height: 160px; background: linear-gradient(135deg, var(--sr-navy), #3B2F86 60%, var(--sr-primary)); position: relative; overflow: hidden; }
.sr-place-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
@media (min-width: 768px) { .sr-place-cover { height: 220px; } }
.sr-place-head { display: flex; gap: var(--sr-space-4); align-items: flex-end; margin-top: -48px; position: relative; padding-bottom: var(--sr-space-4); flex-wrap: wrap; }
.sr-place-logo { width: 104px; height: 104px; border-radius: 24px; border: 4px solid var(--sr-surface); background: var(--sr-surface); object-fit: cover; box-shadow: var(--sr-shadow); flex: none; }
.sr-place-title { flex: 1 1 260px; min-width: 0; padding-top: 52px; }
.sr-place-title h1 { margin: 0 0 4px; font-size: clamp(24px, 4vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sr-place-title h1 .sr-icon { color: var(--sr-pink); width: 26px; height: 26px; }
.sr-place-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--sr-text-2); font-size: var(--sr-fs-sm); }
.sr-place-line .sr-rating b { font-size: var(--sr-fs-lg); color: var(--sr-text); }
.sr-place-actions { display: flex; gap: var(--sr-space-2); flex-wrap: wrap; padding-bottom: var(--sr-space-4); }
.sr-place-actions .sr-btn { flex: 0 0 auto; }
@media (max-width: 575px) { .sr-place-head { justify-content: center; text-align: center; } .sr-place-title { padding-top: 0; flex-basis: 100%; } .sr-place-title h1, .sr-place-line { justify-content: center; }
  .sr-place-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); } .sr-place-actions .sr-btn { flex-direction: column; gap: 2px; font-size: var(--sr-fs-xs); min-height: 60px; padding: 8px 4px; } .sr-place-actions .sr-btn-wide { grid-column: 1 / -1; flex-direction: row; font-size: var(--sr-fs-sm); min-height: 48px; } }
.sr-page { padding-block: var(--sr-space-5); }
.sr-only-mobile { display: block; } .sr-only-desktop { display: none; }
@media (min-width: 992px) { .sr-only-mobile { display: none !important; } .sr-only-desktop { display: block; } }
.sr-card + .sr-card, .sr-block + .sr-block { margin-top: var(--sr-space-4); }
.sr-section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); margin: var(--sr-space-5) 0 var(--sr-space-3); }
.sr-section-title h2 { margin: 0; font-size: var(--sr-fs-xl); }
.sr-alert { padding: var(--sr-space-3) var(--sr-space-4); border-radius: var(--sr-radius); background: var(--sr-primary-50); color: var(--sr-text); margin-bottom: var(--sr-space-4); }
.sr-alert-warn { background: var(--sr-amber-50); }
.sr-ai { background: linear-gradient(135deg, var(--sr-primary-50), var(--sr-surface) 70%); }
.sr-ai-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--sr-pill); background: var(--sr-primary); color: #fff; font-weight: 700; font-size: var(--sr-fs-xs); }
.sr-ai-cols { display: grid; gap: var(--sr-space-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--sr-space-3); }
.sr-ai-col { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: var(--sr-space-3) var(--sr-space-4); }
.sr-ai-col h3 { font-size: var(--sr-fs-sm); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.sr-ai-col ul { margin: 0; padding-inline-start: 18px; font-size: var(--sr-fs-sm); color: var(--sr-text-2); display: grid; gap: 4px; }
.sr-ratingbox { display: grid; gap: var(--sr-space-4); grid-template-columns: auto 1fr; align-items: center; }
.sr-ratingbox .sr-rating-num { font-size: 48px; }
.sr-bar { text-decoration: none; }
a.sr-bar:hover .sr-bar-track { outline: 2px solid var(--sr-primary-100); }
.sr-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--sr-fs-sm); }
.sr-hours li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; color: var(--sr-text-2); }
.sr-hours li.is-today { background: var(--sr-primary-50); color: var(--sr-text); font-weight: 700; }
.sr-hours .is-off { color: var(--sr-red); }
.sr-map { display: block; border-radius: var(--sr-radius); overflow: hidden; margin-top: var(--sr-space-3); border: 1px solid var(--sr-border); }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sr-list > li > a, .sr-list > li > .sr-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); padding: 10px 0; border-bottom: 1px solid var(--sr-border); color: var(--sr-text); }
.sr-list > li:last-child > a, .sr-list > li:last-child > .sr-list-row { border-bottom: 0; }
.sr-socials { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); }
.sr-socials a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--sr-surface-2); color: var(--sr-text-2); }
.sr-socials a:hover { background: var(--sr-primary-50); color: var(--sr-primary); }
.sr-filters { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); align-items: center; margin-bottom: var(--sr-space-3); }
.sr-filters form { flex: 1 1 220px; }
.sr-select { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--sr-border); border-radius: var(--sr-radius-sm); background: var(--sr-surface); color: var(--sr-text); }
.sr-review-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sr-review-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--sr-muted); font-size: var(--sr-fs-xs); align-items: center; }
.sr-review-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: var(--sr-space-3); }
.sr-review-photos img, .sr-review-photos video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--sr-surface-2); }
.sr-review-actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); margin-top: var(--sr-space-3); align-items: center; }
.sr-review-actions .sr-btn { min-height: 36px; padding: 6px 12px; font-size: var(--sr-fs-xs); }
.sr-review-actions .is-on { background: var(--sr-primary-50); color: var(--sr-primary); border-color: var(--sr-primary-100); }
.sr-reply-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.sr-reply-head img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.sr-pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: var(--sr-space-4); }
.sr-pager a, .sr-pager span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--sr-border); background: var(--sr-surface); color: var(--sr-text); font-weight: 700; }
.sr-pager .is-current { background: var(--sr-primary); border-color: var(--sr-primary); color: #fff; }
.sr-pager .is-disabled { opacity: .45; }
.sr-empty { text-align: center; padding: var(--sr-space-6) var(--sr-space-4); }
.sr-empty-emoji { font-size: 40px; line-height: 1; margin-bottom: var(--sr-space-3); }
.sr-loyalty { border-radius: var(--sr-radius-lg); padding: var(--sr-space-5); box-shadow: var(--sr-shadow); }
.sr-loyalty .sr-btn { background: rgba(255,255,255,.95); color: #1D1B2C; }
details.sr-details { border: 1px solid var(--sr-border); border-radius: var(--sr-radius); background: var(--sr-surface); }
details.sr-details > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.sr-details > summary::-webkit-details-marker { display: none; }
details.sr-details[open] > summary .sr-icon { transform: rotate(180deg); }
details.sr-details > div { padding: 0 16px 14px; }
.sr-faq h3 { font-size: var(--sr-fs); margin: var(--sr-space-4) 0 4px; } .sr-faq h3:first-child { margin-top: 0; }
.sr-faq p { color: var(--sr-text-2); }
.sr-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: var(--sr-space-4); background: rgba(15,14,26,.5); }
.sr-modal[data-open] { display: flex; }
.sr-modal-box { background: var(--sr-surface); border-radius: var(--sr-radius-lg); padding: var(--sr-space-5); width: min(100%, 440px); box-shadow: var(--sr-shadow-lg); }

/* Old partials (hotel, salon, company info) shown inside the new page until they are redrawn. */
.sr-legacy .d-flex { display: flex; } .sr-legacy .flex-wrap { flex-wrap: wrap; } .sr-legacy .align-items-center { align-items: center; } .sr-legacy .justify-content-between { justify-content: space-between; }
.sr-legacy .gap-1 { gap: 4px; } .sr-legacy .gap-2 { gap: 8px; } .sr-legacy .gap-3 { gap: 12px; } .sr-legacy .list-unstyled { list-style: none; padding: 0; margin: 0; }
.sr-legacy .text-muted { color: var(--sr-muted); } .sr-legacy .small { font-size: var(--sr-fs-sm); } .sr-legacy .fw-bold, .sr-legacy .fw-semibold { font-weight: 700; }
.sr-legacy .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--sr-pill); font-size: var(--sr-fs-xs); font-weight: 700; background: var(--sr-surface-2); color: var(--sr-text-2); }
.sr-legacy .item-box { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); padding: var(--sr-space-5); box-shadow: var(--sr-shadow); margin-top: var(--sr-space-4); }
.sr-legacy .item-box-title { font-size: var(--sr-fs-lg); font-weight: 800; } .sr-legacy .item-box-header { margin-bottom: var(--sr-space-3); }
.sr-legacy .row { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); } .sr-legacy .col, .sr-legacy [class*="col-"] { flex: 1 1 200px; }
.sr-legacy i.bi, .sr-legacy i.fa, .sr-legacy i.fa-solid, .sr-legacy i.fas { display: none; }
.sr-legacy .mb-0 { margin-bottom: 0; } .sr-legacy .mb-1 { margin-bottom: 4px; } .sr-legacy .mb-2 { margin-bottom: 8px; } .sr-legacy .mb-3 { margin-bottom: 12px; } .sr-legacy .mt-2 { margin-top: 8px; } .sr-legacy .mt-3 { margin-top: 12px; }
.sr-legacy .p-3 { padding: 12px; } .sr-legacy .rounded, .sr-legacy .rounded-3 { border-radius: var(--sr-radius); } .sr-legacy .bg-light { background: var(--sr-surface-2); }

/* Phone: the summary is a teaser; details on demand. The map picture is left to the «الاتجاهات» button. */
@media (max-width: 991px) {
  .sr-ai-overview { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .sr-ai:not(.is-open) .sr-ai-cols, .sr-ai:not(.is-open) .sr-ai-note { display: none; }
  .sr-ai.is-open .sr-ai-overview { -webkit-line-clamp: unset; display: block; }
  .sr-map { display: none; }
}
@media (min-width: 992px) { .sr-ai-more { display: none; } }

/* ── Page head, crumbs, ranked lists ──────────────────────────── */
.sr-pagehead { background: linear-gradient(180deg, var(--sr-surface), var(--sr-bg)); border-bottom: 1px solid var(--sr-border); padding-block: var(--sr-space-5) var(--sr-space-5); }
.sr-pagehead h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-pagehead h1 .sr-icon { color: var(--sr-star); }
.sr-pagehead p { color: var(--sr-text-2); max-width: 760px; margin: 0; }
.sr-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--sr-fs-xs); color: var(--sr-muted); margin-bottom: var(--sr-space-2); }
.sr-crumbs a { color: var(--sr-muted); } .sr-crumbs a:hover { color: var(--sr-primary); }
.sr-score { --p: 0; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--sr-green) calc(var(--p) * 1%), var(--sr-green-50) 0); }
.sr-score span { width: 58px; height: 58px; border-radius: 50%; background: var(--sr-surface); display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.sr-ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-3); }
.sr-rankitem-in { display: flex; gap: var(--sr-space-4); align-items: flex-start; padding: var(--sr-space-4); background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow); color: var(--sr-text); transition: transform .15s, box-shadow .15s, border-color .15s; }
.sr-rankitem-in:hover { color: var(--sr-text); transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); border-color: var(--sr-primary-100); }
.sr-rankitem-in > img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: var(--sr-surface-2); border: 1px solid var(--sr-border); flex: none; }
.sr-rankitem-in > .sr-grow { display: grid; gap: 4px; }
.sr-rankitem-n { min-width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--sr-surface-2); color: var(--sr-text-2); flex: none; }
.sr-rankitem.is-top .sr-rankitem-n { background: var(--sr-primary); color: #fff; }
.sr-rankitem:first-child .sr-rankitem-n { background: var(--sr-star); color: #1D1B2C; }
.sr-rankitem-name { font-size: var(--sr-fs-lg); margin: 0; } .sr-rankitem-name span { font-weight: 400; color: var(--sr-text-2); }
.sr-rankitem-quote { display: block; color: var(--sr-text-2); font-size: var(--sr-fs-sm); padding-inline-start: 10px; border-inline-start: 3px solid var(--sr-primary-100); }
.sr-rankitem-quote::before, .sr-rankitem-quote::after { content: none; }
@media (max-width: 575px) { .sr-rankitem-in { gap: var(--sr-space-3); padding: var(--sr-space-3); } .sr-rankitem-in > img { width: 56px; height: 56px; } .sr-rankitem-n { min-width: 30px; height: 30px; } }
.sr-minilist { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.sr-minilist a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sr-border); color: var(--sr-text); }
.sr-minilist li:last-child a { border-bottom: 0; }
.sr-minilist img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }

/* ── Listing (search, categories) ─────────────────────────────── */
.sr-listing { display: grid; gap: var(--sr-space-5); }
@media (min-width: 992px) { .sr-listing { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } .sr-listing-filters { position: sticky; top: 84px; } }
.sr-listing-filters details.sr-details > summary { gap: 8px; justify-content: flex-start; }
.sr-listing-filters details.sr-details > summary .sr-icon:last-child { margin-inline-start: auto; }
@media (min-width: 992px) { .sr-listing-filters details.sr-details { border: 1px solid var(--sr-border); } }
label.sr-chip { user-select: none; }

/* ── Home ─────────────────────────────────────────────── */
.sr-home-hero .sr-hero-in { padding-block: 56px 48px; }
@media (min-width: 992px) { .sr-home-hero .sr-hero-in { padding-block: 88px 72px; } }
.sr-home-hero h1 { font-size: clamp(26px, 5vw, 44px); max-width: 820px; margin-inline: auto; }
.sr-home-hero p { max-width: 640px; margin-inline: auto; }
.sr-home-search { max-width: 640px; margin: 20px auto 0; }
.sr-home-search .sr-input { min-height: 58px; font-size: var(--sr-fs-lg); box-shadow: var(--sr-shadow-lg); border-color: transparent; }
.sr-home-chips { justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.sr-home-chips .sr-chip { background: rgba(255,255,255,.92); border-color: transparent; color: var(--sr-text); }
.sr-hero-trust { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px !important; padding: 6px 14px; border-radius: var(--sr-pill); background: rgba(255,255,255,.14); color: #fff !important; font-size: var(--sr-fs-sm); font-weight: 600; }
.sr-suggest { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; background: var(--sr-surface); color: var(--sr-text); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-lg); overflow: hidden; text-align: start; }
.sr-suggest a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--sr-text); border-bottom: 1px solid var(--sr-border); }
.sr-suggest a:hover { background: var(--sr-surface-2); }
.sr-suggest img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.sr-suggest span { display: grid; flex: 1; min-width: 0; } .sr-suggest small { color: var(--sr-muted); }
.sr-suggest em { font-style: normal; font-weight: 700; font-size: var(--sr-fs-sm); }
.sr-suggest .sr-suggest-all { justify-content: center; font-weight: 700; color: var(--sr-primary); border-bottom: 0; }
.sr-suggest-empty { padding: 14px; color: var(--sr-muted); font-size: var(--sr-fs-sm); }
.sr-home-sec { padding-top: var(--sr-space-6); }
.sr-home-sec .sr-section-title { margin-top: 0; }
.sr-home-sec h2 { display: flex; align-items: center; gap: 8px; }
.sr-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: var(--sr-space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin; }
.sr-hscroll > * { scroll-snap-align: start; }
@media (min-width: 1200px) { .sr-hscroll { grid-auto-columns: calc((100% - 3 * var(--sr-space-4)) / 4); } }
.sr-nearby-item { position: relative; } .sr-nearby-km { position: absolute; top: 12px; inset-inline-end: 12px; }
.sr-rcard, .sr-acard { display: flex; flex-direction: column; gap: 10px; padding: var(--sr-space-4); background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow); color: var(--sr-text); }
.sr-rcard:hover, .sr-acard:hover { color: var(--sr-text); box-shadow: var(--sr-shadow-lg); }
.sr-rcard-text { color: var(--sr-text-2); font-size: var(--sr-fs-sm); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sr-rcard-place { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sr-border); font-weight: 700; font-size: var(--sr-fs-sm); }
.sr-rcard-place img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.sr-acard { padding: 0; overflow: hidden; } .sr-acard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sr-surface-2); }
.sr-acard-body { display: grid; gap: 4px; padding: 0 var(--sr-space-4) var(--sr-space-4); } .sr-acard-body small { color: var(--sr-muted); }
.sr-cats { display: grid; gap: var(--sr-space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sr-cat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); color: var(--sr-text); font-weight: 700; font-size: var(--sr-fs-sm); }
.sr-cat:hover { border-color: var(--sr-primary-100); color: var(--sr-primary); }
.sr-cat img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: var(--sr-primary-50); padding: 6px; flex: none; }
.sr-faqgrid { display: grid; gap: var(--sr-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sr-why { display: grid; gap: var(--sr-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sr-why-item { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); padding: var(--sr-space-5); box-shadow: var(--sr-shadow); }
.sr-why-item > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sr-primary-50); color: var(--sr-primary); font-size: 22px; margin-bottom: 12px; }
.sr-why-item b { display: block; font-size: var(--sr-fs-lg); margin-bottom: 4px; } .sr-why-item p { color: var(--sr-text-2); margin: 0; font-size: var(--sr-fs-sm); }
.sr-band { display: flex; flex-wrap: wrap; gap: var(--sr-space-4); align-items: center; justify-content: space-between; padding: var(--sr-space-6) var(--sr-space-5); border-radius: var(--sr-radius-lg); background: linear-gradient(135deg, var(--sr-navy), #3B2F86); color: #fff; }
.sr-band h2 { color: #fff; margin-bottom: 4px; } .sr-band p { color: rgba(255,255,255,.82); margin: 0; max-width: 620px; }
.sr-band-light { background: var(--sr-primary-50); color: var(--sr-text); } .sr-band-light h2 { color: var(--sr-text); } .sr-band-light p { color: var(--sr-text-2); }

@media (max-width: 575px) {
  .sr-why { gap: var(--sr-space-2); }
  .sr-why-item { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: var(--sr-space-3) var(--sr-space-4); }
  .sr-why-item > span { grid-row: span 2; width: 44px; height: 44px; margin: 0; font-size: 20px; }
  .sr-why-item b { font-size: var(--sr-fs); margin: 0; }
}

/* ── Header menus, newsletter, cookies ───────────────────────── */
.sr-dd { position: relative; }
.sr-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--sr-radius-sm); color: rgba(255,255,255,.88); font-weight: 600; font-size: var(--sr-fs-sm); }
.sr-dd > summary::-webkit-details-marker { display: none; }
.sr-dd > summary:hover { background: rgba(255,255,255,.08); color: #fff; }
.sr-dd > summary .sr-icon { width: 14px; height: 14px; }
.sr-dd-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; background: var(--sr-surface); color: var(--sr-text); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-lg); padding: 6px; z-index: 60; }
.sr-nav .sr-dd-menu { inset-inline-end: auto; inset-inline-start: 0; }
.sr-dd-menu a, .sr-dd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--sr-text); font-weight: 600; font-size: var(--sr-fs-sm); background: none; border: 0; cursor: pointer; text-align: start; }
.sr-dd-menu a:hover, .sr-dd-menu button:hover { background: var(--sr-surface-2); color: var(--sr-primary); }
.sr-user > summary img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); }
.sr-drawer-btn { display: flex; align-items: center; gap: 12px; padding: 12px; width: 100%; border: 0; background: none; color: var(--sr-red); font-weight: 600; cursor: pointer; border-radius: var(--sr-radius-sm); }
.sr-only-wide { display: none; } @media (min-width: 1200px) { .sr-only-wide { display: inline-flex; } }
.sr-newsletter { margin: 14px 0; } .sr-newsletter h3 { color: #fff; font-size: var(--sr-fs); margin-bottom: 4px; } .sr-newsletter p { margin-bottom: 8px; }
.sr-newsletter-form { display: flex; gap: 8px; } .sr-newsletter-form .sr-input { min-height: 44px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; } .sr-newsletter-form .sr-input::placeholder { color: rgba(255,255,255,.55); }
.sr-footer-social { margin-top: 8px; gap: 8px; } .sr-footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.sr-footer-social a:hover { background: var(--sr-primary); color: #fff; }
.sr-cookies { position: fixed; z-index: 150; inset-inline: 16px; bottom: 16px; max-width: 520px; margin-inline: auto; background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow-lg); padding: 16px; }
.sr-cookies p { font-size: var(--sr-fs-sm); margin-bottom: 10px; }
.sr-ad { margin-block: var(--sr-space-4); display: flex; justify-content: center; }

/* Nothing may widen a page column past the screen (a long <select> option once did). */
.sr-two > *, .sr-listing > *, .sr-grid > *, .sr-hscroll > * { min-width: 0; }
.sr-select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.sr-filters .sr-select { flex: 1 1 140px; }
@media (max-width: 575px) { .sr-footer-grid { grid-template-columns: 1fr 1fr; } .sr-footer-brand { grid-column: 1 / -1; } }

/* [hidden] must win over component display rules (it did not: «اقرأ المزيد» and report forms showed). */
[hidden] { display: none !important; }
/* Arabic stars fill from the right, so a half star is its right half. */
[dir="rtl"] .sr-stars .is-half { transform: scaleX(-1); }

/* Home rows: a clear «عرض الكل», arrows to slide, a last tile to see all */
.sr-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sr-space-3); margin-bottom: var(--sr-space-3); }
.sr-sec-head h2 { margin: 0; }
.sr-sec-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.sr-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sr-border); background: var(--sr-surface); color: var(--sr-text); display: none; place-items: center; cursor: pointer; box-shadow: var(--sr-shadow); }
.sr-arrow:hover { border-color: var(--sr-primary); color: var(--sr-primary); }
.sr-arrow[disabled] { opacity: .35; cursor: default; }
/* Arrows on every screen size: on a phone they make it obvious the row slides. */
.sr-arrow { display: grid; }
@media (max-width: 767px) { .sr-arrow { width: 34px; height: 34px; } .sr-arrow .sr-icon { width: 16px; height: 16px; } .sr-more { padding: 6px 12px; font-size: var(--sr-fs-xs); } .sr-sec-head h2 { font-size: var(--sr-fs-lg); } .sr-sec-tools { gap: 6px; } }
.sr-more { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--sr-pill); background: var(--sr-primary-50); color: var(--sr-primary); font-weight: 700; font-size: var(--sr-fs-sm); white-space: nowrap; }
.sr-more:hover { background: var(--sr-primary); color: #fff; }
.sr-more-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; border: 2px dashed var(--sr-primary-100); border-radius: var(--sr-radius-lg); color: var(--sr-primary); font-weight: 800; background: var(--sr-primary-50); }
.sr-more-tile .sr-icon { width: 28px; height: 28px; }
.sr-more-tile:hover { background: var(--sr-primary); color: #fff; border-color: var(--sr-primary); }
.sr-hscroll { scroll-behavior: smooth; }
.sr-nav a, .sr-dd > summary { white-space: nowrap; }
.sr-founder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--sr-radius-lg); background: linear-gradient(135deg, #FEF3C7, #FED7AA); border: 1.5px dashed #F59E0B; color: #78350F; }
.sr-founder-ic { font-size: 28px; line-height: 1; }

/* The hero's photo and shade keep its rounded corners themselves, so the hero can let the search suggestions overflow. */
.sr-hero img.sr-hero-photo, .sr-hero::after { border-radius: inherit; }
.sr-hero-in { z-index: 5; }
.sr-suggest { z-index: 80; max-height: min(70vh, 460px); overflow-y: auto; }
.sr-suggest a.is-active { background: var(--sr-primary-50); }
.sr-header .sr-suggest { top: calc(100% + 8px); }

/* The mobile menu and popups sit above the app banner (z-index 1029). */
.sr-drawer { z-index: 1100; } .sr-modal { z-index: 1110; } .sr-cookies { z-index: 1090; }

/* ── Hotel / salon / company card ─────────────────────────────── */
.sr-sector { border-radius: var(--sr-radius-lg); overflow: hidden; box-shadow: var(--sr-shadow); background: var(--sr-surface); border: 1px solid var(--sr-border); margin-top: 16px; }
.sr-sector-head { position: relative; color: #fff; padding: 20px 22px; background: linear-gradient(135deg, #312E81, #6366F1 55%, #8B5CF6); overflow: hidden; }
.sr-sector-salon .sr-sector-head { background: linear-gradient(135deg, #831843, #DB2777 55%, #F472B6); }
.sr-sector-company .sr-sector-head { background: linear-gradient(135deg, #0C4A6E, #0284C7 55%, #38BDF8); }
.sr-sector-head::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); }
.sr-sector-eyebrow { font-size: var(--sr-fs-xs); opacity: .9; display: flex; align-items: center; gap: 6px; }
.sr-sector-title { font-size: var(--sr-fs-xl); font-weight: 800; margin: 2px 0 10px; }
.sr-sector-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.sr-sector-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--sr-pill); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); font-size: var(--sr-fs-sm); }
.sr-sector-body { padding: 20px 22px; }
.sr-sector-body h3 { font-size: var(--sr-fs); display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.sr-sector-body h3 .sr-icon { color: var(--sr-primary); }
.sr-sector-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sr-sector-tile { display: flex; gap: 10px; align-items: center; background: var(--sr-primary-50); border-radius: var(--sr-radius); padding: 12px; }
.sr-sector-tile > span { width: 38px; height: 38px; border-radius: 12px; background: var(--sr-surface); color: var(--sr-primary); display: grid; place-items: center; flex: none; }
.sr-sector-tile small { display: block; color: var(--sr-muted); font-size: var(--sr-fs-xs); }
.sr-sector-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.sr-sector-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--sr-border); border-radius: 12px; font-size: var(--sr-fs-sm); }
.sr-sector-item .sr-icon { color: var(--sr-primary); }
.sr-sector-salon .sr-sector-item .sr-icon, .sr-sector-salon h3 .sr-icon { color: #DB2777; }
.sr-sector-company .sr-sector-item .sr-icon, .sr-sector-company h3 .sr-icon { color: #0284C7; }
.sr-sector-aspect { display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: 10px; align-items: center; font-size: var(--sr-fs-sm); margin-bottom: 8px; }
.sr-sector-aspect b { text-align: end; }
@media (max-width: 575px) { .sr-sector-head, .sr-sector-body { padding: 16px; } .sr-sector-aspect { grid-template-columns: 6.5rem 1fr 2.6rem; } }
.sr-sector-tip { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; background: var(--sr-green-50); border: 1px dashed #34D399; border-radius: var(--sr-radius); padding: 12px 14px; font-size: var(--sr-fs-sm); color: #065F46; }
.sr-sector-tip .sr-icon { margin-top: 3px; width: 20px; height: 20px; }

/* ── Categories slider ─────────────────────────────── */
.sr-cat-row { grid-auto-columns: minmax(150px, 1fr); }
@media (min-width: 1200px) { .sr-cat-row { grid-auto-columns: calc((100% - 6 * var(--sr-space-4)) / 7); } }
.sr-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow); color: var(--sr-text); text-align: center; transition: transform .15s, border-color .15s; }
.sr-cat-tile:hover { color: var(--sr-primary); border-color: var(--sr-primary-100); transform: translateY(-2px); }
.sr-cat-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--sr-primary-50); display: grid; place-items: center; }
.sr-cat-ic img { width: 40px; height: 40px; object-fit: contain; }
.sr-cat-tile b { font-size: var(--sr-fs-sm); line-height: 1.4; }
.sr-cat-tile small { color: var(--sr-muted); font-size: var(--sr-fs-xs); }

/* «طالب بها» next to the unclaimed note */
.sr-claim-inline { display: inline-flex; align-items: center; gap: 6px; }
.sr-claim-inline button { border: 0; background: var(--sr-primary); color: #fff; font-weight: 700; font-size: var(--sr-fs-xs); padding: 4px 12px; border-radius: var(--sr-pill); cursor: pointer; font-family: inherit; }
.sr-claim-inline button:hover { background: var(--sr-primary-600); }

.sr-claimed > summary { list-style: none; cursor: pointer; }
.sr-claimed > summary::-webkit-details-marker { display: none; }
.sr-claim-info { inset-inline-end: auto; inset-inline-start: 0; min-width: 280px; max-width: 340px; padding: 14px; white-space: normal; }
.sr-claim-info ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--sr-fs-sm); }
.sr-claim-info li::before { content: "✕"; color: var(--sr-red); margin-inline-end: 8px; font-weight: 800; }
.sr-claim-info li.is-ok::before { content: "✓"; color: var(--sr-green); }
.sr-lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(10,10,20,.92); display: grid; place-items: center; }
.sr-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 12px; }
.sr-lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.sr-lb-x { top: 16px; inset-inline-end: 16px; } .sr-lb-prev { inset-inline-start: 16px; top: 50%; } .sr-lb-next { inset-inline-end: 16px; top: 50%; }
.sr-grid.sr-as-list { grid-template-columns: 1fr; }
.sr-grid.sr-as-list .sr-pcard { flex-direction: row; flex-wrap: wrap; align-items: center; }
.sr-grid.sr-as-list .sr-pcard-top { flex: 1 1 320px; }
.sr-grid.sr-as-list .sr-pcard-text { flex: 2 1 320px; }
.sr-grid.sr-as-list .sr-pcard-tags { margin-top: 0; }
[data-sr-view][aria-pressed="true"] { border-color: var(--sr-primary); color: var(--sr-primary); }

/* Review footnote: how it was written (AI / voice) — small and muted like the old theme */
.sr-composition{display:flex;align-items:center;gap:5px;margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--sr-muted,#6b7280);font-weight:400}
.sr-composition .sr-icon{width:13px;height:13px;flex:none}

/* Place sub-pages: branches, photos, contact (new design) */
.sr-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.sr-subhead h2, .sr-subtitle { font-size: var(--sr-fs-xl); margin: 0; }
.sr-subtitle { margin-bottom: 14px; }
.sr-subsearch { display: flex; gap: 6px; width: min(100%, 340px); }
.sr-subsearch .sr-input { min-height: 44px; }
.sr-subsearch .sr-btn { flex: none; width: 46px; padding: 0; }
.sr-branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.sr-branch { display: flex; flex-direction: column; background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--sr-shadow); transition: transform .15s, box-shadow .15s; }
.sr-branch:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); }
.sr-branch-map { aspect-ratio: 16 / 9; background: var(--sr-surface-2); }
.sr-branch-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-branch-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.sr-branch-body h3 { font-size: var(--sr-fs); margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sr-branch-body h3 .sr-icon { color: var(--sr-primary); }
.sr-branch-body p { margin: 0; color: var(--sr-muted); font-size: var(--sr-fs-sm); line-height: 1.6; }
.sr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sr-gallery-item { margin: 0; background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); overflow: hidden; box-shadow: var(--sr-shadow); }
.sr-gallery-media { display: block; aspect-ratio: 4 / 3; background: var(--sr-surface-2); cursor: zoom-in; }
.sr-gallery-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.sr-gallery-media:hover img { transform: scale(1.03); }
.sr-gallery-item figcaption { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.sr-gallery-item figcaption b { display: block; font-size: var(--sr-fs-sm); }
.sr-gallery-item figcaption form { margin: 0; }
.sr-narrow { max-width: 760px; margin-inline: auto; }
.sr-form { display: grid; gap: 14px; }
.sr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sr-field { display: block; margin: 0; }
.sr-form textarea.sr-input { min-height: 160px; line-height: 1.8; resize: vertical; }
@media (max-width: 640px) { .sr-form-row { grid-template-columns: 1fr; } .sr-subsearch { width: 100%; } }

/* Review pages: compact place header above the (old) review form */
.sr-place-hero.is-compact .sr-place-cover { height: 96px; }
@media (min-width: 768px) { .sr-place-hero.is-compact .sr-place-cover { height: 130px; } }
.sr-place-hero.is-compact .sr-place-head { padding-bottom: var(--sr-space-4); }

/* Error pages (404, 500...) */
.sr-error { padding-block: clamp(40px, 9vw, 96px); text-align: center; }
.sr-error-in { max-width: 640px; }
.sr-error-code { font-size: clamp(72px, 16vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -2px; background: linear-gradient(135deg, var(--sr-primary), var(--sr-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.sr-error h1 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 8px; }
.sr-error p { margin: 0 auto 22px; line-height: 1.8; }
.sr-error-search { display: flex; gap: 8px; max-width: 480px; margin: 0 auto 16px; }
.sr-error-search .sr-btn { flex: none; }
.sr-error-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Listing: a place's latest reviews, folded under its card (same content the old card carried) */
.sr-pcard-cell { display: flex; flex-direction: column; min-width: 0; }
.sr-pcard-cell > .sr-pcard { flex: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sr-pcard-revs { background: var(--sr-surface-2); border: 1px solid var(--sr-border); border-top: 0; border-radius: 0 0 var(--sr-radius-lg) var(--sr-radius-lg); }
.sr-pcard-revs summary { cursor: pointer; padding: 10px 16px; font-size: var(--sr-fs-sm); font-weight: 700; color: var(--sr-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sr-pcard-revs summary::-webkit-details-marker { display: none; }
.sr-pcard-revs summary::after { content: "⌄"; font-size: 16px; line-height: 1; transition: transform .15s; }
.sr-pcard-revs[open] summary::after { transform: rotate(180deg); }
.sr-pcard-rev { display: grid; gap: 4px; padding: 10px 16px; border-top: 1px solid var(--sr-border); color: var(--sr-text-2); font-size: var(--sr-fs-sm); line-height: 1.7; text-decoration: none; }
.sr-pcard-rev:hover { background: var(--sr-surface); }
.sr-pcard-rev-head { display: flex; align-items: center; gap: 8px; color: var(--sr-text); }

/* Home hero over the brand background from the theme settings: lighter veil, the art stays visible */
.sr-hero.is-brand img.sr-hero-photo { opacity: 1; }
.sr-hero.is-brand::after { background: linear-gradient(180deg, rgba(28,28,46,.30), rgba(40,32,110,.55) 55%, rgba(28,28,46,.80)); }

/* Search suggestions: verified tick next to the name */
.sr-suggest b { display: inline-flex; align-items: center; gap: 5px; }
.sr-suggest-tick { width: 15px; height: 15px; flex: none; color: var(--sr-pink); }
/* «صفحة رسمية»: was inheriting the header dropdown's white text (looked empty) */
.sr-claimed > summary.sr-badge { color: #fff; background: var(--sr-green); padding: 4px 12px; font-size: var(--sr-fs-xs); font-weight: 700; border-radius: var(--sr-pill); }
.sr-claimed > summary.sr-badge:hover { background: #0E8A58; color: #fff; }

/* Place names: whole name on up to two lines (branch names were cut), «…» after that */
.sr-pcard-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* Readable contrast (WCAG AA): same colours, a shade deeper for text on tinted backgrounds */
.sr-badge-open, .sr-badge-visit { color: #0E7A50; }
.sr-badge-closed { color: #C4262B; }
.sr-badge-primary, .sr-more, .sr-more-tile { color: var(--sr-primary-600); }
.sr-nearby-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; padding: 18px 20px; border: 1px dashed var(--sr-primary-100); border-radius: var(--sr-radius-lg); background: var(--sr-surface); color: var(--sr-text-2); font-weight: 600; }

/* Nearby: same height before and after the places arrive, so the page below never jumps */
#sr-nearby-list { min-height: 210px; }
#sr-nearby-list > .sr-nearby-ask { align-self: center; min-height: 120px; }

/* Pink buttons: a shade deeper so white text reads well (WCAG AA 4.7:1) */
.sr-btn-accent { background: #D12F86; }
#sr-nearby-list > .sr-nearby-ask { flex: 1 0 100%; width: 100%; }

/* Sliders: the snap point includes the 2px inner padding. Without it the browser nudged every RTL slider by
   2px on load, Chrome took that as a visitor scroll and stopped measuring LCP (Lighthouse NO_LCP). */
.sr-hscroll { scroll-padding-inline: 2px; }

/* ───────── «صريح للأعمال» (new design) ───────── */
.sr-bizlogo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.sr-bizlogo span { font-size: 12px; font-weight: 800; color: #fff; background: var(--sr-pink); padding: 3px 9px; border-radius: var(--sr-pill); }
.sr-biznav { display: none; align-items: center; gap: 4px; }
@media (min-width: 992px) { .sr-biznav { display: flex; } .sr-bizburger { display: none !important; } }
.sr-biznav > a { color: rgba(255,255,255,.88); font-weight: 600; font-size: var(--sr-fs-sm); padding: 8px 12px; border-radius: var(--sr-radius-sm); text-decoration: none; }
.sr-biznav > a:hover, .sr-biznav > a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.sr-bizmenu-panel { width: min(640px, 92vw); display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; }
.sr-bizmenu-panel a { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--sr-radius-sm); color: var(--sr-text); text-decoration: none; }
.sr-bizmenu-panel a:hover { background: var(--sr-primary-50); }
.sr-bizmenu-panel .sr-icon { width: 20px; height: 20px; color: var(--sr-primary); flex: none; margin-top: 2px; }
.sr-bizmenu-panel b { display: block; font-size: var(--sr-fs-sm); }
.sr-bizmenu-panel small { color: var(--sr-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 575px) { .sr-bizlogin { display: none; } }
.sr-biz .sr-drawer nav a { display: flex; align-items: center; gap: 8px; }

.bz-hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(232,64,154,.35), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(107,92,231,.55), transparent 60%), var(--sr-navy); color: #fff; overflow: hidden; }
.bz-hero-in { display: grid; gap: 40px; align-items: center; padding-block: 56px 64px; }
@media (min-width: 992px) { .bz-hero-in { grid-template-columns: 1.05fr .95fr; padding-block: 88px 96px; } }
.bz-hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.25; margin: 14px 0 16px; color: #fff; }
.bz-hero h1 span { background: linear-gradient(90deg, #FFB6DB, #C9C1FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bz-hero p { color: rgba(255,255,255,.82); font-size: var(--sr-fs-lg); line-height: 1.9; max-width: 600px; margin: 0; }
.bz-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: var(--sr-pill); background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.bz-sec .bz-eyebrow, .bz-show .bz-eyebrow { background: var(--sr-primary-50); color: var(--sr-primary-600); border-color: var(--sr-primary-100); }
.bz-eyebrow .sr-icon { width: 15px; height: 15px; }
.bz-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bz-btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.bz-btn-glass:hover { background: rgba(255,255,255,.18); color: #fff; }
.bz-trust { display: flex; align-items: center; gap: 6px; margin-top: 16px !important; font-size: var(--sr-fs-sm) !important; color: rgba(255,255,255,.75) !important; }
.bz-trust .sr-icon { color: #6EE7B7; width: 16px; height: 16px; }
.bz-hero-art { display: flex; justify-content: center; }
.bz-crumbs { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.bz-crumbs a { color: rgba(255,255,255,.85); }

.bz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: -36px; position: relative; z-index: 2; }
.bz-stats > div { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow-lg); padding: 18px; text-align: center; }
.bz-stats b { display: block; font-size: clamp(22px, 4vw, 34px); color: var(--sr-primary-600); }
.bz-stats span { color: var(--sr-text-2); font-size: var(--sr-fs-sm); }
@media (max-width: 575px) { .bz-stats { grid-template-columns: 1fr; margin-top: -28px; } }

.bz-sec { padding-block: 56px 8px; }
.bz-sec-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.bz-sec-head h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 8px; }
.bz-sec-head p { color: var(--sr-text-2); margin: 0; font-size: var(--sr-fs-lg); }
.bz-band { background: var(--sr-surface); border-block: 1px solid var(--sr-border); padding-block: 56px; margin-top: 56px; }
.bz-narrow { max-width: 820px; }
.bz-center { text-align: center; margin-top: 22px; }

.bz-why { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bz-why-item { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); padding: 24px; }
.bz-why-item .sr-icon { width: 30px; height: 30px; color: var(--sr-pink); }
.bz-why-item h3 { font-size: var(--sr-fs-lg); margin: 12px 0 6px; }
.bz-why-item p { margin: 0; color: var(--sr-text-2); line-height: 1.8; }

.bz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: none; }
.bz-steps li { position: relative; background: var(--sr-bg); border-radius: var(--sr-radius-lg); padding: 24px; border: 1px solid var(--sr-border); }
.bz-steps li > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sr-primary); color: #fff; font-size: 18px; }
.bz-steps h3 { font-size: var(--sr-fs-lg); margin: 12px 0 6px; }
.bz-steps p { margin: 0; color: var(--sr-text-2); line-height: 1.8; }

.bz-fgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.bz-fcard { display: flex; flex-direction: column; gap: 8px; background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); padding: 22px; color: var(--sr-text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.bz-fcard:hover { transform: translateY(-3px); box-shadow: var(--sr-shadow-lg); border-color: var(--sr-primary-100); }
.bz-fcard h3 { font-size: var(--sr-fs-lg); margin: 4px 0 0; }
.bz-fcard p { margin: 0; color: var(--sr-text-2); line-height: 1.8; font-size: var(--sr-fs-sm); flex: 1; }
.bz-fcard-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sr-primary-50); color: var(--sr-primary-600); }
.bz-fcard-ic .sr-icon { width: 24px; height: 24px; }
.bz-more { display: inline-flex; align-items: center; gap: 6px; color: var(--sr-primary-600); font-weight: 700; font-size: var(--sr-fs-sm); }
.bz-more .sr-icon { width: 14px; height: 14px; }

.bz-show { display: grid; gap: 32px; align-items: center; padding-block: 56px 0; }
@media (min-width: 992px) { .bz-show { grid-template-columns: 1fr 1fr; gap: 56px; } .bz-show.is-flip .bz-show-art { order: -1; } }
.bz-show h2 { font-size: clamp(24px, 3.2vw, 32px); margin: 12px 0 14px; line-height: 1.4; }
.bz-show-art { display: flex; justify-content: center; background: linear-gradient(135deg, var(--sr-primary-50), #FDECF5); border-radius: 28px; padding: 32px 16px; }
.bz-ticks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.bz-ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.8; color: var(--sr-text-2); }
.bz-ticks li .sr-icon { color: var(--sr-green); width: 18px; height: 18px; flex: none; margin-top: 5px; }
.bz-ticks b { color: var(--sr-text); }
.bz-ticks-sm li { font-size: var(--sr-fs-sm); line-height: 1.6; }
.bz-ticks-sm li .sr-icon { width: 16px; height: 16px; margin-top: 3px; }

.bz-points { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.bz-point { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); padding: 22px; }
.bz-point h3 { font-size: var(--sr-fs-lg); margin: 12px 0 6px; }
.bz-point p { margin: 0; color: var(--sr-text-2); line-height: 1.8; }
.bz-fgrid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.bz-plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; }
.bz-plan { position: relative; display: flex; flex-direction: column; background: var(--sr-surface); border: 1.5px solid var(--sr-border); border-radius: 24px; padding: 26px; }
.bz-plan.is-featured { border-color: var(--sr-primary); box-shadow: 0 16px 40px rgba(107,92,231,.18); }
.bz-plan-badge { position: absolute; top: -12px; inset-inline-start: 24px; background: var(--sr-pink); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: var(--sr-pill); background: #D12F86; }
.bz-plan h3 { font-size: var(--sr-fs-xl); margin: 0 0 10px; }
.bz-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.bz-price b { font-size: 34px; line-height: 1; color: var(--sr-text); }
.bz-price span { color: var(--sr-muted); font-weight: 600; }
.bz-plan .bz-ticks { flex: 1; }
.bz-plan-act { margin: 0; }
.sr-btn-block { width: 100%; }

.bz-compare-wrap { overflow-x: auto; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); background: var(--sr-surface); }
.bz-compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.bz-compare th, .bz-compare td { padding: 12px 14px; border-bottom: 1px solid var(--sr-border); text-align: center; font-size: var(--sr-fs-sm); }
.bz-compare tbody th { text-align: start; font-weight: 600; color: var(--sr-text-2); }
.bz-compare thead th { font-size: var(--sr-fs); font-weight: 800; background: var(--sr-surface-2); }
.bz-compare thead small { display: block; color: var(--sr-muted); font-weight: 600; font-size: 12px; }
.bz-compare .is-featured { background: rgba(107,92,231,.05); }
.bz-yes .sr-icon { color: var(--sr-green); width: 18px; height: 18px; }
.bz-no { color: #B9B6CC; }

.bz-faq { display: grid; gap: 10px; }
.bz-faq details { background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 0 18px; }
.bz-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.bz-faq summary::-webkit-details-marker { display: none; }
.bz-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--sr-primary); }
.bz-faq details[open] summary::after { content: "−"; }
.bz-faq details > div { padding-bottom: 16px; color: var(--sr-text-2); line-height: 1.9; }

.bz-final { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-block: 56px; padding: 32px; border-radius: 28px; color: #fff; background: radial-gradient(600px 300px at 90% 0%, rgba(232,64,154,.45), transparent 60%), var(--sr-navy); }
.bz-final h2 { color: #fff; margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); }
.bz-final p { margin: 0; color: rgba(255,255,255,.8); }
.bz-pagehead { background: var(--sr-navy); color: #fff; padding-block: 48px; text-align: center; }
.bz-pagehead h1 { color: #fff; margin: 0 0 10px; font-size: clamp(28px, 4vw, 40px); }
.bz-pagehead p { margin: 0 auto; max-width: 640px; color: rgba(255,255,255,.8); font-size: var(--sr-fs-lg); }

/* Illustrations (drawn in HTML/CSS, aria-hidden) */
.bz-mock { position: relative; width: min(100%, 440px); direction: rtl; color: var(--sr-text); font-size: 14px; }
.bz-mock p { margin: 0; color: var(--sr-text-2) !important; font-size: 14px !important; line-height: 1.7 !important; }
.bz-card { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 20px 50px rgba(15,14,40,.22); }
.bz-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.bz-ava { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sr-primary-100); color: var(--sr-primary-600); font-weight: 800; }
.bz-stars { color: var(--sr-star); letter-spacing: 1px; }
.bz-chip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--sr-pill); }
.bz-chip-green { background: var(--sr-green-50); color: #0E7A50; }
.bz-mock-reviews .bz-card > .bz-row { justify-content: flex-start; margin-bottom: 10px; }
.bz-mock-reviews .bz-card > .bz-row .bz-chip { margin-inline-start: auto; }
.bz-reply { margin-top: 12px; background: var(--sr-primary-50); border-inline-start: 3px solid var(--sr-primary); border-radius: 12px; padding: 10px 12px; }
.bz-reply b { font-size: 12px; color: var(--sr-primary-600); }
.bz-toast { position: absolute; inset-inline-start: -10px; bottom: -22px; background: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 700; box-shadow: 0 12px 30px rgba(15,14,40,.25); }
.bz-lcard { background: linear-gradient(135deg, #5B2A86, #8E3B8F); color: #fff; border-radius: 22px; padding: 20px; box-shadow: 0 20px 50px rgba(15,14,40,.3); }
.bz-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18); }
.bz-lcard-n { margin-inline-start: auto; font-weight: 800; }
.bz-stamps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 18px 0; }
.bz-stamps i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255,255,255,.45); display: grid; place-items: center; font-style: normal; }
.bz-stamps i.on { background: rgba(255,255,255,.95); border-style: solid; border-color: #fff; }
.bz-stamps i.gift { border-color: #FFD27A; }
.bz-lcard-foot { font-size: 13px; opacity: .9; }
.bz-wallets { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.bz-wallets span { background: #111; color: #fff; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 10px; }
.bz-kpis { justify-content: space-between; text-align: center; }
.bz-kpis small { display: block; color: var(--sr-muted); font-size: 11px; }
.bz-kpis b { font-size: 20px; }
.bz-kpis em { display: block; font-style: normal; color: #0E7A50; font-size: 11px; font-weight: 800; }
.bz-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin-top: 16px; }
.bz-bars span { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--sr-primary), #9D93F2); }
.bz-days { font-size: 10px; color: var(--sr-muted); margin-top: 6px; }
.bz-days span { flex: 1; text-align: center; }
.bz-pill { position: absolute; bottom: -18px; inset-inline-end: 12px; background: #fff; border-radius: var(--sr-pill); padding: 8px 14px; font-size: 12px; font-weight: 700; box-shadow: 0 12px 30px rgba(15,14,40,.22); }
.bz-badge { display: grid; justify-items: center; gap: 4px; width: 190px; margin: 0 auto 18px; padding: 20px 14px; border-radius: 24px; background: linear-gradient(160deg, #1C1C2E, #3B2F86); color: #fff; text-align: center; box-shadow: 0 20px 50px rgba(15,14,40,.3); }
.bz-badge > span { font-size: 34px; }
.bz-badge b { font-size: 20px; }
.bz-badge small { opacity: .8; font-size: 12px; }
.bz-badge em { font-style: normal; font-size: 11px; background: #D12F86; padding: 2px 10px; border-radius: var(--sr-pill); margin-top: 4px; }
.bz-rank { list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(15,14,40,.18); }
.bz-rank li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.bz-rank li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sr-surface-2); font-size: 13px; }
.bz-rank li span { flex: 1; font-weight: 700; }
.bz-rank li em { font-style: normal; color: var(--sr-star); font-weight: 800; }
.bz-rank li.me { background: var(--sr-primary-50); }
.bz-rank li.me b { background: var(--sr-primary); color: #fff; }
.bz-mock-invites { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: center; }
.bz-qr { background: #fff; border-radius: 20px; padding: 16px; text-align: center; box-shadow: 0 20px 50px rgba(15,14,40,.22); display: grid; gap: 6px; justify-items: center; }
.bz-qr-code { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 112px; }
.bz-qr-code i { aspect-ratio: 1; background: #EEE; border-radius: 2px; }
.bz-qr-code i.on { background: var(--sr-navy); }
.bz-qr small { color: var(--sr-muted); font-size: 11px; }
.bz-mini { padding: 14px; display: grid; gap: 6px; }
.bz-map { position: relative; height: 170px; border-radius: 20px; background: linear-gradient(135deg, #E6F0E9, #DCE7F5); margin-bottom: -40px; overflow: hidden; }
.bz-map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(35deg, transparent 0 28px, rgba(255,255,255,.7) 28px 31px), repeating-linear-gradient(-55deg, transparent 0 40px, rgba(255,255,255,.6) 40px 43px); }
.bz-map i { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #D12F86; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.bz-list { position: relative; margin-inline: 18px; display: grid; gap: 6px; }
.bz-list .bz-row { padding: 8px 4px; border-bottom: 1px solid var(--sr-border); }
.bz-list .bz-row:last-child { border-bottom: 0; }
.bz-list em { font-style: normal; color: var(--sr-star); font-weight: 800; }
.bz-browser { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(15,14,40,.22); }
.bz-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--sr-surface-2); }
.bz-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9D7E8; }
.bz-browser-bar span { margin-inline-start: 10px; font-size: 11px; color: var(--sr-muted); background: #fff; padding: 3px 10px; border-radius: 8px; direction: ltr; }
.bz-browser-body { position: relative; padding: 18px; display: grid; gap: 10px; min-height: 180px; }
.bz-ph { height: 12px; border-radius: 6px; background: #ECEBF5; }
.bz-ph-lg { height: 60px; } .bz-ph-sm { width: 60%; }
.bz-widget { position: absolute; bottom: 16px; inset-inline-start: 16px; background: #fff; border: 1px solid var(--sr-border); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 26px rgba(15,14,40,.18); }
.bz-widget b { font-size: 22px; }
.bz-widget small { color: var(--sr-muted); font-size: 11px; }
.bz-code { display: block; margin-top: 12px; direction: ltr; text-align: left; background: var(--sr-navy); color: #C9C1FF; padding: 10px 14px; border-radius: 12px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bz-phone { width: 230px; margin: 0 auto; border-radius: 36px; padding: 10px; background: #15142B; box-shadow: 0 24px 60px rgba(15,14,40,.35); position: relative; }
.bz-phone-notch { width: 80px; height: 18px; background: #15142B; border-radius: 0 0 12px 12px; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2; }
.bz-phone-screen { background: var(--sr-bg); border-radius: 28px; padding: 34px 12px 16px; display: grid; gap: 10px; min-height: 380px; align-content: start; }
.bz-phone-title { font-size: 15px; }
.bz-kpis-sm { background: #fff; border-radius: 14px; padding: 10px; }
.bz-btn { justify-self: start; background: var(--sr-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: var(--sr-pill); }
@media (max-width: 575px) { .bz-mock-invites { grid-template-columns: 1fr; } .bz-toast { inset-inline-start: 0; } }
.bz-pay { display: block; text-align: center; color: var(--sr-muted); font-size: 12px; margin-top: 8px; }
.bz-plan-act .sr-btn .sr-icon { width: 18px; height: 18px; }
.bz-plan .bz-ticks { align-content: start; }
/* Business «الميزات» menu: text wraps inside its column (it inherited the header nav nowrap and spilled out) */
.sr-bizmenu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-bizmenu-panel a { white-space: normal; align-items: flex-start; }
.sr-bizmenu-panel a > span { min-width: 0; }
.sr-bizmenu-panel small { display: block; white-space: normal; }

/* Loyalty chip in the place header: looks tappable, and the card it opens lands in view and glows once. */
.sr-badge-lty { background: var(--sr-primary); color: #fff; padding: 4px 12px; box-shadow: 0 4px 14px rgba(107,92,231,.35); text-decoration: none; animation: sr-lty-ring 2.2s ease-out .8s 3; }
.sr-badge-lty:hover { background: var(--sr-primary-600); color: #fff; }
.sr-badge-lty .sr-badge-go { display: inline-block; margin-inline-start: 2px; animation: sr-lty-bob 1.4s ease-in-out infinite; }
#loyalty { scroll-margin-top: 96px; }
.sr-loyalty.is-flash { animation: sr-lty-flash 1.5s ease-out; }
@keyframes sr-lty-ring { 0% { box-shadow: 0 4px 14px rgba(107,92,231,.35), 0 0 0 0 rgba(107,92,231,.55); } 70% { box-shadow: 0 4px 14px rgba(107,92,231,.35), 0 0 0 10px rgba(107,92,231,0); } 100% { box-shadow: 0 4px 14px rgba(107,92,231,.35), 0 0 0 0 rgba(107,92,231,0); } }
@keyframes sr-lty-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@keyframes sr-lty-flash { 0% { transform: scale(1); box-shadow: var(--sr-shadow), 0 0 0 0 rgba(107,92,231,.7); } 25% { transform: scale(1.025); } 60% { box-shadow: var(--sr-shadow), 0 0 0 16px rgba(107,92,231,0); } 100% { transform: scale(1); box-shadow: var(--sr-shadow); } }
@media (prefers-reduced-motion: reduce) { .sr-badge-lty, .sr-badge-lty .sr-badge-go, .sr-loyalty.is-flash { animation: none; } }
/* Small phones: the three header chips (top rated, loyalty, official page) fit on one line. */
@media (max-width: 420px) {
  .sr-place-line:has(.sr-badge) { column-gap: 6px; }
  .sr-place-line > .sr-badge, .sr-place-line > .sr-claimed > summary.sr-badge { padding-inline: 8px; gap: 3px; }
  .sr-badge-lty .sr-badge-go { margin-inline-start: 0; }
}