/* Food & Beverage Reservations — four structural layouts (calendar,
   card_left, card_right, compact). Section Style owns surrounding copy and
   page composition. The nested Edit Form authority independently owns the
   operational form preset, surface color, font, font size, text color, and
   button treatment. This component CSS translates that form-owned contract
   into one consistent owner-preview/public presentation. */

.wb-fb-reservations {
  display: grid;
  gap: 1rem;
  background: var(--wb-feature-section-default-surface, #d3d3d3);
  color: inherit;
}

/* Runtime visibility is authoritative. Normal guidance statuses collapse,
   while loading, unavailable, and error messages remain available. */
.wb-fb-reservations [hidden] {
  display: none !important;
}

.wb-fb-reservations-copy {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.wb-fb-reservations-copy h2 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.wb-fb-reservations-copy p {
  margin: 0;
  max-width: 58ch;
}

.wb-fb-reservations-status {
  margin-bottom: 0.85rem;
  font-weight: 700;
}

.wb-fb-reservations-status:empty {
  display: none;
  margin: 0;
}

.wb-fb-reservations-status.is-error {
  color: #dc2626;
}

/* ---- Shared form grid (customer fields, notes, submit) ---- */
.wb-fb-reservations-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  min-width: 0;
}

.wb-fb-reservations-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1em;
  font-weight: 700;
}

.wb-fb-reservations-form input,
.wb-fb-reservations-form textarea,
.wb-fb-reservations-form select {
  width: 100%;
  border: 1px solid currentColor;
  border-color: var(
    --wb-reservation-control-border,
    color-mix(in srgb, currentColor 22%, transparent)
  );
  border-radius: var(--wb-reservation-control-radius, 0.7rem);
  padding: 0.6rem 0.7rem;
  background: var(
    --wb-reservation-control-surface,
    color-mix(in srgb, currentColor 4%, transparent)
  );
  color: inherit;
  font: inherit;
}

.wb-fb-reservations-form select:disabled {
  opacity: 0.6;
}

.wb-fb-reservations-form label:has(textarea),
.wb-fb-reservations-form > button[type="submit"] {
  grid-column: 1 / -1;
}

.wb-fb-reservations-customer-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  grid-column: 1 / -1;
}

.wb-fb-reservations-customer-details label:has(textarea) {
  grid-column: 1 / -1;
}

/* ---- Month calendar primitive: shared by the always-visible Calendar
   layout and the Card/Compact date popover. Real 7-column weekday grid,
   not a flat button list. ---- */
.wb-fb-reservations-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.wb-fb-reservations-month-nav {
  border: 1px solid currentColor;
  border-color: var(
    --wb-reservation-control-border,
    color-mix(in srgb, currentColor 28%, transparent)
  );
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  background: var(
    --wb-reservation-control-surface,
    color-mix(in srgb, currentColor 6%, transparent)
  );
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.wb-fb-reservations-month-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.wb-fb-reservations-calendar-grid,
.wb-fb-reservations-popover-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
}

.wb-fb-reservations-calendar-weekday {
  text-align: center;
  font-size: 0.75em;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.6;
  padding-block: 0.2rem;
}

.wb-fb-reservations-calendar-day,
.wb-fb-reservations-calendar-blank {
  aspect-ratio: 1;
}

.wb-fb-reservations-calendar-day {
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.6rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: not-allowed;
  opacity: 0.35;
}

.wb-fb-reservations-calendar-day.is-available {
  border-color: var(
    --wb-reservation-available-border,
    color-mix(in srgb, currentColor 42%, transparent)
  );
  background: var(
    --wb-reservation-available-surface,
    color-mix(in srgb, currentColor 8%, transparent)
  );
  cursor: pointer;
  opacity: 1;
}

.wb-fb-reservations-calendar-day.is-selected {
  background: #2563eb;
  color: #fff;
  border-color: transparent;
}

