/**
 * ILA Meeting Room Booking — public frontend.
 * Aesthetic: Light editorial, ILA arrow + chevron decorations, no dark hero.
 * Single accent: ILA Blue (#008FD3). Sharp corners. Theme-controlled typography.
 */

:root {
  --mrb-blue: #008FD3;
  --mrb-blue-dark: #006fa6;
  --mrb-blue-50: rgba(0, 143, 211, 0.06);
  --mrb-blue-100: rgba(0, 143, 211, 0.12);
  --mrb-blue-200: rgba(0, 143, 211, 0.22);
  --mrb-blue-glow: rgba(0, 143, 211, 0.18);
  --mrb-ink: #14181f;
  --mrb-ink-soft: #4a5360;
  --mrb-ink-muted: #7a8290;
  --mrb-line: #d6dde4;
  --mrb-line-soft: #ebeff3;
  --mrb-paper: #f4f6f9;
  --mrb-paper-warm: #eef2f7;
  --mrb-card: #ffffff;
  --mrb-pink: #ff188d;
  --mrb-warning: #b04500;
  --mrb-busy:
    repeating-linear-gradient(
      135deg,
      rgba(20, 24, 31, 0.92) 0px,
      rgba(20, 24, 31, 0.92) 6px,
      rgba(20, 24, 31, 0.72) 6px,
      rgba(20, 24, 31, 0.72) 12px
    );
  --mrb-reserved:
    repeating-linear-gradient(
      135deg,
      rgba(0, 143, 211, 0.65) 0px,
      rgba(0, 143, 211, 0.65) 5px,
      rgba(255, 255, 255, 0.92) 5px,
      rgba(255, 255, 255, 0.92) 10px
    );
}

/* ==========================================================================
   1. PAGE TAKE-OVER
   ========================================================================== */

body.path-meeting-room-booking .block-page-title-block,
body.path-meeting-room-booking h1.page-title,
body.path-meeting-room-booking .messages--status[role="status"]:empty {
  display: none !important;
}

body.path-meeting-room-booking #block-ila-berlin-content,
body.path-meeting-room-booking main[role="main"],
body.path-meeting-room-booking .region-content,
body.path-meeting-room-booking .layout-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

body.path-meeting-room-booking { background: var(--mrb-paper); }

form#ila-meeting-room-booking-request {
  width: 100vw;
  margin: 0 calc(-50vw + 50%);
  padding: 0;
  background: var(--mrb-paper);
  color: var(--mrb-ink);
}

form#ila-meeting-room-booking-request *,
.mrb-app *,
.mrb-confirmation * { box-sizing: border-box; }

/* ==========================================================================
   2. HERO — light, friendly, ILA arrow as the visual anchor
   ========================================================================== */

.mrb-hero {
  position: relative;
  display: block;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 80px) clamp(40px, 5vw, 72px);
  background: linear-gradient(180deg, var(--mrb-card) 0%, var(--mrb-paper) 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--mrb-line);
}

.mrb-hero__title-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: 14px;
}

.mrb-hero__title-row .mrb-hero__arrow {
  width: clamp(56px, 8vw, 110px);
  height: auto;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 143, 211, 0.16));
}

.mrb-hero__title-row .mrb-hero__title {
  margin: 0;
  color: var(--mrb-ink);
  letter-spacing: -0.01em;
}

.mrb-hero::after {
  /* faint blue-grid background reminiscent of the ILA solar-panel motif */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 143, 211, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 143, 211, 0.06) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 70% 80% at 80% 60%, #000 30%, transparent 75%);
}

.mrb-hero > * { position: relative; }

.mrb-hero__art {
  position: relative;
  align-self: center;
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  justify-items: start;
}

.mrb-hero__arrow {
  width: clamp(96px, 12vw, 156px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 143, 211, 0.14));
}

.mrb-hero__chev {
  width: clamp(80px, 9vw, 120px);
  height: auto;
  display: block;
  opacity: 0.7;
}

.mrb-hero__main { max-width: 720px; }

.mrb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mrb-blue-dark);
  margin: 0 0 14px;
}

.mrb-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--mrb-blue);
  display: inline-block;
}

.mrb-eyebrow--dark { color: var(--mrb-blue-dark); }
.mrb-eyebrow--dark::before { background: var(--mrb-blue-dark); }

.mrb-hero__title {
  margin: 0 0 12px;
  color: var(--mrb-ink);
  letter-spacing: -0.01em;
}

.mrb-hero__lede {
  margin: 0;
  color: var(--mrb-ink-soft);
  max-width: 600px;
}

.mrb-hero__legend {
  list-style: none;
  margin: 0;
  padding: 18px 22px;
  display: grid;
  gap: 10px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-blue);
}

.mrb-hero__legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mrb-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-dot {
  width: 22px;
  height: 14px;
  border: 1.5px solid var(--mrb-blue);
  background: var(--mrb-blue-50);
  flex-shrink: 0;
}

.mrb-dot--reserved { background: var(--mrb-reserved); }
.mrb-dot--booked {
  background: var(--mrb-busy);
  border-color: var(--mrb-ink);
}

.mrb-hero__hatch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(36px, 5vw, 56px);
  width: 100%;
  pointer-events: none;
  opacity: 0.55;
}

/* ==========================================================================
   3. SECTION HEADERS — chevron step indicator
   ========================================================================== */

.mrb-board,
.mrb-floor,
.mrb-form-panel,
.mrb-confirmation {
  width: 100%;
  padding: clamp(36px, 4vw, 64px) clamp(24px, 5vw, 80px);
  background: var(--mrb-card);
}

