/*
 * Domio.ma - Premium Real Estate Platform Styles
 */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-fade-in-up { animation: fadeInUp 0.7s ease-out forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.5s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-count-up { animation: countUp 0.8s ease-out forwards; }

.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }

/* Glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover lift */
.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Shimmer loading placeholder */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* City card image overlay */
.city-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
}

/* Search tabs active state */
.search-tab-active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

/* Property card image zoom */
.property-card-img {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group:hover .property-card-img {
  transform: scale(1.08);
}

/* Section decorative dots */
.section-dots::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  z-index: 0;
}

/* Trust badge shine */
.trust-badge {
  position: relative;
  overflow: hidden;
}
.trust-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: rotate(30deg);
  animation: shimmer 3s infinite;
}

/* Hide scrollbar for marquee */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Intersection observer animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero parallax subtle */
.hero-bg {
  transition: transform 0.3s ease-out;
}

/* Input focus glow */
input:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Price tag */
.price-tag {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* SEO content links */
.seo-content a {
  color: #059669;
  text-decoration: underline;
}
.seo-content a:hover {
  color: #047857;
}

/* Article body typography */
.article-body {
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.article-body p {
  margin-bottom: 1.25em;
}
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}
.article-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}
.article-body a {
  color: #059669;
  text-decoration: underline;
  text-decoration-color: #a7f3d0;
  text-underline-offset: 2px;
}
.article-body a:hover {
  color: #047857;
  text-decoration-color: #059669;
}
.article-body ul, .article-body ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li {
  margin-bottom: 0.35em;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  font-size: 0.875rem;
}
.article-body th {
  background-color: #f1f5f9;
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 2px solid #e2e8f0;
}
.article-body td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}
.article-body tr:last-child td {
  border-bottom: none;
}
.article-body nav {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2em;
}
.article-body nav h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 0.75em 0;
}
.article-body nav ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.article-body nav li {
  margin-bottom: 0.35em;
}
.article-body nav a {
  color: #059669;
  text-decoration: none;
  font-size: 0.9375rem;
}
.article-body nav a:hover {
  text-decoration: underline;
}
.article-body blockquote {
  border-left: 3px solid #10b981;
  padding-left: 1rem;
  margin: 1.5em 0;
  color: #64748b;
  font-style: italic;
}

/* Mobile menu */
#mobile-menu {
  animation: fadeInDown 0.2s ease-out;
}

/* Moroccan pattern decorative (subtle) */
.moroccan-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310b981' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════════
   REDESIGN 2026 — DESIGN SYSTEM (extracted from home for sitewide use)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Market-console palette. The --navy / --gold names are kept because ~635
     template call-sites reference them; only their values moved. --navy is now
     the near-black primary and --gold the emerald accent. */
  --navy:#0A0D0C; --navy-deep:#060807; --navy-soft:#E8FBF2;
  --gold:#00A862; --gold-deep:#047847; --gold-soft:#E8FBF2; --gold-text:#047847;
  --bg:#FAFAF8; --bg-alt:#FFFFFF; --paper:#F2F2EE;
  --ink:#121514; --ink-soft:#3B423F; --muted:#6E756F; --line:#E3E3DD;

  /* Market-console tokens, used by the d-* component layer */
  --k:#0A0D0C; --k2:#131817; --k3:#1E2523;
  --acc:#00A862; --acc-lt:#20D684; --acc-dp:#047847; --acc-soft:#E8FBF2;
  --bg2:#F2F2EE; --paper-w:#FFFFFF;
  --ink2:#3B423F; --ink3:#6E756F;
  --line2:#EFEFE9;
  --up:#00A862; --dn:#D4553A;
  --t1:#FFFFFF; --t2:rgba(255,255,255,.7); --t3:rgba(255,255,255,.44);
  --hair:rgba(255,255,255,.1);
}

body { background:var(--bg); color:var(--ink); font-variant-numeric:tabular-nums; }

/* Typography */
/* Inter throughout. The italic Fraunces display face is retired: .vb-serif and
   .accent now render as a plain accent-coloured run so legacy markup still reads
   correctly without reintroducing the editorial voice. */
.vb-display { font-family:'Inter', system-ui, sans-serif; letter-spacing:-0.028em; font-weight:680; }
.vb-serif { font-family:'Inter', system-ui, sans-serif; font-style:normal; font-weight:600; letter-spacing:-0.02em; }
[dir="rtl"] body, [dir="rtl"] .vb-display, [dir="rtl"] .vb-serif { font-family:'Tajawal', sans-serif; font-style:normal; }
.vb-h1 { font-size:clamp(2.4rem, 4.9vw, 4.2rem); line-height:1.02; font-weight:680; letter-spacing:-.042em; text-wrap:balance; font-family:'Inter', sans-serif; }
.vb-h1 .accent { font-family:'Inter', sans-serif; font-style:normal; font-weight:680; color:var(--acc); letter-spacing:-.042em; }
.vb-h2 { font-size:clamp(1.7rem, 3vw, 2.5rem); line-height:1.08; font-weight:670; letter-spacing:-.035em; font-family:'Inter', sans-serif; }
.vb-h2 .accent { font-family:'Inter', sans-serif; font-style:normal; font-weight:670; color:var(--acc); }
.vb-eyebrow { font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color:var(--acc-dp); font-weight:700; }
.vb-text-muted { color:var(--muted); }
.vb-text-ink-soft { color:var(--ink-soft); }

