/* ============================================================
   Booking Form – Minimal Layout
   Styled to match the Gastfreund theme design language
   ============================================================ */

/* ---------- Design tokens ---------- */
.rtb-booking-form {
  --rtb-blue:           #00abe8;
  --rtb-blue-light:     #7ac6f9;
  --rtb-blue-dark:      #374f67;
  --rtb-border:         #d8d8d8;
  --rtb-border-focus:   #00abe8;
  --rtb-focus-ring:     #2563EB;
  --rtb-text:           #374f67;
  --rtb-label:          #000;
  --rtb-placeholder:    #374f67;
  --rtb-disabled-bg:    #eeeeee;
  --rtb-error:          #cf303e;
  --rtb-radius:         4px;         /* square-ish button */
  --rtb-radius-sm:      4px;         /* input corners (portal: 4px) */
  --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-input-height:   44px;
  --rtb-input-padding:  var(--rtb-spacing-small);
  --rtb-input-font:     14px;
  --rtb-input-line:     21px;
  --rtb-input-border:   #595959;
  --rtb-label-size:     14px;
  --rtb-label-weight:   600;
  --rtb-button-height:  36px;
  --rtb-button-font:    16px;
}

/* ---------- 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: #000;
}

/* ---------- 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: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='22' viewBox='0 0 67 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.73125 75.9615C4.81319 75.9615 3.21181 75.3191 1.92708 74.0344C0.642361 72.7497 0 71.1483 0 69.2302V16.026C0 14.108 0.642361 12.5066 1.92708 11.2219C3.21181 9.93715 4.81319 9.29479 6.73125 9.29479H14.1021V2.24375C14.1021 1.59722 14.3146 1.06146 14.7396 0.636457C15.1646 0.212151 15.7 0 16.3458 0C16.9924 0 17.5281 0.212151 17.9531 0.636457C18.3774 1.06146 18.5896 1.59722 18.5896 2.24375V9.29479H48.3979V2.08333C48.3979 1.49028 48.5969 0.99479 48.9948 0.596873C49.3927 0.198956 49.8882 0 50.4812 0C51.0736 0 51.5687 0.198956 51.9667 0.596873C52.3653 0.99479 52.5646 1.49028 52.5646 2.08333V9.29479H59.9354C61.8535 9.29479 63.4549 9.93715 64.7396 11.2219C66.0243 12.5066 66.6667 14.108 66.6667 16.026V69.2302C66.6667 71.1483 66.0243 72.7497 64.7396 74.0344C63.4549 75.3191 61.8535 75.9615 59.9354 75.9615H6.73125ZM6.73125 71.7948H59.9354C60.5771 71.7948 61.1649 71.5278 61.699 70.9938C62.233 70.4597 62.5 69.8719 62.5 69.2302V32.6927H4.16667V69.2302C4.16667 69.8719 4.43368 70.4597 4.96771 70.9938C5.50174 71.5278 6.08958 71.7948 6.73125 71.7948ZM4.16667 28.525H62.5V16.026C62.5 15.3844 62.233 14.7965 61.699 14.2625C61.1649 13.7285 60.5771 13.4615 59.9354 13.4615H6.73125C6.08958 13.4615 5.50174 13.7285 4.96771 14.2625C4.43368 14.7965 4.16667 15.3844 4.16667 16.026V28.525Z' fill='%23595959'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px 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 <select> (display:none) is replaced by selectize.
   label (20px) + margin (6px) + input (44px) + border (2px) ≈ 72px,
   rounded up to 76px for breathing room. */
.rtb-booking-form .rtb-select {
  min-height: 76px;
}

/* ---------- Legends ---------- */
.rtb-booking-form fieldset legend {
  font-family: var(--rtb-font);
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 10px;
  color: var(--rtb-label);
}

