/* ============================================
   Aqari, Design System
   RTL-safe: uses logical properties throughout
   ============================================ */
:root{
  --navy:#0B1B33; --navy-700:#132B4D; --navy-500:#1E3E69;
  --navy-600:#16325B;
  --gold:#C9A227; --gold-light:#E3C15A; --gold-dark:#886B12;
  --teal:#0F766E; --teal-light:#14B8A6;
  /* Warm neutral reads as premium; cool grey reads as default */
  --bg:#FAF9F7; --surface:#FFFFFF; --surface-2:#F4F2EF;
  /* --ink-3 was #64748B, which measures 4.26:1 on --surface-2 and so failed
     AA for the muted text that appears on tinted panels all over the site.
     #617086 is the same hue one step darker: 4.51 there, 5.04 on white. */
  --ink:#0F1729; --ink-2:#3D4A5C; --ink-3:#617086; --ink-4:#94A3B8;
  --line:#E7E5E1;
  --danger:#DC2626; --success:#059669; --warn:#D97706;
  /* TEXT variants. The tokens above are tuned as FILLS - as small text on white
     they measure 3.19:1 (warn) and 3.77:1 (success), under the 4.5:1 WCAG AA
     needs. Darkening the fill would weaken the badges, so text gets its own
     token and the fill keeps its colour. Same reason --gold-dark exists.
       warn-ink    #B35309  4.52:1 on the tinted surface
       success-ink #047857  4.91:1 on the tinted surface
       ink-4-ink   #656F7E  4.55:1 on the tinted surface, which is the
                            darkest background small text sits on. Borders
                            keep the lighter --ink-4. */
  --warn-ink:#B35309; --success-ink:#047857; --danger-ink:#C81E1E;
  --ink-4-ink:#656F7E;
  --radius:14px; --radius-sm:9px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(11,27,51,.05);
  --shadow:0 4px 6px -1px rgba(11,27,51,.06),0 12px 20px -8px rgba(11,27,51,.08);
  --shadow-lg:0 20px 45px -12px rgba(11,27,51,.18);
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-ar:'Cairo','Tajawal','Segoe UI',sans-serif;
  --maxw:1240px;
  /* Spacing rhythm - 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}
html[dir="rtl"] body{font-family:var(--font-ar);line-height:1.95}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:16.5px;
}
/* Skip link - first focusable element for keyboard/screen-reader users */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:10001;
  background:var(--navy);color:#fff;padding:12px 22px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;font-size:14px}
.skip-link:focus{inset-inline-start:0}
/* Visible focus for keyboard users only */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.center{text-align:center}
.muted{color:var(--ink-3)}
.small{font-size:13px}

/* ---------- Typography ----------
   Wider scale: large type next to small type, little in between.
   That contrast is most of what reads as "designed". */
h1,h2,h3,h4{line-height:1.15;font-weight:700;letter-spacing:-.03em;color:var(--navy);
  text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.04em}
h2{font-size:clamp(27px,3.6vw,42px)}
h3{font-size:21px;letter-spacing:-.02em}
h4{font-size:17px}
p{text-wrap:pretty}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{
  letter-spacing:0;line-height:1.35}
.section-head{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-weight:600;font-size:14px;cursor:pointer;transition:.18s ease;white-space:nowrap;
}
/* Motion reserved for primary actions - not every button in every table */
.btn-primary:hover,.btn-gold:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff !important}
.btn-primary:hover{background:var(--navy-700);box-shadow:var(--shadow);color:#fff !important}
/* Gold is an accent, not a primary action: solid, not gradient, and used sparingly */
.btn-gold{background:var(--gold);color:#1a1400;font-weight:700}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 8px 20px -8px rgba(201,162,39,.45)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost{background:var(--surface-2);color:var(--ink-2)}
.btn-ghost:hover{background:var(--line)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1eb455}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-block{width:100%}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input,.select,.textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);transition:.15s;font-size:14px;
  /* Prevent iOS from inflating text inside form controls in landscape */
  -webkit-text-size-adjust:100%;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(19,43,77,.28)
}
.textarea{min-height:110px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;background-position:right 12px center;padding-inline-end:36px}
html[dir="rtl"] .select{background-position:left 12px center}
select{max-width:100%}   /* a long option never widens its box past the screen */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:760px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* 78px, up from 66px: the logo was enlarged and the bar has to hold it without
   the image overflowing the sticky header's border. Every other 66px reference
   below is derived from this height and was moved with it. */
.header-inner{display:flex;align-items:center;gap:24px;height:78px;position:relative}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:23px;color:var(--navy);letter-spacing:-.03em}
/* Wide screens only (>=1561px): the header row gets more room than the 1240px page container.
   A signed-in user's row (8 links + Facebook, language, chat, bell, user chip, Add Listing, Log out)
   is about 1250px, so inside 1240 the logo and the first link («الرئيسية») touched and the last link
   («اتصل بنا») ran into the Facebook icon. Below 1561px nothing changes: the tiers below handle those. */
@media(min-width:1561px){
  header .container.header-inner{max-width:1480px}
  .logo{margin-inline-end:22px}
}
.logo-mark{width:42px;height:42px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;flex:0 0 auto}
.logo-mark img{width:42px;height:42px;border-radius:10px}
/* .nav-wrap holds the link group and the right-aligned actions; it's the element
   the mobile burger toggles open/closed.

   The inner .nav used to be position:absolute, centred with a translate. That
   took it out of flow, so .nav-actions could not see it: once the links grew
   past the space between the logo and the buttons, the two silently overlapped
   (the language pill landed on top of "Contact Us") and long labels wrapped onto
   a second line inside a fixed-height header. Now .nav is a normal flex child that
   shares the row, centres inside its own space, and shrinks before it collides. */
.nav-wrap{display:flex;align-items:center;flex:1;min-width:0;gap:12px}
/* overflow:visible, NOT hidden. Hidden plus justify-content:center clipped the
   row at BOTH ends, so on English the first link lost its opening letters
   ("Properties" rendered as "perties") and the last link vanished entirely -
   silently, with nothing to indicate anything was missing. Overflow is now
   prevented by switching to the burger earlier rather than by cutting the row. */
.nav{display:flex;gap:2px;align-items:center;flex:1 1 auto;min-width:0;
  justify-content:center;flex-wrap:nowrap;overflow:visible}
/* Header links must never wrap: this bar is a fixed height, so a second line
   is clipped rather than accommodated. */
.nav a{padding:8px 11px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);
  transition:.15s;white-space:nowrap}
.nav a:hover{background:var(--surface-2);color:var(--navy)}
.nav a.active{color:var(--navy);font-weight:600}
/* .nav a above is more specific than .btn-primary, so button links in the nav
   would lose their intended text colour. Restore it for actual buttons. */
.nav a.btn-primary,.nav-actions a.btn-primary{color:#fff}
.nav a.btn-primary:hover,.nav-actions a.btn-primary:hover{color:#fff;background:var(--navy-700)}
.nav a.btn-gold,.nav-actions a.btn-gold{color:#1a1400}
.nav a.btn-outline:hover,.nav-actions a.btn-outline:hover{color:var(--navy)}
/* flex:0 0 auto - the actions are the last thing that should ever be squeezed;
   they hold the sign-in state and the primary call to action. */
.nav-actions{display:flex;gap:8px;align-items:center;margin-inline-start:auto;flex:0 0 auto}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-inline-start:auto}
/* Mobile-only sign-up shortcut, sitting beside the burger.
   Hidden on desktop, where Register already has its own button in .nav-actions.
   margin-inline-start:auto pushes the pair to the end of the row; the burger
   then loses its own auto margin so the two sit together rather than at
   opposite ends of the header. */
.m-reg{display:none}
@media(max-width:1180px){
  .m-reg{display:inline-flex;align-items:center;justify-content:center;
    margin-inline-start:auto;padding:8px 16px;border-radius:999px;
    background:var(--navy,#0B1B33);color:#fff;text-decoration:none;
    font-size:13.5px;font-weight:700;white-space:nowrap;line-height:1}
  .m-reg:active{background:#132a4d}
  .m-reg + .burger{margin-inline-start:4px}
}
@media(max-width:360px){
  .m-reg{padding:7px 12px;font-size:12.5px}
}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}

/* Two tightening steps before the burger takes over.

   The row has to hold EIGHT links plus a language pill, a bell, a user chip
   with a name on it, "Add Listing" and "Log out". English labels are roughly
   40% wider than the Arabic ones, and a signed-in seller has the longest row of
   anyone - which is exactly the case that was breaking. The burger now takes
   over at 1400px instead of 1100px, because below that the full row genuinely
   does not fit in English and squeezing it further just makes it unreadable. */
@media(max-width:1560px){
  .header-inner{gap:16px}
  .nav a{padding:7px 9px;font-size:13.5px}
  .nav{gap:0}
}
/* Last squeeze before the burger. Tighter than looks comfortable in isolation,
   but a slightly cramped full menu beats a menu that has vanished into a
   hamburger on a laptop the visitor thinks of as a big screen. */
@media(max-width:1340px){
  .header-inner{gap:10px}
  .nav a{padding:6px 6px;font-size:13px}
  .nav-lang{padding:5px 8px !important}
  .nav-me{max-width:150px;overflow:hidden}
}
@media(max-width:1180px){
  .nav-wrap{display:none;position:absolute;top:78px;inset-inline:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-wrap.open{display:flex}
  /* Vertical drawer: wrapping and overflow are fine here, unlike the desktop bar. */
  .nav{position:static;transform:none;flex-direction:column;align-items:stretch;width:100%;
    overflow:visible;flex-wrap:wrap;gap:2px}
  .nav a{white-space:normal}
  .nav-actions{margin:8px 0 0;flex-direction:column;align-items:stretch}
  .burger{display:block}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-600) 55%,var(--teal) 140%);
  color:#fff;padding:76px 0 130px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 18% 22%,rgba(201,162,39,.16),transparent 42%),
                   radial-gradient(circle at 82% 78%,rgba(20,184,166,.14),transparent 45%)}
.hero::after{content:'';position:absolute;inset-block-end:-1px;inset-inline:0;height:90px;
  background:linear-gradient(to bottom,transparent,var(--bg))}
/* Photo variant: same hero, with a real image behind a darkened gradient
   so heading/badge/body text keep full contrast. Add data-hero-photo on
   the section and set --hero-photo via inline style to the image URL. */
.hero[data-hero-photo]{
  /* Lightened from the first pass - the photo needs to actually read as a
     photo, not just tint the navy gradient. White text/badge still hold
     full contrast against this. */
  background-image:linear-gradient(150deg,rgba(13,34,68,.8) 0%,rgba(11,27,51,.74) 55%,rgba(14,45,66,.68) 100%),
                    var(--hero-photo);
  background-size:cover;background-position:center;
}
.hero-inner{position:relative;z-index:2;max-width:760px}
.hero h1{color:#fff;margin-bottom:14px}
.hero p{font-size:clamp(15px,2vw,19px);opacity:.85;margin-bottom:8px}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);padding:6px 14px;border-radius:99px;font-size:13px;margin-bottom:20px}

/* ---------- Search bar ---------- */
.searchbar{position:relative;z-index:3;margin-top:-70px;background:var(--surface);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px;border:1px solid var(--line)}
.searchbar-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap}
.searchbar-tab{padding:7px 16px;border-radius:99px;font-size:13px;font-weight:600;color:var(--ink-3);
  background:transparent;border:1px solid transparent;cursor:pointer;transition:.15s}
