.elementor-2024 .elementor-element.elementor-element-71bd9e88{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2024 .elementor-element.elementor-element-71bd9e88.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2024 .elementor-element.elementor-element-33c86af{text-align:center;color:#967D48;}.elementor-2024 .elementor-element.elementor-element-3e28ba6{--divider-border-style:solid;--divider-color:#967D48;--divider-border-width:3px;}.elementor-2024 .elementor-element.elementor-element-3e28ba6 .elementor-divider-separator{width:100%;}.elementor-2024 .elementor-element.elementor-element-3e28ba6 .elementor-divider{padding-block-start:25px;padding-block-end:25px;}/* Start custom CSS *//* =========================================================
   Five Star Restaurant Reservations — Paviljoen de Leine
   Versie 4: volledige herschrijving
   - Fix: witte tekst tijdens typen (autofill -webkit-text-fill-color)
   - Fix: lichtblauwe achtergrond op selects/inputs (autofill inset shadow)
   - Custom dropdown-pijl in accent-kleur
   - Consistent forceren van tekst- en achtergrondkleur
   Plak in: Elementor → Pagina-instellingen → Extra CSS
   ========================================================= */

:root {
    --rtb-accent: #967D48;
    --rtb-accent-hover: #7d6839;
    --rtb-accent-soft: rgba(150, 125, 72, 0.15);
    --rtb-primary: #1D2327;
    --rtb-input-bg: #ffffff;
    --rtb-input-border: #a89c80;
    --rtb-text: #1D2327;
    --rtb-text-muted: #6b7378;
    --rtb-radius: 3px;
}

/* =========================================================
   WRAPPERS
   ========================================================= */

.rtb-booking-form-wrapper,
[class*="wp-block-restaurant"] {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rtb-booking-form {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    background: transparent;
    padding: 0;
    border: none;
    color: var(--rtb-text);
    font-family: inherit;
    box-sizing: border-box;
}

.rtb-booking-form *,
.rtb-booking-form *::before,
.rtb-booking-form *::after {
    box-sizing: border-box;
}

/* =========================================================
   FIELDSETS
   ========================================================= */

.rtb-booking-form fieldset:not(.rtb-form-footer) {
    border: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    width: 100%;
}

.rtb-booking-form fieldset.rtb-form-footer {
    border: none;
    padding: 0;
    margin: 0;
    display: block;
}

/* =========================================================
   SECTIEKOPPEN
   ========================================================= */

.rtb-booking-form legend {
    flex: 1 0 100% !important;
    width: 100%;
    display: block;
    color: var(--rtb-accent);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    margin: 0 0 1rem 0 !important;
    margin-inline-start: 0 !important;
    letter-spacing: 0.02em;
    text-align: left;
}

/* =========================================================
   VELDWRAPPERS
   ========================================================= */

.rtb-booking-form fieldset:not(.rtb-form-footer) > *:not(legend):not(.add-message) {
    flex: 1 1 200px;
    margin: 0;
    min-width: 0;
    width: auto !important;
}

/* =========================================================
   LABELS
   ========================================================= */

.rtb-booking-form label {
    display: block;
    color: var(--rtb-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* =========================================================
   INPUTS, SELECTS, TEXTAREA — basisstijl
   Tekstkleur expliciet via color EN -webkit-text-fill-color,
   anders kan Chrome tijdens typen/autofill een eigen kleur opleggen.
   ========================================================= */

.rtb-booking-form input[type="text"],
.rtb-booking-form input[type="email"],
.rtb-booking-form input[type="tel"],
.rtb-booking-form input[type="number"],
.rtb-booking-form input[type="date"],
.rtb-booking-form input[type="time"],
.rtb-booking-form select,
.rtb-booking-form textarea {
    width: 100%;
    background-color: var(--rtb-input-bg) !important;
    background-image: none;
    color: var(--rtb-text) !important;
    -webkit-text-fill-color: var(--rtb-text) !important;
    caret-color: var(--rtb-text);
    border: 1px solid var(--rtb-input-border) !important;
    border-radius: var(--rtb-radius);
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    line-height: 1.4;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Textarea: terug naar normale auto-hoogte */
.rtb-booking-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Placeholder-kleur */
.rtb-booking-form input::placeholder,
.rtb-booking-form textarea::placeholder {
    color: var(--rtb-text-muted);
    opacity: 0.6;
    -webkit-text-fill-color: var(--rtb-text-muted);
}

/* Focus */
.rtb-booking-form input:focus,
.rtb-booking-form select:focus,
.rtb-booking-form textarea:focus {
    outline: none;
    border-color: var(--rtb-accent) !important;
    box-shadow: 0 0 0 3px var(--rtb-accent-soft);
    color: var(--rtb-text) !important;
    -webkit-text-fill-color: var(--rtb-text) !important;
}

/* =========================================================
   AUTOFILL FIX — Chrome/Edge
   - lichtblauwe achtergrond overschrijven met inset box-shadow
   - witte tekst tijdens autofill overschrijven met text-fill-color
   - transition zo lang dat de blauwe flash nooit te zien is
   ========================================================= */

.rtb-booking-form input:-webkit-autofill,
.rtb-booking-form input:-webkit-autofill:hover,
.rtb-booking-form input:-webkit-autofill:focus,
.rtb-booking-form input:-webkit-autofill:active,
.rtb-booking-form select:-webkit-autofill,
.rtb-booking-form select:-webkit-autofill:hover,
.rtb-booking-form select:-webkit-autofill:focus,
.rtb-booking-form textarea:-webkit-autofill,
.rtb-booking-form textarea:-webkit-autofill:hover,
.rtb-booking-form textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--rtb-input-bg) inset !important;
            box-shadow: 0 0 0 1000px var(--rtb-input-bg) inset !important;
    -webkit-text-fill-color: var(--rtb-text) !important;
    caret-color: var(--rtb-text) !important;
    border: 1px solid var(--rtb-input-border) !important;
    transition: background-color 5000s ease-in-out 0s,
                color 5000s ease-in-out 0s;
}

/* Firefox autofill (gele achtergrond) */
.rtb-booking-form input:-moz-autofill,
.rtb-booking-form select:-moz-autofill,
.rtb-booking-form textarea:-moz-autofill {
    background-color: var(--rtb-input-bg) !important;
    color: var(--rtb-text) !important;
}

/* =========================================================
   SELECT — custom pijl in accent-kleur
   ========================================================= */

.rtb-booking-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23967D48' d='M1 1l5 5 5-5' stroke='%23967D48' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    padding-right: 2.75rem;
    cursor: pointer;
}

/* IE/Edge legacy: pijl verbergen */
.rtb-booking-form select::-ms-expand {
    display: none;
}

/* Optie-styling in geopende dropdown (beperkt aanpasbaar — browsers staan dit
   alleen toe op sommige OS'en, maar het kan geen kwaad) */
.rtb-booking-form select option {
    background-color: var(--rtb-input-bg);
    color: var(--rtb-text);
}

.rtb-booking-form select option:checked,
.rtb-booking-form select option:hover {
    background-color: var(--rtb-accent-soft);
    color: var(--rtb-primary);
}

/* =========================================================
   DATE/TIME-INPUT — picker-indicator in accent-kleur
   ========================================================= */

.rtb-booking-form input[type="date"]::-webkit-calendar-picker-indicator,
.rtb-booking-form input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(48%) sepia(18%) saturate(900%) hue-rotate(7deg) brightness(92%) contrast(85%);
    cursor: pointer;
    opacity: 0.85;
}

.rtb-booking-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.rtb-booking-form input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* =========================================================
   "Voeg een bericht toe" link
   ========================================================= */

.rtb-booking-form .add-message {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0;
}

.rtb-booking-form .add-message a {
    color: var(--rtb-accent);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.rtb-booking-form .add-message a:hover {
    color: var(--rtb-accent-hover);
    text-decoration: underline;
}

/* =========================================================
   SUBMIT-KNOP
   ========================================================= */

.rtb-booking-form .rtb-form-submit {
    text-align: left !important;
    margin-top: 1.5rem;
}

.rtb-booking-form .rtb-form-submit button[type="submit"],
.rtb-booking-form button[type="submit"] {
    background: var(--rtb-accent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--rtb-accent) !important;
    border-radius: var(--rtb-radius);
    padding: 0.9rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    display: inline-block !important;
    margin: 0 !important;
    width: auto;
    font-family: inherit;
}

.rtb-booking-form button[type="submit"]:hover {
    background: var(--rtb-accent-hover) !important;
    border-color: var(--rtb-accent-hover) !important;
}

.rtb-booking-form button[type="submit"]:active {
    transform: translateY(1px);
}

.rtb-booking-form button[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rtb-accent-soft);
}

/* =========================================================
   MELDINGEN
   ========================================================= */

.rtb-booking-form .rtb-error,
.rtb-booking-form .error {
    color: #b54a4a;
    font-size: 0.9rem;
    margin-top: 0.3rem;
    flex: 1 0 100%;
}

.rtb-message.rtb-success {
    background: var(--rtb-accent-soft);
    border: 1px solid var(--rtb-accent);
    color: var(--rtb-primary);
    padding: 1rem 1.2rem;
    border-radius: var(--rtb-radius);
}

/* =========================================================
   jQuery UI DATEPICKER
   ========================================================= */

.ui-datepicker {
    background: #ffffff;
    border: 1px solid var(--rtb-input-border);
    color: var(--rtb-text);
    padding: 0.5rem;
    border-radius: var(--rtb-radius);
    box-shadow: 0 4px 16px rgba(29, 35, 39, 0.08);
    font-family: inherit;
}

.ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: none;
    color: var(--rtb-accent);
}

.ui-datepicker .ui-datepicker-title {
    color: var(--rtb-accent);
    font-weight: 600;
}

.ui-datepicker td a,
.ui-datepicker td span {
    color: var(--rtb-text);
    background: transparent;
    text-align: center;
    border: none;
    padding: 0.4em 0.5em;
}

.ui-datepicker td a:hover {
    background: var(--rtb-accent-soft);
    color: var(--rtb-primary);
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
    background: var(--rtb-accent) !important;
    color: #fff !important;
    border-radius: var(--rtb-radius);
}

/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {
    .rtb-booking-form fieldset:not(.rtb-form-footer) > *:not(legend):not(.add-message) {
        flex: 1 1 100%;
    }

    .rtb-booking-form legend {
        font-size: 1.65rem;
    }

    .rtb-booking-form input[type="text"],
    .rtb-booking-form input[type="email"],
    .rtb-booking-form input[type="tel"],
    .rtb-booking-form input[type="number"],
    .rtb-booking-form input[type="date"],
    .rtb-booking-form input[type="time"],
    .rtb-booking-form select,
    .rtb-booking-form textarea {
        font-size: 1rem;
    }

    .rtb-booking-form .rtb-form-submit button[type="submit"] {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   SELECT — accent-kleur voor geselecteerde optie
   ========================================================= */

/* Moderne browsers: accent-color stuurt de highlight-kleur van
   alle form-controls aan (selects, checkboxes, radio's, etc.) */
.rtb-booking-form select,
.rtb-booking-form input {
    accent-color: var(--rtb-accent);
    color-scheme: light;
}

/* Chrome negeert background-color op <option>, maar respecteert
   wél een linear-gradient. Door een "gradient" van één kleur te
   gebruiken forceer je toch de achtergrond. */
.rtb-booking-form select option:checked,
.rtb-booking-form select option:hover,
.rtb-booking-form select option:focus,
.rtb-booking-form select option:active {
    background: var(--rtb-accent) linear-gradient(0deg, var(--rtb-accent) 0%, var(--rtb-accent) 100%) !important;
    background-color: var(--rtb-accent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 10px 100px var(--rtb-accent) inset !important;
}

/* =========================================================
   SELECT AUTOFILL — strakker dichttimmeren
   ========================================================= */

.rtb-booking-form select:-webkit-autofill,
.rtb-booking-form select:-webkit-autofill:hover,
.rtb-booking-form select:-webkit-autofill:focus,
.rtb-booking-form select:-webkit-autofill:active,
.rtb-booking-form select:autofill,
.rtb-booking-form select:-internal-autofill-selected,
.rtb-booking-form select:-internal-autofill-previewed {
    -webkit-box-shadow: 0 0 0 1000px var(--rtb-input-bg) inset !important;
            box-shadow: 0 0 0 1000px var(--rtb-input-bg) inset !important;
    background-color: var(--rtb-input-bg) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path stroke='%23967D48' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    -webkit-text-fill-color: var(--rtb-text) !important;
    color: var(--rtb-text) !important;
}

/* Extra borg voor alle actieve states van select */
.rtb-booking-form select:active,
.rtb-booking-form select:focus,
.rtb-booking-form select:focus-within,
.rtb-booking-form select:focus-visible {
    background-color: var(--rtb-input-bg) !important;
}/* End custom CSS */