/*
Theme Name: HeavenlyCollections
Description: Premium multi-vendor property marketplace for Sri Lanka.
Version: 6.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: hc
*/

/* ═══════════════════════════════════════════════════════
   DESIGN SYSTEM — Pure custom CSS, zero Bootstrap
   Palette: White · Forest Green · Sky Blue · Ocean · Earth
   Fonts: Playfair Display + DM Sans
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────── */
:root {
  --white:      #ffffff;
  --offwhite:   #f8fafb;
  --light:      #f0f5f7;
  --forest:     #2d7a52;
  --forest-l:   #5baa7b;
  --forest-d:   #1a4d33;
  --forest-pale:#e8f5ee;
  --sky:        #4e9ec5;
  --sky-l:      #90cce0;
  --sky-pale:   #e5f4fb;
  --sky-d:      #2878a0;
  --ocean:      #1b5f82;
  --ocean-pale: #dff0f8;
  --earth:      #9b7224;
  --earth-l:    #c9a44a;
  --earth-pale: #fdf5e5;
  --earth-d:    #6b4e10;
  --g100:       #f2f7fa;
  --g200:       #e3eaee;
  --g300:       #c5d4dc;
  --g400:       #8fabbB;
  --g500:       #5f7d8e;
  --g700:       #2c4552;
  --g900:       #152330;
  --red:        #dc2626;
  --sh1: 0 1px 4px rgba(28,95,130,.07);
  --sh2: 0 3px 14px rgba(28,95,130,.10);
  --sh3: 0 8px 32px rgba(28,95,130,.14);
  --sh4: 0 20px 60px rgba(28,95,130,.17);
  --sh5: 0 36px 90px rgba(28,95,130,.20);
  --r8: 8px; --r12: 12px; --r16: 16px;
  --r20: 20px; --r28: 28px; --rpill: 9999px;
  --fh: 'Playfair Display', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --e1: cubic-bezier(.4,0,.2,1);
  --e2: cubic-bezier(.16,1,.3,1);
  --t1: .14s var(--e1);
  --t2: .26s var(--e1);
  --t3: .44s var(--e2);
}

/* ── RESET ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);
  font-size:16px;line-height:1.75;
  color:var(--g700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky-d);text-decoration:none;transition:color var(--t1)}
a:hover{color:var(--forest)}
ul,ol{list-style:none}
p{margin-bottom:1rem}
button,input,select,textarea{font-family:var(--fb)}

/* ── TYPOGRAPHY ─────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--fh);line-height:1.12;color:var(--g900);letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
h4{font-size:1.25rem}
.lead{font-size:1.08rem;color:var(--g500);line-height:1.85;font-weight:400}

/* ══════════════════════════════════════════════════
   LAYOUT — THE FIX
   
   .w-full = 100% viewport width (background fills edge to edge)
   .inner  = centered content with fluid padding
   
   IMPORTANT: Never use max-width on .w-full.
   IMPORTANT: Never load Bootstrap.
══════════════════════════════════════════════════ */

/* Every section must use .w-full so backgrounds are edge-to-edge */
.w-full {
  width: 100%;
  display: block;
}

/* Content container — fluid padding, centered, never causes white bars */
.inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(1.25rem, 5vw, 4rem);
  padding-right: clamp(1.25rem, 5vw, 4rem);
}

/* Wider container for hero/footer */
.inner-wide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

/* Narrow for forms/auth */
.inner-sm {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Section vertical padding */
.py-xl { padding-top: clamp(4rem,8vw,7rem);   padding-bottom: clamp(4rem,8vw,7rem) }
.py-lg { padding-top: clamp(3rem,6vw,5.5rem); padding-bottom: clamp(3rem,6vw,5.5rem) }
.py-md { padding-top: clamp(2rem,4vw,4rem);   padding-bottom: clamp(2rem,4vw,4rem) }

/* ── AUTO GRID ───────────────────────────────────── */
.grid-auto-280 { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem }
.grid-auto-320 { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem }
.grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem }
.gap-4 { gap:1rem } .gap-5 { gap:1.25rem } .gap-6 { gap:1.5rem } .gap-8 { gap:2rem }

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
#site-header {
  position: sticky;
  top: 0; left: 0;
  width: 100%;          /* FULL viewport width */
  z-index: 1000;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(195,215,225,.45);
  transition: box-shadow var(--t2);
}
#site-header.scrolled { box-shadow: 0 2px 18px rgba(28,95,130,.09) }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 1rem;
}

/* Logo */
.site-logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0 }
.logo-mark {
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--forest),var(--ocean));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(27,95,130,.25);
  transition:transform var(--t2),box-shadow var(--t2);
}
.site-logo:hover .logo-mark { transform:rotate(-8deg) scale(1.08);box-shadow:0 8px 22px rgba(27,95,130,.38) }
.logo-mark i { color:#fff;font-size:1.05rem }
.logo-text { line-height:1.1 }
.logo-name { font-family:var(--fh);font-size:1.18rem;color:var(--g900);display:block }
.logo-sub  { font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g400);display:block;font-family:var(--fb) }

