/* Start Custom Fonts CSS */
@font-face {
    font-family: 'Wavehaus';
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('../fonts/wavehaus-128bold-webfont.woff2') format('woff2'), url('../fonts/wavehaus-128bold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Wavehaus';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('../fonts/wavehaus-66book-webfont.woff2') format('woff2'), url('../fonts/wavehaus-66book-webfont.woff') format('woff');
}

body {
    font-family: "Wavehaus", Sans-serif;
    line-height: 1.3;
}

.product-detail--html-description .col-text {
    display: none;
}

/* End Custom Fonts CSS */

/* 
#e5a72e - Primary - Gold 
HSL(38.74, 78.10%, 54.71%)

#0b7377 - Secondary - Green 
HSL(182.79, 85.25%, 26.27%)

#91269c - Bowlen - Purple 
HSL(296.32, 61.08%, 38.24%)

#ff7545 - Prison Island - Orange 
HSL(14.84, 100.00%, 63.53%)

#ff35ae - Crazy Golf - Pink 
HSL(325.18, 100.00%, 60.59%)

#ffd101 - Karaoke - Yellow 
HSL(49.93, 100.00%, 57.84%)

#38deff - Game Strip - Blue 
HSL(190.59, 100.00%, 60.20%)

#6df993 - Escape Room - Light Green 
HSL(143.40, 92.52%, 70.20%)

#f8efd6 - Arcade - White 
HSL(44.21, 72.73%, 89.61%)

#e83f4c - Laser Tag - Red 
HSL(354.66, 77.83%, 58.04%)

#EF233C - Valentine - red
hsl(353, 86%, 54%)

*/


:root {
    --primary-1: 38.74 78.10% 54.71%; /* GOLD */
    --primary-1-foreground: 44.21 72.73% 89.61%;
    --primary-2: 182.79 85.25% 26.27%; /* Green */
    --primary-2-foreground: 44.21 72.73% 89.61%;
    --bowlen: 296.32 61.08% 38.24%; /* PURPLE */
    --bowlen-foreground: 44.21 72.73% 89.61%;
    --prison-island: 14.84 100.00% 63.53%; /* ORANGE */
    --prison-island-foreground: 44.21 72.73% 89.61%;
    --crazy-golf: 325.18 100.00% 60.59%; /* PINK */
    --crazy-golf-foreground: 44.21 72.73% 89.61%;
    --karaoke: 49.93 100.00% 57.84%; /* YELLOW */
    --karaoke-foreground: 182.22 83.08% 25.49%;
    --game-strip: 190.59 100.00% 60.20%; /* BLUE */
    --game-strip-foreground: 0 0% 100%;
    --escape-room: 143.40 92.52% 70.20%; /* LIGHT GREEN */
    --escape-room-foreground: 182.22 83.08% 25.49%;
    --arcade: 44.21 72.73% 89.61%; /* WHITE */
    --arcade-foreground: var(--primary-2);
    --lasertag: 354.66 77.83% 58.04%; /* RED */
    --lasertag-foreground: 44.21 72.73% 89.61%;
    --valentine-red: 353 86% 54%;
    -- valentine-foreground: 44.21 72.73% 89.61%;

    --background: 182.79 85.25% 0%;
    --foreground: 44.21 72.73% 89.61%;
    --card: var(--primary-2);
    --card-foreground: var(--primary-2-foreground);
    --primary: var(--primary-1);
    --primary-foreground: var(--primary-1-foreground);
    --cta: var(--prison-island);
    --cta-foreground: var(--prison-island-foreground);
    --border: 182 83% 15%;
    --input: 44 71% 91%;

    --success: 136 92% 70%;
    --success-foreground: 0 0% 0%;
    --warning: 49 100% 50%;
    --warning-foreground: 0 0% 0%;
    --error: 355deg 79% 58%;
    --error-foreground: 44.21 72.73% 89.61%;
    --info: 190 100% 61%;
    --info-foreground: 0 0% 0%;

    --accent: 182.22 83.08% 20.49%;
    --accent-foreground: 44 71% 91%;
    --muted: 182.22 83.08% 20.49%;
    --muted-foreground: 44 71% 91%;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --background: 182 83% 5%;
        --foreground: 44 71% 91%;
        --card: 182 83% 8%;
        --card-foreground: 44 71% 91%;
        --border: 44 71% 91%;
        --input: 44 71% 91%;
    }
}

