/* =========================================================================
   Arzaq / أرزاق — "Light modern Damascene"
   Ivory limestone, deep green and gold; eight-point star lattice and arch motifs. RTL first, logical properties.
   ========================================================================= */

:root {
  --font-display: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", Georgia, serif;
  --font-ui: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* surfaces */
  --bg: #FBF8F0;
  --bg-alt: #F3ECDB;
  --surface: #FFFEFA;
  --line: #E2D7BC;
  --line-strong: #8B7F61;
  /* text */
  --text: #14231F;
  --text-2: #46544F;
  --muted: #5B6862;
  /* brand */
  --accent: #06332E;
  --accent-2: #7A5F22;
  --gold: #BEA77B;
  --gold-soft: #F3EAD2;
  --green-tint: #E4EEE8;
  --btn-bg: #06332E;
  --btn-fg: #FBF8F0;
  --btn-bg-h: #0B4A42;
  /* deep green panels (CTA, footer, safety lead) */
  --panel: #06332E;
  --panel-2: #0B4A42;
  --panel-deep: #042622;
  --on-panel: #F4EFE0;
  --on-panel-2: #C9D6CF;
  --panel-gold: #D2BB8A;
  --brand-gold: #98782A;   /* wordmark gold, dark enough to read on the ivory header */
  --star-fill: #06332E;
  --star-ink: #D2BB8A;
  --lattice-op: .5;

  --focus: #0B4A42;
  --danger: #A32A1D;
  --danger-bg: #FBEAE6;
  --ok: #1B6B3A;
  --shadow: 0 1px 2px rgba(20, 35, 31, .06), 0 10px 26px -14px rgba(20, 35, 31, .22);
  --shadow-lg: 0 2px 4px rgba(20, 35, 31, .06), 0 24px 44px -24px rgba(20, 35, 31, .34);
  --radius: 16px;
  --fx: -1; /* -1 in RTL, 1 in LTR: used to mirror corner ornaments and arrows */
  color-scheme: light;

  /* ---- motifs, as masks so they take the theme colour ---- */
  --m-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2L64.06 16.06L83.94 16.06L83.94 35.94L98 50L83.94 64.06L83.94 83.94L64.06 83.94L50 98L35.94 83.94L16.06 83.94L16.06 64.06L2 50L16.06 35.94L16.06 16.06L35.94 16.06Z'/%3E%3C/svg%3E");
  --m-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M32 1L41.1 10.1L53.9 10.1L53.9 22.9L63 32L53.9 41.1L53.9 53.9L41.1 53.9L32 63L22.9 53.9L10.1 53.9L10.1 41.1L1 32L10.1 22.9L10.1 10.1L22.9 10.1Z'/%3E%3Cpath d='M36.8 20.5L38.8 25.2L43.5 27.2L41.6 32L43.5 36.8L38.8 38.8L36.8 43.5L32 41.6L27.2 43.5L25.2 38.8L20.5 36.8L22.4 32L20.5 27.2L25.2 25.2L27.2 20.5L32 22.4Z'/%3E%3C/g%3E%3C/svg%3E");
  --m-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M1.5 31V10.5L10.5 1.5H31' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10.5 6l4.5 4.5-4.5 4.5-4.5-4.5z'/%3E%3C/svg%3E");
  --m-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[dir="ltr"] { --fx: 1; }

/* ---------------- dark: same family, lit from within ---------------- */
:root[data-theme="dark"] {
  --bg: #0B2D21; --bg-alt: #0F3A2A; --surface: #15483A; --line: #2B6A55; --line-strong: #86AE9C;
  --text: #F2ECDB; --text-2: #CFCBB8; --muted: #B2C8BC;
  --accent: #D2BB8A; --accent-2: #D7C190; --gold: #BEA77B; --gold-soft: #1F5242; --green-tint: #17503E;
  --btn-bg: #D2BB8A; --btn-fg: #06332E; --btn-bg-h: #E2CE9F;
  --panel: #0F6046; --panel-2: #157858; --panel-deep: #082B20;
  --brand-gold: #D2BB8A; --star-fill: #0F6046; --lattice-op: .26;
  --focus: #D2BB8A; --danger: #FF9A8A; --danger-bg: #3A1E1A; --ok: #7FD39B;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 44px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(en) body, html[lang="en"] body { line-height: 1.6; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.25; color: var(--accent); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--gold); color: #06332E; }
section[id], [id="main"] { scroll-margin-top: 92px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-panel { --focus: #D2BB8A; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .container { width: min(1200px, 100% - 64px); } }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: -120px; inset-inline-start: 8px; z-index: 100; padding: 10px 18px;
  background: var(--btn-bg); color: var(--btn-fg); border-radius: 10px; font-weight: 600;
}
.skip-link:focus { inset-block-start: 8px; }

.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow { transform: scaleX(var(--fx)); }
bdi.amount { unicode-bidi: isolate; }

/* ---------------- ornaments ---------------- */
/* the plain thin gold line under the header / page bars / footer top (class name kept from the old patterned band) */
.ablaq { display: block; height: 1px; background: var(--gold); }
.ablaq-edge { width: 100%; }

.divider { display: flex; align-items: center; gap: 14px; padding-block: 0; background: var(--bg); }
.divider .ablaq { flex: 1; min-width: 0; }
.divider span { color: var(--accent-2); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.ic-google { width: 18px; height: 18px; flex: none; }
/* Sign in with Apple, per Apple's HIG: solid black with white logo + text (white with black in dark mode), same size and radius
   as the Google button beside it. The Apple logo is a fixed glyph, never mirrored in RTL. */
.oauth-btns { display: grid; gap: 12px; }
.btn-apple { background: #000; color: #fff; border-color: #000; }
.btn-apple:hover { background: #1f1f1f; border-color: #1f1f1f; }
:root[data-theme="dark"] .btn-apple { background: #fff; color: #000; border-color: #fff; }
:root[data-theme="dark"] .btn-apple:hover { background: #e9e9e9; border-color: #e9e9e9; }
.ic-apple { width: 16px; height: 19px; flex: none; margin-block-start: -3px; }
.medal { width: 46px; height: 46px; flex: none; margin-block: 6px; }
.medal .m1 { fill: var(--star-fill); stroke: var(--gold); stroke-width: 2.4; }
.medal .m2 { fill: var(--panel-gold); stroke: none; }
.medal .m3 { fill: var(--star-fill); }

/* corner brackets (top-start and bottom-end) */
.orn { position: relative; --oi: 8px; --os: 26px; }
.orn::before, .orn::after {
  content: ""; position: absolute; width: var(--os); height: var(--os); background: var(--gold);
  -webkit-mask: var(--m-corner) center / contain no-repeat; mask: var(--m-corner) center / contain no-repeat;
  pointer-events: none; z-index: 2; transition: background-color .25s;
}
.orn::before { inset-block-start: var(--oi); inset-inline-start: var(--oi); transform: scaleX(var(--fx)); }
.orn::after { inset-block-end: var(--oi); inset-inline-end: var(--oi); transform: scale(calc(var(--fx) * -1), -1); }

.star-icon { position: relative; display: grid; place-items: center; width: 62px; height: 62px; color: var(--star-ink); flex: none; }
.star-icon .frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--star-fill); stroke: var(--gold); stroke-width: 2.4; transition: transform .5s ease; }
.star-icon .i { position: relative; width: 27px; height: 27px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-2); font-weight: 600; font-size: .95rem; }
.eyebrow::before {
  content: ""; width: 15px; height: 15px; background: var(--gold);
  -webkit-mask: var(--m-star) center / contain no-repeat; mask: var(--m-star) center / contain no-repeat;
}
.eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--gold); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 12px; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-align: center; transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.btn-primary:hover { background: var(--btn-bg-h); box-shadow: inset 0 0 0 1px var(--gold), 0 8px 18px -10px rgba(6, 51, 46, .6); }
.btn-gold { background: var(--panel-gold); color: #06332E; }
.btn-gold:hover { background: #E4D1A2; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--gold-soft); border-color: var(--gold); }
.btn-light { color: var(--on-panel); border-color: rgba(244, 239, 224, .55); background: transparent; }
.btn-light:hover { background: rgba(244, 239, 224, .1); border-color: var(--on-panel); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .94rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); transition: background-color .2s, border-color .2s;
}
.icon-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.icon-btn.txt { width: auto; min-width: 48px; padding: 0 12px; font-weight: 700; font-size: .9rem; letter-spacing: .03em; }
/* the button shows the chosen mode: auto (half disc), light (sun) or dark (moon) */
.theme-btn .ic-sun, .theme-btn .ic-moon { display: none; }
:root[data-theme-mode="light"] .theme-btn .ic-sun, :root[data-theme-mode="dark"] .theme-btn .ic-moon { display: block; }
:root[data-theme-mode="light"] .theme-btn .ic-auto, :root[data-theme-mode="dark"] .theme-btn .ic-auto { display: none; }

/* ---------------- header ---------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(20, 35, 31, .5); }
.header-row { display: flex; align-items: center; gap: 14px; min-height: 72px; position: relative; }
.brand { display: inline-flex; align-items: center; flex: none; }
/* the wordmark is just the Arabic word, in gold, in every language */
.brand-ar { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--brand-gold); line-height: 1.1; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav ul { display: flex; gap: 2px; }
.main-nav ul a {
  display: block; padding: 8px 15px; border-radius: 999px; font-weight: 500; color: var(--text-2);
  transition: color .2s, background-color .2s; position: relative;
}
.main-nav ul a:hover { color: var(--accent); background: var(--gold-soft); }
.main-nav ul a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.main-nav ul a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 50% auto; inset-block-end: 1px; width: 6px; height: 6px; margin-inline-start: -3px; background: var(--gold);
  -webkit-mask: var(--m-star) center / contain no-repeat; mask: var(--m-star) center / contain no-repeat;
}
.nav-extra { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.link-login { padding: 8px 12px; font-weight: 600; color: var(--accent); border-radius: 10px; }
.link-login:hover { background: var(--gold-soft); }
.menu-btn { display: none; }

@media (max-width: 960px) {
  .menu-btn { display: inline-grid; }
  .link-login { display: none; }
  .header-actions { margin-inline-start: auto; }
  .main-nav {
    position: absolute; inset-inline: -16px; inset-block-start: 100%; display: none; flex-direction: column; gap: 6px;
    padding: 12px 16px 20px; background: var(--bg); border-block-end: 1px solid var(--line); box-shadow: 0 24px 30px -24px rgba(0, 0, 0, .4);
  }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav ul a { padding: 12px 14px; border-radius: 12px; }
  .main-nav ul a[aria-current="page"]::after { display: none; }
  .main-nav ul a[aria-current="page"] { background: var(--gold-soft); }
  .nav-extra { display: flex; gap: 10px; margin-block-start: 10px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
  .nav-extra .btn { flex: 1; }
}
@media (max-width: 640px) {
  .header-actions .btn-post { display: none; }
  .brand-ar { font-size: 1.85rem; }
}

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(90% 100% at 80% 20%, #000 20%, transparent 78%);
  mask-image: radial-gradient(90% 100% at 80% 20%, #000 20%, transparent 78%);
}
.lattice {
  position: absolute; inset: 0; background: var(--gold); opacity: var(--lattice-op);
  -webkit-mask: var(--m-lattice) 0 0 / 64px 64px; mask: var(--m-lattice) 0 0 / 64px 64px;
}
.hero-grid > * { min-width: 0; }
.hero-grid { position: relative; display: grid; gap: 28px; align-items: center; padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 14px; border: 1px solid var(--gold); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--accent-2); font-weight: 600; font-size: .95rem; margin-block-end: 18px;
}
.kicker svg { width: 14px; height: 14px; fill: var(--gold); }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); letter-spacing: -.01em; line-height: 1.15; }
html[lang="en"] .hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.1; }
.hero-sub { margin-block: 14px 26px; max-width: 34em; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--text-2); }

.search-card {
  --oi: 6px; --os: 22px; background: var(--surface); border: 1px solid var(--gold); border-radius: 20px; padding: 14px;
  box-shadow: var(--shadow-lg); max-width: 640px;
}
.sf-main {
  display: flex; align-items: center; gap: 8px; padding: 5px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px;
}
.sf-main:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.sf-icon { color: var(--accent-2); padding-inline: 10px 2px; }
.sf-icon .i { width: 22px; height: 22px; }
.sf-main input { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 44px; font-size: 1.05rem; outline: 0; }
.sf-main input::placeholder { color: var(--muted); opacity: 1; }
.sf-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 12px; }
.select-wrap { position: relative; display: grid; gap: 4px; }
.select-wrap label { font-size: .85rem; font-weight: 600; color: var(--text-2); padding-inline: 4px; }
.select-wrap::after {
  content: ""; position: absolute; inset-inline-end: 14px; inset-block-end: 16px; width: 14px; height: 14px; background: var(--accent-2); pointer-events: none;
  -webkit-mask: var(--m-chev) center / contain no-repeat; mask: var(--m-chev) center / contain no-repeat;
}
select, .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="number"], .field textarea {
  width: 100%; min-height: 46px; padding: 0 14px; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px;
}
select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer; }
select option { background: var(--surface); color: var(--text); }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block-start: 16px; max-width: 640px; }
.popular-label { font-size: .9rem; font-weight: 600; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line-strong); color: var(--text-2); font-weight: 500; font-size: .94rem; transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.chip-soft { min-height: 36px; padding: 0 14px; border-color: var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: .9rem; }

