/* ──────────────────────────────────────────────────────────
   2Evolution — Global polish
   Microinterações, scrollbar, focus states, tipografia
   ────────────────────────────────────────────────────────── */

/* Smooth scroll native */
html { scroll-behavior: smooth; }

/* Custom scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #9ca3af; background-clip: padding-box; border: 2px solid transparent; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }

/* Focus-visible polish (only when using keyboard) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid #2447d6;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline-offset: 3px;
}

/* Selection color */
::selection { background: rgba(36, 71, 214, 0.2); color: #111b47; }

/* Smooth card transitions */
.product-card, .vendor-card, .category-card {
  will-change: transform, box-shadow;
}

/* Fade-in animation for dynamic content */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.3s ease-out; }

/* Subtle shake on invalid */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.shake-x { animation: shakeX 0.3s ease-in-out; }

/* Improved button press effect */
button:active:not(:disabled), .btn-press:active {
  transform: scale(0.97);
}
button, .btn-press {
  transition: transform 0.1s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Better input readability */
input, textarea, select {
  font-feature-settings: "tnum" 1;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

/* Hide scrollbar while keeping functionality (for carousels/drawers) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Prevent iOS input zoom */
@supports (-webkit-touch-callout: none) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], select, textarea {
    font-size: 16px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Card stagger entry (applied via JS) */
.stagger-enter > * { animation: fadeInUp 0.35s ease-out backwards; }
.stagger-enter > *:nth-child(1) { animation-delay: 0.02s; }
.stagger-enter > *:nth-child(2) { animation-delay: 0.05s; }
.stagger-enter > *:nth-child(3) { animation-delay: 0.08s; }
.stagger-enter > *:nth-child(4) { animation-delay: 0.11s; }
.stagger-enter > *:nth-child(5) { animation-delay: 0.14s; }
.stagger-enter > *:nth-child(6) { animation-delay: 0.17s; }

/* Better tap targets on mobile */
@media (max-width: 640px) {
  button, a.btn, [role="button"] { min-height: 44px; }
}