.site-background {
    background: url(../Images/bg-640.jpg);
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -10;
    overflow: hidden;
    opacity: .4;
}
@media (min-width: 641px) {
    .site-background {
        background-image: url(../Images/bg-768.jpg);
    }
}
@media (min-width: 769px) {
    .site-background {
        background-image: url(../Images/bg-1024.jpg);
    }
}
@media (min-width: 1025px) {
    .site-background {
        background-image: url(../Images/bg-1280.jpg);
    }
}
@media (min-width: 1281px) {
    .site-background {
        background-image: url(../Images/bg.jpg);
    }
}

.product-item--cta {
    --primary: var(--card-foreground);
    --primary-foreground: var(--card);
}

#product_384,
#product_580,
#product_439,
#product_379,
#product_764,
#product_2443 {
    --card: var(--bowlen);
    --card-foreground: var(--bowlen-foreground);
    --primary: var(--bowlen-foreground);
    --primary-foreground: var(--bowlen);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}
#product_444,
#product_446,
#product_445,
#product_447,
#product_583,
#product_769,
#product_1003,
#product_2108 {
    --card: var(--prison-island);
    --card-foreground: var(--prison-island-foreground);
    --primary: var(--prison-island-foreground);
    --primary-foreground: var(--prison-island);
    --cta: var(--primary-2);
    --cta-foreground: var(--primary-2-foreground);
    --border: var(--card-foreground);
    --input: var(--card-foreground);

    .btn.bg-cta:hover {
        --cta: var(--prison-island-foreground);
        --cta-foreground: var(--primary-2);
    }
}
#product_440,
#product_441,
#product_443,
#product_770 {
    --card: var(--crazy-golf);
    --card-foreground: var(--crazy-golf-foreground);
    --primary: var(--crazy-golf-foreground);
    --primary-foreground: var(--crazy-golf);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}
#product_386,
#product_585,
#product_579,
#product_385,
#product_578,
#product_584,
#product_768,
#product_2004,
#product_2005,
#product_2003,
#product_1963,
#product_2163 {
    --card: var(--karaoke);
    --card-foreground: var(--karaoke-foreground);
    --primary: var(--karaoke-foreground);
    --primary-foreground: var(--karaoke);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}
#product_803,
#product_1063,
#product_2444 {
    --card: var(--game-strip);
    --card-foreground: var(--game-strip-foreground);
    --primary: var(--game-strip-foreground);
    --primary-foreground: var(--game-strip);
    --cta: var(--primary-2);
    --cta-foreground: var(--primary-2-foreground);
    --border: var(--card-foreground);
    --input: var(--card-foreground);

    .btn.bg-cta:hover {
        --cta: var(--game-strip-foreground);
        --cta-foreground: var(--primary-2);
    }
}
#product_387,
#product_577 {
    --card: var(--escape-room);
    --card-foreground: var(--escape-room-foreground);
    --primary: var(--escape-room-foreground);
    --primary-foreground: var(--escape-room);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}
#product_643,
#product_644 {
    --card: var(--arcade);
    --card-foreground: var(--arcade-foreground);
    --primary: var(--arcade-foreground);
    --primary-foreground: var(--arcade);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}

#product_1404,
#product_1463,
#product_1464,
#product_1465,
#product_1466 ,
#product_1467{
    --card: var(--valentine-red);
    --card-foreground: var(--valentine-foreground);
    --primary: var(--valentine-foreground);
    --primary-foreground: var(--valentine);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}

#product_TEMP /*TEMP*/ {
    --card: var(--lasertag);
    --card-foreground: var(--lasertag-foreground);
    --primary: var(--lasertag-foreground);
    --primary-foreground: var(--lasertag);
    --border: var(--card-foreground);
    --input: var(--card-foreground);
}

.calendar {
    --muted-foreground: var(--card-foreground);
}

input[type=checkbox]:checked {
    background-color: hsl(var(--cta));
    border-color: hsl(var(--input));
}