.mrb-floor { background: var(--mrb-paper); border-bottom: 1px solid var(--mrb-line); }
.mrb-board { border-bottom: 1px solid var(--mrb-line); padding-top: clamp(48px, 5vw, 72px); }

.mrb-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(24px, 3vw, 40px);
  align-items: start;
}

.mrb-section-head__copy { min-width: 0; }

/* Section-level legend (lives in Step 2 — Live availability head) */
.mrb-section-legend {
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  display: grid;
  gap: 8px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-blue);
  align-self: end;
}

.mrb-section-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mrb-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
}

.mrb-section-step svg {
  width: clamp(48px, 5vw, 64px);
  height: auto;
  display: block;
}

.mrb-section-title {
  margin: 0 0 12px;
  color: var(--mrb-ink);
  letter-spacing: -0.01em;
}

.mrb-section-lede { margin: 0; color: var(--mrb-ink-soft); max-width: 720px; }

/* ==========================================================================
   4. FLOOR PLAN — now first
   ========================================================================== */

.mrb-floor__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* Single-column variant when only the Hall A card is rendered.
   Spans the same content width as the day-tab strip and the matrix. */
.mrb-floor__card--full {
  width: 100%;
  max-width: none;
  margin: 0;
}

.mrb-floor__card {
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  display: flex;
  flex-direction: column;
}

.mrb-floor__cardhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 22px;
  border-bottom: 1px solid var(--mrb-line);
  color: var(--mrb-ink);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-floor__cardhead p { margin: 0; }
.mrb-floor__compass { color: var(--mrb-ink-muted); }

.mrb-floor__svgwrap,
.mrb-floor__pngwrap {
  padding: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(20, 24, 31, 0.04) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(20, 24, 31, 0.04) 23px 24px),
    var(--mrb-paper);
}

.mrb-floor__pngwrap {
  position: relative;
}

.mrb-floor__png {
  display: block;
  width: 100%;
  height: auto;
}

.mrb-floor__pin {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--mrb-blue);
  color: #fff;
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: 0 8px 24px rgba(0, 143, 211, 0.35);
  transition: background 0.18s ease, transform 0.18s ease;
}

.mrb-floor__pin:hover,
.mrb-floor__pin:focus-visible {
  background: var(--mrb-blue-dark);
  transform: translate(-50%, -50%) translateY(-2px);
  outline: none;
}

.mrb-floor__svg { width: 100%; height: auto; display: block; }

