/* DMM Theme: Rustic – warmes „Papier“, Leinen-Textur, Holzton über Primärfarbe */

:root {
    --dmm-nav-border: rgba(var(--primary-rgb), 0.22);
    --dmm-nav-fade-edge: var(--dmm-bg);
    --dmm-language-modal-bg: var(--dmm-bg);
    --dmm-bottom-menu-bg: var(--primary-color);
    --dmm-bottom-menu-color: #ffffff;
    --dmm-active-button-bg: var(--primary-color);
    --dmm-active-button-color: #ffffff;
    --dmm-inactive-button-bg: rgba(var(--primary-rgb), 0.12);
    --dmm-inactive-button-color: color-mix(in srgb, var(--dmm-titles-color) 92%, #000);
    --dmm-color-separator: rgba(var(--primary-rgb), 0.18);
    --dmm-skeleton-base-color: rgba(var(--primary-rgb), 0.22);
    --dmm-end-scroll-color: linear-gradient(90deg, transparent 0%, var(--dmm-nav-fade-edge) 100%);
    --dmm-motion-fast: 0.18s;
    --dmm-motion-soft: 0.26s;
}

@supports not (color: color-mix(in srgb, white, black)) {
    :root {
        --dmm-inactive-button-color: #3d2817;
    }
}

body {
    background-color: var(--dmm-bg);
    background-image:
        radial-gradient(ellipse 90% 55% at 20% 15%, rgba(255, 255, 255, 0.45), transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 75%, rgba(var(--primary-rgb), 0.08), transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(61, 40, 23, 0.045) 3px,
            rgba(61, 40, 23, 0.045) 4px
        ),
        linear-gradient(178deg, color-mix(in srgb, var(--dmm-bg) 70%, #fff) 0%, var(--dmm-bg) 55%, color-mix(in srgb, var(--dmm-bg) 88%, #000) 100%);
    background-attachment: fixed;
    color: var(--dmm-titles-color);
}

@supports not (color: color-mix(in srgb, white, black)) {
    body {
        background-image:
            radial-gradient(ellipse 90% 55% at 20% 15%, rgba(255, 255, 255, 0.45), transparent 55%),
            linear-gradient(178deg, #f5f0e8 0%, #e8dfd0 50%, #ddd5c5 100%);
    }
}

.menu-header {
    background: color-mix(in srgb, var(--dmm-bg) 94%, #fff);
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 2px 14px rgba(61, 40, 23, 0.1);
}

@supports not (color: color-mix(in srgb, white, black)) {
    .menu-header {
        background: rgba(245, 240, 232, 0.98);
    }
}

.menu-nav-link:hover {
    background: rgba(var(--primary-rgb), 0.12);
    transform: translateY(-1px);
}

.menu-nav-link {
    border-radius: 18px;
    transition: background var(--dmm-motion-fast) ease, color var(--dmm-motion-fast) ease, box-shadow var(--dmm-motion-soft) ease, transform var(--dmm-motion-fast) ease;
}

.menu-item {
    border-radius: 14px;
    background: color-mix(in srgb, var(--dmm-bg) 55%, #fff);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 6px 18px rgba(61, 40, 23, 0.08);
    transition: box-shadow var(--dmm-motion-soft) ease, transform var(--dmm-motion-fast) ease, border-color var(--dmm-motion-fast) ease;
}

@supports not (color: color-mix(in srgb, white, black)) {
    .menu-item {
        background: rgba(255, 255, 255, 0.55);
    }
}

.menu-item:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 10px 26px rgba(61, 40, 23, 0.12);
    transform: translateY(-1px);
}

.menu-item-price {
    border-radius: 16px;
}

@media (max-width: 767px) {
    .menu-nav-link {
        border-radius: 14px;
        font-weight: 560;
    }
    .menu-item-price {
        border-radius: 14px;
        letter-spacing: 0.01em;
        box-shadow: 0 2px 8px rgba(61, 40, 23, 0.2);
    }
}

.menu-category-description,
.menu-item-description {
    color: color-mix(in srgb, var(--dmm-titles-color) 68%, #5c4033);
}

@supports not (color: color-mix(in srgb, white, black)) {
    .menu-category-description,
    .menu-item-description {
        color: #5c4a3a;
    }
}

.filter-modal-content {
    background: color-mix(in srgb, var(--dmm-bg) 96%, #fff);
    color: var(--dmm-titles-color);
}

.filter-modal-header {
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.3);
}

.filter-modal-header h3 {
    color: var(--primary-color);
}

.menu-filter-btn {
    border: 2px solid rgba(var(--primary-rgb), 0.45);
    color: var(--dmm-titles-color);
}

.menu-footer {
    background: color-mix(in srgb, var(--dmm-bg) 92%, #fff);
    border-top: 2px solid rgba(var(--primary-rgb), 0.22);
}