/* ---- Availability Calendar layout ---- */
.wb-fb-reservations-calendar-wrap {
  display: grid;
  /* ~40% calendar / ~60% form — a compact website section, not a full booking app. */
  grid-template-columns: minmax(240px, 2fr) minmax(280px, 3fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  /* Cap absolute size on wide screens — matches the editor canvas's own
     "normal desktop" width (.website-builder-canvas) so the block doesn't
     keep growing to fill an ultra-wide viewport. */
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
}

.wb-fb-reservations-calendar-wrap > .wb-fb-reservations-status {
  grid-column: 1 / -1;
}

.wb-fb-reservations-calendar-shell,
.wb-fb-reservations-calendar-detail {
  border: var(--wb-reservation-panel-border-width, 1px) solid
    var(
      --wb-reservation-panel-border,
      color-mix(in srgb, currentColor 20%, transparent)
    );
  border-radius: var(--wb-reservation-panel-radius, 1.1rem);
  padding: 1rem;
  background: var(--wb-reservation-form-surface, transparent);
  color: inherit;
  box-shadow: var(--wb-reservation-panel-shadow, none);
  backdrop-filter: var(--wb-reservation-panel-backdrop, none);
}

.wb-fb-reservations-selected-date {
  font-weight: 800;
  margin-bottom: 0.6rem;
}

/* ---- Reservation Card Left / Card Right ----
   The .wb-section root stays full width so a Section Style background,
   gradient, or image covers the section's entire horizontal band; only the
   inner layout wrapper is width-capped. The DOM order already differs
   between the two factories (card-first vs copy-first); this grid reinforces
   that reading order without needing `order` to fake it. */
.wb-fb-reservations-card_left,
.wb-fb-reservations-card_right {
  width: 100%;
}

/* Compatibility: sections saved before the inner-wrapper split still have
   the card/copy children directly on the section root — the same box that
   carries the Section Style background. Capping that box with max-width
   would shrink the background with it, so instead of shrinking the box we
   cap the box's *content* with responsive inline padding: backgrounds paint
   under padding by default (background-origin defaults to padding-box), so
   the background/gradient/image still spans the full section band while the
   grid content still visually centers and caps at 1180px. Once every saved
   section has been migrated/re-saved onto .wb-fb-reservations-card-layout,
   this fallback and the :has() check below can be removed. */
.wb-fb-reservations-card_left:not(:has(> .wb-fb-reservations-card-layout)),
.wb-fb-reservations-card_right:not(:has(> .wb-fb-reservations-card-layout)) {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  box-sizing: border-box;
  padding-inline: max(0px, calc((100% - 1180px) / 2));
}

.wb-fb-reservations-card-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
}

.wb-fb-reservations-card {
  border: var(--wb-reservation-panel-border-width, 1px) solid
    var(
      --wb-reservation-panel-border,
      color-mix(in srgb, currentColor 22%, transparent)
    );
  border-radius: var(--wb-reservation-panel-radius, 1.25rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--wb-reservation-form-surface, transparent);
  color: inherit;
  box-shadow: var(--wb-reservation-panel-shadow, none);
  backdrop-filter: var(--wb-reservation-panel-backdrop, none);
  min-width: 0;
}

/* ---- Date field + popover (Card Left/Right and Compact) ---- */
.wb-fb-reservations-date-field {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1em;
  font-weight: 700;
}

.wb-fb-reservations-date-field-label {
  display: block;
}

