/* ════════════════════════════════════════════════════════════════════════
   ORAVIC ESTATES — DESIGN SYSTEM
   Single source of truth for every page (public site + admin panel).
   Loaded on every layout. Do not duplicate these rules in page <style> blocks
   — page files should only contain styles truly unique to that page.

   Brand direction: a quiet, confident "private bank for property" feel —
   deep royal blue + a single bright-gold accent, serif display type used
   sparingly for moments that matter, generous breathing room. The signature
   move is the gold hairline + label pairing (.eyebrow) used to introduce
   every section — it reads like a deed seal, not a SaaS badge.

   Brand refresh: heading/primary = #1d4589, secondary/accent = #f3b712.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. FONTS ──────────────────────────────────────────────────────────── */
/* Brand pairing, used everywhere. Previously: Playfair Display, Plus Jakarta
   Sans and DM Serif Display had crept into individual pages — retired. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── 2. DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {

  /* — Navy scale (primary brand color) — used as DARK SURFACE
       backgrounds (navbar dropdowns, cards, tables, footer-adjacent
       panels). Kept properly dark so white/light text stays legible.
       The brand heading color (#1d4589) is a separate token below —
       it's used for text, not as a background here. — */
  --navy-950: #071e35;   /* page background, scrolled navbar, footer       */
  --navy-900: #0a2a4a;   /* section bands, deep accents                   */
  --navy-800: #0e3761;   /* card / surface background — dark surface tone */
  --navy-700: #124a7a;   /* hover / elevated surface                      */
  --navy-600: #1a5fa3;   /* lighter accent, sparing use                   */
  --navy-500: #2d72bd;   /* rare — info tints on dark                     */
  --heading:  #1d4589;   /* canonical heading color — always exactly this */

  /* — Gold scale (single accent), anchored on the brand secondary
       color #f3b712 — buttons, links, icons, borders, hover glows. — */
  --gold-100: #fcedc3;   /* pale tint — badge backgrounds on light surfaces */
  --gold-200: #f8d574;   /* light — emphasis text on navy                  */
  --gold-300: #f5c541;   /* hover-bright on navy                           */
  --gold-500: #f3b712;   /* BASE — buttons, links, icons, borders          */
  --gold-600: #cf9b0a;   /* pressed / hover-darken on light surfaces       */
  --gold-700: #8f6b07;   /* text on cream/light backgrounds (AA contrast)  */
  --gold-glow: rgba(243,183,18,.28);
  --gold-dim:  rgba(243,183,18,.12);
  --gold-dim-strong: rgba(243,183,18,.18);

  /* — Neutrals (admin panel + light surfaces) — */
  --ink-900: #14181f;
  --ink-700: #374151;
  --ink-500: #6b7280;
  --ink-300: #d1d5db;
  --ink-100: #f3f4f6;
  --ink-50:  #f9fafb;
  --cream:   #faf7f2;

  /* — On-dark text scale — repurposed for the light theme rollout below.
       These are referenced only via inline styles/legacy aliases on public
       pages (project/show, subpages, timeline, resale, etc.) — never by
       the navbar or footer, which use the canonical --navy-* tokens above
       directly. Values below are now dark-ink-on-white, not white-on-navy. */
  --white:      var(--navy-900);   /* was #ffffff — default "ink" text   */
  --white-90:   #1e3a52;           /* was rgba(255,255,255,.90)          */
  --white-70:   #475569;           /* was rgba(255,255,255,.70)          */
  --white-55:   #64748b;           /* was rgba(255,255,255,.55)          */
  --white-40:   #94a3b8;           /* was rgba(255,255,255,.40)          */
  --white-20:   #cbd5e1;           /* was rgba(255,255,255,.16)          */
  --white-12:   #e2e8f0;           /* was rgba(255,255,255,.12)          */
  --white-08:   #f1f5f9;           /* was rgba(255,255,255,.08)          */
  --white-05:   #f8fafc;           /* was rgba(255,255,255,.05)          */

  /* — Real translucent-white overlays — for components that sit on a DARK
       surface and need an actual white wash (dark form inputs, the photo
       lightbox, the admin sidebar, dark pagination). Do NOT use the
       --white-* ink scale above for these — that scale is solid, near-white
       color meant for TEXT on light backgrounds, and using it as a
       background here makes light text disappear against it. */
  --overlay-05: rgba(255,255,255,.05);
  --overlay-08: rgba(255,255,255,.08);
  --overlay-12: rgba(255,255,255,.12);
  --overlay-15: rgba(255,255,255,.15);
  --overlay-20: rgba(255,255,255,.16);
  --overlay-text-70: rgba(255,255,255,.70);

  /* — Semantic — */
  --success:      #22c55e;
  --success-bg:   rgba(34,197,94,.12);
  --warning:      #f59e0b;
  --warning-bg:   rgba(245,158,11,.12);
  --danger:       #ef4444;
  --danger-bg:    rgba(239,68,68,.12);
  --info:         #3b82f6;
  --info-bg:      rgba(59,130,246,.12);
  --whatsapp:     #25D366;
  --whatsapp-dark:#1ea952;

  /* — Typography — */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* — Spacing (4px grid) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* — Radius (one soft, rounded language everywhere — navbar's old 2px
       sharp corners are retired in favor of this) — */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full:9999px;

  /* — Shadow — */
  --shadow-sm: 0 2px 8px rgba(7,20,35,.18);
  --shadow-md: 0 8px 24px rgba(7,20,35,.24);
  --shadow-lg: 0 20px 48px rgba(7,20,35,.32);
  --shadow-gold: 0 8px 28px rgba(243,183,18,.28);

  /* — Motion — */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: .18s; --t-base: .28s; --t-slow: .5s;

  /* ── Backward-compatible aliases ──────────────────────────────────────
     Every custom-property name that individual pages already reference
     (layouts/app, home, project/show, timeline, emi-calculator) is mapped
     here to the canonical tokens above, so existing inline styles resolve
     to the unified palette without needing every usage site touched. */
  --gold:       var(--gold-500);
  --gold-l:     var(--gold-300);
  --gold-xl:    var(--gold-200);
  --gold-pale:  var(--gold-100);
  --gold-accent:var(--gold-500);
  --gold-light: var(--gold-100);
  --ink:        var(--white);
  --ink-soft:   var(--white-90);
  --ink-muted:  var(--white-70);
  /* Surface aliases — previously aliased to canonical navy tokens (dark
     card/section backgrounds). Repointed to light literals for the white
     theme rollout; canonical --navy-800/900/950 are left untouched since
     navbar, footer and .btn-dark reference them directly. */
  --paper:      #ffffff;
  --cream-dark: #f8fafc;
  --blue-card:        #ffffff;
  --blue-card-hover:  #f8fafc;
  --blue-deep:        #f8fafc;
  --warm-gray:  var(--white-55);
  --border:     var(--white-12);
  --border-l:   var(--white-08);
  --navy:       #ffffff;
  --navy-d:     #f8fafc;
  --navy-dd:    var(--navy-950);
  --navy-l:     #f1f5f9;
  --navy-xl:    #e2e8f0;
  --white-60:   var(--white-55);
  --white-35:   var(--white-40);
  --white-15:   var(--white-20);
  --tl-gold:    var(--gold-500);
  --tl-gold-l:  var(--gold-300);
  --tl-ink:     #ffffff;
  --tl-paper:   #f8fafc;
  --tl-green:   var(--success);
  --tl-blue:    var(--info);
}

