/* ==========================================================================
   SaveFlow - Social Video Downloader Styles
   ========================================================================== */

/* Google Fonts: Plus Jakarta Sans & Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(160, 174, 192, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 174, 192, 0.6);
}

/* Subtle Grid Pattern */
.bg-grid-pattern {
  background-size: 32px 32px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}
.dark .bg-grid-pattern {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Shimmer Button Effect */
.btn-shimmer {
  background-size: 200% auto;
  background-image: linear-gradient(to right, #FFBD5B 0%, #FFA726 50%, #FFBD5B 100%);
  transition: all 0.3s ease;
}
.btn-shimmer:hover {
  background-position: right center;
  box-shadow: 0 10px 25px -5px rgba(255, 189, 91, 0.45);
}

/* Accessibility & Focus Outlines */
:focus-visible { 
  outline: 2px solid #FFBD5B; 
  outline-offset: 3px; 
}

/* Utility & Responsive Navigation */
.hidden {
  display: none !important;
}

@media (max-width: 767px) {
  #desktopNav {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #desktopNav {
    display: flex !important;
  }
  #mobileMenuBtn,
  #mobileMenu {
    display: none !important;
  }
}