/* Logo fonts (the "classic wine" identity): "Mo" in Playfair Display bold, "Lu" in Great Vibes. Served from this app
   so the logo never depends on Google Fonts. Adam and Eve's English names use the same pair. */
@font-face { font-family: "MoLu Mo"; src: url("/static/fonts/playfair-display-700-latin.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "MoLu Amp"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), url("/static/fonts/tinos-italic-latin.woff2") format("woff2"); font-style: italic; font-display: block; }
@font-face { font-family: "MoLu Lu"; src: url("/static/fonts/great-vibes-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MoLu Kufi"; src: url("/static/fonts/reem-kufi-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "MoLu Ruqaa"; src: url("/static/fonts/aref-ruqaa-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: block; }
/* The Arabic logo, built like the Latin one: a steady classic "مو" (Amiri, like Times "Mo") and a flowing script "لو" (Nastaliq, like "Lu"). Subset to these letters only. */
@font-face { font-family: "MoLu Naskh"; src: url("/static/fonts/amiri-700-logo.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "MoLu Nastaliq"; src: url("/static/fonts/gulzar-logo.woff2") format("woff2"); font-display: block; }

/* MoLu. Neutral tokens for the entry screen and admin; [data-theme] switches to the women or men look. */
:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --ink: #1c1917;
  --muted: #6f675e;
  --line: #ebe4d9;
  --brand: #1c1917;
  --brand-ink: #f7f1e6;
  --brand-soft: #f1ebe0;
  --accent: #b08d57;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --ok: #166534;
  --ok-soft: #e7f5ea;
  --warn-soft: #fbf1df;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.05);
  --art-bg: #f1ebe0; --art-glow: #e9e0d1; --art-ink: #1c1917; --art-accent: #b08d57;
  --art-hair: #2b2320; --art-skin: #e9c4ad; --art-cloth: #3b3431; --art-line: #5a3d2b;
  --logo-mo: #3a1c24; --logo-lu: #b0485c;
  --wolf: #3a3431; --wolf-ear: #5c524c; --wolf-muzzle: #c9b79c; --fox: #b0485c; --fox-ear: #7a2a3a; --fox-cheek: #fbf3ee; --eye: #1c1917; --nose: #1c1917;
  color-scheme: light;
}

[data-theme="women"] {
  --bg: #fdf6f4;
  --surface: #ffffff;
  --ink: #3a2328;
  --muted: #8b6f74;
  --line: #f0dcd8;
  --brand: #b76e79;
  --brand-ink: #ffffff;
  --brand-soft: #f8e7e4;
  --accent: #c9a063;
  --warn-soft: #fbefe3;
  --shadow: 0 1px 2px rgb(122 62 74 / 0.05), 0 10px 30px rgb(183 110 121 / 0.10);
  --art-bg: #f8e4e1; --art-glow: #f2d4d0; --art-ink: #8a4b57; --art-accent: #c9a063;
  --art-hair: #5b2f36; --art-skin: #f3d2c1; --art-cloth: #b76e79; --art-line: #7a3e4a;
  color-scheme: light;
}

[data-theme="men"] {
  --bg: #131417;
  --surface: #1c1e22;
  --ink: #f1ece4;
  --muted: #a39d93;
  --line: #2e3137;
  --brand: #c9a063;
  --brand-ink: #16171a;
  --brand-soft: #2b271f;
  --accent: #c9a063;
  --danger: #f87171;
  --danger-soft: #3a1a18;
  --ok: #4ade80;
  --ok-soft: #14301d;
  --warn-soft: #34291a;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35);
  --art-bg: #25282d; --art-glow: #30343b; --art-ink: #d9b57a; --art-accent: #c9a063;
  --art-hair: #0a0a0b; --art-skin: #c89a78; --art-cloth: #3b4250; --art-line: #5a3d2b;
  --logo-mo: #f4e6e0; --logo-lu: #d7798a;
  --wolf: #d8cbb6; --wolf-ear: #a8997f; --wolf-muzzle: #8c7d67; --fox: #c9596c; --fox-ear: #7a2a3a; --fox-cheek: #f6ece4; --eye: #131417; --nose: #131417;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 520px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.logo { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.logo-mark { width: 40px; height: 40px; flex: none; }
.logo-latin { display: inline-flex; align-items: baseline; line-height: 1; }
.logo-latin .mo { font: 700 1.7rem/1 "MoLu Mo", "Playfair Display", Georgia, serif; color: var(--logo-mo); }
.logo-latin .lu { font: 400 2.3rem/1 "MoLu Lu", "Great Vibes", cursive; color: var(--logo-lu); margin-left: -0.08em; transform: translateY(0.12em); }
.logo-ar { font-size: 1.45rem; line-height: 1; padding-inline: 10px 4px; border-inline-start: 1px solid var(--line); display: inline-flex; align-items: baseline; }
.logo-ar .mo { font-family: "MoLu Naskh", "Amiri", serif; font-weight: 700; color: var(--logo-mo); }
.logo-ar .lu { font-family: "MoLu Nastaliq", "Gulzar", serif; font-weight: 400; font-size: 1.35em; color: var(--logo-lu); display: inline-block; margin-inline-start: -0.12em; transform: translateY(0.12em); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: .95rem; }
.nav a.on, .nav a:hover { background: var(--brand-soft); color: var(--brand); }

main { padding: 24px 0 64px; }

/* Cards and grids */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .9rem; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }

/* Forms */
label { display: block; font-weight: 500; margin-bottom: 4px; }
.field { margin-bottom: 14px; }
.hint { font-size: .85rem; color: var(--muted); margin-top: 4px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
input[dir=ltr] { text-align: left; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .inline-fields { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600;
  padding: 10px 18px; min-height: 44px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--brand); color: var(--brand-ink);
  text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn.small { padding: 4px 12px; min-height: 34px; font-size: .9rem; font-weight: 500; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.block { width: 100%; }
.btn.wa { background: #25d366; color: #0b3d1f; }
form.inline { display: inline; }

.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
.alert.error { background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.warn { background: var(--warn-soft); }

.pill { display: inline-block; font-size: .8rem; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.no_show, .pill.cancelled, .pill.failed { background: var(--danger-soft); color: var(--danger); }
.pill.pending { background: var(--warn-soft); color: var(--accent); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); font-size: .9rem; }
tr:last-child td { border-bottom: 0; }

/* Appointment list */
.appt { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.appt:last-child { border-bottom: 0; }
.appt .time { font-weight: 700; font-variant-numeric: tabular-nums; }
.appt .who { min-width: 0; }
.appt .who b { display: block; }
.appt .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.appt.cancelled .who, .appt.cancelled .time { text-decoration: line-through; opacity: .6; }
@media (max-width: 560px) {
  .appt { grid-template-columns: 64px 1fr; }
  .appt .acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Public booking page */
.hero-biz { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--ink))); color: var(--brand-ink); padding: 28px 0 56px; }
.hero-biz h1 { margin-bottom: 4px; }
.hero-biz p { margin: 0; opacity: .9; }
.pull-up { margin-top: -40px; }
.choice { display: block; position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice { text-decoration: none; color: inherit; }
.choice > span {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--surface);
}
.choice input:checked + span { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; background: var(--brand-soft); }
.choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.choices { display: grid; gap: 8px; }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.days a {
  flex: 0 0 auto; scroll-snap-align: start; text-align: center; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-width: 72px; background: var(--surface);
}
.days a small { display: block; }
.days a.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.days a.on small { color: inherit; opacity: .85; }
.days a.closed { opacity: .45; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slots .choice > span { justify-content: center; padding: 10px 6px; font-variant-numeric: tabular-nums; }
.powered { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 24px; }
.powered a { color: var(--muted); }

/* Landing */
.hero { padding: 56px 0 40px; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); max-width: 16em; }
.hero p.lead { font-size: 1.15rem; color: var(--muted); max-width: 36em; }
.features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 32px 0; }
.features .card h3 { color: var(--brand); }
.prices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.price { display: flex; flex-direction: column; }
.price.best { border: 2px solid var(--brand); }
.price .amount { font-size: 2rem; font-weight: 700; }
.price ul { padding-inline-start: 1.2em; margin: 12px 0 20px; flex: 1; }
.price li { margin-bottom: 6px; }
.phone-mock { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 18px; max-width: 320px; box-shadow: var(--shadow); }
.hero-grid { display: grid; gap: 32px; grid-template-columns: 1.3fr 1fr; align-items: center; }
@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr; } }
.bubble { background: #dcf8c6; color: #111; border-radius: 12px 12px 12px 2px; padding: 10px 12px; font-size: .92rem; margin: 8px 0; }
[data-theme="men"] .bubble { background: #1f3b2e; color: #e9fdf6; }

/* Bars (admin sign-ups) */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.bars div { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; }

.hours-row { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.hours-row input { direction: ltr; text-align: center; }
@media (max-width: 480px) { .hours-row { grid-template-columns: 70px 1fr 1fr; } }

footer.site { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: .9rem; }
.nav a.btn, .nav a.btn:hover { background: var(--brand); color: var(--brand-ink); }
.appt .time { white-space: nowrap; }

/* Entry screen: women on the right, men on the left (RTL), each in its own colours. */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.split > a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 88px 20px 40px; text-decoration: none; color: var(--ink); background: var(--bg); overflow: hidden; }
.split > a::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, var(--art-glow), transparent 62%); opacity: .6; transition: opacity .3s; pointer-events: none; }
.split > a:hover::after, .split > a:focus-visible::after { opacity: 1; }
.split .hero-art { width: min(300px, 38vw); height: auto; position: relative; z-index: 1; transition: transform .35s ease; }
.split > a:hover .hero-art { transform: scale(1.04); }
.split h2 { position: relative; z-index: 1; font-size: clamp(1.4rem, 3.6vw, 2.2rem); margin: 0; }
.split p { position: relative; z-index: 1; margin: 0; color: var(--muted); text-align: center; max-width: 22em; }
.split .btn { position: relative; z-index: 1; }
.split-top { position: absolute; top: 0; inset-inline: 0; z-index: 3; display: flex; justify-content: center; padding: 18px 16px; pointer-events: none; }
.split-top > * { pointer-events: auto; background: color-mix(in srgb, #faf7f2 88%, transparent); border-radius: 999px; padding: 6px 16px 6px 8px; box-shadow: var(--shadow); }
.split-tag { position: absolute; bottom: 14px; inset-inline: 0; text-align: center; z-index: 3; font-size: .85rem; color: #8b8378; }
@media (max-width: 640px) {
  .split { grid-template-columns: 1fr; }
  .split > a { min-height: 50vh; padding-top: 80px; }
  .split > .amp + a { padding-top: 60px; }
  .split > a:first-child { padding-bottom: 64px; }
  .split .hero-art { width: min(210px, 56vw); }
}

/* Themed landing hero */
.hero-art-wrap .hero-art { width: 100%; max-width: 340px; height: auto; display: block; margin-inline: auto; }
.eyebrow { display: inline-block; font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: var(--brand); background: var(--brand-soft); padding: 4px 12px; border-radius: 999px; }
.switch-side { font-size: .9rem; color: var(--muted); }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .art { width: 64px; height: 64px; flex: none; }
.feature h3 { color: var(--ink); margin-bottom: 4px; }
.feature p { margin: 0; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.gallery figure { margin: 0; text-align: center; }
.gallery .art { width: 100%; height: auto; display: block; }
.gallery figcaption { font-size: .9rem; margin-top: 6px; color: var(--muted); }

/* Service cards on the booking page */
.svc-list { display: grid; gap: 10px; }
.svc { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.svc:hover, .svc:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.svc .thumb { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; display: block; }
.svc .thumb .art, .svc .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc b { display: block; font-size: 1.05rem; }
.svc small { color: var(--muted); }
.svc .price { font-weight: 700; color: var(--brand); white-space: nowrap; }
.svc-summary { display: flex; gap: 12px; align-items: center; }
.svc-summary .thumb { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: none; }
.svc-summary .thumb .art, .svc-summary .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Owner: service editor with picture */
.svc-edit { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.svc-edit .thumb { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; }
.svc-edit .thumb .art, .svc-edit .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .svc-edit { grid-template-columns: 1fr; } .svc-edit .thumb { width: 80px; height: 80px; } }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.icon-pick label { margin: 0; font-weight: 400; cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; }
.icon-pick .art { width: 100%; height: auto; display: block; border-radius: 14px; outline: 2px solid transparent; outline-offset: 1px; }
.icon-pick input:checked + .art { outline-color: var(--brand); }
.icon-pick input:focus-visible + .art { outline-color: var(--accent); }
details.more > summary { cursor: pointer; color: var(--brand); font-weight: 500; margin: 6px 0; }

input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
[data-theme="men"] .hero-biz { background: linear-gradient(135deg, #202226, #3a3122); color: var(--ink); }
[data-theme="men"] .hero-biz h1 { color: var(--brand); }
.slots .btn { white-space: nowrap; padding: 10px 6px; }
@media (max-width: 640px) { .split-tag { position: static; padding: 18px 16px 24px; margin: 0; background: #faf7f2; } }

/* Stars */
.stars { position: relative; display: inline-block; color: var(--line); letter-spacing: 1px; font-size: .95em; line-height: 1; white-space: nowrap; direction: ltr; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--accent); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: .92rem; }
.rating small { color: var(--muted); }
.rating.new { font-size: .8rem; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 1px 10px; width: fit-content; }
.star-input { border: 0; padding: 0; margin: 0 0 14px; }
.star-input legend { font-weight: 500; margin-bottom: 4px; padding: 0; }
.star-row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-row label { font-size: 2.2rem; line-height: 1; color: var(--line); cursor: pointer; margin: 0; padding: 0 2px; transition: color .15s, transform .15s; }
.star-row input:checked ~ label, .star-row label:hover, .star-row label:hover ~ label { color: var(--accent); }
.star-row input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 6px; }

/* Directory */
.explore-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.explore-bar input[name=q] { flex: 1; min-width: 200px; }
.tabs { display: inline-flex; background: var(--brand-soft); border-radius: 999px; padding: 4px; margin: 4px 0 16px; }
.tabs a { padding: 6px 20px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; }
.tabs a.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
.places { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 400px) { .places { grid-template-columns: 1fr; } }
.place { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.place:hover, .place:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.place .thumb { width: 84px; height: 84px; border-radius: 16px; overflow: hidden; }
.place .thumb .art, .place .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.place-body b { font-size: 1.08rem; }
.place-body small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.place-side small { color: var(--muted); font-size: .78rem; }
.place-side b { color: var(--brand); }
.dist { font-size: .8rem; font-weight: 600; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 10px; margin-bottom: 4px; }
.map { height: 65vh; min-height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.pin span { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 13px/1.2 "IBM Plex Sans Arabic", system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .25); transform: translate(-50%, -100%); }
.leaflet-popup-content { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; direction: rtl; text-align: right; }
.split-tag a { color: inherit; }

/* Reviews on the booking page */
.biz-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: color-mix(in srgb, var(--brand-ink) 18%, transparent); padding: 4px 12px; border-radius: 999px; }
.biz-rating .stars { color: color-mix(in srgb, var(--brand-ink) 40%, transparent); }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }
.review p { margin: 6px 0 0; }
.review small { color: var(--muted); }
.staff-choice .rating { margin-top: 2px; }

/* Salon page */
.biz-top { background: var(--brand); color: var(--brand-ink); }
[data-theme="men"] .biz-top { background: #202226; }
.biz-top .narrow { display: flex; justify-content: space-between; padding-top: 10px; padding-bottom: 0; }
.biz-top .back { color: inherit; opacity: .85; text-decoration: none; font-size: .92rem; }
[data-theme="men"] .biz-top .back { color: var(--ink); }
.hero-biz { padding-top: 14px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badges .biz-rating { margin-top: 0; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-ink) 18%, transparent); }
[data-theme="men"] .badge, [data-theme="men"] .biz-rating { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.badge.open::before, .badge.closed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.badge.closed::before { background: #f87171; }
.badge.offer { background: var(--accent); color: #1c1917; font-weight: 600; }
.biz-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .88rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.hero-biz .chip { background: color-mix(in srgb, var(--brand-ink) 14%, transparent); border-color: color-mix(in srgb, var(--brand-ink) 30%, transparent); color: inherit; }
[data-theme="men"] .hero-biz .chip { background: transparent; border-color: var(--line); }
.hero-biz .chip[data-fav].on { background: var(--brand-ink); color: var(--brand); }
[data-theme="men"] .hero-biz .chip[data-fav].on { background: var(--brand); color: var(--brand-ink); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.offer-card { background: linear-gradient(135deg, var(--brand-soft), var(--surface)); border-color: var(--accent); }
.offer-note { display: block; font-size: .72rem; color: var(--accent); font-weight: 600; text-align: end; }
.slot-offer { border-color: var(--accent); flex-direction: column; gap: 0; }
.slot-offer small { color: var(--accent); font-size: .72rem; line-height: 1; }
.gallery-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.gallery-strip a { flex: 0 0 auto; scroll-snap-align: start; }
.gallery-strip img { width: 150px; height: 150px; object-fit: cover; border-radius: 14px; display: block; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.member { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex: none; }
.review-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.big-rating { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.big-rating b { font-size: 2.4rem; line-height: 1; }
.big-rating small { color: var(--muted); }
.spread { flex: 1; min-width: 180px; }
.spread-row { display: grid; grid-template-columns: 30px 1fr 28px; gap: 8px; align-items: center; font-size: .82rem; }
.spread .bar { height: 7px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; }
.spread .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.hours { width: 100%; }
.hours th, .hours td { padding: 6px 4px; font-size: .92rem; }
.hours th { width: 90px; color: var(--ink); font-weight: 500; }
.hours tr.today th, .hours tr.today td { color: var(--brand); font-weight: 700; }
.loyalty-note { background: var(--brand-soft); border-radius: 12px; padding: 10px 14px; margin: 14px 0 0; }
.stamps { display: flex; flex-wrap: wrap; gap: 8px; }
.stamps span { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--line); }
.stamps span.on { background: var(--accent); border: 2px solid var(--accent); box-shadow: inset 0 0 0 4px var(--surface); }
.bill { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin: 6px 0 14px; }
.bill > div { display: flex; justify-content: space-between; padding: 3px 0; font-size: .95rem; }
.bill .offer-line { color: var(--accent); }
.bill .total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
fieldset.where { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
fieldset.where legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.waitlist { margin-top: 14px; }

/* Directory cards */
.place { position: relative; }
.fav-btn { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--line); font-size: 1rem; line-height: 1; cursor: pointer; z-index: 2; }
.fav-btn.on { color: #e11d48; border-color: #fecdd3; }
.mini-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mini-badges span { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--muted); }
.mini-badges .is-open { color: #15803d; }
[data-theme="men"] .mini-badges .is-open { color: #4ade80; }
.mini-badges .is-closed { color: var(--danger); }
.mini-badges .is-offer { color: #1c1917; background: var(--accent); font-weight: 600; }
.place-side { padding-top: 26px; }
.fav-row .avatar { color: #e11d48; }

.side-for { display: block; font-size: .42em; font-weight: 500; color: var(--muted); margin-top: 4px; letter-spacing: .02em; }

/* "Adam & Eve" on the entry screen. Adam comes first in reading order, so the halves swap with the page direction;
   the portraits are mirrored so the two always face each other across the ampersand. */
.split { position: relative; }
.split .hero-art { transform: scaleX(-1); }
.split > a:hover .hero-art { transform: scale(-1.04, 1.04); }
[dir="ltr"] .split .hero-art { transform: none; }
[dir="ltr"] .split > a:hover .hero-art { transform: scale(1.04); }
/* The medallion is split between the two sides, and each half wears the other side's colour:
   on Adam's (charcoal) half the ring and the "&" are Eve's rose; on Eve's (blush) half they are Adam's brass.
   --amp-dir points from Adam's half to Eve's: right-to-left in Arabic, left-to-right in English, top-down on phones. */
.amp {
  --amp-dir: 270deg; --adam-bg: #16181b; --eve-bg: #fdf6f4; --adam-ink: #c9a063; --eve-ink: #c98691;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 6px solid transparent;
  background: linear-gradient(var(--amp-dir), var(--adam-bg) 50%, var(--eve-bg) 50%) padding-box,
              linear-gradient(var(--amp-dir), var(--eve-ink) 50%, var(--adam-ink) 50%) border-box;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  pointer-events: none;
}
.amp > span {
  font: italic 400 3.6rem/1 "MoLu Amp", "Times New Roman", Times, serif; padding: 6px 2px 0;
  color: var(--adam-ink);
  background: linear-gradient(var(--amp-dir), var(--eve-ink) 50%, #a37a3c 50%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[dir="ltr"] .amp { --amp-dir: 90deg; }
@media (max-width: 640px) {
  .amp, [dir="ltr"] .amp { --amp-dir: 180deg; position: relative; left: auto; top: auto; transform: none; margin: -46px auto; width: 88px; height: 88px; }
  .amp > span { font-size: 3rem; }
}
/* Adam and Eve always in their own lettering: Kufi and Ruqaa in Arabic, Mo's Times and Lu's script in English. */
.w-adam { font-family: "MoLu Kufi", "Reem Kufi", sans-serif; font-weight: 700; }
.w-eve { font-family: "MoLu Ruqaa", "Aref Ruqaa", serif; font-weight: 700; font-size: 1.08em; }
[lang="en"] .w-adam { font-family: "MoLu Mo", "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: .01em; }
[lang="en"] .w-eve { font-family: "MoLu Lu", "Great Vibes", cursive; font-weight: 400; font-size: 1.45em; line-height: .8; }
.split .name-adam { font-size: 1.2em; }
.split .name-eve { font-size: 1.1em; }
[lang="en"] .split .name-adam { font-size: 1.1em; }
[lang="en"] .split .name-eve { font-size: 1.3em; line-height: .9; }

/* Language switch, legal pages, consent */
.lang-switch { font-weight: 600; }
.split-top { gap: 10px; align-items: center; }
.split-top > .lang-pill { padding: 8px 16px; font-weight: 600; color: #1c1917; text-decoration: none; display: inline-flex; align-items: center; }
.legal { max-width: 760px; line-height: 1.85; padding-block: 24px 40px; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 1.15rem; margin: 28px 0 8px; scroll-margin-top: 80px; }
.legal p { margin: 0 0 10px; }
.toc { margin: 18px 0 8px; padding: 14px 18px; }
.toc ol { margin: 0; padding-inline-start: 1.3em; columns: 2 220px; column-gap: 24px; }
.toc li { margin: 2px 0; break-inside: avoid; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--muted); margin: 6px 0 14px; line-height: 1.6; }
.consent input { margin-top: .35em; flex: none; width: auto; }
footer.site nav { flex-wrap: wrap; }
.legal-lang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; color: var(--muted); }

/* Entry screen footer: one line as before, a little larger */
.split-tag { font-size: 1rem; color: #6f675e; }
.split-tag a { font-weight: 600; }
.split-tag .install-btn { font: inherit; font-weight: 600; background: none; color: inherit; padding: 0; border: 0; text-decoration: underline; cursor: pointer; }

/* Install the app */
.install-btn { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; padding: 6px 14px; background: var(--brand); color: var(--brand-ink); }
.install-btn.on-split { background: #1c1917; color: #faf7f2; }
.install-sheet { position: fixed; inset: auto 0 0 0; z-index: 9999; background: #fff; color: #1c1917; border-radius: 20px 20px 0 0; padding: 20px 20px 28px;
  box-shadow: 0 -10px 40px rgb(0 0 0 / .25); max-width: 520px; margin: 0 auto; line-height: 1.8; }
.install-sheet h3 { margin: 0 0 8px; }
.install-sheet ol { margin: 0 0 12px; padding-inline-start: 1.3em; }
.install-sheet button { width: 100%; }
.offline { min-height: 80vh; display: grid; place-items: center; }
.offline .logo { justify-content: center; margin-bottom: 18px; }
@media (min-width: 641px) { .split > a { padding-bottom: 64px; } }

/* Team photos and pages */
.avatar.photo { object-fit: cover; padding: 0; background: var(--line); }
.avatar.big { width: 64px; height: 64px; font-size: 1.5rem; }
.avatar.huge { width: 96px; height: 96px; font-size: 2.2rem; }
.member .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.member small { display: block; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.member-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; margin: 0; }
.member-card small { display: block; color: var(--muted); margin-top: 2px; }
.member-card.off { opacity: .6; }
.svc-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; margin: 8px 0; padding-inline-start: 24px; }
.svc-checks label, .choice-line { font-weight: 400; display: block; }
.sched-day { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sched-row { font-size: .92rem; padding: 3px 0; }
.chip-form .chip button { border: 0; background: none; color: var(--danger); cursor: pointer; font: inherit; padding: 0 0 0 2px; }
.chip.snap { background: #fffc00; color: #111; border-color: #e6e300; }

/* Counts in navigation */
.count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e11d48; color: #fff; font-size: .75rem; font-weight: 700; align-items: center; justify-content: center; }

/* Customer account */
.profile-card .stats, .account-stats { margin-top: 14px; }
.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.account-stats .stat b { font-size: 1.3rem; }
.card.attention { border: 2px solid var(--brand); }
.svc small.asked { display: block; color: var(--brand); font-weight: 600; }
.loyalty-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.loyalty-row:last-child { border-bottom: 0; }

/* Conversations */
.threads { display: grid; gap: 8px; margin-top: 10px; }
.thread { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; background: var(--surface); }
.thread small { grid-column: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .count { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.thread.unread { border-color: var(--brand); }
.thread.unread b { color: var(--brand); }
.chat { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.chat-log { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; min-height: 200px; overflow-y: auto; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { display: block; font-size: .72rem; opacity: .75; margin-top: 2px; }
.msg.mine a { color: inherit; }
.chat-empty { text-align: center; margin: auto; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; }

/* Account type: business or customer */
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.kind { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; transition: border-color .2s, transform .2s; }
.kind:hover { border-color: var(--brand); transform: translateY(-2px); }
.kind.on { border-color: var(--brand); background: var(--brand-soft); }
.kind .kind-art { width: 100%; max-width: 190px; height: auto; margin-bottom: 4px; }
.kind b { font-size: 1.05rem; }
.kind small { color: var(--muted); font-size: .85rem; }
.split-top > a.lang-pill + a.lang-pill { background: #1c1917; color: #faf7f2; }

/* Adam & Eve switch on the account pages */
.side-switch { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; }
.side-switch a { min-width: 120px; text-align: center; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 1.15rem; }
.side-switch a.on { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.side-switch a:first-child.on { background: #16181b; border-color: #16181b; color: #d9b57a; }
.side-switch a:last-child.on { background: #b76e79; border-color: #b76e79; color: #fff; }
/* Illustrations with a detail for one side only (e.g. a beard on Adam's facial) */
.art .for-adam { display: none; }
[data-theme="men"] .art .for-adam { display: inline; }
[data-theme="men"] .art .for-eve { display: none; }

/* Verified businesses */
.verified { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #1d9bf0; color: #fff; font-size: .75em; font-weight: 700; vertical-align: middle; }
.verified-line { font-size: .92rem; margin: 4px 0 8px; }

/* Platform announcements and admin console */
.platform-notice { background: #1c1917; color: #faf7f2; text-align: center; padding: 8px 16px; font-size: .92rem; }
.admin-top .nav { flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.filters a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .88rem; }
.filters a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.actions-grid form { display: flex; flex-direction: column; gap: 6px; }
.pill.suspended { background: var(--danger-soft); color: var(--danger); }

/* Offers, promo codes, replies, reports, tools, poster */
.offers { margin: 6px 0; padding-inline-start: 1.2em; line-height: 1.9; }
.promo-form { margin: 0 0 12px; gap: 8px; }
.owner-reply { margin: 6px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--brand); background: var(--brand-soft); border-radius: 8px; font-size: .92rem; }
.reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.reply-form textarea { flex: 1; min-height: 0; }
.hrow { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; padding: 3px 0; font-size: .92rem; }
.hbar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.tools-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tool { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; margin: 0; transition: border-color .2s, transform .2s; }
.tool:hover { border-color: var(--brand); transform: translateY(-2px); }
.tool small { color: var(--muted); }
.badges.amenities { margin-top: 8px; }
.amenity-filter { margin: 0 0 10px; }
.poster-tools { display: flex; gap: 8px; justify-content: center; padding: 16px; flex-wrap: wrap; }
.poster { width: min(148mm, 100%); margin: 0 auto 24px; padding: 14mm 10mm; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-align: center; box-sizing: border-box; }
.poster .poster-logo .logo { justify-content: center; }
.poster h1 { font-size: 2rem; margin: 14px 0 4px; }
.poster-lead { font-size: 1.3rem; color: var(--brand); font-weight: 700; margin: 0 0 16px; }
.poster-qr svg { width: 70%; height: auto; display: block; margin: 0 auto; }
.poster-scan { font-size: 1.15rem; font-weight: 700; margin: 14px 0 4px; }
.poster-url { font-size: 1rem; color: var(--muted); margin: 0; }
.poster-foot { margin-top: 16px; font-size: .9rem; color: var(--muted); }
@media print {
  .poster-tools, .platform-notice { display: none !important; }
  body { background: #fff !important; }
  .poster { border: 0; border-radius: 0; width: 100%; margin: 0; }
  @page { size: A5; margin: 8mm; }
}

/* Several services in one visit */
.visit-items { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px dashed var(--line); }
.visit-items li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.visit-items .remove { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-inline-start: 8px; border-radius: 50%; border: 1px solid var(--line); color: var(--danger); text-decoration: none; font-size: 13px; }
.add-service { margin-top: 12px; }
.add-service > summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 8px 0; list-style: none; }
.add-service > summary::-webkit-details-marker { display: none; }
.svc-list.compact .svc { grid-template-columns: 52px 1fr auto; padding: 8px; }
.svc-list.compact .thumb { width: 52px; height: 52px; }
tr.due td { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Home: the logo in the middle, language and registration in the corner */
.split-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-content: stretch; }
.split-top > .split-side, .split-top > .split-corner { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.split-top > .logo { grid-column: 2; }
.split-corner { grid-column: 3; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: none; }
.split-corner > .lang-pill { pointer-events: auto; background: color-mix(in srgb, #faf7f2 88%, transparent); border-radius: 999px; box-shadow: var(--shadow); padding: 8px 16px; font-weight: 600; color: #1c1917; text-decoration: none; display: inline-flex; align-items: center; }
.split-corner > a.lang-pill:last-child { background: #1c1917; color: #faf7f2; }
@media (max-width: 560px) {
  .split-top { padding: 12px; gap: 6px; }
  .split-corner { flex-direction: column; align-items: flex-end; gap: 6px; }
  .split-corner > .lang-pill { padding: 6px 12px; font-size: 14px; }
  .split-corner > a.lang-pill:last-child { background: #c9a063; color: #1c1917; }
}

/* Ready-made services list */
.catalog > summary { cursor: pointer; list-style: none; }
.catalog > summary::-webkit-details-marker { display: none; }
.catalog-group { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.catalog-group > legend { font-weight: 700; margin-bottom: 6px; }
.catalog-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; font-weight: 400; cursor: pointer; }
.catalog-item span { flex: 1; }
.catalog-item.done { opacity: .55; cursor: default; }

/* MoLu for groups */
.group-bar { background: #2a2420; color: #faf7f2; padding: 8px 0; font-size: 14px; border-bottom: 2px solid var(--accent); }
.group-bar a { color: inherit; }
.group-bar .wrap { gap: 10px; flex-wrap: wrap; }
.group-bar select { padding: 4px 8px; border-radius: 10px; max-width: 220px; }
.group-bar .btn.small { background: var(--accent); color: #1c1917; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.branch-list { display: grid; gap: 12px; }
.group-link { gap: 10px; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--danger); font-size: .85rem; cursor: pointer; text-decoration: underline; }
.branch .branch-kind { display: block; color: var(--accent); font-weight: 600; }
.side-filter .chip[aria-pressed="true"] { background: var(--accent); color: #1c1917; border-color: var(--accent); }
.plan-pick { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.plan-pick .choice, .plan-pick .choice > span { min-width: 0; }
.plan-pick .choice > span { padding: 10px 8px !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; height: 100%; }
.plan-pick .choice small { white-space: nowrap; font-size: .8rem; }
.plan-pick .choice b { display: block; font-size: .95rem; } .plan-pick legend { font-weight: 600; margin-bottom: 6px; } .plan-pick .hint { grid-column: 1 / -1; }
.plan-opt { position: relative; min-width: 0; }
.plan-info { position: absolute; top: -7px; inset-inline-end: -5px; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  background: var(--accent); color: #1c1917; font-weight: 800; font-size: 12px; line-height: 20px; cursor: pointer; box-shadow: var(--shadow); z-index: 1; }
.plan-pop { max-width: min(340px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--surface); color: inherit; box-shadow: var(--shadow); }
.plan-pop::backdrop { background: rgb(0 0 0 / .35); }
.plan-pop ul { margin: 10px 0 12px; padding-inline-start: 18px; }
.plan-pop li { margin: 4px 0; font-size: .92rem; }
/* The Arabic half of the logo is always right-to-left; on English pages its separator sits on its left (its inline end). */
html[dir="ltr"] .logo-ar { border-inline-start: 0; border-inline-end: 1px solid var(--line); padding-inline: 4px 10px; }
/* Commission calculator */
.compare th, .compare td { text-align: center; } .compare tbody th { text-align: start; font-weight: 500; }
.compare .total-row th, .compare .total-row td { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--line); }
.compare td:last-child { color: var(--brand); font-weight: 700; }
.save { font-size: 1.15rem; margin: 14px 0 6px; }
/* Packages, gift cards, forms */
.lrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lrow:last-of-type { border-bottom: 0; }
.gift-card { text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); }
.gift-amount { font-size: 2.6rem; font-weight: 800; margin: 12px 0 2px; color: var(--brand); }
.gift-msg { font-style: italic; font-size: 1.05rem; }
.answers { margin: 8px 0; } .answers dt { font-weight: 700; margin-top: 8px; } .answers dd { margin: 2px 0 0; }
.pick-list { border: 0; padding: 0; margin: 0 0 12px; } .pick-list legend { font-weight: 700; margin-bottom: 6px; }
.pick-list .choice-line { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-weight: 400; }