/* ── 3. RESET & BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Public, dark-themed pages opt in with this class on <body> */
body.theme-dark {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 21.1%, rgba(255,255,255,.03) 54.87%, rgba(255,255,255,0) 88.63%),
    var(--navy-950);
  color: var(--paper);
  overflow-x: hidden;
}
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.15;
}
.font-serif { font-family: var(--font-display) !important; }

/* Public pages now opt in with .theme-light instead of .theme-dark — page
   background flips to white/cream, navy becomes the ink color, gold stays
   the single accent. Navbar and footer are unaffected: they set their own
   background via var(--navy-950) directly, not through this class. */
body.theme-light {
  background: #ffffff;
  color: var(--navy-800);
  overflow-x: hidden;
}
body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  color: var(--heading);
  line-height: 1.15;
}
.theme-light .eyebrow, .theme-light .slabel { color: var(--gold-700); }
.theme-light .text-muted { color: #64748b; }
.theme-light .lead-text  { color: #475569; }

/* Shared components (.card, buttons, inputs, badges, cta banner, pagination,
   skeletons, empty states) were built dark-only. Re-skin them for light
   surfaces so nothing renders as light-on-light or dark-on-dark. */
.theme-light .card, .theme-light .prop-card, .theme-light .why-card,
.theme-light .dev-card, .theme-light .contact-card, .theme-light .card-navy,
.theme-light .pcard {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
.theme-light .card:hover, .theme-light .prop-card:hover, .theme-light .why-card:hover,
.theme-light .dev-card:hover, .theme-light .contact-card:hover, .theme-light .card-navy:hover,
.theme-light .pcard:hover {
  background: #ffffff;
  border-color: rgba(243,183,18,.5);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
/* card-light is a visually distinct, softer surface — one shade off card-navy's white
   so the two never render identically on light backgrounds */
.theme-light .card-light {
  background: #f8fafc; border: 1px solid #e2e8f0;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.theme-light .card-light:hover {
  background: #f1f5f9; border-color: rgba(243,183,18,.4);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

.theme-light .btn-dark, .theme-light .btn-dark-blue, .theme-light .bd {
  background: var(--navy-800); color: #fff; border-color: transparent;
}
.theme-light .btn-dark:hover, .theme-light .btn-dark-blue:hover, .theme-light .bd:hover { background: var(--navy-700); }
.theme-light .btn-outline-dark, .theme-light .btn-outline-blue {
  color: var(--navy-800); border-color: var(--navy-800);
}
.theme-light .btn-outline-dark:hover, .theme-light .btn-outline-blue:hover {
  background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-500);
}

.theme-light .form-label { color: #64748b; }
.theme-light .form-input, .theme-light .li, .theme-light .di,
.theme-light .input-dark, .theme-light .dinput {
  background: #ffffff; border: 1.5px solid #d1d5db; color: var(--navy-900);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.theme-light .form-input::placeholder, .theme-light .li::placeholder,
.theme-light .di::placeholder, .theme-light .input-dark::placeholder,
.theme-light .dinput::placeholder { color: #9ca3af; }
.theme-light .form-input:focus, .theme-light .li:focus, .theme-light .di:focus,
.theme-light .input-dark:focus, .theme-light .dinput:focus {
  background: #fff; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(243,183,18,.18);
}
.theme-light .form-input option, .theme-light .li option, .theme-light .di option,
.theme-light .input-dark option, .theme-light .dinput option { background: #fff; color: var(--navy-900); }
.theme-light .form-hint { color: #94a3b8; }

.theme-light .badge--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

.theme-light .cta-banner {
  background: radial-gradient(circle at 20% 20%, rgba(243,183,18,.10), transparent 55%), #f8fafc;
  border: 1px solid #e5e7eb;
}

.theme-light .skeleton { background: #f1f5f9; }
.theme-light .skeleton::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent); }
.theme-light .spinner { border-color: #e2e8f0; border-top-color: var(--gold-500); }
.theme-light .loading-row { color: #94a3b8; }

.theme-light .empty-state__icon { background: var(--gold-100); }
.theme-light .empty-state__text { color: #64748b; }
.theme-light .empty-state__title { color: var(--navy-900); }

.theme-light .pagination .page-item .page-link { background: #f1f5f9; border: 1px solid #e2e8f0; color: var(--navy-800); }
.theme-light .pagination .page-item.active .page-link { background: var(--gold-500); border-color: var(--gold-500); color: #fff; }
.theme-light .pagination .page-item .page-link:hover { background: var(--gold-100); color: var(--gold-700); }

.theme-light .gold-divider { background: linear-gradient(to right, transparent, rgba(243,183,18,.45), transparent); }
.theme-light .pattern-bg { background-image: radial-gradient(circle at 1px 1px, rgba(14,55,97,.08) 1px, transparent 0); }

h1, h2, h3, h4, h5 { font-family: var(--font-display); }

/* ── 4. SECTION LABEL (.eyebrow / .slabel) ────────────────────────────────
   The signature mark of the system: a short gold hairline + uppercase
   label that opens every section, like a wax seal on a deed. */
.eyebrow, .slabel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--space-3);
}
.eyebrow::before, .slabel::before {
  content: ''; display: block; flex-shrink: 0;
  width: 28px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

.text-muted        { color: var(--white-55); }
.lead-text          { font-size: 1.0625rem; color: var(--white-70); line-height: 1.7; }
.gold-text {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-200));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── 5. BUTTONS ────────────────────────────────────────────────────────── */
.btn, .btn-gold, .btn-primary, .btn-dark, .btn-dark-blue, .btn-outline-dark,
.btn-outline-blue, .btn-whatsapp, .bg, .bd {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 700; font-size: .875rem; line-height: 1;
  padding: .8rem 1.75rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease, transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}
.btn:focus-visible, .btn-gold:focus-visible, .btn-primary:focus-visible,
.btn-dark:focus-visible, .btn-outline-dark:focus-visible, .btn-outline-blue:focus-visible {
  outline: 2px solid var(--gold-300); outline-offset: 2px;
}

/* Signature "premium" hover: every button gently zooms + lifts on hover,
   and eases back down on press — applies across all variants below. */
.btn:hover, .btn-gold:hover, .btn-primary:hover, .btn-dark:hover, .btn-dark-blue:hover,
.btn-outline-dark:hover, .btn-outline-blue:hover, .btn-whatsapp:hover, .btn-light:hover,
.btn-red:hover, .bg:hover, .bd:hover, .br:hover {
  transform: translateY(-2px) scale(1.045);
}
.btn:active, .btn-gold:active, .btn-primary:active, .btn-dark:active, .btn-dark-blue:active,
.btn-outline-dark:active, .btn-outline-blue:active, .btn-whatsapp:active, .btn-light:active,
.btn-red:active, .bg:active, .bd:active, .br:active {
  transform: translateY(0) scale(.98);
}

.btn-gold, .btn-primary, .bg {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-950);
  box-shadow: 0 4px 16px rgba(243,183,18,.22);
}
.btn-gold:hover, .btn-primary:hover, .bg:hover {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  box-shadow: var(--shadow-gold);
}

.btn-dark, .btn-dark-blue, .bd {
  background: var(--navy-900);
  color: var(--paper);
  border-color: var(--white-12);
}
.btn-dark:hover, .btn-dark-blue:hover, .bd:hover { background: var(--navy-700); }

.btn-outline-dark, .btn-outline-blue {
  background: transparent;
  color: var(--gold-300);
  border-color: var(--gold-500);
}
.btn-outline-dark:hover, .btn-outline-blue:hover {
  background: var(--gold-dim);
  color: var(--gold-200);
}

/* Light-surface variants (admin, light cards) */
.btn-light {
  background: var(--paper);
  color: var(--navy-800);
  border-color: var(--ink-300);
}
.btn-light:hover { border-color: var(--gold-500); color: var(--gold-700); }

.btn-red, .br {
  background: var(--danger); color: #fff; border-radius: var(--radius-md);
  padding: .6rem 1.1rem; font-size: .8125rem; font-weight: 700;
}
.btn-red:hover, .br:hover { background: #dc2626; }

.btn-whatsapp {
  background: var(--whatsapp); color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,.25);
}
.btn-whatsapp:hover { background: var(--whatsapp-dark); }

.btn-sm { padding: .55rem 1.1rem; font-size: .78rem; }
.btn-lg { padding: 1rem 2.25rem; font-size: .95rem; }
.btn-block { width: 100%; }

.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* Loading state — shared by every button across the site */
@keyframes gp-spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: gp-spin .7s linear infinite;
}

/* ── 6. FORMS ──────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--white-55);
  margin-bottom: var(--space-2);
}

/* Admin / light-surface field labels (white card backgrounds) — needs
   dark, readable text, not the pale on-dark tone above. */
.field-label, .fl {
  display: block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-500);
  margin-bottom: var(--space-2);
}

/* Dark inputs — used across every public-facing form */
.form-input, .li, .di, .input-dark, .dinput {
  width: 100%;
  padding: .85rem 1.1rem;
  background: var(--overlay-08);
  border: 1.5px solid var(--overlay-20);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: .875rem;
  color: var(--paper);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-input::placeholder, .li::placeholder, .di::placeholder, .input-dark::placeholder, .dinput::placeholder {
  color: var(--overlay-text-70);
}
.form-input:focus, .li:focus, .di:focus, .input-dark:focus, .dinput:focus {
  border-color: var(--gold-500);
  background: var(--overlay-12);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.form-input option, .li option, .di option, .input-dark option, .dinput option, select.li option, select.di option {
  background: var(--navy-800); color: var(--paper);
}

/* Icon-inset fields (icon positioned inside the input via pl-10) — Tailwind
   compiles pl-10 inside its own @layer utilities, and per the CSS cascade-
   layers spec, unlayered rules (this stylesheet is a plain <link>, not part
   of any @layer) always win over layered ones regardless of source order or
   specificity. So the shorthand `padding` above was silently overriding
   pl-10's padding-left on every icon input, sitting the placeholder text
   directly under the icon. This compound-class rule is still unlayered but
   more specific than the base rule above, so it reliably wins instead of
   depending on a layer fight it structurally can't win. */
.form-input.pl-10, .li.pl-10, .di.pl-10, .input-dark.pl-10, .dinput.pl-10 {
  padding-left: 2.5rem;
}

/* Light inputs — admin panel + light cards on public site */
.form-input-light, .field-input, .fi, .light-input {
  width: 100%;
  padding: .7rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: .875rem;
  color: var(--ink-900);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input-light::placeholder, .field-input::placeholder, .fi::placeholder, .light-input::placeholder { color: #9ca3af; }
.form-input-light:focus, .field-input:focus, .fi:focus, .light-input:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.field-textarea, .fi-area, textarea.field-input { resize: vertical; min-height: 100px; }

.form-error { font-size: .75rem; color: var(--danger); margin-top: var(--space-1); }
.form-hint { font-size: .72rem; color: var(--white-40); margin-top: var(--space-1); }
.hint { font-size: .72rem; color: var(--ink-500); margin-top: var(--space-1); }

/* Checkbox-as-chip pattern (admin amenities, mobile filters) */
.chip-checkbox {
  display: flex; align-items: center; gap: var(--space-2);
  padding: .55rem .85rem; border: 1.5px solid var(--ink-300); border-radius: var(--radius-md);
  cursor: pointer; font-size: .8125rem; font-weight: 500; color: var(--ink-700);
  background: var(--paper); transition: all var(--t-fast); user-select: none;
}
.chip-checkbox:hover { border-color: var(--gold-500); background: var(--gold-100); }
.chip-checkbox.selected, .amenity-chip.selected { border-color: var(--gold-500); background: var(--gold-100); color: var(--gold-700); }
.chip-checkbox input[type=checkbox] { display: none; }

/* ── 7. BADGES ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .3rem .7rem; border-radius: var(--radius-full);
  white-space: nowrap; line-height: 1;
}
.badge--gold     { background: var(--gold-dim);     color: var(--gold-200); border: 1px solid rgba(243,183,18,.35); }
.badge--gold-solid{ background: var(--gold-500);    color: var(--navy-950); border-color: transparent; }
.badge--success  { background: var(--success-bg);   color: var(--success); border: 1px solid rgba(34,197,94,.3); }
.badge--warning  { background: var(--warning-bg);   color: var(--warning); border: 1px solid rgba(245,158,11,.3); }
.badge--danger   { background: var(--danger-bg);    color: #f87171;        border: 1px solid rgba(239,68,68,.3); }
.badge--info     { background: var(--info-bg);      color: #93c5fd;        border: 1px solid rgba(59,130,246,.3); }
.badge--neutral  { background: var(--white-08);      color: var(--white-70); border: 1px solid var(--white-12); }
/* light-surface (admin) badges */
.badge--l-gold    { background: var(--gold-100); color: var(--gold-700); border-color: transparent; }
.badge--l-success { background: #dcfce7; color: #15803d; border-color: transparent; }
.badge--l-warning { background: #fef3c7; color: #92400e; border-color: transparent; }
.badge--l-danger  { background: #fee2e2; color: #b91c1c; border-color: transparent; }
.badge--l-info    { background: #dbeafe; color: #1d4ed8; border-color: transparent; }
.badge--l-neutral { background: var(--ink-100); color: var(--ink-500); border-color: transparent; }

/* ── 8. CARDS ──────────────────────────────────────────────────────────── */
.card, .prop-card, .why-card, .dev-card, .contact-card, .card-navy, .pcard {
  background: var(--navy-800);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) ease, border-color var(--t-base) ease, background var(--t-base) ease;
}
.card:hover, .prop-card:hover, .why-card:hover, .dev-card:hover, .contact-card:hover, .card-navy:hover, .pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(243,183,18,.12);
  border-color: rgba(243,183,18,.45);
  background: var(--navy-700);
}
.prop-card img, .card img { transition: transform var(--t-slow) var(--ease); }
.prop-card:hover img, .card:hover img { transform: scale(1.06); }
.pcard.hot { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-glow), 0 8px 32px rgba(243,183,18,.15); }

.card-light {
  background: var(--white-05); border: 1px solid var(--white-12); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.card-light:hover {
  background: var(--white-08); border-color: rgba(243,183,18,.35);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

.loc-chip { transition: all var(--t-fast); position: relative; overflow: hidden; border-radius: var(--radius-md); }
.loc-chip::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.loc-chip:hover::before { transform: scaleX(1); }

/* Admin stat / quick-link card */
.sc {
  display: block; background: var(--paper); border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg); padding: var(--space-5);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.sc:hover { border-color: var(--gold-500); box-shadow: 0 10px 28px rgba(243,183,18,.16); transform: translateY(-2px); }

/* ── 9. SECTION CTA BANNER ─────────────────────────────────────────────── */
.cta-banner {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(243,183,18,.14), transparent 55%), var(--navy-900);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(243,183,18,.1) 1px, transparent 0);
  background-size: 28px 28px; opacity: .5;
}

/* ── 10. LOADING STATES ────────────────────────────────────────────────── */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton {
  position: relative; overflow: hidden;
  background: var(--white-08); border-radius: var(--radius-md);
}
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--white-12), transparent);
  animation: shimmer 1.6s infinite;
}
.skeleton-light { background: var(--ink-100); }
.skeleton-light::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent); }

.spinner {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--white-12); border-top-color: var(--gold-500);
  animation: gp-spin .8s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-light { border-color: var(--ink-100); border-top-color: var(--gold-500); }

.loading-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) 0; color: var(--white-40); font-size: .8rem; }

/* ── 11. EMPTY STATES ──────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--space-16) var(--space-6);
}
.empty-state__icon {
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.empty-state__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-bottom: var(--space-2); }
.empty-state__text { color: var(--white-55); font-size: .9rem; max-width: 380px; margin: 0 auto; }
.empty-state--light .empty-state__icon { background: var(--gold-100); }
.empty-state--light .empty-state__text { color: var(--ink-500); }
.empty-state--light .empty-state__title { color: var(--ink-900); }

/* ── 12. REVEAL / MOTION HELPERS ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Cascading grid entrance — pair with .reveal on each grid child for a
   staggered "deal one card at a time" feel instead of everything popping at once. */
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger > *:nth-child(1)  { transition-delay: .00s; }
.reveal-stagger > *:nth-child(2)  { transition-delay: .06s; }
.reveal-stagger > *:nth-child(3)  { transition-delay: .12s; }
.reveal-stagger > *:nth-child(4)  { transition-delay: .18s; }
.reveal-stagger > *:nth-child(5)  { transition-delay: .24s; }
.reveal-stagger > *:nth-child(6)  { transition-delay: .30s; }
.reveal-stagger > *:nth-child(7)  { transition-delay: .36s; }
.reveal-stagger > *:nth-child(8)  { transition-delay: .42s; }
.reveal-stagger > *:nth-child(9)  { transition-delay: .48s; }
.reveal-stagger > *:nth-child(n+10) { transition-delay: .54s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mtrack, .animate-marquee {
  animation: marquee 60s linear infinite; display: inline-flex; white-space: nowrap; gap: 3rem;
}
.mtrack:hover, .animate-marquee:hover { animation-play-state: paused; }
.pattern-bg {
  background-image: radial-gradient(circle at 1px 1px, rgba(243,183,18,.08) 1px, transparent 0);
  background-size: 32px 32px;
}
.gold-divider { height: 1px; border: none; margin: 0; background: linear-gradient(to right, transparent, var(--gold-glow), transparent); }

/* ── 13. ADMIN PANEL ───────────────────────────────────────────────────── */
.sidebar-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-radius: var(--radius-md); font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.65); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-link:hover { background: var(--overlay-08); color: #fff; }
.sidebar-link.active { background: var(--gold-500); color: var(--navy-950); }

.tab-btn { cursor: pointer; padding: 8px 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; color: var(--ink-500); transition: background var(--t-fast), color var(--t-fast); }
.tab-btn.active { background: var(--navy-900); color: #fff; }
.tab-panel { display: none; } .tab-panel.active { display: block; }

.section-card { background: #fff; border: 1px solid var(--ink-300); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
@media (max-width: 640px) { .section-card { padding: 16px; } }
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-700); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

.tbl { width: 100%; font-size: 14px; border-collapse: collapse; }
.tbl thead { background: var(--ink-50); }
.tbl th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ink-300); white-space: nowrap; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: var(--gold-100); }
.tbl tbody tr:last-child td { border-bottom: none; }

.img-thumb { position: relative; width: 100px; height: 70px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--ink-300); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-thumb .del-btn { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.65); color: #fff; border: none; border-radius: 4px; padding: 1px 5px; font-size: 11px; cursor: pointer; }

/* ── Admin "master data" page header + stat strip ────────────────────────
   Shared by Locations / Developers (and any future master-data list page):
   a small navy+gold icon chip to tie the page back to the brand, and a row
   of compact stat cards summarizing the dataset at a glance. */
.page-head-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-900); font-size: 20px;
  box-shadow: 0 4px 14px rgba(7,20,35,.22);
}
.stat-card {
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.stat-card:hover { border-color: var(--gold-500); transform: translateY(-1px); }
.stat-card__value { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-weight: 700; color: var(--navy-900); }
.stat-card--gold .stat-card__value { color: var(--gold-700); }
.stat-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }

.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 8px; }
.amenity-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--ink-300); border-radius: var(--radius-md); cursor: pointer; transition: all var(--t-fast); font-size: 13px; font-weight: 500; background: #fff; color: var(--ink-700); user-select: none; }
.amenity-chip:hover { border-color: var(--gold-500); background: var(--gold-100); }
.amenity-chip .chip-icon { font-size: 16px; flex-shrink: 0; }
.amenity-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; }
.amenity-group-title:first-child { margin-top: 0; }
.custom-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 12px; background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-700); }
.custom-tag button { background: none; border: none; cursor: pointer; color: #9ca3af; line-height: 1; padding: 0; }
.custom-tag button:hover { color: var(--danger); }

/* ── 14. PAGINATION (dark) ─────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.pagination .page-item .page-link { background: var(--overlay-08); border: 1px solid var(--overlay-20); color: #fff; padding: .5rem .875rem; border-radius: var(--radius-md); transition: all var(--t-fast); }
.pagination .page-item.active .page-link { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.pagination .page-item .page-link:hover { background: var(--overlay-15); color: var(--gold-300); }
.pagination .page-item.disabled .page-link { opacity: .4; cursor: not-allowed; }

/* ── 15. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stat-num, .stat-number { font-size: 2rem; }
  .btn, .btn-gold, .btn-dark, .btn-outline-dark, .btn-primary { padding: .65rem 1.4rem; font-size: .82rem; }
  h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
  h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
  .cta-banner { padding: var(--space-8) var(--space-5); }
}
@media (max-width: 480px) {
  .btn, .btn-gold, .btn-dark, .btn-outline-dark { padding: .55rem 1.1rem; font-size: .78rem; }
}

/* ── 16. GALLERY TILES + ZOOM LIGHTBOX ─────────────────────────────────── */
/* Shared "clear photo, click-to-zoom" pattern for project & resale galleries.
   Markup: a .gtile wrapping <img>, opening #zoomLightbox via openZoom(). */
.gtile { position: relative; overflow: hidden; cursor: zoom-in; background: var(--navy-700); }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) ease; display: block; }
.gtile:hover img { transform: scale(1.08); }
.gtile__glass {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(7,20,35,0) 40%, rgba(7,20,35,.55) 100%);
  opacity: 0; transition: opacity var(--t-base) ease;
}
.gtile:hover .gtile__glass { opacity: 1; }
.gtile__glass span {
  width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.35);
  transform: scale(.8); transition: transform var(--t-base) ease;
}
.gtile:hover .gtile__glass span { transform: scale(1); }

