/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
    /* Dark theme (default) */
    --bg-primary: #111827;
    --bg-card: rgba(31, 41, 55, 0.6);
    --bg-card-hover: rgba(55, 65, 81, 0.3);
    --bg-input: rgba(55, 65, 81, 0.8);
    --border-primary: rgba(55, 65, 81, 0.5);
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    /* Sidebar */
    --sidebar-bg: linear-gradient(to bottom, #111827, #1f2937, #111827);
    --sidebar-section-bg: rgba(31, 41, 55, 0.5);
    --sidebar-hover-bg: rgba(55, 65, 81, 0.5);
    --sidebar-active-bg: #111827;
    --sidebar-submenu-active-bg: #1f2937;
    --sidebar-icon-bg: rgba(55, 65, 81, 0.5);
    --sidebar-user-bg: rgba(31, 41, 55, 0.5);
    --sidebar-border: rgba(55, 65, 81, 0.5);
}

:root.light {
    --bg-primary: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: rgba(243, 244, 246, 0.5);
    --bg-input: #f3f4f6;
    --border-primary: rgba(209, 213, 219, 0.5);
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    /* Sidebar */
    --sidebar-bg: linear-gradient(to bottom, #ffffff, #f8fafc, #ffffff);
    --sidebar-section-bg: rgba(243, 244, 246, 0.5);
    --sidebar-hover-bg: rgba(243, 244, 246, 0.8);
    --sidebar-active-bg: #f3f4f6;
    --sidebar-submenu-active-bg: #e5e7eb;
    --sidebar-icon-bg: rgba(229, 231, 235, 0.5);
    --sidebar-user-bg: rgba(243, 244, 246, 0.5);
    --sidebar-border: rgba(209, 213, 219, 0.5);
}

/* Sidebar theme utility classes */
.sidebar-active {
    background-color: var(--sidebar-active-bg);
}

.sidebar-hover:hover {
    background-color: var(--sidebar-hover-bg);
}

.sidebar-submenu-active {
    background-color: var(--sidebar-submenu-active-bg);
}

.sidebar-submenu-hover {
    color: var(--text-secondary);
}

.sidebar-submenu-hover:hover {
    background-color: var(--sidebar-submenu-active-bg);
    color: var(--text-primary);
}

.sidebar-icon-inactive {
    color: var(--text-muted);
}

body {
    background-color: var(--bg-primary);
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    letter-spacing: -.022em;
    line-height: 1.47059;
    font-size: 17px;
    font-weight: 400;
}

/* Professional Sign-in Page Enhancements */
.signin-form-field {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.signin-form-field:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px -5px rgba(255, 179, 14, 0.1);
}

/* Enhanced button styles */
.signin-button {
    position: relative;
    overflow: hidden;
}

.signin-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.signin-button:hover::before {
    left: 100%;
}

/* Floating animation for background elements */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

.floating-bg {
    animation: float 6s ease-in-out infinite;
}

/* Remove all page load animations to prevent blinking */
.signin-card {
    /* No animation */
}

.logo-container {
    /* No animation */
}

/* Input focus glow effect */
.input-glow:focus {
    box-shadow: 0 0 0 3px rgba(255, 179, 14, 0.1), 0 0 20px rgba(255, 179, 14, 0.05);
}

/* Password visibility toggle */
.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9CA3AF;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #FFB30E;
}

/* Enhanced card prominence */
.prominent-card {
    border: 1px solid rgba(255, 179, 14, 0.1);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 179, 14, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

/* Custom checkbox styling */
.custom-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white; /* white background when unchecked */
    border: 1px solid #d1d5db; /* gray-300 border */
    border-radius: 0.25rem; /* rounded equivalent */
    cursor: pointer;
    display: inline-block;
    height: 1rem; /* h-4 equivalent */
    position: relative;
    width: 1rem; /* w-4 equivalent */
    vertical-align: middle;
}

/* Checked state */
.custom-checkbox:checked {
    background-color: #FFB30E; /* your specific yellow color when checked */
    border-color: #FFB30E;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 115%;
}

/* Hover state for checked */
.custom-checkbox:checked:hover {
    background-color: #FF8F00;
    border-color: #FF8F00;
}

/* Focus state */
.custom-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 179, 14, 0.2);
}

.checkmark-draw {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: draw 0.8s ease forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Hero Page Custom Animations */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

.animate-fade-in-left {
    animation: fade-in-left 0.8s ease-out;
}

.animate-fade-in-right {
    animation: fade-in-right 0.8s ease-out;
}

/* Enhanced floating animation for hero background elements */
@keyframes hero-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes hero-float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(90deg); }
}

.animate-float {
    animation: hero-float 6s ease-in-out infinite;
}

.animate-float-slow {
    animation: hero-float-slow 8s ease-in-out infinite;
}

/* Futuristic AI Animations */
@keyframes scan-line {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes scan-line-vertical {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes neural-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
        filter: hue-rotate(90deg);
    }
}

@keyframes data-stream {
    0% {
        transform: translateX(-100vw) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(-50px);
        opacity: 0;
    }
}

@keyframes hologram-flicker {
    0%, 100% {
        opacity: 1;
        transform: skew(0deg);
    }
    25% {
        opacity: 0.8;
        transform: skew(0.5deg);
    }
    50% {
        opacity: 0.9;
        transform: skew(-0.3deg);
    }
    75% {
        opacity: 0.85;
        transform: skew(0.2deg);
    }
}