.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-block-start: 28px; padding-block-start: 20px; border-block-start: 1px solid var(--line); max-width: 640px; }
.stats li { display: flex; align-items: baseline; gap: 8px; }
.stats strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--accent); line-height: 1; }
.stats span { color: var(--text-2); font-size: .95rem; }

.hero-art { display: none; justify-self: center; width: min(100%, 400px); }
.hero-art svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 28px 30px rgba(6, 51, 46, .22)); }
.a-open { fill: #06332E; }
.a-line { fill: none; stroke: var(--gold); stroke-width: 2; }
.a-fin { fill: var(--gold); }
.arch-ar { font-family: var(--font-display); font-weight: 700; font-size: 44px; fill: #D2BB8A; }
.arch-en { font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: .5em; fill: #BEA77B; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; }
  .hero-art { display: block; }
}

/* ---------------- sections ---------------- */
.section { padding-block: clamp(52px, 7vw, 96px); }
.section-alt { background: var(--bg-alt); }
.section-head { display: grid; gap: 10px; margin-block-end: clamp(26px, 4vw, 42px); }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
.section-sub { color: var(--text-2); max-width: 46em; font-size: 1.05rem; }

/* categories */
.cat-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1020px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-grid > li { display: flex; }
.cat-tile {
  --oi: 9px; --os: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 26px 20px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cat-tile .star-icon { margin-block-end: 10px; }
.cat-tile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.cat-tile:hover .frame { transform: rotate(22.5deg); transform-origin: 50% 50%; }
.cat-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent); line-height: 1.3; }
.cat-count { color: var(--muted); font-size: .9rem; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-block-start: 10px; }
.cat-subs li { font-size: .78rem; padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--text-2); }
@media (max-width: 480px) { .cat-subs li:nth-child(n+3) { display: none; } .cat-tile { padding-inline: 16px; } .cat-name { font-size: 1.3rem; } }