#zoomLightbox {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(4,14,26,.96); opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
#zoomLightbox.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; }
#zoomLightbox .zl-stage {
  position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
#zoomLightbox .zl-stage img {
  max-width: 92vw; max-height: 88vh; object-fit: contain; user-select: none; -webkit-user-drag: none;
  will-change: transform; transition: transform .08s linear, opacity .25s ease;
  cursor: zoom-in; border-radius: 6px; box-shadow: var(--shadow-lg);
}
#zoomLightbox .zl-stage img.is-zoomed { cursor: grab; }
#zoomLightbox .zl-stage img.is-dragging { cursor: grabbing; transition: none; }
#zoomLightbox .zl-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; color: #fff;
  background: var(--overlay-08); border: 1px solid var(--overlay-15); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  font-size: 1.4rem; line-height: 1;
}
#zoomLightbox .zl-btn:hover { background: rgba(243,183,18,.16); color: var(--gold-300); border-color: rgba(243,183,18,.4); }
#zoomLightbox .zl-nav { top: 50%; transform: translateY(-50%); z-index: 5; }
#zoomLightbox .zl-prev { left: 16px; }
#zoomLightbox .zl-next { right: 16px; }
#zoomLightbox .zl-close { top: 18px; right: 18px; }
#zoomLightbox .zl-zoomctrl {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--overlay-08); border: 1px solid var(--overlay-15); backdrop-filter: blur(6px);
}
#zoomLightbox .zl-zoomctrl button {
  width: 34px; height: 34px; border-radius: 999px; background: transparent; border: none;
  color: #fff; font-size: 1.1rem; cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