/* Nav */
.main-nav { display:flex;align-items:center }
.main-nav ul { display:flex;align-items:center;gap:2px }
.main-nav ul li a {
  display:flex;align-items:center;gap:6px;
  padding:.46rem .88rem;
  font-family:var(--fb);font-size:.875rem;font-weight:500;
  color:var(--g500);border-radius:var(--r8);
  transition:all var(--t1);white-space:nowrap;
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item a { background:var(--sky-pale);color:var(--ocean) }

/* Header actions */
.header-actions { display:flex;align-items:center;gap:8px;flex-shrink:0 }

/* User dropdown */
.user-wrap { position:relative }
.user-btn {
  display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  cursor:pointer;border:1.5px solid var(--g200);border-radius:var(--rpill);
  background:var(--white);font-family:var(--fb);font-size:.84rem;font-weight:500;
  color:var(--g700);transition:all var(--t1);
}
.user-btn:hover { border-color:var(--forest);background:var(--forest-pale);color:var(--forest-d) }
.user-av { width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--forest),var(--sky));display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.user-av i { color:#fff;font-size:.65rem }
.user-chv { font-size:.6rem;opacity:.5;transition:transform var(--t1) }
.user-btn[aria-expanded="true"] .user-chv { transform:rotate(180deg) }
.user-dd {
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:215px;z-index:2000;
  background:var(--white);border:1px solid var(--g200);
  border-radius:var(--r16);box-shadow:var(--sh5);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);
  transform-origin:top right;transition:all var(--t2);
}
.user-dd.open { opacity:1;visibility:visible;transform:translateY(0) scale(1) }
.dd-link {
  display:flex;align-items:center;gap:10px;padding:.6rem 1rem;
  border-radius:var(--r8);font-family:var(--fb);font-size:.875rem;font-weight:500;
  color:var(--g700);cursor:pointer;text-decoration:none;
  border:none;background:none;width:100%;text-align:left;transition:all var(--t1);
}
.dd-link i { width:16px;text-align:center;color:var(--forest);flex-shrink:0 }
.dd-link:hover { background:var(--forest-pale);color:var(--forest-d) }
.dd-link.red i { color:var(--red) }
.dd-link.red:hover { background:#fef2f2;color:var(--red) }
.dd-sep { height:1px;background:var(--g200);margin:5px 8px }

/* Search toggle */
.search-toggle {
  width:38px;height:38px;border:1.5px solid var(--g200);border-radius:var(--r8);
  background:transparent;cursor:pointer;color:var(--g500);
  display:flex;align-items:center;justify-content:center;transition:all var(--t1);
}
.search-toggle:hover { background:var(--sky-pale);border-color:var(--sky);color:var(--sky-d) }

/* Header search panel */
.header-search-panel {
  display:none;width:100%;background:var(--white);
  border-top:1px solid var(--g200);
  padding:1rem clamp(1.25rem,4vw,3.5rem);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.header-search-panel.open { display:block;animation:sld .2s var(--e2) }

/* Hamburger */
.hamburger {
  display:none;flex-direction:column;gap:5px;width:40px;height:40px;
  cursor:pointer;border:1.5px solid var(--g200);border-radius:var(--r8);
  background:none;padding:9px;transition:all var(--t1);
}
.hamburger span { display:block;height:1.5px;background:var(--g500);border-radius:2px;transition:all var(--t2) }
.hamburger:hover { background:var(--sky-pale);border-color:var(--sky) }
.hamburger:hover span { background:var(--sky-d) }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.hamburger.open span:nth-child(2) { opacity:0;transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }

/* Mobile nav */
.mobile-nav { display:none;width:100%;background:var(--white);border-top:1px solid var(--g200) }
.mobile-nav.open { display:block;animation:sld .22s var(--e2) }
.mobile-nav ul { padding:.75rem }
.mobile-nav ul li a {
  display:flex;align-items:center;gap:10px;padding:.7rem 1rem;
  border-radius:var(--r8);font-family:var(--fb);font-size:.9rem;font-weight:500;
  color:var(--g700);transition:all var(--t1);
}
.mobile-nav ul li a:hover { background:var(--sky-pale);color:var(--ocean) }
.mobile-nav-footer {
  padding:.75rem 1rem 1rem;border-top:1px solid var(--g200);
  display:flex;flex-direction:column;gap:.5rem;
}

@keyframes sld { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════
   TOOLTIP
══════════════════════════════════════════════════ */
[data-tip] { position:relative }
[data-tip]::before {
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:rgba(21,35,48,.95);color:#fff;
  font-family:var(--fb);font-size:.7rem;
  padding:5px 10px;border-radius:8px;
  pointer-events:none;opacity:0;z-index:9000;
  white-space:normal;max-width:200px;text-align:center;line-height:1.4;
  transition:opacity var(--t1),transform var(--t1);
}
[data-tip]::after {
  content:'';position:absolute;bottom:calc(100% + 1px);left:50%;
  transform:translateX(-50%) translateY(4px);
  border:5px solid transparent;border-top-color:rgba(21,35,48,.95);
  pointer-events:none;opacity:0;z-index:9000;
  transition:opacity var(--t1),transform var(--t1);
}
[data-tip]:hover::before,[data-tip]:hover::after {
  opacity:1;transform:translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════
   BUTTONS — Professional animated system
══════════════════════════════════════════════════ */
.btn {
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:.65rem 1.5rem;
  font-family:var(--fb);font-size:.875rem;font-weight:600;
  line-height:1;letter-spacing:.01em;
  border-radius:var(--r12);border:2px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:all var(--t2);white-space:nowrap;
  position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn:focus-visible { outline:3px solid var(--sky-l);outline-offset:3px }
.btn:disabled { opacity:.45;cursor:not-allowed;transform:none!important }

/* GLOW — radial light that follows mouse */
.btn-glow { isolation:isolate }
.btn-glow::after {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.3) 0%, transparent 60%);
  opacity:0;transition:opacity var(--t2);border-radius:inherit;pointer-events:none;
}
.btn-glow:hover::after { opacity:1 }

/* BLOB — expanding circle from center */
.btn-blob { isolation:isolate }
.btn-blob::before {
  content:'';position:absolute;z-index:-1;
  width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.2);
  top:50%;left:50%;transform:translate(-50%,-50%);
  transition:width .55s var(--e2),height .55s var(--e2);
}
.btn-blob:hover::before { width:340px;height:340px }

/* Sizes */
.btn-sm  { padding:.44rem .9rem;font-size:.8rem }
.btn-lg  { padding:.85rem 1.8rem;font-size:.95rem }
.btn-xl  { padding:1rem 2.2rem;font-size:1rem;border-radius:var(--r16) }
.btn-2xl { padding:1.15rem 2.6rem;font-size:1.06rem;border-radius:var(--r20) }
.btn-block { width:100% }
.btn-pill  { border-radius:var(--rpill) }

/* Colour variants */
.btn-forest {
  background:linear-gradient(135deg,var(--forest),var(--forest-l));
  color:#fff;box-shadow:0 4px 16px rgba(45,122,82,.28);
}
.btn-forest:hover { background:linear-gradient(135deg,var(--forest-d),var(--forest));transform:translateY(-2px);box-shadow:0 8px 28px rgba(45,122,82,.42);color:#fff }

.btn-ocean {
  background:linear-gradient(135deg,var(--ocean),var(--sky));
  color:#fff;box-shadow:0 4px 16px rgba(27,95,130,.26);
}
.btn-ocean:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(27,95,130,.42);color:#fff }

.btn-earth {
  background:linear-gradient(135deg,var(--earth-d),var(--earth-l));
  color:#fff;box-shadow:0 4px 16px rgba(155,114,36,.26);
}
.btn-earth:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(155,114,36,.42);color:#fff }

.btn-white { background:#fff;color:var(--forest-d);border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.14) }
.btn-white:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.2);color:var(--forest-d) }

.btn-ghost { background:transparent;color:var(--g500);border-color:var(--g200) }
.btn-ghost:hover { background:var(--sky-pale);color:var(--sky-d);border-color:var(--sky-pale) }

.btn-ol-forest { background:transparent;color:var(--forest);border-color:var(--forest) }
.btn-ol-forest:hover { background:var(--forest);color:#fff;transform:translateY(-2px);box-shadow:var(--sh3) }

.btn-danger { background:var(--red);color:#fff;border-color:transparent }
.btn-danger:hover { background:#b91c1c;color:#fff;transform:translateY(-1px) }
.btn-ok { background:var(--forest);color:#fff;border-color:transparent }
.btn-ok:hover { background:var(--forest-d);color:#fff }

/* ══════════════════════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════════════════════ */
.section-head { text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem) }
.section-head h2 { margin:.75rem 0 1rem }
.section-head .lead { max-width:560px;margin:0 auto }
.eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fb);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--forest);
}
.eyebrow::before,.eyebrow::after { content:'';width:22px;height:1.5px;background:currentColor }
.hc-rule { width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--forest),var(--sky));margin:.5rem auto 0 }

/* ══════════════════════════════════════════════════
   HERO — 100vw edge-to-edge
══════════════════════════════════════════════════ */
.hero-section {
  position:relative;
  width:100%;         /* touches left edge */
  min-height:100vh;
  display:flex;align-items:center;
  background:var(--g900);
  overflow:hidden;
}
.hero-bg {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  animation:kbzoom 22s ease-in-out infinite alternate;
}
@keyframes kbzoom {
  0%   { transform:scale(1.04) translate(0,0) }
  100% { transform:scale(1.12) translate(-1.5%,-1%) }
}
.hero-overlay {
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(21,35,48,.14) 0%, transparent 28%),
    linear-gradient(to top,    rgba(21,35,48,.72) 0%, transparent 56%),
    linear-gradient(135deg,    rgba(27,95,130,.55) 0%, rgba(45,122,82,.38) 55%, transparent 100%);
}
.hero-content-wrap {
  position:relative;z-index:2;
  width:100%;
  padding-top:5rem;padding-bottom:5rem;
}
.hero-content { max-width:700px }