.mrb-floor__hall-border { fill: #fff; stroke: var(--mrb-ink); stroke-width: 4; }
.mrb-floor__gate { fill: var(--mrb-ink); }

.mrb-floor__zone-shape {
  fill: var(--mrb-line-soft);
  stroke: var(--mrb-ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.mrb-floor__zone-label {
  fill: var(--mrb-ink-soft);
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 16px;
  font-feature-settings: "tnum";
}

.mrb-floor__zone-meta {
  fill: var(--mrb-ink-muted);
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-feature-settings: "tnum";
}

/* Compact label for the entry corridor between Press Conference and Neptune.
   Sized to fit the ~120px gap without overlapping the surrounding rooms. */
.mrb-floor__entry-label {
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
}

.mrb-floor__entry-meta {
  text-anchor: middle;
  font-size: 14px;
}

/* Stand islands on the left of Hall A — empty exhibitor booths. */
.mrb-floor__stand {
  fill: #f0f3f7;
  stroke: #cfd8df;
  stroke-width: 1;
}

/* Aisles between stand islands and between stand area and rooms.
   Dashed grey line, signals walkable space. */
.mrb-floor__aisle {
  stroke: #9aa1a8;
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
  fill: none;
}

.mrb-floor__aisle--vertical { stroke-width: 1.2; }

/* Passage to Hall B — compact label box at bottom-left. */
.mrb-floor__passage-label {
  fill: #4a5360;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-feature-settings: "tnum";
}

.mrb-floor__passage-arrow {
  fill: #008FD3;
  font-size: 16px;
}

.mrb-floor__room {
  cursor: pointer;
  transition: transform 0.18s ease;
  outline: none;
}

.mrb-floor__room:hover { transform: translateY(-1px); }

.mrb-floor__room-rect {
  fill: var(--mrb-blue-50);
  stroke: var(--mrb-blue);
  stroke-width: 3;
  transition: fill 0.18s ease, stroke-width 0.18s ease;
}

.mrb-floor__room:hover .mrb-floor__room-rect,
.mrb-floor__room:focus-visible .mrb-floor__room-rect {
  fill: var(--mrb-blue-200);
  stroke-width: 5;
}

.mrb-floor__room[data-state="full"] .mrb-floor__room-rect {
  fill: var(--mrb-ink);
  stroke: var(--mrb-ink);
}

.mrb-floor__room[data-state="full"] .mrb-floor__room-name,
.mrb-floor__room[data-state="full"] .mrb-floor__room-meta,
.mrb-floor__room[data-state="full"] .mrb-floor__room-status { fill: #fff; }

.mrb-floor__room[data-state="partial"] .mrb-floor__room-rect {
  fill: var(--mrb-blue-100);
  stroke: var(--mrb-blue);
}

/* On-request rooms (Press Conference) — neutral fill, no status tint. */
.mrb-floor__room[data-state="request"] .mrb-floor__room-rect,
.mrb-floor__room--request .mrb-floor__room-rect {
  fill: var(--mrb-paper-warm);
  stroke: var(--mrb-blue-dark);
  stroke-dasharray: 6 4;
}

.mrb-floor__room[data-state="request"] .mrb-floor__room-status,
.mrb-floor__room--request .mrb-floor__room-status {
  fill: var(--mrb-blue-dark);
}

.mrb-floor__room-name {
  text-anchor: middle;
  fill: var(--mrb-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 22px;
  font-feature-settings: "tnum";
}

.mrb-floor__room-meta {
  text-anchor: middle;
  fill: var(--mrb-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
}

.mrb-floor__room-status {
  text-anchor: middle;
  fill: var(--mrb-blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}

.mrb-floor__hint {
  margin: 0;
  padding: 14px 22px 18px;
  color: var(--mrb-ink-muted);
}

.mrb-floor__inset {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 22px 18px;
  padding: 14px 18px;
  background: var(--mrb-paper);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-blue);
  text-align: left;
  width: calc(100% - 44px);
  cursor: pointer;
  color: var(--mrb-ink);
}

.mrb-floor__inset:hover { background: var(--mrb-blue-50); }

.mrb-floor__inset-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--mrb-blue);
  color: #fff;
  flex-shrink: 0;
}

.mrb-floor__inset strong { display: block; color: var(--mrb-ink); }
.mrb-floor__inset em {
  display: block;
  font-style: normal;
  color: var(--mrb-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mrb-floor__hall-label { font-size: 36px; font-feature-settings: "tnum"; letter-spacing: 0.04em; }
.mrb-floor__hall-meta { font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; }
.mrb-floor__pin-icon { font-size: 18px; }

/* ==========================================================================
   5. AVAILABILITY MATRIX
   ========================================================================== */

.mrb-day-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 28px;
  border: 1px solid var(--mrb-line);
  background: var(--mrb-paper);
}

/* Compact variant used above the floor plan — shorter, no full meta text */
.mrb-day-tabs--floor {
  margin-bottom: 24px;
  background: var(--mrb-card);
}

.mrb-day-tabs--floor .mrb-day-tab {
  padding: 12px 14px;
}

.mrb-day-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mrb-line);
  color: var(--mrb-ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.mrb-day-tab:last-child { border-right: 0; }

.mrb-day-tab:hover,
.mrb-day-tab:focus-visible {
  background: var(--mrb-blue-50);
  color: var(--mrb-ink);
  outline: none;
}

.mrb-day-tab.is-active {
  background: var(--mrb-card);
  color: var(--mrb-ink);
  box-shadow: inset 0 -3px 0 var(--mrb-blue);
}

.mrb-day-tab.is-active .mrb-day-tab__weekday { color: var(--mrb-blue); }

.mrb-day-tab__weekday {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mrb-blue-dark);
}

.mrb-day-tab__date {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mrb-day-tab__date strong {
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  color: var(--mrb-ink);
}

.mrb-day-tab__date span {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mrb-ink-muted);
}

.mrb-day-tab__summary {
  display: block;
  color: var(--mrb-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-board__hours {
  position: relative;
  height: 28px;
  margin: 0 0 8px;
}

.mrb-hour-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--mrb-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-feature-settings: "tnum";
  padding-bottom: 6px;
}

.mrb-hour-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mrb-ink);
}

.mrb-board__rooms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

.mrb-room-row {
  display: grid;
  grid-template-areas:
    "head"
    "timeline"
    "detail";
  gap: 16px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-blue);
  scroll-margin-top: 24px;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.mrb-room-row.is-flash {
  border-color: var(--mrb-blue);
  box-shadow: 0 0 0 4px var(--mrb-blue-glow);
}

.mrb-room-row[data-mrb-location="fairgrounds"] { border-left-color: var(--mrb-pink); }

.mrb-room-row__head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: end;
}

.mrb-room-row__name {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  color: var(--mrb-ink);
}

.mrb-room-row__name strong {
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--mrb-ink);
  /* Bigger room name as visual anchor — Marcel asked for more presence. */
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
}

.mrb-room-row__badge {
  display: inline-block;
  padding: 4px 8px;
  background: var(--mrb-paper);
  border: 1px solid var(--mrb-line);
  color: var(--mrb-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-room-row[data-mrb-location="fairgrounds"] .mrb-room-row__badge {
  background: rgba(255, 24, 141, 0.08);
  border-color: rgba(255, 24, 141, 0.4);
  color: var(--mrb-pink);
}

.mrb-room-row__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--mrb-ink-soft);
  grid-column: 1 / -1;
}

.mrb-room-row__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mrb-room-row__meta span + span::before {
  content: "·";
  color: var(--mrb-ink-muted);
}

.mrb-room-row__price {
  color: var(--mrb-blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mrb-room-row__status {
  margin: 0;
  color: var(--mrb-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: right;
}

.mrb-room-row__status[data-state="full"] { color: var(--mrb-warning); }
.mrb-room-row__status[data-state="open"] { color: var(--mrb-blue-dark); }
.mrb-room-row__status[data-state="partial"] { color: var(--mrb-ink-soft); }

/* Timeline strip — five mini-timelines per room, one per day. The
   active day is rendered in full colour with a slightly taller bar;
   the other four are dimmed but still show their booking blocks and
   are clickable to switch the active day. */
.mrb-room-row__timelines {
  grid-area: timeline;
  display: grid;
  gap: 4px;
}

.mrb-room-row__day {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 130px;
  gap: 14px;
  align-items: center;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  opacity: 0.45;
  transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  font-feature-settings: "tnum";
}

.mrb-room-row__day:hover,
.mrb-room-row__day:focus-visible {
  opacity: 0.85;
  background: var(--mrb-paper);
  outline: none;
}

.mrb-room-row__day.is-active {
  opacity: 1;
  background: var(--mrb-paper);
  border-left-color: var(--mrb-blue);
  cursor: default;
}

.mrb-room-row__day-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mrb-ink-soft);
}

.mrb-room-row__day-label strong {
  color: var(--mrb-blue-dark);
  letter-spacing: 0.08em;
}

.mrb-room-row__day.is-active .mrb-room-row__day-label strong {
  color: var(--mrb-blue);
}

.mrb-room-row__day-label span {
  color: var(--mrb-ink-muted);
  letter-spacing: 0.08em;
}

.mrb-room-row__day-bar {
  position: relative;
  display: block;
  height: 24px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  transition: height 0.18s ease;
}

.mrb-room-row__day.is-active .mrb-room-row__day-bar {
  height: 36px;
}

.mrb-room-row__day-status {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mrb-ink-muted);
  text-align: right;
}

.mrb-room-row__day-status[data-state="open"] { color: var(--mrb-blue-dark); }
.mrb-room-row__day-status[data-state="full"] { color: var(--mrb-warning); }
.mrb-room-row__day-status[data-state="partial"] { color: var(--mrb-ink-soft); }

.mrb-room-row__grid { position: absolute; inset: 0; pointer-events: none; }

.mrb-grid-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mrb-line);
}

