/* ============================================================
   OKBEA — MOBILE RESPONSIVE STYLES
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ============================================================ */

/* ── HAMBURGER BUTTON (hidden on desktop) ─────────────────── */
.mob-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--dash-muted);
  transition: color .15s, border-color .15s;
}
.mob-menu-btn:hover {
  color: var(--dash-text);
  border-color: var(--dash-muted);
}
.mob-menu-btn svg { display: block; }

/* ── MOBILE SIDEBAR: expand section bodies fully ─────────── */
@media (max-width: 768px) {
  .dash-sidebar.mobile-open .sb-sec-body.open {
    max-height: 800px; /* more room for many items */
  }
}

/* ── MOBILE SIDEBAR OVERLAY (backdrop) ────────────────────── */
.mob-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mob-sidebar-overlay.active { display: block; }

/* ══════════════════════════════════════════════════════════
   TABLET  (≤ 1024px)
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── LANDING NAV ─────────────────────────────────────── */
  .land-nav { padding: 0 1.75rem; }
  .lnav-links { display: none; }

  /* ── HOW IT WORKS ──────────────────────────────────── */
  .hiw-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── STREAMS GRID ────────────────────────────────────── */
  .streams-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── PRICING GRID ────────────────────────────────────── */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; }

  /* ── TESTIMONIALS ────────────────────────────────────── */
  .tgrid { grid-template-columns: repeat(2, 1fr); }

  /* ── OBJECTIONS ──────────────────────────────────────── */
  .objections { grid-template-columns: repeat(2, 1fr); }

  /* ── FOOTER ──────────────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* ── DASHBOARD WIDGET ROWS ───────────────────────────── */
  .wr-3  { grid-template-columns: 1fr 1fr; }
  .wr-4  { grid-template-columns: repeat(2, 1fr); }
  .wr-2-wide { grid-template-columns: 1fr; }

  /* ── FREE TOOL BAR ───────────────────────────────────── */
  .free-tool-bar { flex-direction: column; text-align: center; }
  .ftb-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HAMBURGER ───────────────────────────────────────── */
  .mob-menu-btn { display: flex; }

  /* ── TOPBAR ──────────────────────────────────────────── */
  .dash-topbar { padding: 0 1rem; gap: .5rem; }
  .dtb-search { display: none; }
  .dtb-manage { display: none; }
  .dtb-add { display: none; }
  .dtb-right { gap: .4rem; }

  /* ── LANDING NAV ─────────────────────────────────────── */
  .land-nav { padding: 0 1.25rem; gap: 1rem; }
  .lnav-ctas .lbtn.ghost { display: none; }

  /* ── LANDING GENERAL ─────────────────────────────────── */
  .lsec { padding: 4rem 1.25rem; }
  .trust-bar { padding: 1rem 1.25rem; gap: 1.25rem; }

  /* ── HERO ────────────────────────────────────────────── */
  .land-hero { padding: 4rem 1.25rem; min-height: 80vh; }
  .hero-sub { font-size: .9rem; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hbtn { width: 100%; max-width: 320px; text-align: center; }

  /* ── STATS BAR ───────────────────────────────────────── */
  .stats-bar { flex-wrap: wrap; }
  .stat-item {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--land-border);
    padding: 1rem .75rem;
  }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--land-border); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* ── HOW IT WORKS ────────────────────────────────────── */
  .hiw-grid { grid-template-columns: 1fr 1fr; }

  /* ── STREAMS GRID ────────────────────────────────────── */
  .streams-grid { grid-template-columns: 1fr; }

  /* ── PRICING ─────────────────────────────────────────── */
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }

  /* ── TESTIMONIALS ────────────────────────────────────── */
  .tgrid { grid-template-columns: 1fr; }

  /* ── OBJECTIONS ──────────────────────────────────────── */
  .objections { grid-template-columns: 1fr; }

  /* ── EMAIL FORM ──────────────────────────────────────── */
  .email-form { flex-direction: column; }
  .email-form-btn { width: 100%; }

  /* ── EXIT POPUP EMAIL ROW ────────────────────────────── */
  .exit-email-row { flex-direction: column; }
  .exit-email-btn { width: 100%; }

  /* ── FOOTER ──────────────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .land-footer { padding: 2.5rem 1.25rem 1.5rem; }
  .footer-bot { flex-direction: column; align-items: center; text-align: center; }

  /* ── CTA SECTION ─────────────────────────────────────── */
  .cta-sec { padding: 4rem 1.25rem; }

  /* ── COMPARE TABLE ───────────────────────────────────── */
  .compare-wrap, .comp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── ACTIVITY TICKER ─────────────────────────────────── */
  .activity-ticker {
    bottom: .75rem;
    left: .75rem;
    right: .75rem;
    max-width: none;
  }

  /* ── DASHBOARD WIDGET ROWS ───────────────────────────── */
  .wr-2, .wr-3, .wr-4, .wr-2-wide { grid-template-columns: 1fr; }

  /* ── STREAM STATS (dynamic-dashboard) ───────────────── */
  #stream-stats-row { grid-template-columns: repeat(2, 1fr); }

  /* ── STREAM SWITCHER MODAL ───────────────────────────── */
  .ssm-panel { border-radius: 16px 16px 0 0; max-height: 90vh; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; }
  #stream-switcher-modal { align-items: flex-end; }

  /* ── DASH CONTENT PADDING ────────────────────────────── */
  .dash-content { padding: 1rem; }

  /* ── INSIGHT BANNER ──────────────────────────────────── */
  .dash-insight-banner { flex-wrap: wrap; }
  .dib-cta { width: 100%; margin-top: .4rem; }

  /* ── FREE TOOL BAR ───────────────────────────────────── */
  .free-tool-bar { margin: 2rem 1.25rem; }

  /* ── EMAIL SEQUENCE LIST ─────────────────────────────── */
  .es-email { flex-wrap: wrap; }
  .es-stats { width: 100%; justify-content: flex-start; margin-top: .5rem; }

  /* ── ONBOARDING ──────────────────────────────────────── */
  .on-header { padding: 0 1.25rem; }
  .on-body { padding: 2rem 1.25rem; }
  .on-model-grid { grid-template-columns: 1fr; }
  .on-niche-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── SETTINGS SIDEBAR ────────────────────────────────── */
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sb-nav { display: flex; flex-direction: row; gap: .25rem; padding: .4rem .5rem; flex-wrap: nowrap; overflow-x: auto; }
  .sb-item { white-space: nowrap; flex-shrink: 0; width: auto; }
  .sb-section { display: none; }
  .sb-user { display: none; }
  .sb-bottom { display: none; }
  .content { padding: 1.25rem; }
  .topbar { padding: 0 1rem; }
  .topbar-left { display: none; }

  /* ── INTEGRATIONS PAGE ───────────────────────────────── */
  .int-grid { grid-template-columns: 1fr !important; }

  /* ── WALLET PAGE ─────────────────────────────────────── */
  .wallet-header { flex-direction: column; }
  .wallet-side-card { width: 100% !important; }
  .payout-options { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── ANALYTICS GRID ──────────────────────────────────── */
  .analytics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 480px)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── HERO ────────────────────────────────────────────── */
  .land-hero { padding: 3rem 1rem; }
  .hero-pill { font-size: .65rem; }

  /* ── HOW IT WORKS ────────────────────────────────────── */
  .hiw-grid { grid-template-columns: 1fr; }

  /* ── STREAM STATS ────────────────────────────────────── */
  #stream-stats-row { grid-template-columns: 1fr; }

  /* ── LSEC ────────────────────────────────────────────── */
  .lsec { padding: 3rem 1rem; }

  /* ── PRICING CARD ────────────────────────────────────── */
  .pcard { padding: 1.5rem 1.25rem; }

  /* ── STATS BAR ───────────────────────────────────────── */
  .stat-item { flex: 1 1 100%; border-right: none !important; }
  .stat-item:last-child { border-bottom: none; }

  /* ── ONBOARDING NICHE ────────────────────────────────── */
  .on-niche-grid { grid-template-columns: 1fr 1fr; }

  /* ── TOPBAR AVATAR ───────────────────────────────────── */
  .dtb-icon-btn { width: 30px; height: 30px; }
  .dtb-avatar { width: 30px; height: 30px; font-size: .6rem; }

  /* ── DASH CONTENT ────────────────────────────────────── */
  .dash-content { padding: .75rem; }

  /* ── CHURN MODAL ─────────────────────────────────────── */
  .churn-modal { padding: 1.75rem 1.25rem; }
}

/* ── LANDSCAPE PHONE ──────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .land-hero { min-height: 60vh; }
  #stream-switcher-modal { align-items: center; }
  .ssm-panel { border-radius: 16px; position: static; max-height: 85vh; width: 90%; }
}