/* ✅ MOBILE FIXES - JShuk Mobile UX Improvements */

/* Hide floating preview elements on mobile */
@media (max-width: 768px) {
  /* Hide any floating preview phone screens */
  .mobile-preview,
  .preview-phone,
  .floating-preview,
  [class*="preview"],
  [class*="floating"] {
    display: none !important;
  }
  
  /* Hide any overlay elements that might be floating previews */
  .overlay-preview,
  .phone-preview,
  .screen-preview {
    display: none !important;
  }
  
  /* Ensure no floating elements interfere with mobile UX */
  .floating-element,
  .preview-element {
    display: none !important;
  }
  
  /* Disable all tooltips on mobile */
  .tippy-box,
  .tippy-content,
  [data-tippy-content]::after,
  [data-tippy-content]::before {
    display: none !important;
    pointer-events: none !important;
  }
  
  /* Ensure category cards are always clickable */
  .category-card {
    pointer-events: auto !important;
    z-index: 1 !important;
    -webkit-tap-highlight-color: rgba(255, 208, 0, 0.2);
    touch-action: manipulation;
  }
  
  /* Improve carousel text readability on mobile */
  .carousel-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
  
  .carousel-subtitle {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  
  /* Ensure proper touch targets */
  .carousel-cta,
  .btn-jshuk-primary,
  .btn-jshuk-outline {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
  }
}

/* 🚀 MOBILE SIDEBAR SCROLLING FIXES */
@media (max-width: 1023px) {
  /* Ensure mobile navigation menu scrolls properly */
  .mobile-nav-menu {
    /* Use dynamic viewport height for better mobile support */
    height: 100dvh !important;
    height: 100vh !important; /* Fallback */
    
    /* Enable smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch !important;
    
    /* Prevent scroll chaining */
    overscroll-behavior: contain !important;
    
    /* Ensure proper z-index */
    z-index: 1001 !important;
    
    /* Prevent any interference */
    pointer-events: auto !important;
  }
  
  /* Ensure the navigation list scrolls independently */
  .mobile-nav-list {
    /* Enable scrolling */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    
    /* Add padding to ensure last items are visible */
    padding-bottom: 2rem !important;
    
    /* Prevent scroll chaining */
    overscroll-behavior: contain !important;
    
    /* Ensure proper flex behavior */
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
  }
  
  /* Fix header to prevent it from scrolling */
  .mobile-nav-header {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
  
  /* Ensure navigation items are properly sized for touch */
  .mobile-nav-link {
    min-height: 44px !important;
    padding: 1rem !important;
    
    /* Improve touch feedback */
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2) !important;
    touch-action: manipulation !important;
  }
  
  /* Fix body scroll when menu is open */
  body.menu-open,
  body:has(.mobile-nav-menu.active) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Ensure submenus scroll properly */
  .mobile-submenu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 60vh !important;
  }
  
  /* CRITICAL: Debug styles for submenu visibility */
  .mobile-submenu .mobile-nav-link {
    /* Ensure text is visible */
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(0, 0, 0, 0.1) !important;
    
    /* Ensure proper layout */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Ensure text doesn't get cut off */
    white-space: nowrap !important;
    overflow: visible !important;
  }
  
  .mobile-submenu .mobile-nav-link span {
    /* Ensure text spans are visible */
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
  }
  
  /* Fix iOS Safari specific issues */
  @supports (-webkit-touch-callout: none) {
    .mobile-nav-menu {
      /* iOS Safari viewport height fix */
      height: -webkit-fill-available !important;
    }
    
    /* Prevent iOS Safari from zooming on input focus */
    .mobile-nav-menu input,
    .mobile-nav-menu select,
    .mobile-nav-menu textarea {
      font-size: 16px !important;
    }
  }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
  /* Further reduce carousel text size on very small screens */
  .carousel-title {
    font-size: 1.5rem !important;
  }
  
  .carousel-subtitle {
    font-size: 0.9rem !important;
  }
  
  /* Ensure proper spacing */
  .carousel-content {
    padding: 15px !important;
  }
  
  /* Optimize category cards for very small screens */
  .category-card {
    min-width: 140px !important;
    padding: 0.75rem 0.5rem !important;
  }
  
  .category-icon-circle {
    width: 40px !important;
    height: 40px !important;
  }
  
  .category-icon-circle i {
    font-size: 1rem !important;
  }
  
  .category-name {
    font-size: 0.8rem !important;
  }
  
  .category-listings {
    font-size: 0.7rem !important;
  }
  
  /* Ensure mobile menu fits on very small screens */
  .mobile-nav-menu {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Prevent any tooltip interference */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices - disable all hover-based tooltips */
  [data-tippy-content]:hover::after,
  [data-tippy-content]:hover::before,
  [title]:hover::after {
    display: none !important;
  }
  
  /* Ensure all interactive elements work properly */
  a, button, [role="button"] {
    pointer-events: auto !important;
  }
}

/* 🎯 ADDITIONAL MOBILE SIDEBAR ENHANCEMENTS */
@media (max-width: 1023px) {
  /* Add visual scroll indicator */
  .mobile-nav-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, rgba(26, 51, 83, 0.1));
    pointer-events: none;
    opacity: var(--scroll-shadow-opacity, 0);
    transition: opacity 0.3s ease;
  }
  
  .mobile-nav-list.has-overflow::after {
    opacity: var(--scroll-shadow-opacity, 0);
  }
  
  /* Improve submenu animations */
  .mobile-submenu {
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
    overflow: hidden !important;
    display: none !important;
  }
  
  .mobile-submenu.active,
  .mobile-submenu[style*="display: block"] {
    max-height: 60vh !important;
    opacity: 1 !important;
    display: block !important;
  }
  
  /* Ensure proper focus management */
  .mobile-nav-menu:focus-within {
    outline: none !important;
  }
  
  .mobile-nav-link:focus {
    outline: 2px solid #ffd700 !important;
    outline-offset: -2px !important;
  }
}