/* ---------- Labels ---------- */
.rtb-booking-form label {
  display: block;
  font-family: var(--rtb-font);
  font-size: var(--rtb-label-size);
  font-style: normal;
  font-weight: var(--rtb-label-weight);
  line-height: 20px;
  color: var(--rtb-label);
  margin-bottom: 6px;
  padding-left: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ---------- Text / email / tel inputs ----------
   Gastfreund design system: 44px, 16px padding, stretch to parent width. */
.rtb-booking-form input[type="text"],
.rtb-booking-form input[type="email"],
.rtb-booking-form input[type="tel"] {
  font-family: var(--rtb-font) !important;
  font-size: var(--rtb-input-font) !important;
  line-height: var(--rtb-input-line) !important;
  color: #000;
  width: 100% !important;
  max-width: 360px !important;
  height: var(--rtb-input-height) !important;
  border: 1px solid var(--rtb-input-border);
  border-radius: var(--rtb-radius-sm);
  outline: none;
  padding: var(--rtb-spacing-small, 16px) !important;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.rtb-booking-form input[type="text"]:focus,
.rtb-booking-form input[type="email"]:focus,
.rtb-booking-form input[type="tel"]:focus {
  border: 1px solid var(--rtb-border-focus) !important;
  color: #000;
  outline: none;
}

/* Keyboard focus ring — only after Tab navigation (not mouse clicks).
   Browsers' native `:focus-visible` fires for text inputs on mouse
   click too (spec: text inputs expect keyboard input next), which
   isn't what we want. Gate on `body.rtb-keyboard-nav` set by the JS
   keydown/mousedown listener in booking-form.js. */
body.rtb-keyboard-nav .rtb-booking-form input:not([type="checkbox"]):not([type="radio"]):focus,
body.rtb-keyboard-nav .rtb-booking-form textarea:focus,
body.rtb-keyboard-nav .rtb-booking-form select:focus,
body.rtb-keyboard-nav .rtb-booking-form button:focus,
body.rtb-keyboard-nav .rtb-booking-form a:focus,
body.rtb-keyboard-nav .rtb-booking-form .selectize-input.focus,
body.rtb-keyboard-nav .rtb-language-toggle a:focus,
body.rtb-keyboard-nav .rtb-admin-notice a:focus,
body.rtb-keyboard-nav .rtb-admin-notice button:focus {
  outline: 2px solid var(--rtb-focus-ring) !important;
  outline-offset: 2px !important;
}
/* Checkbox uses appearance:none + ::before pseudo — paint the focus
   ring on the pseudo so it frames the visible control. */
body.rtb-keyboard-nav .rtb-booking-form input[type="checkbox"]:focus::before {
  outline: 2px solid var(--rtb-focus-ring) !important;
  outline-offset: 2px !important;
}
/* Radio is styled on the input itself (no ::before) — ring goes
   directly on the element. */
body.rtb-keyboard-nav .rtb-booking-form input[type="radio"]:focus {
  outline: 2px solid var(--rtb-focus-ring) !important;
  outline-offset: 2px !important;
}
/* Pickadate moves focus off the date/time input onto its picker holder
   (tabindex="-1" div) the moment the picker opens — so the `:focus`
   ring vanishes. While the picker is open the input keeps the
   `.picker__input--active` class; paint the keyboard ring on that.
   Mouse clicks strip `rtb-keyboard-nav` first, so mouse opens stay
   ring-free. */
body.rtb-keyboard-nav .rtb-booking-form .picker__input--active {
  outline: 2px solid var(--rtb-focus-ring) !important;
  outline-offset: 2px !important;
}
/* Time wrapper uses `overflow: hidden` for the max-height expand/
   collapse animation, which clips the outline-offset ring drawn
   *outside* the input. Use an inset box-shadow for the time input so
   the ring renders inside the border box and isn't cropped. */
body.rtb-keyboard-nav .rtb-booking-form .rtb-text.time input:focus,
body.rtb-keyboard-nav .rtb-booking-form .rtb-text.time .picker__input--active {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--rtb-focus-ring) !important;
}

/* Hover preview — only on devices that actually have a pointer
   (avoids the iOS "sticky hover after tap" trap). Fields currently
   in an error state keep their red border, never flip to blue. */
@media (hover: hover) {
  .rtb-booking-form input[type="text"]:not(.invalid_border):not([aria-invalid="true"]):hover,
  .rtb-booking-form input[type="email"]:not(.invalid_border):not([aria-invalid="true"]):hover,
  .rtb-booking-form input[type="tel"]:not(.invalid_border):not([aria-invalid="true"]):hover,
  .rtb-booking-form textarea:not(.invalid_border):not([aria-invalid="true"]):hover,
  .rtb-booking-form .rtb-select:not(:has(.invalid_border)) .selectize-input:hover {
    border-color: var(--rtb-blue, #00abe8) !important;
  }
}

/* Date + time inputs specifically */
#rtb-date,
#rtb-time {
  color: #000;
  font-weight: 400;
  background: transparent;
  padding: var(--rtb-spacing-small, 16px) !important;
  padding-right: 40px !important;
  cursor: pointer;
}

.picker__input {
  cursor: pointer !important;
  padding-right: 0 !important;
}

.picker__input.picker__input--active {
  border: 1px solid var(--rtb-border-focus) !important;
  color: #000 !important;
}

/* ---------- Textarea ---------- */
.rtb-booking-form textarea {
  font-family: var(--rtb-font) !important;
  font-size: var(--rtb-input-font);
  line-height: var(--rtb-input-line);
  color: #000;
  border: 1px solid var(--rtb-input-border);
  border-radius: var(--rtb-radius-sm);
  padding: var(--rtb-input-padding);
  outline: none;
  resize: vertical;
  width: 100% !important;
  max-width: 360px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.rtb-booking-form textarea:focus {
  color: #000;
  border: 1px solid var(--rtb-border-focus) !important;
}

/* Message visibility: the optional message textarea is now shown inline by
   default (used to be hidden behind an "Add a Message" link). A compact
   height keeps it visually light; users can expand by typing. */
.rtb-booking-form .message {
  display: block !important;
  visibility: visible;
  height: auto;
  margin-top: 10px;
}

.rtb-booking-form .message textarea {
  min-height: var(--rtb-input-height, 44px);
  height: var(--rtb-input-height, 44px);
  max-height: 180px;
  resize: none;
  overflow-y: hidden;
  /* Vertical padding centers single line: (44px - 21px line) / 2 ≈ 11px */
  padding: 11px 16px 11px 36px !important;
  transition: height 0.2s ease;
}

/* Pencil icon on the left of the message textarea.
   Use a wrapper around the textarea (label is a sibling, not parent)
   so the icon centers relative to the textarea, not the full wrapper. */
.rtb-booking-form .message label {
  display: block;
}
/* Pencil icon — grey by default, accent-colored when textarea has content.
   Uses background-image on the textarea itself so it stays vertically
   centered as the textarea grows. The accent-colored SVG is injected via
   PHP inline style (rtb_add_custom_styling) with the actual white-label hex. */
.rtb-booking-form .message textarea {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19' fill='none'%3E%3Cpath d='M1.80775 18.9385C1.30258 18.9385 0.875 18.7635 0.525 18.4135C0.175 18.0635 0 17.6359 0 17.1308V3.74625C0 3.24108 0.175 2.8135 0.525 2.4635C0.875 2.1135 1.30258 1.9385 1.80775 1.9385H8.65975C8.90975 1.9385 9.09725 2.017 9.22225 2.174C9.34725 2.33117 9.40975 2.50267 9.40975 2.6885C9.40975 2.87433 9.34467 3.04583 9.2145 3.203C9.08433 3.36 8.89425 3.4385 8.64425 3.4385H1.80775C1.73075 3.4385 1.66025 3.47058 1.59625 3.53475C1.53208 3.59875 1.5 3.66925 1.5 3.74625V17.1308C1.5 17.2078 1.53208 17.2782 1.59625 17.3422C1.66025 17.4064 1.73075 17.4385 1.80775 17.4385H15.1923C15.2692 17.4385 15.3398 17.4064 15.4038 17.3422C15.4679 17.2782 15.5 17.2078 15.5 17.1308V10.2308C15.5 9.98075 15.5785 9.79325 15.7355 9.66825C15.8927 9.54325 16.0642 9.48075 16.25 9.48075C16.4358 9.48075 16.6073 9.54325 16.7645 9.66825C16.9215 9.79325 17 9.98075 17 10.2308V17.1308C17 17.6359 16.825 18.0635 16.475 18.4135C16.125 18.7635 15.6974 18.9385 15.1923 18.9385H1.80775ZM6 12.0345V10.254C6 10.0128 6.04683 9.78108 6.1405 9.55875C6.234 9.33625 6.36283 9.143 6.527 8.979L15.0598 0.446249C15.2148 0.291083 15.3853 0.177916 15.5712 0.106749C15.7571 0.0355823 15.9462 0 16.1385 0C16.3347 0 16.5231 0.0355823 16.7038 0.106749C16.8846 0.177916 17.0493 0.287832 17.198 0.436499L18.4538 1.6885C18.5986 1.84367 18.7098 2.01483 18.7875 2.202C18.865 2.38917 18.9038 2.57892 18.9038 2.77125C18.9038 2.96358 18.8708 3.15008 18.8048 3.33075C18.7388 3.51158 18.6282 3.6795 18.473 3.8345L9.9115 12.3962C9.74733 12.5602 9.55408 12.6917 9.33175 12.7905C9.10925 12.8892 8.8775 12.9385 8.6365 12.9385H6.904C6.64617 12.9385 6.43108 12.8522 6.25875 12.6797C6.08625 12.5074 6 12.2923 6 12.0345ZM7.5 11.4385H8.74625L14.9788 5.20575L14.3558 4.58275L13.6885 3.9405L7.5 10.129V11.4385Z' fill='%23A6A6A6'/%3E%3C/svg%3E") no-repeat 10px center !important;
  background-size: 19px 19px !important;
  padding-left: 38px !important;
  transition: background-image 0.15s ease;
}

.rtb-booking-form .rtb-textarea.message.message-open {
  visibility: visible;
  height: 120px !important;
}

.message-open label {
  color: #000 !important;
  font-family: var(--rtb-font);
  font-size: 11px;
  margin-bottom: 10px;
}

/* ---------- Party select + Selectize ---------- */
#rtb-party {
  font-family: var(--rtb-font) !important;
  font-size: 13px;
  padding-left: 9px;
  min-width: 74px !important;
  height: 30px;
  border: 1px solid var(--rtb-border);
  border-radius: var(--rtb-radius-sm);
  outline: none;
  cursor: pointer;
  color: #000;
}

/* Hide all native <select> 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 16px;
  max-width: none;
  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: 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='%23595959' 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='%23595959' 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 16px !important;
  line-height: calc(var(--rtb-input-height) - 2px) !important;
  border: 1px solid var(--rtb-input-border);
  border-radius: var(--rtb-radius-sm);
  box-shadow: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-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 var(--rtb-border-focus) !important;
  color: #000;
  outline: none;
  box-shadow: none !important;
}

.rtb-booking-form .selectize-dropdown {
  font-size: 13px;
  color: var(--rtb-text);
  border-top: 1px solid #d0d0d0 !important;
  box-shadow: none !important;
}

.rtb-booking-form .selectize-dropdown .option {
  padding: 5px 16px !important;
}

.rtb-booking-form .selectize-dropdown .option:hover,
.rtb-booking-form .selectize-dropdown .option.active {
  background: var(--rtb-hover-color, var(--rtb-blue, #00abe8));
  color: #fff;
}

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

/* 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: 15px;
  height: 15px;
  margin-bottom: -3px;
  border: 1px solid #a0a0a0;
  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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M7.6 10.4L5.45 8.25C5.27 8.07 5.03 7.98 4.75 7.98C4.47 7.98 4.23 8.07 4.05 8.25C3.87 8.43 3.78 8.67 3.78 8.95C3.78 9.23 3.87 9.47 4.05 9.65L6.9 12.5C7.1 12.7 7.33 12.8 7.6 12.8C7.87 12.8 8.1 12.7 8.3 12.5L13.95 6.85C14.13 6.67 14.23 6.43 14.23 6.15C14.23 5.87 14.13 5.63 13.95 5.45C13.77 5.27 13.53 5.18 13.25 5.18C12.97 5.18 12.73 5.27 12.55 5.45L7.6 10.4ZM2 18C1.45 18 0.98 17.8 0.59 17.41C0.2 17.02 0 16.55 0 16V2C0 1.45 0.2 0.98 0.59 0.59C0.98 0.2 1.45 0 2 0H16C16.55 0 17.02 0.2 17.41 0.59C17.8 0.98 18 1.45 18 2V16C18 16.55 17.8 17.02 17.41 17.41C17.02 17.8 16.55 18 16 18H2Z" fill="black"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M7.6 10.4L5.45 8.25C5.27 8.07 5.03 7.98 4.75 7.98C4.47 7.98 4.23 8.07 4.05 8.25C3.87 8.43 3.78 8.67 3.78 8.95C3.78 9.23 3.87 9.47 4.05 9.65L6.9 12.5C7.1 12.7 7.33 12.8 7.6 12.8C7.87 12.8 8.1 12.7 8.3 12.5L13.95 6.85C14.13 6.67 14.23 6.43 14.23 6.15C14.23 5.87 14.13 5.63 13.95 5.45C13.77 5.27 13.53 5.18 13.25 5.18C12.97 5.18 12.73 5.27 12.55 5.45L7.6 10.4ZM2 18C1.45 18 0.98 17.8 0.59 17.41C0.2 17.02 0 16.55 0 16V2C0 1.45 0.2 0.98 0.59 0.59C0.98 0.2 1.45 0 2 0H16C16.55 0 17.02 0.2 17.41 0.59C17.8 0.98 18 1.45 18 2V16C18 16.55 17.8 17.02 17.41 17.41C17.02 17.8 16.55 18 16 18H2Z" fill="black"/></svg>') no-repeat center / contain;
}

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

.rtb-booking-form-form .rtb-checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 3px 0 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;
  margin: 2px 0 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 label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 18px;
  max-width: 496px;
  margin-left: 0;
  margin-bottom: 0;
  color: #787878 !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: 0;
}

/* 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: 8px;
  line-height: 22px;
}
.rtb-booking-form-form .rtb-confirm:not(.consent-statement) > label > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 3px 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 ----------
   Aligned with portal reference: 56px pill, 16px Montserrat, soft shadow. */
.rtb-booking-form button {
  height: var(--rtb-button-height);
  font-family: var(--rtb-font) !important;
  font-size: 14px;
  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: rgba(55, 79, 103, 0.16) 4px 8px 16px 0px;
  -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: 0 20px;
  box-shadow: var(--rtb-blue) 0 0 0 0 inset;
  transition: all var(--rtb-transition);
}

.rtb-booking-form button[type="submit"]:hover:enabled {
  background-color: var(--rtb-blue-light);
  box-shadow: var(--rtb-blue-light) 0 0 0 75px inset;
}

.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: 14px !important;
  font-style: normal !important;
  font-weight: 600 !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: 6px;
}

