/* ============================================================
   style.css — DealsRadar Compliance & UX Design System
   Responsive, Mobile-First, Accessible, and Dark/Light Mode Aware
   ============================================================ */

/* Hide horizontal scrollbars for clean category navigation */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Card Transitions & Elevations */
.deal-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.deal-card:hover {
  transform: translateY(-4px);
}

/* Dark mode specific subtle glow */
.dark .deal-card:hover {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 20px -5px rgba(245, 158, 11, 0.1);
}

/* Light mode specific clean drop shadow */
html:not(.dark) .deal-card:hover {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}

/* Toast Notification Animation */
@keyframes toastIn {
  from {
    transform: translate(-50%, 20px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

#site-toast {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Selection Highlight */
::selection {
  background: rgba(245, 158, 11, 0.3);
  color: inherit;
}