/*
 * ElegantTemplate utility compatibility layer.
 *
 * The bundled public/vendor/tailwind/tailwind.min.css is an older utility build.
 * ElegantTemplate uses Tailwind 3-style slate colors, class-based dark variants,
 * slash opacity colors, group variants and arbitrary values that are absent from
 * that bundle. Keep this file loaded after Tailwind, Blur/main.css and Bootstrap.
 */

:root {
    --text-muted: #64748b;
}

html.dark {
    --text-muted: #94a3b8;
    color-scheme: dark;
}

/* Slate palette */
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }

.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-slate-300 { background-color: #cbd5e1 !important; }
.bg-slate-600 { background-color: #475569 !important; }
.bg-slate-700 { background-color: #334155 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }

.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-600 { border-color: #475569 !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-slate-800 { border-color: #1e293b !important; }

/* Restaurant primary palette generated in the Blade view */
.text-primary-100 { color: rgb(var(--primary-100-rgb, 255 220 207) / 1) !important; }
.text-primary-300 { color: rgb(var(--primary-400-rgb, 236 87 75) / .82) !important; }
.text-primary-400 { color: rgb(var(--primary-400-rgb, 236 87 75) / 1) !important; }
.text-primary-500 { color: rgb(var(--primary-500-rgb, 243 93 70) / 1) !important; }
.text-primary-600 { color: rgb(var(--primary-600-rgb, 255 114 59) / 1) !important; }
.text-primary-700 { color: rgb(var(--primary-700-rgb, 209 93 48) / 1) !important; }

.bg-primary-100 { background-color: rgb(var(--primary-100-rgb, 255 220 207) / 1) !important; }
.bg-primary-600 { background-color: rgb(var(--primary-600-rgb, 255 114 59) / 1) !important; }
.bg-primary-50\/50 { background-color: rgb(var(--primary-50-rgb, 255 244 240) / .5) !important; }
.border-primary-600 { border-color: rgb(var(--primary-600-rgb, 255 114 59) / 1) !important; }

.hover\:bg-primary-200:hover { background-color: rgb(var(--primary-100-rgb, 255 220 207) / .72) !important; }
.hover\:bg-primary-500:hover { background-color: rgb(var(--primary-500-rgb, 243 93 70) / 1) !important; }
.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover { background-color: rgb(var(--primary-700-rgb, 209 93 48) / 1) !important; }
.hover\:text-primary-500:hover { color: rgb(var(--primary-500-rgb, 243 93 70) / 1) !important; }
.hover\:text-primary-600:hover { color: rgb(var(--primary-600-rgb, 255 114 59) / 1) !important; }
.hover\:border-primary-100:hover { border-color: rgb(var(--primary-100-rgb, 255 220 207) / 1) !important; }

/* Opacity color utilities */
.bg-white\/90 { background-color: rgb(255 255 255 / .90) !important; }
.bg-white\/50 { background-color: rgb(255 255 255 / .50) !important; }
.bg-white\/10 { background-color: rgb(255 255 255 / .10) !important; }
.bg-black\/50 { background-color: rgb(0 0 0 / .50) !important; }
.bg-black\/60 { background-color: rgb(0 0 0 / .60) !important; }
.border-white\/20 { border-color: rgb(255 255 255 / .20) !important; }
.border-white\/30 { border-color: rgb(255 255 255 / .30) !important; }
.text-white\/50 { color: rgb(255 255 255 / .50) !important; }

/* Gradient colors missing from the legacy utility bundle */
.from-primary-500 {
    --tw-gradient-from: rgb(var(--primary-500-rgb, 243 93 70) / 1);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(var(--primary-500-rgb, 243 93 70) / 0));
}
.from-slate-900 {
    --tw-gradient-from: #0f172a;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(15 23 42 / 0));
}
.from-black\/60 {
    --tw-gradient-from: rgb(0 0 0 / .60);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
}
.via-slate-900\/40 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(15 23 42 / .40), var(--tw-gradient-to, rgb(15 23 42 / 0));
}

/* Tailwind 3 arbitrary values used by ElegantTemplate */
.h-\[20px\] { height: 20px !important; }
.h-\[500px\] { height: 500px !important; }
.h-\[85vh\] { height: 85vh !important; min-height: 560px; }
.min-h-\[90vh\] { min-height: 90vh !important; }
.max-h-\[90vh\] { max-height: 90vh !important; }
.max-w-\[1000px\] { max-width: 1000px !important; }
.min-w-\[20px\] { min-width: 20px !important; }
.min-w-\[24px\] { min-width: 24px !important; }
.min-w-\[200px\] { min-width: 200px !important; }
.text-\[10px\] { font-size: 10px !important; line-height: 1rem; }
.z-\[60\] { z-index: 60 !important; }
.z-\[90\] { z-index: 90 !important; }
.z-\[100\] { z-index: 100 !important; }

/* Effects and variants absent from the old bundle */
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgb(0 0 0 / .15)); }
.line-clamp-1,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1) !important; }
.active\:scale-95:active { transform: scale(.95) !important; }
.active\:scale-\[0\.98\]:active { transform: scale(.98) !important; }
.group:hover .group-hover\:text-primary-600 { color: rgb(var(--primary-600-rgb, 255 114 59) / 1) !important; }

