/* ========== GLOBAL MOBILE STYLES ========== */

/* Hamburger button */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ccd4e0;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(7,9,15,0.97);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px 20px 20px;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(204,212,224,0.75);
  transition: background .2s, color .2s;
}
.mobile-nav a:hover, .mobile-nav a.active { background: rgba(255,255,255,0.07); color: #e8eef8; }

@media (max-width: 700px) {

  /* Nav */
  nav { padding: 0 16px !important; }
  .nav-center, .nav-links { display: none !important; }
  .burger { display: flex !important; }
  .logo { font-size: 11px !important; letter-spacing: .06em !important; white-space: nowrap !important; }
  .logo-box { width: 28px !important; height: 28px !important; flex-shrink: 0 !important; }
  .nav-right { gap: 6px !important; }
  /* Hide login button in nav on mobile — burger menu handles it */
  .nav-right #navUser { display: none !important; }

  /* Main padding */
  main { padding: 70px 14px 48px !important; }

  /* Layouts — stack columns */
  .layout,
  .top-row { grid-template-columns: 1fr !important; }

  /* Profile pages */
  .profile-card { padding: 22px 16px 18px !important; }
  .avatar-img { width: 72px !important; height: 72px !important; }
  .profile-name { font-size: 18px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat-val { font-size: 22px !important; }

  /* Channel card */
  .channel-card { padding: 14px !important; }
  .ch-preview { min-height: 80px !important; }

  /* Guarantors grid */
  .grid { grid-template-columns: 1fr !important; }
  .g-avatar { width: 44px !important; height: 44px !important; }

  /* Hero */
  .hero h1 { font-size: 28px !important; line-height: 1.15 !important; }
  .hero p { font-size: 14px !important; }

  /* Steps & features */
  .steps, .features { grid-template-columns: 1fr !important; }

  /* CTA */
  .cta { padding: 28px 16px !important; }
  .cta h2 { font-size: 20px !important; }
  .cta-btns { flex-direction: column !important; }
  .btn-primary, .btn-secondary { width: 100% !important; text-align: center !important; }

  /* Account page */
  .row-2 { grid-template-columns: 1fr !important; }
  .s-tabs { width: 100% !important; }
  .s-tab { flex: 1 !important; text-align: center !important; }

  /* Auth */
  .card { padding: 24px 18px !important; }

  /* Footer */
  footer { padding: 28px 14px 16px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .f-brand { grid-column: 1 / -1 !important; }

  /* Nav user label */
  #navUser span:last-child { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Reviews modal */
  #reviewsModal > div,
  #addReviewModal > div { padding: 20px 14px !important; }

  /* index.html specific */
  .btn-message, .btn-how, .btn-reviews { font-size: 13px !important; }
  .bottom-card .stats { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 24px !important; }
  .profile-name { font-size: 16px !important; }
  .stat-val { font-size: 20px !important; }
}