.mrb-room-row__spans { position: absolute; inset: 4px; }
.mrb-room-row__day.is-active .mrb-room-row__spans { inset: 6px; }

.mrb-span {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mrb-ink);
  border: 0;
  background: transparent;
  text-align: left;
  font-feature-settings: "tnum";
}

.mrb-span--free {
  background: rgba(0, 143, 211, 0.10);
  border-left: 2px solid var(--mrb-blue);
  border-right: 2px solid var(--mrb-blue);
  color: var(--mrb-blue-dark);
}

.mrb-span--reserved {
  background: var(--mrb-reserved);
  border: 1px solid var(--mrb-blue);
  color: var(--mrb-blue-dark);
}

.mrb-span--booked {
  background: var(--mrb-busy);
  color: #fff;
  border: 1px solid var(--mrb-ink);
}

.mrb-span--closed {
  background: var(--mrb-line-soft);
  color: var(--mrb-ink-muted);
}

.mrb-span__label {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-span--booked .mrb-span__label,
.mrb-span--reserved .mrb-span__label {
  background: rgba(255, 255, 255, 0.92);
  color: var(--mrb-ink);
  padding: 2px 8px;
  border: 1px solid currentColor;
}

/* Detail row: photo + slot buttons */
.mrb-room-row__detail {
  grid-area: detail;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  margin-top: 4px;
}

.mrb-room-row__photo {
  margin: 0;
  border: 1px solid var(--mrb-line);
  background: var(--mrb-paper);
  display: flex;
  flex-direction: column;
}

.mrb-room-row__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mrb-room-row__photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(0, 143, 211, 0.06) 35px 36px),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(0, 143, 211, 0.06) 35px 36px),
    var(--mrb-paper-warm);
  position: relative;
  text-align: center;
}

.mrb-room-row__photo-placeholder svg {
  position: absolute;
  inset: auto auto -20% -20%;
  width: 80%;
  pointer-events: none;
}

.mrb-room-row__photo-placeholder span {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mrb-ink);
}

.mrb-room-row__photo-placeholder em {
  position: relative;
  display: block;
  font-style: normal;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mrb-ink-muted);
}

.mrb-room-row__photo figcaption {
  margin: 0;
  padding: 12px 14px;
  background: var(--mrb-card);
  border-top: 1px solid var(--mrb-line);
  color: var(--mrb-ink-soft);
}

.mrb-room-row__slots {
  display: grid;
  gap: 18px;
}

.mrb-room-row__slots-empty {
  margin: 0;
  padding: 14px 16px;
  background: var(--mrb-paper);
  border-left: 3px solid var(--mrb-warning);
  color: var(--mrb-ink-soft);
}

.mrb-slot-group { display: grid; gap: 10px; }

.mrb-slot-group__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--mrb-ink);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mrb-slot-group__duration { color: var(--mrb-ink); }
.mrb-slot-group__price {
  color: var(--mrb-blue-dark);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}
.mrb-slot-group__count {
  color: var(--mrb-ink-muted);
  letter-spacing: 0.12em;
}

/* Mid-dot separator between the duration / price / count tokens. */
.mrb-slot-group__title > span + span::before {
  content: "·";
  color: var(--mrb-ink-muted);
  padding-right: 10px;
}

.mrb-slot-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.mrb-slot-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-blue);
  color: var(--mrb-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-feature-settings: "tnum";
  text-align: left;
}

.mrb-slot-btn strong {
  color: var(--mrb-blue-dark);
  letter-spacing: 0.04em;
}