@keyframes quantum-glow {
    0%, 100% {
        box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
    }
    50% {
        box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* AI Matrix Background Effect */
@keyframes matrix-rain {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.neural-pulse {
    animation: neural-pulse 3s ease-in-out infinite;
}

.hologram-flicker {
    animation: hologram-flicker 2s ease-in-out infinite;
}

.quantum-glow {
    animation: quantum-glow 2s ease-in-out infinite;
}

/* Enhanced glitch effect for futuristic text */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.text-glitch:hover {
    animation: glitch 0.3s ease-in-out;
}

/* Mobile-Friendly Flash Notifications */
.pt-safe-top {
    padding-top: env(safe-area-inset-top, 1rem);
}

/* Smooth slide-in animation for flash notifications */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

[data-flash-notification] {
    animation: slideInFromTop 0.4s ease-out;
}

/* Enhanced progress bar animation for better UX */
@keyframes progressBarShrink {
    0% { width: 100%; }
    100% { width: 0%; }
}

[data-progress-bar] {
    transition: width 5s linear;
}

/* Mobile touch improvements */
@media (max-width: 640px) {
    [data-flash-notification] button {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    [data-flash-content] {
        min-height: 60px;
        display: flex;
        align-items: center;
    }
}

/* Tablet and larger screens */
@media (min-width: 641px) {
    [data-flash-notification] {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Order Number Blinking Animation */
@keyframes orderBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.1;
    }
}

.order-appear-animation {
    animation: orderBlink 0.3s ease-in-out;
    animation-iteration-count: 10;
}

/* ===== Card corners =====
   Cards and panels were too round. Tailwind builds rounded-lg / -xl / -2xl / -3xl from these variables, so lowering them
   changes every card, modal and panel at once (pills and circles use rounded-full and are not affected). */
:root {
    --radius-lg: 0.375rem;   /* 6px, was 8px */
    --radius-xl: 0.5625rem;  /* 9px, was 12px */
    --radius-2xl: 0.8125rem; /* 13px, was 16px */
    --radius-3xl: 1.3125rem; /* 21px, was 24px */
}

/* ===== Kitchen board ===== */

/* a new ticket drops in with a little bounce */
.kitchen-ticket-enter-active {
    animation: kitchen-arrive 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes kitchen-arrive {
    0%   { opacity: 0; transform: translateY(-28px) scale(0.92); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* a ticket that leaves a column slides away while the others close the gap */
.kitchen-ticket-leave-active {
    position: absolute;
    left: 0;
    right: 0;
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
    animation: none !important; /* a glow still running on the ticket must not keep it in the old column */
}
.kitchen-ticket-leave-to {
    opacity: 0;
    transform: translateX(48px) scale(0.95);
}
.kitchen-ticket-move {
    transition: transform 0.4s ease;
}

/* a new ticket keeps glowing for a few seconds so it cannot be missed */
.kitchen-ticket-fresh {
    animation: kitchen-glow 1s ease-in-out 4;
    border-color: #FFB30E !important;
}
@keyframes kitchen-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 14, 0.7); }
    50%      { box-shadow: 0 0 0 10px rgba(255, 179, 14, 0); }
}

/* a ticket that was just moved flashes where it landed */
.kitchen-ticket-moved {
    animation: kitchen-moved 1.2s ease-out;
}
@keyframes kitchen-moved {
    0%   { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.85); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* arriving AND highlighted: bounce in first, then keep glowing (one `animation` value, otherwise the later rule wins) */
.kitchen-ticket-enter-active.kitchen-ticket-fresh {
    animation: kitchen-arrive 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2), kitchen-glow 1s ease-in-out 0.7s 4;
}
.kitchen-ticket-enter-active.kitchen-ticket-moved {
    animation: kitchen-arrive 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2), kitchen-moved 1.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .kitchen-ticket-enter-active, .kitchen-ticket-fresh, .kitchen-ticket-moved,
    .kitchen-ticket-enter-active.kitchen-ticket-fresh, .kitchen-ticket-enter-active.kitchen-ticket-moved { animation: none; }
    .kitchen-ticket-leave-active, .kitchen-ticket-move { transition: none; }
}

/* ===== Sign-In Page Light Mode ===== */

/* Page background */
:root.light #signin-page {
    background-image: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #e2e8f0) !important;
}

/* "Weekler" heading (near-invisible light-gray gradient on light bg) */
:root.light #signin-page h1 {
    background-image: linear-gradient(to right, #1f2937, #374151) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Tagline text */
:root.light #signin-page .text-gray-400,
:root.light #signin-page .text-gray-500 {
    color: #6b7280 !important;
}

/* Back to Home / toggle link */
:root.light #signin-page header a {
    color: #6b7280 !important;
}
:root.light #signin-page header a:hover {
    color: #FFB30E !important;
}

/* Sign-in card */
:root.light #signin-card {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(209, 213, 219, 0.6) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
}

/* "Welcome Back" heading */
:root.light #signin-card h2 {
    background-image: linear-gradient(to right, #1f2937, #374151) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Card description text */
:root.light #signin-card p {
    color: #6b7280 !important;
}

/* Form labels */
:root.light #signin-card label,
:root.light #signin-card .text-gray-200 {
    color: #374151 !important;
}

/* Form inputs */
:root.light #signin-card input[type="email"],
:root.light #signin-card input[type="password"] {
    background-color: #f9fafb !important;
    border-color: rgba(209, 213, 219, 0.8) !important;
    color: #111827 !important;
}
:root.light #signin-card input[type="email"]::placeholder,
:root.light #signin-card input[type="password"]::placeholder {
    color: #9ca3af !important;
}
:root.light #signin-card input[type="email"]:focus,
:root.light #signin-card input[type="password"]:focus {
    border-color: rgba(255, 179, 14, 0.6) !important;
}

/* Remember me checkbox label */
:root.light #signin-card .text-gray-300 {
    color: #4b5563 !important;
}

/* Divider line */
:root.light #signin-card .border-gray-700\/30 {
    border-color: rgba(209, 213, 219, 0.5) !important;
}

/* ===== Welcome / Public Page Light Mode ===== */

/* Hero section background */
:root.light #welcome-hero {
    background-image: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #e2e8f0) !important;
}

/* Navbar */
:root.light #welcome-nav {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(209, 213, 219, 0.5) !important;
}

/* Nav links */
:root.light #welcome-nav a {
    color: #4b5563 !important;
}
:root.light #welcome-nav a:hover {
    color: #FFB30E !important;
}

/* "Sign In" link in nav */
:root.light .welcome-signin-link {
    color: #4b5563 !important;
}

/* Hero headline "Revolutionary" (light gray gradient → invisible on light bg) */
:root.light #welcome-hero h1 .hero-headline-primary {
    background-image: linear-gradient(to right, #1f2937, #374151) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Hero body text */
:root.light #welcome-hero p {
    color: #4b5563 !important;
}

/* Hero stats labels */
:root.light #welcome-hero .text-gray-400 {
    color: #6b7280 !important;
}

/* Hero "Watch Live Demo" secondary button */
:root.light #welcome-hero a.border-gray-600 {
    border-color: #9ca3af !important;
    color: #374151 !important;
}
:root.light #welcome-hero a.border-gray-600:hover {
    background-color: rgba(243, 244, 246, 0.8) !important;
    border-color: #6b7280 !important;
    color: #111827 !important;
}

