/* ============================================================
   nk-shared.css  ·  Nyumba254 shared design system
   One source of truth for tokens, buttons, nav, tab bar, footer,
   cards, forms, modals, bottom sheet, toast, skeleton.
   Load BEFORE /theme.css. Page-specific layout stays inline.
   Breakpoints (the same on every page):
     1000px  secondary nav links collapse
      900px  single-column pages, filter drawers, bottom sheets
      768px  nav collapses to menu button, mobile tab bar appears
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#0F6E56;--green-light:#E1F5EE;--green-mid:#1D9E75;--green-dark:#085041;
  --text:#1a1a18;--text-2:#4a4a46;--text-3:#6b6a63;
  --border:#e0ded8;--surface:#f7f6f2;--white:#fff;
  --danger:#C53030;--danger-bg:#FFF5F5;--red:var(--danger);--red-light:var(--danger-bg);
  --amber:#7a4f00;--amber-bg:#FFF7E6;--amber-border:#F3D9A0;
  --radius:10px;--radius-lg:16px;--nav-h:64px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(15,110,86,.07);
  /* bottom stack: tab bar (measured) + sticky action bar (measured). Toasts, chat FAB, scroll-top read these. */
  --nk-tabbar-h:0px;--nk-cta-h:0px;--nk-stack:0px;
}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--surface);font-size:15px;line-height:1.6;overflow-x:clip;width:100%;padding-bottom:calc(var(--nk-tabbar-h) + var(--nk-cta-h))}
body.nk-cta-show{--nk-stack:var(--nk-cta-h)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;z-index:100001;font-size:14px;font-weight:600}
.skip-link:focus{left:0}
.link{color:var(--green);font-weight:600;font-size:13.5px;min-height:44px;padding:0 4px;display:inline-flex;align-items:center}
.link:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── Data saver banner ── */
.nk-datasaver-banner{display:none;align-items:center;justify-content:center;gap:10px;background:var(--amber-bg);color:var(--amber);border-bottom:1px solid var(--amber-border);font-size:13px;padding:9px 16px;text-align:center;flex-wrap:wrap}
.nk-datasaver-banner.visible{display:flex}
.nk-datasaver-banner button{border:1px solid var(--amber);color:var(--amber);font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;min-height:32px}
.nk-datasaver-banner button:hover{background:var(--amber);color:#fff}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:600;padding:0 18px;min-height:44px;border-radius:var(--radius);transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.btn-primary{background:var(--green);color:#fff;letter-spacing:.01em}
.btn-primary:hover{background:var(--green-dark)}
.btn-outline{border:1.5px solid var(--green);color:var(--green-dark);background:var(--white)}
.btn-outline:hover{background:var(--green-light)}
.btn-wa{background:#1fa855;color:#fff}
.btn-wa:hover{background:#178a45}
.btn-block{width:100%}
.btn:disabled,.btn[aria-busy="true"]{opacity:.6;cursor:not-allowed}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:nkSpin .7s linear infinite}
.btn-outline .spin{border-color:var(--green-light);border-top-color:var(--green)}
@keyframes nkSpin{to{transform:rotate(360deg)}}

/* ── Navbar ── */
nav#main-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(16px,3vw,32px);height:var(--nav-h);background:var(--white);border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Playfair Display',serif;font-size:20px;color:var(--green-dark);font-weight:600;flex-shrink:0}
.logo-icon{height:48px;display:flex;align-items:center;justify-content:center}
.logo-icon img{width:auto;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22%;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{font-size:14px;color:var(--text-2);padding:8px 14px;border-radius:var(--radius);transition:background .15s;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;gap:6px}
.nav-link:hover{background:var(--surface);color:var(--text)}
.nav-link[aria-current="page"]{color:var(--green);font-weight:600}
.nav-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.nav-count{background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:16px;text-align:center}
.mobile-menu-btn{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}
.mobile-menu-btn svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:2;display:block}
.mobile-nav{display:none;position:fixed;top:var(--nav-h);left:0;right:0;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--white);border-bottom:1px solid var(--border);padding:16px;z-index:9999;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:15px;color:var(--text-2);padding:12px 14px;border-radius:var(--radius)}
.mobile-nav a:hover{background:var(--surface)}
.mobile-nav .btn-primary{color:#fff;margin-top:8px}
@media(max-width:1000px){.nav-secondary{display:none}}
@media(max-width:768px){.nav-links{display:none}.mobile-menu-btn{display:flex}}

/* ── Mobile tab bar ── */
.nk-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--white);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));align-items:stretch;justify-content:space-around;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.nk-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--text-3);padding:4px 0;flex:1;position:relative;min-height:46px}
.nk-tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.nk-tab.active{color:var(--green)}
.nk-tab-postbtn{top:-14px;color:var(--green)}
.nk-tab-postcircle{width:42px;height:42px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(15,110,86,.4);margin-bottom:2px}
.nk-tab-postcircle svg{width:20px;height:20px;stroke:#fff}
.nk-tab-badge{position:absolute;top:0;right:22%;background:var(--green);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:10px;display:none;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--white)}
.nk-tab-badge.visible{display:flex}
@media(max-width:768px){.nk-tabbar{display:flex}}