/* Hero text entrance animations */
.h-anim { opacity:0;animation:hup .8s var(--e2) forwards }
@keyframes hup { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.d1{animation-delay:.3s} .d2{animation-delay:.52s} .d3{animation-delay:.72s}
.d4{animation-delay:.88s} .d5{animation-delay:1.02s} .d6{animation-delay:1.18s}

.hero-eyebrow {
  display:inline-flex;align-items:center;gap:14px;
  color:var(--sky-l);font-family:var(--fb);font-size:.68rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:1.25rem;
}
.hero-eyebrow::before,.hero-eyebrow::after { content:'';width:30px;height:1px;background:var(--sky-l) }

.hero-h1 {
  font-family:var(--fh);color:#fff;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:1.06;margin-bottom:1.25rem;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.hero-h1 em {
  font-style:italic;
  background:linear-gradient(135deg,#a0cde4,#c9a44a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-desc {
  font-family:var(--fb);color:rgba(255,255,255,.82);
  font-size:1.08rem;font-weight:300;line-height:1.85;
  max-width:540px;margin-bottom:2rem;
}

/* Hero search */
.hero-search {
  display:flex;align-items:center;
  background:rgba(255,255,255,.13);backdrop-filter:blur(20px);
  border:1.5px solid rgba(255,255,255,.28);border-radius:var(--rpill);
  overflow:hidden;max-width:580px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);margin-bottom:1.25rem;
  transition:all var(--t2);
}
.hero-search:focus-within {
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.52);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.hero-search input {
  flex:1;background:transparent;border:none;outline:none;
  padding:.9rem 1.3rem;color:#fff;font-family:var(--fb);font-size:.97rem;min-width:0;
}
.hero-search input::placeholder { color:rgba(255,255,255,.55) }
.hero-search button { margin:5px;flex-shrink:0;border-radius:var(--rpill) }

/* Vibe pills */
.hero-pills { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem }
.vibe-pill {
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--rpill);
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.88);font-family:var(--fb);font-size:.79rem;font-weight:500;
  transition:all var(--t1);
}
.vibe-pill:hover { background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.45);transform:translateY(-1px) }

/* CTA buttons */
.hero-ctas { display:flex;flex-wrap:wrap;gap:.75rem }