.mrb-slot-btn span {
  color: var(--mrb-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mrb-slot-btn:hover,
.mrb-slot-btn:focus-visible {
  background: var(--mrb-blue);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--mrb-blue-glow);
}

.mrb-slot-btn:hover strong,
.mrb-slot-btn:focus-visible strong,
.mrb-slot-btn:hover span,
.mrb-slot-btn:focus-visible span { color: #fff; }

/* ==========================================================================
   6. FORM PANEL — sexier, fully clickable cards
   ========================================================================== */

.mrb-form-panel {
  background: var(--mrb-paper);
  padding-bottom: clamp(48px, 5vw, 80px);
}

.mrb-form-panel__head {
  background: var(--mrb-card);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--mrb-line);
  border-bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.mrb-form-panel__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: var(--mrb-blue);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-feature-settings: "tnum";
}

.mrb-form-panel__head h2 {
  margin: 0 0 8px;
  color: var(--mrb-ink);
  letter-spacing: -0.01em;
}

.mrb-form-panel__lede { margin: 6px 0 0; color: var(--mrb-ink-soft); max-width: 720px; }

.mrb-form-panel__body {
  background: var(--mrb-card);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--mrb-line);
  border-top: 0;
  display: grid;
  gap: 24px;
}

/* Choice rows (customer-type + region) — full-card click, with the
   radio sitting on the LEFT next to the label, never above it. */
.mrb-choice-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0;
}

.mrb-choice-row .form-item,
.mrb-choice-row .form-item.form-type-radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
  flex: 1 1 240px;
  margin: 0;
  padding: 16px 20px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  min-height: 56px;
}

.mrb-choice-row .form-item:hover {
  border-color: var(--mrb-blue);
  background: var(--mrb-blue-50);
}

.mrb-choice-row .form-item.is-selected {
  border-color: var(--mrb-blue);
  background: var(--mrb-blue-50);
  box-shadow: inset 4px 0 0 var(--mrb-blue);
}

.mrb-choice-row .form-item input[type="radio"] {
  margin: 0 !important;
  accent-color: var(--mrb-blue);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.mrb-choice-row .form-item label {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mrb-ink);
  background: transparent !important;
  border: 0 !important;
  flex: 1;
  line-height: 1.25;
}

/* Wider variant for the customer-type cards (Exhibitor / External) so
   they read as two big primary choices. */
.mrb-choice-row--customer .form-item { flex: 1 1 320px; min-height: 68px; }

/* Default form-item label and inputs */
form#ila-meeting-room-booking-request .form-item { margin: 0; }
form#ila-meeting-room-booking-request label {
  display: block;
  margin-bottom: 6px;
  color: var(--mrb-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

form#ila-meeting-room-booking-request .form-required::after {
  content: " *";
  color: var(--mrb-blue);
  margin: 0 0 0 2px;
  background: none;
  width: auto;
  height: auto;
  vertical-align: baseline;
}

form#ila-meeting-room-booking-request input[type="text"],
form#ila-meeting-room-booking-request input[type="email"],
form#ila-meeting-room-booking-request input[type="tel"],
form#ila-meeting-room-booking-request input[type="number"],
form#ila-meeting-room-booking-request select,
form#ila-meeting-room-booking-request textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mrb-line);
  background: var(--mrb-card);
  color: var(--mrb-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form#ila-meeting-room-booking-request select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mrb-blue) 50%),
    linear-gradient(135deg, var(--mrb-blue) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

form#ila-meeting-room-booking-request input:focus,
form#ila-meeting-room-booking-request select:focus,
form#ila-meeting-room-booking-request textarea:focus {
  border-color: var(--mrb-blue);
  box-shadow: 0 0 0 3px var(--mrb-blue-glow);
}

/* Field grids — Drupal wraps fieldset children in .fieldset-wrapper,
   so the grid lives there (not on the fieldset itself, otherwise
   only the wrapper becomes a single grid cell and the inputs stack). */
.mrb-fieldset {
  border: 1px solid var(--mrb-line);
  background: var(--mrb-card);
  padding: 22px 24px 20px;
  margin: 0;
}

.mrb-fieldset > legend {
  padding: 0 4px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mrb-blue-dark);
}

/* Force every fieldset into a true horizontal flex row. */
form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: start;
}

form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper > .form-item {
  flex: 1 1 calc(25% - 12px) !important;
  min-width: 130px !important;
  max-width: none !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  /* No display !important — Drupal's #states machinery sets inline
     style="display: none" to hide the order_number field for external
     customers, and an !important block here would defeat that. */
}

/* Inputs / selects always fill their cell. */
form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper > .form-item > input,
form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper > .form-item > select {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Description sits below the input but is rendered with no extra
   margins that would push the row taller — it stays inside its cell
   so the four inputs remain aligned along the top edge. */
form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper > .form-item .description,
form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper > .form-item div.description {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--mrb-ink-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.35;
}

.mrb-fieldset .form-item { margin: 0; }

/* Live slot preview — sits between the Selection fieldset and the
   Customer-type chooser. Mirrors the timeline strip style used in the
   matrix above so users see the same visual language. */
.mrb-form-preview {
  display: block;
  width: 100%;
  margin-top: -1px;
  padding: 18px 24px 22px;
  background: var(--mrb-paper);
  border: 1px solid var(--mrb-line);
  border-top: 0;
}

.mrb-form-preview__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.mrb-form-preview__title {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mrb-blue-dark);
}

.mrb-form-preview__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mrb-ink-muted);
  font-feature-settings: "tnum";
}

.mrb-form-preview__label[data-state="set"] {
  color: var(--mrb-ink);
}

.mrb-form-preview__hours {
  position: relative;
  height: 24px;
  margin-bottom: 4px;
}

.mrb-form-preview__hours .mrb-hour-tick {
  /* uses the global .mrb-hour-tick rule (top:0, transform translate-x) */
}

.mrb-form-preview__hours .mrb-hour-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mrb-ink);
}

.mrb-form-preview__timeline {
  position: relative;
  height: 44px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
}

