/* ===========================================
   STICKY FIX - Override parent overflow
   Body and parent containers have overflow styles that break sticky positioning.
   This scoped fix only applies when spray wall page is mounted.

   JavaScript sets:
   - html: overflow-x: hidden, overflow-y: scroll
   - body: overflow: visible

   CSS overrides parent containers:
   - page-layout-container: overflow: clip (breaks sticky)
   - page-layout-wraper: ensure visible
   =========================================== */

body.spray-wall-sticky-fix {
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Override parent containers that break sticky */
body.spray-wall-sticky-fix .page-layout-container {
  overflow: visible !important;
}

body.spray-wall-sticky-fix .page-layout-wraper {
  overflow: visible !important;
}

/* ===========================================
   STICKY CHAIN - Desktop
   All three elements must be sticky in sequence:
   1. Header (top: 0) - 64px tall
   2. TabBar (top: 64px) - 46px tall
   3. Wall Image (top: 110px) - 64 + 46
   =========================================== */

@media (min-width: 768px) {
  /* Row 1: Page Header - ensure sticky with !important */
  body.spray-wall-sticky-fix .spray-wall-page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 103 !important;
    background: #121212 !important;
    /* Remove transition for scroll-hide animation (no longer used) */
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ================================================================
   SprayWallPage - Smart Header Hide/Show Styles
   Header hides on scroll down, reveals on scroll up
   Uses transform: translateY() to avoid layout changes
   ================================================================ */

/* ================================================================
   DESKTOP: Show 2-Row Header for Full Navigation
   Row 1: Back button + title + view toggle
   Row 2: TabBar (in SprayWallManager)
   ================================================================ */
@media (min-width: 768px) {
  /* Hide UserHeader navigation when on spray wall page */
  body:has(.spray-wall-page-header) .header-container {
    display: none !important;
  }

  /* Show page header on desktop with enhanced styling */
  .spray-wall-page-header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 103;
    background: #121212;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .spray-wall-page-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* Hide view toggle on desktop (it's in Row 2 now) */
  .spray-wall-page-header .header-right {
    display: none !important;
  }

  /* Desktop back button styling */
  .spray-wall-page-header .spray-wall-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .spray-wall-page-header .spray-wall-back-button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    opacity: 1;
  }

  .spray-wall-page-header .spray-wall-page-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
  }

  /* Ensure page fills full viewport */
  body:has(.spray-wall-page-header) {
    overflow-y: auto;
  }
}

/* Back Button Header - Sticky with transform-based hide/show */
.spray-wall-page-header {
  position: sticky;
  top: 0;
  z-index: 102;
  background: #121212;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Transform-based hide/show - NO LAYOUT CHANGE */
  transform: translateY(0);
  transition: transform 0.3s ease;

  /* GPU acceleration */
  will-change: transform;
  -webkit-transform: translateZ(0);
}

/* Header hidden state - slides up out of view */
.spray-wall-page-header.header-hidden {
  transform: translateY(-100%);
}

/* Header left section - back button and title */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

/* Header right section - view toggle buttons */
.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Back button styling */
.spray-wall-back-button {
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.spray-wall-back-button:hover {
  opacity: 0.8;
}

.spray-wall-back-button:active {
  opacity: 0.6;
}

/* Page title */
.spray-wall-page-title {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* View toggle buttons (Grid/List) - Mobile only in page header */
.mobile-only {
  display: flex;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

.view-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.view-toggle-btn svg {
  font-size: 14px;
}

/* Content wrapper */
.spray-wall-page-content {
  position: relative;
  z-index: 1;
  /* Ensure overflow is visible for sticky positioning chain */
  overflow: visible !important;
}

/* ================================================================
   Sticky Element Coordination
   Header + TabBar use transform: translateY(-100%) to hide
   This keeps them in DOM so wall-image-sticky position stays fixed

   Stacking order (z-index):
   - Header: 102 (top layer, slides up to hide)
   - TabBar: 102 (same as header, slides up to hide)
   - Wall Image: 100 (scrolls behind header/tabbar)
   ================================================================ */

/* Mobile adjustments */
@media (max-width: 767px) {
  .spray-wall-page-header {
    padding: 10px 12px;
    gap: 10px;
  }

  .spray-wall-back-button {
    padding: 6px;
    font-size: 13px;
  }

  .spray-wall-page-title {
    font-size: 15px;
  }
}

/* ================================================================
   BETA BROWSER MODE - Hide Default Mobile Menu
   Applied via body class when SprayWallPage is active on mobile
   ================================================================ */

/* Hide default mobile menu when in beta browser mode */
body.beta-browser-mode .mobile-bottom-menu-sec,
body.beta-browser-mode .float-mobile-menu {
  display: none !important;
}

/* Hide footer on mobile when in beta browser mode */
@media (max-width: 767px) {
  body.beta-browser-mode .footer-section {
    display: none !important;
  }
}

/* ================================================================
   CONTENT PADDING FOR BOTTOM BAR
   ================================================================ */

/* Add padding at bottom for fixed bottom bar */
@media (max-width: 767px) {
  body.beta-browser-mode .spray-wall-manager {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure boulder content has enough space */
  body.beta-browser-mode .boulder-content {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
  }
}

/* ================================================================
   HIDE PAGE HEADER ON MOBILE IN BETA BROWSER MODE
   Navigation is now handled by the bottom bar
   ================================================================ */

@media (max-width: 767px) {
  body.beta-browser-mode .spray-wall-page-header {
    display: none !important;
  }
}