.searchbar-tab.active{background:var(--navy);color:#fff}
.searchbar-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
@media(max-width:980px){.searchbar-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.searchbar-grid{grid-template-columns:1fr}}
.searchbar .field{margin:0}
.installment-hint{margin-top:14px;padding:11px 14px;background:linear-gradient(90deg,rgba(201,162,39,.1),transparent);
  border-inline-start:3px solid var(--gold);border-radius:6px;font-size:13px;color:var(--ink-2)}

/* ---------- Listing card ----------------------------------------------------
   Layout is flex-column with the body growing, so cards in the same row end at
   the same height even when one title wraps to two lines and another does not.
   Ragged card bottoms are the single thing that makes a results grid look
   unfinished. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;display:flex;flex-direction:column;height:100%}
.card:hover{box-shadow:0 12px 32px rgba(11,27,51,.13);transform:translateY(-4px);border-color:#cfd8e6}
.card.is-gone .card-media img{filter:grayscale(.55) opacity(.75)}

/* 16:11, not 4:3. The price bar now sits inside the media box, so a squarer
   photo would give the image less room than it had before rather than more -
   which was the point of moving the price onto it. */
.card-media{position:relative;aspect-ratio:16/11;background:var(--surface-2);overflow:hidden;flex:0 0 auto}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-media img{transform:scale(1.06)}
/* Deeper and darker than the old scrim: it is no longer protecting a small chip
   but a 20px price, and white text at that size on an unknown photo needs a
   real floor under it. Ends fully transparent so it reads as light falling off
   rather than a panel laid over the image. */
.card-scrim{position:absolute;inset-inline:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(to top,rgba(8,18,34,.88) 0%,rgba(8,18,34,.62) 34%,rgba(8,18,34,0) 100%)}

/* ---- Price overlay -------------------------------------------------------
   In flow, not absolutely positioned. The video badge and compare chip are
   rows within it, so they can never sit under the price or on top of each
   other the way two bottom-start absolutes did. */
.card-ov{position:absolute;inset-inline:0;bottom:0;z-index:3;
  padding:0 12px 11px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.card-ov-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-ov-price{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}

.card-vid-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  padding:4px 9px;border-radius:999px;pointer-events:none}
.card-badges{position:absolute;top:11px;inset-inline-start:11px;display:flex;gap:6px;
  flex-wrap:wrap;max-width:72%;pointer-events:none;z-index:3}
.badge{padding:4px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em}
.badge-gold{background:var(--gold);color:#1a1400}
.badge-navy{background:var(--navy);color:#fff}
.badge-teal{background:var(--teal);color:#fff}
.badge-green{background:var(--success);color:#fff}
.badge-red{background:var(--danger);color:#fff}
.badge-grey{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.badge-warn{background:var(--warn);color:#fff}

/* Actions gathered in one corner rather than scattered across all four. */
.card-tools{position:absolute;top:11px;inset-inline-end:11px;z-index:4;
  display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateY(-4px);transition:opacity .18s ease, transform .18s ease}
.card:hover .card-tools,
.card:focus-within .card-tools{opacity:1;transform:none}
.card-tool{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.96);color:var(--ink-2);
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(11,27,51,.22);
  transition:transform .14s ease, color .14s ease}
.card-tool:hover{transform:scale(1.1);color:var(--navy)}
.card-fav.is-fav{background:#fff}
/* Touch devices have no hover, so hiding the controls would hide them forever. */
@media (hover:none){ .card-tools{opacity:1;transform:none} }

/* pointer-events restored here: the overlay itself is transparent to clicks so
   the photo link underneath still works everywhere except on the chip. */
.card-compare{display:inline-flex;align-items:center;gap:6px;cursor:pointer;pointer-events:auto;
  background:rgba(255,255,255,.94);border-radius:8px;padding:5px 10px;
  font-size:11.5px;font-weight:700;color:var(--ink-2);
  box-shadow:0 2px 8px rgba(11,27,51,.2)}
.card-compare input{width:14px;height:14px;accent-color:var(--navy);cursor:pointer}

.card-body{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1;
  text-decoration:none;color:inherit}
/* On the photo now, so white - and a text shadow, because no scrim can be
   guaranteed against every photo a seller uploads. */
.card-price{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.025em;white-space:nowrap;
  line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.card-price .cur{font-size:12px;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:0}
/* Price per m² is how Egyptians actually compare value, so it stays beside the
   headline price rather than being buried in the detail page. A quiet glass
   chip keeps it subordinate to the price without losing it to the photo. */
.card-ppm{font-size:11px;color:rgba(255,255,255,.92);white-space:nowrap;
  font-variant-numeric:tabular-nums;background:rgba(255,255,255,.16);
  backdrop-filter:blur(4px);padding:3px 8px;border-radius:6px;flex:0 0 auto}
/* --teal on a dark photo fails contrast badly, so the monthly figure goes to a
   light neutral here and keeps its weight to stay distinct from the price. */
.card-monthly{font-size:11.5px;color:rgba(255,255,255,.88);font-weight:700;margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}

.card-title{font-size:14.5px;font-weight:600;margin:0 0 6px;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.8em}
.card-loc{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px;
  margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* margin-top:auto pins the spec strip to the bottom of every card. */
.card-specs{display:flex;gap:15px;padding-top:10px;margin-top:auto;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);font-weight:600}
.card-specs span{display:flex;align-items:center;gap:5px}
.card .ci{display:inline-flex;flex:0 0 auto}
.card .ci svg{width:14px;height:14px;color:var(--ink-3)}
.card-loc .ci svg{width:13px;height:13px}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:20px;
  align-items:stretch}

/* ---- Layout switch -------------------------------------------------------- */
.view-switch{display:inline-flex;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:var(--surface);flex:0 0 auto}
.view-switch a{display:grid;place-items:center;width:34px;height:32px;color:var(--ink-3);
  transition:background .14s ease,color .14s ease}
.view-switch a + a{border-inline-start:1px solid var(--line)}
.view-switch a:hover{background:var(--surface-2);color:var(--navy)}
.view-switch a.on{background:var(--navy);color:#fff}

/* ---- List layout ----------------------------------------------------------
   The same .card markup card_html() emits, turned on its side. Nothing here
   needs a second template, so the grid and the list cannot drift apart.
   The price overlay rides along on the photo exactly as it does in the grid. */
.cards-list{display:flex;flex-direction:column;gap:14px}
.cards-list .card{flex-direction:row;height:auto}
/* A row that lifts 4px on hover makes a whole page of them twitch. */
.cards-list .card:hover{transform:none;box-shadow:0 8px 24px rgba(11,27,51,.11)}
/* Percentage, not a fixed 290px: the results column is narrowed by the filter
   sidebar, so a fixed photo width that looks right at 1400px leaves the text
   nothing at 1100px. 3/2 sets the row height off that width, which is what
   keeps the rows short - stretching the photo to the body's height instead
   produced a 290px row with a third of it empty. */
.cards-list .card-media{width:clamp(180px,32%,310px);aspect-ratio:3/2;align-self:auto;flex:0 0 auto}
.cards-list .card-body{padding:16px 18px}
.cards-list .card-title{font-size:16px;min-height:0;-webkit-line-clamp:1;margin-bottom:8px}
.cards-list .card-loc{font-size:13px;margin-bottom:0}
/* margin-top:auto is inherited from the grid rule and is right here too: it
   pins the spec strip to the foot of the row, so every row's divider lines up. */
.cards-list .card-specs{padding-top:12px;font-size:13px}

@media(max-width:720px){
  /* A 290px photo beside text leaves nothing for the text. Below this the list
     simply becomes the stacked card again - the toggle stays, it just stops
     making a difference at a width where it cannot help. */
  .cards-list .card{flex-direction:column}
  .cards-list .card-media{width:auto;aspect-ratio:16/11}
  .cards-list .card-body{padding:13px 15px 15px}
  .cards-list .card-title{font-size:14.5px;-webkit-line-clamp:2}
}
@media(max-width:520px){
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px}
  .card-body{padding:11px 12px 13px}
  .card-price{font-size:17px}
  .card-title{font-size:13px;margin:7px 0 5px;min-height:2.7em}
  .card-ppm{display:none}          /* not enough room to be readable */
  .card-specs{gap:10px;font-size:11.5px}
  .card-compare{display:none}      /* comparison is a desktop task */
  /* The share popover is taller than the image box on a two-up phone grid, and
     .card-media clips it. Rather than ship a button that opens something
     invisible, drop it here: sharing still works from the listing page. */
  .card-share-wrap{display:none}
  .card-tool{width:32px;height:32px}
}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.section-tight{padding:44px 0}
.section-alt{background:var(--surface)}

/* ---------- Feature blocks ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feature{padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.2s}
.feature:hover{border-color:var(--gold-dark);box-shadow:var(--shadow)}
.feature-icon{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--navy-600));
  color:var(--gold-dark);display:grid;place-items:center;margin-bottom:14px;font-size:20px}
.feature h3{font-size:16px;margin-bottom:7px}
.feature p{font-size:13.5px;color:var(--ink-3)}

/* ---------- Governorate chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{padding:8px 15px;background:var(--surface);border:1px solid var(--line);border-radius:99px;
  font-size:13px;font-weight:500;color:var(--ink-2);transition:.15s}
.chip:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.chip .n{opacity:.55;font-size:11.5px;margin-inline-start:4px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.stat{text-align:center;padding:22px}
.stat-n{font-size:34px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.stat-l{font-size:13px;color:var(--ink-3);margin-top:2px}

/* ---------- Property page ---------- */
.prop-grid{display:grid;grid-template-columns:1fr 348px;gap:30px;align-items:start}
@media(max-width:980px){.prop-grid{grid-template-columns:1fr}}
.gallery{border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.gallery-main{position:relative;aspect-ratio:16/10;background:#0B1B33}
.gallery-main img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.gallery-thumbs{display:flex;gap:8px;padding:8px;overflow-x:auto;background:var(--surface)}
.gallery-thumbs img{width:78px;height:58px;object-fit:cover;border-radius:6px;cursor:pointer;
  opacity:.6;transition:.15s;flex-shrink:0;border:2px solid transparent}
.gallery-thumbs img:hover,.gallery-thumbs img.active{opacity:1;border-color:var(--navy)}

/* Prev/next controls, shared by the main slot and the lightbox. Always
   visible: hiding them until hover was tested and failed the only test that
   matters - a control nobody can see is a control that does not exist. */
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border-radius:50%;border:none;background:rgba(11,27,51,.55);color:#fff;font-size:22px;
  line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  z-index:2;transition:background .15s,opacity .15s}
.gal-arrow:hover{background:rgba(11,27,51,.85)}
.gal-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gal-prev{left:10px}
.gal-next{right:10px}
.gal-count{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:rgba(11,27,51,.6);color:#fff;font-size:12px;padding:3px 9px;border-radius:20px;z-index:2}
.lb-arrow{width:48px;height:48px;font-size:28px}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-count{bottom:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.panel-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:15px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}
.spec-item{}
.spec-label{font-size:12px;color:var(--ink-3);margin-bottom:2px}
.spec-value{font-size:14px;font-weight:600;color:var(--ink)}
.sticky{position:sticky;top:84px}

/* ---------- Payment plans ---------- */
.plan{border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px;margin-bottom:11px;transition:.18s}
.plan:hover{border-color:var(--gold-dark);background:rgba(201,162,39,.03)}
.plan-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;gap:10px}
.plan-name{font-weight:700;font-size:14px;color:var(--navy)}
.plan-monthly{font-size:17px;font-weight:800;color:var(--teal)}
.plan-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--ink-2)}
.plan-row b{color:var(--ink);font-weight:600}

/* ---------- Calculator ---------- */
.calc-out{background:linear-gradient(135deg,var(--navy),var(--navy-600));color:#fff;
  border-radius:var(--radius-sm);padding:18px;text-align:center;margin-top:14px}
.calc-out .n{font-size:29px;font-weight:800;color:var(--gold-light);letter-spacing:-.02em}
.calc-out .l{font-size:12px;opacity:.75;margin-top:2px}
input[type=range]{width:100%;accent-color:var(--navy);height:5px}

/* ---------- Layout: filters + results ---------- */
.search-layout{display:grid;grid-template-columns:282px 1fr;gap:26px;align-items:start}
@media(max-width:980px){.search-layout{grid-template-columns:1fr}}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.filter-group{padding-block:14px;border-bottom:1px solid var(--line)}
.filter-group:last-child{border-bottom:none}
.filter-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:9px}

/* ---------- Dashboard ---------- */
/* minmax(0,...): a wide table or a long <select> option scrolls in its own box
   instead of stretching the column past a phone screen (2026-10-05). */
.dash{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start}
.dash>*{min-width:0}
@media(max-width:980px){.dash{grid-template-columns:minmax(0,1fr)}}
.dash-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.dash-nav a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--ink-2);transition:.15s;margin-bottom:2px}
.dash-nav a:hover{background:var(--surface-2)}
.dash-nav a.active{background:var(--navy);color:#fff}
/* the CRM workspace link, right under the dashboard item */
.dash-nav a.dash-crm{background:var(--teal);color:#fff;align-items:flex-start;margin:6px 0 4px}
.dash-nav a.dash-crm:hover{background:#0B5F58}
.dash-nav a.dash-crm:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dash-nav a.dash-crm .ic{color:#fff;margin-top:2px}
.dash-crm span{display:grid;gap:1px;min-width:0}
.dash-crm b{font-weight:700}
.dash-crm small{font-size:11.5px;font-weight:500;color:#CCFBF1}
.dash-sep{height:1px;background:var(--line);margin:6px 2px 8px}
.dash-user{padding:16px 13px;border-bottom:1px solid var(--line);margin-bottom:8px}
.dash-user .n{font-weight:700;color:var(--navy);font-size:14px}
.dash-user .r{font-size:12px;color:var(--ink-3);text-transform:capitalize}
.dash-user{display:flex;align-items:center;gap:10px}
.dash-user .du-who{flex:1;min-width:0}
.du-here{display:none}
.du-menu{display:none}
/* Phones and tablets (one column): the menu folds behind «القائمة». */
@media(max-width:980px){
  .dash-nav .dash-user{padding:10px 8px;border-bottom:0;margin-bottom:0}
  .dash-nav.dn-open .dash-user{border-bottom:1px solid var(--line);margin-bottom:8px;padding-bottom:12px}
  .du-here{display:block;font-weight:700;color:var(--navy);font-size:14.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .du-menu{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--navy);
    background:var(--navy);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
  .du-menu .badge{margin:0}
  .dash-nav.dn-open .du-menu{background:transparent;color:var(--navy)}
  .du-menu:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .dash-nav:not(.dn-open)>*:not(.dash-user):not(.dash-crm):not(.dash-add):not(script):not(style){display:none!important}
  .dash-nav:not(.dn-open)>.dash-crm,.dash-nav:not(.dn-open)>.dash-add{margin:6px 0 2px}
}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;top:0;inset-inline-end:0;width:60px;height:60px;
  background:radial-gradient(circle,rgba(201,162,39,.1),transparent 70%)}
.kpi-n{font-size:27px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.kpi-l{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---------- Tables ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table{width:100%;border-collapse:collapse}
.table th{background:var(--surface-2);padding:11px 14px;text-align:start;font-size:12px;
  font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.table td{padding:12px 14px;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.table tr:hover td{background:var(--surface-2)}
.table-scroll{overflow-x:auto}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:14px;font-weight:500}
.alert-success{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
.alert-error,.alert-danger{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}
.alert-warn,.alert-warning{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.alert-info{background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE}

/* ---------- Auth ---------- */
.auth-wrap{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow)}

/* ---- Signup: form beside a reason to fill it in ---------------------------
   Only the register page uses the split. Login is four controls and needs no
   persuading, so it keeps the plain centred card and these rules never touch
   it. */
.auth-wrap-wide{place-items:start center}
.auth-split{width:100%;max-width:940px;display:grid;grid-template-columns:1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg)}
.auth-card-form{max-width:none;border:0;border-radius:0;box-shadow:none;padding:38px 36px}
.auth-title{font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.025em;margin:0}
.auth-sub{color:var(--ink-3);font-size:14.5px;margin:6px 0 22px}
.auth-alt{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:22px}
.auth-alt a{color:var(--navy);font-weight:700}

.auth-aside{display:none;background:linear-gradient(155deg,var(--navy) 0%,#0E2A42 100%);
  color:#fff;padding:38px 34px;position:relative;overflow:hidden}
.auth-aside::after{content:'';position:absolute;inset-block-start:-70px;inset-inline-end:-70px;
  width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 70%);pointer-events:none}
.auth-aside-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px;
  height:100%;justify-content:center}
.auth-aside-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-light)}
html[dir="rtl"] .auth-aside-eyebrow{letter-spacing:0;font-size:13px}
.auth-aside h2{color:#fff;font-size:23px;line-height:1.35;margin:0;letter-spacing:-.02em}
/* One pitch visible at a time. Stacked in the same grid cell rather than
   shown/hidden in flow, so the panel does not jump height as you click
   between roles with different-length copy. */
.pitch-stack{display:grid}
/* Out fast, in slower and delayed. A symmetric crossfade of two different
   blocks of text stacked in one cell means both are half-visible on top of
   each other for the whole transition, which is unreadable - the outgoing one
   has to be gone before the incoming one arrives. */
.pitch{grid-area:1/1;display:flex;flex-direction:column;gap:20px;
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .1s ease,transform 0s linear .1s,visibility 0s linear .1s}
.pitch.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .3s ease .1s,transform .3s ease .1s,visibility 0s}
@media (prefers-reduced-motion:reduce){
  .pitch,.pitch.is-on{transition:none;transform:none}
}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.auth-points li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.65;
  color:#C3D2E2}
.auth-points svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--gold-light)}

/* Chips that wrap. Five roles in a fixed two-column grid always stranded the
   fifth across a whole row, which read as a layout bug rather than a choice. */
/* One row. The five chips share the width evenly rather than sizing to their
   text, so the set reads as a single control instead of a ragged pile - which
   is why the labels are shortened in register.php rather than squeezed here. */
.role-picker{display:flex;flex-wrap:nowrap;gap:6px}
/* 1 1 auto, not 1 1 0: an equal split gives "Buyer" and "Developer" the same
   67px, which fits the short word and clips the long one. Growing from each
   chip's own text width lets the wide labels take the room they need. */
.role-opt{position:relative;flex:1 1 auto;min-width:0}
.role-opt input{position:absolute;opacity:0;width:0;height:0}
.role-opt label{display:block;padding:9px 8px;border:1.5px solid var(--line);
  border-radius:999px;text-align:center;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-opt label:hover{border-color:var(--ink-4)}
.role-opt input:checked+label{border-color:var(--navy);background:var(--navy);color:#fff}
/* Radios are visually hidden, so the focus ring has to be drawn on the label
   or the whole picker becomes invisible to keyboard users. */
.role-opt input:focus-visible+label{outline:2px solid var(--navy);outline-offset:2px}

.hint{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:7px}
.lbl-opt{font-weight:500;color:var(--ink-4-ink)}

.pw-wrap{position:relative}
.pw-wrap .input{padding-inline-end:44px}
.pw-eye{position:absolute;inset-inline-end:6px;inset-block-start:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;border:0;background:none;
  color:var(--ink-4);cursor:pointer;border-radius:7px;padding:0}
.pw-eye svg{width:18px;height:18px}
.pw-eye:hover{color:var(--ink-2)}
.pw-eye.is-on{color:var(--navy)}

/* ---- Seller sidebar: your public page ----------------------------------
   Sits above the nav, so it is styled as a card rather than a nav row - the
   distinction is the point: everything below it navigates the dashboard, this
   one leaves it. */
.pp-card{border:1px solid var(--line,#E7E5E1);border-radius:10px;padding:11px;margin:0 0 12px}
.pp-title{font-size:12px;color:var(--ink-3,#6B7A90);margin-bottom:9px}
.pp-card svg{width:17px;height:17px;flex:0 0 auto}

.pp-wa{display:flex;align-items:center;justify-content:center;gap:7px;
  background:#25D366;color:#fff;font-size:13.5px;font-weight:600;
  padding:9px 10px;border-radius:8px;text-decoration:none;margin-bottom:7px}
.pp-wa:hover{background:#1EBE5A;color:#fff}

.pp-row{display:flex;gap:6px;margin-bottom:8px}
.pp-btn{flex:1;text-align:center;font-size:12.5px;padding:7px 6px;border-radius:8px;
  border:1px solid var(--line,#E7E5E1);background:none;color:var(--ink-2,#3D4A5C);
  cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.4}
.pp-btn:hover{border-color:var(--navy,#0B1B33);color:var(--navy,#0B1B33)}
.pp-btn.is-done{border-color:#A7F3D0;background:#ECFDF5;color:#065F46}

/* Each network in its own colour, on a wash of the same hue rather than a grey
   box. People recognise these by colour before they read the glyph, so a row of
   identical grey squares makes them all look like one button. The tint stays
   pale so four of them side by side still read as a set, not a fruit salad. */
.pp-icons{display:flex;gap:6px}
.pp-ico{flex:1;display:grid;place-items:center;padding:8px;border-radius:9px;
  border:1px solid transparent;cursor:pointer;
  color:var(--ink-3,#6B7A90);background:var(--surface-2,#F4F2EF);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.pp-ico:hover{transform:translateY(-1px)}
.pp-ico:active{transform:translateY(0)}
.pp-ico:focus-visible{outline:2px solid var(--navy,#0B1B33);outline-offset:2px}
/* [hidden] alone loses to display:grid above, so it is restated here. */
.pp-ico[hidden]{display:none}

.pp-ico-fb{color:#1877F2;background:#E8F1FE}
.pp-ico-fb:hover{background:#1877F2;color:#fff;box-shadow:0 4px 10px rgba(24,119,242,.28)}
.pp-ico-tg{color:#229ED9;background:#E6F5FC}
.pp-ico-tg:hover{background:#229ED9;color:#fff;box-shadow:0 4px 10px rgba(34,158,217,.28)}
.pp-ico-mail{color:#C0392B;background:#FDECEA}
.pp-ico-mail:hover{background:#C0392B;color:#fff;box-shadow:0 4px 10px rgba(192,57,43,.26)}
.pp-ico-qr{color:var(--navy,#0B1B33);background:#EDF0F5}
.pp-ico-qr:hover{background:var(--navy,#0B1B33);color:#fff;box-shadow:0 4px 10px rgba(11,27,51,.28)}
.pp-ico-share{color:#0F6E56;background:#E4F5EF}
.pp-ico-share:hover{background:#0F6E56;color:#fff;box-shadow:0 4px 10px rgba(15,110,86,.26)}
.pp-ico-wa{color:#1DA851;background:#E6F8EE}
.pp-ico-wa:hover{background:#25D366;color:#fff;box-shadow:0 4px 10px rgba(37,211,102,.3)}
.pp-ico-copy{color:var(--ink-2,#3D4A5C);background:var(--surface-2,#F4F2EF)}
.pp-ico-copy:hover{background:var(--ink-2,#3D4A5C);color:#fff}
.pp-ico.is-on{background:var(--navy,#0B1B33);color:#fff}

/* Public-page version: same controls, laid out for a wide page rather than a
   narrow sidebar, and centred under the contact buttons. */
.co-share{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.co-share .pp-ico{flex:0 0 auto;width:42px;height:42px;padding:0}
.co-share .pp-ico svg{width:19px;height:19px}
.co-share-label{width:100%;text-align:center;font-size:12.5px;
  color:var(--ink-3,#6B7A90);margin-bottom:2px}
.co-qr{margin:12px auto 0;max-width:190px;padding:10px;background:#fff;
  border:1px solid var(--line,#E7E5E1);border-radius:10px;text-align:center}
.co-qr[hidden]{display:none}
.co-qr .pp-qr-img{max-width:150px;margin:0 auto 7px}

/* Visible to screen readers only - the icon buttons carry no visible text. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- "Your public page" prompt ----------------------------------------
   A dialog, so it uses position:fixed and its own scroll - on a short phone
   screen the card is taller than the viewport and must scroll inside itself
   rather than trapping the reader against the bottom edge. */
.pm-back{position:fixed;inset:0;z-index:120;background:rgba(11,27,51,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
  overflow-y:auto;animation:pmIn .18s ease}
@keyframes pmIn{from{opacity:0}to{opacity:1}}
.pm-back.is-gone{display:none}
.pm-box{background:#fff;border-radius:14px;width:100%;max-width:340px;
  overflow:hidden;position:relative;margin:auto;
  box-shadow:0 18px 50px rgba(11,27,51,.3)}
.pm-x{position:absolute;inset-inline-start:9px;top:7px;z-index:2;
  background:none;border:0;color:#fff;font-size:24px;line-height:1;
  cursor:pointer;padding:4px 8px;opacity:.85}
.pm-x:hover{opacity:1}

.pm-head{background:var(--navy,#0B1B33);padding:16px 14px;text-align:center}
.pm-ava{width:44px;height:44px;border-radius:50%;background:#fff;
  color:var(--navy,#0B1B33);display:grid;place-items:center;
  margin:0 auto 7px;font-size:18px;font-weight:800}
.pm-nm{color:#fff;font-size:14.5px;font-weight:700}
.pm-rl{color:var(--gold-light,#E3C15A);font-size:11.5px;margin-top:2px}

.pm-body{padding:16px 16px 18px;text-align:center}
.pm-t{font-size:16px;margin:0 0 5px;color:var(--navy,#0B1B33)}
.pm-p{font-size:12.8px;color:var(--ink-2,#3D4A5C);line-height:1.75;margin:0 0 11px}
.pm-url{font-size:11.5px;color:var(--ink-3,#6B7A90);background:var(--surface-2,#F4F2EF);
  border-radius:7px;padding:7px 8px;margin-bottom:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-add{background:var(--navy,#0B1B33)}
.pm-add:hover{background:var(--navy-700,#132B4D)}
.pm-icons{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:9px 0 0}
.pm-icons .pp-ico{flex:0 0 auto;width:38px;height:38px;padding:0}
.pm-icons .pp-ico svg{width:17px;height:17px}
.pm-qr{width:100%;margin-top:10px}
.pm-open{display:block;font-size:12.8px;color:var(--navy,#0B1B33);font-weight:600;
  border-top:1px solid var(--line,#E7E5E1);margin-top:13px;padding-top:11px;
  text-decoration:none}
.pm-open:hover{text-decoration:underline}
.pm-never{display:flex;gap:6px;align-items:center;justify-content:center;
  font-size:11.5px;color:var(--ink-3,#6B7A90);margin-top:10px;cursor:pointer}
.pm-never input{width:13px;height:13px;accent-color:var(--navy,#0B1B33)}

/* QR panel. Hidden until asked for; white plate because a QR needs light
   quiet space around it to scan, which a themed surface would not guarantee. */
.pp-qr{margin-top:9px;padding:9px;border:1px solid var(--line,#E7E5E1);border-radius:8px;
  background:#fff;text-align:center}
.pp-qr[hidden]{display:none}
.pp-qr-img{display:block;margin:0 auto 7px;max-width:150px}
.pp-qr-img svg{width:100%;height:auto;display:block}
.pp-ico.is-on{border-color:var(--navy,#0B1B33);color:var(--navy,#0B1B33);
  background:var(--surface-2,#F4F2EF)}

/* A field the form is complaining about. Border AND a tinted background AND a
   message underneath - colour alone is not a signal for the roughly 1 in 12
   men with red-green colour blindness, and it is invisible to a screen reader.
   The .field-err carries role="alert" for the same reason. */
.input.is-bad,.select.is-bad,.textarea.is-bad{
  border-color:#DC2626;background:#FEF2F2}
.input.is-bad:focus,.select.is-bad:focus,.textarea.is-bad:focus{
  border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.terms-row.is-bad{color:#991B1B}
.terms-row.is-bad input{outline:2px solid #DC2626;outline-offset:2px}
.field-err{color:#B91C1C;font-size:12.5px;line-height:1.55;margin-top:6px;
  display:flex;gap:6px;align-items:flex-start}
.field-err::before{content:"!";flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  background:#DC2626;color:#fff;font-size:10px;font-weight:800;line-height:14px;
  text-align:center;margin-top:1px}

/* Password rule checklist. Four chips that fill in as each rule is met, so
   "what is still missing" is answered on screen rather than by a failed
   submit. Grey and neutral until satisfied - red ticks on an empty field
   would scold somebody who has not started typing yet. */
.pw-checks{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0}
.pw-checks li{font-size:12px;line-height:1;color:var(--ink-4);background:var(--surface-2,#F4F2EF);
  border:1px solid var(--line,#E7E5E1);border-radius:999px;padding:5px 9px 5px 22px;
  position:relative;transition:color .15s,background .15s,border-color .15s}
[dir="rtl"] .pw-checks li{padding:5px 22px 5px 9px}
.pw-checks li::before{content:"";position:absolute;inset-inline-start:8px;inset-block-start:50%;
  width:8px;height:8px;margin-block-start:-4px;border-radius:50%;
  background:var(--line,#E7E5E1);transition:background .15s}
.pw-checks li.is-ok{color:var(--success-ink,#065F46);background:#ECFDF5;border-color:#A7F3D0}
.pw-checks li.is-ok::before{background:var(--success-ink,#065F46)}

.terms-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.65;
  color:var(--ink-2);margin:4px 0 18px;cursor:pointer}
.terms-row input{width:16px;height:16px;margin-top:2px;accent-color:var(--navy);flex:0 0 auto}
.terms-row a{color:var(--navy);font-weight:700}

@media(min-width:900px){
  .auth-split{grid-template-columns:0.86fr 1.14fr}
  .auth-aside{display:block}
}
@media(max-width:620px){
  /* Below this, one row would squeeze five chips to about 60px each and start
     truncating the words. Two rows of readable chips beats one row of "Devel…". */
  .role-picker{flex-wrap:wrap}
  .role-opt{flex:1 1 calc(33.333% - 4px)}
}
@media(max-width:560px){
  .auth-card-form{padding:26px 20px}
  .auth-title{font-size:23px}
}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:rgba(255,255,255,.62);padding:52px 0 24px;margin-top:70px}
/* Three columns, not five: "Browse by Governorate" and "Popular searches" were
   both removed, and five tracks would leave two empty gaps stretching the
   remaining links across the page. */
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;margin-bottom:34px}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:26px}}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{color:#fff;font-size:14px;margin-bottom:13px;font-weight:700}
.footer a{display:block;padding:4px 0;font-size:13.5px;transition:.15s}
.footer a:hover{color:var(--gold-light)}
.footer .logo{color:#fff;margin-bottom:11px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12.5px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Utils ---------- */
.flex{display:flex}.items-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.hide{display:none}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 13px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);font-size:13.5px;font-weight:500}
.pagination .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.breadcrumb{font-size:13px;color:var(--ink-3);margin-bottom:16px}
.breadcrumb a:hover{color:var(--navy)}

/* Compact select used in dashboard tables.
   Sized in ch units so it fits the longest Arabic option ("إعادة تفعيل",
   "تمت المراجعة") without clipping، the previous width:auto truncated them. */
.select-sm{
  width:auto;
  min-width:9.5rem;
  padding:5px 30px 5px 10px;
  font-size:12px;
  text-overflow:ellipsis;
}
html[dir="rtl"] .select-sm{ padding:5px 10px 5px 30px; }
@media (max-width:640px){ .select-sm{ min-width:8.5rem; } }

/* Overview cards that link somewhere */
.kpi-link{ text-decoration:none; color:inherit; display:block; transition:transform .12s ease, box-shadow .12s ease; }
.kpi-link:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(11,27,51,.10); border-color:#C9A227; }
.kpi-link:focus-visible{ outline:2px solid #C9A227; outline-offset:2px; }

/* Header identity chip */
.nav-me:hover{ background:#E7EBF2 !important; }
@media (max-width:900px){ .nav-verified{ display:none; } }


/* favourite heart on cards */
.card-fav{transition:transform .12s}
.card-fav:hover{transform:scale(1.12)}
.card-fav.is-fav{background:#fff !important}
/* Detail-page favourite button still sits on its own, so it keeps the
   absolute positioning the card version no longer needs. */
.prop-media .card-fav{position:absolute;top:11px;inset-inline-end:11px}

/* Register button - light green with white font */
.btn-register{background:#22C55E;color:#fff !important;border:none}
.btn-register:hover{background:#16A34A;color:#fff !important;box-shadow:var(--shadow)}
.nav a.btn-register,.nav-actions a.btn-register{color:#fff !important}
.nav a.btn-register:hover,.nav-actions a.btn-register:hover{color:#fff !important;background:#16A34A}

/* card image link fills the media box */
.card-media-link{display:block;width:100%;height:100%}
.card-media-link img{width:100%;height:100%;object-fit:cover;display:block}

/* ════════════════════════════════════════════════
   Card Share Buttons
════════════════════════════════════════════════ */
.card-share-wrap{position:relative}
.card-share-btn{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.96);color:var(--ink-2);
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(11,27,51,.22);
  transition:.15s;
}
.card-share-btn:hover{background:#fff;color:var(--navy);transform:scale(1.1)}
/* Opens DOWNWARD. The share button now lives at the top of the card, so the
   old upward popover would have been clipped by .card-media's overflow:hidden
   and simply never appeared. Anchored to the end edge rather than centred so
   it cannot spill outside the card either. */
.card-share-pop{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);padding:6px;min-width:158px;
  display:none;z-index:30;
}
.card-share-pop.open{display:block}
.card-share-item{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
  border:none;background:none;cursor:pointer;width:100%;text-align:start;
  transition:.12s;
}
.card-share-item:hover{background:var(--surface-2)}
.card-share-wa{color:#128C7E}
.card-share-wa:hover{background:#E8F8F4;color:#128C7E}
.card-share-fb{color:#1877F2}
.card-share-fb:hover{background:#EEF4FF;color:#1877F2}
.card-share-copy{color:var(--ink-2)}

/* ════════════════════════════════════════════════
   Active Filter Chips (search page)
════════════════════════════════════════════════ */
.active-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:16px;padding:12px 14px;
  background:#EFF4FF;border:1px solid #C7D9FF;border-radius:var(--radius-sm);
}
.active-filters-label{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.active-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;
  background:#fff;border:1px solid #C7D9FF;color:var(--navy);
  text-decoration:none;transition:.12s;
}
.active-chip:hover{background:var(--danger);border-color:var(--danger-ink);color:#fff}
.active-chip span{opacity:.6;font-size:14px;line-height:1}
.active-chip-clear{background:var(--navy);color:#fff;border-color:var(--navy)}
.active-chip-clear:hover{background:var(--danger);border-color:var(--danger-ink)}

/* Filter toggle (featured checkbox) */
.filter-toggle{display:flex;align-items:center;gap:10px;cursor:pointer}
.filter-toggle input{display:none}
.filter-toggle-track{
  width:38px;height:21px;border-radius:99px;background:var(--line);
  position:relative;transition:.18s;flex-shrink:0;
}
.filter-toggle-track::after{
  content:'';position:absolute;top:3px;inset-inline-start:3px;
  width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.18s;
}
.filter-toggle input:checked + .filter-toggle-track{background:var(--gold)}
.filter-toggle input:checked + .filter-toggle-track::after{inset-inline-start:calc(100% - 18px)}
.filter-toggle-label{font-size:13px;font-weight:600;color:var(--ink-2)}

/* ════════════════════════════════════════════════
   HOME HERO  (conflict-free, no .hero class)
════════════════════════════════════════════════ */
.home-hero{
  position:relative;background:#040D1E;color:#fff;
  padding:108px 0 76px;overflow:hidden;
}
.hh-bg{position:absolute;inset:0;pointer-events:none}
/* Real photo layer - a modern residential exterior, since this is the
   page people land on to browse property. Raised opacity from the first
   pass (was too subtle to register as a photo); the mesh gradient below
   still darkens enough on the left for the copy to stay legible. */
.hh-photo{
  position:absolute;inset:0;
  background-image:url('../img/hero-home.webp');
  background-size:cover;background-position:center 38%;
  opacity:.7;
}
.hh-mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 75% at 8% 52%,rgba(11,27,51,.82),transparent 68%),
    radial-gradient(ellipse 65% 50% at 90% 22%,rgba(15,118,110,.22),transparent 62%),
    radial-gradient(ellipse 50% 55% at 58% 88%,rgba(201,162,39,.1),transparent 58%);
}
.hh-grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  animation:hh-drift 26s linear infinite;
}
@keyframes hh-drift{from{background-position:0 0}to{background-position:64px 64px}}
.hh-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.hh-orb-1{width:540px;height:540px;top:-140px;inset-inline-end:-100px;background:rgba(201,162,39,.1);animation:hh-float 11s ease-in-out infinite}
.hh-orb-2{width:440px;height:440px;bottom:-80px;inset-inline-start:-80px;background:rgba(15,118,110,.14);animation:hh-float 14s ease-in-out infinite;animation-delay:-6s}
.hh-orb-3{width:300px;height:300px;top:32%;inset-inline-end:24%;background:rgba(28,56,100,.42);animation:hh-float 10s ease-in-out infinite;animation-delay:-3s}
@keyframes hh-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-26px) scale(1.03)}}

/* two-col grid */
.hh-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 456px;gap:60px;align-items:center;
}
@media(max-width:1080px){.hh-inner{grid-template-columns:1fr 400px;gap:40px}}
@media(max-width:880px){.hh-inner{grid-template-columns:1fr;gap:44px};.home-hero{padding:84px 0 60px}}

/* left: copy */
.hh-pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(201,162,39,.38);
  background:rgba(255,255,255,.06);
  padding:9px 22px;border-radius:99px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  color:#fff;margin-bottom:28px;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.hh-pill-dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);animation:hh-pulse 2.4s ease infinite;flex-shrink:0;
}
@keyframes hh-pulse{0%,100%{opacity:1}50%{opacity:.2}}
.hh-h1{
  font-size:clamp(38px,4.6vw,66px);font-weight:800;
  line-height:1.06;letter-spacing:-.04em;color:#fff;margin-bottom:22px;
}
.hh-h1 em{
  font-style:italic;display:block;
  font-family:'Playfair Display','Palatino','Georgia',serif;
  font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(128deg,#E8B93A 0%,#F5D06B 55%,#F9E4A0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
html[dir="rtl"] .hh-h1 em{
  font-family:var(--font-ar);font-style:normal;letter-spacing:0;
}
.hh-sub{
  font-size:clamp(15px,1.7vw,17.5px);color:#fff;
  line-height:1.78;margin-bottom:36px;max-width:460px;font-weight:400;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.hh-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.hh-actions .btn{font-size:15px;padding:14px 28px;letter-spacing:.01em}
.btn-glass{
  background:transparent;border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.85);
}
.btn-glass:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}

/* right: search card */
.hh-card{
  background:#fff;border-radius:20px;
  padding:28px 26px;color:var(--ink);
  box-shadow:0 40px 100px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);
}
.hh-card-tabs{
  display:flex;background:#F4F6FA;border-radius:10px;
  padding:3px;gap:2px;margin-bottom:20px;
  border:1px solid var(--line);
}
.hh-card-tab{
  flex:1;padding:8px 6px;border-radius:8px;border:none;background:none;
  font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.hh-card-tab.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.hh-card-field{margin-bottom:12px}
.hh-card-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.hh-card-select,.hh-card-input{
  width:100%;padding:10px 13px;border:1.5px solid #E8ECF4;border-radius:9px;
  background:#FAFBFD;font-size:14px;color:var(--ink);appearance:none;
  transition:.14s;
}
.hh-card-select:focus,.hh-card-input:focus{
  outline:none;border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 3px rgba(11,27,51,.08);
}
.hh-card-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hh-card-submit{
  width:100%;padding:14px;margin-top:6px;border-radius:10px;border:none;cursor:pointer;
  font-size:14.5px;font-weight:700;letter-spacing:.02em;
  background:var(--navy);color:#fff;
  box-shadow:0 4px 18px -4px rgba(11,27,51,.45);
  transition:.16s;
}
.hh-card-submit:hover{background:#1A3A68;box-shadow:0 8px 24px -4px rgba(11,27,51,.55);transform:translateY(-1px)}
.hh-card-divider{
  margin:14px 0 12px;border:none;border-top:1px solid var(--line);
}
.hh-card-quick{display:flex;flex-wrap:wrap;gap:6px}
.hh-card-quick-link{
  padding:5px 13px;border-radius:99px;font-size:12px;font-weight:600;
  background:#F4F6FA;color:var(--ink-2);
  border:1px solid #E3E8EF;text-decoration:none;transition:.12s;
}
.hh-card-quick-link:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* stats strip inside hero */
.hh-stats-strip{
  position:relative;z-index:2;
  margin-top:64px;padding-top:36px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:repeat(4,1fr);
}
@media(max-width:880px){.hh-stats-strip{margin-top:44px;padding-top:28px;grid-template-columns:repeat(2,1fr)}}
.hh-stat{text-align:center;padding:12px 10px;position:relative}
.hh-stat+.hh-stat::before{
  content:'';position:absolute;inset-block:15%;inset-inline-start:0;
  width:1px;background:rgba(255,255,255,.1);
}
@media(max-width:880px){.hh-stat:nth-child(even)::before{display:none}}
.hh-stat-n{
  font-size:clamp(28px,3.4vw,44px);font-weight:800;color:#fff;
  letter-spacing:-.04em;line-height:1;
}
.hh-stat-l{font-size:11.5px;color:rgba(255,255,255,.38);margin-top:6px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* ── Property type pill strip ── */
.pt-pills{
  display:flex;gap:8px;overflow-x:auto;padding-block:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pt-pills::-webkit-scrollbar{display:none}
.pt-pill{
  flex-shrink:0;padding:10px 22px;border-radius:99px;
  background:#fff;border:1.5px solid var(--line);
  text-decoration:none;color:var(--ink-2);font-size:13px;font-weight:600;
  transition:.16s;white-space:nowrap;letter-spacing:.01em;
}
.pt-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy);
  transform:translateY(-2px);box-shadow:0 6px 18px -4px rgba(11,27,51,.24)}
.pt-pill.pt-pill-all{border-style:dashed;opacity:.65}
.pt-pill.pt-pill-all:hover{opacity:1}

/* ── How it works ── */
/* ── Why us - numbered editorial style ── */
/* ---------- Why Aqaratk ----------
   Was a 3-up bordered table of numbered claims. Rebuilt as six cards on a warm
   tinted band: six specific, checkable reasons beat three vague ones, and the
   band separates the argument from the listings above it without another slab
   of navy competing with the featured showcase. */
.why-sec{position:relative;isolation:isolate;padding:40px 0 44px;overflow:hidden;
  background:var(--surface-2,#F4F2EF)}
.why-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 55% at 6% 0%,rgba(201,162,39,.13),transparent 62%),
    radial-gradient(44% 55% at 96% 100%,rgba(15,118,110,.11),transparent 62%)}
.why-sec::before,.why-sec::after{content:'';position:absolute;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line,#E7E5E1),transparent)}
.why-sec::before{top:0}
.why-sec::after{bottom:0}

.why-head{text-align:center;max-width:660px;margin:0 auto 24px}
.why-kicker{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dark,#8A6D12)}
html[dir="rtl"] .why-kicker{letter-spacing:0}
.why-h2{margin:0;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;
  color:var(--navy,#0B1B33);line-height:1.28}
.why-h2::after{content:'';display:block;width:46px;height:3px;border-radius:2px;margin:10px auto 0;
  background:linear-gradient(90deg,var(--gold,#C9A227),var(--gold-light,#E3C15A))}
.why-lede{margin:16px 0 0;font-size:15.5px;line-height:1.8;color:var(--ink-3,#64748B)}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:940px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.why-grid{grid-template-columns:1fr}}

.why-card{position:relative;background:var(--surface,#fff);
  border:1px solid var(--line,#E7E5E1);border-radius:14px;
  padding:16px 17px 17px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
/* Gold rule opens across the top on hover - the same gesture as the featured
   cards, so the page has one vocabulary rather than three. */
.why-card::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;
  transform:scaleX(0);transition:transform .28s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(90deg,var(--gold,#C9A227),var(--gold-light,#E3C15A))}
.why-card:hover{transform:translateY(-3px);border-color:transparent;
  box-shadow:0 14px 34px -16px rgba(11,27,51,.3)}
.why-card:hover::before{transform:scaleX(1)}

.why-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  flex:0 0 auto;color:var(--navy,#0B1B33);
  background:linear-gradient(145deg,rgba(201,162,39,.20),rgba(201,162,39,.07));
  border:1px solid rgba(201,162,39,.28)}
/* Icon beside the title, not stacked over it: the stacked version cost 59px
   of height per card for decoration. */
.why-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.why-title{font-size:14.5px;font-weight:800;margin:0;color:var(--navy,#0B1B33);
  letter-spacing:-.01em;line-height:1.35}
.why-desc{font-size:13px;color:var(--ink-3,#64748B);line-height:1.6;margin:0}

@media(prefers-reduced-motion:reduce){
  .why-card,.why-card::before{transition:none}
  .why-card:hover{transform:none}
}

/* ── Governorate grid ── */
.gov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.gov-card{
  display:flex;flex-direction:column;gap:3px;
  padding:15px 16px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);text-decoration:none;transition:.16s;
}
.gov-card:hover{border-color:var(--navy);background:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}
.gov-name{font-size:14px;font-weight:700;color:var(--navy);transition:.16s}
.gov-count{font-size:12px;color:var(--ink-3);transition:.16s}
.gov-card:hover .gov-name,.gov-card:hover .gov-count{color:#fff}

/* ── CTA split ── */
.cta-split{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
@media(max-width:680px){.cta-split{grid-template-columns:1fr}}
.cta-panel{padding:56px 48px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(max-width:680px){.cta-panel{padding:38px 28px}}
.cta-seller{background:linear-gradient(145deg,#071628,#0D2545)}
.cta-broker{background:linear-gradient(145deg,#083247,#095C50)}
.cta-tag{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark);border:1px solid rgba(201,162,39,.35);
  padding:4px 12px;border-radius:99px;
}
.cta-panel h3{color:#fff;font-size:clamp(20px,2.4vw,27px);font-weight:800;margin:0;line-height:1.2;letter-spacing:-.02em}
.cta-panel p{color:rgba(255,255,255,.58);font-size:14.5px;margin:0;line-height:1.68}
.cta-panel .btn{margin-top:4px}

/* ═══════════════════════════════════════════════════════════
   PREMIUM REFRESH, trust bar, testimonials, FAQ, nav
   ═══════════════════════════════════════════════════════════ */

/* ---------- Trust bar (replaces raw DB counts) ---------- */
.trust-bar{background:var(--surface);border-block:1px solid var(--line);padding:var(--s6) 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.trust-item{display:flex;gap:var(--s3);align-items:flex-start}
.trust-ic{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(15,118,110,.08);color:var(--teal)}
.trust-item b{display:block;font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:2px;
  letter-spacing:-.01em}
.trust-item span{font-size:13.5px;color:var(--ink-3);line-height:1.6}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.trust-grid{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- FAQ (accordion, no JS dependency) ---------- */
.faq-wrap{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;padding:var(--s5) 0;font-size:16.5px;font-weight:600;
  color:var(--navy);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s4);transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--teal)}
.faq-item summary::after{content:'';width:11px;height:11px;flex-shrink:0;
  border-inline-end:2px solid var(--ink-3);border-block-end:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s;margin-block-start:-5px}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-block-start:3px}
.faq-item p{padding:0 0 var(--s5);color:var(--ink-2);line-height:1.85;font-size:15.5px;
  max-width:68ch}

/* ---------- Public help center (pages/help.php) ---------- */
.phlp-wrap{max-width:1040px}
.phlp-crumb{margin:0 0 var(--s5);font-size:13px;color:var(--ink-3)}
.phlp-crumb a{color:var(--ink-3)}
.phlp-crumb a:hover{color:var(--navy)}

.phlp-head{margin-bottom:var(--s6)}
.phlp-head h1{font-size:clamp(23px,3vw,32px);margin:6px 0 8px;color:var(--navy)}
.phlp-lede{margin:0;color:var(--ink-3);font-size:15px;line-height:1.75;max-width:64ch}
.phlp-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s4)}
.phlp-chip{font-size:12.5px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px}

.phlp-search{margin:0 0 var(--s7);max-width:440px}
.phlp-search .input{width:100%}

.phlp-topic{margin-bottom:var(--s7)}
.phlp-topic h2{margin:0 0 var(--s4);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

.phlp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.phlp-card{display:block;padding:16px 18px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.phlp-card:hover{border-color:var(--gold-dark);box-shadow:0 8px 20px rgba(11,27,51,.08);transform:translateY(-2px)}
.phlp-card[hidden]{display:none}
.phlp-card h3{margin:0 0 6px;font-size:15px;color:var(--navy)}
.phlp-card p{margin:0 0 10px;color:var(--ink-3);font-size:13.2px;line-height:1.65}
.phlp-min{font-size:12px;color:var(--ink-4)}

.phlp-layout{display:grid;grid-template-columns:1fr 220px;gap:var(--s6);align-items:start}
.phlp-toc{position:sticky;top:90px;border-inline-start:1px solid var(--line);padding-inline-start:var(--s5)}
.phlp-toc-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.phlp-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.phlp-toc a{font-size:13.5px;color:var(--ink-2)}
.phlp-toc a:hover{color:var(--teal)}
@media(max-width:860px){.phlp-layout{grid-template-columns:1fr}.phlp-toc{position:static;border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:var(--s5)}}

.phlp-art h2{font-size:21px;margin:var(--s7) 0 var(--s4);color:var(--navy)}
.phlp-art h2:first-child{margin-top:0}
.phlp-art p{color:var(--ink-2);line-height:1.85;font-size:15.5px;max-width:72ch}
.phlp-art ul, .phlp-art ol{color:var(--ink-2);line-height:1.85;font-size:15.5px;max-width:72ch;padding-inline-start:22px}
.phlp-art img{max-width:100%;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(11,27,51,.08);margin:var(--s4) 0}
.phlp-art img.phlp-phone{max-width:280px;display:block}
.phlp-note{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:var(--s4) var(--s5);font-size:14px;color:var(--ink-2);margin:var(--s4) 0}

/* ---------- Section rhythm ---------- */
.section-lg{padding:var(--s9) 0}
.sec-center{text-align:center;max-width:620px;margin:0 auto var(--s7)}
.sec-center h2{margin-bottom:var(--s3)}
.sec-center p{color:var(--ink-3);font-size:16.5px;line-height:1.75}

/* ---------- Dashboard analytics ---------- */
.kpi{font-size:26px;font-weight:800;color:var(--navy);line-height:1.2;margin-top:2px}
.trend{font-size:12px;font-weight:700;padding:1px 6px;border-radius:5px;vertical-align:middle}
.trend.up{background:#E8F6EE;color:#15803D}
.trend.down{background:#FDECEC;color:#B91C1C}
.trend.flat{background:var(--surface-2);color:var(--ink-3)}
/* Bar sparkline. Flex with align-items:flex-end means each bar's height is a
   plain percentage, so no chart library and no extra request. */
.spark{display:flex;align-items:flex-end;gap:2px;width:100%}
.spark i{flex:1;min-width:2px;background:var(--navy);opacity:.75;border-radius:2px 2px 0 0}
.spark i:hover{opacity:1;background:var(--gold)}
/* Completeness / progress bar */
.cbar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:99px}
/* Lead notes */
.lead-notes-row td{border-top:0}
.lead-notes{padding:8px 0 4px}
.lead-note{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:7px 10px;border-inline-start:3px solid var(--line);margin-bottom:6px;
  background:var(--surface-2);border-radius:0 7px 7px 0;font-size:13px}
.lead-note.is-done{opacity:.5}
.lead-note-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.lead-note-add .input{flex:1;min-width:150px;font-size:13.5px;padding:7px 10px}
@media(max-width:760px){
  .lead-note-add{flex-direction:column;align-items:stretch}
  .lead-note-add .btn{width:100%}
}

/* ---------- Company services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px;text-decoration:none;color:inherit;height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,27,51,.11);border-color:#cfd8e6}
.svc-card-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--navy);margin-bottom:14px;flex:0 0 auto}
.svc-card-ico svg{width:23px;height:23px}
.svc-card h2{font-size:17px;margin:0 0 6px;color:var(--navy);line-height:1.35}
.svc-card-tag{font-size:13.5px;color:var(--gold-dark,#8a6d13);font-weight:600;margin:0 0 9px;line-height:1.5}
.svc-card-sum{font-size:13.5px;color:var(--ink-3);line-height:1.65;margin:0 0 14px}
.svc-card-go{margin-top:auto;font-size:13px;font-weight:700;color:var(--navy)}

.svc-why{margin-top:52px}
.svc-why h2{font-size:22px;margin:0 0 18px}
.svc-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.svc-why-grid h3{font-size:15.5px;margin:0 0 7px;color:var(--navy)}
.svc-why-grid p{font-size:14px;line-height:1.7;color:var(--ink-3);margin:0}

.svc-cta{margin-top:52px;text-align:center;background:var(--navy);color:#fff;
  border-radius:16px;padding:40px 24px}
.svc-cta h2{font-size:23px;margin:0 0 8px;color:#fff}
.svc-cta p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto 22px}
.svc-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.svc-cta .btn-outline{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.svc-cta .btn-outline:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* Detail: content column plus a sticky request panel. */
.svc-detail{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:36px;align-items:start}
.svc-head-ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--navy);margin-bottom:16px}
.svc-head-ico svg{width:27px;height:27px}
.svc-main h1{font-size:31px;line-height:1.2;margin:0 0 10px;letter-spacing:-.02em}
.svc-lead{font-size:17px;font-weight:600;color:var(--gold-dark,#8a6d13);margin:0 0 14px;line-height:1.5}
.svc-summary{font-size:16px;line-height:1.8;color:var(--ink-2);margin:0 0 26px}
.svc-body p{font-size:15px;line-height:1.85;color:var(--ink-2);margin:0 0 16px;max-width:68ch}
.svc-main h2{font-size:20px;margin:34px 0 14px}

.svc-feats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.svc-feats li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.svc-feats svg{width:17px;height:17px;color:var(--success,#15803D);flex:0 0 auto;margin-top:4px}

.svc-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.svc-steps li{display:flex;gap:14px;align-items:flex-start}
.svc-steps .n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:13.5px;font-weight:800}
.svc-steps b{display:block;font-size:15px;color:var(--navy);margin-bottom:3px}
.svc-steps p{font-size:14px;line-height:1.7;color:var(--ink-3);margin:0}

.svc-faq details{border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin-bottom:9px;background:#fff}
.svc-faq summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--navy);list-style:none}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:'+';float:inline-end;color:var(--ink-3);font-weight:400;font-size:18px;line-height:1}
.svc-faq details[open] summary::after{content:'−'}
.svc-faq p{font-size:14px;line-height:1.75;color:var(--ink-2);margin:10px 0 0}

.svc-side{position:sticky;top:84px}
.svc-form-panel{padding:20px}
.svc-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--ink-3);font-size:12.5px}
.svc-or::before,.svc-or::after{content:'';flex:1;height:1px;background:var(--line)}

@media(max-width:900px){
  /* The request form moves ABOVE the long-form copy on small screens: it is
     the action the page exists for, and burying it under 800 words of prose
     is how a services page gets read but never used. */
  .svc-detail{grid-template-columns:1fr;gap:26px}
  .svc-side{position:static;order:-1}
  .svc-main h1{font-size:25px}
  .svc-summary{font-size:15px}
}
@media(max-width:620px){
  .svc-cta{padding:30px 18px;border-radius:12px}
  .svc-cta h2{font-size:20px}
  .svc-cta-btns .btn{flex:1;min-width:140px}
}

/* ---------- Modal ----------------------------------------------------------
   position:fixed with a flex backdrop. Used for destructive confirmations,
   where a native confirm() is too easy to dismiss by reflex. */
.modal-back{position:fixed;inset:0;z-index:500;background:rgba(11,27,51,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-back[hidden]{display:none}
.modal-card{background:#fff;border-radius:14px;padding:22px;max-width:460px;width:100%;
  box-shadow:0 20px 60px rgba(11,27,51,.35)}
.modal-card .field{margin-bottom:16px}

/* ---------- Breadcrumbs + location landing pages ---------- */
.crumbs{margin-bottom:18px;font-size:12.5px;color:var(--ink-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumbs li{display:flex;align-items:center;gap:6px}
/* Separator via ::before so it is decorative and never read aloud or copied. */
.crumbs li + li::before{content:'›';opacity:.5}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.loc-head{margin-bottom:20px}
.loc-head h1{font-size:28px;line-height:1.25;margin:0 0 10px;letter-spacing:-.02em}
.loc-intro{font-size:15px;line-height:1.75;color:var(--ink-2);max-width:70ch;margin:0}
.loc-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-3)}
.loc-stats b{color:var(--navy);font-weight:800}

.loc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.loc-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;
  color:var(--ink-2);text-decoration:none;transition:.15s;white-space:nowrap}
.loc-chip:hover{border-color:var(--navy);color:var(--navy)}
.loc-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.loc-chip .n{font-size:11px;opacity:.7;font-weight:700}

.loc-block{margin-top:40px}
.loc-block h2{font-size:19px;margin:0 0 14px}
.loc-links{display:flex;flex-wrap:wrap;gap:8px}
.loc-links a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--ink-2);text-decoration:none;transition:.15s}
.loc-links a:hover{border-color:var(--navy);color:var(--navy);background:#fff}
.loc-links .n{font-size:11px;color:var(--ink-3);font-weight:700}

.loc-guide ul{margin:0;padding-inline-start:20px;max-width:72ch}
.loc-guide li{font-size:14.5px;line-height:1.8;color:var(--ink-2);margin-bottom:8px}
.loc-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
@media(max-width:620px){
  .loc-head h1{font-size:23px}
  .loc-intro{font-size:14px}
  /* Chip strips scroll horizontally rather than wrapping into a tall block
     that pushes the listings below the fold on a phone. */
  .loc-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .loc-chip{scroll-snap-align:start}
}

/* ---------- Cookie consent banner ---------- */
.cookie-bar{position:fixed;inset-inline:0;bottom:0;z-index:400;background:#0B1B33;color:#fff;
  border-top:3px solid var(--gold);box-shadow:0 -6px 28px rgba(11,27,51,.28);
  padding:14px 0;transition:transform .25s ease,opacity .25s ease}
.cookie-bar.is-gone{transform:translateY(110%);opacity:0}
.cookie-inner{display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.cookie-text{flex:1;min-width:260px}
.cookie-text b{display:block;font-size:14.5px;margin-bottom:3px}
.cookie-text p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.82)}
.cookie-text a{color:var(--gold-light);text-decoration:underline}
.cookie-actions{display:flex;gap:9px;flex:0 0 auto}
/* The decline button must not read as disabled: refusing has to look as
   available as accepting, or the consent is not freely given. */
.cookie-actions .btn-outline{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.cookie-actions .btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
/* Keep the bar clear of the iPhone home indicator. */
@supports (padding:max(0px)){ .cookie-bar{padding-bottom:max(14px, env(safe-area-inset-bottom)); } }
@media(max-width:680px){
  .cookie-inner{flex-direction:column;align-items:stretch;gap:12px}
  .cookie-actions{width:100%}
  .cookie-actions .btn{flex:1;padding:11px 10px}
  .cookie-text p{font-size:12.5px}
}

/* ---------- Buyer action strip ---------- */
.buyer-alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.buyer-alert{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:9px;
  background:#fff;border:1px solid var(--line);text-decoration:none;transition:.15s}
.buyer-alert:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.ba-n{font-size:21px;font-weight:800;color:var(--navy);flex:0 0 auto;line-height:1}
.ba-l{font-size:12.5px;color:var(--ink-3);line-height:1.4}
@media(max-width:520px){ .buyer-alerts{grid-template-columns:1fr} }

/* ---------- Security console ---------- */
.sec-checks{display:flex;flex-direction:column;gap:2px}
.sec-check{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:8px}
.sec-check-ic{flex:0 0 auto;font-size:15px;line-height:1.4}
.sec-check-t{font-size:14px;font-weight:600;color:var(--navy);line-height:1.45}
.sec-check-d{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.55}
.is-disabled{opacity:.45;pointer-events:none}

/* ---------- Admin notification bell ---------- */
.nav-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  color:var(--ink-2);background:#fff;flex:0 0 auto;transition:.15s}
.nav-bell:hover{border-color:var(--navy);color:var(--navy);background:var(--surface-2)}
.nav-bell-badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:#DC2626;color:#fff;
  font-size:11px;font-weight:800;line-height:18px;text-align:center;
  border:2px solid #fff;font-variant-numeric:tabular-nums}
.nav-bell-badge.is-zero{display:none}
@media(max-width:1180px){
  /* In the stacked mobile drawer an icon-only square button is an orphan, so it
     becomes a full-width labelled row like the other nav items. */
  .nav-bell{width:auto;height:auto;justify-content:flex-start;padding:11px 13px;gap:9px}
  .nav-bell::after{content:attr(aria-label);font-size:15.5px;font-weight:500}
  .nav-bell-badge{position:static;inset-inline-end:auto;top:auto;margin-inline-start:auto;border:0}
  .nav-bell-badge.is-zero{display:none}
}

/* ---------- Nav polish ---------- */
.nav-lang{font-size:12px !important;font-weight:700 !important;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:7px;padding:6px 11px !important;
  color:var(--ink-3) !important;text-transform:uppercase}
.nav-lang:hover{border-color:var(--navy);color:var(--navy) !important;background:transparent !important}

/* Facebook mark in the bar. No border or plate of its own - the SVG already
   carries its brand disc, and boxing it inside the .nav-bell square would put
   a grey outline around a logo that does not need one. */
.nav-fb{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;line-height:0;
  transition:transform .16s ease,filter .16s ease}
.nav-fb:hover{transform:translateY(-1px);filter:brightness(1.08)}
.nav-fb svg{display:block}
@media(max-width:1340px){
  .nav-fb{width:32px;height:32px}
  .nav-fb svg{width:20px;height:20px}
}
@media(max-width:1180px){
  /* In the drawer every row is a labelled full-width line, so an unlabelled
     square would read as a stray graphic. */
  .nav-fb{width:auto;height:auto;justify-content:flex-start;padding:11px 13px;gap:9px;
    align-self:stretch}
  .nav-fb::after{content:'Facebook';font-size:15.5px;font-weight:500;color:var(--ink-2)}
}

@media(max-width:1180px){
  .nav-wrap{max-height:calc(100vh - 78px);overflow-y:auto;padding:var(--s3) var(--s4) var(--s5)}
  .nav{gap:2px}
  .nav a{padding:13px var(--s3);font-size:15.5px}
  .nav-lang{align-self:flex-start;margin-block-start:var(--s3)}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HARDENING
   The page-level layouts (search, dashboard, property, map, contact) already
   have working breakpoints. This block fixes the cross-cutting issues that
   individual layouts can't: viewport overflow, touch ergonomics, iOS quirks,
   and the small-screen end of the range (<420px) that was untested.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 1. Never allow horizontal scroll -------------------------------------
   A single long word, unbroken Arabic string, pasted URL or wide inline style
   can push the viewport wider than the screen. Once that happens every page
   feels broken, and the cause is usually invisible in desktop testing. */
html, body { max-width:100%; overflow-x:hidden; }
body { overflow-wrap:break-word; }
/* Long refs, emails and URLs are the usual culprits */
.card-title, .card-loc, .prop-title, .table td, .faq-item p,
.ab-story p, p, h1, h2, h3, h4 { overflow-wrap:break-word; }
/* Media and embeds must never exceed their container */
img, svg, video, iframe, canvas, table { max-width:100%; }

/* ---- 2. Touch targets (WCAG 2.5.5 → 44×44px) -----------------------------
   Card overlay controls sat at 38px and cluster together, which is where
   mis-taps actually happen. Grow the hit area without changing the visual
   size, so the design is untouched. */
@media (hover:none) and (pointer:coarse) {
  .card-fav, .card-share-btn {
    position:relative;
  }
  .card-fav::after, .card-share-btn::after {
    content:''; position:absolute; inset:-4px;   /* 38 + 8 = 46px hit area */
  }
  .nav a, .dash-nav a, .faq-item summary {
    min-height:44px; display:flex; align-items:center;
  }
  /* 44px, not 42 and 38. WCAG 2.5.5 asks for 44x44 and both were under it -
     .btn-sm especially, which is the size used for row actions in the
     dashboards where the next control along is often Delete. Padding grows
     with it so the label stays centred rather than floating at the top. */
  .btn    { min-height:44px; }
  .btn-sm { min-height:44px; padding-block:9px; }
  /* Checkboxes and radios ship ~13px from the browser. Anything the user has
     to hit precisely needs the same floor. */
  input[type="checkbox"], input[type="radio"] { min-width:20px; min-height:20px; }
  .bulk-cb, .bulk-all { width:20px; height:20px; }
  /* Remove the lift-on-hover, which sticks on touch devices */
  .btn-primary:hover, .btn-gold:hover,
  .card:hover, .ab-val:hover, .vm-pillar:hover, .svc-card:hover, .svc-cat:hover {
    transform:none;
  }
}

/* ---- 3. iOS: stop the viewport zooming when a field is focused ------------
   Safari on iOS zooms in whenever a focused input has font-size < 16px. The
   layout then sits off-centre and the user has to pinch back out. This is the
   single most common mobile complaint on form-heavy sites, and the fix is
   simply to meet the 16px threshold on touch devices. Desktop keeps 14px. */
@media (max-width:860px) {
  .input, .select, .textarea,
  .hh-card-input, .hh-card-select,
  .map-geo-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  select, textarea {
    font-size:16px;
  }
}

/* ---- 4. Small phones (<=420px) - the untested end of the range ------------ */
@media (max-width:420px) {
  .container { padding-inline:14px; }
  body { font-size:16px; }
  h1 { font-size:clamp(27px,7.6vw,34px); }
  h2 { font-size:clamp(22px,6vw,27px); }
  h3 { font-size:18px; }

  /* Hero */
  .home-hero { padding:64px 0 44px; }
  .hh-h1 { font-size:clamp(30px,8.6vw,38px); }
  .hh-pill { font-size:12.5px; padding:8px 15px; }
  .hh-actions { flex-direction:column; }
  .hh-actions .btn { width:100%; }

  /* Search card */
  .hh-card { padding:18px 16px; }
  .hh-card-row2 { grid-template-columns:1fr; gap:12px; }

  /* Cards / grids collapse to one column */
  .cards-grid { grid-template-columns:1fr; }
  .gov-grid { grid-template-columns:1fr 1fr; }
  .kpis { grid-template-columns:1fr 1fr; }

  /* Section rhythm tightens so pages don't feel endless */
  .section, .section-lg { padding-block:44px; }
  .sec-center { margin-bottom:28px; }

  /* Page heroes */
  .ab-hero, .vm-hero { padding:44px 0 56px; }
  .ab-statband { grid-template-columns:1fr 1fr; margin-top:-30px; }
  .ab-built, .vm-commit { padding:24px 18px; }
  .ab-cta, .vm-cta { padding:30px 18px; }
  .vm-vision-body { padding:24px 18px; }
  .vm-mission { padding:20px 16px; }

  /* Auth cards shouldn't have desktop padding on a small screen */
  .auth-card { padding:24px 18px; }
  .auth-wrap { padding:24px 14px; }

  /* Footer stacks */
  .footer-grid { grid-template-columns:1fr; gap:26px; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
}

/* ---- 5. Header on small screens ------------------------------------------ */
@media (max-width:420px) {
  .header-inner { height:58px; gap:12px; }
  .logo { font-size:19px; gap:8px; }
  .logo-mark, .logo-mark img { width:34px; height:34px; }
  .nav-wrap { top:58px; }
}

/* ---- 6. Tables: give them room to scroll rather than crushing columns ----- */
@media (max-width:760px) {
  .table-scroll { -webkit-overflow-scrolling:touch; }
  .table-scroll .table { min-width:560px; }   /* scroll instead of squash */
  .table th, .table td { padding:10px 12px; font-size:13.5px; }
}

/* ---- 7. Notched devices - respect the safe area -------------------------- */
@supports (padding:max(0px)) {
  .container { padding-inline:max(14px, env(safe-area-inset-left)); }
  .footer { padding-bottom:max(0px, env(safe-area-inset-bottom)); }
}

/* ---- 8. Landscape phones: hero must not eat the whole screen ------------- */
@media (max-height:520px) and (orientation:landscape) {
  .home-hero { padding:44px 0 32px; }
  .ab-hero, .vm-hero, .hero { padding-block:36px 44px; }
  .auth-wrap { min-height:auto; padding-block:28px; }
  .nav-wrap { max-height:calc(100vh - 58px); overflow-y:auto; }
}

/* ---- 9. Horizontal pill strips: hint that they scroll -------------------- */
@media (max-width:760px) {
  .pt-pills, .gallery-thumbs, .hh-card-tabs {
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pt-pills::-webkit-scrollbar, .hh-card-tabs::-webkit-scrollbar { display:none; }
  .pt-pill { scroll-snap-align:start; }
  /* Fade on the trailing edge so it reads as scrollable, not cut off */
  .pt-pills { mask-image:linear-gradient(to right,#000 88%,transparent); }
  html[dir="rtl"] .pt-pills { mask-image:linear-gradient(to left,#000 88%,transparent); }
}

/* ---- 10. Trust bar and testimonials on mobile ---------------------------- */
@media (max-width:520px) {
  .trust-bar { padding:22px 0; }
  .trust-grid { gap:16px; }
  .tst { padding:24px 20px; }
  .faq-item summary { font-size:15.5px; gap:12px; }
  .faq-item p { font-size:15px; }
}

/* ---- 11. Sticky sidebars must release on mobile --------------------------
   Once a two-column layout collapses to one, a sticky sidebar pins itself
   mid-scroll and covers content instead of following it. */
@media (max-width:980px) { .sticky { position:static; top:auto; } }

/* ---------- Install-app prompt (assets/js/install.js) ---------- */
/* Fixed to the bottom rather than the top: the header already competes for
   attention there, and a bottom bar sits near the thumb on a phone. */
.aq-install{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line,#E3E8EF);border-radius:14px;
  padding:10px 12px;box-shadow:0 8px 30px rgba(11,27,51,.22);
  transform:translateY(140%);opacity:0;transition:transform .25s ease,opacity .25s ease;
  max-width:520px;margin-inline:auto;
}
.aq-install.in{transform:translateY(0);opacity:1}
.aq-install img{border-radius:10px;flex:0 0 auto}
.aq-install-tx{flex:1 1 auto;min-width:0;line-height:1.35}
.aq-install-tx b{display:block;font-size:14px;color:var(--navy,#0B1B33)}
.aq-install-tx span{display:block;font-size:12px;color:var(--ink-3,#6B7A90);margin-top:1px}
.aq-install-go{
  flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;
  background:var(--navy,#0B1B33);color:#fff;font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
}
.aq-install-go:active{background:#132a4d}
.aq-install-x{
  flex:0 0 auto;border:none;background:none;cursor:pointer;
  color:var(--ink-3,#6B7A90);font-size:20px;line-height:1;padding:2px 4px;
}
/* Desktop installs are possible but rarely wanted for a property site, and the
   bar would sit over content on a large screen for no benefit. */
@media(min-width:900px){ .aq-install{display:none} }
@media(prefers-reduced-motion:reduce){ .aq-install{transition:none} }

/* ---------- iOS: Add to Home Screen instructions ----------
   Safari has no install API, so on an iPhone the bar's button can only explain
   where the buttons are. This is that explanation. */
.aq-ios{
  position:fixed;inset:0;z-index:1300;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,18,34,.55);padding:16px;
  opacity:0;transition:opacity .22s ease;
}
.aq-ios.in{opacity:1}
.aq-ios-card{
  position:relative;width:100%;max-width:420px;background:#fff;
  border-radius:20px;padding:26px 22px 20px;text-align:center;
  box-shadow:0 18px 50px rgba(11,27,51,.35);
  transform:translateY(20px);transition:transform .22s ease;
}
.aq-ios.in .aq-ios-card{transform:none}
.aq-ios-card img{border-radius:12px;margin-bottom:12px}
.aq-ios-card h3{margin:0 0 6px;font-size:18px;color:var(--navy,#0B1B33);line-height:1.35}
.aq-ios-card p{margin:0 0 18px;font-size:13.5px;color:var(--ink-3,#6B7A90);line-height:1.6}
.aq-ios-steps{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;
  text-align:start}
.aq-ios-steps li{display:flex;align-items:center;gap:11px;
  background:var(--surface-2,#F4F2EF);border-radius:12px;padding:11px 13px;
  font-size:13.5px;color:var(--ink-2,#3D4A5C);line-height:1.4}
.aq-ios-steps .n{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--navy,#0B1B33);color:#fff;font-size:11.5px;font-weight:700;
  display:grid;place-items:center}
.aq-ios-steps .tx{flex:1 1 auto;min-width:0}
.aq-ios-steps .ic{flex:0 0 auto;display:inline-flex;color:#0A84FF}
.aq-ios-steps .ic svg{width:21px;height:21px}
.aq-ios-ok{
  width:100%;border:none;cursor:pointer;font-family:inherit;
  background:var(--navy,#0B1B33);color:#fff;font-size:14.5px;font-weight:700;
  padding:12px;border-radius:999px;
}
.aq-ios-x{
  position:absolute;inset-block-start:10px;inset-inline-end:12px;
  border:none;background:none;cursor:pointer;
  color:var(--ink-4,#94A3B8);font-size:24px;line-height:1;padding:2px 6px;
}
@media(prefers-reduced-motion:reduce){
  .aq-ios,.aq-ios-card{transition:none}
  .aq-ios-card{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERFACE ICONS  (includes/icons.php)
   ═══════════════════════════════════════════════════════════════════════
   Replaces the emoji that used to label the dashboards. Emoji are drawn by
   the operating system, so they carried colours that never matched the brand
   and looked different on every device. These are stroke SVGs on
   currentColor: an icon in a navy heading is navy, the same icon in a red
   alert is red, with no second colour to keep in sync. */
.ic{flex:0 0 auto;vertical-align:-.18em;display:inline-block}
/* Optical alignment: a 24px-grid glyph beside text needs a hair of space, and
   its stroke should read slightly lighter than the type next to it. */
h1 .ic,h2 .ic,h3 .ic{vertical-align:-.12em;margin-inline-end:3px;opacity:.9}
.panel-title .ic{vertical-align:-.16em;margin-inline-end:5px;color:var(--ink-3)}
.badge .ic{width:13px;height:13px;vertical-align:-.16em;margin-inline-end:3px}
.btn .ic{vertical-align:-.2em;margin-inline-end:5px}
.btn-sm .ic{width:15px;height:15px}
.alert .ic{vertical-align:-.2em;margin-inline-end:6px}
/* Dashboard side nav: fixed gutter so every label starts on the same x, which
   is the whole reason to have icons in a vertical list. */
.dash-nav a .ic,.dash-side a .ic{width:18px;height:18px;margin-inline-end:10px;
  vertical-align:-.19em;color:var(--ink-3)}
.dash-nav a.active .ic,.dash-side a.active .ic{color:var(--navy)}

/* Mobile-only header icons (messages, notifications).
   The originals live inside .nav-wrap, which collapses behind the burger below
   1180px - so on a phone the unread badge was hidden inside a closed menu,
   which is the one place it cannot do its job. These duplicates sit outside the
   drawer and are hidden on desktop. */
.m-ico{display:none}
@media(max-width:1180px){
  .m-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:50%;color:var(--navy,#0B1B33);
    text-decoration:none;flex:0 0 auto}
  .m-ico:active{background:var(--surface-2,#F4F2EF)}
  /* First icon takes the auto margin so the cluster sits at the end of the row
     and the burger no longer needs its own. */
  .m-ico:first-of-type{margin-inline-start:auto}
  .m-ico ~ .m-ico,
  .m-ico ~ .burger{margin-inline-start:4px}
  .m-reg + .m-ico{margin-inline-start:4px}
  .m-ico .nav-bell-badge{position:absolute;top:2px;inset-inline-end:2px}
}

/* Social marks.
   The badge is the SVG itself - brand disc plus a white glyph painted on top -
   so the anchor carries no background of its own. The earlier version wrapped
   the logo in a second disc, which on the navy footer was a white plate the
   logo sat on, and it read as a sticker rather than part of the footer.

   Painting the letter explicitly, instead of relying on the single-path version
   where the "f" is a hole, is what makes it correct on navy and on white with
   one piece of markup. */
.ft-social{display:flex;gap:10px;margin-top:18px}
.ft-social-center{justify-content:center;margin-top:14px}
.ft-social-a{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  transition:transform .16s ease, filter .16s ease, opacity .16s ease;
}
.ft-social-a svg{display:block;width:36px;height:36px}
/* Brighten rather than recolour: the logo is already the brand colour, and
   changing it on hover would stop it being the logo. */
.ft-social-a:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ft-social-a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .ft-social-a{transition:none}
  .ft-social-a:hover{transform:none}
}

/* ---------- Print ----------
   So a buyer statement (or any CRM screen) prints as the document and not as a
   web page: no site chrome, no sidebar, no buttons or forms. .no-print hides a
   block on paper only; .print-only shows one on paper only. */
.print-only{display:none}
@media print{
  .header,.footer,.dash-nav,.no-print,.btn,form{display:none!important}
  .print-only{display:inline!important}
  .dash{display:block!important}
  body{background:#fff!important}
  .panel{box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid}
  a{color:inherit!important;text-decoration:none!important}
}

/* ---------- CRM charts (assets/js/crm-charts.js) ----------
   Categorical slots 1-8 and the 4-step ordinal ramp were validated against the
   white panel surface (#FFFFFF): adjacent CVD separation >= 9.1, normal-vision
   >= 19.6. Slots 3, 4 and 5 sit below 3:1 on white, which is why every chart
   also ships its numbers as a table. Slot ORDER is part of the validation -
   assign in order, never reorder or cycle. */
:root{
  --viz-1:#2a78d6;--viz-2:#eb6834;--viz-3:#1baf7a;--viz-4:#eda100;
  --viz-5:#e87ba4;--viz-6:#008300;--viz-7:#4a3aa7;--viz-8:#e34948;
  --viz-o1:#86b6ef;--viz-o2:#3987e5;--viz-o3:#1c5cab;--viz-o4:#0d366b;
  --viz-surface:#FFFFFF;
}
.viz{margin:0}
.viz-plot{position:relative;min-height:40px}
.viz svg{display:block;overflow:visible;font-family:inherit}
.viz-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}
.viz-legend-item{display:inline-flex;align-items:center;gap:6px}
.viz-legend-key{width:10px;height:10px;border-radius:2px;display:inline-block}
.viz-legend-key.is-line{width:14px;height:2px;border-radius:1px}
.viz-grid{stroke:#E6E4DE;stroke-width:1}
.viz-base{stroke:#C3C2B7;stroke-width:1}
.viz-axis{fill:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums}
.viz-label{fill:var(--ink-2);font-size:11.5px;font-weight:600}
.viz-cat{fill:var(--ink-2);font-size:12.5px}
.viz-cross{stroke:var(--ink-4);stroke-width:1}
.viz-mark{outline:none}
.viz-mark.is-on path{filter:brightness(1.1)}
.viz-mark:focus-visible rect{stroke:var(--navy);stroke-width:2;rx:4}
.viz-line{outline:none}
.viz-line:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
.viz-tip{position:absolute;display:none;z-index:5;pointer-events:none;background:var(--surface);
  border:1px solid rgba(11,11,11,.12);border-radius:8px;box-shadow:0 6px 20px rgba(15,23,41,.12);
  padding:8px 10px;font-size:12.5px;min-width:120px}
.viz-tip-title{color:var(--ink-3);font-size:11.5px;margin-bottom:4px}
.viz-tip-row{display:flex;align-items:center;gap:8px;white-space:nowrap;line-height:1.7}
.viz-tip-row strong{color:var(--ink);font-weight:700}
.viz-tip-name{color:var(--ink-3)}
.viz-tip-key{width:12px;height:2px;border-radius:1px;display:inline-block}
.viz-table{margin-top:10px;font-size:12.5px}
.viz-table summary{cursor:pointer;color:var(--ink-3);width:max-content}
.viz-table table{margin-top:8px}
.viz-empty{color:var(--ink-3);font-size:13px;margin:6px 0}
.viz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.viz-tile .l{font-size:12.5px;color:var(--ink-3)}
.viz-tile .v{font-size:26px;font-weight:700;color:var(--ink);line-height:1.25}
.viz-tile .d{font-size:12px;color:var(--ink-3)}
.viz-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---- CRM plans page (includes/crm/plans-page.php) ---- */
.cp-hd{text-align:center;margin-bottom:18px}
.cp-hd h1{font-size:26px;margin:0 0 4px}
.cp-hd p{color:var(--ink-3);margin:0}
.cp-now{text-align:center;background:#E1F5EE;color:#085041;border-radius:10px;padding:10px 14px;margin:0 auto 16px;max-width:760px}
.cp-now.cp-end{background:#FFF8E6;color:#633806}
.cp-msg{max-width:620px;margin:0 auto;text-align:center}
.cp-trial{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;background:#FFF8E6;border:1px solid #E3C15A;border-radius:12px;padding:14px 16px;margin-bottom:16px}
.cp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:860px){.cp-grid{grid-template-columns:1fr}}
.cp-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:9px}
.cp-card.rec{border:2px solid var(--teal)}
.cp-card.cur{border:2px solid var(--gold)}
.cp-card h2{font-size:18px;margin:0}
.cp-tag{justify-self:start;background:#E1F5EE;color:#085041;font-size:12px;font-weight:600;padding:3px 12px;border-radius:99px}
.cp-card.cur .cp-tag{background:#FBF3D9;color:#886B12}
.cp-pr b{font-size:28px;color:var(--navy)}
.cp-dm{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line,#e5e7eb);padding-top:10px;margin-top:6px}
.cp-dm[hidden]{display:none}
.cp-dm-t{margin-top:6px}
.cp-pr{color:var(--ink-3);font-size:13px}
.cp-yr{color:var(--ink-3);font-size:13px}
.cp-us{color:var(--teal);font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px}
.cp-card ul{list-style:none;margin:4px 0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--ink-2)}
.cp-card li{display:flex;gap:6px;align-items:flex-start}
.cp-card li .ic{color:var(--teal);flex:none;margin:2px 0 0}
.cp-card .btn{justify-content:center;text-align:center}
.cp-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:16px}
.cp-code label{font-weight:700}
.cp-code .input{flex:1;min-width:180px;letter-spacing:1px;font-family:ui-monospace,Consolas,monospace}
.cp-note{color:var(--ink-3);font-size:13px;margin:8px 4px 0}
/* The admin's CRM codes tab (includes/dash/crmcodes.php) */
.cc-new{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cc-new{grid-template-columns:1fr}}
.cc-code{font:700 22px ui-monospace,Consolas,monospace;letter-spacing:2px;color:var(--navy);background:#FBF3D9;border:1px dashed var(--gold);border-radius:10px;padding:10px 14px;display:inline-block;direction:ltr}
.cc-st{font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;white-space:nowrap}
.cc-st.w{background:#FFF8E6;color:#633806}.cc-st.u{background:#E1F5EE;color:#085041}.cc-st.x{background:#F1EFE8;color:#5F5E5A}
.cc-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#FBF3D9;border:1px solid #E3C15A;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.cc-bulk span{font-weight:700;color:#633806;flex:1;min-width:200px}
.cc-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc-bulk .select,.cc-row .select{width:auto;min-width:110px;height:34px;padding-block:0}

/* The page scrollbar follows the language (2026-09-28): on the left in Arabic,
   on the right in English. Browsers always draw the window's own scrollbar on
   the right, so in Arabic the body becomes the scroller - its bar follows its
   direction. Desktop (mouse) only: phones draw floating bars and need the
   window scroller for the address bar and pull-to-refresh; never in print. */
@media screen and (hover:hover) and (pointer:fine){
  html[dir=rtl]{height:100%;overflow:hidden}
  html[dir=rtl] body{height:100%;overflow-y:auto}
}