.product-detail--html-description,
.product-list .product-item,
#sidebar .category-filter,
#sidebar .summary-wrapper > .bg-card,
#sidebar #reservation-summary > .bg-card,
.lg\:container > .bg-card,
.upsell-item,
#activities-container > .bg-card,
.activity-container {
    box-shadow: 0 0 5px 5px hsl(var(--card));
}

.product-item--image img {
    border-radius: var(--radius);
    margin: .75rem;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    object-fit: cover;
}

ul.menu-list > li > button {
    align-items: center;
}

.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);
}

.product-list .product-item {
    overflow: hidden;
}

#summary-mobile {
    box-shadow: 0 -1rem 1rem -1rem rgba(0, 0, 0, .35) !important;
}

main .bg-card.offcanvas {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.alert,
ul.validation-errors {
    color: hsl(var(--error-foreground));
    background-color: hsl(var(--error) / 0.7);
    border: 3px solid hsl(var(--error));
    border-radius: 4px;
}


.logo {
    max-height: 100px;
    height: 100px;
}

.progress-stepper--wrapper {
    --card: 182 83% 23.5%;
}

.activity-container--start-time {
    border-radius: 6px;
}
.activity-container--start-time[title*="Freddy"] {
    --card: var(--escape-room);
    --card-foreground: var(--escape-room-foreground);
}
.activity-container--start-time[title*="Dukebox"] {
    --card: var(--prison-island);
    --card-foreground: var(--prison-island-foreground);
}
.activity-container--start-time[title*="Candyland"] {
    --card: var(--crazy-golf);
    --card-foreground: var(--crazy-golf-foreground);
}
.activity-container--start-time:has(small) {
    background: hsl(var(--karaoke));
    border-color: hsl(var(--karaoke-foreground));
    color: hsl(var(--karaoke-foreground));
    font-weight: bold;
}

.pagetitle-container .heading {
    color: hsl(var(--primary));
}

.e-btn,
.btn,
.btn.bg-cta {
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
}
.btn.bg-cta {
    outline-offset: 3px !important;
    outline-width: 3px !important;
    outline-color: hsl(var(--cta)) !important;
    outline-style: solid !important;
    margin: 4px;
    text-transform: uppercase;
    padding: 4px 6px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.btn.bg-cta:hover {
    --cta: var(--game-strip);
    --cta-foreground: var(--game-strip-foreground);
}

.typography.heading {
    font-weight: 700;
}

.product-list .price small {
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-line-height);
    font-weight: 300;
    display: block;
}

/**
 ** Product List
 **/
 .product-list .product-item .more-information,
 .product-list .product-item h4 {
     display: none;
 }
 .product-list .price br {
     display: none;
 }
 .product-list .prose br:last-child {
     display: none;
 }


 /**
  ** Product detail
  **/
 .product-detail--html-description  .activiteiten-content > *:first-child {
     margin-top: 0;
 }
 .product-detail--html-description img {
     max-height: 350px;
     width: 100%;
     object-fit: cover;
     object-position: center;
     margin-bottom: 1em;
     border-radius: var(--radius);
 }

/*
 * Footer
 */
.footer--container {
    background-color: #000;
    color: #fff;
}
.footer--content {
    display: grid;
    gap: 18px;
    align-items: center;
}
.footer--content a {
    color: hsl(var(--primary));
    transition: color 300ms ease 0ms;
}
.footer--content a:hover {
    color: inherit;
}
.footer--content .social-links {
    display: flex;
    gap: 8px;
}
.footer--content .social-links a {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 3px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.footer--content .social-links a:hover {
    color: #000;
}
.footer--content img {
    max-height: 32px;
    width: auto;
}
.footer--content .social-links a span {
    display: none;
}
.footer--content table {
    width: 100%;
    text-align: left;
}
.footer--content .heading {
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 480px) {
    .footer--content {
        grid-template-columns: 152px 1fr;
    }

    .footer--content > *:last-child {
        grid-column: 1 / span 2;
    }
}

@media screen and (min-width: 768px) {
    .footer--content {
        grid-template-columns: 152px 173px 1fr;
    }

    .footer--content > *:last-child {
        grid-column: auto;
    }

    .footer--content > div:last-child {
        text-align: right;
    }
}