/* hamburger.css */

/* Hamburger icon – always visible */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 18px;
  top: 18px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: 1.6rem;
  cursor: pointer;
  color: #ff5a5f;
  z-index: 1001;
  transition: background-color .2s ease, opacity .2s ease, visibility .2s ease;
}
.hamburger:hover { background: rgba(255, 90, 95, .1); }

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  header {
    padding: 10px 5%;
  }

  .hamburger {
    left: 5%;
    top: 15px;
  }
}

/* Hamburger overlay wall */
.hamburger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: #1f2937;          /* dark, opaque menu */
  box-shadow: 4px 0 20px rgba(0, 0, 0, .35);  /* separate it from the page */
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  width: 75vw; /* mobile default */
  box-sizing: border-box;
  padding: 0;
}

/* Slide-in active state */
.hamburger-overlay.visible {
  transform: translateX(0);
}

/* Desktop width only 25% */
@media screen and (min-width: 769px) {
  .hamburger-overlay {
    width: 25vw;
  }
}

/* Close button in top-right of overlay */
.hamburger-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: #e5e7eb;       /* light, visible on the dark menu */
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1001;
}

/* -----------------------------------------------------------------
   Dark theme for the opened menu panel
   (panel bg + text are set inline in js/hamburger-menu.js, so these
   override with !important)
   ----------------------------------------------------------------- */
.hamburger-overlay .filter-panel {
  background: #1f2937 !important;
  color: #e5e7eb !important;
}

/* headings, labels and helper text → light */
.hamburger-overlay .filter-panel h2,
.hamburger-overlay .filter-panel label,
.hamburger-overlay .filter-panel small {
  color: #e5e7eb !important;
}

/* form fields: light fields on the dark panel, readable text */
.hamburger-overlay .filter-panel input,
.hamburger-overlay .filter-panel select {
  background: #f9fafb;
  color: #111827;
  border: 1px solid #4b5563;
  border-radius: 6px;
}

/* divider under the "See My Products" button */
.hamburger-overlay #hb-my-products-btn-wrap {
  border-bottom-color: #374151 !important;
}

/* Apply button → brand red so it pops on the dark panel */
.hamburger-overlay #f-apply {
  background: #ff5a5f !important;
  color: #fff !important;
}

/* the sticky footer strip behind Clear/Apply was white inline → make it dark */
.hamburger-overlay #filters-form > div:last-child {
  background: #1f2937 !important;
}

/* -----------------------------------------------------------------
   Account section: the auth buttons (Sign Up / Login / Logout) are
   moved into the top of the hamburger panel on mobile by
   js/hamburger-menu.js. Style them as full-width menu rows and undo
   the fixed positioning they carry from nav.css's mobile rules.
   NOTE: never set `display` here — auth.js toggles each button's
   display to reflect logged-in/out state, and we must not fight it.
   ----------------------------------------------------------------- */
.hamburger-overlay #hb-auth-section {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #374151;
}

.hamburger-overlay #hb-auth-section .hb-section-title {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9ca3af;          /* muted light grey on the dark panel */
}

/* Pull the moved buttons out of fixed/relative positioning so they sit
   naturally as stacked rows inside the panel. */
.hamburger-overlay #hb-auth-section #signupBtn,
.hamburger-overlay #hb-auth-section #loginBtn,
.hamburger-overlay #hb-auth-section #logoutBtn,
.hamburger-overlay #hb-auth-section #user-name-pill {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Consistent full-width "pill" look for the action buttons.
   Colours are set explicitly here because, once moved out of .nav-menu,
   these buttons lose the `.nav-menu a { color:#ff5a5f }` rule and would
   otherwise fall back to .nav-link's white-on-white (invisible) text. */
.hamburger-overlay #hb-auth-section #signupBtn,
.hamburger-overlay #hb-auth-section #loginBtn,
.hamburger-overlay #hb-auth-section #logoutBtn {
  justify-content: center !important;
  text-align: center;
  height: auto !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #ff5a5f !important;
  border: 1px solid #ff5a5f !important;
}

/* The username label reads as a heading, not a tappable button */
.hamburger-overlay #hb-auth-section #user-name-pill {
  justify-content: center;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 2px;
}