/* ===== RESPONSIVE ===== */
.logo-mobile { display: none; margin-bottom: 28px; }

@media (max-width: 1024px) {
  .grid-2, .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .booking-side { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-section { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-step:nth-child(2) { border-right: none; }
  .setup-step:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .main { padding: 28px 24px 80px; }
}

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .logo-mobile { display: block; }
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-open .sidebar { transform: none; }
  .nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 55; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin: -16px -16px 20px; padding: 10px 12px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 40;
  }
  .main { padding: 16px 16px 80px; }
  .b2b { background: var(--bg); }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .page-title { font-size: 21px; }
  .page-head { align-items: flex-start; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .stats { gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat-val { font-size: 21px; }
  .setup-steps { grid-template-columns: minmax(0, 1fr); }
  .setup-step { border-right: none; border-bottom: 1px solid var(--line); }
  .setup-step:last-child { border-bottom: none; }

  .list-row { flex-wrap: wrap; padding: 12px 16px; }
  .res-row .list-side { width: 100%; padding-left: 76px; flex-wrap: wrap; }
  .svc-row .list-side { width: auto; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  .reschedule-form, .inline-form { padding-left: 16px; }

  .segmented { overflow-x: auto; max-width: 100%; }
  .segmented button { flex-shrink: 0; }

  .site-head-inner { padding: 0 16px; gap: 12px; }
  .site-head .logo-text { display: none; }
  .hide-sm { display: none; }
  .b2c-body { padding: 20px 16px 60px; }
  .browse-hero h1 { font-size: 22px; }
  .biz-detail-head { gap: 14px; }
  .biz-detail-head h1 { font-size: 21px; }
  .biz-list { grid-template-columns: minmax(0, 1fr); }
  .svc-item { padding: 12px 16px; }
  .hours-intervals input { width: 100px; }
  .hours-day { width: 100%; }
  .toast-container { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; max-width: none; }
  .modal { padding: 22px; }
}

/* Mobile drawer: fit the visible screen (iOS Safari 100vh includes the area
   under its toolbar) and scroll as one piece, so logout is always reachable. */
.sidebar { height: 100vh; height: 100dvh; }
@media (max-width: 860px) {
  .sidebar {
    height: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar .nav { flex: 1 0 auto; overflow: visible; }
}