.mrb-form-preview__spans {
  position: absolute;
  inset: 4px;
  /* The mrb-span variants render the existing booked / reserved /
     free background blocks at half-strength so the highlight pops. */
  opacity: 0.55;
  pointer-events: none;
}

.mrb-form-preview__highlight {
  position: absolute;
  top: -4px;
  bottom: -4px;
  background: var(--mrb-blue);
  border: 2px solid var(--mrb-blue-dark);
  box-shadow: 0 6px 16px var(--mrb-blue-glow);
  z-index: 2;
  pointer-events: none;
  transition: left 0.18s ease, width 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mrb-form-preview__highlight[hidden] { display: none; }

.mrb-form-preview__highlight::after {
  content: "✓";
  color: #fff;
  font-feature-settings: "tnum";
}

/* Privacy checkbox — horizontal layout (input + label side by side).
   The wrapper class is applied to the .form-item div via #wrapper_attributes
   so we have a single flex container around both input and label. */
.form-item.mrb-checkbox,
.mrb-checkbox.form-item,
.mrb-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  cursor: pointer;
}

.mrb-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--mrb-blue);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.mrb-checkbox label {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--mrb-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline !important;
  flex: 1;
}

.mrb-checkbox label a { color: var(--mrb-blue-dark); }

form#ila-meeting-room-booking-request .form-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.mrb-submit {
  background: var(--mrb-blue);
  color: #fff;
  border: 0;
  padding: 16px 28px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transition: background 0.18s ease, transform 0.18s ease;
}

.mrb-submit:hover { background: var(--mrb-blue-dark); transform: translateY(-1px); }

.mrb-form-note {
  margin: 0;
  padding: 14px 16px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-blue);
  color: var(--mrb-ink-soft);
}

/* ==========================================================================
   7. CONFIRMATION
   ========================================================================== */

.mrb-confirmation {
  background: linear-gradient(180deg, var(--mrb-card) 0%, var(--mrb-paper) 100%);
  padding: clamp(48px, 5vw, 80px) clamp(24px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}

.mrb-confirmation::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 143, 211, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 143, 211, 0.06) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  mask-image: radial-gradient(ellipse 70% 80% at 90% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}

.mrb-confirmation > * { position: relative; }

.mrb-confirmation__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.mrb-confirmation__summary {
  display: grid;
  gap: 12px;
  padding: 24px;
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 4px solid var(--mrb-blue);
}

.mrb-confirmation__summary dl { display: grid; gap: 8px; margin: 0; }

.mrb-confirmation__summary dt {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mrb-blue-dark);
  margin: 0;
}

.mrb-confirmation__summary dd { margin: 0; color: var(--mrb-ink); }

.mrb-confirmation__steps {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: step;
}

.mrb-confirmation__steps li {
  position: relative;
  padding-left: 38px;
  color: var(--mrb-ink-soft);
}

.mrb-confirmation__steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  background: var(--mrb-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}

.mrb-confirmation__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--mrb-blue);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 24px;
}

.mrb-confirmation__cta:hover { background: var(--mrb-blue-dark); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .mrb-hero { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); }
  .mrb-hero__legend { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 14px 22px; padding: 14px 18px; display: flex; }
  .mrb-floor__layout { grid-template-columns: 1fr; }
  .mrb-room-row__detail { grid-template-columns: 1fr; }
  .mrb-room-row__photo { max-width: 480px; }
}

@media (max-width: 860px) {
  .mrb-hero {
    grid-template-columns: 1fr;
    padding: 28px clamp(20px, 5vw, 32px) 48px;
    gap: 18px;
  }
  .mrb-hero__art { display: flex; gap: 12px; align-items: center; }
  .mrb-hero__chev { width: 80px; }
  .mrb-section-head { grid-template-columns: 1fr; gap: 16px; }
  .mrb-section-step { justify-self: start; }
}

@media (max-width: 720px) {
  .mrb-board__hours { display: none; }
  .mrb-room-row__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .mrb-room-row__day {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .mrb-room-row__day-status {
    grid-column: 2 / 3;
    text-align: left;
  }
  .mrb-room-row__day-bar { height: 22px; }
  .mrb-room-row__day.is-active .mrb-room-row__day-bar { height: 30px; }
  .mrb-span { padding: 4px 8px; line-height: 1.05; white-space: normal; }
  .mrb-span__label { padding: 1px 6px; }
  .mrb-slot-buttons { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .mrb-confirmation__layout { grid-template-columns: 1fr; }
  .mrb-floor__hint { padding: 12px 18px 18px; }
  .mrb-floor__inset { margin: 0 18px 18px; width: calc(100% - 36px); }
  .mrb-fieldset { grid-template-columns: 1fr; }
  .mrb-form-panel__head { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .mrb-day-tabs { grid-template-columns: repeat(5, minmax(60px, 1fr)); }
  .mrb-day-tab { padding: 10px; }
  .mrb-slot-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   9. PRESS CONFERENCE — request-only card, always last
   ========================================================================== */

.mrb-request {
  background: var(--mrb-paper);
  padding: clamp(36px, 4vw, 64px) clamp(24px, 5vw, 80px);
  border-bottom: 1px solid var(--mrb-line);
}

.mrb-request__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(24px, 4vw, 56px);
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-blue);
  align-items: stretch;
}

.mrb-request__copy {
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  align-content: start;
  gap: 14px;
}

.mrb-request__facts {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mrb-request__facts li {
  background: var(--mrb-blue-50);
  border: 1px solid var(--mrb-blue-100);
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mrb-blue-dark);
}

.mrb-request__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--mrb-blue);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  align-self: flex-start;
  margin-top: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.mrb-request__cta:hover {
  background: var(--mrb-blue-dark);
  transform: translateY(-1px);
  color: #fff;
}

.mrb-request__contact {
  margin: 4px 0 0;
  color: var(--mrb-ink-soft);
}

.mrb-request__contact a { color: var(--mrb-blue-dark); }

.mrb-request__photo {
  margin: 0;
  background: var(--mrb-night);
  display: flex;
}

.mrb-request__photo .mrb-room-row__photo-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  display: flex;
  width: 100%;
  position: relative;
}

