/*
 * NestABD Sidebar Navigation — Phase SNB-2
 * Performance: CSS transform/opacity only. No layout-triggering props.
 * Size target: <8 KB unminified.
 *
 * KEY CHANGE from SNB-1:
 *   Hamburger is now in document.body (not inside #app), so it survives
 *   render() calls that replace #app.innerHTML. No injection into skeleton nav.
 */

/* ═══ 1. HAMBURGER BUTTON ═══ */
.nabd-menu-btn{
  position:fixed;top:14px;left:14px;z-index:201;
  width:40px;height:40px;
  border:none;background:transparent;cursor:pointer;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.9);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
  flex-shrink:0;
}
.nabd-menu-btn:hover{background:rgba(255,255,255,.1);}
.nabd-menu-btn:focus-visible{outline:2.5px solid var(--amber,#F59E0B);outline-offset:2px;}
.nabd-menu-btn:active{background:rgba(255,255,255,.08);transition-duration:60ms;}

/*
 * Shift the topnav logo area right so the hamburger does not overlap the "N" logo.
 * The skeleton nav already has padding-left:62px inline — this covers the real topnav.
 */
.topnav{padding-left:62px!important;}
/* Skeleton nav (before real render) */
nav[style*="background:#0F1B4C"],
nav[style*="background:#0f1b4c"]{padding-left:62px!important;}

/*
 * Hide the existing nav pill buttons (Verify / Builders / Legal / NCLT).
 * They move to the sidebar. We keep them in the DOM so sidebar's triggerNav()
 * can still call .click() on them — display:none does not prevent programmatic clicks.
 */
.nav-tabs{display:none!important;}

/*
 * On mobile the topnav was height:auto (104px) because nav-tabs added a second row.
 * With nav-tabs hidden the topnav collapses to ~52px. Update the CSS custom property
 * so the sticky ticker bar sticks at the correct position.
 */
@media(max-width:768px){
  :root{--topnav-h:52px;}
  .topnav{height:52px!important;}
}

/* ═══ 2. BACKDROP ═══ */
.nabd-drawer-backdrop{
  position:fixed;inset:0;
  background:rgba(5,10,30,.6);
  z-index:300;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  will-change:opacity;
}
.nabd-drawer-backdrop.nabd-open{opacity:1;pointer-events:all;}

/* ═══ 3. DRAWER ═══ */
.nabd-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:88vw;max-width:400px;
  z-index:310;
  background:linear-gradient(170deg,#0a1235 0%,#0e1a4a 50%,#121f56 100%);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  will-change:transform;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex;flex-direction:column;
  scrollbar-width:none;
  box-shadow:4px 0 40px rgba(0,0,0,.5);
  border-right:1px solid rgba(255,255,255,.06);
}
.nabd-drawer::-webkit-scrollbar{display:none;}
.nabd-drawer.nabd-open{transform:translateX(0);}

@media(min-width:769px){
  .nabd-drawer{width:380px;max-width:400px;}
}

body.nabd-drawer-active{overflow:hidden!important;}

/* ═══ 4. DRAWER HEADER ═══ */
.nabd-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.nabd-drawer-brand{display:flex;align-items:center;gap:11px;}
.nabd-drawer-logo{
  width:38px;height:38px;
  background:var(--amber,#F59E0B);
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:Sora,sans-serif;font-weight:700;font-size:16px;
  color:#0f172a;flex-shrink:0;
}
.nabd-drawer-brand-name{font-family:Sora,sans-serif;font-size:15px;font-weight:700;color:#fff;line-height:1.2;}
.nabd-drawer-brand-sub{font-size:10px;color:rgba(255,255,255,.42);letter-spacing:.4px;margin-top:2px;line-height:1.2;}

.nabd-drawer-close{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:10px;
  color:rgba(255,255,255,.6);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
  flex-shrink:0;-webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
.nabd-drawer-close:hover{background:rgba(255,255,255,.13);color:#fff;}
.nabd-drawer-close:focus-visible{outline:2.5px solid var(--amber,#F59E0B);outline-offset:2px;}

/* ═══ 5. NAV SCROLL AREA ═══ */
.nabd-drawer-nav{
  flex:1;padding:6px 0 12px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior:contain;
}
.nabd-drawer-nav::-webkit-scrollbar{display:none;}

/* ═══ 6. SECTION LABELS ═══ */
.nabd-nav-section{padding:0 10px;margin-bottom:2px;}
.nabd-nav-section-label{
  font-size:9px;font-weight:700;
  color:rgba(255,255,255,.28);letter-spacing:.9px;text-transform:uppercase;
  padding:10px 10px 5px;display:block;
}

/* ═══ 7. NAV ITEMS ═══ */
.nabd-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;background:transparent;
  width:100%;text-align:left;
  color:rgba(255,255,255,.75);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,color .15s,border-color .15s;
  min-height:44px;
  font-family:var(--font-body,'DM Sans',sans-serif);
  position:relative;
}
.nabd-nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nabd-nav-item:active{background:rgba(255,255,255,.05);transform:scale(.985);transition-duration:60ms;}
.nabd-nav-item:focus-visible{outline:2.5px solid var(--amber,#F59E0B);outline-offset:-2px;}
.nabd-nav-item.nabd-active{
  background:rgba(245,158,11,.1);
  border-color:rgba(245,158,11,.2);
  color:#FDE68A;
}

.nabd-nav-icon{
  font-size:17px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:rgba(255,255,255,.07);
  flex-shrink:0;transition:background .15s;
}
.nabd-nav-item.nabd-active .nabd-nav-icon{background:rgba(245,158,11,.18);}
.nabd-nav-item:hover .nabd-nav-icon{background:rgba(255,255,255,.1);}

.nabd-nav-label{font-size:13.5px;font-weight:600;flex:1;line-height:1.3;}

.nabd-nav-badge{
  font-size:9px;font-weight:700;
  background:rgba(245,158,11,.18);color:var(--amber,#F59E0B);
  border:1px solid rgba(245,158,11,.3);
  border-radius:20px;padding:2px 7px;letter-spacing:.3px;flex-shrink:0;
}
.nabd-nav-badge-ai{
  font-size:9px;font-weight:700;
  background:rgba(99,102,241,.18);color:#a5b4fc;
  border:1px solid rgba(99,102,241,.3);
  border-radius:20px;padding:2px 7px;letter-spacing:.3px;flex-shrink:0;
}
.nabd-nav-badge-new{
  font-size:9px;font-weight:700;
  background:rgba(34,197,94,.14);color:#4ade80;
  border:1px solid rgba(34,197,94,.28);
  border-radius:20px;padding:2px 7px;letter-spacing:.3px;flex-shrink:0;
}

.nabd-nav-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 10px;}

/* ═══ 8. DRAWER FOOTER ═══ */
.nabd-drawer-footer{
  padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 16px);
  border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.nabd-wa-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 18px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;border:none;border-radius:14px;
  text-decoration:none;
  font-family:var(--font-body,'DM Sans',sans-serif);
  font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(37,211,102,.28);
  transition:opacity .18s,transform .18s;
  -webkit-tap-highlight-color:transparent;box-sizing:border-box;
}
.nabd-wa-btn:hover{opacity:.92;transform:translateY(-1px);}
.nabd-wa-btn:active{opacity:.86;transform:scale(.98);transition-duration:60ms;}
.nabd-wa-btn-text{flex:1;min-width:0;}
.nabd-wa-btn-title{font-size:13px;font-weight:700;line-height:1.2;}
.nabd-wa-btn-sub{font-size:10.5px;opacity:.72;margin-top:1px;}

/* ═══ 9. REMOVE INVESTMENT TOOLS FIXED BOTTOM BAR ═══
   The large fixed bottom bar on mobile is removed.
   The desktop right-side pill is also removed.
   Investment Tools is still accessible via the sidebar.
*/
.it-fab{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}
/* Remove bottom padding that was reserved for the mobile FAB */
.main,.footer{padding-bottom:0!important;}

/* ═══ 10. WHITESPACE / ADJUST WA STICKY ═══ */
/* The WA floating CTA (if present) should not be at a conflicting position */
#nabd-sticky-cta{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;}

/* ═══ 10a. HIDE FLOATING FAB / WHATSAPP CTA WHEN SIDEBAR IS OPEN ═══
   Toggled by sidebar-nav.js: body.sidebar-open is added on openDrawer()
   and removed on closeDrawer(), preventing the floating button from
   overlapping the open drawer on mobile.
   IMPORTANT: Restricted to ≤768px only — desktop always shows the FAB
   regardless of sidebar state.
*/
@media (max-width: 768px) {
  body.sidebar-open .ask-expert-fab,
  body.sidebar-open [class*="whatsapp"],
  body.sidebar-open [class*="fab"],
  body.sidebar-open #nabd-sticky-cta { display: none !important; }
}

/* ═══ 11. MOBILE HEADER FIX — Public RERA Records positioning ═══
 *
 * ROOT CAUSE: The city-switcher contains four pills:
 *   GBN (active) + GGM Soon + GZB Soon + FBD Soon
 * On narrow screens (360–412px) these consume ~220px of horizontal space.
 * With padding-left:62px (hamburger) + padding-right:14px, the available
 * content width at 375px is only ~299px — not enough for city-switcher AND
 * the "Public RERA Records" verified-badge side by side.
 *
 * FIX: Hide the three "coming soon" city pills on mobile so only the active
 * market (GBN) is visible. Coming-soon pills are still in the DOM (JS/data
 * can still reference them), they just don't render at narrow widths.
 *
 * This leaves room for: NestABD + GBN (~115px) + "Public RERA Records" (~125px)
 * = ~240px total, well within the 299px available at 375px.
 *
 * .city-pill-soon remains visible on desktop (≥769px) where there is space.
 * .city-pill-active (GBN) is never hidden — GBN stays in the header per spec.
 */
@media (max-width:768px) {
  /* Hide "coming soon" market pills — only active market (GBN) stays */
  .city-pill-soon {
    display: none !important;
  }

  /* verified-badge: compact size, never clips or overflows */
  .verified-badge {
    white-space: nowrap;
    font-size: 11px !important;
    padding: 5px 10px !important;
    flex-shrink: 0;
  }

  /* topnav-logo: allow it to shrink but not overflow into badge area */
  .topnav-logo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* topnav-right: never shrink, always fully visible */
  .topnav-right {
    flex-shrink: 0;
  }
}

/* ═══ 12. MOBILE CITY DROPDOWN (Phase MOB-CITY-2) ═══
 * city-mob-btn: a tap trigger replacing the pill row on mobile.
 * Tap → .city-switcher gets .city-open → pills appear as dropdown.
 */

/* Hide trigger on desktop */
.city-mob-btn {
  display: none;
}

@media (max-width: 768px) {
  /* Show trigger button */
  .city-mob-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #0d9488;
    border: none;
    border-radius: 999px;
    color: #d9fff6;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    min-height: 32px;
    min-width: 44px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* city-switcher becomes dropdown anchor */
  .city-switcher {
    position: relative;
    overflow: visible;
    margin-right: 8px;
  }

  /* Hide all pills by default on mobile (replaces the old city-pill-soon only rule) */
  .city-switcher .city-pill {
    display: none !important;
  }

  /* Dropdown panel when open */
  .city-switcher.city-open .city-pill {
    display: inline-flex !important;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    font-size: 12px;
    padding: 8px 12px;
    min-height: 38px;
    border-radius: 8px;
  }

  /* Dropdown panel container */
  .city-switcher.city-open {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: #0f1b4c;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    max-width: calc(100vw - 28px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .40);
  }

  /* city-mob-btn pressed state */
  .city-mob-btn:active {
    filter: brightness(.88);
  }
}