/* ============================================================ Booking Form – Minimal Layout Styled to match the Gastfreund theme design language ============================================================ */ /* ---------- Design tokens ---------- Retuned to the new design system (GAS-9588): sky accent #29adef, filled pill inputs, label-above. #29adef is only a FALLBACK — the white-label pipeline in rtb_add_custom_styling() still overrides --rtb-border-focus/--rtb-check-color/ --rtb-hover-color and the button colors with the tenant brand. */ .rtb-booking-form { --rtb-blue: #29adef; /* sky accent (was #00abe8) */ --rtb-blue-light: #7ac6f9; --rtb-blue-dark: #374f67; /* Default the accent-mapped tokens to the sky accent so the theme's var(--rtb-hover-color,#00abe8) / var(--rtb-check-color,…) fallbacks resolve to #29adef. The white-label pipeline still overrides these. */ --rtb-hover-color: var(--rtb-blue); --rtb-check-color: var(--rtb-blue); --rtb-border: #d8d8d8; --rtb-border-focus: #29adef; --rtb-focus-ring: #2563EB; --rtb-text: #262626; /* input / value text */ --rtb-label: #8c8c8c; /* field label (above input) */ --rtb-placeholder: #bfbfbf; --rtb-disabled-bg: #fcfcfc; --rtb-error: #cf303e; --rtb-danger: #cf303e; /* outlined "cancel existing" button */ --rtb-radius: 104px; /* pill button */ --rtb-radius-sm: 104px; /* pill inputs */ --rtb-radius-lg: 20px; /* textarea + Tip/Info card */ --rtb-radius-pill: 104px; --rtb-font: Montserrat, montserrat_variable, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rtb-transition: 500ms cubic-bezier(0.39, 0.5, 0.15, 1.36); /* Sizing tokens aligned with Gastfreund design system */ --rtb-spacing-small: 16px; --rtb-field-gap: 8px; /* label -> input gap */ --rtb-input-height: 56px; --rtb-input-padding: 0 20px; --rtb-input-font: 14px; --rtb-input-line: 21px; --rtb-input-bg: #f2f2f2; --rtb-input-bg-disabled: #fcfcfc; --rtb-input-border: transparent; --rtb-label-size: 12px; --rtb-label-weight: 500; --rtb-button-height: 56px; --rtb-button-font: 16px; /* Tip / Info card (replaces the old gray summary box) */ --rtb-card-bg: #ffffff; --rtb-card-shadow: 0 4px 12px rgba(15, 23, 42, 0.07); --rtb-tip-body: #595959; } /* ---------- Box-sizing ---------- */ .rtb-booking-form, .rtb-booking-form *, .rtb-booking-form *::before, .rtb-booking-form *::after { box-sizing: border-box; } /* ---------- Main wrapper ---------- */ .rtb-booking-form { position: relative; width: 100%; margin-bottom: 0; font-family: var(--rtb-font); font-size: var(--rtb-input-font); line-height: var(--rtb-input-line); font-weight: 400; color: #262626; } /* ---------- Standalone (not in iframe) desktop padding ---------- */ html.rtb-standalone form[name="languageForm"], html.rtb-standalone .rtb-booking-form { padding-left: 24px; padding-right: 24px; } html.rtb-standalone .rtb-admin-notice { margin-left: 24px !important; margin-right: 24px !important; } html.rtb-standalone form[name="languageForm"]:first-of-type { padding-top: 24px; } /* ---------- Form ---------- */ .rtb-booking-form-form { max-width: 496px; padding-bottom: 4px; } .rtb-booking-form-form, .rtb-booking-form-form * { box-sizing: border-box; } /* ---------- Fieldsets ---------- */ .rtb-booking-form fieldset { border: none; padding: 0 0 15px; margin: 0 0 10px; max-width: 496px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .rtb-booking-form fieldset.consent { border-bottom: none; } .rtb-booking-form fieldset.rtb-form-footer { border-bottom: none; margin-bottom: 0; } /* ---------- Field wrappers ---------- */ .rtb-booking-form fieldset > div { max-width: 360px; margin-top: 12px; } .rtb-booking-form fieldset > div:first-child { margin-top: 0; } /* ---------- Reservation fieldset ---------- Date, time and party are stacked vertically. The actual display and icon/input sizing rules live in the theme (style.css ~line 350) so that the theme's `!important` rules for input width/icon position can be overridden in one place. Keep only wrapper sizing / spacing here. */ .rtb-booking-form .rtb-text.date, .rtb-booking-form .rtb-text.time { position: relative; max-width: 360px; margin-top: 10px; cursor: pointer; } /* Hide the date input until pickadate has initialized (adds .picker__input class). A CSS placeholder covers the space so there is no layout jump when the input appears with its value. */ .rtb-booking-form .rtb-text.date > input:not(.picker__input) { opacity: 0; } .rtb-booking-form .rtb-text.date:not(:has(.picker__input))::after { content: attr(data-placeholder); position: absolute; left: 0; bottom: 0; right: 0; max-width: none; height: var(--rtb-input-height, 44px); line-height: calc(var(--rtb-input-height, 44px) - 2px); padding: 0 40px 0 16px; border: 1px solid var(--rtb-input-border, #595959); border-radius: var(--rtb-radius-sm, 4px); font-family: var(--rtb-font); font-size: var(--rtb-input-font, 14px); color: var(--rtb-placeholder, #999); background-color: var(--rtb-input-bg, #f2f2f2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.42345 17.9167C4.00248 17.9167 3.64616 17.7708 3.35449 17.4792C3.06283 17.1875 2.91699 16.8312 2.91699 16.4102V5.25647C2.91699 4.8355 3.06283 4.47918 3.35449 4.18751C3.64616 3.89585 4.00248 3.75001 4.42345 3.75001H5.5772V2.62814C5.5772 2.4455 5.63838 2.293 5.76074 2.17064C5.8831 2.04842 6.0356 1.9873 6.21824 1.9873C6.40102 1.9873 6.55352 2.04842 6.67574 2.17064C6.7981 2.293 6.85928 2.4455 6.85928 2.62814V3.75001H13.1735V2.6123C13.1735 2.43494 13.2332 2.2864 13.3528 2.16668C13.4725 2.0471 13.6211 1.9873 13.7985 1.9873C13.9758 1.9873 14.1243 2.0471 14.2439 2.16668C14.3636 2.2864 14.4235 2.43494 14.4235 2.6123V3.75001H15.5772C15.9982 3.75001 16.3545 3.89585 16.6462 4.18751C16.9378 4.47918 17.0837 4.8355 17.0837 5.25647V16.4102C17.0837 16.8312 16.9378 17.1875 16.6462 17.4792C16.3545 17.7708 15.9982 17.9167 15.5772 17.9167H4.42345ZM4.42345 16.6667H15.5772C15.6414 16.6667 15.7001 16.6399 15.7535 16.5865C15.8069 16.5331 15.8337 16.4744 15.8337 16.4102V8.5898H4.16699V16.4102C4.16699 16.4744 4.19373 16.5331 4.2472 16.5865C4.30053 16.6399 4.35928 16.6667 4.42345 16.6667ZM4.16699 7.3398H15.8337V5.25647C15.8337 5.1923 15.8069 5.13355 15.7535 5.08022C15.7001 5.02675 15.6414 5.00001 15.5772 5.00001H4.42345C4.35928 5.00001 4.30053 5.02675 4.2472 5.08022C4.19373 5.13355 4.16699 5.1923 4.16699 5.25647V7.3398ZM10.0003 11.7308C9.7963 11.7308 9.62241 11.659 9.47866 11.5152C9.33505 11.3716 9.26324 11.1977 9.26324 10.9936C9.26324 10.7895 9.33505 10.6156 9.47866 10.4719C9.62241 10.3283 9.7963 10.2565 10.0003 10.2565C10.2044 10.2565 10.3782 10.3283 10.522 10.4719C10.6656 10.6156 10.7374 10.7895 10.7374 10.9936C10.7374 11.1977 10.6656 11.3716 10.522 11.5152C10.3782 11.659 10.2044 11.7308 10.0003 11.7308ZM6.14533 11.5152C6.00171 11.3716 5.92991 11.1977 5.92991 10.9936C5.92991 10.7895 6.00171 10.6156 6.14533 10.4719C6.28908 10.3283 6.46296 10.2565 6.66699 10.2565C6.87102 10.2565 7.04491 10.3283 7.18866 10.4719C7.33227 10.6156 7.40408 10.7895 7.40408 10.9936C7.40408 11.1977 7.33227 11.3716 7.18866 11.5152C7.04491 11.659 6.87102 11.7308 6.66699 11.7308C6.46296 11.7308 6.28908 11.659 6.14533 11.5152ZM13.3337 11.7308C13.1296 11.7308 12.9557 11.659 12.812 11.5152C12.6684 11.3716 12.5966 11.1977 12.5966 10.9936C12.5966 10.7895 12.6684 10.6156 12.812 10.4719C12.9557 10.3283 13.1296 10.2565 13.3337 10.2565C13.5377 10.2565 13.7116 10.3283 13.8553 10.4719C13.9989 10.6156 14.0707 10.7895 14.0707 10.9936C14.0707 11.1977 13.9989 11.3716 13.8553 11.5152C13.7116 11.659 13.5377 11.7308 13.3337 11.7308ZM10.0003 15C9.7963 15 9.62241 14.9281 9.47866 14.7844C9.33505 14.6408 9.26324 14.467 9.26324 14.2629C9.26324 14.0588 9.33505 13.8849 9.47866 13.7413C9.62241 13.5975 9.7963 13.5256 10.0003 13.5256C10.2044 13.5256 10.3782 13.5975 10.522 13.7413C10.6656 13.8849 10.7374 14.0588 10.7374 14.2629C10.7374 14.467 10.6656 14.6408 10.522 14.7844C10.3782 14.9281 10.2044 15 10.0003 15ZM6.14533 14.7844C6.00171 14.6408 5.92991 14.467 5.92991 14.2629C5.92991 14.0588 6.00171 13.8849 6.14533 13.7413C6.28908 13.5975 6.46296 13.5256 6.66699 13.5256C6.87102 13.5256 7.04491 13.5975 7.18866 13.7413C7.33227 13.8849 7.40408 14.0588 7.40408 14.2629C7.40408 14.467 7.33227 14.6408 7.18866 14.7844C7.04491 14.9281 6.87102 15 6.66699 15C6.46296 15 6.28908 14.9281 6.14533 14.7844ZM13.3337 15C13.1296 15 12.9557 14.9281 12.812 14.7844C12.6684 14.6408 12.5966 14.467 12.5966 14.2629C12.5966 14.0588 12.6684 13.8849 12.812 13.7413C12.9557 13.5975 13.1296 13.5256 13.3337 13.5256C13.5377 13.5256 13.7116 13.5975 13.8553 13.7413C13.9989 13.8849 14.0707 14.0588 14.0707 14.2629C14.0707 14.467 13.9989 14.6408 13.8553 14.7844C13.7116 14.9281 13.5377 15 13.3337 15Z' fill='%23404040'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px 20px; box-sizing: border-box; pointer-events: none; z-index: 1; } /* Hide the time field by default to prevent a layout shift on page load. The AJAX timeslot callback in booking-form.js will explicitly show it (via .rtb-time-ready) when there are real time slots to choose from. Whole-day (single 00:00 slot) keeps it hidden. */ .rtb-booking-form .rtb-text.time { overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease; } .rtb-booking-form .rtb-text.time:not(.rtb-time-ready) { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; } .rtb-booking-form .rtb-text.time.rtb-time-ready { max-height: 120px; opacity: 1; } .rtb-booking-form .rtb-select.party { margin-top: 10px; } /* Reserve height for all selectize wrappers so the page doesn't shift when the native elements that selectize will replace so they never flash before the styled control appears. */ .rtb-booking-form .rtb-select select { display: none !important; } /* Hide non-party selectize wrappers until JS marks them ready. Party has its own placeholder/ready system. */ .rtb-booking-form .rtb-select:not(.party):not(.rtb-selectize-ready) .selectize-control { opacity: 0; } .rtb-booking-form .rtb-select:not(.party).rtb-selectize-ready .selectize-control { opacity: 1; transition: opacity 0.2s ease; } /* The party wrapper uses position:relative so the placeholder overlay can sit exactly on top of the selectize control during loading. */ .rtb-booking-form .rtb-select.party { position: relative; } /* Hide selectize until JS marks .rtb-party-ready after the AJAX timeslot lookup is done. Fade in when ready. */ .rtb-booking-form .rtb-select.party .selectize-control { transition: opacity 0.3s ease; } .rtb-booking-form .rtb-select.party:not(.rtb-party-ready) .selectize-control { opacity: 0; } /* Placeholder overlay: fade out when party becomes ready so there's no gap between placeholder disappearing and selectize appearing. */ .rtb-booking-form .rtb-select.party::after { transition: opacity 0.2s ease; } .rtb-booking-form .rtb-select.party.rtb-party-ready::after { opacity: 0; pointer-events: none; } /* Placeholder overlay shown while the party select isn't ready (i.e. date — and time, if required — not yet picked). Styled to match the disabled selectize state (grey bg, not-allowed cursor) so it reads clearly as "not yet selectable". */ .rtb-booking-form .rtb-select.party:not(.rtb-party-ready)::after { content: attr(data-placeholder); position: absolute; left: 0; top: 26px; /* label (20px) + label margin-bottom (6px) — align with selectize input */ right: 0; height: var(--rtb-input-height, 44px); line-height: calc(var(--rtb-input-height, 44px) - 2px); padding: 0 20px; max-width: none; border: 1px solid var(--rtb-input-border, #595959); border-radius: var(--rtb-radius-pill, 104px); font-family: var(--rtb-font); font-size: var(--rtb-input-font, 14px); color: var(--rtb-placeholder, #999); background: var(--rtb-disabled-bg, #eeeeee) url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='6' r='3.25' stroke='%23bfbfbf' stroke-width='1.5'/%3E%3Cpath d='M3.5 17.5V16.5C3.5 14.29 5.29 12.5 7.5 12.5H12.5C14.71 12.5 16.5 14.29 16.5 16.5V17.5' stroke='%23bfbfbf' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 20px 20px; cursor: not-allowed; box-sizing: border-box; pointer-events: none; z-index: 1; padding-right: 40px; } /* Mobile stepper grey state while party not ready — matches the disabled look of the desktop selectize placeholder overlay. */ .rtb-booking-form .rtb-select.party:not(.rtb-party-ready) .rtb-party-stepper { background: var(--rtb-disabled-bg, #eeeeee); cursor: not-allowed; } .rtb-booking-form .rtb-select.party:not(.rtb-party-ready) .rtb-party-stepper-value { color: var(--rtb-placeholder, #999); } /* Widen all selectize wrappers to match input max-width. */ .rtb-booking-form .rtb-select .selectize-control { max-width: 360px !important; width: 100% !important; } .rtb-booking-form .selectize-input .item { line-height: calc(var(--rtb-input-height) - 2px) !important; vertical-align: middle; } .rtb-booking-form .selectize-input { font-family: var(--rtb-font) !important; font-size: var(--rtb-input-font) !important; color: var(--rtb-text) !important; height: var(--rtb-input-height) !important; padding: 0 20px !important; /* Center the selected value by box, not by line-height + vertical-align: the inline-block baseline placement drifts with font ascent/x-height and mis-centered the text on some mobile devices/fonts. Flex is metric-agnostic. */ display: flex !important; align-items: center !important; line-height: calc(var(--rtb-input-height) - 2px) !important; border: 1px solid var(--rtb-input-border); border-radius: var(--rtb-radius-pill); box-shadow: none !important; background: var(--rtb-input-bg) !important; cursor: pointer !important; transition: border-color 0.15s ease, background-color 0.15s ease; } .rtb-booking-form .selectize-input.focus, .rtb-booking-form .selectize-input:focus, .rtb-booking-form .selectize-input:active { border: 1px solid #262626 !important; background: var(--rtb-input-bg, #f2f2f2) !important; color: var(--rtb-text); outline: none; box-shadow: none !important; } .rtb-booking-form .selectize-dropdown { font-family: var(--rtb-font); font-size: 14px; color: #262626; background: var(--rtb-input-bg, #f2f2f2); /* Black border around the whole open dropdown; the top edge is open so it connects seamlessly to the selection control above (one bordered panel). */ border: 1px solid #262626 !important; border-top: none !important; border-radius: 0 0 var(--rtb-radius-lg, 20px) var(--rtb-radius-lg, 20px) !important; box-shadow: 0 6px 8px rgba(15, 23, 42, 0.06) !important; margin-top: 0; padding: 0; overflow: hidden; } /* When the dropdown is open, flatten the input's bottom so it merges into the dropdown panel above the options. */ .rtb-booking-form .selectize-control.single .selectize-input.dropdown-active { border-radius: var(--rtb-radius-lg, 20px) var(--rtb-radius-lg, 20px) 0 0 !important; /* Black border on the top part (selection) only; the bottom edge stays open so it connects seamlessly into the options panel below. */ border-color: #262626 #262626 transparent #262626 !important; } /* Dropdown chevron for the CLOSED single-select; hidden while the dropdown is open (replaces selectize's default CSS triangle). */ .rtb-booking-form .selectize-control.single .selectize-input::after { content: ""; position: absolute; top: 50%; right: 14px; margin-top: -12px; width: 24px; height: 24px; border: none !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193Z' fill='%23404040'/%3E%3C/svg%3E") no-repeat center / contain !important; pointer-events: none; } .rtb-booking-form .selectize-control.single .selectize-input.dropdown-active::after { transform: rotate(180deg); } .rtb-booking-form .selectize-dropdown .selectize-dropdown-content { padding: 0; } .rtb-booking-form .selectize-dropdown .option { padding: 12px 20px !important; color: #262626; background: transparent; border-top: 1px solid rgba(0, 0, 0, 0.06); border-radius: 0; transition: background-color 0.12s ease, color 0.12s ease; } .rtb-booking-form .selectize-dropdown .option:first-child { border-top: none; } .rtb-booking-form .selectize-dropdown .option:hover, .rtb-booking-form .selectize-dropdown .option.active, .rtb-booking-form .selectize-dropdown .option.selected, .rtb-booking-form .selectize-dropdown .option[aria-selected="true"] { background: rgba(0, 0, 0, 0.04); color: #262626; } .rtb-booking-form .selectize-dropdown [data-selectable].option-disabled { color: #aaa; cursor: default; } .rtb-booking-form .selectize-input.input-active, .rtb-booking-form .selectize-input.input-active input { cursor: pointer !important; background: var(--rtb-input-bg, #f2f2f2) !important; } /* Keep selectize search inputs focusable for keyboard events but pull them out of flow so they never shift the selected .item text. */ .rtb-booking-form .selectize-input > input { -webkit-appearance: none !important; border: 0 !important; outline: none !important; position: absolute !important; width: 0 !important; height: 0 !important; padding: 0 !important; opacity: 0 !important; } :disabled, .rtb-booking-form .selectize-control .selectize-input.disabled { background-color: var(--rtb-disabled-bg) !important; cursor: not-allowed !important; border: 1px solid var(--rtb-border); } /* ---------- Checkbox (consent) – custom Gastfreund style ---------- Scoped to .rtb-booking-form-form so admin modal keeps native controls. */ .rtb-booking-form-form input[type="checkbox"] { -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: 0 solid #fff !important; margin-top: 2px; margin-left: 0; margin-bottom: 6px; font-family: var(--rtb-font); font-size: 14px; } .rtb-booking-form-form input[type="checkbox"]::before { width: 18px; height: 18px; margin-bottom: -4px; border: 2px solid var(--rtb-check-color, var(--rtb-blue, #29adef)); border-radius: 2px; background-color: #fff; display: block; content: ""; float: left; cursor: pointer !important; margin-right: 3px; } /* Checked state: the whole box fills with the brand blue and the tick is "cut out" of the fill via an even-odd mask. Keeps brand blue; only the silhouette changes (filled box with tick hole, instead of hollow box with small tick). */ .rtb-booking-form-form input[type="checkbox"]:checked::before { border: none; background-color: var(--rtb-blue, #00abe8); display: block; content: ""; float: left; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; /* Pop the filled box + cut-out tick in when the box is ticked. Gentle overshoot at 55% reads as a satisfying "snap" without feeling elastic. */ animation: rtb-check-pop 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes rtb-check-pop { 0% { transform: scale(0.4); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } /* Respect users who ask for less motion — no pop, just the state change. */ @media (prefers-reduced-motion: reduce) { .rtb-booking-form-form input[type="checkbox"]:checked::before { animation: none; } } .rtb-booking-form-form label:has(> input[type="checkbox"]), .rtb-booking-form-form label:has(> input[type="radio"]) { cursor: pointer !important; line-height: 22px; } /* Each checkbox / radio option: flex layout so wrapped lines stay aligned under the text, not under the input. */ .rtb-booking-form-form .rtb-checkbox label:has(> input[type="checkbox"]), .rtb-booking-form-form .rtb-radio label:has(> input[type="radio"]) { display: flex; align-items: flex-start; gap: 8px; line-height: 22px; margin-bottom: 4px; } /* Checkbox-group items use the same rhythm/alignment as the radio items. flex-start (not center) so the control stays on the FIRST line when the label wraps — otherwise a multi-line label (long text, or a larger OS font that forces wrapping) floats the control at the block's vertical centre. The control is nudged down (see the input rules below) to still look centred on a single line. line-height is a fixed 22px, so that nudge stays correct at any font size. */ .rtb-booking-form-form .rtb-checkbox label:has(> input[type="checkbox"]) { align-items: flex-start; gap: 14px; padding: 8px 0; margin-bottom: 0; } /* Radio "selection list" — new design: the whole group sits in a grey card. Colors are unchanged; only the grey background and the spacing/alignment (12px gap, 12px row rhythm, centered rows) are added. */ .rtb-booking-form-form .rtb-radio { background: var(--rtb-input-bg, #f2f2f2); border-radius: var(--rtb-radius-lg, 20px); padding: 24px 16px 16px; margin-top: 28px; margin-bottom: 16px; } .rtb-booking-form-form .rtb-radio > label:first-child { margin-bottom: 4px; color: #262626; font-weight: 600; font-size: 14px; } .rtb-booking-form-form .rtb-radio label:has(> input[type="radio"]) { align-items: flex-start; gap: 12px; padding: 8px 0; margin-bottom: 0; } /* Hover feedback on choice rows: darken the whole row edge-to-edge inside the grey group card. Pointer devices only — irrelevant on touch. */ @media (hover: hover) { .rtb-booking-form-form .rtb-checkbox label:has(> input[type="checkbox"]):hover, .rtb-booking-form-form .rtb-radio label:has(> input[type="radio"]):hover { background: rgba(0, 0, 0, 0.025); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; border-radius: 8px; } } /* Checkbox groups (custom checkbox fields) get the same grey card + black title as the radio selection list — including single-checkbox groups. The consent checkbox uses .rtb-confirm and is intentionally not carded. */ .rtb-booking-form-form .rtb-checkbox { background: var(--rtb-input-bg, #f2f2f2); border-radius: var(--rtb-radius-lg, 20px); padding: 24px 16px 16px; margin-top: 28px; margin-bottom: 16px; } .rtb-booking-form-form .rtb-checkbox > label:first-child { margin-bottom: 4px; color: #262626; font-weight: 600; font-size: 14px; } .rtb-booking-form-form .rtb-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; /* Nudge down so the 18px box sits centred on the first 22px text line (flex-start above pins it to the first line for wrapped labels). */ margin: 2px 0 0; } /* Custom radios: appearance:none + direct input styling. Theme uses ::before/::after pseudos — those are killed below. */ .rtb-booking-form-form .rtb-radio input[type="radio"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 17px !important; height: 17px !important; min-width: 17px; max-width: none !important; flex: 0 0 auto; /* Nudge down to centre the 17px control on the first 22px text line (flex-start above pins it to the first line for wrapped labels). */ margin: 2px 0 0; padding: 0 !important; border: 2px solid #a0a0a0 !important; border-radius: 50% !important; background: #fff !important; cursor: pointer !important; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; outline: none; } .rtb-booking-form-form .rtb-radio input[type="radio"]:hover, .rtb-booking-form-form .rtb-radio input[type="radio"]:focus { border-color: var(--rtb-check-color, var(--rtb-blue, #00abe8)) !important; background-color: color-mix(in srgb, var(--rtb-check-color, var(--rtb-blue, #00abe8)) 15%, transparent) !important; } .rtb-booking-form-form .rtb-radio input[type="radio"]:checked { border-color: var(--rtb-check-color, var(--rtb-blue, #00abe8)) !important; background: var(--rtb-check-color, var(--rtb-blue, #00abe8)) !important; box-shadow: inset 0 0 0 2.5px #fff; } .rtb-booking-form-form .rtb-radio input[type="radio"]:checked:hover, .rtb-booking-form-form .rtb-radio input[type="radio"]:checked:focus { border-color: var(--rtb-check-color, var(--rtb-blue, #00abe8)) !important; background: var(--rtb-check-color, var(--rtb-blue, #00abe8)) !important; } .rtb-booking-form-form .rtb-radio input[type="radio"]::before, .rtb-booking-form-form .rtb-radio input[type="radio"]::after, .rtb-booking-form-form .rtb-radio input[type="radio"]:checked::before, .rtb-booking-form-form .rtb-radio input[type="radio"]:checked::after, .rtb-booking-form-form .rtb-radio input[type="radio"]:hover::before, .rtb-booking-form-form .rtb-radio input[type="radio"]:hover::after, .rtb-booking-form-form .rtb-radio input[type="radio"]:focus::before, .rtb-booking-form-form .rtb-radio input[type="radio"]:focus::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; border: none !important; box-shadow: none !important; background: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Kill the float on the checkbox ::before so the pseudo-element renders inside the input box (vertical-align: middle), not as a floated element breaking the inline flow. */ .rtb-booking-form-form .rtb-checkbox input[type="checkbox"]::before, .rtb-booking-form-form .rtb-checkbox input[type="checkbox"]:checked::before { float: none; margin: 0; } .rtb-booking-form .rtb-confirm.consent-statement { margin-top: 28px; } .rtb-booking-form .rtb-confirm.consent-statement label { display: inline-flex; align-items: flex-start; gap: 14px; font-size: 14px !important; font-weight: 500; line-height: 18px; max-width: 496px; margin-left: 0; margin-bottom: 0; color: #262626 !important; cursor: pointer !important; } .rtb-booking-form .rtb-confirm.consent-statement a { font-family: var(--rtb-font); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--rtb-blue); } /* Link is now inline within consent text — no extra spacing needed. */ /* Match the general 15x15 size from `.rtb-booking-form-form input[type="checkbox"]::before` so the consent-statement checkbox is visually the same as the other checkboxes in the form. Only the negative margin is kept, to pull the checkbox back out of the label's 20px indent. */ input#rtb-consent-statement[type="checkbox"]::before, input#rtb-consent-statement[type="checkbox"]:checked::before { float: none !important; margin: 0 !important; border-radius: 2px; } /* Privacy checkbox uses the default unchecked look (grey border + white fill inherited from the general rule) UNTIL it enters an error state — either JS-marked (`aria-invalid="true"` / the legacy `.invalid_border` class) because the user tried to submit without checking it, or server-side rejected with the same flags. Only then does it turn red. */ input#rtb-consent-statement[type="checkbox"][aria-invalid="true"]:not(:checked)::before, input#rtb-consent-statement[type="checkbox"].invalid_border:not(:checked)::before { border: 2px solid #CF303E !important; background-color: #fff !important; } input#rtb-consent-statement[type="checkbox"][aria-invalid="true"]:not(:checked):hover::before, input#rtb-consent-statement[type="checkbox"].invalid_border:not(:checked):hover::before { border: 2px solid #CF303E !important; background-color: #F5D6D8 !important; } /* Hover state — all checkboxes including privacy (when NOT in an error state): preview the checked fill at reduced intensity so the user sees they're about to click a checkbox that flips to brand blue. The error-state rules above override this for privacy when it's currently marked invalid. */ .rtb-booking-form-form input[type="checkbox"]:not(:checked):hover::before { border: 2px solid var(--rtb-check-color, var(--rtb-blue, #00abe8)) !important; background-color: color-mix(in srgb, var(--rtb-check-color, var(--rtb-blue, #00abe8)) 15%, transparent) !important; } /* Default confirm fields (checkbox + inline title, e.g. "Checkbox mandatory"): use flex so the checkbox stays on the same baseline as the first line of the label text. Scoped to NOT privacy — privacy uses the negative-margin indent trick so the long link text can wrap under the label, not under the checkbox. */ .rtb-booking-form-form .rtb-confirm:not(.consent-statement) > label { display: inline-flex; align-items: flex-start; gap: 14px; line-height: 22px; } .rtb-booking-form-form .rtb-confirm:not(.consent-statement) > label > input[type="checkbox"] { flex: 0 0 auto; /* Align the checkbox top with the top of the label text (12px text in a 22px line-box has ~5px leading, so a 4px top margin lines the box up). */ margin: 4px 0 0 0 !important; } .rtb-booking-form-form .rtb-confirm:not(.consent-statement) > label > input[type="checkbox"]::before { float: none !important; margin: 0 !important; } input[type="checkbox"]#rtb-consent-statement { min-height: 0; flex: 0 0 auto; margin: 2px 0 0 0 !important; } /* ---------- Buttons ---------- New design system: filled sky pill, 16px SemiBold Montserrat, soft accent shadow. */ .rtb-booking-form button { height: var(--rtb-button-height); font-family: var(--rtb-font) !important; font-size: var(--rtb-button-font); font-style: normal; font-weight: 600; line-height: 24px; border-radius: var(--rtb-radius); border: none; background: var(--rtb-blue); color: #fff; cursor: pointer; outline: none; box-shadow: 0 4px 12px rgba(41, 173, 239, 0.16); -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .rtb-booking-form button[type="submit"] { min-width: 200px; padding: 16px 24px; box-shadow: 0 4px 12px rgba(41, 173, 239, 0.16); transition: all var(--rtb-transition); } .rtb-booking-form button[type="submit"]:hover:enabled { background-color: #4fbdf3; box-shadow: 0 4px 12px rgba(41, 173, 239, 0.24); } .rtb-booking-form button[type="submit"]:disabled { background-color: #a0a0a0; cursor: not-allowed; box-shadow: none; } /* ---------- Toast notifications ---------- */ .rtb-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 12px; max-width: 500px; width: calc(100% - 40px); padding: 14px 16px; background: #f5c6cb; border-radius: 8px; font-family: var(--rtb-font); font-size: 14px; font-weight: 500; color: #262626; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,0.12); animation: rtbToastIn 0.35s ease-out; } .rtb-toast.rtb-toast-out { animation: rtbToastOut 0.25s ease-in forwards; } .rtb-toast-text { flex: 1; } .rtb-toast-close { flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M6.575 7.975L1.675 12.875C1.49167 13.0583 1.25833 13.15 0.975 13.15C0.691667 13.15 0.458333 13.0583 0.275 12.875C0.0916667 12.6917 0 12.4583 0 12.175C0 11.8917 0.0916667 11.6583 0.275 11.475L5.175 6.575L0.275 1.675C0.0916667 1.49167 0 1.25833 0 0.975C0 0.691667 0.0916667 0.458333 0.275 0.275C0.458333 0.0916667 0.691667 0 0.975 0C1.25833 0 1.49167 0.0916667 1.675 0.275L6.575 5.175L11.475 0.275C11.6583 0.0916667 11.8917 0 12.175 0C12.4583 0 12.6917 0.0916667 12.875 0.275C13.0583 0.458333 13.15 0.691667 13.15 0.975C13.15 1.25833 13.0583 1.49167 12.875 1.675L7.975 6.575L12.875 11.475C13.0583 11.6583 13.15 11.8917 13.15 12.175C13.15 12.4583 13.0583 12.6917 12.875 12.875C12.6917 13.0583 12.4583 13.15 12.175 13.15C11.8917 13.15 11.6583 13.0583 11.475 12.875L6.575 7.975Z' fill='%23262626'/%3E%3C/svg%3E") no-repeat center; background-size: 14px; } @keyframes rtbToastIn { 0% { opacity: 0; transform: translateX(-50%) translateY(-20px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes rtbToastOut { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } } /* ---------- Error messages ---------- */ .rtb-booking-form .rtb-error { font-family: var(--rtb-font) !important; font-size: var(--rtb-label-size, 12px) !important; font-style: normal !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap; color: var(--rtb-error) !important; width: max-content; max-width: 100%; background: rgba(255, 255, 255, 1) !important; cursor: auto; padding: 0 !important; /* Absolute-positioned so the error doesn't grow the wrapper and shift the right-edge `::after` validation icon downward. Paired with `margin-bottom` on wrappers that have an error, so subsequent fields still lay out below. */ position: absolute; left: 0; top: 100%; margin-top: 12px; } .rtb-booking-form .rtb-error:before { display: none !important; } /* OTP status messages (cancel-by-email flow) must render in normal flow. Unlike field-validation .rtb-error — absolutely positioned under inputs, with space reserved via wrapper margin-bottom — the .rtb-otp-status box reserves no space. Leaving the error absolute collapses .rtb-otp-status to 0 height and the message overlaps the "Back to the form" toggle below. */ .rtb-booking-form .rtb-otp-status .rtb-error { position: static !important; top: auto; left: auto; white-space: normal; width: auto; margin-top: 0 !important; } /* Positive OTP/cancel feedback (e.g. "reservation cancelled"). */ .rtb-booking-form .rtb-otp-ok { font-family: var(--rtb-font); font-size: 14px; font-weight: 600; line-height: 1.3; color: #2e7d32; margin: 8px 0; } /* Resend feedback: briefly highlight the "code sent to X" heading so a successful resend is noticeable without duplicating its text. */ @keyframes rtb-otp-flash { 0% { background: #fff8c4; } 100% { background: transparent; } } .rtb-booking-form .rtb-otp-sent-msg.rtb-otp-flash { animation: rtb-otp-flash 1.2s ease-out; } /* Every field wrapper is a positioning context — needed both by the absolutely-positioned .rtb-error above and by the validation icon that pins to the wrapper's bottom-right corner. */ .rtb-booking-form .rtb-text, .rtb-booking-form .rtb-select, .rtb-booking-form .rtb-textarea, .rtb-booking-form .rtb-confirm { position: relative; } /* Reserve below-wrapper space so the absolute error doesn't overlap the next field. 12px input→error gap + 1em error line + 16px of breathing room below so the error isn't crammed against the next field. */ .rtb-booking-form .rtb-text:has(.rtb-error), .rtb-booking-form .rtb-select:has(.rtb-error), .rtb-booking-form .rtb-textarea:has(.rtb-error), .rtb-booking-form .rtb-confirm:has(.rtb-error) { margin-bottom: calc(12px + 1em + 28px); } /* Inline validation classes (set via JS). Invalid fields get a red border on the same grey fill as every other input, and the label above turns red so the error is visible at a glance without extra icons. */ .rtb-booking-form .invalid_border input, .rtb-booking-form .invalid_border .selectize-input, .rtb-booking-form .invalid_border textarea, .rtb-booking-form input.invalid_border, .rtb-booking-form textarea.invalid_border, .rtb-booking-form [aria-invalid="true"] { border-color: var(--rtb-error) !important; background-color: var(--rtb-input-bg, #f2f2f2); } /* Suppress red flash while AJAX is loading — field isn't invalid, just waiting. */ .rtb-booking-form input.invalid_border.rtb-ajax-loading, .rtb-booking-form .rtb-ajax-loading input.invalid_border { border-color: var(--rtb-border) !important; } /* Color the label above/around an invalid field red. Covers: - text/select/textarea: input is direct child of wrapper div - confirm/checkbox/radio: input is inside the label itself - invalid_icon on wrapper (legacy path) */ .rtb-booking-form div:has(> .invalid_border) > label, .rtb-booking-form div:has(> [aria-invalid="true"]) > label, .rtb-booking-form label:has(> .invalid_border), .rtb-booking-form label:has(> [aria-invalid="true"]), .rtb-booking-form .invalid_icon > label { color: var(--rtb-error) !important; } .rtb-booking-form .rtb-ajax-loading.invalid_icon > label, .rtb-booking-form div.rtb-ajax-loading:has(> .invalid_border) > label { color: var(--rtb-text) !important; } /* Valid (filled, not focused) fields have NO border — only the active/focused field shows a border. Keep the text color; the border stays the transparent fill so a valid field reads as a plain grey pill. */ .rtb-booking-form .valid_border input, .rtb-booking-form .valid_border .selectize-input, .rtb-booking-form .valid_border textarea, .rtb-booking-form input.valid_border, .rtb-booking-form textarea.valid_border { color: #26303a; border-color: var(--rtb-input-border) !important; } /* ---------- Modification / cancellation ---------- "Cancel existing reservation": outlined red pill (new design system). */ .rtb-modification-toggle { font-family: var(--rtb-font); font-size: 16px; font-style: normal; font-weight: 600; text-align: center; color: var(--rtb-danger) !important; background-color: transparent !important; border: 1px solid var(--rtb-danger) !important; border-radius: var(--rtb-radius) !important; padding: 16px 24px !important; margin-left: 0; margin-bottom: 40px !important; cursor: pointer; user-select: none; transition: background-color 0.2s ease !important; position: relative; bottom: 0; z-index: 1; display: block; width: 100%; max-width: 360px; box-sizing: border-box; box-shadow: none !important; } .rtb-modification-toggle:hover { background-color: #F5D6D8 !important; box-shadow: none !important; } .rtb-modification-title { font-family: var(--rtb-font); font-size: 18px; font-weight: 600; color: var(--rtb-text); margin: 0 0 8px; } .rtb-modification-title + div { margin-bottom: 12px; } .rtb-modification-form { background-color: #fff; width: 100%; /* Flow below the "Back to the form" toggle in normal document order. Was absolute-positioned, which placed the form (and its "View reservations" button) on top of the toggle. */ position: relative; padding-top: 12px; padding-bottom: 12px; padding-left: 2px; } .rtb-find-reservation-button { font-family: var(--rtb-font); font-size: 14px; font-style: normal; font-weight: 600; color: #fff !important; background: var(--rtb-blue); border-radius: var(--rtb-radius); padding: 10px 15px; position: relative; bottom: 0; z-index: 1; cursor: pointer; display: inline-block; float: left; margin-top: 16px; transition: background 0.2s ease; } .rtb-find-reservation-button:hover:not(.rtb-find-disabled) { background: var(--rtb-blue-light); } .rtb-find-reservation-button.rtb-find-disabled { background: #a0a0a0 !important; cursor: not-allowed; pointer-events: auto; } /* ---------- Pickadate calendar ---------- */ .picker { font-size: 14px !important; } #rtb-date_root .picker__button--clear, #rtb-date_root .picker__button--today, #rtb-date_root .picker__button--close { color: var(--rtb-text); } #rtb-date_root .picker__nav--next, #rtb-date_root .picker__nav--prev { min-height: 0.5em; } .picker__box { padding: 0 !important; border: none !important; border-radius: 16px !important; box-shadow: var(--rtb-card-shadow, 0 4px 12px rgba(15, 23, 42, 0.07)) !important; background: #fff; height: 100%; display: table-cell !important; z-index: 100; } .picker__holder { background-color: transparent !important; outline: none; transition: none !important; } .picker__frame { position: absolute; top: 25px !important; margin: 0 auto; min-width: 166px; max-width: 340px !important; height: 10px; outline: none; transition: none !important; } .picker--opened .picker__frame { transform: translateY(100px) !important; } .picker__footer { padding: 10px; background-color: #f3f4f7; border-radius: 4px !important; text-align: right !important; } /* Date picker footer: Today/Clear are already display:none and the Close button was removed (redundant — selecting, outside click and ESC close the picker), so hide the leftover empty grey strip entirely. The time picker footer keeps its visible Clear button and stays. */ #rtb-date_root .picker__footer { display: none; } .picker__table { margin: auto; width: 90% !important; padding-left: 10px !important; } .picker__month, .picker__year { font-family: var(--rtb-font) !important; font-size: 15px !important; font-style: normal !important; font-weight: 400 !important; color: #262626 !important; } .picker__weekday { font-family: var(--rtb-font) !important; font-size: 14px !important; color: #262626 !important; padding-bottom: 15px !important; } .picker__day { font-family: var(--rtb-font) !important; font-size: 14px !important; font-weight: 400 !important; padding: 0.5125em 0 !important; border: 1px solid transparent !important; } .picker__day--selected::before { background: #6dd9ff !important; } .picker--focused .picker__day--selected { background-color: var(--rtb-blue) !important; } .picker__day--today::before { display: none; } .picker--focused .picker__day--disabled, .picker__day--disabled, .picker__day--disabled:hover, .picker__day--outfocus .picker__day--disabled { color: #ddd !important; background: #fff !important; filter: brightness(100%) !important; } .picker__day--outfocus { color: #262626; } .picker__day--highlighted { border-width: 0 !important; } .picker__nav--prev, .picker__nav--next { min-height: 0.5em; outline: none; top: -0.13em !important; } .picker__nav--prev { left: 0 !important; } .picker__nav--next { right: 0 !important; } .picker__nav--next:hover, .picker__nav--prev:hover { background: none !important; } .picker__nav--disabled { visibility: hidden; } .picker__button--today { display: none !important; } .picker__button--clear { display: none !important; } .picker__list .picker__button--clear { display: block !important; width: 100px !important; margin-left: 20px; font-family: var(--rtb-font) !important; font-size: 12px !important; color: var(--rtb-blue-dark) !important; background: none !important; float: right; } .picker__list .picker__button--clear:hover { color: var(--rtb-blue) !important; } .picker__list .picker__button--clear::before { display: none; } .picker--time .picker__button--clear { display: none !important; } .picker__button--close { min-width: 100px !important; height: auto !important; padding: 6px 12px !important; border-width: 0 !important; background-color: transparent !important; background-image: none !important; font-family: var(--rtb-font) !important; font-size: 13px !important; color: var(--rtb-blue-dark) !important; font-weight: 600 !important; /* Pure text button — remove the global button drop shadow. */ box-shadow: none !important; } .picker__button--close:hover, .picker__button--close:focus { background-color: transparent !important; box-shadow: none !important; text-decoration: underline; } .picker__button--close::before, .picker__button--today::before { display: none !important; } /* ---------- Pickadate time list ---------- */ #rtb-time_root .picker__list { list-style: none; margin: 0 !important; padding: 0 0 3em !important; } #rtb-time_root .picker__list li { list-style: none; margin: 0 0 0 1px; } .picker--time .picker__box { border-radius: 16px; border: none !important; box-shadow: var(--rtb-card-shadow, 0 4px 12px rgba(15, 23, 42, 0.07)) !important; background: #fff !important; } .picker__list-item { background-color: #fff !important; border: none !important; border-radius: 10px; height: 28px; line-height: 28px; float: left; min-width: 65px !important; padding: 0.25em 0.5em !important; text-align: right !important; transition: background-color 0.12s ease, color 0.12s ease; } .picker__list-item:hover { color: #fff !important; background-color: var(--rtb-hover-color, var(--rtb-blue, #29adef)) !important; } .picker__list-item--selected { color: #fff !important; font-weight: 600; background-color: var(--rtb-hover-color, var(--rtb-blue, #29adef)) !important; } .picker--focused .picker__list-item--disabled, .picker__list-item--disabled, .picker__list-item--disabled:hover { display: none; } /* ---------- Recaptcha ---------- */ #rtb_recaptcha { display: none; } /* ---------- Utility ---------- .rtb-hidden is the canonical "hide" class across the plugin (`assets/css/booking-form.css` also defines it as display:none). Previously this file overrode it to "display:block; visibility:hidden", which kept hidden elements in the layout flow and caused ghost-space glitches. Align with the plugin base by using the standard display:none so add/removeClass('rtb-hidden') works predictably. */ .rtb-hidden { display: none !important; } .rtb-clear { clear: both; } input:invalid { box-shadow: none; } INPUT::-webkit-input-placeholder, INPUT:-moz-placeholder { color: var(--rtb-placeholder); } input::placeholder, textarea::placeholder, ::placeholder { color: var(--rtb-placeholder); } /* ---------- Party-size stepper ---------- A touch-friendly "− [n] +" control that sits next to the (hidden on mobile) selectize dropdown. Both inputs stay in sync via JS, so the form submit payload is identical either way. Shown only on touch/mobile breakpoints below. */ .rtb-booking-form .rtb-party-stepper { display: none; /* shown on mobile via media query */ align-items: center; justify-content: space-between; max-width: 360px; width: 100%; height: var(--rtb-input-height, 44px); border: 1px solid var(--rtb-input-border, #595959); border-radius: var(--rtb-radius-sm, 4px); background: #fff; box-sizing: border-box; overflow: hidden; } .rtb-booking-form .rtb-party-stepper button { width: var(--rtb-input-height, 44px); height: 100%; min-width: var(--rtb-input-height, 44px) !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: #f7f9fb !important; color: var(--rtb-text) !important; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none !important; transition: background 0.15s ease; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; } .rtb-booking-form .rtb-party-stepper-minus { border-right: 1px solid var(--rtb-input-border, #595959) !important; } .rtb-booking-form .rtb-party-stepper-plus { border-left: 1px solid var(--rtb-input-border, #595959) !important; } @media (hover: hover) and (pointer: fine) { .rtb-booking-form .rtb-party-stepper button:hover:enabled { background: #edf2f7 !important; } } @media (pointer: coarse) { .rtb-booking-form .rtb-party-stepper button:hover:enabled:not(:active) { background: #f7f9fb !important; } } .rtb-booking-form .rtb-party-stepper button:active:enabled { background: #e2e8f0 !important; } .rtb-booking-form .rtb-party-stepper button:focus, .rtb-booking-form .rtb-party-stepper button:focus-visible { outline: none !important; background: #f7f9fb !important; } .rtb-booking-form .rtb-party-stepper button:disabled { background: var(--rtb-disabled-bg, #fcfcfc) !important; color: #c4c4c4 !important; cursor: not-allowed; } .rtb-booking-form .rtb-party-stepper-value { flex: 1; text-align: center; font-size: var(--rtb-input-font, 14px); font-weight: 600; font-family: var(--rtb-font); color: #262626; line-height: calc(var(--rtb-input-height, 44px) - 2px); cursor: pointer; -webkit-tap-highlight-color: transparent; } .rtb-booking-form .rtb-select.party { position: relative; } /* ---------- Responsive ---------- */ @media screen and (max-width: 1000px) { .rtb-booking-form-form { margin: 15px 0 0 0; } } /* Mobile: remove ALL width caps so fields use the full screen width. This overrides the 496px form cap, 300px fieldset>div cap, and the 360px input cap that apply on desktop. Breakpoint lifted from 810px → 1000px so tablets and split-view laptops also get the edge-to-edge mobile layout. */ @media screen and (max-width: 1000px) { .rtb-booking-form-form { max-width: 100% !important; padding-left: 0; padding-right: 0; } .rtb-booking-form fieldset { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .rtb-booking-form fieldset > div { max-width: 100% !important; } .rtb-booking-form fieldset.reservation { flex-direction: column; } .rtb-booking-form .rtb-text.date, .rtb-booking-form .rtb-text.time { width: 100% !important; max-width: 100% !important; } .rtb-booking-form input[type="text"], .rtb-booking-form input[type="email"], .rtb-booking-form input[type="tel"], .rtb-booking-form textarea, .rtb-booking-form #rtb-date, .rtb-booking-form #rtb-time { width: 100% !important; max-width: 100% !important; } .rtb-booking-form .rtb-select, .rtb-booking-form .rtb-select .selectize-control { max-width: 100% !important; width: 100% !important; } /* All placeholder overlays and special blocks full width */ .rtb-booking-form .rtb-select.party:not(.rtb-party-ready)::after, .rtb-booking-form .rtb-text.date:not(:has(.picker__input))::after { max-width: 100% !important; } .rtb-booking-form .rtb-summary, .rtb-booking-form .rtb-trust-hint, .rtb-admin-notice { max-width: 100% !important; } } /* App WebView (React-Native reservation block): match the app's background outside the WebView (#F9FAFC — a near-white cool grey) so the form blends with the native screens/blocks around it. App embed only — the standalone iframe keeps its own white page. Forced on as well: WordPress leaves the html element transparent, which in the native WebView can reveal the WebView background at the edges (the top/bottom block margins). The form's filled fields keep the default grey token (#f2f2f2) — slightly darker than this near-white page, so they still read as filled/borderless. */ html.rtb-app-embed, html.rtb-app-embed body { background-color: #F9FAFC !important; } /* App WebView (React-Native reservation block): fill the full WebView width at EVERY viewport size so the form aligns edge-to-edge with the app's other content blocks. Mirrors the ≤1000px mobile rules but is not width-gated, so it also covers wide/tablet WebViews (>1000px). The rtb-app-embed class is set in restaurant-reservations.php when window.ReactNativeWebView is present. */ html.rtb-app-embed .rtb-booking-form { padding-left: 0 !important; padding-right: 0 !important; } html.rtb-app-embed .rtb-booking-form-form { max-width: 100% !important; padding-left: 0; padding-right: 0; } html.rtb-app-embed .rtb-booking-form fieldset { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } html.rtb-app-embed .rtb-booking-form fieldset > div { max-width: 100% !important; } html.rtb-app-embed .rtb-booking-form .rtb-text.date, html.rtb-app-embed .rtb-booking-form .rtb-text.time { width: 100% !important; max-width: 100% !important; } html.rtb-app-embed .rtb-booking-form input[type="text"], html.rtb-app-embed .rtb-booking-form input[type="email"], html.rtb-app-embed .rtb-booking-form input[type="tel"], html.rtb-app-embed .rtb-booking-form textarea, html.rtb-app-embed .rtb-booking-form #rtb-date, html.rtb-app-embed .rtb-booking-form #rtb-time { width: 100% !important; max-width: 100% !important; } html.rtb-app-embed .rtb-booking-form .rtb-select, html.rtb-app-embed .rtb-booking-form .rtb-select .selectize-control { max-width: 100% !important; width: 100% !important; } html.rtb-app-embed .rtb-booking-form .rtb-select.party:not(.rtb-party-ready)::after, html.rtb-app-embed .rtb-booking-form .rtb-text.date:not(:has(.picker__input))::after { max-width: 100% !important; } html.rtb-app-embed .rtb-booking-form .rtb-summary, html.rtb-app-embed .rtb-booking-form .rtb-trust-hint, html.rtb-app-embed .rtb-admin-notice { max-width: 100% !important; } /* The summary card has a drop-shadow. Edge-to-edge in the WebView it would sit flush against the viewport and its left/right shadow would be clipped, so inset it by 16px each side (> the 12px shadow blur) to keep the shadow fully visible. */ html.rtb-app-embed .rtb-booking-form .rtb-summary { margin-left: 16px !important; margin-right: 16px !important; max-width: calc(100% - 32px) !important; } /* App WebView cancel flow, TEMPORARY (remove once the native app scrolls the block into view on WebView shrink, see GAS ticket): the WebView must never SHRINK when the cancel flow opens, or the native list's unchanged scroll offset leaves the short page above the viewport. .rtb-cancel-bottom (set in booking-form.js, app embed only) keeps the booking form rendered as a blurred, untouchable backdrop and reorders the flex children so the cancel card sits BELOW it, exactly where the tapped toggle was. A cloned second back-to-form button (.rtb-toggle-top) shows at the very top. */ html.rtb-app-embed .rtb-toggle-top { display: none; } html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom { display: flex; flex-direction: column; } html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-clear { order: 2; } html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-booking-form-form, html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-booking-form-with-tables-graphic { order: 3; } html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-modification-form { order: 4; } html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-modification-toggle { order: 5; } html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-modification-toggle.rtb-toggle-top { display: block; order: 1; margin-bottom: 16px; } /* The "transparent layer that blurs": blur + dim the inert form and swallow pointer input (the inert attribute set by JS blocks keyboard/AT focus). */ html.rtb-app-embed .rtb-booking-form.rtb-cancel-bottom .rtb-booking-form-form { filter: blur(2px); opacity: 0.55; pointer-events: none; } /* ---------- Admin language picker (collapsible) ---------- Desktop: inner list always visible, summary toggle hidden. Mobile (≤1000px): summary toggle visible, inner list collapses via native
behaviour until user clicks the summary. `
` normally hides all non- children when not [open] — we override that for desktop so the list is always shown regardless of the open state. */ /* Force every top-level booking-form wrapper + its siblings (language picker, admin-mode notice, actual form wrapper) to the same left edge. Covers the case where a theme's `.entry-content` or article wrapper centers block children. Specificity boost via `body` prefix + `!important` beats theme/inline-style overrides. */ body form[name="languageForm"], body .rtb-language-toggle, body .rtb-admin-notice, body .rtb-booking-form, body .rtb-booking-form-form { margin-left: 0 !important; margin-right: auto !important; } .rtb-language-toggle { display: block; position: relative; /* anchor for mobile popover */ margin-bottom: 10px !important; max-width: 496px; } .rtb-language-toggle > .rtb-language-summary { display: none; /* desktop: toggle button hidden */ } .rtb-language-toggle > .languages { display: flex !important; position: static !important; right: auto !important; top: auto !important; transform: none !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; max-width: 496px; } .rtb-language-toggle > .languages > .rtb-language-preview-title { flex: 0 0 100%; font-weight: 600; font-size: 13px; color: var(--rtb-label, #374f67); margin: 0 0 2px 0; } /* Theme uses `visibility: hidden` on `.hidden` spans which still consume layout space — that made each language pill much wider than the visible "EN" / "DE" text and pushed items out of alignment in our horizontal inline layout. Kill the reserved space with `display: none`. */ .rtb-language-toggle > .languages .hidden { display: none !important; } /* Proper screen-reader-only class for the full language name ("English", "German", …). Takes NO visual space but is still read by AT. Replaces the theme's `.hidden` visibility approach. */ .rtb-screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Normalize each language option to an inline-flex pill so the row reads as equal, evenly-spaced segmented controls. */ .rtb-language-toggle > .languages .language__en, .rtb-language-toggle > .languages .language__de, .rtb-language-toggle > .languages .language__fr, .rtb-language-toggle > .languages .language__it, .rtb-language-toggle > .languages .language__nl, .rtb-language-toggle > .languages .language__es { display: inline-flex; flex: 0 0 auto; margin: 0; } .rtb-language-toggle > .languages .language__label { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; margin: 0 !important; text-decoration: none !important; } .rtb-language-toggle > .languages .language__link[aria-current="true"] { background-color: #00abe8 !important; color: #fff !important; } /* Touch devices below 1000px: party stepper replaces dropdown. pointer:coarse prevents the stepper from appearing inside narrow desktop iframes (fine pointer = mouse = keep the dropdown). */ @media screen and (max-width: 1000px) and (pointer: coarse) { .rtb-booking-form .rtb-select.party .selectize-control { position: absolute !important; width: 0 !important; height: 0 !important; overflow: visible !important; opacity: 0; pointer-events: none; transition: none !important; } .rtb-booking-form .rtb-select.party .selectize-control.dropdown-active { position: relative !important; width: 100% !important; height: auto !important; opacity: 1; pointer-events: auto; } .rtb-booking-form .rtb-select.party .selectize-control *, .rtb-booking-form .rtb-select.party .selectize-dropdown { transition: none !important; animation: none !important; } .rtb-booking-form .rtb-select.party .selectize-control > .selectize-input { display: none !important; } .rtb-booking-form .rtb-party-stepper { display: inline-flex; align-items: center; gap: 8px; } .rtb-booking-form .rtb-party-stepper-range { display: inline-block; margin-left: 4px; font-size: 13px; color: var(--rtb-placeholder, #666); white-space: nowrap; } } /* Hide the range hint on desktop — the dropdown conveys the range. */ .rtb-booking-form .rtb-party-stepper-range { display: none; }