.mrb-request__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* ==========================================================================
   10. LIGHTBOX
   ========================================================================== */

.mrb-room-row__photo-btn {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  position: relative;
}

.mrb-room-row__photo-btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mrb-room-row__photo-btn:hover img,
.mrb-room-row__photo-btn:focus-visible img {
  transform: scale(1.02);
}

.mrb-room-row__photo-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(20, 24, 31, 0.78);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.mrb-room-row__photo-btn:hover .mrb-room-row__photo-zoom,
.mrb-room-row__photo-btn:focus-visible .mrb-room-row__photo-zoom {
  opacity: 1;
}

.mrb-lightbox[hidden] { display: none !important; }

.mrb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}

/* Backdrop sits explicitly UNDER the panel. Without z-index here the
   <button> (which renders later than a positioned <figure>) was winning
   the stacking battle in some browsers and covering the photo entirely. */
.mrb-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 19, 32, 0.88);
  backdrop-filter: blur(2px);
  border: 0;
  cursor: zoom-out;
}

.mrb-lightbox__panel {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: min(1200px, 100%);
  max-height: 92vh;
  background: var(--mrb-night);
  border: 1px solid var(--mrb-blue);
}

.mrb-lightbox__panel img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: #000;
}

.mrb-lightbox__panel figcaption {
  margin: 0;
  padding: 14px 22px;
  background: var(--mrb-night);
  color: #cfd5dc;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-top: 1px solid var(--mrb-night-line, #2a3142);
}

.mrb-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--mrb-blue);
  color: #fff;
  cursor: pointer;
}

.mrb-lightbox__close:hover { background: var(--mrb-blue-dark); }

body.mrb-lightbox-open { overflow: hidden; }

/* Drupal's .layout-container carries a CSS transform on this theme,
   which creates a new containing block and breaks position: fixed for
   anything rendered inside it (including our lightbox). When the
   lightbox is open, neutralise those transforms so the overlay can
   actually cover the viewport instead of getting clipped to the form. */
body.mrb-lightbox-open .layout-container,
body.mrb-lightbox-open .dialog-off-canvas-main-canvas,
body.mrb-lightbox-open #block-ila-berlin-content,
body.mrb-lightbox-open main[role="main"] {
  transform: none !important;
  filter: none !important;
}

/* Same idea for the form wrapper itself — without this, the lightbox
   gets positioned relative to the form's vw-trick instead of the
   viewport. */
body.mrb-lightbox-open form#ila-meeting-room-booking-request {
  transform: none !important;
}

/* Fallback solid backdrop in case backdrop-filter is unsupported or
   the rgba colour falls back to a near-transparent layer. */
.mrb-lightbox__backdrop {
  background-color: #0f1320 !important;
  background: rgba(15, 19, 32, 0.92);
}

/* ==========================================================================
   11. INLINE VALIDATION
   ========================================================================== */

body.path-meeting-room-booking .messages--error.mrb-error-block-hidden,
body.path-meeting-room-booking .messages-list:has(.mrb-error-block-hidden) {
  display: none !important;
}

.mrb-input--error,
form#ila-meeting-room-booking-request input.mrb-input--error,
form#ila-meeting-room-booking-request select.mrb-input--error,
form#ila-meeting-room-booking-request textarea.mrb-input--error {
  border-color: var(--mrb-warning) !important;
  box-shadow: 0 0 0 3px rgba(176, 69, 0, 0.18);
}

form#ila-meeting-room-booking-request input:user-invalid,
form#ila-meeting-room-booking-request input:user-invalid:focus {
  border-color: var(--mrb-warning) !important;
  box-shadow: 0 0 0 3px rgba(176, 69, 0, 0.18) !important;
}

/* clientside_validation_jquery renders its required-/format-violation
   message as <label class="error"> directly inside the .form-item. The
   default browser styling collides with our flex-row checkbox wrapper
   (it became a third flex column) and clashes with the field labels in
   text inputs. Reset it to a full-width inline banner that sits below
   the offending field, matching the .mrb-field-error look. */
form#ila-meeting-room-booking-request label.error {
  display: block;
  flex-basis: 100%;
  order: 99;
  width: 100%;
  margin: 8px 0 0;
  padding: 6px 10px;
  background: rgba(176, 69, 0, 0.10);
  border-left: 3px solid var(--mrb-warning);
  color: var(--mrb-warning) !important;
  font: inherit;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

form#ila-meeting-room-booking-request input.error,
form#ila-meeting-room-booking-request select.error,
form#ila-meeting-room-booking-request textarea.error {
  border-color: var(--mrb-warning) !important;
  box-shadow: 0 0 0 3px rgba(176, 69, 0, 0.18) !important;
}

.mrb-field-error {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(176, 69, 0, 0.10);
  border-left: 3px solid var(--mrb-warning);
  color: var(--mrb-warning);
}