/* Live Demo section background */
:root.light #welcome-live-demo {
    background-image: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #e2e8f0) !important;
}
:root.light #welcome-live-demo h2,
:root.light #welcome-live-demo h3 {
    color: #111827 !important;
}
:root.light #welcome-live-demo p,
:root.light #welcome-live-demo .text-gray-400 {
    color: #4b5563 !important;
}

/* Pricing section background */
:root.light #pricing {
    background-image: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #e2e8f0) !important;
}
:root.light #pricing h2,
:root.light #pricing h3,
:root.light #pricing h4 {
    color: #111827 !important;
}
:root.light #pricing p,
:root.light #pricing .text-gray-400,
:root.light #pricing .text-gray-300 {
    color: #4b5563 !important;
}
:root.light #pricing .text-white {
    color: #111827 !important;
}

/* Footer background */
:root.light #contact {
    background-color: #f1f5f9 !important;
    border-top: 1px solid rgba(209, 213, 219, 0.5);
}
:root.light #contact h3,
:root.light #contact h4 {
    color: #111827 !important;
}
:root.light #contact .text-white {
    color: #111827 !important;
}
:root.light #contact p,
:root.light #contact .text-gray-400 {
    color: #4b5563 !important;
}
:root.light #contact a.text-gray-400 {
    color: #6b7280 !important;
}
:root.light #contact a.text-gray-400:hover {
    color: #FFB30E !important;
}
:root.light #contact .bg-gray-800 {
    background-color: #e5e7eb !important;
}
:root.light #contact .hover\:bg-gray-700:hover {
    background-color: #d1d5db !important;
}
:root.light #contact .border-gray-800 {
    border-color: rgba(209, 213, 219, 0.5) !important;
}

/* ===== Sign-In Page Animations (Restaurant Themed) ===== */

/* Custom checkbox for sign-in page */
#signin-page input[type="checkbox"].custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    background-color: white !important;
}

#signin-page input[type="checkbox"].custom-checkbox:checked {
    background-color: #FFB30E !important;
    border-color: #FFB30E !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

#signin-page input[type="checkbox"].custom-checkbox:checked:hover {
    background-color: #FF8F00 !important;
    border-color: #FF8F00 !important;
}

#signin-page input[type="checkbox"].custom-checkbox:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 179, 14, 0.2) !important;
}

/* Restaurant-themed animated background */
.restaurant-animated-bg {
    position: relative;
    overflow: hidden;
}

/* Floating restaurant icons (fork, knife, plate, chef hat) */
.restaurant-icon {
    position: absolute;
    opacity: 0.08;
    animation: restaurant-float 25s ease-in-out infinite;
}

.restaurant-icon-1 {
    top: 10%;
    left: 5%;
    font-size: 80px;
    animation-delay: 0s;
}

.restaurant-icon-2 {
    top: 60%;
    left: 15%;
    font-size: 60px;
    animation-delay: 8s;
}

.restaurant-icon-3 {
    top: 30%;
    right: 10%;
    font-size: 70px;
    animation-delay: 16s;
}

.restaurant-icon-4 {
    bottom: 15%;
    right: 20%;
    font-size: 50px;
    animation-delay: 4s;
}

.restaurant-icon-5 {
    top: 75%;
    left: 60%;
    font-size: 65px;
    animation-delay: 12s;
}

@keyframes restaurant-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.08;
    }
    25% {
        transform: translate(20px, -30px) rotate(5deg);
        opacity: 0.12;
    }
    50% {
        transform: translate(-10px, -60px) rotate(-3deg);
        opacity: 0.06;
    }
    75% {
        transform: translate(15px, -40px) rotate(7deg);
        opacity: 0.10;
    }
}

/* Subtle gradient overlay */
.restaurant-animated-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 30% 50%,
        rgba(255, 179, 14, 0.05) 0%,
        rgba(255, 143, 0, 0.03) 25%,
        transparent 50%
    );
    animation: gradient-rotate 20s linear infinite;
}

@keyframes gradient-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Content layer above animations */
.restaurant-content-layer {
    position: relative;
    z-index: 10;
}

/* Form entrance animation */
.restaurant-form-container {
    animation: restaurant-fade-in-up 0.8s ease-out;
}

@keyframes restaurant-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide-over transitions */
.slide-over-enter-active,
.slide-over-leave-active {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-over-enter-from,
.slide-over-leave-to {
    transform: translateX(100%);
}

.fade-backdrop-enter-active,
.fade-backdrop-leave-active {
    transition: opacity 0.3s ease;
}
.fade-backdrop-enter-from,
.fade-backdrop-leave-to {
    opacity: 0;
}

/* Enhanced input focus for sign-in, password reset, and account request pages */
#signin-page input:focus,
#forgot-password-page input:focus,
#account-request-page input:focus,
#account-request-page textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 179, 14, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   Admin panel design system  (adm-*)
   Neutral surfaces, one amber accent, soft elevation, tight type scale.
   ===================================================================== */
:root {
    --adm-accent: #f5a300;
    --adm-accent-strong: #d98b00;
    --adm-accent-soft: rgba(245, 163, 0, 0.12);
    --adm-accent-ring: rgba(245, 163, 0, 0.35);
    --adm-surface: rgba(255, 255, 255, 0.035);
    --adm-surface-raised: rgba(255, 255, 255, 0.06);
    --adm-head-bg: rgba(255, 255, 255, 0.04);
    --adm-row-hover: rgba(255, 255, 255, 0.04);
    --adm-line: rgba(255, 255, 255, 0.08);
    --adm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --adm-success: #34d399;
    --adm-danger: #f87171;
    --adm-info: #60a5fa;
}
:root.light {
    --adm-accent: #e69500;
    --adm-accent-strong: #b87700;
    --adm-accent-soft: rgba(230, 149, 0, 0.1);
    --adm-accent-ring: rgba(230, 149, 0, 0.3);
    --adm-surface: #ffffff;
    --adm-surface-raised: #ffffff;
    --adm-head-bg: #f8fafc;
    --adm-row-hover: #f8fafc;
    --adm-line: #e8ecf1;
    --adm-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -14px rgba(16, 24, 40, 0.12);
    --adm-success: #059669;
    --adm-danger: #dc2626;
    --adm-info: #2563eb;
}

.adm-page { padding: 20px 24px 56px; max-width: 1600px; margin: 0 auto; }
@media (max-width: 640px) { .adm-page { padding: 12px 12px 40px; } }

/* Page header */
.adm-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; }
.adm-subtitle { margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.adm-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adm-accent); margin-bottom: 3px; }

