/* ============================================================
 *  Peerly — Responsive
 * ============================================================ */

/* ============================================================
 *  COMPACT (0–599px)
 * ============================================================ */
@media (max-width: 599px) {
  :root {
    --sidebar-width: 280px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 85vw;
    max-width: 320px;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: block; }

  .menu-btn, .back-btn { display: inline-flex !important; }

  .modal {
    max-width: 100%;
  }
}

/* ============================================================
 *  MEDIUM (600–839px)
 * ============================================================ */
@media (min-width: 600px) and (max-width: 839px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 300px;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: block; }

  .menu-btn, .back-btn { display: inline-flex !important; }
}

/* ============================================================
 *  EXPANDED (840–1199px)
 * ============================================================ */
@media (min-width: 840px) {
  .sidebar {
    position: relative;
    transform: none;
  }
  .sidebar-backdrop { display: none !important; }
  .menu-btn, .back-btn { display: none !important; }
}

/* ============================================================
 *  LARGE (1200px+)
 * ============================================================ */
@media (min-width: 1200px) {
  :root {
    --sidebar-width: 288px;
  }
}