/* ── Footer ── */
footer{background:var(--text);color:rgba(255,255,255,.6);padding:56px 32px 28px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-logo{font-family:'Playfair Display',serif;font-size:22px;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.footer-logo-icon{height:40px;display:flex}
.footer-logo-icon img{width:auto;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.footer-tagline{font-size:13px;line-height:1.8;max-width:240px;color:rgba(255,255,255,.5);margin-bottom:20px}
.footer-social{display:flex;gap:8px}
.footer-social a{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .15s}
.footer-social a:hover{background:var(--green)}
.footer-social svg{width:16px;height:16px;stroke:rgba(255,255,255,.75);fill:none;stroke-width:2}
.footer-col h2{font-size:11px;font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:.1em;text-transform:uppercase}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.55);margin-bottom:10px;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-counties{column-count:2;column-gap:16px;max-height:220px;overflow-y:auto;padding-right:6px}
.footer-counties a,.footer-counties .soon{break-inside:avoid;margin-bottom:8px}
.footer-counties .soon{display:block;font-size:13px;color:rgba(255,255,255,.3)}
.footer-divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:24px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p,.footer-bottom-links a{font-size:12px;color:rgba(255,255,255,.45)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a:hover{color:#fff}
@media(max-width:1024px){.footer-top{grid-template-columns:2fr 1fr 1fr}.footer-top>:nth-child(n+4){display:none}}
@media(max-width:768px){footer{padding:40px 16px 24px}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-top>:nth-child(n+4){display:block}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}}

/* ── Listing card (nkBuildCard output) ── */
.card{display:block;background:var(--white);border-radius:18px;border:1px solid var(--border);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-card)}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:0 10px 32px rgba(15,110,86,.18)}
.card-img{aspect-ratio:4/3;background:var(--surface);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-img::after{content:'';position:absolute;inset:auto 0 0 0;height:50%;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.34));pointer-events:none}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-3);font-size:12px}
.card-img-placeholder svg{width:36px;height:36px;opacity:.4}
.badge-featured,.badge-new{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:20px;letter-spacing:.03em}
.badge-featured{background:linear-gradient(135deg,#F5B942,#E8973A);color:#3A2405;box-shadow:0 2px 8px rgba(232,151,58,.45)}
.badge-featured::before{content:'★ '}
.badge-new{background:linear-gradient(135deg,var(--green-mid),var(--green-dark));color:#fff;box-shadow:0 2px 8px rgba(15,110,86,.4)}
.badge-cat{position:absolute;left:12px;bottom:12px;z-index:2;font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:20px}
.badge-cat.apartment{background:var(--green);color:#fff}
.badge-cat.house{background:var(--green-dark);color:#fff}
.badge-cat.boarding{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green-mid)}
.badge-cat.airbnb{background:var(--white);color:var(--green-dark);border:1px solid var(--green)}
.badge-cat.commercial{background:var(--text);color:#fff}
.card-img .nk-heart-overlay{position:absolute;top:10px;right:10px;z-index:3}
.card-body{padding:16px 16px 15px}
.card-area{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.card-area::before{content:'📍';font-size:12px;flex-shrink:0}
.card-verified-badge{display:inline-flex;align-items:center;gap:3px;background:var(--green-light);color:var(--green-dark);font-size:9.5px;font-weight:700;padding:1px 7px 1px 5px;border-radius:20px;text-transform:none;letter-spacing:0}
.card-verified-badge svg{width:9px;height:9px;stroke:var(--green-dark);fill:none;stroke-width:2.6}
.card-role-badge{display:inline-flex;align-items:center;gap:3px;background:var(--surface);color:var(--text-2);border:1px solid var(--border);font-size:9.5px;font-weight:700;padding:2px 7px 2px 5px;border-radius:20px;text-transform:none;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.card-role-badge svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.6}
.card-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.35;overflow-wrap:anywhere}
.card-sub{font-size:12.5px;color:var(--text-3);margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-role,.card-viewing-fee{display:block;max-width:100%;margin:0 0 7px;font-size:12px;line-height:1.4;font-weight:600;color:var(--text-2);white-space:normal;overflow-wrap:anywhere}
.card-viewing-fee{padding:4px 7px;border:1px solid var(--border);border-radius:7px;background:var(--surface);width:fit-content;max-width:100%;margin-bottom:10px}
.card-viewing-fee{font-size:11.5px;font-weight:600;color:var(--text-2);margin:0 0 10px}
.card-price{font-size:18px;font-weight:700;color:var(--green-dark);letter-spacing:-.01em;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.card-price span{font-size:13px;font-weight:500;color:var(--text-2)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:20px}
@media(max-width:768px){
  .card-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1*clamp(16px,4vw,32px));padding:4px clamp(16px,4vw,32px) 12px;scroll-padding-left:clamp(16px,4vw,32px);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .card-grid::-webkit-scrollbar{display:none}
  .card-grid>.card{flex:0 0 78%;max-width:320px;scroll-snap-align:start}
}

/* ── Skeleton ── */
.sk{background:linear-gradient(90deg,#f0efe9 25%,#e8e7e1 50%,#f0efe9 75%);background-size:200% 100%;animation:nkShimmer 1.4s infinite;border-radius:12px}
@keyframes nkShimmer{to{background-position:-200% 0}}

/* ── Forms ── */
.nf-field{margin-bottom:14px}
.nf-field>label,.nf-label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.nf-optional{font-weight:400;color:var(--text-3);font-size:12px}
.nf-field input[type="text"],.nf-field input[type="tel"],.nf-field input[type="email"],.nf-field input[type="number"],.nf-field select,.nf-field textarea{width:100%;min-height:46px;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);outline:none;background:var(--surface);transition:border-color .15s,background .15s}
.nf-field input:focus,.nf-field select:focus,.nf-field textarea:focus{border-color:var(--green);background:var(--white)}
.nf-field [aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
.nf-field textarea{resize:vertical;min-height:84px}
.nf-err{color:var(--danger);font-size:12.5px;margin-top:5px}
.nf-err:empty{display:none}
.nf-banner{background:var(--danger-bg);color:var(--danger);border:1px solid #f0caca;border-radius:var(--radius);padding:10px 12px;font-size:13px;margin-bottom:14px}
.nf-banner:empty{display:none}
.nf-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2);cursor:pointer;min-height:44px}
.nf-check input{width:18px;height:18px;accent-color:var(--green);flex-shrink:0}
@media(max-width:900px){.nf-field input,.nf-field select,.nf-field textarea{font-size:16px}}

/* ── Modal ── */
.notify-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100000;align-items:center;justify-content:center;padding:20px;overscroll-behavior:contain}
.notify-modal-overlay.open{display:flex}
.notify-modal{background:var(--white);border-radius:var(--radius-lg);max-width:480px;width:100%;max-height:90dvh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.18);overscroll-behavior:contain}
.notify-modal-head{padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:2}
.notify-modal-head h2{font-size:18px;font-weight:600;color:var(--text);font-family:'Playfair Display',serif}
.notify-modal-close{width:44px;height:44px;border-radius:50%;font-size:20px;color:var(--text-3);margin-right:-8px}
.notify-modal-close:hover{color:var(--text);background:var(--surface)}
.notify-modal-body{padding:18px 20px}
.notify-modal-sub{font-size:13.5px;color:var(--text-3);margin-bottom:16px;line-height:1.6}
.notify-modal-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:var(--white)}
body.nk-modal-open .nk-scrolltop-btn{display:none!important}
@media(max-width:768px){.notify-modal-overlay{padding:8px}.notify-modal{max-width:100%;border-radius:14px}}

/* ── Bottom sheet ── */
.nk-sheet-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100000;align-items:flex-end;overscroll-behavior:contain}
.nk-sheet-overlay.open{display:flex}
.nk-sheet{width:100%;background:var(--white);border-radius:18px 18px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:76dvh;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -8px 30px rgba(0,0,0,.18);animation:nkSheetUp .22s ease}
@keyframes nkSheetUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.nk-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:4px;margin:0 auto 12px}

/* ── Toast + scroll-top + floating chat ── */
.toast{position:fixed;left:50%;bottom:calc(var(--nk-tabbar-h) + var(--nk-stack) + 20px);transform:translate(-50%,24px);z-index:100002;background:var(--green-dark);color:#fff;padding:12px 20px;border-radius:var(--radius);font-size:13.5px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:all .25s;max-width:min(92vw,420px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.error{background:var(--danger)}
.nk-scrolltop-btn{display:none;position:fixed;left:16px;bottom:calc(var(--nk-tabbar-h) + var(--nk-stack) + 16px);z-index:60;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--white);border:1.5px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.14);opacity:0;pointer-events:none;transition:opacity .2s ease}
.nk-scrolltop-btn.visible{display:flex;opacity:1;pointer-events:auto}
.nk-scrolltop-btn svg{width:18px;height:18px;stroke:var(--green-dark);fill:none;stroke-width:2.4}
@media(max-width:768px){
  .nk-chat-fab{bottom:calc(var(--nk-tabbar-h) + var(--nk-stack) + 14px)!important}
  body.nk-modal-open .nk-chat-fab{display:none!important}
}