/* Mobile CSS - Responsive styles for screens <= 768px */
/* Import this after the main styles.css */

/* =============================================================================
   MOBILE KEYBOARD HANDLING
   ============================================================================= */

/* When keyboard is open on mobile, move navigation to top so search is visible */
@media (max-width: 768px) {
  /* When keyboard is detected open */
  body.keyboard-open .top-nav,
  html body.keyboard-open .top-nav,
  html[data-theme="light"] body.keyboard-open .top-nav,
  html[data-theme="dark"] body.keyboard-open .top-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: var(--surface-color, white) !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 0.5rem 0 !important;
    transform: none !important;
  }

  /* Dark mode keyboard open nav styling */
  html[data-theme="dark"] body.keyboard-open .top-nav {
    background: var(--surface-color, #1f2937) !important;
    border-bottom-color: var(--border-color, #374151) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  /* Make nav container visible with background when keyboard is open */
  body.keyboard-open .nav-container,
  html body.keyboard-open .nav-container {
    background: var(--surface-color, white) !important;
    padding: 0.25rem 1rem !important;
  }

  html[data-theme="dark"] body.keyboard-open .nav-container {
    background: var(--surface-color, #1f2937) !important;
  }

  /* Expand search container when keyboard is open */
  body.keyboard-open .search-container {
    flex: 1 !important;
    max-width: none !important;
    margin: 0 0.5rem !important;
  }

  /* Hide other nav controls when keyboard is open to focus on search */
  body.keyboard-open .nav-controls,
  body.keyboard-open .nav-left.mobile-nav,
  body.keyboard-open .menu-toggle,
  body.keyboard-open #header-menuToggle {
    display: none !important;
  }

  /* Add a cancel button visual cue - search input styling when focused */
  body.keyboard-open .search-input {
    background: var(--background-color, #f9fafb) !important;
    border-color: var(--primary-color, #3b82f6) !important;
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  html[data-theme="dark"] body.keyboard-open .search-input {
    background: var(--card-color, #374151) !important;
  }

  /* Prevent iOS zoom on all search inputs */
  .search-input {
    font-size: 16px !important; /* Minimum 16px prevents iOS auto-zoom */
  }

  /* Position search dropdown correctly when keyboard is open (below input, not above) */
  body.keyboard-open .search-results,
  body.keyboard-open .search-dropdown,
  body.keyboard-open #header-searchDropdown {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    max-height: calc(100vh - 150px) !important;
    animation: slideDown 0.2s ease !important;
  }

  /* Slide down animation for keyboard-open state */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Adjust main content when keyboard is open */
  body.keyboard-open .main-content {
    padding-top: 5rem !important;
  }
}

/* =============================================================================
   SIDEBAR SCROLL LOCK
   ============================================================================= */

/* Prevent body scrolling when sidebar is open on mobile */
body.sidebar-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
  /* Prevent iOS Safari from bouncing */
  position: fixed;
  width: 100%;
}

/* Option D: Force sidebar above everything when body is locked (fixes stacking context issues) */
body.sidebar-locked #sidebar,
html body.sidebar-locked #sidebar {
  z-index: 99999 !important;
  background: var(--surface-color, white) !important;
  /* Force new stacking context */
  position: fixed !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Ensure sidebar children remain clickable when body is locked */
body.sidebar-locked #sidebar *,
html body.sidebar-locked #sidebar * {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Specific rules for interactive elements when body is locked */
body.sidebar-locked #sidebar .nav-link,
body.sidebar-locked #sidebar button,
body.sidebar-locked #sidebar a,
html body.sidebar-locked #sidebar .nav-link,
html body.sidebar-locked #sidebar button,
html body.sidebar-locked #sidebar a {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* =============================================================================
   MOBILE NAVIGATION
   ============================================================================= */

@media (max-width: 768px) {

  /* Mobile layout structure fixes */
  .main-layout {
    flex-direction: column;
    padding-top: 0;
    width: 100%;
    min-width: 100%;
    overflow-x: hidden;
    transform: translateZ(0);
    will-change: auto;
  }

  /* Mobile: Show mobile nav, hide desktop nav */
  .nav-left.desktop-nav {
    display: none;
  }

  .nav-left.mobile-nav {
    display: flex !important;
    /* Show mobile nav in header */
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, rgba(193, 193, 193, 0.9), rgba(83, 97, 137, 0.9)) !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 0.75rem 1.5rem 0.75rem 0.5rem !important;
    margin-top: 0.5rem !important;
    margin-left: -0.5rem !important;
    gap: 0.5rem !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
  }

  /* Menu toggle button - make it visible and functional */
  .menu-toggle,
  #header-menuToggle,
  #mobileMenuToggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    color: #1f2937 !important;
    /* Dark color for light mode visibility */
    padding: 0.75rem !important;
    border-radius: var(--border-radius, 8px) !important;
    transition: var(--transition, all 0.2s ease) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 1002 !important;
    /* Above nav (1001) */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
  }

  /* Dark mode menu toggle styling */
  html[data-theme="dark"] .menu-toggle,
  html[data-theme="dark"] #header-menuToggle,
  html[data-theme="dark"] #mobileMenuToggle {
    color: white !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
  }

  /* Menu toggle hover and active states - light mode */
  .menu-toggle:hover,
  .menu-toggle:focus,
  .menu-toggle:active,
  #header-menuToggle:hover,
  #header-menuToggle:focus,
  #header-menuToggle:active,
  #mobileMenuToggle:hover,
  #mobileMenuToggle:focus,
  #mobileMenuToggle:active {
    background-color: rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    transform: scale(1.05) !important;
  }

  /* Menu toggle hover and active states - dark mode */
  html[data-theme="dark"] .menu-toggle:hover,
  html[data-theme="dark"] .menu-toggle:focus,
  html[data-theme="dark"] .menu-toggle:active,
  html[data-theme="dark"] #header-menuToggle:hover,
  html[data-theme="dark"] #header-menuToggle:focus,
  html[data-theme="dark"] #header-menuToggle:active,
  html[data-theme="dark"] #mobileMenuToggle:hover,
  html[data-theme="dark"] #mobileMenuToggle:focus,
  html[data-theme="dark"] #mobileMenuToggle:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    outline: none !important;
    transform: scale(1.05) !important;
  }

  /* Defensive rule to prevent conflicts */
  @media (max-width: 768px) {

    .nav-left.mobile-nav .menu-toggle,
    .nav-left.mobile-nav #header-menuToggle,
    .nav-left.mobile-nav #mobileMenuToggle {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  }

  /* Show mobile-only elements */
  .mobile-only {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Show mobile top home icon */
  .mobile-top-home {
    display: block;
  }

  /* Mobile nav positioning - move to bottom */
  .top-nav,
  html[data-theme="light"] .top-nav,
  html[data-theme="dark"] .top-nav {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: 4rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: 1001 !important;
    /* Base nav layer */
  }

  /* Ensure nav-container is also transparent */
  .nav-container,
  html[data-theme="light"] .nav-container,
  html[data-theme="dark"] .nav-container {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Override backgrounds for nav children (exclude interactive elements and search) */
  .top-nav *:not(.search-input):not(.search-container):not(.search-dropdown):not(.search-results):not(.search-result-item):not(.search-section-results):not(.search-section-header):not(.menu-toggle):not(.dropdown):not(.profile-dropdown):not(.mobile-profile-dropdown),
  .nav-container *:not(.search-input):not(.search-container):not(.search-dropdown):not(.search-results):not(.search-result-item):not(.search-section-results):not(.search-section-header):not(.menu-toggle):not(.dropdown):not(.profile-dropdown):not(.mobile-profile-dropdown) {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Override pseudo-elements backgrounds (exclude search and its children) */
  .top-nav *:not(.search-container):not(.search-dropdown):not(.search-results):not(.search-result-item)::before,
  .top-nav *:not(.search-container):not(.search-dropdown):not(.search-results):not(.search-result-item)::after,
  .nav-container *:not(.search-container):not(.search-dropdown):not(.search-results):not(.search-result-item)::before,
  .nav-container *:not(.search-container):not(.search-dropdown):not(.search-results):not(.search-result-item)::after {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Force solid backgrounds for search dropdowns and results */
  .search-results,
  .search-dropdown,
  #header-searchDropdown,
  .search-results-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1003 !important;
  }

  /* Dark mode search dropdowns */
  html[data-theme="dark"] .search-results,
  html[data-theme="dark"] .search-dropdown,
  html[data-theme="dark"] #header-searchDropdown,
  html[data-theme="dark"] .search-results-content {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
  }

  /* Search result items with solid backgrounds */
  .search-result-item,
  .search-section-results .search-result-item,
  .search-categories .search-result-item,
  div[class*="search-result"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }

  /* Dark mode search result items */
  html[data-theme="dark"] .search-result-item,
  html[data-theme="dark"] .search-section-results .search-result-item,
  html[data-theme="dark"] .search-categories .search-result-item,
  html[data-theme="dark"] div[class*="search-result"] {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-bottom: 1px solid #374151 !important;
  }

  /* Search result text colors */
  .search-result-title {
    color: #1f2937 !important;
  }

  .search-result-description {
    color: #4b5563 !important;
  }

  /* Dark mode search result text */
  html[data-theme="dark"] .search-result-title {
    color: #f9fafb !important;
  }

  html[data-theme="dark"] .search-result-description {
    color: #9ca3af !important;
  }

  /* Search section headers */
  .search-section-header {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    color: #4b5563 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  /* Dark mode search section headers */
  html[data-theme="dark"] .search-section-header {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #9ca3af !important;
    border-bottom: 1px solid #374151 !important;
  }

  /* Search result hover states */
  .search-result-item:hover {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
  }

  /* Dark mode search result hover */
  html[data-theme="dark"] .search-result-item:hover {
    background: #374151 !important;
    background-color: #374151 !important;
  }

  /* Catch-all: Force any child of search containers to be non-transparent */
  .search-results *,
  .search-dropdown *,
  #header-searchDropdown *,
  .search-results-content * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ensure search containers override any global transparency */
  .search-results,
  .search-dropdown,
  #header-searchDropdown {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Move header down on mobile to avoid notch */
  .top-nav {
    top: 2rem;
  }

  /* Adjust main content for new header position */
  .main-content {
    padding-top: calc(var(--nav-height) + 2rem);
    margin-left: 0;
    /* Remove sidebar margin on mobile */
    transform: translateZ(0);
    /* Force GPU acceleration */
    will-change: auto;
  }

  /* Reduce main content padding on mobile for narrower layout */
  .main-content {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Make content headers more compact */
  .content-header {
    margin-bottom: 1.5rem;
  }

  .content-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .content-description {
    font-size: 1rem;
  }

  /* Adjust content body spacing */
  .content-body>*+* {
    margin-top: 1.5rem;
  }
}

/* =============================================================================
   MOBILE GEAR REVIEW LAYOUT
   ============================================================================= */

@media (max-width: 768px) {

  /* Compact gear section headers */
  .gear-section .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .gear-section .section-header h2 {
    font-size: 1.25rem;
    margin: 0;
  }

  /* Make gear controls stack vertically on mobile */
  .gear-controls {
    flex-direction: column;
    gap: 0.75rem;
  }

  .search-filters {
    flex-direction: column;
    gap: 0.5rem;
  }

  .view-controls {
    align-self: flex-end;
  }

  /* Adjust gear items grid for mobile */
  .gear-items-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Make gear item cards more compact */
  .gear-item-card {
    padding: 1rem;
  }

  .gear-item-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  /* Adjust categories grid for mobile */
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .category-card {
    padding: 1rem;
  }

  .category-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .category-card p {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }

  .category-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  /* Make reviews section more compact */
  .reviews-section .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Compact comparison section */
  .comparison-section .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .comparison-controls {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Extra narrow mobile screens */
@media (max-width: 480px) {

  /* Further reduce padding for very small screens */
  .main-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Make headers even more compact */
  .content-header h1 {
    font-size: 1.5rem;
  }

  .content-description {
    font-size: 0.9rem;
  }

  /* Very compact gear cards */
  .gear-item-card {
    padding: 0.75rem;
  }

  .category-card {
    padding: 0.75rem;
  }

  /* Smaller category icons */
  .category-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  /* Stack form controls vertically */
  .form-input {
    font-size: 16px;
    /* Prevent zoom on iOS */
  }
}

/* =============================================================================
   MOBILE SIDEBAR & LAYOUT
   ============================================================================= */

@media (max-width: 768px) {
  .site-footer {
    margin-left: 0;
    /* Remove left margin on mobile/tablet */
  }

  .main-content {
    margin-left: 0;
    /* Ensure main content has no margin on mobile */
  }

  /* 
    Base style for the mobile sidebar.
    It's hidden off-screen by default and slides in when the .open class is added.
    Using #sidebar ID for high specificity to prevent overrides.
    
    Z-INDEX STRUCTURE (Simplified without overlay):
    - Menu toggle: 1002 (above nav)
    - Nav: 1001 (base nav layer)
    - Desktop sidebar: 9999 (desktop only)
    - Cookie modal: 10000 (lowest modal layer)
    - Backpack builder modal: 10001 (above cookie modal)
    - Sidebar: 10005 (base), 11000 when body.sidebar-locked (highest)
    
    Note: When body gets position:fixed, it creates a stacking context.
    The body.sidebar-locked #sidebar rule forces sidebar above everything in that context.
  */
  #sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    /* Fallback for older browsers */
    height: 100dvh;
    /* More accurate viewport height on mobile */
    z-index: 10005 !important;
    /* Above modals (10000-10001) */
    background: var(--surface-color, white);
    border-right: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* State: Hidden by default */
    transform: translateX(-100%);

    /* Animation */
    transition: transform 0.3s ease;
    will-change: transform;

    /* Accessibility & Interaction */
    visibility: visible;
    /* Keep it visible for animations */
    pointer-events: none;
    /* No pointer events when hidden */

    /* Force above other elements regardless of DOM order */
    isolation: isolate;
  }

  /* Dark mode support for sidebar */
  html[data-theme="dark"] #sidebar {
    background: var(--surface-color, #1f2937);
    border-right: 1px solid var(--border-color, #374151);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  }

  /* 
    State: Open
    - Moves the sidebar into view.
    - Enables pointer events for interaction.
    - Ensures full opacity and removes any filters.
  */
  #sidebar.open,
  body #sidebar.open,
  html body #sidebar.open {
    transform: translateX(0) !important;
    /* Simple slide-in animation */
    pointer-events: auto !important;
    opacity: 1 !important;
    /* Critical override for visibility */
    filter: none !important;
    /* Critical override for visibility */
    z-index: 99999 !important;
    /* EXTREME z-index to force above everything */
    position: fixed !important;
    /* Keep fixed positioning for consistent stacking context */
    isolation: isolate !important;
    /* Create isolated stacking context */
    background: var(--surface-color, white) !important;
    /* Use theme background */
  }

  /* Ensure all children of the open sidebar are interactive with maximum specificity */
  #sidebar.open *,
  body #sidebar.open *,
  html body #sidebar.open * {
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Extra specificity for navigation links and buttons */
  #sidebar.open .nav-link,
  #sidebar.open button,
  #sidebar.open a,
  body #sidebar.open .nav-link,
  body #sidebar.open button,
  body #sidebar.open a,
  html body #sidebar.open .nav-link,
  html body #sidebar.open button,
  html body #sidebar.open a {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
  }

  /* Ensure menu toggle button remains accessible even when sidebar is open */
  .menu-toggle,
  #header-menuToggle,
  #mobileMenuToggle {
    pointer-events: auto !important;
    z-index: 100000 !important;
    /* Above sidebar */
    position: relative !important;
  }

  /* Overlay removed - using click-outside detection instead */

  /* 
    Sidebar Content: General styling for elements inside the sidebar.
  */
  #sidebar .sidebar-content {
    padding-top: 6rem;
    /* Account for mobile navigation height */
    padding-bottom: 10rem;
    /* Extra bottom padding for scrolling */
    height: 100%;
    overflow-y: auto;
  }

  /* 
    Sidebar Navigation Links: Ensure they are highly interactive and visible.
  */
  #sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    margin: 4px 8px !important;
    gap: 12px !important;
    color: var(--text-color, #333) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-tap-highlight-color: var(--tap-highlight, rgba(0, 0, 0, 0.1)) !important;
    background: transparent !important;
  }

  /* Dark mode support for navigation links */
  html[data-theme="dark"] #sidebar .nav-link {
    color: white !important;
    -webkit-tap-highlight-color: var(--tap-highlight, rgba(255, 255, 255, 0.1)) !important;
  }

  /* Hover/Active states for navigation links */
  #sidebar .nav-link:hover,
  #sidebar .nav-link:active,
  #sidebar .nav-link:focus {
    background-color: var(--nav-hover-bg, rgba(37, 99, 235, 0.1)) !important;
    outline: none !important;
  }

  /* Dark mode hover states */
  html[data-theme="dark"] #sidebar .nav-link:hover,
  html[data-theme="dark"] #sidebar .nav-link:active,
  html[data-theme="dark"] #sidebar .nav-link:focus {
    background-color: var(--nav-hover-bg, rgba(59, 130, 246, 0.2)) !important;
  }
}

/* =============================================================================
   MOBILE SETTINGS & CONTROLS
   ============================================================================= */

@media (max-width: 768px) {

  /* Show mobile settings in sidebar */
  .mobile-settings-section {
    display: block;
  }

  /* Hide desktop-only controls */
  .desktop-only {
    display: none !important;
  }

  /* Mobile sidebar login section */
  .sidebar .login-section,
  .sidebar .auth-section {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
  }

  .sidebar .login-form {
    width: 100%;
  }

  .sidebar .form-group {
    margin-bottom: 1rem;
  }

  .sidebar .form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 1rem;
  }

  .sidebar .login-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .sidebar .login-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   MOBILE FORMS & MODALS
   ============================================================================= */

@media (max-width: 768px) {

  /* General Modal Mobile */
  .modal-overlay {
    padding: 0.5rem;
    backdrop-filter: blur(4px);
  }

  .modal-content {
    width: calc(100% - 1rem);
    max-width: none;
    max-height: 95vh;
    margin: 0;
    border-radius: var(--border-radius);
    overflow-y: auto;
  }

  /* Backpack Builder Mobile */
  .backpack-builder-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .builder-layout {
    padding: 0.5rem;
    gap: 0.35rem;
  }

  .backpack-builder-header {
    padding: 0.45rem;
  }

  .backpack-builder-header .header-text h2 {
    font-size: 1rem;
  }

  .quick-add-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Cookie Modal Mobile */
  .cookie-modal-content {
    width: 95% !important;
    max-height: 40vh !important;
    height: 35vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Enforce height cap via ID selector to override other modal rules */
  #cookie-modal.show .cookie-modal-content,
  #cookie-modal.cookie-modal.show .cookie-modal-content {
    max-height: 20vh !important;
    height: 20vh !important;
  }

  .cookie-modal-header,
  .cookie-modal-body {
    padding: 1rem;
  }

  /* Cookie Categories Mobile */
  .cookie-category-header {
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .cookie-category-info h4 {
    font-size: 0.9rem;
  }

  .cookie-category-info p {
    font-size: 0.8rem;
  }

  .cookie-slider {
    width: 40px;
    height: 10px;
  }

  .cookie-slider:before {
    height: 10px;
    width: 16px;
    left: 3px;
    top: 3px;
  }

  .cookie-toggle input:checked+.cookie-slider:before {
    transform: translateX(10px);
  }
}

/* =============================================================================
   MOBILE LOGIN & AUTH FORMS
   ============================================================================= */

@media (max-width: 768px) {

  /* Login Modal Mobile */
  .modal-overlay {
    padding: 1rem;
  }

  .modal-content {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: 0;
    border-radius: var(--border-radius);
  }

  .modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
  }

  .modal-header h2 {
    font-size: 1.25rem;
    margin: 0;
  }

  .modal-body {
    padding: 1.5rem 1rem;
  }

  .modal-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
  }

  /* Login Form Mobile */
  .login-form,
  .auth-form {
    width: 100%;
    max-width: none;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
  }

  .form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 1rem;
    /* Prevent zoom on iOS */
  }

  .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(107, 114, 128, 0.1));
  }

  /* Dark mode focus ring */
  html[data-theme="dark"] .form-group input:focus {
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(156, 163, 175, 0.2));
  }

  /* Login buttons mobile */
  .login-actions,
  .auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .login-actions .btn,
  .auth-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }

  /* Create Account vs Login toggle */
  .auth-toggle {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
  }

  .auth-toggle button {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.875rem;
  }

  /* Error messages mobile */
  .error-message {
    background: var(--error-bg, rgba(239, 68, 68, 0.1));
    color: var(--error-color, #dc2626);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--error-border, rgba(239, 68, 68, 0.2));
  }

  /* Dark mode error messages */
  html[data-theme="dark"] .error-message {
    background: var(--error-bg, rgba(248, 113, 113, 0.15));
    color: var(--error-color, #fca5a5);
    border: 1px solid var(--error-border, rgba(248, 113, 113, 0.3));
  }

  /* Success messages mobile */
  .success-message {
    background: var(--success-bg, rgba(16, 185, 129, 0.1));
    color: var(--success-color, #059669);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--success-border, rgba(16, 185, 129, 0.2));
  }

  /* Dark mode success messages */
  html[data-theme="dark"] .success-message {
    background: var(--success-bg, rgba(52, 211, 153, 0.15));
    color: var(--success-color, #6ee7b7);
    border: 1px solid var(--success-border, rgba(52, 211, 153, 0.3));
  }
}

/* =============================================================================
   MOBILE GRIDS & LAYOUTS
   ============================================================================= */

@media (max-width: 768px) {

  /* Backpacks Grid */
  .user-backpacks-section {
    margin: 1rem 0;
    padding: 1rem 0;
  }

  .backpacks-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* =============================================================================
   MOBILE TABLET LAYOUT
   ============================================================================= */

@media (max-width: 1200px) {
  .builder-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .builder-right-panel {
    max-height: 350px;
  }
}

/* =============================================================================
   MOBILE COOKIE BANNER
   ============================================================================= */

@media (max-width: 600px) {
  .cookie-banner {
    padding: 0.75rem !important;
  }

  .cookie-banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0;
  }

  .cookie-banner-info {
    flex-direction: row;
    /* Keep icon and text side-by-side to save height */
    align-items: flex-start;
    gap: 0.75rem;
  }

  .cookie-icon {
    font-size: 1.25rem;
    /* Slightly smaller icon */
  }

  .cookie-text h3 {
    font-size: 1rem;
    margin-bottom: 0.125rem;
  }

  .cookie-text p {
    font-size: 0.8125rem;
  }

  .cookie-banner-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }

  /* Make Accept All full width and at the top */
  #cookie-accept-banner {
    grid-column: 1 / -1;
    order: -1;
  }

  .cookie-banner-actions .cookie-btn {
    width: 100%;
    justify-content: center;
    padding: 0.625rem 0.5rem;
    /* Comfortable touch target */
    font-size: 0.875rem;
    height: auto;
  }
}



/* =============================================================================
   VERY SMALL SCREENS (< 480px)
   ============================================================================= */

@media (max-width: 480px) {
  .cookie-modal-content {
    width: 100% !important;
    /* Cap height for very small screens */
    height: 34vh !important;
    max-height: 40vh !important;
    max-width: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* Enforce height cap on very small screens via ID selector */
  #cookie-modal.show .cookie-modal-content,
  #cookie-modal.cookie-modal.show .cookie-modal-content {
    max-height: 40vh !important;
    height: 35vh !important;
  }

  .cookie-modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
  }

  .cookie-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    max-height: none;
  }

  .cookie-modal-footer {
    position: sticky;
    bottom: 0;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface-color);
    box-shadow: 0 -2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
  }

  /* Dark mode cookie modal footer shadow */
  html[data-theme="dark"] .cookie-modal-footer {
    box-shadow: 0 -2px 4px var(--shadow-color, rgba(0, 0, 0, 0.3));
  }

  .cookie-actions-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .cookie-actions-group .btn {
    width: 100%;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
}