@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
   font-family: 'Inter', sans-serif;
}

.match-card:hover,
.product-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 24px rgba(0,0,0,0.15);
   transition: all 0.3s ease;
}
.dark .match-card:hover,
.dark .product-card:hover {
   box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

.tab-btn {
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
}
.tab-btn:hover {
   color: #3b82f6;
}

.cart-count {
   position: absolute;
   top: -6px;
   right: -8px;
   background: #ef4444;
   color: white;
   font-size: 0.65rem;
   font-weight: 700;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.pulse-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   display: inline-block;
}

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
}
.fade-in {
   animation: fadeIn 0.4s ease-out;
}

.hero-gradient {
   background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
.dark .hero-gradient {
   background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);
}

.flag-usa { background: linear-gradient(135deg, #3b82f6, #ef4444); }
.flag-canada { background: linear-gradient(135deg, #ef4444, #ffffff, #ef4444); }
.flag-mexico { background: linear-gradient(135deg, #22c55e, #ffffff, #ef4444); }

@keyframes slideUp {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}
#delivery-toast {
   animation: slideUp 0.4s ease-out;
}

#chat-panel {
   box-shadow: -8px 0 30px rgba(0,0,0,0.15);
}
.dark #chat-panel {
   box-shadow: -8px 0 30px rgba(0,0,0,0.5);
}
#chat-messages {
   scrollbar-width: thin;
}
#chat-messages::-webkit-scrollbar {
   width: 4px;
}
#chat-messages::-webkit-scrollbar-thumb {
   background: #94a3b8;
   border-radius: 2px;
}

input, select, textarea {
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
   outline: none;
}