/* ===========================================================
   NILA Connect v21.18 — Loveable Product Standard
   Premium overlay: typography, spacing, cards, nav, hero polish.
   Loads AFTER all prior layers so it wins by cascade.
   =========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --n-ink:#0d1f1c;
  --n-ink-2:#3a524d;
  --n-mute:#6a807b;
  --n-paper:#fbf7ef;
  --n-paper-2:#f3ecd9;
  --n-card:#ffffff;
  --n-line:rgba(13,31,28,.08);
  --n-line-2:rgba(13,31,28,.14);
  --n-deep:#0b3b35;
  --n-deep-2:#0e524a;
  --n-gold:#c8983a;
  --n-lime:#bcd95b;
  --n-rose:#c45a3a;
  --n-shadow-1:0 1px 2px rgba(13,31,28,.04), 0 6px 18px rgba(13,31,28,.06);
  --n-shadow-2:0 2px 6px rgba(13,31,28,.05), 0 24px 60px rgba(13,31,28,.12);
  --n-radius-sm:10px;
  --n-radius:16px;
  --n-radius-lg:22px;
  --n-display:"Fraunces","Outfit",Georgia,serif;
  --n-sans:"Inter","Outfit",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}

/* ---------- Global typography reset (premium pair) ---------- */
html,body{ font-family:var(--n-sans) !important; color:var(--n-ink); letter-spacing:-0.005em; }
body{
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(188,217,91,.18), transparent 60%),
    radial-gradient(700px 400px at 100% -5%, rgba(200,152,58,.10), transparent 55%),
    linear-gradient(180deg,#fbf7ef 0%, #f6efde 60%, #f1ead5 100%) !important;
}
h1,h2,h3,.hero h1,.hero-title,.section-title{
  font-family:var(--n-display) !important;
  font-weight:600 !important;
  letter-spacing:-0.022em !important;
  color:var(--n-ink) !important;
  line-height:1.05 !important;
  font-feature-settings:"ss01","ss02","liga","kern";
}
h1{ font-size:clamp(38px, 6.4vw, 76px) !important; }
h2{ font-size:clamp(26px, 3.4vw, 42px) !important; }
h3{ font-size:clamp(18px, 2vw, 22px) !important; }
p,li,label,.muted,.body,.lead{ font-family:var(--n-sans) !important; color:var(--n-ink-2); }
.lead,p.lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--n-ink-2); }
small,.small{ color:var(--n-mute); }

/* ---------- Navigation ---------- */
.nav, .navbar, header.site-header{
  background:rgba(251,247,239,.78) !important;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--n-line) !important;
  box-shadow:none !important;
}
.nav-links a{
  font-family:var(--n-sans) !important;
  font-weight:600 !important;
  color:var(--n-ink) !important;
  letter-spacing:-0.005em;
  font-size:14px;
}
.nav-links a.active{ color:var(--n-deep) !important; }
.nav-links a:hover{ color:var(--n-deep-2) !important; }

/* ---------- Buttons (calm, modern, not pill-fat everywhere) ---------- */
.btn, button.btn, a.btn, .cta, .primary-btn{
  border-radius:12px !important;
  font-family:var(--n-sans) !important;
  font-weight:600 !important;
  letter-spacing:-0.005em;
  padding:12px 18px !important;
  box-shadow:var(--n-shadow-1) !important;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease !important;
}
.btn-gold, .btn.btn-gold, .nila-btn.primary, .btn-primary{
  background:var(--n-deep) !important;
  color:#fff !important;
  border:1px solid var(--n-deep) !important;
}
.btn-gold:hover, .nila-btn.primary:hover, .btn-primary:hover{
  background:var(--n-deep-2) !important;
  transform:translateY(-1px);
  box-shadow:var(--n-shadow-2) !important;
}
.btn-outline, .nila-btn.secondary{
  background:#fff !important;
  color:var(--n-ink) !important;
  border:1px solid var(--n-line-2) !important;
}
.btn-outline:hover, .nila-btn.secondary:hover{
  border-color:var(--n-ink) !important;
  transform:translateY(-1px);
}
.btn-lime{
  background:var(--n-lime) !important;
  color:var(--n-ink) !important;
  border:1px solid rgba(13,31,28,.12) !important;
}