/* Buttons */
.adm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
    height: 36px; padding: 0 15px; border-radius: 6px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--adm-line); background: var(--adm-surface-raised); color: var(--text-primary);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.adm-btn:hover { border-color: var(--adm-accent-ring); }
.adm-btn:active { transform: translateY(1px); }
.adm-btn:focus-visible, .adm-input:focus-visible { outline: 2px solid var(--adm-accent-ring); outline-offset: 1px; }
.adm-btn:disabled { opacity: .5; cursor: not-allowed; }
.adm-btn-primary { background: var(--adm-accent); border-color: transparent; color: #1a1200; box-shadow: 0 6px 16px -8px rgba(245, 163, 0, 0.8); }
.adm-btn-primary:hover { background: #ffb820; border-color: transparent; }
.adm-btn-ghost { background: transparent; }
.adm-btn-sm { height: 30px; padding: 0 11px; border-radius: 6px; font-size: 12px; }
.adm-btn svg { width: 15px; height: 15px; }

/* Cards, toolbar, inputs */
.adm-card { background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: 6px; box-shadow: var(--adm-shadow); }
.adm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; }
.adm-toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-input, .adm-select {
    height: 36px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--text-primary);
    background: var(--bg-input); border: 1px solid var(--adm-line); transition: border-color .15s, box-shadow .15s;
}
.adm-input::placeholder { color: var(--text-muted); }
.adm-input:focus, .adm-select:focus { outline: none; border-color: var(--adm-accent); box-shadow: 0 0 0 3px var(--adm-accent-ring); }
.adm-search { position: relative; min-width: 270px; }
.adm-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.adm-search .adm-input { width: 100%; padding-left: 34px; padding-right: 30px; }
.adm-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--text-muted); }
.adm-search-clear:hover { background: var(--adm-row-hover); color: var(--text-primary); }
.adm-label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.adm-field { width: 100%; height: 40px; padding: 0 13px; border-radius: 6px; font-size: 14px; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--adm-line); }
textarea.adm-field { height: auto; padding: 10px 13px; resize: vertical; }
.adm-field:focus { outline: none; border-color: var(--adm-accent); box-shadow: 0 0 0 3px var(--adm-accent-ring); }

/* Table: compact data grid */
.adm-table-wrap { overflow: hidden; }
.adm-table-scroll { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.adm-table thead th {
    position: sticky; top: 0; padding: 11px 18px; text-align: left; white-space: nowrap;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-muted); background: var(--adm-head-bg); border-bottom: 1px solid var(--adm-line);
}
.adm-table thead th + th, .adm-table tbody td + td { border-left: 1px solid color-mix(in srgb, var(--adm-line) 55%, transparent); }
.adm-table tbody td { padding: 12px 18px; font-size: 13.5px; line-height: 1.4; color: var(--text-primary); border-bottom: 1px solid var(--adm-line); white-space: nowrap; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--adm-head-bg) 55%, transparent); }
.adm-table tbody tr:hover td { background: var(--adm-accent-soft); }
.adm-table th:first-child, .adm-table td:first-child { padding-left: 20px; }
.adm-table .is-center { text-align: center; }
.adm-cell-link { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; color: var(--text-primary); }
.adm-cell-link:hover { color: var(--adm-accent); }
.adm-muted { color: var(--text-muted); }
.adm-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: var(--adm-accent-strong); background: var(--adm-accent-soft);
    object-fit: cover;
}
.adm-row-action { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--adm-line); transition: all .15s; }
.adm-row-action:hover { color: var(--adm-accent); border-color: var(--adm-accent-ring); background: var(--adm-accent-soft); }

/* Badges */
.adm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--adm-surface-raised); color: var(--text-secondary); border: 1px solid var(--adm-line); }
.adm-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.adm-badge-success { color: var(--adm-success); background: color-mix(in srgb, var(--adm-success) 12%, transparent); border-color: transparent; }
.adm-badge-danger { color: var(--adm-danger); background: color-mix(in srgb, var(--adm-danger) 12%, transparent); border-color: transparent; }
.adm-badge-warn { color: var(--adm-accent); background: var(--adm-accent-soft); border-color: transparent; }
.adm-badge-info { color: var(--adm-info); background: color-mix(in srgb, var(--adm-info) 12%, transparent); border-color: transparent; }

/* Pagination, empty state, modal */
.adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.adm-pager b { color: var(--text-primary); font-weight: 600; }
.adm-empty { padding: 52px 24px; text-align: center; }
.adm-empty-icon { width: 46px; height: 46px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 8px; background: var(--adm-accent-soft); color: var(--adm-accent); }
.adm-empty-icon svg { width: 20px; height: 20px; }
.adm-empty h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.adm-empty p { margin: 5px 0 16px; font-size: 13px; color: var(--text-muted); }
.adm-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 16, 0.6); backdrop-filter: blur(6px); }
.adm-modal { background: var(--bg-card-solid, var(--bg-primary)); border: 1px solid var(--adm-line); border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); }
:root.light .adm-modal { background: #fff; }
.adm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 24px 2px; }
.adm-modal-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.adm-modal-head p { margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.adm-modal-body { padding: 16px 24px 24px; }
.adm-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding-top: 8px; }

/* ===== Home hero: animated background + live kitchen display ===== */
.wk-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.wk-aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .28; will-change: transform; }
.wk-aurora-1 { width: 620px; height: 620px; top: -220px; right: -120px; background: radial-gradient(circle, #FFB30E, transparent 65%); animation: wk-drift-a 22s ease-in-out infinite; }
.wk-aurora-2 { width: 560px; height: 560px; bottom: -200px; left: -140px; background: radial-gradient(circle, #7C3AED, transparent 65%); opacity: .22; animation: wk-drift-b 26s ease-in-out infinite; }
.wk-aurora-3 { width: 420px; height: 420px; top: 40%; left: 40%; background: radial-gradient(circle, #10B981, transparent 65%); opacity: .12; animation: wk-drift-c 30s ease-in-out infinite; }
@keyframes wk-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-90px,70px) scale(1.15); } }
@keyframes wk-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(110px,-60px) scale(1.1); } }
@keyframes wk-drift-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px,-50px) scale(1.25); } }

.wk-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
}
.wk-sweep {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,179,14,.07) 40deg, transparent 90deg);
  animation: gradient-rotate 28s linear infinite;
}

