/* Book et bord – uses the Pink Boost & Blend theme tokens when present. */

.pbbrs-tb {
  --tb-cta: var(--cta, #9b1b4a);
  --tb-cta-hover: var(--cta-hover, #7f163d);
  --tb-ink: var(--contrast, #3b2a2f);
  --tb-muted: var(--muted, #6e5f63);
  --tb-card: var(--card, #fffdfb);
  --tb-blush: var(--surface, #f7e6ec);
  --tb-line: var(--line, rgba(59, 42, 47, 0.12));
  --tb-radius: var(--radius, 18px);
  --tb-heading: var(--font-heading, 'Playfair Display', Georgia, serif);
  color: var(--text, #3b2a2f);
}

.pbbrs-tb__form {
  display: grid;
  gap: 28px;
}

/* Elements toggled with the hidden attribute must stay hidden, even when a
   rule above gives them display: grid/flex. */
.pbbrs-tb [hidden] {
  display: none !important;
}

.pbbrs-tb__step {
  min-width: 0; /* fieldsets default to min-content, which breaks the scrolling date row */
  margin: 0;
  padding: 26px clamp(18px, 3vw, 30px);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  background: var(--tb-card);
  transition: opacity 0.25s ease;
}

.pbbrs-tb__step:disabled {
  opacity: 0.45;
}

.pbbrs-tb__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  float: left; /* keeps the legend inside the card's padding */
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  color: var(--tb-ink);
  font-family: var(--tb-heading);
  font-size: 1.35rem;
}

/* Everything after the floated legend starts on its own line – including
   when the first element (the offer choice) is hidden. */
.pbbrs-tb__step > :not(legend) {
  clear: both;
}

.pbbrs-tb__num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tb-blush);
  color: var(--tb-cta);
  font-size: 1rem;
  font-style: italic;
}

/* Chips = native radio buttons, so keyboard and screen readers just work. */
.pbbrs-tb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pbbrs-chip {
  position: relative;
  cursor: pointer;
}

.pbbrs-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pbbrs-chip span {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--tb-line);
  border-radius: 14px;
  background: #fff;
  color: var(--tb-ink);
  font-weight: 600;
  line-height: 1.15;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pbbrs-chip:hover span {
  border-color: var(--tb-cta);
}

.pbbrs-chip input:checked + span {
  border-color: var(--tb-cta);
  background: var(--tb-cta);
  color: #fff;
}

.pbbrs-chip input:focus-visible + span {
  outline: 3px solid var(--focus-ring, rgba(155, 27, 74, 0.35));
  outline-offset: 2px;
}

.pbbrs-chip.is-full {
  cursor: not-allowed;
}

.pbbrs-chip.is-full span {
  border-style: dashed;
  background: transparent;
  color: var(--tb-muted);
  opacity: 0.6;
  text-decoration: line-through;
}

.pbbrs-chip--date span {
  min-width: 72px;
  padding: 10px 12px;
}

.pbbrs-chip--date small {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.pbbrs-chip--date strong {
  font-family: var(--tb-heading);
  font-size: 1.5rem;
  font-weight: 500;
}

.pbbrs-chip--date em {
  font-size: 0.68rem;
  font-style: normal;
  text-decoration: none;
}

.pbbrs-chip--time span {
  min-width: 76px;
}

.pbbrs-tb__hint,
.pbbrs-tb__loading {
  margin: 14px 0 0;
  color: var(--tb-muted);
  font-size: 0.92rem;
}

.pbbrs-tb__chips > .pbbrs-tb__hint,
.pbbrs-tb__chips > .pbbrs-tb__loading {
  margin: 0;
}

.pbbrs-tb__sub {
  margin: 0 0 8px;
  font-weight: 600;
}

.pbbrs-tb__radio {
  display: block;
  margin: 6px 0;
}

.pbbrs-tb__radio small {
  display: block;
  margin-left: 24px;
  color: var(--tb-muted);
}

/* Offers on the chosen day: "Bare et bord", Brunch, Tapas … */
.pbbrs-tb__packages {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.pbbrs-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.pbbrs-offer {
  position: relative;
  cursor: pointer;
}

.pbbrs-offer input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pbbrs-offer > span {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--tb-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pbbrs-offer strong {
  color: var(--tb-ink);
  font-family: var(--tb-heading);
  font-size: 1.15rem;
  font-weight: 500;
}

.pbbrs-offer small {
  color: var(--tb-cta);
  font-weight: 600;
}

.pbbrs-offer em {
  color: var(--tb-muted);
  font-size: 0.85rem;
  font-style: normal;
}

.pbbrs-offer:hover > span {
  border-color: var(--tb-cta);
}

.pbbrs-offer input:checked + span {
  border-color: var(--tb-cta);
  background: var(--tb-blush);
  box-shadow: inset 0 0 0 1px var(--tb-cta);
}

.pbbrs-offer input:focus-visible + span {
  outline: 3px solid var(--focus-ring, rgba(155, 27, 74, 0.35));
  outline-offset: 2px;
}

/* Small label on dates with brunch/tapas */
.pbbrs-chip__tag {
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tb-blush);
  color: var(--tb-cta);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pbbrs-chip input:checked + span .pbbrs-chip__tag {
  background: rgba(255, 255, 255, 0.9);
}

/* Floor plan – pick a favourite table */
.pbbrs-tb__plan {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--tb-line);
}

.pbbrs-tb__sub small {
  color: var(--tb-muted);
  font-weight: 400;
}

.pbbrs-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 18px);
  margin-top: 14px;
  padding: clamp(14px, 3vw, 26px);
  border-radius: var(--tb-radius);
  background:
    radial-gradient(circle at 1px 1px, rgba(59, 42, 47, 0.08) 1px, transparent 0) 0 0 / 14px 14px,
    var(--bg, #fbf6f1);
}

.pbbrs-plan__table {
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.pbbrs-plan__table--long {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.pbbrs-plan__table input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The table top */
.pbbrs-plan__top {
  position: absolute;
  inset: 22%;
  z-index: 1;
  display: grid;
  place-content: center;
  border: 2px solid var(--tb-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--tb-ink);
  text-align: center;
  line-height: 1.1;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pbbrs-plan__table--long .pbbrs-plan__top {
  inset: 22% 11%;
}

.pbbrs-plan__table--round .pbbrs-plan__top {
  inset: 20%;
  border-radius: 50%;
}

.pbbrs-plan__top strong {
  font-family: var(--tb-heading);
  font-size: clamp(0.8rem, 2.4vw, 1.25rem);
  font-weight: 500;
}

.pbbrs-plan__top small {
  font-size: clamp(0.55rem, 1.6vw, 0.72rem);
  opacity: 0.75;
}

/* Chairs */
.pbbrs-plan__seats i {
  position: absolute;
  width: 14%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--tb-blush);
  border: 1.5px solid rgba(59, 42, 47, 0.25);
  transform: translate(-50%, -50%);
}

.pbbrs-plan__table--long .pbbrs-plan__seats i {
  width: 7%;
}

.pbbrs-plan__table:hover .pbbrs-plan__top {
  transform: scale(1.04);
  border-color: var(--tb-cta);
}

.pbbrs-plan__table input:checked ~ .pbbrs-plan__top {
  border-color: var(--tb-cta);
  background: var(--tb-cta);
  color: #fff;
}

.pbbrs-plan__table input:checked ~ .pbbrs-plan__seats i {
  background: var(--tb-cta);
  border-color: var(--tb-cta);
}

.pbbrs-plan__table input:focus-visible ~ .pbbrs-plan__top {
  outline: 3px solid var(--focus-ring, rgba(155, 27, 74, 0.35));
  outline-offset: 3px;
}

.pbbrs-plan__table.is-off {
  cursor: not-allowed;
  opacity: 0.35;
}

.pbbrs-plan__table.is-off .pbbrs-plan__top {
  border-style: dashed;
  transform: none;
}

/* ---- Café room map (tables placed as in the real café) ---- */
.pbbrs-plan.is-map {
  display: block;
  padding: 0;
  overflow-x: auto;
  background: none;
  -webkit-overflow-scrolling: touch;
}

.pbbrs-map {
  position: relative;
  min-width: 440px; /* keeps tables tappable on phones – the map scrolls sideways */
  aspect-ratio: 6 / 5;
  margin: 18px 0 4px;
  border: 5px solid var(--tb-ink);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(122, 86, 58, 0.05) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, var(--bg, #fbf3ea), var(--surface-soft, #f6ebe0));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.55);
}

/* Entrance: a gap in the top wall with a small label. */
.pbbrs-map__door {
  position: absolute;
  top: -5px;
  left: 36%;
  width: 12%;
  height: 5px;
  background: var(--bg, #fbf3ea);
}

.pbbrs-map__door span {
  position: absolute;
  top: 12px;
  left: 50%;
  color: var(--tb-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.pbbrs-map__door span::before {
  display: block;
  margin-bottom: 1px;
  text-align: center;
  content: '↓';
}

/* Toilet and entrance hall take the bottom-right corner of the room. */
.pbbrs-map__block {
  position: absolute;
  top: 80%;
  right: -5px;
  bottom: -5px;
  left: 31%;
  display: grid;
  place-items: center;
  border-top: 5px solid var(--tb-ink);
  border-left: 5px solid var(--tb-ink);
  border-radius: 6px 0 8px 0;
  background: repeating-linear-gradient(135deg, rgba(59, 42, 47, 0.07) 0 6px, transparent 6px 12px), #fff;
  color: var(--tb-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sideboard with a TV above it on the bottom (south) wall, by the long table. */
.pbbrs-map__sideboard {
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 23%;
  height: 6%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(0deg, #cdb094, #dcc4ab);
  box-shadow: inset 0 -3px 0 #2b2226; /* the TV on the wall */
}

.pbbrs-map__sideboard span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #6b5140;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.pbbrs-map__table {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.pbbrs-map__table--round {
  aspect-ratio: 1 / 1;
}

.pbbrs-map__table input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pbbrs-map__top {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--tb-ink), 0 6px 14px -6px rgba(59, 42, 47, 0.45);
  color: var(--tb-ink);
  font-family: var(--tb-heading);
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pbbrs-map__table--round .pbbrs-map__top {
  border-radius: 50%;
}

.pbbrs-map__chairs i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--tb-blush);
  box-shadow: 0 0 0 1.5px rgba(59, 42, 47, 0.3);
  transform: translate(-50%, -50%);
  transition: background-color 0.15s ease;
}

.pbbrs-map__chairs .s-top    { top: 0;    transform: translate(-50%, calc(-100% - 4px)); }
.pbbrs-map__chairs .s-bottom { top: 100%; transform: translate(-50%, 4px); }
.pbbrs-map__chairs .s-left   { left: 0;    transform: translate(calc(-100% - 4px), -50%); }
.pbbrs-map__chairs .s-right  { left: 100%; transform: translate(4px, -50%); }

.pbbrs-map__table:hover .pbbrs-map__top {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--tb-cta), 0 10px 18px -8px rgba(155, 27, 74, 0.5);
  box-shadow: 0 0 0 2px var(--tb-cta), 0 10px 18px -8px color-mix(in srgb, var(--tb-cta) 50%, transparent);
}

.pbbrs-map__table input:checked ~ .pbbrs-map__top {
  background: var(--tb-cta);
  box-shadow: 0 0 0 2px var(--tb-cta), 0 10px 18px -8px rgba(155, 27, 74, 0.6);
  box-shadow: 0 0 0 2px var(--tb-cta), 0 10px 18px -8px color-mix(in srgb, var(--tb-cta) 60%, transparent);
  color: #fff;
}

.pbbrs-map__table input:checked ~ .pbbrs-map__chairs i {
  background: var(--tb-cta);
  box-shadow: none;
}

.pbbrs-map__table input:focus-visible ~ .pbbrs-map__top {
  outline: 3px solid var(--focus-ring, rgba(155, 27, 74, 0.4));
  outline-offset: 4px;
}

.pbbrs-map__table.is-off {
  cursor: not-allowed;
}

.pbbrs-map__table.is-off .pbbrs-map__top {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1.5px rgba(59, 42, 47, 0.3);
  color: rgba(59, 42, 47, 0.35);
  transform: none;
}

.pbbrs-map__table.is-off .pbbrs-map__chairs i {
  opacity: 0.4;
}

.pbbrs-plan__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.pbbrs-plan__key {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--tb-ink);
  border-radius: 4px;
  background: #fff;
}

.pbbrs-plan__key--taken {
  border-style: dashed;
  opacity: 0.4;
}

.pbbrs-tb .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Contact details */
.pbbrs-tb__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pbbrs-tb__field {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.pbbrs-tb__field small {
  color: var(--tb-muted);
  font-weight: 400;
}

.pbbrs-tb__field--wide {
  grid-column: 1 / -1;
}

.pbbrs-tb__field input,
.pbbrs-tb__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--tb-line);
  border-radius: 12px;
  background: #fff;
  color: var(--tb-ink);
  font: inherit;
  font-weight: 400;
}

.pbbrs-tb__field input:focus,
.pbbrs-tb__field textarea:focus {
  border-color: var(--tb-cta);
  outline: 3px solid var(--cta-soft, rgba(155, 27, 74, 0.15));
}

.pbbrs-tb__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Summary, errors, submit */
.pbbrs-tb__summary {
  padding: 16px 20px;
  border-radius: var(--tb-radius);
  background: var(--tb-blush);
  color: var(--tb-ink);
  text-align: center;
}

.pbbrs-tb__error {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--tb-cta);
  border-radius: 0 12px 12px 0;
  background: #fff;
  color: var(--tb-cta);
  font-weight: 600;
}

.pbbrs-tb__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  min-height: 54px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--tb-cta);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pbbrs-tb__submit:hover {
  background: var(--tb-cta-hover);
  color: #fff;
}

.pbbrs-tb__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pbbrs-tb__privacy {
  margin: -12px 0 0;
  color: var(--tb-muted);
  font-size: 0.82rem;
  text-align: center;
}

/* Confirmation */
.pbbrs-tb__done {
  padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px);
  border-radius: calc(var(--tb-radius) * 1.4);
  background: var(--tb-blush);
  text-align: center;
  outline: none;
}

.pbbrs-tb__done h2 {
  margin: 0 0 14px;
  font-family: var(--tb-heading);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.pbbrs-tb__done-icon {
  margin: 0 0 6px;
  color: var(--tb-cta);
  font-size: 2rem;
}

.pbbrs-tb__done-when {
  font-size: 1.1rem;
}

.pbbrs-tb__done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 24px;
}

.pbbrs-tb__link {
  color: var(--tb-ink);
  font-weight: 600;
}

@media (max-width: 600px) {
  .pbbrs-tb__fields {
    grid-template-columns: 1fr;
  }

  .pbbrs-tb__chips--dates {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .pbbrs-chip--date {
    scroll-snap-align: start;
  }

  .pbbrs-chip--time span {
    min-width: 68px;
  }

  /* Bigger tap targets for the floor plan on phones. */
  .pbbrs-plan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}