﻿@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');

body {
    font-size: 14px;
}

:root {
    --background: 243.4deg 41.09% 25.29%;
    --foreground: 0 0% 100%;
    --card: 0 0% 100%;
    --card-foreground: 230.77deg 40.21% 19.02%;
    --primary: 197.97deg 100% 44.51%;
    --primary-foreground: 0 0% 100%;
    --cta: 152.18deg 68.75% 31.37%;
    --cta-foreground: 0 0% 100%;
    --border: 0deg 0% 86.67%;
    --input: 210 14% 89%;
    --radius: .5rem;

    --text-lg-size: 1rem;
    --text-xl-size: 1.25rem;
    --text-2xl-size: 1.5rem;
    --text-3xl-size: 1.75rem;
    --text-4xl-size: 2rem;
    --text-5xl-size: 2.25rem;
    --text-6xl-size: 2.5rem;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --primary: 197.97deg 100% 44.51%;
        --primary-foreground: 0 0% 100%;
        --cta: 152.18deg 68.75% 31.37%;
        --cta-foreground: 0 0% 100%;
    }

    .logo {
        filter: brightness(100);
    }
}

.bg-card .heading {
    --text-lg-size: 1rem;
    --text-xl-size: 1rem;
    --text-2xl-size: 1rem;
    --text-3xl-size: 1.25rem;
    --text-4xl-size: 1.5rem;
    --text-5xl-size: 1.75rem;
    --text-6xl-size: 2rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .5em;
}

.prose h4,
.prose h5,
.prose h6 {
    font-size: 1rem;
}

.prose h1+*,
.prose h2+*,
.prose h3+*,
.prose h4+*,
.prose h5+*,
.prose h6+* {
    margin-top: 0;
}

body {
    background-color: hsl(var(--background));
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.site-background {
    background-color: hsl(var(--background));
    background: linear-gradient(135deg, #d51f73, #29265b 50%, #2a2b5f 55%, #2e376c 65%, #305186 75%, #327ab1 90%, #3797d0);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -10;
    overflow: hidden;
}

strong {
    font-weight: bold;
}

.pagetitle-container .btn {
    --primary: 0 0% 100%;
}

.progress-stepper--step,
main .bg-card:not(.mobile-filter-bar):not(.progress-stepper--wrapper):not(.category-anchors):not(#summary-mobile):not(.rounded-full) {
    border-radius: var(--radius);
}

main .bg-card.offcanvas {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.btn {
    border-radius: 5px;
}

.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1em;
    margin-bottom: 1em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-bottom: 0;
}

.price.typography.text-2xl+.typography.text-xs {
    font-size: inherit;
    line-height: inherit;
}

/**
  ** Contact info
  **/
.contact-info a {
    font-weight: 700;
}

.contact-info .heading {
    text-transform: none;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

/**
 ** Product List
 **/
.product-list .product-item .more-information,
.product-list .product-item h4,
.product-list .product-item h5 {
    display: none;
}

.product-list .price small {
    display: inline;
}

.product-list .product-item {
    overflow: hidden;
}

.product-list .btn.bg-cta.text-xl {
    --text-xl-size: var(--text-base-size);
    --text-xl-line-height: var(--text-base-line-height);
}

/**
 ** Product Detail
 **/
.product-detail--html-description img {
    max-height: 350px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
}

.product-detail--html-description .col-text {
    display: none;
}

.product-detail--html-description .more-information>br:first-child {
    display: none;
}

/**
 ** Activity Container
 **/
.activity-container--start-time {
    border-radius: var(--radius);
    font-weight: 700;
}

.activity-container--selected-time {
    border-radius: 100rem;
}

/**
 ** Table Order
 **/
.category-anchors .bg-card.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1), 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 -1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color), 0 -1px 3px 0 var(--tw-shadow-color), 0 -1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.mobile-filter-bar {
    box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, .15) !important
}