@media (max-width: 980px) {
  .mrb-request__inner { grid-template-columns: 1fr; }
  .mrb-request__photo img { min-height: 240px; }
  .mrb-lightbox__panel img { max-height: 70vh; }
}

/* ==========================================================================
   12. OUTDOOR BOX DETAIL — sits directly under the floor plan
   ========================================================================== */

.mrb-outdoor {
  margin-top: clamp(24px, 3vw, 40px);
  background: var(--mrb-card);
  border: 1px solid var(--mrb-line);
  border-left: 3px solid var(--mrb-pink);
  display: grid;
  grid-template-rows: auto 1fr;
}

.mrb-outdoor__head {
  padding: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--mrb-line);
  background: var(--mrb-paper);
}

.mrb-outdoor__title {
  margin: 4px 0 6px;
  color: var(--mrb-ink);
  letter-spacing: -0.005em;
}

.mrb-outdoor__lede {
  margin: 0;
  color: var(--mrb-ink-soft);
}

.mrb-outdoor__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 0;
  align-items: stretch;
}

.mrb-outdoor__map {
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(20, 24, 31, 0.04) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(20, 24, 31, 0.04) 23px 24px),
    var(--mrb-paper);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mrb-outdoor__img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

.mrb-outdoor__copy {
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  align-content: start;
  gap: 16px;
}

.mrb-outdoor__copy p { margin: 0; color: var(--mrb-ink-soft); }

.mrb-outdoor__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--mrb-pink);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  align-self: flex-start;
  transition: background 0.18s ease, transform 0.18s ease;
}

.mrb-outdoor__cta:hover {
  background: #d10474;
  transform: translateY(-1px);
  color: #fff;
}

@media (max-width: 980px) {
  .mrb-outdoor__layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. ITERATION 7: Mobile/desktop polish
   ========================================================================== */

/* Inactive day-bars get a smaller in-bar label so the existing
   booking text doesn't get clipped at the edges. The active day
   keeps the normal size for prominence. */
.mrb-room-row__day:not(.is-active) .mrb-span__label {
  font-size: 10px;
  letter-spacing: 0.1em;
}
.mrb-room-row__day.is-active .mrb-span__label {
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* Compact day-tab variant on the floor plan: short date as MI / 10.06.
   instead of the previous MI / 10 / JUN stack. */
.mrb-day-tabs--floor .mrb-day-tab__date {
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
  color: var(--mrb-ink);
}

/* Section head wraps when we run out of horizontal room. */
@media (max-width: 980px) {
  .mrb-section-head { grid-template-columns: auto minmax(0, 1fr); }
  .mrb-section-legend {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* ==========================================================================
   14. MOBILE OVERHAUL — keep the page within the viewport, stack contact
   form properly, slim down the day tabs and day bars.
   ========================================================================== */

@media (max-width: 720px) {
  /* Hide hero hatch decoration on mobile; it overflows on small widths. */
  .mrb-hero__hatch { display: none; }

  /* Hero compact: arrow + title side by side, no extra art. */
  .mrb-hero {
    padding: 24px 18px 28px;
  }
  .mrb-hero__title-row { gap: 14px; margin-bottom: 8px; }
  .mrb-hero__title-row .mrb-hero__arrow { width: 60px; }
  .mrb-hero__lede { margin: 0; color: var(--mrb-ink-soft); }

  /* Sections: tighter padding, no horizontal overflow. */
  .mrb-board,
  .mrb-floor,
  .mrb-form-panel,
  .mrb-confirmation,
  .mrb-outdoor,
  .mrb-request {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Day tabs: compact 5-column grid that fits 360 px. */
  .mrb-day-tabs--floor {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
  .mrb-day-tabs--floor .mrb-day-tab {
    padding: 8px 4px;
    text-align: center;
    align-items: center;
  }
  .mrb-day-tabs--floor .mrb-day-tab__weekday {
    letter-spacing: 0.08em;
    font-size: 10px;
  }
  .mrb-day-tabs--floor .mrb-day-tab__date {
    font-size: 11px;
    letter-spacing: 0;
  }
  .mrb-day-tabs--floor .mrb-day-tab__summary {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  /* Day-bar in each room row: tighter columns, smaller status label. */
  .mrb-room-row__day {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px 10px;
    padding: 6px 8px;
  }
  .mrb-room-row__day-status {
    grid-column: 2 / 3;
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .mrb-room-row__day-bar { height: 22px; }
  .mrb-room-row__day.is-active .mrb-room-row__day-bar { height: 30px; }

  /* Stop the hall-plan SVG from forcing a wider page. The viewBox is
     1200×720 — the auto height makes it tall on phones, so cap it. */
  .mrb-floor__svg--hall {
    max-height: 420px;
    height: auto;
  }

  /* Contact fieldset stacks; selection (Room and Time) keeps a
     2x2 grid because four selects in a single column read badly. */
  form#ila-meeting-room-booking-request fieldset.mrb-fieldset .fieldset-wrapper > .form-item {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 130px !important;
  }
  form#ila-meeting-room-booking-request fieldset[data-drupal-selector="edit-contact"] .fieldset-wrapper > .form-item {
    flex: 1 1 100% !important;
  }

  /* Slot preview wraps cleanly. */
  .mrb-form-preview {
    padding: 14px 16px 18px;
  }
  .mrb-form-preview__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Larger tap targets on slot buttons. */
  .mrb-slot-buttons {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }

  /* Make sure nothing in the app section can scroll horizontally. */
  .mrb-app, .mrb-app * { max-width: 100%; }
  .mrb-app { overflow-x: hidden; }
}