.hover\:shadow-primary-500\/10:hover {
    box-shadow: 0 25px 50px -12px rgb(var(--primary-500-rgb, 243 93 70) / .10) !important;
}
.shadow-primary-600\/20 { --tw-shadow-color: rgb(var(--primary-600-rgb, 255 114 59) / .20); }
.shadow-primary-600\/30 { --tw-shadow-color: rgb(var(--primary-600-rgb, 255 114 59) / .30); }
.shadow-\[0_-10px_40px_rgba\(0\,0\,0\,0\.1\)\] { box-shadow: 0 -10px 40px rgba(0, 0, 0, .1) !important; }

/* Class-based dark mode */
html.dark body { background-color: #020617 !important; color: #f1f5f9 !important; }
html.dark .dark\:block { display: block !important; }
html.dark .dark\:hidden { display: none !important; }
html.dark .dark\:bg-primary-900\/30 { background-color: rgb(var(--primary-900-rgb, 126 55 32) / .30) !important; }
html.dark .dark\:bg-slate-600 { background-color: #475569 !important; }
html.dark .dark\:bg-slate-700 { background-color: #334155 !important; }
html.dark .dark\:bg-slate-800 { background-color: #1e293b !important; }
html.dark .dark\:bg-slate-800\/50 { background-color: rgb(30 41 59 / .50) !important; }
html.dark .dark\:bg-slate-900 { background-color: #0f172a !important; }
html.dark .dark\:bg-slate-900\/90 { background-color: rgb(15 23 42 / .90) !important; }
html.dark .dark\:bg-slate-950 { background-color: #020617 !important; }
html.dark .dark\:border-slate-600 { border-color: #475569 !important; }
html.dark .dark\:border-slate-700 { border-color: #334155 !important; }
html.dark .dark\:border-slate-800 { border-color: #1e293b !important; }
html.dark .dark\:text-gray-400,
html.dark .dark\:text-slate-400 { color: #94a3b8 !important; }
html.dark .dark\:text-slate-300 { color: #cbd5e1 !important; }
html.dark .dark\:text-slate-200 { color: #e2e8f0 !important; }
html.dark .dark\:text-slate-100 { color: #f1f5f9 !important; }
html.dark .dark\:text-white { color: #ffffff !important; }
html.dark .dark\:text-primary-300 { color: rgb(var(--primary-400-rgb, 236 87 75) / .82) !important; }
html.dark .dark\:text-primary-400,
html.dark .dark\:hover\:text-primary-400:hover { color: rgb(var(--primary-400-rgb, 236 87 75) / 1) !important; }
html.dark .dark\:hover\:bg-slate-700:hover { background-color: #334155 !important; }
html.dark .dark\:hover\:bg-slate-800:hover { background-color: #1e293b !important; }

/* Restore intended component contrast when Bootstrap wins the cascade */
.jwsca-nav { min-height: 80px; }
#theme-toggle,
#language-toggle { border: 0; }
#hero > .absolute img { opacity: .72; }
#menu .filter-btn { min-height: 42px; white-space: nowrap; }
.menu-card { box-shadow: 0 10px 30px rgb(15 23 42 / .06); }
.menu-card:hover { box-shadow: 0 24px 50px rgb(var(--primary-500-rgb, 243 93 70) / .14); }

html.dark .menu-card { box-shadow: 0 10px 30px rgb(0 0 0 / .28); }
html.dark #menu { background-color: #020617; }

@media (min-width: 640px) {
    .sm\:max-h-\[85vh\] { max-height: 85vh !important; }
}

@media (max-width: 767px) {
    .h-\[85vh\] { height: 72vh !important; min-height: 520px; }
}