:root {
          --brand-primary: #3b82f6;
          --brand-secondary: #2563eb;
          --brand-accent: #1d4ed8;
          --success: #16a34a;
          --error: #dc2626;
      }


      [x-cloak] {
          display: none !important;
      }

      .nav-link:hover,
      a:hover {
          color: var(--brand-primary);
      }

      /* Standard Scrollbar */
      ::-webkit-scrollbar {
          width: 8px;
      }

      ::-webkit-scrollbar-track {
          background: #f1f1f1;
      }

      ::-webkit-scrollbar-thumb {
          background: #3b82f6;
          border-radius: 4px;
      }

      ::-webkit-scrollbar-thumb:hover {
          background: #2563eb;
      }

      /* Hide header location on mobile */
      @media (max-width: 767px) {
          #header-location-display {
              display: none !important;
          }
      }

      /* Core UI Classes */
      .eshopper-bg-primary {
          background: var(--brand-primary);
      }

      .eshopper-text-primary {
          color: var(--brand-primary);
      }

      .eshopper-border-primary {
          border-color: var(--brand-primary);
      }

      .eshopper-hover:hover {
          color: var(--brand-primary) !important;
      }

      .eshopper-btn-primary {
          background: var(--brand-primary);
          color: white;
          border: none;
      }

      .eshopper-btn-primary:hover {
          background: var(--brand-secondary);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      }

      .nav-link {
          font-weight: 500;
          transition: all 0.3s ease;
      }

      .nav-link:hover {
          color: var(--brand-primary);
          transform: translateY(-1px);
      }

      .sticky-header {
          background: rgba(255, 255, 255, 0.95) !important;
          backdrop-filter: blur(8px);
          border-bottom: 2px solid #f3f4f6;
      }

      /* Removed festive animations */

      /* Simplified Responsive Adjustments */
      @media (max-width: 768px) {
          .loader-text {
              font-size: 1.1rem;
          }
      }

      /* ===== MOBILE MENU STYLES ===== */
      @media (max-width: 1023px) {

          /* Alpine.js x-cloak handling */
          [x-cloak] {
              display: none !important;
          }

          /* Mobile menu container */
          .mobile-menu-container {
              position: fixed;
              inset: 0;
              z-index: 60;
              pointer-events: none;
          }

          .mobile-menu-container[x-cloak] {
              display: none !important;
          }

          /* Mobile menu overlay */
          .mobile-menu-overlay {
              position: absolute;
              inset: 0;
              background-color: rgba(0, 0, 0, 0.5);
              opacity: 0;
              transition: opacity 0.3s ease;
              pointer-events: auto;
          }

          /* Mobile menu content */
          .mobile-menu-content {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              max-width: 20rem;
              /* 320px */
              background-color: #ffffff;
              box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
              transform: translateX(-100%);
              transition: transform 0.3s ease-out;
              display: flex;
              flex-direction: column;
              pointer-events: auto;
          }

          /* When mobile menu is open */
          .mobile-menu-open .mobile-menu-container {
              pointer-events: auto;
          }

          .mobile-menu-open .mobile-menu-overlay {
              opacity: 1;
          }

          .mobile-menu-open .mobile-menu-content {
              transform: translateX(0);
          }

          /* Prevent body scrolling when menu is open */
          body.mobile-menu-open {
              overflow: hidden;
          }

          /* Menu header */
          .mobile-menu-header {
              position: sticky;
              top: 0;
              background-color: #ffffff;
              border-bottom: 1px solid #e5e7eb;
              z-index: 20;
              flex-shrink: 0;
          }

          /* Scrollable content area */
          .mobile-menu-scrollable {
              flex: 1;
              overflow-y: auto;
              padding-bottom: 5rem;
              /* Space for fixed footer */
          }

          /* Mobile menu footer */
          .mobile-menu-footer {
              position: sticky;
              bottom: 0;
              background-color: #ffffff;
              border-top: 1px solid #e5e7eb;
              z-index: 20;
              flex-shrink: 0;
          }

          /* Custom scrollbar for mobile menu */
          .mobile-menu-scrollable {
              scrollbar-width: thin;
              scrollbar-color: #cbd5e0 #f7fafc;
          }

          .mobile-menu-scrollable::-webkit-scrollbar {
              width: 4px;
          }

          .mobile-menu-scrollable::-webkit-scrollbar-track {
              background: #f7fafc;
          }

          .mobile-menu-scrollable::-webkit-scrollbar-thumb {
              background-color: #cbd5e0;
              border-radius: 20px;
          }

          .mobile-menu-scrollable::-webkit-scrollbar-thumb:hover {
              background-color: #a0aec0;
          }

          /* Mobile menu item styles */
          .mobile-menu-item {
              display: flex;
              align-items: center;
              padding: 0.75rem 1rem;
              border-radius: 0.5rem;
              color: #374151;
              transition: all 0.2s ease;
              text-decoration: none;
          }

          .mobile-menu-item:hover {
              background-color: #f3f4f6;
              color: #111827;
          }

          .mobile-menu-item.active {
              background-color: #fef2f2;
              color: #dc2626;
          }

          /* Mobile menu icon */
          .mobile-menu-icon {
              width: 1.25rem;
              height: 1.25rem;
              margin-right: 0.75rem;
              flex-shrink: 0;
          }

          /* Mobile menu badge */
          .mobile-menu-badge {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-width: 1.25rem;
              height: 1.25rem;
              font-size: 0.75rem;
              font-weight: 600;
              border-radius: 9999px;
              background-color: #dc2626;
              color: #ffffff;
              margin-left: auto;
          }

          /* Mobile menu section title */
          .mobile-menu-section-title {
              display: block;
              padding: 0.5rem 1rem;
              font-size: 0.75rem;
              font-weight: 600;
              text-transform: uppercase;
              color: #6b7280;
              letter-spacing: 0.05em;
          }

          /* Mobile menu divider */
          .mobile-menu-divider {
              height: 1px;
              background-color: #e5e7eb;
              margin: 1rem 0;
          }

          /* Quick actions grid */
          .mobile-quick-actions {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 0.5rem;
              padding: 0 1rem 1rem;
          }

          .mobile-quick-action {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0.5rem;
              background-color: #f9fafb;
              border-radius: 0.5rem;
              transition: background-color 0.2s ease;
              text-decoration: none;
          }

          .mobile-quick-action:hover {
              background-color: #f3f4f6;
          }

          .mobile-quick-action-icon {
              position: relative;
              margin-bottom: 0.25rem;
          }

          .mobile-quick-action-text {
              font-size: 0.75rem;
              font-weight: 500;
              color: #374151;
          }

          /* Location section */
          .mobile-location-section {
              background-color: #eff6ff;
              border: 1px solid #dbeafe;
              border-radius: 0.5rem;
              padding: 1rem;
              margin: 0 1rem 1rem;
          }

          .mobile-location-title {
              display: flex;
              align-items: center;
              font-size: 0.875rem;
              font-weight: 600;
              color: #1e40af;
              margin-bottom: 0.5rem;
          }

          .mobile-location-display {
              font-size: 0.875rem;
              color: #3b82f6;
              margin-bottom: 0.75rem;
          }

          .mobile-location-buttons {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 0.5rem;
          }

          .mobile-location-button {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 0.5rem;
              padding: 0.625rem 0.75rem;
              border-radius: 0.5rem;
              font-size: 0.875rem;
              font-weight: 500;
              transition: all 0.2s ease;
              cursor: pointer;
              border: none;
          }

          .mobile-location-button.detect {
              background-color: #dbeafe;
              color: #1e40af;
          }

          .mobile-location-button.detect:hover {
              background-color: #bfdbfe;
          }

          .mobile-location-button.select {
              background-color: #dcfce7;
              color: #166534;
          }

          .mobile-location-button.select:hover {
              background-color: #bbf7d0;
          }

          /* Social icons */
          .mobile-social-icons {
              display: flex;
              justify-content: center;
              gap: 0.75rem;
              margin-top: 0.75rem;
          }

          .mobile-social-icon {
              width: 2rem;
              height: 2rem;
              border-radius: 9999px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease;
              text-decoration: none;
          }

          .mobile-social-icon:hover {
              transform: scale(1.1);
          }

          /* Smooth animations */
          .transform {
              transition-property: transform;
              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              transition-duration: 300ms;
          }

          /* Ensure proper z-index layering */
          .z-mobile-menu {
              z-index: 60;
          }

          .z-mobile-overlay {
              z-index: 59;
          }

          /* Hide header location on mobile */
          #header-location-display {
              display: none !important;
          }
      }



      /* Add to your main CSS file */
      .custom-toast {
          transform: translateX(100%);
      }

      .custom-toast.show {
          transform: translateX(0);
      }