/* Base styles */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
.font-heading { font-family: 'Manrope', sans-serif; }
.font-body { font-family: 'Inter', sans-serif; }

/* Custom colors */
:root {
    --primary: #1e3a5f;
    --primary-light: #2d4a7a;
    --primary-deeper: #0f1d33;
    --primary-deepest: #070f1a;
    --accent: #d4a017;
    --accent-dark: #b8860b;
    --accent-light: #f0c75e;
    --accent-btn: #7A5A10;
    --accent-btn-dark: #5C4310;
    --secondary: #0d9488;
    --secondary-light: #14b8a6;
    --rose: #f43f5e;
    --rose-light: #fb7185;
    --whatsapp: #25D366;
    --whatsapp-dark: #1ebe5c;
    --muted: #6b7280;
    --surface: #f8fafc;
    --success: #10b981;
}

/* Background colors */
.bg-primary { background-color: #1e3a5f; }
.bg-primary-light { background-color: #2d4a7a; }
.bg-primary-deeper { background-color: #0f1d33; }
.bg-primary-deepest { background-color: #070f1a; }
.bg-accent { background-color: #d4a017; }
.bg-accent-dark { background-color: #b8860b; }
.bg-accent-light { background-color: #f0c75e; }
.bg-accent-btn { background-color: #7A5A10; }
.bg-accent-btn-dark { background-color: #5C4310; }
.bg-secondary { background-color: #0d9488; }
.bg-secondary-light { background-color: #14b8a6; }
.bg-rose { background-color: #f43f5e; }
.bg-rose-light { background-color: #fb7185; }
.bg-whatsapp { background-color: #25D366; }
.bg-whatsapp-dark { background-color: #1ebe5c; }
.bg-muted { background-color: #6b7280; }
.bg-surface { background-color: #f8fafc; }
.bg-success { background-color: #10b981; }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-black\/50 { background-color: rgba(0,0,0,0.5); }
.bg-gray-900 { background-color: #111827; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-600 { background-color: #dc2626; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-600 { background-color: #2563eb; }
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-800 { background-color: #1f2937; }

/* Text colors */
.text-primary { color: #1e3a5f; }
.text-primary-light { color: #2d4a7a; }
.text-accent { color: #d4a017; }
.text-accent-dark { color: #b8860b; }
.text-accent-btn { color: #7A5A10; }
.text-secondary { color: #0d9488; }
.text-rose { color: #f43f5e; }
.text-whatsapp { color: #25D366; }
.text-muted { color: #6b7280; }
.text-success { color: #10b981; }
.text-white { color: #ffffff; }
.text-white\/70 { color: rgba(255,255,255,0.7); }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-red-500 { color: #ef4444; }
.text-green-600 { color: #16a34a; }
.text-blue-600 { color: #2563eb; }

/* Border colors */
.border-primary { border-color: #1e3a5f; }
.border-primary-light { border-color: #2d4a7a; }
.border-accent { border-color: #d4a017; }
.border-accent\/20 { border-color: rgba(212,160,23,0.2); }
.border-accent\/30 { border-color: rgba(212,160,23,0.3); }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-800 { border-color: #1f2937; }
.border-amber-100 { border-color: #fef3c7; }
.border-amber-200 { border-color: #fde68a; }
.border-success { border-color: #10b981; }
.border-red-200 { border-color: #fecaca; }

/* Custom shadows */
.shadow-premium { box-shadow: 0 4px 20px rgba(30,58,95,0.08); }
.shadow-premium-lg { box-shadow: 0 8px 32px rgba(30,58,95,0.12); }
.shadow-premium-xl { box-shadow: 0 12px 48px rgba(30,58,95,0.15); }
.shadow-glow { box-shadow: 0 0 20px rgba(212,160,23,0.3); }

/* Hover states */
.hover\:text-accent:hover { color: #d4a017; }
.hover\:bg-accent-btn-dark:hover { background-color: #5C4310; }
.hover\:bg-primary-light:hover { background-color: #2d4a7a; }
.hover\:bg-whatsapp-dark:hover { background-color: #1ebe5c; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:shadow-accent\/25:hover { box-shadow: 0 4px 6px -1px rgba(122,90,16,0.25); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.10); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.hover\:border-gray-300:hover { border-color: #d1d5db; }
.hover\:bg-gradient-to-br:hover { background-image: linear-gradient(to bottom right, #9333ea, #ec4899, #fb923c); }
.hover\:from-purple-600:hover { --tw-gradient-from: #9333ea; }
.hover\:via-pink-500:hover { --tw-gradient-via: #ec4899; }
.hover\:to-orange-400:hover { --tw-gradient-to: #fb923c; }
.hover\:text-white:hover { color: #ffffff; }

/* Gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-accent-btn { --tw-gradient-from: #7A5A10; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(122,90,16,0)); }
.to-accent-btn-dark { --tw-gradient-to: #5C4310; }
.from-primary { --tw-gradient-from: #1e3a5f; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30,58,95,0)); }
.to-primary-light { --tw-gradient-to: #2d4a7a; }

.gradient-text-multi {
    background: linear-gradient(135deg, #f0c75e 0%, #d4a017 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Backdrop blur */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Glass effect */
.glass {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Animations */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-slide-up { animation: fadeSlideUp 0.6s ease-out forwards; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-fade-slide-in { animation: fadeSlideIn 0.5s ease-out forwards; }

.hero-dot { cursor: pointer; flex-shrink: 0; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.animate-bounce-subtle { animation: bounce-subtle 2s ease-in-out infinite; }

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(212,160,23,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(212,160,23,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
}
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }

.vendor-card:hover .vendor-cta { opacity: 1; transform: translateY(0); }
.vendor-card .vendor-cta { opacity: 0; transform: translateY(8px); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #7a9bb5; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5a7d99; }

/* Splide overrides */
.splide__arrow { background: rgba(30,58,95,0.9) !important; opacity: 1 !important; }
.splide__arrow svg { fill: white !important; }
.splide__pagination__page.is-active { background: #d4a017 !important; }
.splide__pagination__page { background: rgba(255,255,255,0.5) !important; }

/* Ripple effect */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    width: 100px; height: 100px;
    margin-top: -50px; margin-left: -50px;
    top: 50%; left: 50%;
    transform: scale(0);
    opacity: 0;
}
.ripple:active::after {
    animation: ripple 0.6s ease-out;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* Print */
@media print {
    header, footer, #whatsappBtn, #chatWidget, .splide__arrows, .splide__pagination, .ripple::after { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000 !important; text-decoration: underline; }
    .no-print, .sticky, .fixed { display: none !important; }
    @page { margin: 1.5cm; }
}

/* Additional utility overrides for pre-compiled Tailwind */
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.brightness-0 { filter: brightness(0); }
.invert { filter: invert(1); }