.rtb-booking-form .rtb-error:before {
  display: none !important;
}

/* 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. 6px 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(6px + 1em + 28px);
}

/* Inline validation classes (set via JS). Invalid fields get a red
   border on a white background, 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: #fff;
}
/* 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;
}

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

/* ---------- Modification / cancellation ---------- */
.rtb-modification-toggle {
  font-family: var(--rtb-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: #fff;
  background-color: var(--rtb-blue) !important;
  border: none !important;
  border-radius: var(--rtb-radius) !important;
  padding: 10px 15px !important;
  margin-left: 2px;
  margin-bottom: 40px !important;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease !important;
  position: relative;
  bottom: 0;
  z-index: 1;
  display: inline-block;
  box-shadow: none !important;
}

.rtb-modification-toggle:hover {
  background-color: var(--rtb-blue-light) !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: 1px solid var(--rtb-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  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;
}

.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: #000 !important;
}

.picker__weekday {
  font-family: var(--rtb-font) !important;
  font-size: 14px !important;
  color: #000 !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: #000;
}

.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: 4px;
  border: 1px solid var(--rtb-border) !important;
  background: #f8fdff !important;
}

.picker__list-item {
  background-color: #f8fdff !important;
  border: none !important;
  height: 28px;
  line-height: 28px;
  float: left;
  min-width: 65px !important;
  padding: 0.25em 0.5em !important;
  text-align: right !important;
}

.picker__list-item:hover {
  color: #fff !important;
  background-color: #6dd9ff !important;
}

.picker__list-item--selected {
  color: #000 !important;
  font-weight: 500;
  background-color: rgba(224, 244, 253, 0.55) !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],
[placeholder],
*[placeholder] {
  color: var(--rtb-placeholder) !important;
}

/* ---------- 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 {
  opacity: 0.4;
  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: #000;
  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;
  }
}

/* ---------- Admin language picker (collapsible) ----------
   Desktop: inner list always visible, summary toggle hidden.
   Mobile (≤1000px): summary toggle visible, inner list collapses
   via native <details> behaviour until user clicks the summary.
   `<details>` normally hides all non-<summary> 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;
}