.wk-food { position: absolute; font-size: 44px; opacity: .16; filter: drop-shadow(0 6px 18px rgba(255,179,14,.25)); animation: wk-bob 14s ease-in-out infinite; }
.wk-food-1 { top: 14%; left: 6%;  font-size: 56px; animation-delay: 0s; }
.wk-food-2 { top: 68%; left: 9%;  font-size: 46px; animation-delay: -4s; }
.wk-food-3 { top: 22%; left: 47%; font-size: 38px; animation-delay: -8s; }
.wk-food-4 { top: 82%; left: 44%; font-size: 52px; animation-delay: -2s; }
.wk-food-5 { top: 12%; right: 5%; font-size: 48px; animation-delay: -6s; }
.wk-food-6 { top: 78%; right: 6%; font-size: 54px; animation-delay: -10s; }
@keyframes wk-bob {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(14px,-26px) rotate(6deg); }
  66% { transform: translate(-12px,-12px) rotate(-5deg); }
}

.wk-spark { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #FFB30E; box-shadow: 0 0 10px 2px rgba(255,179,14,.7); opacity: 0; animation: wk-rise 9s linear infinite; }
@keyframes wk-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .6; } 100% { transform: translateY(-110vh); opacity: 0; } }

/* Board */
.wk-stage { position: relative; padding: 36px 28px; animation: restaurant-fade-in-up 1s ease-out .5s both; }
.wk-board {
  position: relative; border-radius: 22px; padding: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,179,14,.06), inset 0 1px 0 rgba(255,255,255,.12);
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  animation: wk-board-float 9s ease-in-out infinite;
}
@keyframes wk-board-float { 0%,100% { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) translateY(0); } 50% { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) translateY(-10px); } }
.wk-board-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.wk-board-title { color: #e5e7eb; font-weight: 600; font-size: 14px; }
.wk-dots { display: inline-flex; gap: 5px; }
.wk-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.wk-dots i:first-child { background: #EF4444; opacity: .8; } .wk-dots i:nth-child(2) { background: #FFB30E; opacity: .8; } .wk-dots i:nth-child(3) { background: #10B981; opacity: .8; }
.wk-live { display: inline-flex; align-items: center; gap: 6px; color: #34d399; font-size: 12px; font-weight: 600; background: rgba(16,185,129,.12); padding: 3px 10px; border-radius: 999px; }
.wk-live b { width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: wk-ping 1.8s ease-out infinite; }
@keyframes wk-ping { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 100% { box-shadow: 0 0 0 9px rgba(16,185,129,0); } }

.wk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wk-col { display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.05); }
.wk-col-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wk-amber { color: #FFB30E; } .wk-blue { color: #60a5fa; } .wk-green { color: #34d399; }

.wk-ticket {
  padding: 10px; border-radius: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  animation: wk-ticket-in 7.2s cubic-bezier(.2,.8,.2,1) var(--d, 0s) infinite both;
}
.wk-ticket.wk-ready { border-color: rgba(52,211,153,.35); background: rgba(16,185,129,.1); }
.wk-t-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wk-t-top span { color: #fff; font-weight: 700; font-size: 12px; }
.wk-t-top em { font-style: normal; color: #9ca3af; font-size: 10px; }
.wk-ticket p { color: #9ca3af; font-size: 11px; line-height: 1.45; margin: 0 0 8px; }
.wk-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.wk-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #FFB30E, #FF8F00); transform-origin: left; animation: wk-fill 7.2s ease-out var(--d, 0s) infinite both; }
.wk-ready .wk-bar i { background: linear-gradient(90deg, #10B981, #34d399); }
@keyframes wk-ticket-in {
  0% { opacity: 0; transform: translateY(-14px) scale(.96); }
  8%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(.98); }
}
@keyframes wk-fill { 0%, 8% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }

/* Floating chips */
.wk-chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(31,29,43,.78); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  animation: wk-chip-float 7s ease-in-out infinite;
}
.wk-chip b { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.wk-chip small { display: block; color: #9ca3af; font-size: 11px; }
.wk-chip-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; font-weight: 700; }
.wk-bg-amber { background: linear-gradient(135deg, #FFB30E, #FF8F00); }
.wk-bg-green { background: linear-gradient(135deg, #10B981, #059669); }
.wk-chip-1 { top: 0; left: -10px; animation-delay: -1s; }
.wk-chip-2 { bottom: 6px; left: 18px; animation-delay: -3.5s; }
.wk-chip-3 { flex-direction: column; align-items: flex-start; gap: 2px; bottom: 56px; right: -6px; min-width: 150px; animation-delay: -5s; }
.wk-chip-3 b { color: #34d399; font-size: 20px; }
.wk-spark-line { width: 100%; height: 34px; margin-top: 4px; overflow: visible; }
.wk-spark-line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wk-draw 5s ease-in-out infinite; }
@keyframes wk-draw { 0% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes wk-chip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Light mode */
:root.light .wk-aurora { opacity: .18; }
:root.light .wk-grid { background-image: linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px); }
:root.light .wk-food { opacity: .22; }
:root.light .wk-board { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.65)); border-color: rgba(15,23,42,.08); box-shadow: 0 30px 70px -25px rgba(15,23,42,.3); }
:root.light .wk-board-title, :root.light .wk-t-top span, :root.light .wk-chip b { color: #111827; }
:root.light .wk-col { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.06); }
:root.light .wk-ticket { background: #fff; border-color: rgba(15,23,42,.08); }
:root.light .wk-ticket.wk-ready { background: rgba(16,185,129,.1); }
:root.light .wk-ticket p, :root.light .wk-t-top em, :root.light .wk-chip small { color: #6b7280; }
:root.light .wk-bar { background: rgba(15,23,42,.1); }
:root.light .wk-chip { background: rgba(255,255,255,.92); border-color: rgba(15,23,42,.08); box-shadow: 0 18px 40px -14px rgba(15,23,42,.3); }
:root.light .wk-chip-3 b { color: #059669; }

@media (prefers-reduced-motion: reduce) {
  .wk-aurora, .wk-sweep, .wk-food, .wk-spark, .wk-board, .wk-stage, .wk-chip, .wk-ticket, .wk-bar i, .wk-live b, .wk-spark-line path { animation: none !important; }
  .wk-ticket { opacity: 1; } .wk-spark-line path { stroke-dashoffset: 0; }
}

/* Logo variants: show the one that matches the public theme */
.logo-on-light { display: none; }
:root.light .logo-on-light { display: block; }
:root.light .logo-on-dark { display: none; }

/* Admin side drawer (75% of the page) */
.adm-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 16, 0.55); backdrop-filter: blur(3px); animation: adm-fade .18s ease-out; }
.adm-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 75vw; min-width: min(100vw, 360px);
    display: flex; flex-direction: column; background: var(--bg-primary); border-left: 1px solid var(--adm-line);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.5); animation: adm-slide .22s cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 768px) { .adm-drawer { width: 100vw; } }
@keyframes adm-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes adm-fade { from { opacity: 0; } to { opacity: 1; } }
.adm-drawer-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--adm-line); }
.adm-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }
.adm-profile-pic { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--adm-accent-strong); background: var(--adm-accent-soft); }
.adm-drawer-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--adm-line); }
.adm-drawer-tab { position: relative; padding: 12px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; background: none; border: 0; }
.adm-drawer-tab:hover { color: var(--text-primary); }
.adm-drawer-tab.is-active { color: var(--text-primary); font-weight: 600; }
.adm-drawer-tab.is-active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--adm-accent); }
.adm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.adm-section-title { padding: 12px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--adm-line); }
.adm-dl { display: grid; }
.adm-dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 18px; font-size: 13px; border-bottom: 1px solid var(--adm-line); }
.adm-dl > div:last-child { border-bottom: 0; }
.adm-dl dt { color: var(--text-muted); }
.adm-dl dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.adm-table tbody tr.is-clickable { cursor: pointer; }
.adm-alert { padding: 10px 14px; border-radius: 6px; font-size: 13px; }
.adm-alert-success { color: var(--adm-success); background: color-mix(in srgb, var(--adm-success) 12%, transparent); }
.adm-alert-danger { color: var(--adm-danger); background: color-mix(in srgb, var(--adm-danger) 12%, transparent); }

