/* ShopBase Custom CSS - Tailwind utility classes only in templates, this file for components and custom animations */

/* === SHOP FRONTEND (vh- prefix) === */
.vh-btn-primary { @apply inline-flex items-center justify-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-2xl transition-colors duration-200; }
.vh-btn-secondary { @apply inline-flex items-center justify-center px-6 py-3 border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 font-semibold rounded-2xl transition-colors duration-200; }
.vh-card { @apply bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 overflow-hidden; }
.vh-input { @apply w-full px-4 py-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-xl focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-500 transition-colors; }
.vh-badge-sale { @apply inline-flex px-2 py-0.5 bg-red-500 text-white text-xs font-semibold rounded-lg; }
.vh-badge-new { @apply inline-flex px-2 py-0.5 bg-green-500 text-white text-xs font-semibold rounded-lg; }
.vh-price { @apply font-bold text-gray-900 dark:text-white; }
.vh-price-original { @apply text-gray-400 line-through text-sm; }

/* === ADMIN (va- prefix) === */
.va-stat-card { @apply bg-white dark:bg-gray-800 rounded-2xl p-5 border border-gray-100 dark:border-gray-700; }
.va-table { @apply w-full text-sm; }
.va-table th { @apply text-left px-4 py-3 bg-gray-50 dark:bg-gray-900 text-xs font-semibold text-gray-500 uppercase tracking-wider; }
.va-table td { @apply px-4 py-3 border-t border-gray-100 dark:border-gray-700; }
.va-form-group { @apply mb-4; }
.va-form-label { @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1; }
.va-form-input { @apply w-full px-4 py-2.5 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-xl focus:outline-none focus:border-indigo-500 transition-colors text-sm; }
.va-btn-primary { @apply inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition-colors; }
.va-btn-danger { @apply inline-flex items-center px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-medium rounded-xl transition-colors; }
.va-btn-secondary { @apply inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-xl transition-colors; }
.va-sidebar-link { @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white transition-colors; }
.va-sidebar-link-active { @apply bg-indigo-600 text-white; }

/* === Animations === */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-ring { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { transform: scale(0.95); } }
.animate-fade-in-up { animation: fadeInUp 0.4s ease forwards; }
.animate-slide-in-right { animation: slideInRight 0.3s ease forwards; }
.animate-pulse-ring { animation: pulse-ring 1.5s infinite; }

/* === Scrollbar hide === */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* === Image lazy loading === */
img[loading="lazy"] { background: #f3f4f6; }
/* Prevent FOUC: apply critical utility classes before the Tailwind CDN runtime loads */
.hidden{display:none}
.translate-x-full{transform:translateX(100%)}
.-translate-x-full{transform:translateX(-100%)}
.translate-y-full{transform:translateY(100%)}
.-translate-y-full{transform:translateY(-100%)}
.opacity-0{opacity:0}
.invisible{visibility:hidden}
[x-cloak]{display:none !important;}