/* featured listings */
.feat-tools { display: grid; gap: 12px; margin-block-end: 24px; }
.chip-scroll { flex-wrap: nowrap; overflow-x: auto; padding-block: 4px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: thin; }
.chip-scroll li { flex: none; }
@media (min-width: 720px) { .chip-scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.result-count { color: var(--muted); font-size: .92rem; }

/* listing lists: one wide card per row (phone), two columns on big screens */
.card-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.card-grid > li { display: flex; min-width: 0; }

/* the wide listing card (same as the app's FeedCard): text on the start side, photo flush on the end side */
.card {
  position: relative; display: flex; width: 100%; min-height: 148px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.card.is-sold { opacity: .72; }
.card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; }
.card-title {
  font-family: var(--font-ui); font-weight: 800; font-size: 1rem; line-height: 1.45; color: var(--accent); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card:not(.has-photo):not(.is-preview) .card-title { padding-inline-end: 40px; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.price { font-weight: 800; font-size: 1rem; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.price .unit { font-size: .78rem; font-weight: 500; color: var(--muted); }
.price-none { font-size: .85rem; color: var(--muted); font-weight: 700; }
.card-nego { font-size: .76rem; font-weight: 700; color: var(--accent-2); }
.card-sold { font-size: .72rem; font-weight: 700; padding: 0 8px; border-radius: 99px; background: var(--danger-bg); color: var(--danger); }
.card-meta { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; line-height: 1.5; min-width: 0; }
.card-meta .i { width: 15px; height: 15px; color: var(--line-strong); }
.card-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta .ph { opacity: .8; }
.card-seller { display: flex; align-items: center; gap: 8px; margin-block-start: auto; padding-block-start: 6px; min-width: 0; }
.card-seller-name { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-feat { display: inline-flex; color: var(--accent-2); }
.card-feat .i { width: 17px; height: 17px; fill: currentColor; stroke-width: 1.2; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-soft);
  border: 1px solid var(--gold); color: var(--accent); font: 700 .8rem/1 var(--font-ui);
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.7rem; font-family: var(--font-display); }

.card-photo-wrap { position: relative; flex: none; width: 150px; background: var(--bg-alt); align-self: stretch; }
.card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-count {
  position: absolute; inset-block-end: 6px; inset-inline-end: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.6;
}
.card-count .i { width: 13px; height: 13px; }
.fav {
  position: absolute; inset-block-start: 6px; inset-inline-start: 6px; z-index: 4; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255, 254, 250, .94); color: #06332E; border: 1px solid rgba(6, 51, 46, .18); transition: transform .2s, background-color .2s;
}
.fav.fav-body { inset-inline-start: auto; inset-inline-end: 8px; inset-block-start: 8px; background: var(--bg); border-color: var(--line); color: var(--accent); }
.fav:hover { transform: scale(1.08); }
.fav .i { width: 18px; height: 18px; }
.fav[aria-pressed="true"] { background: #06332E; color: #D2BB8A; }
.fav[aria-pressed="true"] .i { fill: #D2BB8A; }
.card.is-preview .card-photo-wrap, .card.is-preview { pointer-events: none; }


.card-art { --oi: 8px; --os: 24px; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(155deg, var(--art-a), var(--art-b)); color: var(--art-fg); }
.card-art .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-lat { position: absolute; inset: 0; background: var(--art-fg); opacity: .12; -webkit-mask: var(--m-lattice) 0 0 / 46px 46px; mask: var(--m-lattice) 0 0 / 46px 46px; }
.art-star { fill: var(--art-star); }
.art-star2 { fill: var(--art-star2); }
.art-ico { fill: none; stroke: var(--art-fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tone-1 { --art-a: #E3EFE8; --art-b: #CBE0D5; --art-fg: #0B4A42; --art-star: rgba(11, 74, 66, .12); --art-star2: rgba(255, 254, 250, .75); }
.tone-2 { --art-a: #F7EED7; --art-b: #EBDBB2; --art-fg: #6F5620; --art-star: rgba(111, 86, 32, .13); --art-star2: rgba(255, 254, 250, .75); }
.tone-3 { --art-a: #DDF0EE; --art-b: #C2E2DF; --art-fg: #0F5C62; --art-star: rgba(15, 92, 98, .12); --art-star2: rgba(255, 254, 250, .75); }
.tone-4 { --art-a: #F8E4D8; --art-b: #EECBB6; --art-fg: #8E3A1B; --art-star: rgba(142, 58, 27, .12); --art-star2: rgba(255, 254, 250, .75); }
.tone-5 { --art-a: #E0E7F5; --art-b: #C8D4EC; --art-fg: #25448A; --art-star: rgba(37, 68, 138, .12); --art-star2: rgba(255, 254, 250, .75); }
:root[data-theme="dark"] .tone-1 { --art-a: #15453D; --art-b: #0E332D; --art-fg: #B7DCCD; --art-star: rgba(183, 220, 205, .1); --art-star2: rgba(6, 25, 22, .45); }
:root[data-theme="dark"] .tone-2 { --art-a: #3E3720; --art-b: #2D2815; --art-fg: #E3CD93; --art-star: rgba(227, 205, 147, .1); --art-star2: rgba(6, 25, 22, .45); }
:root[data-theme="dark"] .tone-3 { --art-a: #12474A; --art-b: #0C3438; --art-fg: #A7DAD6; --art-star: rgba(167, 218, 214, .1); --art-star2: rgba(6, 25, 22, .45); }
:root[data-theme="dark"] .tone-4 { --art-a: #4A2A1D; --art-b: #361E15; --art-fg: #F0BFA3; --art-star: rgba(240, 191, 163, .1); --art-star2: rgba(6, 25, 22, .45); }
:root[data-theme="dark"] .tone-5 { --art-a: #1F3158; --art-b: #16234A; --art-fg: #B9C9F2; --art-star: rgba(185, 201, 242, .1); --art-star2: rgba(6, 25, 22, .45); }

.badge {
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.5;
}
.badge-gold { background: #06332E; color: #D2BB8A; border: 1px solid rgba(210, 187, 138, .6); }
.badge .i { width: 13px; height: 13px; fill: currentColor; stroke-width: 1.2; }

.cond { font-size: .78rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); white-space: nowrap; }
.verified { display: inline-flex; color: var(--ok); }
.verified .i { width: 17px; height: 17px; fill: currentColor; stroke: var(--surface); stroke-width: 1.6; }
.pv { align-items: center; gap: 4px; margin-inline-start: 4px; font-size: .8rem; font-weight: 600; }
.pv[hidden] { display: none; }

.empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty[hidden] { display: none; }
.empty .star-icon { margin-block-end: 6px; }
.empty h3 { font-size: 1.6rem; }
.empty p { color: var(--text-2); }

/* cities */
.city-big { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: 28px; }
@media (min-width: 900px) { .city-big { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.arch-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 2px;
  min-height: 238px; padding: 74px 12px 22px; border: 1px solid var(--gold);
  border-radius: 50% 50% 16px 16px / 36% 36% 16px 16px; background: linear-gradient(180deg, var(--bg-alt), var(--surface) 60%);
  transition: transform .3s ease, box-shadow .3s ease;
}
.arch-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); border-radius: 50% 50% 11px 11px / 36% 36% 11px 11px; pointer-events: none; }
.arch-card::after {
  content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--gold); opacity: .22; pointer-events: none;
  -webkit-mask-image: var(--m-lattice), linear-gradient(#000, transparent 52%); mask-image: var(--m-lattice), linear-gradient(#000, transparent 52%);
  -webkit-mask-size: 40px 40px, 100% 100%; mask-size: 40px 40px, 100% 100%; -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-position: center top, 0 0; mask-position: center top, 0 0;
}
.arch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.arch-star { position: absolute; inset-block-start: 26px; inset-inline: 0; margin-inline: auto; width: 38px; height: 38px; fill: var(--gold); transition: transform .5s; }
.arch-card:hover .arch-star { transform: rotate(45deg); }
.arch-name { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--accent); line-height: 1.2; }
.arch-note { position: relative; z-index: 1; font-size: .85rem; color: var(--accent-2); font-weight: 600; }
.arch-count { position: relative; z-index: 1; margin-block-start: 6px; font-size: .88rem; color: var(--muted); }
.city-sub { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; color: var(--accent-2); font: 600 1rem/1.4 var(--font-ui); }
.city-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.city-rest { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .city-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .city-rest { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.city-pill {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.city-pill:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.pill-star { width: 15px; height: 15px; fill: var(--gold); flex: none; }
.pill-name { flex: 1; font-weight: 600; color: var(--text); }
.pill-count { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* how it works */
.how-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-block-end: clamp(26px, 4vw, 46px); }
.how-head .section-head { margin: 0; }
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; }
.seg button { min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-weight: 600; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--accent); }
.seg button[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.steps { display: grid; gap: 30px; counter-reset: s; }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; text-align: start; }
.num-star { position: relative; grid-row: span 2; display: grid; place-items: center; width: 72px; height: 72px; }
.num-star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--star-fill); stroke: var(--gold); stroke-width: 2.2; }
.num-star b { position: relative; font-family: var(--font-display); font-size: 1.9rem; color: var(--panel-gold); line-height: 1; }
.step-t { font-size: 1.55rem; align-self: end; }
.step-d { color: var(--text-2); }
.step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 35px; inset-block: 80px -26px; border-inline-start: 2px dashed var(--gold); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .num-star { grid-row: auto; margin-block-end: 10px; }
  .step-t { align-self: auto; }
  .step:not(:last-child)::after { inset-inline-start: calc(50% + 50px); inset-block: 36px auto; width: calc(100% - 100px + 32px); height: 0; border-inline-start: 0; border-block-start: 2px dashed var(--gold); }
  .step-d { max-width: 22em; }
}

/* safety */
.safety-grid { display: grid; gap: 20px; }
@media (min-width: 960px) { .safety-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; } }
.safety-lead {
  --oi: 14px; --os: 34px; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(32px, 5vw, 52px) clamp(26px, 4vw, 44px);
  background: var(--panel); color: var(--on-panel); border-radius: 22px; position: relative; overflow: hidden;
}
.safety-lead::before, .safety-lead::after { background: var(--panel-gold); }
.safety-lead .lead-lattice { position: absolute; inset: 0; background: var(--panel-gold); opacity: .08; -webkit-mask: var(--m-lattice) 0 0 / 64px 64px; mask: var(--m-lattice) 0 0 / 64px 64px; pointer-events: none; }
.safety-lead > * { position: relative; }
.safety-lead .star-icon { width: 76px; height: 76px; --star-fill: var(--panel-2); margin-block-end: 6px; }
.safety-lead .star-icon .i { width: 32px; height: 32px; }
.safety-lead h3 { color: var(--on-panel); font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.safety-lead p { color: var(--on-panel-2); font-size: 1.08rem; max-width: 30em; }
.tips { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tips { grid-template-columns: 1fr 1fr; } }
.tip { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tip .tip-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--accent-2); margin-block-end: 6px; border: 1px solid var(--gold); }
.tip h3 { font-family: var(--font-ui); font-size: 1.08rem; font-weight: 600; color: var(--text); }
.tip p { color: var(--text-2); font-size: .96rem; }

/* CTA */
.cta { padding-block: 0 clamp(52px, 7vw, 92px); }
.cta-panel {
  --oi: 16px; --os: 38px; position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; padding: clamp(36px, 6vw, 72px) clamp(26px, 5vw, 64px);
  background: radial-gradient(120% 140% at 85% 20%, var(--panel-2), var(--panel) 62%); color: var(--on-panel); border-radius: 26px; box-shadow: var(--shadow-lg);
}
.cta-panel::before, .cta-panel::after { background: var(--panel-gold); }
.cta-bg { position: absolute; inset: 0; background: var(--panel-gold); opacity: .1; -webkit-mask: var(--m-lattice) 0 0 / 80px 80px; mask: var(--m-lattice) 0 0 / 80px 80px; pointer-events: none; }
.cta-copy, .cta-eagle { position: relative; }
.cta-copy h2 { color: var(--on-panel); font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.cta-copy p { color: var(--on-panel-2); margin-block: 12px 26px; max-width: 32em; font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-eagle { width: min(260px, 60%); justify-self: center; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)); }
@media (min-width: 820px) { .cta-panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } .cta-eagle { width: min(300px, 100%); } }

/* footer */
.site-footer { background: var(--panel-deep); color: var(--on-panel); }
.footer-grid { display: grid; gap: 32px; padding-block: 52px 36px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } }
.foot-brand .brand-ar { color: var(--panel-gold); }
.foot-brand p { margin-block-start: 16px; color: var(--on-panel-2); max-width: 28em; }
.foot-h { font-family: var(--font-display); font-size: 1.35rem; color: var(--panel-gold); margin-block-end: 12px; }
.foot-list { display: grid; gap: 6px; }
.foot-list a { color: var(--on-panel-2); display: inline-block; padding-block: 3px; transition: color .2s; }
.foot-list a:hover { color: var(--on-panel); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 28px; border-block-start: 1px solid rgba(210, 187, 138, .25); color: var(--on-panel-2); font-size: .9rem; }

/* =========================================================================
   Post-ad wizard
   ========================================================================= */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg), var(--bg-alt)); }
.page-hero .hero-bg { -webkit-mask-image: radial-gradient(70% 140% at 85% 0, #000 10%, transparent 70%); mask-image: radial-gradient(70% 140% at 85% 0, #000 10%, transparent 70%); }
.page-hero-in { position: relative; padding-block: 34px 38px; display: grid; gap: 10px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.crumbs a { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.crumbs .i { width: 14px; height: 14px; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero p.lead { color: var(--text-2); font-size: 1.1rem; }

.wizard { display: grid; gap: 26px; padding-block: 34px 84px; align-items: start; }
@media (min-width: 1060px) { .wizard { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; } }
.wizard-card { --oi: 12px; --os: 30px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); }

.stepper { display: flex; align-items: flex-start; margin-block-end: 8px; }
.stepper li { position: relative; flex: 1; display: flex; justify-content: center; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 24px; inset-inline-start: calc(50% + 32px); width: calc(100% - 64px); border-block-start: 2px dashed var(--line-strong); opacity: .55; }
.stepper li.is-done:not(:last-child)::after { border-block-start: 2px solid var(--gold); opacity: 1; }
.st-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: var(--muted); font-weight: 500; font-size: .88rem; text-align: center; }
.st-btn:disabled { cursor: default; }
.st-node { position: relative; display: grid; place-items: center; width: 50px; height: 50px; }
.st-node svg.star { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; transition: fill .25s, stroke .25s; }
.st-node b { position: relative; font-family: var(--font-display); font-size: 1.3rem; color: var(--muted); line-height: 1; }
.st-node .i { position: relative; width: 22px; height: 22px; color: var(--accent-2); display: none; }
.is-current .st-node svg.star { fill: var(--star-fill); stroke: var(--gold); }
.is-current .st-node b { color: var(--panel-gold); }
.is-current .st-btn { color: var(--accent); font-weight: 700; }
.is-done .st-node svg.star { fill: var(--gold-soft); stroke: var(--gold); }
.is-done .st-node b { display: none; }
.is-done .st-node .i { display: block; }
.is-done .st-btn { color: var(--text-2); }
.is-done .st-btn:hover .st-label { text-decoration: underline; text-underline-offset: 4px; }
.step-status { margin-block: 14px 0; text-align: center; font-weight: 600; color: var(--accent-2); font-size: .95rem; }
.progress { height: 6px; margin-block: 14px 26px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; border: 1px solid var(--line); }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--accent-2)); border-radius: 999px; transition: width .4s ease; }
[dir="rtl"] .progress > i { margin-inline-start: auto; }
@media (max-width: 640px) {
  .stepper li:not(.is-current) .st-label { display: none; }
  .st-node { width: 42px; height: 42px; }
  .stepper li:not(:last-child)::after { inset-block-start: 20px; inset-inline-start: calc(50% + 26px); width: calc(100% - 52px); }
}

.step-panel[hidden] { display: none; }
.step-panel > header { margin-block-end: 22px; display: grid; gap: 6px; }
.step-panel h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); outline: none; }
.step-panel header p { color: var(--text-2); }

.fields { display: grid; gap: 20px; }
.row-2 { display: grid; gap: 16px; }
.row-2.price-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (min-width: 640px) { .row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .row-2.price-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.field { display: grid; gap: 6px; align-content: start; }
.field > label, .field > .label, legend.label { font-weight: 600; color: var(--text); font-size: .98rem; padding: 0; }
.field textarea { padding: 12px 14px; min-height: 148px; line-height: 1.7; resize: vertical; }
.field input[type="number"] { font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: .88rem; }
.counter { color: var(--muted); font-size: .82rem; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.field-error { display: none; align-items: flex-start; gap: 6px; color: var(--danger); font-size: .9rem; font-weight: 500; }
.field-error .i { width: 17px; height: 17px; margin-block-start: 3px; }
.field.has-error .field-error { display: flex; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); background: var(--danger-bg); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.field > label.check, .check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent-2); flex: none; cursor: pointer; }
:root[data-theme="dark"] .check input { accent-color: #D2BB8A; }
.field > label.check { padding: 12px 14px; font-weight: 500; }
.check:hover { border-color: var(--gold); }
.check.has-error { border-color: var(--danger); background: var(--danger-bg); }

.picks { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pick { position: relative; display: block; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.pick-box {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 122px; padding: 16px 10px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px; text-align: center; font-weight: 600; color: var(--text); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.pick:hover .pick-box { border-color: var(--gold); background: var(--gold-soft); }
.pick input:checked + .pick-box { border-color: var(--accent-2); background: var(--gold-soft); box-shadow: 0 0 0 2px var(--gold); }
.pick input:focus-visible + .pick-box { outline: 3px solid var(--focus); outline-offset: 3px; }
.pick-check { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--star-fill); color: var(--panel-gold); }
.pick-check .i { width: 14px; height: 14px; stroke-width: 2.4; }
.pick input:checked + .pick-box .pick-check { display: grid; }
.pick.pill .pick-box { min-height: 44px; flex-direction: row; padding: 0 18px; border-radius: 999px; font-size: .95rem; }
.pick.pill .pick-check { display: none !important; }
.pick.pill input:checked + .pick-box { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); box-shadow: none; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }

.dropzone {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 34px 20px; text-align: center; background: var(--bg);
  border: 2px dashed var(--gold); border-radius: 18px; transition: background-color .2s, border-color .2s;
}
.dropzone.is-drag { background: var(--gold-soft); border-color: var(--accent-2); }
.dropzone .star-icon { margin-block-end: 4px; }
.dropzone strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); font-weight: 700; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-msgs { display: grid; gap: 6px; margin-block-start: 12px; }
.drop-msgs p { display: flex; gap: 8px; color: var(--danger); font-size: .92rem; font-weight: 500; }
.drop-msgs .i { width: 17px; height: 17px; margin-block-start: 3px; }
.photo-meta { display: flex; justify-content: space-between; gap: 12px; margin-block: 16px 10px; color: var(--text-2); font-size: .92rem; }
.thumbs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-alt); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .rm { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(6, 51, 46, .92); color: #F4EFE0; border: 1px solid rgba(210, 187, 138, .6); }
.thumb .rm:hover { background: #A32A1D; }
.thumb .rm .i { width: 17px; height: 17px; }
.thumb .cover-tag { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; padding: 1px 10px; border-radius: 999px; background: #06332E; color: #D2BB8A; font-size: .76rem; font-weight: 600; border: 1px solid rgba(210, 187, 138, .6); }
.note { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 18px; padding: 12px 14px; background: var(--gold-soft); border-radius: 12px; color: var(--text-2); font-size: .94rem; }
.note .i { color: var(--accent-2); margin-block-start: 3px; }

/* sign-up terms + commission gate */
.tg-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-block-end: 14px; }
.tg-title .i { color: var(--accent-2); width: 22px; height: 22px; }
.tg-box { max-height: 220px; overflow-y: auto; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.tg-box h3 { font-size: 1rem; margin-block-end: 8px; }
.tg-box p { color: var(--text-2); margin-block-end: 10px; }
.tg-box ol { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 6px; color: var(--text); list-style: decimal; }
.tg-commission { border: 1px solid var(--gold); }
.tg-commission strong { display: block; color: var(--danger); margin-block-end: 6px; }
.tg-commission p { margin: 0; }
.tg-commission p + p { margin-block-start: 6px; font-weight: 600; }
.tg-required { color: var(--danger); font-weight: 600; margin-block-start: 10px; }
.tg-actions { display: flex; gap: 12px; margin-block-start: 18px; }
.tg-actions .btn { flex: 1; }

/* chat attachments (shared by the inbox and the listing contact-seller form) */
.attach-pending { padding: 0 14px; }
.attach-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; margin-block-end: 8px; border-radius: 10px; background: var(--gold-soft); color: var(--text-2); font-size: .86rem; }
.attach-chip .i { width: 16px; height: 16px; flex: none; }
.attach-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip button { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-2); }
.attach-chip button:hover { background: var(--line); }
.attach-chip button .i { width: 13px; height: 13px; }
.attach-chip.is-busy { color: var(--muted); }
.bub-file { display: flex; align-items: center; gap: 10px; padding: 8px; margin-block-end: 6px; border-radius: 10px; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; max-width: 240px; }
.bub-file .i { width: 24px; height: 24px; flex: none; }
.bub-file-info { display: grid; min-width: 0; font-size: .86rem; }
.bub-file-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bub-file-info small { opacity: .75; font-size: .76rem; }

.review { display: grid; gap: 14px; }
.review-sec { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; }
.review-sec > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--gold-soft); border-block-end: 1px solid var(--line); }
.review-sec h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; color: var(--accent); }
.link-btn { background: none; border: 0; padding: 6px 4px; color: var(--accent-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; min-height: 36px; }
.review dl { display: grid; gap: 10px 18px; margin: 0; padding: 16px 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .review dl { grid-template-columns: 150px 1fr; } }
.review dt { color: var(--muted); font-size: .92rem; }
.review dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.review .thumbs { padding: 16px 18px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.review .thumb { border-radius: 10px; }
.terms { margin-block-start: 20px; }

.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 30px; padding-block-start: 22px; border-block-start: 1px dashed var(--line-strong); }
.nav-row .btn-primary { min-width: 160px; }
.nav-row [hidden] { display: none; }
.err-summary { display: none; margin-block-end: 18px; padding: 12px 16px; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-weight: 600; align-items: center; gap: 10px; }
.err-summary.show { display: flex; }
.err-summary .i { width: 20px; height: 20px; }

.preview { position: sticky; inset-block-start: 100px; display: none; gap: 14px; }
@media (min-width: 1060px) { .preview { display: grid; } }
.preview h2 { font-size: 1.6rem; }
.preview > p { color: var(--text-2); font-size: .95rem; }

.success { display: grid; justify-items: center; gap: 12px; padding-block: 18px 6px; text-align: center; }
.success[hidden] { display: none; }
.success .star-icon { width: 104px; height: 104px; }
.success .star-icon .i { width: 44px; height: 44px; stroke-width: 2; }
.success h2 { font-size: clamp(2rem, 5vw, 2.8rem); outline: none; }
.success > p { color: var(--text-2); max-width: 36em; }
.ref { display: inline-flex; gap: 10px; align-items: baseline; padding: 8px 20px; border: 1px dashed var(--gold); border-radius: 12px; background: var(--gold-soft); }
.ref b { font-family: var(--font-ui); letter-spacing: .08em; color: var(--accent); direction: ltr; unicode-bidi: isolate; }
.success .cta-actions { justify-content: center; margin-block-start: 10px; }
.demo-note { margin-block-start: 8px; font-size: .9rem; color: var(--muted); }

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .cat-tile:hover, .card:hover, .arch-card:hover, .city-pill:hover { transform: none; }
}
@media print { .site-header, .site-footer, .hero-art { display: none; } }

/* ---- production additions ---- */
.emo { font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; font-style: normal; line-height: 1; }
.card-cat .emo { font-size: 1rem; }
.star-icon .emo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.55rem; }
.art-emoji { font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; }
.fav { cursor: pointer; }
.link-login[data-badge]::after { content: attr(data-badge); display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-inline-start: 6px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: #1b1405; font-size: .7rem; font-weight: 700; }

/* ---------------- phone chrome: the app's green top bar + floating pill nav (≤ 859px) ---------------- */
.menu-btn .ic-grid { display: none; }
.cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 14px 20px; }
.cs-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 8px 2px; background: none; border: 0; border-radius: 14px; color: var(--text); }
.cs-item:hover { background: var(--gold-soft); }
.cs-item .star-icon { width: 66px; height: 66px; }
.cs-item.is-current .frame { stroke: var(--accent-2); stroke-width: 3.4; }
.cs-item b { font-size: .8rem; font-weight: 700; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-item small { font-size: .7rem; color: var(--muted); line-height: 1.2; }

/* modal sheet: bottom sheet on phones, centred dialog on larger screens (used by categories + filters) */
.sheet {
  width: 100%; max-width: 100%; max-height: min(90dvh, 90vh); margin: auto 0 0; padding: 0; border: 1px solid var(--gold); border-block-end: 0;
  border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheetUp .26s ease; }
.sheet::backdrop { background: rgba(4, 38, 34, .55); }
@keyframes sheetUp { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 6px; }
.sheet-head h2 { font-size: 1.5rem; }
@media (min-width: 860px) {
  .sheet { margin: auto; width: min(640px, 92vw); border-radius: 20px; border-block-end: 1px solid var(--gold); }
  .cs-grid { padding-inline: 20px; }
}

.bottom-nav { display: none; }
@media (max-width: 859px) {
  body { padding-block-end: calc(98px + env(safe-area-inset-bottom, 0px)); }
  body.acc-messages-mode.acc-thread-open { padding-block-end: 0; }

  /* top bar: gold "+" at the start, wordmark in the middle, categories grid at the end, closed by a thin gold line */
  .site-header { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; --focus: #D2BB8A; }
  .site-header.is-scrolled { box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6); }
  .header-row.container { width: 100%; padding-inline: 14px; }
  .header-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 10px; min-height: 0; padding-block: 10px; }
  .header-actions { display: contents; }
  .header-actions .link-login, #langBtn, #themeBtn, .main-nav { display: none !important; }
  .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .brand-ar { color: var(--panel-gold); font-size: 2rem; }
  .header-actions .btn-post {
    display: inline-grid; place-items: center; grid-column: 1; grid-row: 1; width: 46px; height: 46px; min-height: 46px; padding: 0; gap: 0;
    border-radius: 15px; background: var(--panel-gold); color: #06332E; border: 0; box-shadow: none;
  }
  .header-actions .btn-post:hover { background: #E4D1A2; box-shadow: none; }
  .header-actions .btn-post .i { width: 26px; height: 26px; stroke-width: 2; }
  .header-actions .btn-post span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .menu-btn {
    display: inline-grid; grid-column: 3; grid-row: 1; width: 46px; height: 46px; border-radius: 15px; background: var(--panel-2);
    border: 1px solid rgba(210, 187, 138, .55); color: var(--panel-gold);
  }
  .menu-btn:hover { background: var(--panel-2); border-color: var(--panel-gold); }
  .menu-btn .ic-menu { display: none; }
  .menu-btn .ic-grid { display: block; width: 24px; height: 24px; }

  /* floating pill bar */
  .bottom-nav {
    display: flex; position: fixed; inset-inline: 14px; inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 58;
    height: 68px; padding: 6px; gap: 0; background: var(--surface);
    border: 1px solid var(--line); border-radius: 34px; box-shadow: 0 8px 22px rgba(20, 35, 31, .18);
  }
  :root[data-theme="dark"] .bottom-nav { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
  body.acc-messages-mode.acc-thread-open .bottom-nav { display: none; }
  .bn-item {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 28px; color: var(--text-2); font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center;
    transition: background-color .18s, color .18s;
  }
  html[lang="en"] .bn-item { font-size: .64rem; }
  .bn-item .i { width: 25px; height: 25px; }
  .bn-item span { max-width: 100%; padding-inline: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bn-item.is-active { background: var(--green-tint); color: var(--accent); font-weight: 800; }
  .bn-item.is-active .i { stroke-width: 2; }
  .bn-item[data-badge]::after {
    content: attr(data-badge); position: absolute; inset-block-start: 5px; inset-inline-end: 24%;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--danger);
    color: #fff; font-size: .64rem; font-weight: 700; display: grid; place-items: center; line-height: 1;
  }
  .site-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }

/* post-ad: brand / model / year / mileage block (cars, smartphones) */
.vp-fields { display: grid; gap: 20px; }

/* phone: compact page heroes + wizard card so content starts higher (the app has a slim title bar) */
@media (max-width: 859px) {
  .page-hero-in { padding-block: 14px 16px; gap: 4px; }
  .page-hero .crumbs { display: none; }
  .page-hero h1 { font-size: 1.85rem; }
  .page-hero p.lead { font-size: .92rem; line-height: 1.6; }
  .wizard { padding-block: 14px 24px; }
  .wizard-card { border-radius: 16px; padding: 18px 14px; }
  .wizard-card.orn::before, .wizard-card.orn::after { display: none; }
  .st-btn { font-size: .8rem; }
}
@media (max-width: 859px) {
  .dropzone { padding: 22px 16px; }
  .dropzone > strong, .dropzone > [data-i18n="drop.or"] { display: none; }
}

/* Account link in the header/footer: its text ("Log in" / "My account") is decided by script,
   so keep it invisible until then — it never flashes the wrong one. It reveals itself after
   1.5s on its own if scripts fail. */
[data-auth-link]:not([data-auth-ready]) { visibility: hidden; animation: arzaq-auth-reveal 0s 1.5s forwards; }
@keyframes arzaq-auth-reveal { to { visibility: visible; } }

/* ---- site banners: suspension notice, staff announcement, "open in the app" (see app.js initBanners) ---- */
.site-banners { position: relative; z-index: 60; }
.site-banners .sb { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: .9rem; line-height: 1.5; border-bottom: 1px solid var(--line); background: var(--gold-soft); color: var(--ink, inherit); }
.site-banners .sb p { margin: 0; flex: 1 1 auto; min-width: 0; }
.site-banners .sb-ban { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.site-banners .sb-warn { background: var(--danger-bg); color: var(--danger); }
.site-banners .sb-app { background: var(--surface); }
.site-banners .sb-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.site-banners .sb-x:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.site-banners .btn { flex: none; }

/* desktop header: no middle navigation links (home/browse/safety live in the footer and the logo); the hamburger menu keeps them on smaller screens */
@media (min-width: 961px) {
  .main-nav { display: none; }
}

/* ---- generic toast (A.toast) ---- */
.arz-toast { position: fixed; inset-inline: 16px; inset-block-end: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 300; margin-inline: auto; width: fit-content; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 14px; background: var(--panel, #06332E); color: var(--on-panel, #F4EFE0); font-size: .95rem; text-align: center; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.arz-toast.show { opacity: 1; transform: none; }
@media (min-width: 860px) { .arz-toast { inset-block-end: 28px; } }