/* Fit mode: the table always fits its container, cells wrap, nothing scrolls sideways */
.adm-table-fit .adm-table-scroll { overflow-x: visible; }
.adm-table-fit .adm-table { table-layout: auto; }
.adm-table-fit .adm-table thead th { white-space: normal; padding-left: 12px; padding-right: 12px; }
.adm-table-fit .adm-table tbody td { white-space: normal; overflow-wrap: anywhere; padding-left: 12px; padding-right: 12px; }
.adm-table-fit .adm-table th:first-child, .adm-table-fit .adm-table td:first-child { padding-left: 16px; }
.adm-table-fit .adm-cell-link { min-width: 0; }

/* Brand slider (90% of the page) */
.adm-drawer-wide { width: 90vw; }
@media (max-width: 768px) { .adm-drawer-wide { width: 100vw; } }
.adm-modal-backdrop.is-top { z-index: 80; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.adm-stat { padding: 14px 16px; border-radius: 6px; border: 1px solid var(--adm-line); background: var(--adm-surface); }
.adm-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.adm-stat-value { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; }
.adm-stat-hint { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.adm-feature { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; cursor: pointer; text-align: left; width: 100%; font-size: 13px; color: var(--text-muted); background: var(--adm-surface); border: 1px solid var(--adm-line); transition: background .15s, border-color .15s, color .15s; }
.adm-feature:hover { border-color: var(--adm-accent-ring); }
.adm-feature.is-on { color: var(--text-primary); font-weight: 500; background: var(--adm-accent-soft); border-color: var(--adm-accent-ring); }
.adm-feature-box { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--text-muted); display: grid; place-items: center; }
.adm-feature.is-on .adm-feature-box { background: var(--adm-accent); border-color: var(--adm-accent); }
.adm-savebar { position: sticky; bottom: -40px; margin: 16px -24px -40px; padding: 12px 24px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--bg-primary) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--adm-line); }
.adm-callout-danger { padding: 14px 18px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--adm-danger) 35%, transparent); background: color-mix(in srgb, var(--adm-danger) 8%, transparent); }

/* Admin notes: always readable in both themes */
.adm-notes { padding: 14px 18px; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); }
.adm-notes.is-empty { color: var(--text-muted); font-style: italic; }

/* Searchable dropdown + segmented control */
.adm-combo { position: relative; display: inline-block; }
.adm-combo-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 220px; height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13px; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--adm-line); cursor: pointer; text-align: left; }
.adm-combo-trigger:hover, .adm-combo.is-open .adm-combo-trigger { border-color: var(--adm-accent); }
.adm-combo-trigger svg { flex: none; width: 14px; height: 14px; color: var(--text-muted); }
.adm-combo-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 90; min-width: 100%; width: max-content; max-width: 360px; border-radius: 8px; border: 1px solid var(--adm-line); background: var(--bg-primary); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5); overflow: hidden; }
:root.light .adm-popover { background: #fff; }
.adm-popover-search { padding: 8px; border-bottom: 1px solid var(--adm-line); }
.adm-popover-list { max-height: 260px; overflow-y: auto; padding: 4px; margin: 0; list-style: none; }
.adm-popover-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.adm-popover-item.is-active { background: var(--adm-row-hover); }
.adm-popover-item.is-selected { color: var(--adm-accent); font-weight: 600; }
.adm-popover-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--text-muted); }
.adm-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; border: 1px solid var(--adm-line); background: var(--adm-surface); }
.adm-segmented button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 6px; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.adm-segmented button:hover { color: var(--text-primary); }
.adm-segmented button.is-active { background: var(--adm-accent-soft); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--adm-accent-ring); }
.adm-segmented .adm-count-pill { min-width: 20px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 18px; text-align: center; color: var(--text-muted); background: var(--adm-surface-raised); }