/* ---------- Inputs ---------- */
input,select,textarea{
  border-radius:12px !important;
  border:1px solid var(--n-line-2) !important;
  background:#fff !important;
  font-family:var(--n-sans) !important;
  font-weight:500 !important;
  color:var(--n-ink) !important;
  box-shadow:none !important;
  padding:12px 14px !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--n-deep) !important;
  box-shadow:0 0 0 4px rgba(11,59,53,.12) !important;
}
label{ font-weight:600 !important; color:var(--n-ink) !important; font-size:13px !important; }

/* ---------- Hero (Apple/Stripe restraint) ---------- */
.hero, .dir-hero{
  padding-top:clamp(48px, 7vw, 92px) !important;
  padding-bottom:clamp(40px, 6vw, 80px) !important;
  background:transparent !important;
  color:var(--n-ink) !important;
  overflow:visible !important;
}
.hero:after,.dir-hero:after,.page-hero:after,.section-hero:after{ display:none !important; }
.hero h1, .dir-hero h1{
  color:var(--n-ink) !important;
  max-width:18ch;
}
.hero p, .hero .lead, .dir-hero p{
  color:var(--n-ink-2) !important;
  max-width:54ch;
}
.hero .btn-gold, .dir-hero .btn-gold{ background:var(--n-deep) !important; color:#fff !important; }

/* hero search shell – glass on paper */
#heroSearch, .hero-search, .dir-hero .search-bar{
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--n-line-2) !important;
  box-shadow:var(--n-shadow-2) !important;
  border-radius:18px !important;
  padding:14px !important;
  backdrop-filter:blur(8px);
}
#heroSearch input, #heroSearch select,
.dir-hero .search-bar input, .dir-hero .search-bar select{
  background:#fff !important;
  color:var(--n-ink) !important;
  border:1px solid var(--n-line) !important;
}
.dir-hero .search-bar input::placeholder{ color:var(--n-mute) !important; }
.dir-hero{
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(188,217,91,.22), transparent 60%),
    linear-gradient(180deg, #f4ecd6, #f8f1de) !important;
  color:var(--n-ink) !important;
}