#zoomLightbox .zl-zoomctrl button:hover { background: rgba(243,183,18,.18); color: var(--gold-300); }
#zoomLightbox .zl-zoomctrl .zl-pct { min-width: 46px; text-align: center; font-size: .75rem; color: var(--overlay-text-70); font-variant-numeric: tabular-nums; }
#zoomLightbox .zl-counter {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: .75rem; letter-spacing: .04em; color: var(--overlay-text-70);
}
#zoomLightbox .zl-hint {
  position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%);
  font-size: .7rem; color: var(--overlay-text-70); opacity: 0; transition: opacity .4s ease .6s;
  pointer-events: none; white-space: nowrap;
}
#zoomLightbox.is-open .zl-hint { opacity: 1; }
@media (max-width: 640px) {
  #zoomLightbox .zl-nav { width: 38px; height: 38px; font-size: 1.2rem; }
  #zoomLightbox .zl-hint { display: none; }
}

/* ---------------------------------------------------------------------
   Lead popup — mobile responsiveness
   (partials/lead-popup.blade.php)

   1. iOS Safari auto-zooms the whole page when a focused input/select
      has font-size under 16px. The popup's inputs share the sitewide
      .form-input/.input-dark/.dinput classes at 14px (.875rem), so
      tapping "Your Full Name" or the phone field on an iPhone used to
      snap-zoom the viewport and throw the popup out of frame. Bumping
      just these fields to 16px on small screens removes that entirely,
      without touching their look on desktop.
   2. Tighter edge padding on small screens so the card isn't crowded
      edge-to-edge on ~320–375px wide phones (the headline itself
      already scales via text-lg/sm:text-xl in the markup).
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  #popup input.form-input, #popup input.input-dark, #popup input.dinput,
  #popup select.form-input, #popup select.input-dark, #popup select.dinput {
    font-size: 16px;
  }
  #popup { padding: .625rem; }
}

/* The "I'm looking for…" select's placeholder option used to render in the
   same bold, dark text as a real selection — unlike the Name/Phone fields
   above it, which fade to a light gray via ::placeholder until filled.
   That mismatch reads as "this field looks half-broken". .select-placeholder-
   aware + its `.is-empty` toggle (set in lead-form-scripts.blade.php)
   restores the same muted look for as long as nothing's been picked, on
   both the light and navy popup themes via the --select-muted-color var
   set per-instance in the markup. */
.select-placeholder-aware.is-empty { color: var(--select-muted-color, #9ca3af) !important; }