/* Date range picker (vue-datepicker) styled like the other admin inputs */
.adm-datepicker { min-width: 250px; }
.adm-datepicker .dp__theme_light, .adm-datepicker .dp__theme_dark {
    --dp-font-family: inherit;
    --dp-font-size: 13px;
    --dp-border-radius: 6px;
    --dp-cell-border-radius: 6px;
    --dp-input-padding: 0 12px 0 34px;
    --dp-input-icon-padding: 34px;
    --dp-background-color: var(--bg-primary);
    --dp-text-color: var(--text-primary);
    --dp-hover-color: var(--adm-row-hover);
    --dp-hover-text-color: var(--text-primary);
    --dp-hover-icon-color: var(--text-primary);
    --dp-primary-color: var(--adm-accent);
    --dp-primary-text-color: #1a1200;
    --dp-secondary-color: var(--text-muted);
    --dp-border-color: var(--adm-line);
    --dp-menu-border-color: var(--adm-line);
    --dp-border-color-hover: var(--adm-accent);
    --dp-border-color-focus: var(--adm-accent);
    --dp-disabled-color: var(--adm-surface);
    --dp-disabled-color-text: var(--text-muted);
    --dp-icon-color: var(--text-muted);
    --dp-highlight-color: var(--adm-accent-soft);
    --dp-range-between-dates-background-color: var(--adm-accent-soft);
    --dp-range-between-dates-text-color: var(--text-primary);
    --dp-range-between-border-color: transparent;
}
:root.light .adm-datepicker .dp__theme_light { --dp-background-color: #fff; }
.adm-datepicker .dp__input {
    height: 36px; box-sizing: border-box; font-size: 13px; color: var(--text-primary); background: var(--bg-input);
    border: 1px solid var(--adm-line); border-radius: 6px; box-shadow: none;
}
.adm-datepicker .dp__input::placeholder { color: var(--text-muted); opacity: 1; }
.adm-datepicker .dp__input:hover { border-color: var(--adm-accent-ring); }
.adm-datepicker .dp__input_focus, .adm-datepicker .dp__input:focus-within { border-color: var(--adm-accent); box-shadow: 0 0 0 3px var(--adm-accent-ring); }
.adm-datepicker .dp__input_icon { left: 0; }
.adm-datepicker .dp__menu { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5); }

/* Error details slider */
.adm-code { margin: 0; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; color: var(--text-primary); background: var(--adm-head-bg); border: 1px solid var(--adm-line); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.adm-trace { display: grid; grid-template-columns: auto 1fr; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.7; overflow: auto; max-height: calc(100vh - 290px); }
.adm-trace-no { padding: 0 12px; text-align: right; color: var(--text-muted); user-select: none; border-right: 1px solid var(--adm-line); background: var(--adm-head-bg); }
.adm-trace-line { padding: 0 14px; color: var(--text-primary); white-space: pre; }
.adm-trace-line.is-first { color: var(--adm-danger); font-weight: 600; }
.adm-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 16px 18px 0; }
.adm-chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.adm-chart-bar { width: 100%; max-width: 34px; border-radius: 3px 3px 0 0; background: var(--adm-line); min-height: 3px; }
.adm-chart-bar.has-events { background: var(--adm-danger); }
.adm-chart-count { font-size: 11px; color: var(--text-muted); height: 14px; }
.adm-chart-axis { display: flex; gap: 6px; padding: 8px 18px 14px; }
.adm-chart-axis span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.adm-rowbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; font-size: 13px; border-bottom: 1px solid var(--adm-line); overflow: hidden; }
.adm-rowbar:last-child { border-bottom: 0; }
.adm-rowbar-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--adm-danger) 10%, transparent); }
.adm-rowbar > :not(.adm-rowbar-fill) { position: relative; }