.wb-fb-reservations-date-trigger {
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid currentColor;
  border-color: var(
    --wb-reservation-control-border,
    color-mix(in srgb, currentColor 22%, transparent)
  );
  border-radius: var(--wb-reservation-control-radius, 0.7rem);
  padding: 0.6rem 0.7rem;
  background: var(
    --wb-reservation-control-surface,
    color-mix(in srgb, currentColor 4%, transparent)
  );
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.wb-fb-reservations-date-popover {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 5;
  width: min(320px, 100%);
  max-width: 100%;
  border: 1px solid currentColor;
  border-color: var(
    --wb-reservation-control-border,
    color-mix(in srgb, currentColor 24%, transparent)
  );
  border-radius: var(--wb-reservation-panel-radius, 1rem);
  padding: 0.85rem;
  background: var(
    --wb-reservation-form-popover-surface,
    var(--wb-reservation-form-surface, #fff)
  );
  color: inherit;
  box-shadow: var(
    --wb-reservation-popover-shadow,
    0 12px 30px color-mix(in srgb, currentColor 14%, transparent)
  );
  backdrop-filter: var(--wb-reservation-panel-backdrop, none);
}

.wb-fb-reservations-date-popover.is-open {
  display: block;
}

.wb-fb-reservations-compact .wb-fb-reservations-date-popover {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

@media (max-width: 480px) {
  .wb-fb-reservations-date-popover {
    position: static;
    width: 100%;
    margin-top: 0.4rem;
    box-shadow: none;
  }
}

/* ---- Compact Reservation ----
   Same outer-surface/inner-content split as Card Left/Right above: the
   .wb-section root stays full width, and only the inner layout wrapper is
   width-capped. */
.wb-fb-reservations-compact {
  width: 100%;
}

/* Compatibility: same rationale as Card Left/Right above — sections saved
   before the inner-wrapper split still need the cap applied without
   shrinking the box that carries the Section Style background, so it's
   applied as inline padding rather than max-width/margin. */
.wb-fb-reservations-compact:not(:has(> .wb-fb-reservations-compact-layout)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.5rem;
  box-sizing: border-box;
  padding-inline: max(0px, calc((100% - 620px) / 2));
}

.wb-fb-reservations-compact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.5rem;
  /* Narrower cap than the two-column layouts — a single card stretched to
     1180px would look sparse, not compact. */
  max-width: 620px;
  width: 100%;
  margin-inline: auto;
}

.wb-fb-reservations-compact-panel {
  min-width: 0;
  border: var(--wb-reservation-panel-border-width, 1px) solid
    var(--wb-reservation-panel-border, transparent);
  border-radius: var(--wb-reservation-panel-radius, 1.1rem);
  padding: var(--wb-reservation-compact-padding, 1rem);
  background: var(--wb-reservation-form-surface, transparent);
  box-shadow: var(--wb-reservation-panel-shadow, none);
  backdrop-filter: var(--wb-reservation-panel-backdrop, none);
}

.wb-fb-reservations-compact-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "date time party action";
  gap: 0.6rem;
  align-items: start;
  grid-column: 1 / -1;
}

.wb-fb-reservations-compact-picker .wb-fb-reservations-date-field {
  grid-area: date;
  grid-column: auto;
}

.wb-fb-reservations-compact-picker .wb-fb-reservations-time-field {
  grid-area: time;
}

.wb-fb-reservations-party-field {
  grid-area: party;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1em;
  font-weight: 700;
}

.wb-fb-reservations-continue {
  grid-area: action;
  align-self: start;
  justify-self: end;
  height: 2.6rem;
  margin-top: 0;
}

.wb-fb-reservations-continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Progressive disclosure: hidden until a time is chosen and Continue is
   pressed, publicly and in Preview. Edit mode overrides this below so the
   owner can see and style the full intended geometry. */
.wb-fb-reservations-compact .wb-fb-reservations-customer-details {
  display: none;
}

.wb-fb-reservations-compact .wb-fb-reservations-customer-details.is-expanded {
  display: grid;
}

@media (max-width: 820px) {
  .wb-fb-reservations-calendar-wrap,
  .wb-fb-reservations-card-layout,
  .wb-fb-reservations-card_left:not(:has(> .wb-fb-reservations-card-layout)),
  .wb-fb-reservations-card_right:not(:has(> .wb-fb-reservations-card-layout)),
  .wb-fb-reservations-form,
  .wb-fb-reservations-customer-details {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Card Left starts card-first (form above copy) on desktop for reading-order
     variety, but on a single stacked column the copy should always lead. */
  .wb-fb-reservations-card-layout > .wb-fb-reservations-copy,
  .wb-fb-reservations-card_left:not(:has(> .wb-fb-reservations-card-layout))
    > .wb-fb-reservations-copy,
  .wb-fb-reservations-card_right:not(:has(> .wb-fb-reservations-card-layout))
    > .wb-fb-reservations-copy {
    order: -1;
  }

  .wb-fb-reservations-compact-picker {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "action"
      "date"
      "time"
      "party";
  }
}

/* ---- Existing Website Builder Edit Form projection ----
   The nested form attributes are canonical. The closest structural panel
   carries the derived projection so owner Preview and public rendering use
   the same result. Form Style is a preset bundle (surface, border, radius,
   shadow, control treatment, and a readable default text color). Form
   Background overrides only the form surface. Font, size, explicit text color,
   and button presentation remain independently selectable. */

.wb-fb-reservations-card,
.wb-fb-reservations-calendar-wrap,
.wb-fb-reservations-compact-panel {
  --wb-reservation-form-font:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --wb-reservation-form-size: 1rem;
  --wb-reservation-form-style-color: #0f172a;
  --wb-reservation-form-color: var(--wb-reservation-form-style-color);
  --wb-reservation-form-surface: color-mix(in srgb, #ffffff 78%, transparent);
  --wb-reservation-form-popover-surface: color-mix(
    in srgb,
    #ffffff 96%,
    transparent
  );
  --wb-reservation-panel-border: rgba(15, 23, 42, 0.16);
  --wb-reservation-panel-border-width: 1px;
  --wb-reservation-panel-radius: 1.1rem;
  --wb-reservation-panel-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  --wb-reservation-popover-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  --wb-reservation-panel-backdrop: blur(18px);
  --wb-reservation-control-surface: rgba(255, 255, 255, 0.68);
  --wb-reservation-control-border: rgba(15, 23, 42, 0.18);
  --wb-reservation-control-radius: 0.7rem;
  --wb-reservation-available-surface: rgba(37, 99, 235, 0.08);
  --wb-reservation-available-border: rgba(37, 99, 235, 0.35);
  --wb-reservation-compact-padding: 1rem;
  font-family: var(--wb-reservation-form-font) !important;
  font-size: var(--wb-reservation-form-size);
  color: var(--wb-reservation-form-color) !important;
}

/* Preset-owned visual bundles. These affect only the operational reservation
   form panel; they never write to or infer from Section Style. */
.wb-fb-reservations-card[data-form-style="glass"],
.wb-fb-reservations-calendar-wrap[data-form-style="glass"],
.wb-fb-reservations-compact-panel[data-form-style="glass"] {
  --wb-reservation-form-style-color: #0f172a;
  --wb-reservation-form-surface: color-mix(in srgb, #ffffff 78%, transparent);
  --wb-reservation-form-popover-surface: color-mix(
    in srgb,
    #ffffff 96%,
    transparent
  );
  --wb-reservation-panel-border: rgba(15, 23, 42, 0.16);
  --wb-reservation-panel-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  --wb-reservation-popover-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  --wb-reservation-panel-backdrop: blur(18px);
  --wb-reservation-control-surface: rgba(255, 255, 255, 0.68);
  --wb-reservation-control-border: rgba(15, 23, 42, 0.18);
}

.wb-fb-reservations-card[data-form-style="cct_app"],
.wb-fb-reservations-calendar-wrap[data-form-style="cct_app"],
.wb-fb-reservations-compact-panel[data-form-style="cct_app"] {
  --wb-reservation-form-style-color: #f8fbff;
  --wb-reservation-form-surface: linear-gradient(
    135deg,
    rgba(6, 21, 40, 0.96),
    rgba(15, 23, 42, 0.98) 58%,
    rgba(18, 62, 114, 0.94)
  );
  --wb-reservation-form-popover-surface: #081426;
  --wb-reservation-panel-border: rgba(56, 189, 248, 0.32);
  --wb-reservation-panel-shadow:
    0 18px 44px rgba(2, 6, 23, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --wb-reservation-popover-shadow: 0 16px 38px rgba(2, 6, 23, 0.48);
  --wb-reservation-panel-backdrop: blur(14px);
  --wb-reservation-control-surface: rgba(15, 23, 42, 0.72);
  --wb-reservation-control-border: rgba(56, 189, 248, 0.28);
  --wb-reservation-available-surface: rgba(56, 189, 248, 0.16);
  --wb-reservation-available-border: rgba(125, 211, 252, 0.46);
}

.wb-fb-reservations-card[data-form-style="light"],
.wb-fb-reservations-calendar-wrap[data-form-style="light"],
.wb-fb-reservations-compact-panel[data-form-style="light"] {
  --wb-reservation-form-style-color: #0f172a;
  --wb-reservation-form-surface: #ffffff;
  --wb-reservation-form-popover-surface: #ffffff;
  --wb-reservation-panel-border: #dbe3ee;
  --wb-reservation-panel-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
  --wb-reservation-popover-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  --wb-reservation-panel-backdrop: none;
  --wb-reservation-control-surface: #f8fafc;
  --wb-reservation-control-border: #cbd5e1;
}

.wb-fb-reservations-card[data-form-style="dark"],
.wb-fb-reservations-calendar-wrap[data-form-style="dark"],
.wb-fb-reservations-compact-panel[data-form-style="dark"] {
  --wb-reservation-form-style-color: #f8fafc;
  --wb-reservation-form-surface: #0f172a;
  --wb-reservation-form-popover-surface: #111c31;
  --wb-reservation-panel-border: rgba(255, 255, 255, 0.2);
  --wb-reservation-panel-shadow: 0 16px 40px rgba(2, 6, 23, 0.34);
  --wb-reservation-popover-shadow: 0 14px 34px rgba(2, 6, 23, 0.42);
  --wb-reservation-panel-backdrop: none;
  --wb-reservation-control-surface: rgba(255, 255, 255, 0.08);
  --wb-reservation-control-border: rgba(255, 255, 255, 0.24);
  --wb-reservation-available-surface: rgba(96, 165, 250, 0.18);
  --wb-reservation-available-border: rgba(147, 197, 253, 0.5);
}

.wb-fb-reservations-card[data-form-style="blue"],
.wb-fb-reservations-calendar-wrap[data-form-style="blue"],
.wb-fb-reservations-compact-panel[data-form-style="blue"] {
  --wb-reservation-form-style-color: #1e3a8a;
  --wb-reservation-form-surface: #dbeafe;
  --wb-reservation-form-popover-surface: #eff6ff;
  --wb-reservation-panel-border: #93c5fd;
  --wb-reservation-panel-shadow: 0 14px 34px rgba(30, 64, 175, 0.16);
  --wb-reservation-popover-shadow: 0 12px 30px rgba(30, 64, 175, 0.18);
  --wb-reservation-panel-backdrop: none;
  --wb-reservation-control-surface: rgba(255, 255, 255, 0.66);
  --wb-reservation-control-border: #93c5fd;
  --wb-reservation-available-surface: rgba(37, 99, 235, 0.12);
  --wb-reservation-available-border: rgba(37, 99, 235, 0.45);
}

.wb-fb-reservations-card[data-form-style="minimal"],
.wb-fb-reservations-calendar-wrap[data-form-style="minimal"],
.wb-fb-reservations-compact-panel[data-form-style="minimal"] {
  --wb-reservation-form-style-color: #0f172a;
  --wb-reservation-form-surface: transparent;
  --wb-reservation-form-popover-surface: #ffffff;
  --wb-reservation-panel-border: transparent;
  --wb-reservation-panel-border-width: 0px;
  --wb-reservation-panel-shadow: none;
  --wb-reservation-popover-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
  --wb-reservation-panel-backdrop: none;
  --wb-reservation-control-surface: transparent;
  --wb-reservation-control-border: rgba(15, 23, 42, 0.24);
  --wb-reservation-control-radius: 0.35rem;
  --wb-reservation-compact-padding: 0;
}

/* Explicit Form Background overrides the preset's panel/popover surface only;
   the selected Form Style continues to own border, radius, shadow, and control
   treatment. */

.wb-fb-reservations-card[data-form-panel-bg-color="white"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="white"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="white"] {
  --wb-reservation-form-surface: #ffffff;
  --wb-reservation-form-popover-surface: #ffffff;
}
.wb-fb-reservations-card[data-form-panel-bg-color="offwhite"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="offwhite"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="offwhite"] {
  --wb-reservation-form-surface: #f8fafc;
  --wb-reservation-form-popover-surface: #f8fafc;
}
.wb-fb-reservations-card[data-form-panel-bg-color="slate"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="slate"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="slate"] {
  --wb-reservation-form-surface: #0f172a;
  --wb-reservation-form-popover-surface: #0f172a;
}
.wb-fb-reservations-card[data-form-panel-bg-color="lightgray"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="lightgray"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="lightgray"] {
  --wb-reservation-form-surface: #d3d3d3;
  --wb-reservation-form-popover-surface: #d3d3d3;
}
.wb-fb-reservations-card[data-form-panel-bg-color="gray"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="gray"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="gray"] {
  --wb-reservation-form-surface: #808080;
  --wb-reservation-form-popover-surface: #808080;
}
.wb-fb-reservations-card[data-form-panel-bg-color="zinc"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="zinc"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="zinc"] {
  --wb-reservation-form-surface: #f4f4f5;
  --wb-reservation-form-popover-surface: #f4f4f5;
}
.wb-fb-reservations-card[data-form-panel-bg-color="red"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="red"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="red"] {
  --wb-reservation-form-surface: #fee2e2;
  --wb-reservation-form-popover-surface: #fee2e2;
}
.wb-fb-reservations-card[data-form-panel-bg-color="orange"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="orange"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="orange"] {
  --wb-reservation-form-surface: #ffedd5;
  --wb-reservation-form-popover-surface: #ffedd5;
}
.wb-fb-reservations-card[data-form-panel-bg-color="amber"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="amber"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="amber"] {
  --wb-reservation-form-surface: #fef3c7;
  --wb-reservation-form-popover-surface: #fef3c7;
}
.wb-fb-reservations-card[data-form-panel-bg-color="yellow"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="yellow"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="yellow"] {
  --wb-reservation-form-surface: #fef9c3;
  --wb-reservation-form-popover-surface: #fef9c3;
}
.wb-fb-reservations-card[data-form-panel-bg-color="lime"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="lime"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="lime"] {
  --wb-reservation-form-surface: #ecfccb;
  --wb-reservation-form-popover-surface: #ecfccb;
}
.wb-fb-reservations-card[data-form-panel-bg-color="green"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="green"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="green"] {
  --wb-reservation-form-surface: #dcfce7;
  --wb-reservation-form-popover-surface: #dcfce7;
}
.wb-fb-reservations-card[data-form-panel-bg-color="emerald"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="emerald"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="emerald"] {
  --wb-reservation-form-surface: #d1fae5;
  --wb-reservation-form-popover-surface: #d1fae5;
}
.wb-fb-reservations-card[data-form-panel-bg-color="teal"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="teal"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="teal"] {
  --wb-reservation-form-surface: #ccfbf1;
  --wb-reservation-form-popover-surface: #ccfbf1;
}
.wb-fb-reservations-card[data-form-panel-bg-color="cyan"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="cyan"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="cyan"] {
  --wb-reservation-form-surface: #cffafe;
  --wb-reservation-form-popover-surface: #cffafe;
}
.wb-fb-reservations-card[data-form-panel-bg-color="sky"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="sky"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="sky"] {
  --wb-reservation-form-surface: #e0f2fe;
  --wb-reservation-form-popover-surface: #e0f2fe;
}
.wb-fb-reservations-card[data-form-panel-bg-color="blue"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="blue"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="blue"] {
  --wb-reservation-form-surface: #dbeafe;
  --wb-reservation-form-popover-surface: #dbeafe;
}
.wb-fb-reservations-card[data-form-panel-bg-color="indigo"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="indigo"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="indigo"] {
  --wb-reservation-form-surface: #e0e7ff;
  --wb-reservation-form-popover-surface: #e0e7ff;
}
.wb-fb-reservations-card[data-form-panel-bg-color="violet"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="violet"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="violet"] {
  --wb-reservation-form-surface: #ede9fe;
  --wb-reservation-form-popover-surface: #ede9fe;
}
.wb-fb-reservations-card[data-form-panel-bg-color="purple"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="purple"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="purple"] {
  --wb-reservation-form-surface: #f3e8ff;
  --wb-reservation-form-popover-surface: #f3e8ff;
}
.wb-fb-reservations-card[data-form-panel-bg-color="rose"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="rose"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="rose"] {
  --wb-reservation-form-surface: #ffe4e6;
  --wb-reservation-form-popover-surface: #ffe4e6;
}
.wb-fb-reservations-card[data-form-panel-bg-color="slate"][data-form-text-color="default"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="slate"][data-form-text-color="default"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="slate"][data-form-text-color="default"],
.wb-fb-reservations-card[data-form-panel-bg-color="gray"][data-form-text-color="default"],
.wb-fb-reservations-calendar-wrap[data-form-panel-bg-color="gray"][data-form-text-color="default"],
.wb-fb-reservations-compact-panel[data-form-panel-bg-color="gray"][data-form-text-color="default"] {
  --wb-reservation-form-style-color: #ffffff;
}

.wb-fb-reservations-card[data-form-font-key="default"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="default"],
.wb-fb-reservations-compact-panel[data-form-font-key="default"] {
  --wb-reservation-form-font:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="inter"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="inter"],
.wb-fb-reservations-compact-panel[data-form-font-key="inter"] {
  --wb-reservation-form-font: Inter, ui-sans-serif, system-ui, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="arial"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="arial"],
.wb-fb-reservations-compact-panel[data-form-font-key="arial"] {
  --wb-reservation-form-font: Arial, Helvetica, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="helvetica"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="helvetica"],
.wb-fb-reservations-compact-panel[data-form-font-key="helvetica"] {
  --wb-reservation-form-font: Helvetica, Arial, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="verdana"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="verdana"],
.wb-fb-reservations-compact-panel[data-form-font-key="verdana"] {
  --wb-reservation-form-font: Verdana, Geneva, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="georgia"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="georgia"],
.wb-fb-reservations-compact-panel[data-form-font-key="georgia"] {
  --wb-reservation-form-font: Georgia, serif;
}
.wb-fb-reservations-card[data-form-font-key="times"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="times"],
.wb-fb-reservations-compact-panel[data-form-font-key="times"] {
  --wb-reservation-form-font: "Times New Roman", Times, serif;
}
.wb-fb-reservations-card[data-form-font-key="tahoma"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="tahoma"],
.wb-fb-reservations-compact-panel[data-form-font-key="tahoma"] {
  --wb-reservation-form-font: Tahoma, Geneva, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="trebuchet"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="trebuchet"],
.wb-fb-reservations-compact-panel[data-form-font-key="trebuchet"] {
  --wb-reservation-form-font: "Trebuchet MS", sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="courier"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="courier"],
.wb-fb-reservations-compact-panel[data-form-font-key="courier"] {
  --wb-reservation-form-font: "Courier New", monospace;
}
.wb-fb-reservations-card[data-form-font-key="lucida"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="lucida"],
.wb-fb-reservations-compact-panel[data-form-font-key="lucida"] {
  --wb-reservation-form-font: "Lucida Console", Monaco, monospace;
}
.wb-fb-reservations-card[data-form-font-key="impact"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="impact"],
.wb-fb-reservations-compact-panel[data-form-font-key="impact"] {
  --wb-reservation-form-font: Impact, Haettenschweiler, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="palatino"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="palatino"],
.wb-fb-reservations-compact-panel[data-form-font-key="palatino"] {
  --wb-reservation-form-font:
    "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.wb-fb-reservations-card[data-form-font-key="garamond"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="garamond"],
.wb-fb-reservations-compact-panel[data-form-font-key="garamond"] {
  --wb-reservation-form-font: Garamond, serif;
}
.wb-fb-reservations-card[data-form-font-key="brush"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="brush"],
.wb-fb-reservations-compact-panel[data-form-font-key="brush"] {
  --wb-reservation-form-font: "Brush Script MT", cursive;
}
.wb-fb-reservations-card[data-form-font-key="segoe"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="segoe"],
.wb-fb-reservations-compact-panel[data-form-font-key="segoe"] {
  --wb-reservation-form-font: "Segoe UI", system-ui, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="roboto"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="roboto"],
.wb-fb-reservations-compact-panel[data-form-font-key="roboto"] {
  --wb-reservation-form-font: Roboto, Arial, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="open-sans"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="open-sans"],
.wb-fb-reservations-compact-panel[data-form-font-key="open-sans"] {
  --wb-reservation-form-font: "Open Sans", Arial, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="montserrat"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="montserrat"],
.wb-fb-reservations-compact-panel[data-form-font-key="montserrat"] {
  --wb-reservation-form-font: Montserrat, Arial, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="poppins"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="poppins"],
.wb-fb-reservations-compact-panel[data-form-font-key="poppins"] {
  --wb-reservation-form-font: Poppins, Arial, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="lato"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="lato"],
.wb-fb-reservations-compact-panel[data-form-font-key="lato"] {
  --wb-reservation-form-font: Lato, Arial, sans-serif;
}
.wb-fb-reservations-card[data-form-font-key="merriweather"],
.wb-fb-reservations-calendar-wrap[data-form-font-key="merriweather"],
.wb-fb-reservations-compact-panel[data-form-font-key="merriweather"] {
  --wb-reservation-form-font: Merriweather, Georgia, serif;
}

.wb-fb-reservations-card[data-form-text-size="xs"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="xs"],
.wb-fb-reservations-compact-panel[data-form-text-size="xs"] {
  --wb-reservation-form-size: 0.75rem;
}
.wb-fb-reservations-card[data-form-text-size="sm"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="sm"],
.wb-fb-reservations-compact-panel[data-form-text-size="sm"] {
  --wb-reservation-form-size: 0.875rem;
}
.wb-fb-reservations-card[data-form-text-size="base"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="base"],
.wb-fb-reservations-compact-panel[data-form-text-size="base"] {
  --wb-reservation-form-size: 1rem;
}
.wb-fb-reservations-card[data-form-text-size="lg"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="lg"],
.wb-fb-reservations-compact-panel[data-form-text-size="lg"] {
  --wb-reservation-form-size: 1.125rem;
}
.wb-fb-reservations-card[data-form-text-size="xl"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="xl"],
.wb-fb-reservations-compact-panel[data-form-text-size="xl"] {
  --wb-reservation-form-size: 1.25rem;
}
.wb-fb-reservations-card[data-form-text-size="2xl"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="2xl"],
.wb-fb-reservations-compact-panel[data-form-text-size="2xl"] {
  --wb-reservation-form-size: 1.5rem;
}
.wb-fb-reservations-card[data-form-text-size="3xl"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="3xl"],
.wb-fb-reservations-compact-panel[data-form-text-size="3xl"] {
  --wb-reservation-form-size: 1.875rem;
}
.wb-fb-reservations-card[data-form-text-size="4xl"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="4xl"],
.wb-fb-reservations-compact-panel[data-form-text-size="4xl"] {
  --wb-reservation-form-size: 2.25rem;
}
.wb-fb-reservations-card[data-form-text-size="5xl"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="5xl"],
.wb-fb-reservations-compact-panel[data-form-text-size="5xl"] {
  --wb-reservation-form-size: 3rem;
}
.wb-fb-reservations-card[data-form-text-size="6xl"],
.wb-fb-reservations-calendar-wrap[data-form-text-size="6xl"],
.wb-fb-reservations-compact-panel[data-form-text-size="6xl"] {
  --wb-reservation-form-size: 3.75rem;
}

.wb-fb-reservations-card[data-form-text-color="default"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="default"],
.wb-fb-reservations-compact-panel[data-form-text-color="default"] {
  --wb-reservation-form-color: var(--wb-reservation-form-style-color);
}
.wb-fb-reservations-card[data-form-text-color="white"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="white"],
.wb-fb-reservations-compact-panel[data-form-text-color="white"] {
  --wb-reservation-form-color: #ffffff;
}
.wb-fb-reservations-card[data-form-text-color="slate"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="slate"],
.wb-fb-reservations-compact-panel[data-form-text-color="slate"] {
  --wb-reservation-form-color: #0f172a;
}
.wb-fb-reservations-card[data-form-text-color="gray"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="gray"],
.wb-fb-reservations-compact-panel[data-form-text-color="gray"] {
  --wb-reservation-form-color: #374151;
}
.wb-fb-reservations-card[data-form-text-color="zinc"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="zinc"],
.wb-fb-reservations-compact-panel[data-form-text-color="zinc"] {
  --wb-reservation-form-color: #3f3f46;
}
.wb-fb-reservations-card[data-form-text-color="red"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="red"],
.wb-fb-reservations-compact-panel[data-form-text-color="red"] {
  --wb-reservation-form-color: #dc2626;
}
.wb-fb-reservations-card[data-form-text-color="orange"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="orange"],
.wb-fb-reservations-compact-panel[data-form-text-color="orange"] {
  --wb-reservation-form-color: #ea580c;
}
.wb-fb-reservations-card[data-form-text-color="amber"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="amber"],
.wb-fb-reservations-compact-panel[data-form-text-color="amber"] {
  --wb-reservation-form-color: #d97706;
}
.wb-fb-reservations-card[data-form-text-color="yellow"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="yellow"],
.wb-fb-reservations-compact-panel[data-form-text-color="yellow"] {
  --wb-reservation-form-color: #ca8a04;
}
.wb-fb-reservations-card[data-form-text-color="lime"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="lime"],
.wb-fb-reservations-compact-panel[data-form-text-color="lime"] {
  --wb-reservation-form-color: #65a30d;
}
.wb-fb-reservations-card[data-form-text-color="green"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="green"],
.wb-fb-reservations-compact-panel[data-form-text-color="green"] {
  --wb-reservation-form-color: #16a34a;
}
.wb-fb-reservations-card[data-form-text-color="emerald"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="emerald"],
.wb-fb-reservations-compact-panel[data-form-text-color="emerald"] {
  --wb-reservation-form-color: #059669;
}
.wb-fb-reservations-card[data-form-text-color="teal"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="teal"],
.wb-fb-reservations-compact-panel[data-form-text-color="teal"] {
  --wb-reservation-form-color: #0d9488;
}
.wb-fb-reservations-card[data-form-text-color="cyan"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="cyan"],
.wb-fb-reservations-compact-panel[data-form-text-color="cyan"] {
  --wb-reservation-form-color: #0891b2;
}
.wb-fb-reservations-card[data-form-text-color="sky"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="sky"],
.wb-fb-reservations-compact-panel[data-form-text-color="sky"] {
  --wb-reservation-form-color: #0284c7;
}
.wb-fb-reservations-card[data-form-text-color="blue"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="blue"],
.wb-fb-reservations-compact-panel[data-form-text-color="blue"] {
  --wb-reservation-form-color: #2563eb;
}
.wb-fb-reservations-card[data-form-text-color="indigo"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="indigo"],
.wb-fb-reservations-compact-panel[data-form-text-color="indigo"] {
  --wb-reservation-form-color: #4f46e5;
}
.wb-fb-reservations-card[data-form-text-color="violet"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="violet"],
.wb-fb-reservations-compact-panel[data-form-text-color="violet"] {
  --wb-reservation-form-color: #7c3aed;
}
.wb-fb-reservations-card[data-form-text-color="purple"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="purple"],
.wb-fb-reservations-compact-panel[data-form-text-color="purple"] {
  --wb-reservation-form-color: #9333ea;
}
.wb-fb-reservations-card[data-form-text-color="fuchsia"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="fuchsia"],
.wb-fb-reservations-compact-panel[data-form-text-color="fuchsia"] {
  --wb-reservation-form-color: #c026d3;
}
.wb-fb-reservations-card[data-form-text-color="pink"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="pink"],
.wb-fb-reservations-compact-panel[data-form-text-color="pink"] {
  --wb-reservation-form-color: #db2777;
}
.wb-fb-reservations-card[data-form-text-color="rose"],
.wb-fb-reservations-calendar-wrap[data-form-text-color="rose"],
.wb-fb-reservations-compact-panel[data-form-text-color="rose"] {
  --wb-reservation-form-color: #e11d48;
}

.wb-section.wb-fb-reservations
  .wb-fb-reservations-card
  :where(
    .wb-fb-reservations-status,
    label,
    label > span,
    input,
    textarea,
    select,
    option,
    .wb-fb-reservations-date-trigger,
    .wb-fb-reservations-date-trigger span,
    .wb-fb-reservations-date-popover,
    .wb-fb-reservations-month-header,
    .wb-fb-reservations-month-nav,
    .wb-fb-reservations-calendar-weekday,
    .wb-fb-reservations-calendar-day:not(.is-selected),
    .wb-fb-reservations-selected-date
  ),
.wb-section.wb-fb-reservations
  .wb-fb-reservations-calendar-wrap
  :where(
    .wb-fb-reservations-status,
    label,
    label > span,
    input,
    textarea,
    select,
    option,
    .wb-fb-reservations-date-trigger,
    .wb-fb-reservations-date-trigger span,
    .wb-fb-reservations-date-popover,
    .wb-fb-reservations-month-header,
    .wb-fb-reservations-month-nav,
    .wb-fb-reservations-calendar-weekday,
    .wb-fb-reservations-calendar-day:not(.is-selected),
    .wb-fb-reservations-selected-date
  ),
.wb-section.wb-fb-reservations
  .wb-fb-reservations-compact-panel
  :where(
    .wb-fb-reservations-status,
    label,
    label > span,
    input,
    textarea,
    select,
    option,
    .wb-fb-reservations-date-trigger,
    .wb-fb-reservations-date-trigger span,
    .wb-fb-reservations-date-popover,
    .wb-fb-reservations-month-header,
    .wb-fb-reservations-month-nav,
    .wb-fb-reservations-calendar-weekday,
    .wb-fb-reservations-calendar-day:not(.is-selected),
    .wb-fb-reservations-selected-date
  ) {
  color: var(--wb-reservation-form-color) !important;
}

.wb-fb-reservations-form input::placeholder,
.wb-fb-reservations-form textarea::placeholder {
  color: color-mix(in srgb, var(--wb-reservation-form-color) 62%, transparent);
  opacity: 1;
}

.wb-fb-reservations-calendar-day.is-selected {
  color: #fff !important;
}

/* ---- Edit mode: truthful geometry, no operations ---- */
.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-card,
.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-calendar-wrap,
.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-compact-panel {
  cursor: pointer;
  outline: 1px dashed rgba(56, 189, 248, 0.8);
  outline-offset: 0.35rem;
}

.website-builder-canvas[data-mode="edit"]
  .wb-fb-reservations-card
  [data-builder-editable-form],
.website-builder-canvas[data-mode="edit"]
  .wb-fb-reservations-calendar-wrap
  [data-builder-editable-form],
.website-builder-canvas[data-mode="edit"]
  .wb-fb-reservations-compact-panel
  [data-builder-editable-form] {
  outline: 0;
  outline-offset: 0;
}

.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-form,
.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-calendar-day,
.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-date-trigger,
.website-builder-canvas[data-mode="edit"] .wb-fb-reservations-month-nav {
  pointer-events: none;
}

.website-builder-canvas[data-mode="edit"]
  .wb-fb-reservations-compact
  .wb-fb-reservations-customer-details {
  display: grid;
}