/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
    --white: #FFFFFF;
    --light-lilac-gray: #E9E7E9;
    --light-warm-beige: #E9E6DD;
    --soft-lilac-gray: #D9D1D9;
    --burnt-orange: #EB5528;
    --deep-teal: #074B4B;
    --near-black: #010101;
}

section {
    max-width: 2600px;
    margin: 0 auto;
}

.boxed {
    padding: 40px;
}

section .boxed {
    max-width: 1560px;
    margin: 0 auto;
}

body {
    background-image: url("assets/images/background.jpg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#page,
.site,
.site-header,
.site-main,
.site-content,
.inside-header,
.inside-site-info,
.footer-widgets,
.site-info,
.top-bar,
section,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .site-main,
.separate-containers .inside-right-sidebar,
.separate-containers .inside-left-sidebar,
.sidebar .widget,
.footer-widgets .widget,
.widget-area .widget,
.wp-block-group,
.wp-block-column,
.has-background,
.wp-block-group.has-background,
.wp-block-column.has-background {
    background-color: transparent !important;
}

.site-header > .inside-header {
    gap: 20px;
}

.inside-site-info {
    padding-bottom: 50px;
}

/* Fonts */
@font-face {
    font-family: Inter-400;
    src: url('assets/fonts/Inter_18pt-Regular.ttf');
}

@font-face {
    font-family: Inter-600;
    src: url('assets/fonts/Inter_18pt-SemiBold.ttf');
}

@font-face {
    font-family: Inter-700;
    src: url('assets/fonts/Inter_18pt-Bold.ttf');
}

@font-face {
    font-family: Oswald-700;
    src: url('assets/fonts/Oswald-Bold.ttf');
}

@font-face {
    font-family: PlayfairDisplay-600;
    src: url('assets/fonts/PlayfairDisplay-SemiBold.ttf');
}


/* Buttons */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.btn-group:has(.btn-primary) {
    gap: 66px;
}

.btn {
    color: var(--white);
    font-family: Inter-400, sans-serif;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    max-width: fit-content;
    height: fit-content;
    padding: 13px 26px;
}

.btn-primary {
    position: relative;
    background-color: var(--burnt-orange);
    color: var(--white);
}

.btn-primary::after {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    right: -50px;
    background-image: url("assets/images/white-arrow.svg");
    background-color: var(--burnt-orange);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 16px;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover::after,
.btn-primary:active::after,
.btn-primary:focus::after {
    background-color: var(--deep-teal);
    color: var(--white);
}

.btn-secondary {
    background-color: var(--deep-teal);
    color: var(--light-lilac-gray);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: var(--burnt-orange);
    color: var(--white);
}

h1, h2 {
    color: var(--light-lilac-gray);
    font-family: Oswald-700, sans-serif;
    font-size: 60px;
    line-height: 64px;
    text-transform: uppercase;
}

p, a, li {
    color: var(--light-lilac-gray);
    font-family: Inter-400, sans-serif;
    font-size: 18px;
    line-height: 26px;
}

p > span {
    font-size: 70px !important;
    line-height: 64px !important;
    font-style: italic;
    font-family: PlayfairDisplay-600, sans-serif !important;
    padding-right: 5px;
}

/* Nav */
.inside-header {
    padding: 40px;
}

nav.main-navigation {
    background: transparent !important;
}

nav.main-navigation > .inside-navigation {
    position: relative;
    padding: 8px 7px 8px 30px;
    border-radius: 60px;
    background: transparent !important;
    isolation: isolate;
    z-index: 0;
    overflow: visible;
}

nav.main-navigation > .inside-navigation::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 42px;
    background: linear-gradient(90deg, #00E2EE, #FF6436, #00E2EE);
    background-size: 200% 100%;
    filter: blur(4px);
    opacity: 0.6;
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

nav.main-navigation > .inside-navigation:hover::before {
    animation: gradientMove 3s linear infinite;
    opacity: 0.9;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

nav.main-navigation > .inside-navigation::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 60px;
    background: var(--deep-teal);
    z-index: -1;
    pointer-events: none;
}

nav.main-navigation > .inside-navigation ul li a {
    color: var(--light-lilac-gray);
    font-family: Inter-600, sans-serif;
    font-size: 18px;
    line-height: 26px;
    padding-left: 15px;
    padding-right: 15px;
}

nav.main-navigation > .inside-navigation ul li:hover a,
nav.main-navigation > .inside-navigation ul li.current-menu-item a,
.site-footer .widget ul li:hover a,
.site-footer .widget a:hover {
    color: var(--burnt-orange) !important;
}

nav.main-navigation > .inside-navigation ul li.nav-btn {
    margin-left: 10px;
}

nav.main-navigation > .inside-navigation ul li.nav-btn a {
    border-radius: 32px;
    background: var(--burnt-orange);
    color: var(--white);
    padding: 17px 30px;
}

nav.main-navigation > .inside-navigation ul li.nav-btn:hover a,
nav.main-navigation > .inside-navigation ul li.nav-btn:active a,
nav.main-navigation > .inside-navigation ul li.nav-btn:focus a,
nav.main-navigation > .inside-navigation ul li.nav-btn:not([class*="current-menu-"]):focus:hover a{
    background-color: var(--light-lilac-gray);
    color: var(--deep-teal) !important;
}

/* Footer */
.footer-container .boxed.footer-inner-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1480px;
    margin: 0 auto 120px auto;
    background-image: url("/wp-content/themes/generatepress_child/assets/images/footer-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 12px;
    padding: 90px 40px 40px 40px;
}

.footer-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-settings .heading {
    max-width: 670px;
    text-align: center;
}

.footer-settings .heading,
.footer-settings .content > *:last-child {
    margin-bottom: 0;
}

.footer-settings .btn-group .btn.btn-secondary {
    background: var(--light-lilac-gray);
    color: var(--near-black);
}

.footer-settings .btn-group .btn.btn-secondary:hover {
    background: var(--burnt-orange);
    color: var(--white);
}

.site-footer {
    border-radius: 12px;
    background: rgba(13, 47, 46, 0.60);
}

.site-footer .footer-widgets-container .inside-footer-widgets {
    display: grid;
    grid-template-columns: 5fr 1fr 1fr;
}

.site-footer .footer-widgets-container .inside-footer-widgets .footer-widget-1 > aside {
    max-width: 400px;
}

.site-footer .footer-widgets-container .inside-footer-widgets .wp-block-social-links > li {
    border-radius: 4px;
    background: var(--burnt-orange);
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer .footer-widgets-container .inside-footer-widgets .wp-block-social-links > li:hover {
    background-color: var(--white);
}

.site-footer .footer-widgets-container .inside-footer-widgets .wp-block-social-links > li a svg {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
}

.site-footer .footer-widgets-container .inside-footer-widgets .wp-block-social-links > li.wp-social-link-tiktok a svg {
    width: 28px;
    height: 28px;
    aspect-ratio: 1/1;
}

.site-footer .footer-widgets-container .inside-footer-widgets h2 {
    color: #E9E7E9;
    font-family: Inter-400, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-transform: none;
    margin-bottom: 12px;
}

.site-footer .footer-widgets-container .inside-footer-widgets .footer-widget-3 aside:first-of-type {
    margin-bottom: 0;
}

.site-footer .footer-widgets-container .inside-footer-widgets * {
    text-decoration: none;
}

.copyright-bar {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 40px;
    width: 100%;
}

.copyright-bar * {
    font-family: Inter-400, sans-serif;
    font-size: 14px;
    line-height: normal;
    color: var(--light-lilac-gray);
}

.copyright-bar .links {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.copyright-bar .links a {
    text-decoration: none;
}

.copyright-bar .links a:hover {
    color: var(--burnt-orange);
}

.copyright-bar .made-by > a {
    text-decoration: none;
    color: var(--burnt-orange);
}

@media (max-width: 1560px) {
    .footer-container .boxed.footer-inner-container {
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media (max-width: 1050px) {
    .site-header .header-image {
        width: 177px;
    }
}

@media (max-width: 900px) {
    .site-footer .footer-widgets-container .inside-footer-widgets {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 768px) {
    .boxed {
        padding: 40px 20px;
    }

    .footer-container .boxed.footer-inner-container {
        margin-left: 20px;
        margin-right: 20px;
    }

    html:not(.mobile-menu-open) nav.main-navigation > .inside-navigation::before,
    html:not(.mobile-menu-open) nav.main-navigation > .inside-navigation::after,
    html:not(.mobile-menu-open) nav.main-navigation > .inside-navigation {
        display: none;
    }
    .inside-header {
        padding: 20px 40px 0 40px;
    }

    nav.main-navigation > .inside-navigation::after {
        border-radius: 40px;
    }
    nav.main-navigation > .inside-navigation {

        padding: 40px 30px;
    }
    .main-navigation.toggled .main-nav li {
        margin-bottom: 10px;
    }
    nav.main-navigation > .inside-navigation ul li.nav-btn a {
        max-width: fit-content;
        margin-top: 10px;
    }

    .menu-toggle {
        color: var(--burnt-orange) !important;
        font-size: 25px !important;
    }
    .site-header .header-image {
        width: 170px;
        position: relative;
        z-index: 1000;
    }
    h1, h2 {
        font-size: 50px;
        line-height: 55px;
    }
    body:has(.entry-content > .hero:first-child) .entry-content > .hero:first-child {
        margin-top: 0;
    }

    body:has(.entry-content > .hero:first-child) .site-header,
    body:has(.entry-content > .hero:first-child) #site-navigation {
        position: absolute !important;
    }

    body:has(.entry-content > .hero:first-child) .site-header {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 40;
    }

    body:has(.entry-content > .hero:first-child) #site-navigation {
        left: 0;
        right: 0;
        top: 0;
        z-index: 45;
        margin-left: 20px;
        margin-right: 20px;
    }
    nav.main-navigation > .inside-navigation {
        padding: 100px 30px 40px 30px;
    }

    header .inside-header {
        padding-top: 40px;
    }
}


@media (max-width: 600px) {
    .btn-group {
       flex-direction: column;
    }

    .btn-group:has(.btn-primary) {
        gap: 20px;
    }
    .copyright-bar {
        flex-direction: column;
    }
    .footer-settings {
        align-items: start;
    }
    .site-popup__content .heading {
        display: none;
    }
    .site-popup__panel {
        padding: 48px 15px !important;
    }
    .site-popup__form textarea#wpforms-183-field_2,
    div.formulier textarea#wpforms-183-field_2 {
        height: 100px !important;
        min-height: 100px !important;
    }
}
@media (max-width: 400px) {
h1, h2 {
    font-size: 45px;
    line-height: 50px;
}
}

#reserveren {
    max-width: 600px;
    margin: 0 auto;
}



.popup-open {
    overflow: hidden;
}

.site-popup {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: fixed;
    transition: opacity .2s ease;
    z-index: 99999;
}

.site-popup.is-open {
    opacity: 1;
    pointer-events: auto;
}

.site-popup__backdrop {
    background: rgba(1, 1, 1, 0.72);
    inset: 0;
    position: absolute;
}

.site-popup__panel {
    background: var(--deep-teal);
    border-radius: 24px;
    isolation: isolate;
    max-width: 640px;
    padding: 48px 32px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.site-popup__panel::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 28px;
    background: linear-gradient(90deg, #00E2EE, #FF6436, #00E2EE);
    background-size: 200% 100%;
    filter: blur(4px);
    opacity: 0.75;
    z-index: -2;
    pointer-events: none;
}

.site-popup__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--deep-teal);
    z-index: -1;
    pointer-events: none;
}

.site-popup__close {
    background: transparent;
    border: 0;
    color: var(--light-lilac-gray);
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    position: absolute;
    right: 6px;
    top: 1px;
}

.site-popup__close:hover {
	background: transparent;
}

.site-popup__content p {
    margin: 0;
}

.site-popup__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 20px;
    max-height: 75vh;
    overflow-y: scroll;
}

.site-popup__content .heading {
    margin-bottom: 0;
}

.site-popup__content .heading p{
    color: var(--light-lilac-gray);
    font-family: Oswald-700, sans-serif;
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.site-popup__content .content a {
    color: var(--burnt-orange);
    text-decoration: none;
}

.site-popup__content .content a:hover {
    color: var(--light-warm-beige);
}

.site-popup__content .heading > *:first-child,
.site-popup__content .content > *:first-child {
    margin-top: 0;
}

.site-popup__content .heading > *:last-child,
.site-popup__content .content > *:last-child {
    margin-bottom: 0;
}

.site-popup__content .btn-group {
    margin-top: 8px;
}

.site-popup__form,
div.formulier {
    margin-top: 8px;
}

.site-popup__form .wpforms-container,
div.formulier .wpforms-container {
    margin: 0;
}

.site-popup__form .wpforms-field-container,
div.formulier .wpforms-field-container {
    gap: 18px;
}

.site-popup__form .wpforms-field-container .wpforms-layout-row,
div.formulier .wpforms-field-container .wpforms-layout-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.site-popup__form .wpforms-field-container .wpforms-layout-row *,
div.formulier .wpforms-field-container .wpforms-layout-row * {
   width: 100% !important;
}

.site-popup__form .wpforms-datepicker-wrap,
.site-popup__form .flatpickr-wrapper,
div.formulier .wpforms-datepicker-wrap,
div.formulier .flatpickr-wrapper {
    width: 100% !important;
}

.site-popup__form .wpforms-field-label,
div.formulier .wpforms-field-label {
    display: block !important;
    color: var(--light-lilac-gray) !important;
    font-family: 'Inter-600', sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    margin-bottom: 10px !important;
}

.site-popup__form .wpforms-field-label .wpforms-required-label,
div.formulier .wpforms-field-label .wpforms-required-label {
    color: var(--burnt-orange) !important;
}

.site-popup__form input,
.site-popup__form textarea,
.site-popup__form select,
div.formulier input,
div.formulier textarea,
div.formulier select,
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
    background: rgba(233, 231, 233, 0.08) !important;
    border: 1px solid rgba(233, 231, 233, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: var(--light-lilac-gray) !important;
    font-family: Inter-400, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    min-height: 56px !important;
    padding: 16px 18px !important;
    width: 100% !important;
}

.site-popup__form .wpforms-one-half,
.site-popup__form .wpforms-one-third,
.site-popup__form .wpforms-two-thirds,
div.formulier .wpforms-one-half,
div.formulier .wpforms-one-third,
div.formulier .wpforms-two-thirds {
    width: auto !important;
}

.site-popup__form textarea,
div.formulier textarea {
    min-height: 140px !important;
    resize: vertical;
}

.site-popup__form input::placeholder,
.site-popup__form textarea::placeholder,
div.formulier input::placeholder,
div.formulier textarea::placeholder {
    color: rgba(233, 231, 233, 0.6) !important;
}

.site-popup__form input:focus,
.site-popup__form textarea:focus,
.site-popup__form select:focus,
div.formulier input:focus,
div.formulier textarea:focus,
div.formulier select:focus {
    border-color: var(--burnt-orange) !important;
    outline: none !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {
    color: white;
}

.site-popup__form .wpforms-submit-container,
div.formulier .wpforms-submit-container {
    margin-top: 24px !important;
    padding: 0 !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full p {
    color: white;
}


.site-popup__form button[type="submit"],
div.formulier button[type="submit"] {
    background: var(--burnt-orange) !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: var(--white) !important;
    font-family: Inter-600, sans-serif !important;
    font-size: 16px !important;
    line-height: 10px !important;
    padding: 16px 26px !important;
    transition: background-color .15s ease-in-out !important;
}

.site-popup__form button[type="submit"]:hover,
.site-popup__form button[type="submit"]:focus,
div.formulier button[type="submit"]:hover,
div.formulier button[type="submit"]:focus {
    background: #973716 !important;
}

.site-popup__form .wpforms-error,
div.formulier .wpforms-error {
    color: #ffd0c2 !important;
    font-family: Inter-400, sans-serif !important;
}

.site-popup__form .wpforms-confirmation-container,
.site-popup__form .wpforms-confirmation-scroll,
div.formulier .wpforms-confirmation-container,
div.formulier .wpforms-confirmation-scroll {
    background: rgba(233, 231, 233, 0.08) !important;
    border: 1px solid rgba(233, 231, 233, 0.2) !important;
    border-radius: 16px !important;
    color: var(--light-lilac-gray) !important;
    padding: 18px 20px !important;
}

/* Flatpickr datepicker in popup - past in kader, leesbaar */
.site-popup .wpforms-datepicker-wrap,
.site-popup .flatpickr-wrapper {
    overflow: visible !important;
}

.site-popup .flatpickr-calendar {
    background: var(--deep-teal) !important;
    border: 1px solid rgba(233, 231, 233, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    overflow: visible !important;
    transform-origin: top center !important;
    z-index: 100000 !important;
}

.site-popup .flatpickr-calendar.flatpickr-static {
    width: 100% !important;
}

.site-popup .flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
}

.site-popup .flatpickr-calendar .flatpickr-day {
    box-sizing: border-box !important;
}

.site-popup .flatpickr-calendar .flatpickr-months {
    background: var(--deep-teal) !important;
    min-height: 50px !important;
    overflow: visible !important;
    padding: 12px 8px 16px !important;
}

.site-popup .flatpickr-calendar .flatpickr-month {
    overflow: visible !important;
}

.site-popup .flatpickr-calendar .flatpickr-current-month {
    overflow: visible !important;
    width: 60% !important;
}

.site-popup .flatpickr-calendar .flatpickr-current-month,
.site-popup .flatpickr-calendar .flatpickr-current-month .cur-month,
.site-popup .flatpickr-calendar .flatpickr-current-month input.cur-year,
.site-popup .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months {
    color: var(--light-lilac-gray) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

.site-popup .flatpickr-calendar select.flatpickr-monthDropdown-months {
    background: rgba(233, 231, 233, 0.1) !important;
    border: 1px solid rgba(233, 231, 233, 0.3) !important;
    border-radius: 8px !important;
    color: var(--light-lilac-gray) !important;
    max-width: 120px !important;
    padding: 4px 8px !important;
}

.site-popup .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    max-width: 4ch !important;
}

/* Maand pijlen - links en rechts, niet overlappen */
.site-popup .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
    left: 0 !important;
    right: auto !important;
    padding: 8px 12px !important;
    top: 0 !important;
}

.site-popup .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    left: auto !important;
    right: 0 !important;
    padding: 8px 12px !important;
    top: 0 !important;
}

.site-popup .flatpickr-calendar .flatpickr-prev-month svg,
.site-popup .flatpickr-calendar .flatpickr-next-month svg {
    fill: var(--light-lilac-gray) !important;
    height: 18px !important;
    width: 18px !important;
}

.site-popup .flatpickr-calendar .flatpickr-prev-month:hover svg,
.site-popup .flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: var(--burnt-orange) !important;
}

.site-popup .flatpickr-calendar span.flatpickr-weekday,
.site-popup .flatpickr-calendar .flatpickr-day {
    color: var(--light-lilac-gray) !important;
}

.site-popup .flatpickr-calendar .flatpickr-day:hover,
.site-popup .flatpickr-calendar .flatpickr-day:focus {
    background: rgba(233, 231, 233, 0.2) !important;
}

.site-popup .flatpickr-calendar .flatpickr-day.selected,
.site-popup .flatpickr-calendar .flatpickr-day.startRange,
.site-popup .flatpickr-calendar .flatpickr-day.endRange {
    background: var(--burnt-orange) !important;
    color: var(--white) !important;
}

.site-popup .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.site-popup .flatpickr-calendar .flatpickr-day.prevMonthDay,
.site-popup .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: rgba(233, 231, 233, 0.4) !important;
}

/* Tijd lijst dropdown - 15 min stappen, aanklikbaar */
.site-popup .time-list-wrap {
    position: relative;
}

.site-popup .time-list-dropdown {
    display: none;
    background: var(--deep-teal);
    border: 1px solid rgba(233, 231, 233, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 100001;
}

.site-popup .time-list-dropdown.is-open {
    display: block;
}

.site-popup .time-list {
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.site-popup .time-list-item {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--light-lilac-gray);
    cursor: pointer;
    font-family: Inter-400, sans-serif;
    font-size: 16px;
    padding: 10px 14px;
    text-align: left;
    transition: background-color 0.15s ease;
}

.site-popup .time-list-item:hover {
    background: rgba(233, 231, 233, 0.15);
}


.wpforms-container .wpforms-datepicker-wrap .wpforms-datepicker-clear,
.wpforms-container .wpforms-datepicker-wrap .wpforms-datepicker-clear:hover {
    background-color: transparent !important;
}

.wpforms-field-description {
	color: var(--white) !important;
	font-size: 14px;
}

.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field {
    padding: 8px 0 !important;
}

.site-popup .site-popup__content::-webkit-scrollbar {
    width: 8px;
}

.site-popup .site-popup__content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 12px;
}

.site-popup .site-popup__content::-webkit-scrollbar-thumb {
    background: var(--burnt-orange);
    border-radius: 10px;
}

.site-popup .site-popup__content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.site-popup__content {
    position: relative;
}

.site-popup__scroll-hint {
    position: absolute;
    bottom: 3px;
	left: 24%;
    color: var(--white);
    text-align: center;
    font-size: 14px;
    padding: 10px;
}


@media (max-width: 520px) {
    .site-popup .flatpickr-calendar.flatpickr-static {
        transform: scale(0.9) !important;
    }
	.site-popup .site-popup__content{
	    max-height: 65vh;
	}
	.site-popup__scroll-hint {
	left: 0;
	}
}

@media (max-width: 480px) {
    .site-popup__form .wpforms-layout-row .wpforms-layout-column,
    div.formulier .wpforms-layout-row .wpforms-layout-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .site-popup .flatpickr-calendar.flatpickr-static {
        transform: scale(0.85) !important;
    }
	.site-popup__form .wpforms-field-container .wpforms-layout-row, div.formulier .wpforms-field-container .wpforms-layout-row {
		flex-direction: column;
		margin-bottom: 0;
	}
}

@media (max-width: 380px) {
    .site-popup {
        align-items: flex-start;
        padding: 16px;
    }

    .site-popup__panel {
        margin-top: 16px;
        max-height: calc(100vh - 32px);
        padding: 44px 20px;
    }

    .site-popup .flatpickr-calendar .flatpickr-day {
        font-size: 13px !important;
        height: 34px !important;
        line-height: 34px !important;
        max-width: 34px !important;
    }
}

.site-popup .site-popup__content .wpforms-container .wpforms-datepicker-wrap .wpforms-datepicker-clear,
.site-popup .site-popup__content .wpforms-container .wpforms-datepicker-wrap .wpforms-datepicker-clear:hover {
	background-color: transparent !important;
}

.site-popup .site-popup__content div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {
	color: var(--white) !important;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

.flatpickr-day.selected {
	background: var(--burnt-orange) !important;
    border-color: var(--burnt-orange) !important;
}