/* Review screen (account requests): details on the left, a sticky review panel on the right */
.adm-split { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .adm-split { grid-template-columns: minmax(0, 1fr); } }
.adm-sticky { position: sticky; top: 0; }
.adm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 8px; border: 1px solid var(--adm-line); background: var(--adm-surface); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-muted); transition: border-color .15s, background .15s, color .15s; }
.adm-step:hover { border-color: var(--adm-accent-ring); color: var(--text-primary); }
.adm-step-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--text-muted); color: var(--text-muted); }
.adm-step.is-done .adm-step-dot { background: var(--adm-success); border-color: var(--adm-success); color: #06281c; }
.adm-step.is-current { color: var(--text-primary); font-weight: 600; background: var(--adm-accent-soft); border-color: var(--adm-accent-ring); }
.adm-step.is-current .adm-step-dot { border-color: var(--adm-accent); background: var(--adm-accent); color: #1a1200; }
.adm-copyable { display: inline-flex; align-items: center; gap: 8px; }
.adm-copy-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.adm-copy-btn:hover { background: var(--adm-row-hover); color: var(--text-primary); }
.adm-link { color: var(--adm-accent); font-weight: 500; text-decoration: none; }
.adm-link:hover { text-decoration: underline; }

/* ===== Franchise dashboard on tablets and phones =====
   Desktop (1024px and wider) is deliberately untouched: everything below sits inside max-width media queries, and the
   phone order cards are hidden here by default. Hooks are the fd-* classes in app/.../franchises/show.js. */
.fd-orders-cards { display: none; }

/* tablets and phones: room for the bottom tab bar, no full screen button (not useful on touch devices) */
@media (max-width: 1023px) {
    .fd-page { padding-left: 16px; padding-right: 16px; }
    .fd-fullscreen { display: none; }
    .fd-header { padding-top: calc(16px + env(safe-area-inset-top)); }
    .fd-orders-panel td { padding-top: 14px; padding-bottom: 14px; }   /* taller rows for fingers */
    .fd-orders-panel a { padding: 12px 0 12px 12px; margin: -12px 0; }   /* 44px tap area without growing the title row */
}

/* tablets (portrait): four KPI tiles in a row, panels side by side */
@media (min-width: 768px) and (max-width: 1023px) {
    .fd-page { padding-left: 24px; padding-right: 24px; }
    .fd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .fd-stat { padding: 14px; }
    .fd-stat .text-xl { font-size: 1.5rem; line-height: 2rem; }
    .fd-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .fd-bottom-grid > :nth-child(3) { grid-column: 1 / -1; }
    .fd-main-grid { gap: 16px; }
    .fd-title { font-size: 1.375rem; }
}

/* phones */
@media (max-width: 767px) {
    /* app bar */
    .fd-header-row { align-items: center; gap: 12px; }
    .fd-header-row > div:first-child { min-width: 0; flex: 1; }
    .fd-header-row > div:first-child > div:last-child { min-width: 0; }
    .fd-title { font-size: 1.25rem; line-height: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
    .fd-address { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fd-clock { padding: 6px 10px; flex: none; }
    .fd-clock svg { display: none; }
    .fd-clock span { font-size: 15px; white-space: nowrap; }

    /* KPIs: revenue as a hero card, the other three as compact tiles in one row */
    .fd-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
    .fd-stat { grid-column: span 2; padding: 12px; }
    .fd-stat > div > div:last-child { display: none; }
    .fd-stat .text-xl { font-size: 1.25rem; line-height: 1.5rem; }
    .fd-stat-revenue { grid-column: 1 / -1; order: -1; padding: 16px; background: linear-gradient(135deg, #FFB30E, #FF8F00) !important; border-color: transparent !important; }
    .fd-stat-revenue > div > div:last-child { display: flex; background: rgba(255, 255, 255, 0.35) !important; }
    .fd-stat-revenue > div > div:last-child svg { color: #3b2a00 !important; }
    .fd-stat-revenue p, .fd-stat-revenue span { color: #3b2a00 !important; }
    .fd-stat-revenue .text-xl { font-size: 2rem; line-height: 2.25rem; letter-spacing: -0.02em; }

    /* panels: one column, tighter */
    .fd-main-grid, .fd-bottom-grid { gap: 12px; margin-bottom: 12px; }

    /* recent orders: cards instead of a seven column table */
    .fd-orders-table-wrap { overflow: visible; }
    .fd-orders-table-wrap table { display: none; }
    .fd-orders-cards { display: block; }
    .fd-order-card { padding: 12px 16px; border-bottom: 1px solid var(--border-primary); min-height: 64px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .fd-order-card:last-child { border-bottom: 0; }
    .fd-order-card:active { background: var(--bg-input); }
    .fd-order-card-deleted { opacity: 0.5; }
    .fd-order-card-deleted .fd-order-number, .fd-order-card-deleted .fd-order-total { text-decoration: line-through; }
    .fd-order-row { display: flex; align-items: center; gap: 8px; }
    .fd-order-meta { margin-top: 6px; }
    .fd-order-number { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .fd-order-total { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .fd-order-info { flex: 1; min-width: 0; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fd-order-time { flex: none; font-size: 12px; color: var(--text-muted); }
}

/* ===== Bottom tab bar (phones and tablets) =====
   Hidden by default so desktop never shows it; the media query turns it on below 1024px. While it is shown the round
   menu button is hidden (the More tab opens the same menu) and pages get room at the bottom. */
.fd-tabbar { display: none; }
@media (max-width: 1023px) {
    .fd-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: stretch; gap: 4px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--border-primary);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .fd-tab { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        font-size: 11px; font-weight: 600; color: var(--text-muted); background: none; border: 0; border-radius: 10px; cursor: pointer;
        -webkit-tap-highlight-color: transparent; text-decoration: none; }
    .fd-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .fd-tab:active { background: var(--bg-input); }
    .fd-tab-active { color: #FFB30E; }
    body.has-mobile-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    body.has-mobile-tabbar .fd-hamburger { display: none; }
}

/* ===== New Order (POS) page on tablets and phones =====
   Desktop (1024px and wider) is untouched: everything is inside max-width media queries, and the phone cart controls are
   hidden by default. Hooks are the no-* classes in app/.../franchises/orders/*.js. */
.no-minibar { display: none; }
.no-cart-close { display: none; }

/* tablets and phones: bigger touch targets, pop-ups that fit the screen */
@media (max-width: 1023px) {
    .no-modal-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
    .no-cart button.w-6.h-6 { width: 36px; height: 36px; }
    .no-pay-btn { min-height: 40px; padding-left: 14px; padding-right: 14px; font-size: 13px; }
    .no-place-order { min-height: 52px; font-size: 16px; }
    .no-menu-head kbd { display: none; }
    .no-topbar button { min-height: 40px; white-space: nowrap; }
    .no-topbar { flex-wrap: nowrap; overflow-x: auto; gap: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .no-topbar::-webkit-scrollbar { display: none; }
    .no-topbar > div { flex: none; }
    .no-menu-scroll { padding-bottom: 80px; }
    body.on-pos .fd-hamburger { right: auto; left: 16px; }   /* the cart's Place Order button sits at the bottom right */
}

/* tablets: menu and cart side by side, 58 / 42 */
@media (min-width: 768px) and (max-width: 1023px) {
    .no-left { width: 58%; }
    .no-cart { width: 42%; }
    .no-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .no-product-img { height: 120px; }
    .no-topbar { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }   /* two rows instead of hiding the waiter button */
}

/* phones: menu full width, the cart is a bottom sheet opened from a compact bar */
@media (max-width: 767px) {
    .no-split { display: block; height: 100vh; height: 100dvh; }
    .no-left { width: 100%; height: 100vh; height: 100dvh; }

    /* order type, table, waiter and reset scroll sideways in one row */
    .no-topbar { flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 8px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .no-topbar::-webkit-scrollbar { display: none; }
    .no-topbar > div { flex: none; }
    .no-topbar .group > span { display: none; }

    /* search and categories */
    .no-menu-head { padding: 8px 12px; }
    .no-menu-head input { font-size: 16px; min-height: 44px; }   /* 16px stops iOS zooming into the field */
    .no-arrow { display: none; }
    .no-menu-head .overflow-x-auto { scrollbar-width: none; -webkit-overflow-scrolling: touch; }

    /* products: two columns, room at the bottom for the cart bar */
    .no-menu-scroll { padding-left: 12px; padding-right: 12px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .no-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .no-product-img { height: 118px; }

    /* product options pop-up as a bottom sheet */
    .no-sheet-wrap { align-items: flex-end; }
    .no-sheet { width: 100%; max-height: 88vh; max-height: 88dvh; overflow-y: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .no-sheet > div:last-child > button { width: 100%; min-height: 48px; font-size: 16px; font-weight: 700; border-radius: 10px; }

    /* cart closed: only the bar is shown (the panel itself disappears from the layout) */
    .no-cart:not(.no-cart-open) { display: contents; }
    .no-cart:not(.no-cart-open) > :not(.no-minibar) { display: none; }
    .no-minibar { display: flex; align-items: center; gap: 10px; position: fixed; left: 12px; right: 76px; bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 30; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: #FFB30E; color: #111827;
        font-size: 15px; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .no-minibar-count { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; background: #111827; color: #fff; font-size: 13px; }
    .no-minibar-label { flex: 1; text-align: left; }

    /* cart open: full screen sheet with a close bar */
    .no-cart.no-cart-open { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 45; border-left: 0 !important; }
    .no-cart.no-cart-open > .no-minibar { display: none; }
    .no-cart.no-cart-open > .no-cart-close { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
        border-bottom: 1px solid var(--border-primary); font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .no-cart-close button { min-height: 44px; padding: 0 4px 0 16px; border: 0; background: none; color: #FFB30E; font-size: 15px; font-weight: 600; cursor: pointer; }
    .no-cart.no-cart-open .overflow-y-auto { -webkit-overflow-scrolling: touch; }
    body.on-pos .fd-hamburger { left: auto; right: 16px; }   /* phones: next to the cart bar */
    body.no-cart-sheet-open .fd-hamburger { display: none; }
}