#summary-mobile {
    box-shadow: 0 -1rem 1rem -1rem rgba(0, 0, 0, .15) !important
}
#summary-mobile .text-wrap.text-center.grow:not(:has(.typography.text-2xl.price)) {

    font-size: var(--text-2xl-size);

    line-height: 1;

    font-weight: 700;

}

#summary-mobile .text-wrap.text-center.grow:not(:has(.typography.text-2xl.price)) small {

    font-weight: 300;

    font-size: 14px;

}

.menu-list--item.selected {
    --card: var(--primary);
    --card-foreground: var(--primary-foreground);
}
.menu-list--item.selected .text-primary {
    --primary: var(--primary-foreground);
}

.menu-list--item.selected .prose {
    --tw-prose-body: --tw-prose-invert-body;
    --tw-prose-headings: --tw-prose-invert-headings;
    --tw-prose-lead: --tw-prose-invert-lead;
    --tw-prose-links: --tw-prose-invert-links;
    --tw-prose-bold: --tw-prose-invert-bold;
    --tw-prose-counters: --tw-prose-invert-counters;
    --tw-prose-bullets: --tw-prose-invert-bullets;
    --tw-prose-hr: --tw-prose-invert-hr;
    --tw-prose-quotes: --tw-prose-invert-quotes;
    --tw-prose-quote-borders: --tw-prose-invert-quote-borders;
    --tw-prose-captions: --tw-prose-invert-captions;
    --tw-prose-kbd: --tw-prose-invert-kbd;
    --tw-prose-kbd-shadows: --tw-prose-invert-kbd-shadows;
    --tw-prose-code: --tw-prose-invert-code;
    --tw-prose-pre-code: --tw-prose-invert-pre-code;
    --tw-prose-pre-bg: --tw-prose-invert-pre-bg;
    --tw-prose-th-borders: --tw-prose-invert-th-borders;
    --tw-prose-td-borders: --tw-prose-invert-td-borders;
}

.menu-list--item.selected .btn {
    --primary: var(--card-foreground);
    --primary-foreground: var(--card-foreground);
}

.menu-list--item.selected .bg-muted {
    --muted: var(--primary-foreground);
    background-color: hsl(var(--primary-foreground) / 25%);
}

.category-anchors--item button {
    border-radius: 100rem;
}

.menu-list--item br {
    display: none;
}

/**
 ** Btn Table Order
 **/
.btn-table-order {
    border: 3px solid hsl(var(--foreground));
    border-radius: var(--radius);
    padding: 1.25rem;
    max-width: 480px;
}

.btn-table-order:before {
    content: '';
    background: url('../Images/horeca.png');
    background-size: contain;
    display: block;
    margin: auto;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1 /1;
}

/**
 ** Upsell
 **/

.upsell-item--content br,
.upsell-item--content p:empty {
    display: none;
}

/**
 ** Blazor default components
 **/
#components-reconnect-modal {
    background: linear-gradient(135deg, rgba(213 31 115 / 90%), rgba(41 38 91 / 90%) 50%, rgba(42 43 95 / 90%) 55%, rgba(46 55 108 / 90%) 65%, rgba(48 81 134 / 90%) 75%, rgba(50 122 177 / 90%) 90%, rgba(55 151 208 / 90%));

    --card: transparent;
    --card-foreground: --foreground;
}

#components-reconnect-modal .bg-card {
    max-width: 480px;
    text-wrap: balance;
}

#components-reconnect-modal .bg-card .heading {
    --text-xl-size: 1.25rem;
    /* 20px */
    --text-2xl-size: 1.5rem;
    /* 24px */
}





/**
 ** TableOrder Category Icons
 **/

.mt-auto.aspect-square.flex.items-center {
    max-width: 80px;
    margin: 0 auto .5rem;
}
button.w-full.h-full.bg-card.text-card-foreground.p-3.flex.flex-col.relative.border-2.border-card .mt-auto:not(.typography) {
    max-width: 80px;
    margin: 0 auto 0.5rem;
    display: block;
}
button.w-full.h-full.bg-card.text-card-foreground.p-3.flex.flex-col.relative.border-2.border-card .mt-auto + * {
    margin: auto;
}