/* Stats */
.hero-stats {
  display:flex;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.hstat-num { font-family:var(--fh);font-size:clamp(1.8rem,3vw,2.4rem);color:#fff;line-height:1 }
.hstat-lbl { font-family:var(--fb);font-size:.65rem;color:rgba(255,255,255,.55);letter-spacing:.12em;text-transform:uppercase;margin-top:4px }

/* Scroll cue */
.scroll-cue {
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;
  color:rgba(255,255,255,.42);font-family:var(--fb);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}
.scroll-line { width:1px;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);animation:spulse 2s ease-in-out infinite }
@keyframes spulse { 0%,100%{opacity:.9} 50%{opacity:.25} }

/* ══════════════════════════════════════════════════
   PROPERTY CARD
══════════════════════════════════════════════════ */
.prop-card {
  background:var(--white);border-radius:var(--r28);overflow:hidden;
  box-shadow:var(--sh2);border:1px solid var(--g200);
  display:flex;flex-direction:column;height:100%;
  transition:transform var(--t3),box-shadow var(--t3);cursor:pointer;
}
.prop-card:hover { transform:translateY(-6px);box-shadow:var(--sh5) }
.prop-card-img { position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--g100);flex-shrink:0 }
.prop-card-img img { width:100%;height:100%;object-fit:cover;transition:transform var(--t3) }
.prop-card:hover .prop-card-img img { transform:scale(1.07) }
.prop-card-img::after { content:'';position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,rgba(21,35,48,.42),transparent);pointer-events:none }
.card-badge { position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);color:var(--forest-d);font-family:var(--fb);font-size:.67rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:var(--rpill);display:flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(0,0,0,.12) }
.card-wishlist { position:absolute;top:12px;right:12px;z-index:2;width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g400);transition:all var(--t1);box-shadow:0 2px 8px rgba(0,0,0,.1) }
.card-wishlist:hover,.card-wishlist.active { background:#fff;color:#e11d48;transform:scale(1.1) }
.card-price { position:absolute;bottom:12px;right:12px;z-index:2;background:linear-gradient(135deg,var(--forest),var(--forest-l));color:#fff;font-family:var(--fb);font-size:.8rem;font-weight:700;padding:5px 13px;border-radius:var(--rpill);box-shadow:0 3px 12px rgba(45,122,82,.38) }
.card-price span { font-size:.68rem;font-weight:400;opacity:.85 }
.prop-card-body { padding:1.25rem;display:flex;flex-direction:column;flex:1;gap:7px }
.card-loc { font-family:var(--fb);font-size:.74rem;color:var(--g400);display:flex;align-items:center;gap:5px;font-weight:500 }
.card-loc i { color:var(--forest-l);font-size:.67rem }
.card-title { font-family:var(--fh);font-size:1.1rem;color:var(--g900);line-height:1.2;margin:0 }
.card-title a { color:inherit }
.card-title a:hover { color:var(--forest) }
.vibe-tag { display:inline-flex;align-items:center;gap:5px;background:var(--forest-pale);color:var(--forest-d);font-family:var(--fb);font-size:.67rem;font-weight:700;padding:3px 10px;border-radius:var(--rpill);letter-spacing:.04em }
.vibe-tag.sky   { background:var(--sky-pale);color:var(--sky-d) }
.vibe-tag.ocean { background:var(--ocean-pale);color:var(--ocean) }
.vibe-tag.earth { background:var(--earth-pale);color:var(--earth-d) }
.card-meta { display:flex;align-items:center;flex-wrap:wrap;gap:1rem;font-family:var(--fb);font-size:.76rem;color:var(--g400);padding-top:8px;border-top:1px solid var(--g100);margin-top:auto }
.card-meta span { display:flex;align-items:center;gap:4px }
.card-meta i { color:var(--sky);font-size:.67rem }

/* ══════════════════════════════════════════════════
   VIBE CARDS — canvas animated
══════════════════════════════════════════════════ */
.vibe-card {
  position:relative;overflow:hidden;border-radius:var(--r28);aspect-ratio:1/1.35;
  cursor:pointer;transition:all var(--t3);border:2px solid rgba(255,255,255,.08);
}
.vibe-card:hover { transform:translateY(-6px) scale(1.015);box-shadow:var(--sh5);border-color:rgba(255,255,255,.28) }
.vibe-card canvas { position:absolute;inset:0;width:100%;height:100% }
.vibe-card-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(21,35,48,.8) 0%,rgba(21,35,48,.08) 55%,transparent 100%) }
.vibe-card-body { position:absolute;bottom:0;left:0;right:0;padding:1.25rem;z-index:2 }
.vibe-card-icon { width:44px;height:44px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.24);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;font-size:1.15rem;color:#fff;transition:all var(--t2) }
.vibe-card:hover .vibe-card-icon { background:rgba(255,255,255,.26);transform:scale(1.1) rotate(-5deg) }
.vibe-card-name { font-family:var(--fh);font-size:1.4rem;color:#fff;margin-bottom:3px }
.vibe-card-desc { font-family:var(--fb);font-size:.76rem;color:rgba(255,255,255,.7);line-height:1.4;font-weight:300 }
.vibe-card-count { position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;font-family:var(--fb);font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:var(--rpill);border:1px solid rgba(255,255,255,.2) }

/* ══════════════════════════════════════════════════
   SEARCH BAR
══════════════════════════════════════════════════ */
.search-bar { display:flex;align-items:stretch;background:var(--white);border:2px solid var(--g200);border-radius:var(--rpill);overflow:hidden;box-shadow:var(--sh2);transition:all var(--t1) }
.search-bar:focus-within { border-color:var(--forest);box-shadow:0 0 0 4px rgba(45,122,82,.1),var(--sh3) }
.search-bar input { flex:1;border:none;outline:none;padding:.78rem 1.25rem;font-family:var(--fb);font-size:.95rem;color:var(--g700);background:transparent;min-width:0 }
.search-bar input::placeholder { color:var(--g400) }
.search-bar button { background:linear-gradient(135deg,var(--forest),var(--forest-l));color:#fff;border:none;padding:.78rem 1.4rem;font-weight:600;cursor:pointer;font-family:var(--fb);font-size:.875rem;display:flex;align-items:center;gap:7px;transition:background var(--t1);flex-shrink:0 }
.search-bar button:hover { background:linear-gradient(135deg,var(--forest-d),var(--forest)) }

/* Autocomplete */
.autocomplete { position:absolute;top:100%;left:0;right:0;z-index:500;background:var(--white);border:2px solid var(--forest-l);border-top:none;border-radius:0 0 var(--r16) var(--r16);box-shadow:var(--sh4);max-height:260px;overflow-y:auto }
.ac-item { padding:10px 16px;cursor:pointer;transition:background var(--t1);display:flex;align-items:center;gap:10px;font-family:var(--fb);font-size:.9rem;color:var(--g700) }
.ac-item:hover { background:var(--forest-pale);color:var(--forest-d) }
.ac-item i { color:var(--forest);width:14px;flex-shrink:0 }

/* ══════════════════════════════════════════════════
   MAP
══════════════════════════════════════════════════ */
#hc-map { width:100%;height:520px;border-radius:var(--r28);overflow:hidden;border:1px solid var(--g200);box-shadow:var(--sh3) }
.leaflet-container { font-family:var(--fb)!important }
.leaflet-popup-content-wrapper { border-radius:var(--r16)!important;box-shadow:var(--sh5)!important;padding:0!important;overflow:hidden }
.leaflet-popup-content { margin:0!important;width:260px!important }
.leaflet-popup-tip { background:#fff!important }
.mp-img { width:100%;height:140px;object-fit:cover }
.mp-body { padding:14px }
.mp-loc { font-family:var(--fb);font-size:.71rem;color:var(--g400);margin-bottom:5px;display:flex;align-items:center;gap:4px }
.mp-title { font-family:var(--fh);font-size:.98rem;color:var(--g900);margin-bottom:5px;line-height:1.2 }
.mp-price { font-family:var(--fb);color:var(--forest);font-weight:700;font-size:.9rem;margin-bottom:10px }
.mp-btn { display:block;background:linear-gradient(135deg,var(--forest),var(--forest-l));color:#fff;text-align:center;padding:8px;border-radius:var(--r8);font-family:var(--fb);font-size:.8rem;font-weight:600;transition:background var(--t1) }
.mp-btn:hover { background:var(--forest-d);color:#fff }
.map-pin { background:linear-gradient(135deg,var(--forest),var(--forest-l));color:#fff;padding:5px 11px;border-radius:var(--rpill);font-family:var(--fb);font-size:.71rem;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px rgba(45,122,82,.42);border:2px solid #fff;cursor:pointer;transition:all var(--t1) }
.map-pin:hover,.map-pin.active { background:linear-gradient(135deg,var(--forest-d),var(--forest));transform:scale(1.1) translateY(-2px);z-index:999!important }

/* ══════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════ */
.form-group { margin-bottom:1.25rem }
.form-group label { display:block;font-family:var(--fb);font-size:.82rem;font-weight:600;color:var(--g700);margin-bottom:6px }
.req { color:var(--red);margin-left:2px }
.form-control { display:block;width:100%;padding:.72rem 1rem;font-family:var(--fb);font-size:.95rem;color:var(--g700);background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r12);transition:all var(--t1);line-height:1.5;appearance:none }
.form-control:hover { border-color:var(--g300) }
.form-control:focus { border-color:var(--forest);outline:none;box-shadow:0 0 0 4px rgba(45,122,82,.1) }
.form-control::placeholder { color:var(--g400);opacity:.8 }
textarea.form-control { resize:vertical;min-height:110px }
select.form-control { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%238fabb8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:20px;padding-right:2.5rem }
.form-row-2 { display:grid;grid-template-columns:1fr 1fr;gap:1rem }
.form-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem }
.check-item { display:flex;align-items:center;gap:10px;cursor:pointer;padding:2px 0 }
.check-item input { width:17px;height:17px;accent-color:var(--forest);cursor:pointer;flex-shrink:0 }
.check-item span { font-family:var(--fb);font-size:.875rem;color:var(--g700) }
.check-group { display:flex;flex-direction:column;gap:10px }
.upload-zone { border:2px dashed var(--g200);border-radius:var(--r16);padding:2.5rem;text-align:center;cursor:pointer;transition:all var(--t2);background:var(--g100);position:relative }
.upload-zone:hover,.upload-zone.drag { border-color:var(--forest);background:var(--forest-pale) }
.upload-zone input { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100% }
.range-slider { width:100%;height:5px;border-radius:var(--rpill);background:var(--g200);outline:none;cursor:pointer;accent-color:var(--forest) }

/* ══════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════ */
.dash-layout { display:grid;grid-template-columns:255px 1fr;gap:1.5rem;align-items:start }
.dash-sidebar { background:var(--white);border:1px solid var(--g200);border-radius:var(--r28);overflow:hidden;position:sticky;top:88px;box-shadow:var(--sh1) }
.dash-sidebar-top { background:linear-gradient(135deg,var(--forest-d),var(--ocean));padding:1.5rem;color:#fff }
.dash-user-name { font-family:var(--fh);font-size:1.1rem }
.dash-user-role { font-family:var(--fb);font-size:.66rem;opacity:.68;letter-spacing:.08em;text-transform:uppercase;margin-top:2px }
.dash-nav { padding:8px }
.dash-nav-link { display:flex;align-items:center;gap:10px;padding:.6rem 1rem;border-radius:var(--r8);font-family:var(--fb);font-size:.875rem;font-weight:500;color:var(--g700);transition:all var(--t1);cursor:pointer;border:none;background:none;width:100%;text-align:left;text-decoration:none }
.dash-nav-link i { width:17px;text-align:center;color:var(--forest);flex-shrink:0 }
.dash-nav-link:hover,.dash-nav-link.active { background:var(--forest-pale);color:var(--forest-d) }
.dash-nav-sep { height:1px;background:var(--g100);margin:5px .5rem }
.dash-content { display:flex;flex-direction:column;gap:1.25rem }
.dash-tab { display:flex;flex-direction:column;gap:1.25rem }
.dash-card { background:var(--white);border:1px solid var(--g200);border-radius:var(--r28);overflow:hidden;box-shadow:var(--sh1) }
.dash-card-head { padding:1.25rem;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between }
.dash-card-title { font-family:var(--fh);font-size:1.1rem;color:var(--g900);margin:0 }
.dash-card-body { padding:1.25rem }
.stat-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem }
.stat-card { background:var(--white);border:1px solid var(--g200);border-radius:var(--r16);padding:1.25rem;text-align:center;transition:all var(--t2) }
.stat-card:hover { transform:translateY(-3px);box-shadow:var(--sh3) }
.stat-number { font-family:var(--fh);font-size:2rem;color:var(--forest);line-height:1;margin-bottom:5px }
.stat-label { font-family:var(--fb);font-size:.74rem;color:var(--g400);font-weight:500 }
.hc-table { width:100%;border-collapse:collapse;font-family:var(--fb);font-size:.875rem }
.hc-table th { background:var(--forest-pale);color:var(--forest-d);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:10px 14px;text-align:left;border-bottom:1px solid var(--g200) }
.hc-table td { padding:1rem 14px;border-bottom:1px solid var(--g100);vertical-align:middle }
.hc-table tr:last-child td { border-bottom:none }
.hc-table tr:hover td { background:var(--offwhite) }
.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--rpill);font-family:var(--fb);font-size:.67rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase }
.badge-pending  { background:#fef3c7;color:#92400e }
.badge-approved,.badge-confirmed { background:var(--forest-pale);color:var(--forest-d) }
.badge-rejected,.badge-cancelled { background:#fef2f2;color:var(--red) }
.badge-completed { background:var(--sky-pale);color:var(--sky-d) }
.hc-alert { padding:1rem 1.25rem;border-radius:var(--r12);font-family:var(--fb);font-size:.9rem;display:flex;align-items:flex-start;gap:10px;margin-bottom:1rem;border-width:1px;border-style:solid }
.alert-ok { background:var(--forest-pale);border-color:rgba(45,122,82,.2);color:var(--forest-d) }
.alert-er { background:#fef2f2;border-color:rgba(220,38,38,.2);color:var(--red) }
.alert-wa { background:#fffbeb;border-color:rgba(245,158,11,.2);color:#92400e }
.alert-in { background:var(--sky-pale);border-color:rgba(78,158,197,.2);color:var(--sky-d) }

/* Booking card */
.booking-card { background:var(--white);border:1px solid var(--g200);border-radius:var(--r28);padding:1.5rem;box-shadow:var(--sh4);position:sticky;top:88px }
.booking-price-top { text-align:center;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--g100) }
.booking-price { font-family:var(--fh);font-size:2.2rem;color:var(--forest);line-height:1 }
.booking-price-per { font-family:var(--fb);font-size:.8rem;color:var(--g400);margin-top:3px }
.date-grid { display:grid;grid-template-columns:1fr 1fr;gap:.75rem }
.booking-summary { background:var(--forest-pale);border-radius:var(--r12);padding:1rem;margin:1rem 0;font-family:var(--fb);font-size:.875rem }
.booking-row { display:flex;justify-content:space-between;margin-bottom:5px }
.booking-row.total { font-weight:700;font-size:1rem;padding-top:5px;border-top:1px solid rgba(45,122,82,.2);margin-top:8px }

/* Gallery */
.gallery-grid { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,210px);gap:4px;border-radius:var(--r28);overflow:hidden }
.gallery-main { grid-row:1/3 }
.gallery-main,.gallery-item { overflow:hidden;position:relative;background:var(--g100);cursor:pointer }
.gallery-main img,.gallery-item img { width:100%;height:100%;object-fit:cover;transition:transform var(--t3) }
.gallery-main:hover img,.gallery-item:hover img { transform:scale(1.05) }

/* Filter sidebar */
.filters-sidebar { background:var(--white);border:1px solid var(--g200);border-radius:var(--r28);padding:1.25rem;box-shadow:var(--sh1) }
.filters-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--g100) }
.filters-title { font-family:var(--fb);font-size:.77rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--g400);display:flex;align-items:center;gap:7px }
.filter-section { margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--g100) }
.filter-section:last-child { border-bottom:none;margin-bottom:0;padding-bottom:0 }
.filter-label { font-family:var(--fb);font-size:.82rem;font-weight:700;color:var(--g700);margin-bottom:.75rem }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.site-footer {
  width:100%;
  background:linear-gradient(158deg,var(--g900) 0%,var(--forest-d) 100%);
  color:rgba(255,255,255,.72);
}
.footer-main { padding:clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,4rem) }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,5rem) }
.footer-brand-desc { font-family:var(--fb);font-size:.875rem;opacity:.6;line-height:1.8;margin-top:1rem }
.footer-col-title { font-family:var(--fb);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-l);margin-bottom:1rem }
.footer-links { display:flex;flex-direction:column;gap:10px }
.footer-links a { font-family:var(--fb);color:rgba(255,255,255,.6);font-size:.875rem;display:flex;align-items:center;gap:8px;transition:all var(--t1) }
.footer-links a:hover { color:var(--sky-l);transform:translateX(4px) }
.footer-social { display:flex;gap:10px;margin-top:1.25rem }
.footer-social a { width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:.85rem;transition:all var(--t2) }
.footer-social a:hover { background:var(--forest-l);color:#fff;transform:translateY(-3px) scale(1.1);border-color:transparent }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--fb);font-size:.76rem;opacity:.42 }

/* WhatsApp + Back to top */
.wa-btn { position:fixed;bottom:28px;right:28px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;border:none;cursor:pointer;z-index:900;display:flex;align-items:center;justify-content:center;font-size:1.45rem;box-shadow:0 6px 24px rgba(37,211,102,.42);transition:all var(--t2);text-decoration:none;animation:wapulse 2.8s ease-in-out infinite }
.wa-btn:hover { transform:scale(1.1) translateY(-3px);color:#fff;box-shadow:0 12px 36px rgba(37,211,102,.58) }
@keyframes wapulse { 0%,100%{box-shadow:0 6px 24px rgba(37,211,102,.42)} 50%{box-shadow:0 6px 24px rgba(37,211,102,.42),0 0 0 14px rgba(37,211,102,.09)} }
#btt { position:fixed;bottom:96px;right:28px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--forest),var(--forest-l));color:#fff;border:none;cursor:pointer;z-index:900;display:none;align-items:center;justify-content:center;font-size:1rem;box-shadow:var(--sh3);transition:all var(--t2) }
#btt:hover { transform:scale(1.1) translateY(-3px);box-shadow:var(--sh4) }

/* Spinner / Loading */
.spinner { display:inline-block;width:18px;height:18px;border:2px solid var(--g200);border-top-color:var(--forest);border-radius:50%;animation:spin360 .65s linear infinite;vertical-align:middle;margin-right:6px }
@keyframes spin360 { to{transform:rotate(360deg)} }
.loading-overlay { position:absolute;inset:0;background:rgba(255,255,255,.82);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:inherit }

/* Pagination */
.pagination { display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2.5rem;flex-wrap:wrap }
.pagination a,.pagination span { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r8);border:1.5px solid var(--g200);font-family:var(--fb);font-size:.875rem;font-weight:500;color:var(--g700);transition:all var(--t1) }
.pagination a:hover { border-color:var(--forest);background:var(--forest-pale);color:var(--forest-d) }
.pagination .current { background:var(--forest);border-color:var(--forest);color:#fff }

/* Breadcrumb */
.breadcrumb { display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:.79rem;color:var(--g400);flex-wrap:wrap }
.breadcrumb a { color:var(--g400);transition:color var(--t1) }
.breadcrumb a:hover { color:var(--forest) }
.breadcrumb .sep { opacity:.4;font-size:.62rem }

/* Reveal animations */
.reveal { opacity:0;transform:translateY(26px);transition:opacity .7s var(--e2),transform .7s var(--e2) }
.reveal.visible { opacity:1;transform:translateY(0) }
.reveal-left { opacity:0;transform:translateX(-26px);transition:opacity .7s var(--e2),transform .7s var(--e2) }
.reveal-left.visible { opacity:1;transform:translateX(0) }
.stagger > * { opacity:0;transform:translateY(20px);transition:opacity .55s var(--e2),transform .55s var(--e2) }
.stagger.visible > * { opacity:1;transform:translateY(0) }
.stagger.visible > *:nth-child(1){transition-delay:.04s}
.stagger.visible > *:nth-child(2){transition-delay:.10s}
.stagger.visible > *:nth-child(3){transition-delay:.16s}
.stagger.visible > *:nth-child(4){transition-delay:.22s}
.stagger.visible > *:nth-child(5){transition-delay:.28s}
.stagger.visible > *:nth-child(6){transition-delay:.34s}

/* ══════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════ */
.text-center { text-align:center } .text-right { text-align:right }
.text-forest { color:var(--forest) } .text-ocean { color:var(--ocean) }
.text-sky { color:var(--sky-d) } .text-earth { color:var(--earth) }
.text-muted { color:var(--g400) } .text-white { color:#fff }
.fw-light { font-weight:300 } .fw-med { font-weight:500 } .fw-bold { font-weight:700 }
.font-serif { font-family:var(--fh)!important } .italic { font-style:italic }
.d-none { display:none!important } .d-flex { display:flex } .d-block { display:block }
.align-center { align-items:center } .justify-center { justify-content:center }
.justify-between { justify-content:space-between } .flex-wrap { flex-wrap:wrap }
.flex-col { flex-direction:column } .flex-1 { flex:1 } .flex-shrink-0 { flex-shrink:0 }
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem}
.mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.w-full-el { width:100% } .pos-rel { position:relative } .overflow-h { overflow:hidden }
.rounded { border-radius:var(--r12) } .rounded-xl { border-radius:var(--r28) }
.shadow-md { box-shadow:var(--sh3) }
.gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-5{gap:1.25rem} .gap-6{gap:1.5rem} .gap-8{gap:2rem}

/* WP compat */
.aligncenter { text-align:center;margin:1rem auto }
.alignleft { float:left;margin:0 1rem 1rem 0 }
.alignright { float:right;margin:0 0 1rem 1rem }
.wp-caption { max-width:100% }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(min-width:768px) {
  .d-md { display:flex!important } .db-md { display:block!important }
  .dn-md { display:none!important } .dif-md { display:inline-flex!important }
  .grid-md-2 { grid-template-columns:repeat(2,1fr) }
  .grid-md-3 { grid-template-columns:repeat(3,1fr) }
}
@media(min-width:992px) {
  .d-lg { display:flex!important } .db-lg { display:block!important }
  .dn-lg { display:none!important } .dif-lg { display:inline-flex!important }
  .grid-lg-3 { grid-template-columns:repeat(3,1fr) }
  .grid-lg-4 { grid-template-columns:repeat(4,1fr) }
  .grid-lg-5 { grid-template-columns:repeat(5,1fr) }
  .grid-lg-6 { grid-template-columns:repeat(6,1fr) }
}
@media(max-width:1199px) { .footer-grid { grid-template-columns:1fr 1fr;gap:2rem } }
@media(max-width:991px) {
  .main-nav { display:none }
  .hamburger { display:flex }
  .dash-layout { grid-template-columns:1fr }
  .dash-sidebar { position:static }
  .form-row-3 { grid-template-columns:1fr 1fr }
  .grid-3,.grid-4,.grid-6 { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:767px) {
  .form-row-2,.form-row-3,.date-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr }
  #hc-map { height:340px }
  .gallery-grid { grid-template-columns:1fr;grid-template-rows:260px 200px 200px }
  .gallery-main { grid-row:auto }
  .hero-stats { gap:1.25rem }
  .stat-grid { grid-template-columns:repeat(2,1fr) }
  .grid-2,.grid-3,.grid-4,.grid-6 { grid-template-columns:1fr }
  .booking-card { position:static }
}
@media(max-width:479px) {
  .hero-h1 { font-size:2.3rem }
  .hero-stats { gap:1rem }
  .hstat-num { font-size:1.8rem }
}

/* ═══════════════════════════════════════════════════
   CRITICAL FULL-WIDTH OVERRIDES
   These override WordPress 6.x global-styles injection
   that adds max-width constraints to .wp-site-blocks
═══════════════════════════════════════════════════ */

/* Nuclear option — override everything WP might inject */
html, body {
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

/* Kill ALL WordPress layout containers */
.wp-site-blocks,
#page, #content, .site, .site-content,
[class*="wp-container"],
[class*="is-layout-constrained"],
[class*="is-layout-flow"],
[class*="wp-block-group"] {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Our layout wrappers — THESE do the centering, nothing else */
.w-full {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

#site-header {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.site-footer {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Hero — must be 100vw */
.hero-section {
  width: 100vw !important;
  max-width: none !important;
  position: relative !important;
  left: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove any WP-injected root padding */
:root {
  --wp--style--root--padding-top: 0px !important;
  --wp--style--root--padding-right: 0px !important;
  --wp--style--root--padding-bottom: 0px !important;
  --wp--style--root--padding-left: 0px !important;
  --wp--style--global--content-size: 100% !important;
  --wp--style--global--wide-size: 100% !important;
}

/* ═══════════════════════════════════════════════════
   SIRI-STYLE SEARCH BUTTON ANIMATION
   Animated gradient border that rotates like Siri
═══════════════════════════════════════════════════ */

/* ── CLEAN PROFESSIONAL BUTTON HOVERS ── */
/* Remove ALL old broken effects */
.btn-glow::after  { display:none !important }
.btn-glow:hover   { filter:none !important }
.btn-blob::before { display:none !important }

/* Every button: smooth lift + deeper shadow */
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  transition: all .22s cubic-bezier(.16,1,.3,1);
}
.btn-forest:hover { background:linear-gradient(135deg,var(--forest-d),var(--forest-l)); box-shadow:0 8px 26px rgba(45,122,82,.42); color:#fff }
.btn-ocean:hover  { background:linear-gradient(135deg,var(--ocean),var(--sky));           box-shadow:0 8px 26px rgba(27,95,130,.42);  color:#fff }
.btn-earth:hover  { background:linear-gradient(135deg,var(--earth-d),var(--earth-l));     box-shadow:0 8px 26px rgba(155,114,36,.42); color:#fff }
.btn-white:hover  { box-shadow:0 8px 26px rgba(0,0,0,.2); color:var(--forest-d) }
.btn-ol-forest:hover { background:var(--forest); color:#fff; box-shadow:0 8px 26px rgba(45,122,82,.38) }
.btn-ghost:hover  { background:var(--sky-pale); color:var(--sky-d); border-color:var(--sky-pale); transform:translateY(-1px) }
.btn-danger:hover { background:#b91c1c; color:#fff; transform:translateY(-1px) }

/* ── SIRI SEARCH BUTTON ────────────────────────── */
/* The hero search button gets a rotating animated border */
.btn-siri {
  position: relative;
  z-index: 0;
  border: none !important;
  background: linear-gradient(135deg, var(--forest), var(--forest-l)) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(45,122,82,.35) !important;
  overflow: visible !important;
  isolation: isolate;
  /* Clean professional button — no spinning animation outside hero */
}

/* Siri halo — only inside the hero section */
.hero-section .btn-siri::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: calc(var(--rpill) + 3px);
  background: conic-gradient(
    from var(--siri-angle, 0deg),
    #5BA4CF 0deg,
    #2d7a52 60deg,
    #c9a44a 120deg,
    #1b5f82 180deg,
    #5baa7b 240deg,
    #5BA4CF 300deg,
    #2d7a52 360deg
  );
  animation: siriSpin 3s linear infinite;
  opacity: 0;
  transition: opacity .4s ease;
  filter: blur(4px);
}

/* Show on hover AND always pulsing on the hero */
.hero-section .btn-siri:hover::before,
.hero-section:focus-within .btn-siri::before {
  opacity: 1;
}

/* Always animate on the hero search button */
.hero-section .btn-siri::before {
  opacity: .7;
  animation: siriSpin 3s linear infinite, siriPulse 2s ease-in-out infinite alternate;
}

@keyframes siriSpin {
  from { --siri-angle: 0deg }
  to   { --siri-angle: 360deg }
}

@keyframes siriPulse {
  0%   { filter: blur(3px); opacity: .6 }
  100% { filter: blur(6px); opacity: .9 }
}

/* Register the custom property for animation */
@property --siri-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── STANDALONE SEARCH BAR siri effect ─────────── */
.search-bar-siri-wrap {
  position: relative;
  border-radius: var(--rpill);
  /* No animation on the wrapper — the button handles the siri ring */
}
.search-bar-siri-wrap .search-bar {
  position: relative;
  z-index: 1;
}

/* ── Map placeholder when no properties ─────────── */
#map-placeholder {
  width: 100%;
  height: 520px;
  border-radius: var(--r28);
  background: linear-gradient(135deg, var(--forest-pale), var(--sky-pale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--g200);
  color: var(--g400);
  font-family: var(--fb);
  text-align: center;
}

/* ── Amenities checkboxes ───────────────────────── */
.amenity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.amenity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r8);
  border: 1.5px solid var(--g200);
  cursor: pointer;
  transition: all var(--t1);
  font-family: var(--fb);
  font-size: .82rem;
  color: var(--g700);
  background: var(--white);
}
.amenity-item:has(input:checked),
.amenity-item.checked {
  background: var(--forest-pale);
  border-color: var(--forest);
  color: var(--forest-d);
}
.amenity-item input {
  width: 15px; height: 15px;
  accent-color: var(--forest);
  cursor: pointer; flex-shrink: 0;
}
.amenity-item i {
  color: var(--forest);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* Property submit amenities grid */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.amenity-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r12);
  border: 1.5px solid var(--g200);
  cursor: pointer;
  transition: all var(--t2);
  background: var(--white);
  font-family: var(--fb);
  font-size: .875rem;
  color: var(--g700);
}
.amenity-check-card:hover { border-color: var(--forest-l); background: var(--forest-pale) }
.amenity-check-card:has(input:checked) { border-color: var(--forest); background: var(--forest-pale); color: var(--forest-d) }
.amenity-check-card input { accent-color: var(--forest); width: 16px; height: 16px; flex-shrink: 0 }
.amenity-check-card i { color: var(--forest); width: 18px; text-align: center; flex-shrink: 0 }

/* ═══════════════════════════════════════════════════
   CERTIFICATION BADGES
   Guaranteed Heaven + Heavenly Privacy
═══════════════════════════════════════════════════ */
.cert-badge {
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:var(--rpill);
  font-family:var(--fb);font-size:.75rem;font-weight:700;
  letter-spacing:.04em;border:1.5px solid transparent;
  transition:all var(--t2);
}
.cert-heaven {
  background:linear-gradient(135deg,#fdf5e5,#fef9f0);
  color:var(--earth-d);border-color:var(--earth-l);
  box-shadow:0 2px 10px rgba(155,114,36,.15);
}
.cert-heaven i { color:var(--earth-l) }
.cert-privacy {
  background:linear-gradient(135deg,var(--ocean-pale),#e8f4fb);
  color:var(--ocean);border-color:var(--sky-l);
  box-shadow:0 2px 10px rgba(27,95,130,.12);
}
.cert-privacy i { color:var(--sky) }
.cert-badge:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.12) }

/* ═══════════════════════════════════════════════════
   BOOST / FEATURED BADGE
═══════════════════════════════════════════════════ */
.boost-badge {
  position:absolute;top:12px;left:12px;z-index:3;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;font-family:var(--fb);font-size:.65rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--rpill);
  display:flex;align-items:center;gap:4px;
  box-shadow:0 2px 10px rgba(245,158,11,.4);
  animation:boostPulse 2.5s ease-in-out infinite;
}
@keyframes boostPulse {
  0%,100%{box-shadow:0 2px 10px rgba(245,158,11,.4)}
  50%{box-shadow:0 2px 16px rgba(245,158,11,.7),0 0 0 3px rgba(245,158,11,.15)}
}
.prop-card.is-boosted { 
  border-color:var(--earth-l) !important;
  box-shadow:var(--sh3),0 0 0 2px rgba(201,164,74,.25) !important;
}
.prop-card.is-boosted:hover { box-shadow:var(--sh5),0 0 0 2px rgba(201,164,74,.35) !important }

/* ═══════════════════════════════════════════════════
   STAR RATING + REVIEWS
═══════════════════════════════════════════════════ */
.star-rating {
  display:inline-flex;align-items:center;gap:3px;
  font-size:1rem;line-height:1;
}
.star-rating .star { color:#e2e8f0; transition:color var(--t1) }
.star-rating .star.filled { color:#f59e0b }
.star-rating.interactive .star { cursor:pointer }
.star-rating.interactive .star:hover,
.star-rating.interactive .star:hover ~ .star { color:#f59e0b }

.rating-summary {
  display:flex;align-items:center;gap:10px;
  font-family:var(--fb);
}
.rating-big { font-family:var(--fh);font-size:3rem;color:var(--g900);line-height:1 }
.rating-count { font-size:.82rem;color:var(--g400) }
.rating-bars { display:flex;flex-direction:column;gap:5px;flex:1 }
.rating-bar-row { display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:.77rem;color:var(--g500) }
.rating-bar { flex:1;height:6px;background:var(--g200);border-radius:3px;overflow:hidden }
.rating-bar-fill { height:100%;background:linear-gradient(90deg,var(--earth-l),#f59e0b);border-radius:3px;transition:width .6s var(--e2) }

.review-card {
  background:var(--white);border:1px solid var(--g200);
  border-radius:var(--r20);padding:1.5rem;
  transition:box-shadow var(--t2);
}
.review-card:hover { box-shadow:var(--sh3) }
.reviewer-av {
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--forest),var(--sky));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:1.1rem;color:#fff;flex-shrink:0;
}
.reviewer-name { font-family:var(--fb);font-weight:600;color:var(--g900);font-size:.9rem }
.reviewer-date { font-family:var(--fb);font-size:.75rem;color:var(--g400);margin-top:2px }
.review-text { font-family:var(--fb);font-size:.9rem;color:var(--g700);line-height:1.75;margin-top:.75rem }

/* Write review form */
.review-form-wrap {
  background:var(--forest-pale);border:1.5px solid rgba(45,122,82,.2);
  border-radius:var(--r20);padding:1.5rem;
}
.stars-input { display:flex;gap:6px;margin:.75rem 0 }
.stars-input label { cursor:pointer;font-size:1.8rem;color:var(--g200);transition:color var(--t1) }
.stars-input input { display:none }
.stars-input label:hover,
.stars-input label.active { color:#f59e0b }

/* ═══════════════════════════════════════════════════
   BOOST PURCHASE MODAL
═══════════════════════════════════════════════════ */
.boost-modal-overlay {
  position:fixed;inset:0;z-index:5000;
  background:rgba(21,35,48,.7);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;opacity:0;pointer-events:none;transition:opacity var(--t2);
}
.boost-modal-overlay.open { opacity:1;pointer-events:all }
.boost-modal {
  background:var(--white);border-radius:var(--r28);
  padding:2rem;max-width:480px;width:100%;
  box-shadow:var(--sh5);
  transform:scale(.96);transition:transform var(--t2);
}
.boost-modal-overlay.open .boost-modal { transform:scale(1) }
.boost-plan {
  border:2px solid var(--g200);border-radius:var(--r16);
  padding:1.25rem;cursor:pointer;transition:all var(--t2);
  margin-bottom:.75rem;
}
.boost-plan:hover,.boost-plan.selected { border-color:var(--earth-l);background:var(--earth-pale) }
.boost-plan-name { font-family:var(--fh);font-size:1.1rem;color:var(--g900) }
.boost-plan-price { font-family:var(--fh);font-size:1.5rem;color:var(--earth);margin-top:2px }
.boost-plan-desc { font-family:var(--fb);font-size:.82rem;color:var(--g400);margin-top:4px }

/* ═══════════════════════════════════════════════════
   HOST SECTION (logged-in only, on homepage)
═══════════════════════════════════════════════════ */
.host-section {
  background:linear-gradient(135deg,var(--forest-d) 0%,var(--ocean) 100%);
  border-radius:var(--r28);padding:2.5rem;
  position:relative;overflow:hidden;
}
.host-section::before {
  content:'';position:absolute;top:-60px;right:-60px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.06);
}