/* ---------- Category chips (calmer, premium) ---------- */
.hcat{ color:var(--n-ink) !important; }
.hcat span{ color:var(--n-ink-2) !important; font-weight:600 !important; font-size:11px !important; }
.hcat:hover{ background:rgba(11,59,53,.06) !important; border-color:transparent !important; }
.hcat.active{ background:rgba(11,59,53,.10) !important; border-color:transparent !important; color:var(--n-deep) !important; }
.hcat.active span{ color:var(--n-deep) !important; }
.hcat-icon-wrap{
  width:52px !important; height:52px !important; border-radius:14px !important;
  box-shadow:0 6px 16px rgba(13,31,28,.10) !important;
}
.dir-cat{
  border-radius:999px !important;
  padding:8px 14px !important;
  background:#fff !important;
  border:1px solid var(--n-line-2) !important;
  color:var(--n-ink) !important;
  font-weight:600 !important;
  font-size:13px !important;
}
.dir-cat.active{ background:var(--n-deep) !important; color:#fff !important; border-color:var(--n-deep) !important; }

/* ---------- Cards (provider, dir, dashboard) ---------- */
.card, .panel, .dir-card, .provider-card, .nila-pcard, .nila-gcard,
.nila-card, .review-card, .dashboard-card, .stat-card, .notice-card, .request-card{
  background:#fff !important;
  border:1px solid var(--n-line) !important;
  border-radius:var(--n-radius) !important;
  box-shadow:var(--n-shadow-1) !important;
  transition:transform .22s ease, box-shadow .25s ease, border-color .22s ease !important;
}
.dir-card:hover, .provider-card:hover, .nila-pcard:hover{
  transform:translateY(-2px);
  border-color:var(--n-line-2) !important;
  box-shadow:var(--n-shadow-2) !important;
}
.dir-card-avatar, .nila-pcard .pcard-avatar{
  background:linear-gradient(140deg, var(--n-deep), var(--n-deep-2)) !important;
  color:#f4e6b8 !important;
  border-radius:12px !important;
}
.dir-card-name, .nila-pcard h3{
  font-family:var(--n-display) !important; font-weight:600 !important;
  color:var(--n-ink) !important; letter-spacing:-0.01em !important;
}
.dir-card-sub{ color:var(--n-mute) !important; font-weight:500 !important; }
.dir-card-rating{ color:var(--n-gold) !important; font-weight:700 !important; }
.dir-card-tag{
  background:rgba(13,31,28,.05) !important;
  color:var(--n-ink-2) !important;
  font-weight:600 !important;
  border-radius:999px !important;
  padding:4px 10px !important;
  font-size:11px !important;
}
.dir-card-tag.avail{ background:rgba(188,217,91,.35) !important; color:#345414 !important; }
.dir-card-tag.pro{ background:var(--n-deep) !important; color:#f4e6b8 !important; }
.dir-card-tag.google{ background:rgba(66,133,244,.12) !important; color:#1a4f9c !important; }
.dir-btn-primary{ background:var(--n-deep) !important; color:#fff !important; border-radius:10px !important; font-weight:600 !important; }
.dir-btn-wa{ background:#25D366 !important; border-radius:10px !important; }

/* hide provider plan filter on customer-facing directory */
.dir-sidebar #dirPlan,
.dir-sidebar #dirPlan + *,
.dir-sidebar label[for="dirPlan"],
.dir-sidebar .filter-group:has(#dirPlan){ display:none !important; }

/* ---------- Provider profile ---------- */
#providerProfileMount, .nila-profile-v218{ font-family:var(--n-sans); }
#providerProfileMount h1, #providerProfileMount h2{
  font-family:var(--n-display) !important; font-weight:600 !important;
}

/* ---------- Map ---------- */
#heroMapWrap, #dirMapCard, .hero-map-wrap{
  border-radius:var(--n-radius-lg) !important;
  overflow:hidden;
  border:1px solid var(--n-line-2) !important;
  box-shadow:var(--n-shadow-2) !important;
}
/* hide internal map source toggles from public */
.map-mode-bar, .mmode-source, [data-map-source-toggle]{ display:none !important; }

/* ---------- Section spacing ---------- */
section, .section{ padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(40px,5vw,72px); }
.container{ max-width:1180px !important; }

/* ---------- Footer ---------- */
footer, .site-footer{
  background:#0b1f1c !important;
  color:rgba(255,255,255,.78) !important;
  border-top:none !important;
}
footer a, .site-footer a{ color:rgba(255,255,255,.9) !important; }

/* ---------- Subtle reveal animation ---------- */
@keyframes nFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1, .hero .lead, .hero-search, .dir-hero h1, .dir-hero .search-bar,
.section-title, .dir-card, .nila-card, .provider-card{
  animation:nFadeUp .55s cubic-bezier(.2,.7,.2,1) both;
}
.dir-card:nth-child(2){ animation-delay:.05s }
.dir-card:nth-child(3){ animation-delay:.10s }
.dir-card:nth-child(4){ animation-delay:.15s }

/* ---------- Premium nav badge / pill ---------- */
.plan-badge{ font-family:var(--n-sans) !important; font-weight:700 !important; letter-spacing:.02em; }

/* ---------- Mobile bottom nav ---------- */
.mobile-nav{
  background:rgba(255,255,255,.96) !important;
  border-top:1px solid var(--n-line) !important;
  backdrop-filter:blur(10px);
}
.mobile-nav .mn-item{ color:var(--n-ink-2) !important; }
.mobile-nav .mn-item.active{ color:var(--n-deep) !important; }
.mobile-nav .mn-item.active b{ color:var(--n-deep) !important; }

/* ---------- Owner / admin pages: keep them practical but premium ---------- */
.page-owner, .page-admin{ background:#f4ecd6 !important; }

/* ---------- Remove old eye-watering gradients on hero ---------- */
.hero{ background-image:none !important; }
.hero, .hero-inner{ color:var(--n-ink) !important; }
.hero h1, .hero p{ text-shadow:none !important; }

/* keep .dark-hero override if used */
body .hero.dark, body .dir-hero.dark{ color:#fff !important; }

/* skeleton */
.provider-skeleton{
  background:linear-gradient(90deg,#efe6d2,#f6efde,#efe6d2) !important;
  background-size:200% 100% !important;
  border-radius:var(--n-radius) !important;
  animation:nShimmer 1.4s ease-in-out infinite;
  min-height:140px;
}
@keyframes nShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}