/* Buttons */
.vb-btn-primary { background:var(--k); color:#fff; transition:background .17s ease, color .17s ease; font-weight:600; border-radius:10px; }
.vb-btn-primary:hover { background:var(--k3); color:#fff; }
.vb-btn-gold { background:var(--acc); color:#fff; transition:background .17s ease; font-weight:600; border-radius:10px; }
.vb-btn-gold:hover { background:var(--acc-dp); color:#fff; }
.vb-btn-ghost { color:var(--ink); border:1px solid var(--line); background:var(--paper-w); transition:all .17s ease; font-weight:600; border-radius:10px; }
.vb-btn-ghost:hover { background:var(--bg2); border-color:var(--ink3); color:var(--ink); }

/* Cards */
.vb-card { background:var(--paper-w); border:1px solid var(--line); border-radius:14px; transition:box-shadow .22s ease, border-color .22s ease; }
.vb-card:hover { box-shadow:0 10px 26px -14px rgba(18,21,20,.16); border-color:var(--ink3); }

/* Pills */
.vb-pill-gold { background:var(--acc-soft); color:var(--acc-dp); border:1px solid #B6EFD4; font-weight:650; font-size:10.5px; letter-spacing:.02em; padding:4px 8px; border-radius:5px; text-transform:none; }
.vb-pill-navy { background:var(--k); color:#fff; font-weight:650; font-size:10.5px; letter-spacing:.02em; padding:4px 8px; border-radius:5px; text-transform:none; }
.vb-pill-ghost { background:var(--bg2); color:var(--ink2); border:1px solid var(--line); font-weight:600; font-size:10.5px; padding:4px 8px; border-radius:5px; }

/* Forms */
.vb-input, .vb-select { background:transparent; border:none; padding:6px 0 8px 0; font-size:15px; font-weight:500; color:var(--ink); width:100%; outline:none; appearance:none; -webkit-appearance:none; font-family:inherit; }
.vb-input::placeholder { color:var(--muted); }
.vb-select { padding-right:26px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23152844' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center; }
.vb-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-soft); font-weight:700; margin-bottom:4px; display:block; }

/* Tabs */
.vb-tab { padding:8px 16px; border-radius:6px; font-size:13px; font-weight:620; transition:all .16s ease; color:var(--ink3); background:transparent; }
.vb-tab.is-active { background:var(--paper-w); color:var(--acc-dp); box-shadow:0 1px 2px rgba(18,21,20,.09); }

/* Sections */
.vb-section { padding:80px 0; }
@media (max-width:640px) { .vb-section { padding:56px 0; } }
.vb-divider-gold { width:40px; height:2px; background:var(--acc); }

/* Property/city cards */
.vb-prop-img-wrap { overflow:hidden; }
.vb-card:hover .vb-prop-img { transform:scale(1.05); }
.vb-prop-img { transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.vb-fav { position:absolute; top:10px; right:10px; width:34px; height:34px; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); border-radius:9px; display:flex; align-items:center; justify-content:center; transition:all .16s; box-shadow:0 2px 6px rgba(18,21,20,.14); z-index:2; }
.vb-fav:hover { transform:scale(1.1); background:#fff; }
.vb-city-card { position:relative; overflow:hidden; border-radius:14px; }
.vb-city-img { transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.vb-city-card:hover .vb-city-img { transform:scale(1.06); }
.vb-agent-row { display:flex; align-items:center; gap:8px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.vb-agent-avatar { width:26px; height:26px; border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:.02em; }

/* Reveal animations */
.vb-reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.vb-reveal.in { opacity:1; transform:translateY(0); }

/* Sticky navbar (shared across pages) */
.vb-nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .35s ease, box-shadow .35s ease; }
.vb-nav.scrolled { background:rgba(255,255,255,.96); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--line), 0 8px 32px -16px rgba(15,30,51,.12); }
.vb-nav.scrolled .vb-nav-link { color:var(--ink-soft); }
.vb-nav.scrolled .vb-nav-link:hover { color:var(--navy); background:rgba(21,40,68,.06); }
.vb-nav.scrolled .vb-logo-text { color:var(--ink); }
.vb-nav.scrolled .vb-nav-icon-btn { color:var(--ink-soft); }
.vb-nav.scrolled .vb-nav-icon-btn:hover { color:var(--ink); }
.vb-utility { max-height:48px; opacity:1; overflow:hidden; transition:max-height .35s ease, opacity .25s ease; }
.vb-nav.scrolled .vb-utility { max-height:0; opacity:0; }

/* On non-home pages the nav is solid from the start (no dark hero underneath) */
.vb-nav.vb-nav-solid { background:rgba(255,255,255,.96); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--line); }
.vb-nav.vb-nav-solid .vb-nav-link { color:var(--ink-soft); }
.vb-nav.vb-nav-solid .vb-nav-link:hover { color:var(--navy); background:rgba(21,40,68,.06); }
.vb-nav.vb-nav-solid .vb-logo-text { color:var(--ink); }
.vb-nav.vb-nav-solid .vb-nav-icon-btn { color:var(--ink-soft); }
.vb-nav.vb-nav-solid .vb-utility { background:var(--paper) !important; color:var(--ink-soft) !important; border-color:var(--line) !important; }
.vb-nav.vb-nav-solid .vb-utility * { color:var(--ink-soft) !important; }
.vb-nav.vb-nav-solid .vb-utility strong { color:var(--ink) !important; }
.vb-nav.vb-nav-solid .vb-utility .vb-phone { color:var(--gold-deep) !important; }

/* Marquee (used on home; kept for consistency) */
.vb-marquee-wrap { mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.vb-marquee { display:flex; gap:80px; animation:vb-scroll 38s linear infinite; }
@keyframes vb-scroll { 0% {transform:translateX(0)} 100% {transform:translateX(-50%)} }

/* Details / accordion */
details.vb-region > summary { list-style:none; cursor:pointer; padding:20px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; transition:padding .2s; }
details.vb-region > summary::-webkit-details-marker { display:none; }
details.vb-region[open] > summary { border-bottom-color:var(--navy); }
details.vb-region summary .vb-chevron { transition:transform .3s; }
details.vb-region[open] summary .vb-chevron { transform:rotate(180deg); }

/* Utility */
.vb-phone { color:var(--gold); font-weight:600; }
.vb-link-arrow { display:inline-flex; align-items:center; gap:6px; color:var(--acc-dp); font-weight:600; font-size:14px; transition:gap .18s; padding-bottom:0; border-bottom:none; }
.vb-link-arrow:hover { gap:14px; }


/* ═══════════════════════════════════════════════════════════════════
   LEGACY PALETTE OVERRIDES — map old emerald/gray Tailwind classes to
   the new design tokens without editing 1,000+ template call-sites.
   Every page that used bg-emerald-600 now uses navy, etc.
   ═══════════════════════════════════════════════════════════════════ */

/* Emerald buttons → accent green. Green is the primary CTA colour in the
   market-console system (as on the homepage), so the legacy primary button
   colour maps straight onto it rather than onto the near-black. */
.bg-emerald-500, .bg-emerald-600, .bg-emerald-700 { background-color: var(--acc) !important; color: #fff !important; }
.bg-emerald-800, .bg-emerald-900 { background-color: var(--acc-dp) !important; color: #fff !important; }
.hover\:bg-emerald-500:hover, .hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover { background-color: var(--acc-dp) !important; }
.bg-emerald-50, .bg-emerald-100 { background-color: var(--acc-soft) !important; }
.bg-emerald-200 { background-color: #B6EFD4 !important; }

/* Emerald text → the darker accent, which clears AA on white (~5.9:1).
   --acc itself is reserved for fills and large text. */
.text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--acc-dp) !important; }
.text-emerald-400, .text-emerald-300 { color: var(--acc-lt) !important; }
.hover\:text-emerald-500:hover, .hover\:text-emerald-600:hover, .hover\:text-emerald-700:hover, .hover\:text-emerald-800:hover { color: var(--acc-dp) !important; }

/* Emerald borders/rings → accent */
.border-emerald-100, .border-emerald-200, .border-emerald-300 { border-color: #B6EFD4 !important; }
.border-emerald-400, .border-emerald-500, .border-emerald-600, .border-emerald-700 { border-color: var(--acc) !important; }
.ring-emerald-500, .ring-emerald-600 { --tw-ring-color: var(--acc) !important; }
.focus\:ring-emerald-500:focus { --tw-ring-color: var(--acc) !important; }
.focus\:border-emerald-500:focus { border-color: var(--acc) !important; }

/* Emerald fills in SVGs */
.fill-emerald-500, .fill-emerald-600 { fill: var(--acc) !important; }

/* Legacy dark backgrounds → deep navy (footer, banners) */
.bg-slate-900, .bg-gray-900 { background-color: var(--k) !important; }
.bg-slate-800, .bg-gray-800 { background-color: var(--k2) !important; }

/* Light backgrounds → warm paper tone */
.bg-slate-50, .bg-gray-50 { background-color: var(--bg) !important; }

/* text-slate-* / text-gray-* stay usable (dark neutrals), but nudge
   400/500 muted greys toward warm muted tokens for consistency */
.text-slate-400, .text-gray-400 { color: var(--muted) !important; }
.text-slate-500, .text-gray-500 { color: var(--ink-soft) !important; }

/* Gradient overrides (from-emerald / to-emerald / via-emerald) */
.from-emerald-500, .from-emerald-600, .from-emerald-700 { --tw-gradient-from: var(--navy) !important; }
.to-emerald-500, .to-emerald-600, .to-emerald-700 { --tw-gradient-to: var(--navy-deep) !important; }
.via-emerald-500, .via-emerald-600 { --tw-gradient-via: var(--navy) !important; }


/* Global heading typography — every page's h1/h2/h3 uses Manrope */
h1, h2, h3, h4 {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.028em;
  /* No forced color — headings inherit from parent (body = var(--ink)),
     so light bg = dark heading; dark section with white text = white heading. */
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: 'Tajawal', sans-serif;
}


/* SEO city-content prose (rendered from CityPropertySeoContent) */
.prose-content p { margin-bottom: 1.2em; }
.prose-content a { color: var(--acc-dp); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; font-weight: 500; }
.prose-content a:hover { color: var(--navy-deep); text-decoration-color: var(--navy-deep); }
.prose-content h3 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--navy-deep); margin-top: 2em; margin-bottom: 0.75em; font-size: 1.25rem; }
.prose-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.2em; }


/* Additional palette normalization — green/amber/red buttons + focus rings */
.bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--acc) !important; color:#fff !important; }
.hover\:bg-green-500:hover, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--acc-dp) !important; }
.text-green-600, .text-green-700, .text-green-500 { color: var(--acc-dp) !important; }
.border-green-500, .border-green-600 { border-color: var(--acc) !important; }
/* Amber stays a distinct warning hue rather than collapsing into the accent */
.bg-amber-500, .bg-amber-600 { background-color: #B45309 !important; color:#fff !important; }
.text-amber-500, .text-amber-600, .text-amber-700 { color: #B45309 !important; }
.bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: var(--k) !important; }
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover { background-color: var(--k3) !important; }
.text-blue-600, .text-blue-700 { color: var(--ink) !important; }
.focus\:ring-emerald-500:focus, .focus\:ring-green-500:focus, .focus\:ring-blue-500:focus { --tw-ring-color: var(--acc) !important; }
.focus\:border-emerald-500:focus, .focus\:border-green-500:focus, .focus\:border-blue-500:focus { border-color: var(--acc) !important; }

/* Radio + checkbox accent color everywhere */
input[type="radio"], input[type="checkbox"] { accent-color: var(--navy); }

/* Fix Rails default alert boxes (from application layout) so they look on-brand */
.bg-emerald-50 { background-color: var(--acc-soft) !important; border-color: #B6EFD4 !important; color: var(--acc-dp) !important; }
.text-emerald-700 { color: var(--acc-dp) !important; }


/* ═══════════════════════════════════════════════════════════════════
   CONTRAST SAFEGUARDS — flip forced-dark text/border colors when they
   land inside a known-dark section. Prevents "black on navy" bugs from
   the legacy palette override + old text-gray-* classes.
   ═══════════════════════════════════════════════════════════════════ */

/* Elements whose parent has a dark navy background (footer, CTAs, dark heroes) */
footer *:not([style*="color"]):not([class*="text-white"]):not([class*="text-[color"]),
[data-dark-bg] *:not([style*="color"]):not([class*="text-white"]):not([class*="text-[color"]) {
  /* nothing — placeholder to avoid overreach; targeted rules below */
}

/* Force legibility on the footer specifically */
footer h1, footer h2, footer h3, footer h4, footer h5 { color: #fff; }
footer .text-slate-500, footer .text-slate-600, footer .text-slate-700,
footer .text-slate-800, footer .text-slate-900,
footer .text-gray-500, footer .text-gray-600, footer .text-gray-700,
footer .text-gray-800, footer .text-gray-900,
footer .text-ink, footer .text-navy { color: rgba(255,255,255,0.75) !important; }

/* Dark CTA banner (any element with navy-deep or navy inline background). */
[style*="background:var(--navy-deep)"] h1,
[style*="background:var(--navy-deep)"] h2,
[style*="background:var(--navy-deep)"] h3,
[style*="background:var(--navy)"] h1,
[style*="background:var(--navy)"] h2,
[style*="background:var(--navy)"] h3 { color: #fff; }

/* Legacy pages: text-slate-900 on a dark bg would be invisible. */
[style*="background:var(--navy-deep)"] .text-slate-900,
[style*="background:var(--navy-deep)"] .text-gray-900,
[style*="background:var(--navy)"] .text-slate-900,
[style*="background:var(--navy)"] .text-gray-900,
[style*="background:var(--navy-deep)"] p:not([class*="text-white"]):not([class*="text-white/"]):not([class*="text-[color"]),
[style*="background:var(--navy-deep)"] li:not([class*="text-white"]):not([class*="text-white/"]) {
  color: rgba(255,255,255,0.85) !important;
}

/* Elements inside a navy-deep section that use var(--ink) / var(--ink-soft) via inline style — flip them */
[style*="background:var(--navy-deep)"] [style*="color:var(--ink)"],
[style*="background:var(--navy-deep)"] [style*="color:var(--ink-soft)"],
[style*="background:var(--navy)"] [style*="color:var(--ink)"] {
  color: rgba(255,255,255,0.85) !important;
}

/* Form focus states — visible ring for keyboard users */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Links inside prose content default to navy (readable everywhere) */
main a:not([class]) { color: var(--acc-dp); text-decoration: underline; text-underline-offset: 3px; }
main a:not([class]):hover { color: var(--k); }


/* ═══════════════════════════════════════════════════════════════════
   MARKET-CONSOLE COMPONENT LAYER (d-*)
   Promoted out of the homepage's inline <style> so every page can use
   the same components. Unscoped on purpose: the homepage, search
   results, listing detail and city pages all draw from this.
   ═══════════════════════════════════════════════════════════════════ */

body { font-family:'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
[dir="rtl"] body { font-family:'Tajawal', system-ui, sans-serif; }

.d-num { font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; }

/* ── Layout ─────────────────────────────────────────────────────── */
.d-wrap { max-width:1400px; margin:0 auto; padding:0 20px; }
@media (min-width:1024px){ .d-wrap { padding:0 40px; } }
.d-wrap-narrow { max-width:1140px; margin:0 auto; padding:0 20px; }
@media (min-width:1024px){ .d-wrap-narrow { padding:0 40px; } }
.d-sec { padding:80px 0; }
@media (min-width:768px){ .d-sec { padding:104px 0; } }
.d-sec-sm { padding:48px 0; }

/* ── Type ───────────────────────────────────────────────────────── */
.d-h1 { font-size:clamp(2.4rem,4.9vw,4.2rem); line-height:1.02; font-weight:680; letter-spacing:-.042em; text-wrap:balance; }
.d-h2 { font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.08; font-weight:670; letter-spacing:-.035em; text-wrap:balance; }
.d-h3 { font-size:17px; font-weight:650; letter-spacing:-.022em; }
.d-eye { font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--acc-dp); }
.d-lead { font-size:clamp(1rem,1.2vw,1.14rem); line-height:1.6; color:var(--ink2); font-weight:380; }
.d-cap { font-size:10.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--ink3); }
.d-dark .d-cap, .d-on-dark .d-cap { color:var(--t3); }

/* ── Hairline grid texture ──────────────────────────────────────── */
.d-grid-bg { position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:68px 68px; opacity:.5;
  -webkit-mask-image:radial-gradient(900px 420px at 18% 12%, #000 10%, transparent 78%);
  mask-image:radial-gradient(900px 420px at 18% 12%, #000 10%, transparent 78%); }

/* ── Panels ─────────────────────────────────────────────────────── */
.d-panel { background:var(--paper-w); border:1px solid var(--line); border-radius:14px; }
.d-dark { background:var(--k); border:1px solid var(--k3); border-radius:16px; color:var(--t1); }
.d-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line2); }
.d-dark .d-head { border-bottom-color:var(--hair); }

/* ── Buttons ────────────────────────────────────────────────────── */
.d-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; border-radius:10px; padding:12px 20px; cursor:pointer;
  border:1px solid transparent; line-height:1.2; white-space:nowrap; transition:all .17s ease; font-family:inherit; }
.d-btn-acc { background:var(--acc); color:#fff; }
.d-btn-acc:hover { background:var(--acc-dp); color:#fff; }
.d-btn-k { background:var(--k); color:#fff; }
.d-btn-k:hover { background:var(--k3); color:#fff; }
.d-btn-out { background:var(--paper-w); color:var(--ink); border-color:var(--line); }
.d-btn-out:hover { border-color:var(--ink3); background:var(--bg2); color:var(--ink); }
.d-btn-gh { background:transparent; color:var(--t2); border-color:var(--hair); }
.d-btn-gh:hover { background:rgba(255,255,255,.08); color:#fff; }
.d-btn-w { background:#fff; color:var(--k); }
.d-btn-w:hover { background:var(--bg2); color:var(--k); }
.d-btn-lg { padding:15px 26px; font-size:15px; }
.d-btn-sm { padding:9px 14px; font-size:13px; border-radius:8px; }
.d-btn-b { width:100%; }

/* ── Chiplets & badges ──────────────────────────────────────────── */
.d-chiplet { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:650;
  padding:3px 7px; border-radius:5px; background:var(--bg2); color:var(--ink2); border:1px solid var(--line); }
.d-chip-acc { background:var(--acc-soft); color:var(--acc-dp); border-color:#B6EFD4; }
.d-chip-k { background:var(--k); color:#fff; border-color:var(--k); }
.d-kbd { font-family:ui-monospace,monospace; font-size:10.5px; font-weight:600;
  padding:3px 6px; border-radius:5px; background:var(--bg2); border:1px solid var(--line);
  color:var(--ink3); line-height:1; }

/* ── Form controls ─────────────────────────────────────────────── */
.d-field-label { display:block; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:5px; }
.d-sel, .d-inp { width:100%; border:1px solid var(--line); background:var(--paper-w); border-radius:10px;
  padding:11px 13px; outline:none; color:var(--ink); font-size:14.5px; font-weight:520;
  font-family:inherit; transition:border-color .16s, box-shadow .16s; appearance:none; -webkit-appearance:none; }
.d-inp::placeholder { color:var(--ink3); font-weight:400; }
.d-sel:focus, .d-inp:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(0,168,98,.16); }
.d-sel { cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236E756F' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
[dir="rtl"] .d-sel { padding-right:13px; padding-left:34px; background-position:left 12px center; }

/* ── Segmented control ─────────────────────────────────────────── */
.d-seg { display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:var(--bg2); border:1px solid var(--line); }
.d-seg-b { padding:7px 16px; border-radius:6px; font-size:13px; font-weight:620; color:var(--ink3);
  background:transparent; border:none; cursor:pointer; font-family:inherit; transition:all .16s; }
.d-seg-b.on { background:var(--paper-w); color:var(--acc-dp); box-shadow:0 1px 2px rgba(18,21,20,.09); }

/* ── Dense data rows ───────────────────────────────────────────── */
.d-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  padding:13px 18px; border-bottom:1px solid var(--hair); transition:background .16s; }
.d-row:last-child { border-bottom:none; }
.d-row:hover { background:rgba(255,255,255,.04); }
.d-lrow { display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line2); transition:background .15s; }
@media (min-width:900px){ .d-lrow { grid-template-columns:96px 1.9fr 1fr 1fr auto; gap:20px; } }
.d-lrow:hover { background:var(--bg); }
.d-lrow:last-child { border-bottom:none; }
.d-lthumb { width:100%; aspect-ratio:4/3; border-radius:9px; overflow:hidden; background:var(--bg2); }
.d-lthumb img { width:100%; height:100%; object-fit:cover; }

/* ── Property card (grid view) ─────────────────────────────────── */
.d-pcard { background:var(--paper-w); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:box-shadow .22s ease, border-color .22s ease; }
.d-pcard:hover { box-shadow:0 10px 26px -14px rgba(18,21,20,.18); border-color:var(--ink3); }
.d-pcard-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg2); }
.d-pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.d-pcard:hover .d-pcard-img img { transform:scale(1.04); }
.d-price { font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.1; }
.d-price-unit { font-size:12px; font-weight:500; color:var(--ink3); letter-spacing:0; }

/* ── SEO link blocks ───────────────────────────────────────────── */
.d-seo-link { display:block; padding:10px 13px; border-radius:9px; border:1px solid var(--line);
  background:var(--paper-w); font-size:13.5px; color:var(--ink2); transition:all .14s ease; }
.d-seo-link:hover { border-color:var(--acc); color:var(--acc-dp); background:var(--acc-soft); }
details.d-region > summary { list-style:none; cursor:pointer; padding:15px 0;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
details.d-region > summary::-webkit-details-marker { display:none; }
details.d-region[open] > summary { border-bottom-color:var(--acc); }
details.d-region summary .d-chev { transition:transform .22s ease; width:16px; height:16px; color:var(--ink3); }
details.d-region[open] summary .d-chev { transform:rotate(180deg); }
.d-region a:hover { color:var(--acc-dp) !important; }

/* ── Mobile action bar ─────────────────────────────────────────── */
.d-mobilebar { position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:rgba(250,250,248,.97); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:1024px){ .d-mobilebar { display:none; } }

/* ── Reveal ────────────────────────────────────────────────────── */
.d-rev { opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.d-rev.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .d-rev { opacity:1; transform:none; transition:none; } }


/* ═══════════════════════════════════════════════════════════════════
   SHARED CHROME — navbar + footer, sitewide
   ═══════════════════════════════════════════════════════════════════ */
.vb-nav, .vb-nav.vb-nav-solid { background:rgba(250,250,248,.9) !important; backdrop-filter:blur(18px);
  border-bottom:1px solid transparent; box-shadow:none !important; }
.vb-nav.scrolled { background:rgba(250,250,248,.97) !important; border-bottom-color:var(--line); }
.vb-nav .vb-utility, .vb-nav.vb-nav-solid .vb-utility {
  background:var(--k) !important; border-color:var(--k3) !important; max-height:36px; }
.vb-nav.scrolled .vb-utility { max-height:0; opacity:0; }
.vb-nav .vb-utility *, .vb-nav.vb-nav-solid .vb-utility * { color:var(--t2) !important; }
.vb-nav .vb-utility strong { color:#fff !important; }
.vb-nav .vb-utility a:hover { color:var(--acc-lt) !important; }
/* CSS beats the SVG fill presentation attribute, so the gold logo mark
   follows the accent without editing the shared partials. */
.vb-nav svg rect { fill:var(--k); }
.vb-nav svg path { fill:var(--acc-lt); }
.vb-logo-text, .vb-nav.scrolled .vb-logo-text, .vb-nav.vb-nav-solid .vb-logo-text { color:var(--ink) !important; }
.vb-logo-text span { color:var(--acc) !important; }
.vb-nav .vb-nav-link, .vb-nav.vb-nav-solid .vb-nav-link, .vb-nav.scrolled .vb-nav-link { color:var(--ink2) !important; font-weight:550; }
.vb-nav .vb-nav-link:hover, .vb-nav.vb-nav-solid .vb-nav-link:hover, .vb-nav.scrolled .vb-nav-link:hover {
  color:var(--acc-dp) !important; background:var(--acc-soft) !important; }
.vb-nav .vb-nav-icon-btn { color:var(--ink3) !important; }
.vb-nav .vb-nav-icon-btn:hover { color:var(--ink) !important; background:var(--bg2) !important; }
/* "List property" is the loud action; "Sign up" is the quiet one. */
.vb-nav .vb-btn-primary { background:var(--paper-w) !important; color:var(--ink) !important;
  border:1px solid var(--line); transform:none !important; box-shadow:none !important; }
.vb-nav .vb-btn-primary:hover { background:var(--bg2) !important; border-color:var(--ink3); }
.vb-nav .vb-btn-gold { background:var(--k) !important; color:#fff !important; box-shadow:none !important; }
.vb-nav .vb-btn-gold:hover { background:var(--k3) !important; color:#fff !important; }

footer { background:var(--k) !important; color:var(--t2) !important; }
footer svg rect { fill:var(--acc); }
footer svg path { fill:#fff; }
footer .vb-display span { color:var(--acc-lt) !important; }
footer .vb-eyebrow { color:rgba(255,255,255,.92) !important; letter-spacing:.14em; }
footer [style*="C8924A"] { color:var(--acc-lt) !important; }
footer a:hover { color:#fff; }

/* Mobile menu + alert boxes follow the accent */
#vb-mobile-menu .vb-btn-gold { background:var(--acc) !important; color:#fff !important; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--acc); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }


/* ═══════════════════════════════════════════════════════════════════
   SYSTEM NORMALISATION
   56 of 81 public views were written with raw Tailwind neutrals, large
   radii and heavy shadows, which read as a different design language
   next to the market-console pages. Rather than rewriting every
   template, the utilities those templates already use are mapped onto
   the system here. Dark-surface overrides follow underneath, because a
   mapped neutral must flip when it sits on near-black.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Neutral text → ink ramp ──────────────────────────────────────── */
.text-gray-900, .text-slate-900, .text-gray-800, .text-slate-800,
.text-neutral-900, .text-zinc-900 { color: var(--ink) !important; }
.text-gray-700, .text-slate-700, .text-gray-600, .text-slate-600,
.text-neutral-700, .text-zinc-700 { color: var(--ink2) !important; }
.text-gray-500, .text-slate-500, .text-gray-400, .text-slate-400,
.text-gray-300, .text-slate-300, .text-neutral-400, .text-zinc-400 { color: var(--ink3) !important; }

/* ── Neutral borders → hairline ───────────────────────────────────── */
.border-gray-100, .border-slate-100, .border-gray-200, .border-slate-200,
.border-neutral-200, .border-zinc-200 { border-color: var(--line) !important; }
.border-gray-300, .border-slate-300, .border-gray-400, .border-slate-400 { border-color: var(--line) !important; }
.border-gray-700, .border-slate-700, .border-gray-800, .border-slate-800,
.border-gray-900, .border-slate-900 { border-color: var(--k3) !important; }
.divide-gray-100 > *, .divide-slate-100 > *,
.divide-gray-200 > *, .divide-slate-200 > * { border-color: var(--line) !important; }

/* ── Neutral surfaces ─────────────────────────────────────────────── */
.bg-gray-100, .bg-slate-100, .bg-gray-200, .bg-slate-200 { background-color: var(--bg2) !important; }

/* ── Radii: panels are 14px, controls 10px ───────────────────────── */
.rounded-2xl, .rounded-3xl { border-radius: 14px !important; }
button.rounded-xl, a.rounded-xl, input.rounded-xl, select.rounded-xl, textarea.rounded-xl { border-radius: 10px !important; }

/* ── Elevation: one subtle step, no drama ────────────────────────── */
.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 1px 2px rgba(18,21,20,.04), 0 10px 26px -14px rgba(18,21,20,.16) !important; }
.hover\:shadow-md:hover, .hover\:shadow-lg:hover, .hover\:shadow-xl:hover, .hover\:shadow-2xl:hover {
  box-shadow: 0 1px 2px rgba(18,21,20,.05), 0 14px 30px -14px rgba(18,21,20,.20) !important; }

/* ── Weight ceiling: the system tops out at 680 ──────────────────── */
.font-extrabold, .font-black { font-weight: 680 !important; letter-spacing: -.035em; }

/* ── Display sizes mapped onto the heading scale ─────────────────── */
.text-4xl { font-size: clamp(1.7rem, 3vw, 2.5rem) !important; line-height: 1.08; letter-spacing: -.035em; }
.text-5xl, .text-6xl, .text-7xl { font-size: clamp(2.1rem, 4.2vw, 3.4rem) !important; line-height: 1.04; letter-spacing: -.042em; }

/* ── Container width matches the homepage ────────────────────────── */
.max-w-7xl { max-width: 1400px !important; }

/* ── Motion: the system settles in ~.17s ─────────────────────────── */
.duration-300, .duration-500, .duration-700 { transition-duration: .18s !important; }

/* ── Retired display face: vb-display is now plain Inter ─────────── */
.vb-display { font-family:'Inter', system-ui, sans-serif !important; font-weight:680; letter-spacing:-.032em; }

/* ═══════════════════════════════════════════════════════════════════
   DARK-SURFACE OVERRIDES
   The neutral mappings above assume dark-on-light. Inside a dark
   surface they must invert, or the text disappears.
   ═══════════════════════════════════════════════════════════════════ */
.d-dark .text-gray-900, .d-dark .text-slate-900, .d-dark .text-gray-800, .d-dark .text-slate-800,
.bg-slate-900 .text-gray-900, .bg-gray-900 .text-gray-900,
[style*="background:var(--k)"] .text-gray-900, [style*="background:var(--k)"] .text-slate-900,
[style*="background:var(--k2)"] .text-gray-900 { color: #fff !important; }

.d-dark .text-gray-700, .d-dark .text-slate-700, .d-dark .text-gray-600, .d-dark .text-slate-600,
.bg-slate-900 .text-gray-600, .bg-gray-900 .text-gray-600,
[style*="background:var(--k)"] .text-gray-600, [style*="background:var(--k)"] .text-slate-600,
[style*="background:var(--k2)"] .text-gray-600 { color: var(--t2) !important; }

.d-dark .text-gray-500, .d-dark .text-slate-500, .d-dark .text-gray-400, .d-dark .text-slate-400,
.d-dark .text-gray-300, .d-dark .text-slate-300,
.bg-slate-900 .text-gray-400, .bg-gray-900 .text-gray-400,
[style*="background:var(--k)"] .text-gray-400, [style*="background:var(--k)"] .text-slate-400,
[style*="background:var(--k)"] .text-gray-300, [style*="background:var(--k2)"] .text-gray-400 { color: var(--t3) !important; }

.d-dark .border-gray-100, .d-dark .border-gray-200, .d-dark .border-slate-200,
[style*="background:var(--k)"] .border-gray-200, [style*="background:var(--k)"] .border-slate-200,
[style*="background:var(--k2)"] .border-gray-200 { border-color: var(--hair) !important; }

/* Footer keeps its own inversion (it is always dark) */
footer .text-gray-900, footer .text-slate-900, footer .text-gray-800, footer .text-slate-800 { color:#fff !important; }
footer .text-gray-700, footer .text-slate-700, footer .text-gray-600, footer .text-slate-600 { color:var(--t2) !important; }
footer .text-gray-500, footer .text-slate-500, footer .text-gray-400, footer .text-slate-400 { color:var(--t3) !important; }
footer .border-gray-200, footer .border-slate-200, footer .border-gray-800 { border-color:var(--hair) !important; }


/* ═══════════════════════════════════════════════════════════════════
   ADMIN PANEL (ad-*)
   The admin layout previously loaded only tailwind.css, so it inherited
   none of the design system, had no mobile handling at all and no RTL.
   These components give it the same language as the public site, with
   data tables that stay usable on a phone.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────────────── */
.ad-shell { min-height:100vh; min-height:100svh; background:var(--bg); }
.ad-side {
  position:fixed; inset-block:0; inset-inline-start:0; width:264px; z-index:50;
  background:var(--k); border-inline-end:1px solid var(--k3);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
[dir="rtl"] .ad-side { transform:translateX(100%); }
.ad-side.is-open { transform:translateX(0); }
@media (min-width:1024px) {
  .ad-side { transform:none; }
  [dir="rtl"] .ad-side { transform:none; }
  .ad-main { margin-inline-start:264px; }
}
.ad-overlay { position:fixed; inset:0; z-index:40; background:rgba(10,13,12,.55); backdrop-filter:blur(2px); }
@media (min-width:1024px) { .ad-overlay { display:none !important; } }

/* Sidebar nav */
.ad-side-head { padding:18px 20px; border-bottom:1px solid var(--k3); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ad-nav { flex:1; overflow-y:auto; padding:12px; }
.ad-nav::-webkit-scrollbar { width:6px; }
.ad-nav::-webkit-scrollbar-thumb { background:var(--k3); border-radius:3px; }
.ad-link { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px;
  font-size:13.5px; font-weight:540; color:var(--t2); transition:background .14s, color .14s; }
.ad-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.ad-link.is-active { background:rgba(0,168,98,.16); color:#fff; box-shadow:inset 2px 0 0 var(--acc-lt); }
[dir="rtl"] .ad-link.is-active { box-shadow:inset -2px 0 0 var(--acc-lt); }
.ad-link svg { width:17px; height:17px; flex-shrink:0; opacity:.85; }
.ad-link.is-active svg { opacity:1; color:var(--acc-lt); }
.ad-badge { margin-inline-start:auto; min-width:19px; height:19px; padding:0 6px; border-radius:999px;
  font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; }
.ad-badge-warn { background:#B45309; color:#fff; }
.ad-badge-danger { background:#C0392B; color:#fff; }
.ad-badge-muted { background:var(--k3); color:var(--t2); }
.ad-side-sep { height:1px; background:var(--k3); margin:12px 4px; }
.ad-side-foot { flex-shrink:0; padding:12px; border-top:1px solid var(--k3); background:rgba(255,255,255,.03); }

/* ── Top bar ────────────────────────────────────────────────────── */
.ad-top { position:sticky; top:0; z-index:30; background:rgba(250,250,248,.95);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  padding:12px 16px; display:flex; align-items:center; gap:12px; }
@media (min-width:1024px) { .ad-top { padding:14px 28px; } }
.ad-burger { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:9px; border:1px solid var(--line); background:var(--paper-w); color:var(--ink2); flex-shrink:0; }
.ad-burger:hover { background:var(--bg2); }
@media (min-width:1024px) { .ad-burger { display:none; } }
.ad-title { font-size:17px; font-weight:650; letter-spacing:-.022em; color:var(--ink);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:640px) { .ad-title { font-size:20px; } }

/* ── Content ────────────────────────────────────────────────────── */
.ad-body { padding:16px; }
@media (min-width:640px) { .ad-body { padding:22px; } }
@media (min-width:1024px) { .ad-body { padding:28px; } }

/* ── Panels ─────────────────────────────────────────────────────── */
.ad-panel { background:var(--paper-w); border:1px solid var(--line); border-radius:12px; }
.ad-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--line2); flex-wrap:wrap; }
.ad-panel-title { font-size:14px; font-weight:620; letter-spacing:-.015em; color:var(--ink); }

/* ── Stat tiles ─────────────────────────────────────────────────── */
.ad-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:900px) { .ad-stats { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ad-stat { background:var(--paper-w); border:1px solid var(--line); border-radius:12px; padding:16px; }
.ad-stat-cap { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); }
.ad-stat-num { font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums; font-size:clamp(1.5rem,4vw,2rem); font-weight:700;
  letter-spacing:-.04em; line-height:1; color:var(--ink); margin-top:10px; }
.ad-stat-sub { font-size:12px; color:var(--ink3); margin-top:8px; }

/* ── Data tables: horizontal scroll with a sticky header ────────── */
.ad-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ad-tablewrap::-webkit-scrollbar { height:8px; }
.ad-tablewrap::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.ad-tablewrap::-webkit-scrollbar-track { background:transparent; }
.ad-table { width:100%; min-width:720px; border-collapse:collapse; }
.ad-table thead th { position:sticky; top:0; z-index:1; background:var(--bg);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); text-align:start; padding:10px 14px; white-space:nowrap;
  border-bottom:1px solid var(--line); }
[dir="rtl"] .ad-table thead th { text-align:start; }
.ad-table tbody td { padding:12px 14px; font-size:13.5px; color:var(--ink2);
  border-bottom:1px solid var(--line2); vertical-align:middle; }
.ad-table tbody tr:last-child td { border-bottom:none; }
.ad-table tbody tr:hover { background:var(--bg); }
.ad-table .ad-num { font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
/* Columns that can go on small screens without losing the row's meaning */
@media (max-width:700px) { .ad-table .ad-opt { display:none; } }

/* ── Pills ──────────────────────────────────────────────────────── */
.ad-pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:650;
  padding:3px 8px; border-radius:6px; white-space:nowrap; }
.ad-pill-ok    { background:var(--acc-soft); color:var(--acc-dp); border:1px solid #B6EFD4; }
.ad-pill-warn  { background:#FFFBEB; color:#B45309; border:1px solid #FDE9B5; }
.ad-pill-danger{ background:#FEF2F2; color:#9B1C1C; border:1px solid #FBD5D5; }
.ad-pill-muted { background:var(--bg2); color:var(--ink2); border:1px solid var(--line); }
.ad-pill-k     { background:var(--k); color:#fff; border:1px solid var(--k); }

/* ── Buttons ────────────────────────────────────────────────────── */
.ad-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:13px; font-weight:600; padding:9px 15px; border-radius:9px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:all .15s ease; font-family:inherit; line-height:1.2; }
.ad-btn-acc { background:var(--acc); color:#fff; }
.ad-btn-acc:hover { background:var(--acc-dp); color:#fff; }
.ad-btn-k { background:var(--k); color:#fff; }
.ad-btn-k:hover { background:var(--k3); color:#fff; }
.ad-btn-out { background:var(--paper-w); color:var(--ink); border-color:var(--line); }
.ad-btn-out:hover { background:var(--bg2); border-color:var(--ink3); }
.ad-btn-danger { background:#C0392B; color:#fff; }
.ad-btn-danger:hover { background:#9B1C1C; color:#fff; }
.ad-btn-sm { padding:6px 11px; font-size:12px; border-radius:7px; }

/* ── Forms ──────────────────────────────────────────────────────── */
.ad-label { display:block; font-size:11px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:6px; }
.ad-input, .ad-select, .ad-textarea {
  width:100%; background:var(--paper-w); border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; font-size:13.5px; color:var(--ink); font-family:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.ad-input:focus, .ad-select:focus, .ad-textarea:focus {
  border-color:var(--acc); box-shadow:0 0 0 3px rgba(0,168,98,.14); }
.ad-select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-inline-end:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236E756F' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }
[dir="rtl"] .ad-select { background-position:left 11px center; }
.ad-filters { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:700px) { .ad-filters { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; } }

/* ── Flash ──────────────────────────────────────────────────────── */
.ad-flash { margin:14px 16px 0; padding:11px 14px; border-radius:9px; font-size:13.5px; }
@media (min-width:1024px) { .ad-flash { margin:16px 28px 0; } }
.ad-flash-ok { background:var(--acc-soft); border:1px solid #B6EFD4; color:var(--acc-dp); }
.ad-flash-err { background:#FEF2F2; border:1px solid #FBD5D5; color:#9B1C1C; }

/* ── Scroll hint for wide tables on touch ───────────────────────── */
.ad-scrollhint { font-size:11.5px; color:var(--ink3); padding:8px 14px 0; }
@media (min-width:1024px) { .ad-scrollhint { display:none; } }