/* Section: showroom_booking — mockup EXALCO-Showroom "Booking" (showroom cards, day/time chips, details form, confirmation, side summary). */

.ex-showroom-booking__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
.ex-showroom-booking__main { min-width: 0; }
.ex-showroom-booking__form { margin: 0; }

/* ---- Numbered blocks 01 / 02 / 03 ---- */
.ex-showroom-booking__block { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.ex-showroom-booking__block:last-child { margin-bottom: 0; }
.ex-showroom-booking__legend { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 0; }
legend.ex-showroom-booking__legend { float: left; }
legend.ex-showroom-booking__legend + * { clear: both; }
.ex-showroom-booking__num { font-size: 24px; font-weight: 900; line-height: 1; color: var(--ex-red); }
.ex-showroom-booking__heading { margin: 0; font-size: 15px; font-weight: 800; line-height: normal; letter-spacing: .06em; color: var(--ex-ink); }

.ex-showroom-booking__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ex-showroom-booking__group-title { display: block; margin: 0 0 10px; padding: 0; font-size: 13.5px; font-weight: 700; line-height: normal; letter-spacing: .2em; color: var(--ex-ink); }

/* all choices are real radios, visually replaced by the designed card / chip */
.ex-showroom-booking__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ex-showroom-booking__showroom,
.ex-showroom-booking__day,
.ex-showroom-booking__slot,
.ex-showroom-booking__role { position: relative; display: block; margin: 0; cursor: pointer; }
.ex-showroom-booking__input:focus-visible + span { outline: 2px solid var(--ex-focus); outline-offset: 2px; }

/* ---- 01 Showroom cards ---- */
.ex-showroom-booking__showrooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-showroom-booking__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 16px 18px;
  border: var(--ex-border-w, 1.5px) solid var(--ex-line);
  background: var(--ex-white);
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast);
}
.ex-showroom-booking__showroom:hover .ex-showroom-booking__card { border-color: var(--ex-ink); }
.ex-showroom-booking__mark {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 2px solid rgba(35, 31, 32, .35);
  background: transparent;
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast);
}
.ex-showroom-booking__card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-showroom-booking__showroom-name { font-size: 14px; font-weight: 800; line-height: normal; color: var(--ex-ink); }
.ex-showroom-booking__showroom-address { font-size: 12px; line-height: 1.45; color: var(--ex-text-muted); }
.ex-showroom-booking__showroom-hours { font-size: 11px; line-height: normal; color: var(--ex-text-muted); }
.ex-showroom-booking__input:checked + .ex-showroom-booking__card { border-color: var(--ex-red); background: var(--ex-red-tint); }
.ex-showroom-booking__input:checked + .ex-showroom-booking__card .ex-showroom-booking__mark { border-color: var(--ex-red); background: var(--ex-red); }

/* ---- 02 Day chips ---- */
.ex-showroom-booking__days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ex-showroom-booking__day-chip {
  display: block;
  padding: 10px 14px;
  border: var(--ex-border-w, 1.5px) solid var(--ex-line-ink);
  background: var(--ex-white);
  color: var(--ex-ink);
  text-align: center;
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-showroom-booking__day-dow { display: block; font-size: 10px; font-weight: 700; line-height: normal; letter-spacing: .1em; opacity: .75; }
.ex-showroom-booking__day-date { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 800; line-height: normal; }
.ex-showroom-booking__day:hover .ex-showroom-booking__day-chip { border-color: var(--ex-ink); }
.ex-showroom-booking__input:checked + .ex-showroom-booking__day-chip { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }

/* ---- 02 Time chips ---- */
.ex-showroom-booking__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; transition: opacity var(--ex-t-base); }
.ex-showroom-booking__slots:empty { display: none; }
.ex-showroom-booking__slots.is-loading { opacity: .45; pointer-events: none; }
.ex-showroom-booking__slot-chip {
  display: block;
  padding: 12px 16px;
  border: var(--ex-border-w, 1.5px) solid var(--ex-line-ink);
  background: var(--ex-white);
  color: var(--ex-ink);
  /* Rendered value: the mockup's `font: … inherit` shorthand is invalid CSS and is dropped, so the chip (a <button> in the mockup) shows the default control font (13.33px / 400). */
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .04em;
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-showroom-booking__slot:hover .ex-showroom-booking__slot-chip { border-color: var(--ex-ink); }
.ex-showroom-booking__input:checked + .ex-showroom-booking__slot-chip { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }
/* taken slot: disabled input (or `.is-taken` on the label) */
.ex-showroom-booking__slot.is-taken,
.ex-showroom-booking__slot:has(.ex-showroom-booking__input:disabled) { cursor: not-allowed; }
.ex-showroom-booking__slot.is-taken .ex-showroom-booking__slot-chip,
.ex-showroom-booking__input:disabled + .ex-showroom-booking__slot-chip {
  border-color: var(--ex-line-soft);
  background: var(--ex-line-soft);
  color: rgba(35, 31, 32, .35);
  text-decoration: line-through;
}
.ex-showroom-booking__empty { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ex-text-muted); }
.ex-showroom-booking__taken-legend { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; line-height: normal; color: var(--ex-text-muted); }
.ex-showroom-booking__taken-swatch { display: block; flex: none; width: 10px; height: 10px; background: var(--ex-line-soft); }

/* ---- 03 Role chips + fields ---- */
.ex-showroom-booking__roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ex-showroom-booking__role-chip {
  display: block;
  padding: 12px 18px;
  border: var(--ex-border-w, 1.5px) solid rgba(35, 31, 32, .35);
  background: var(--ex-white);
  color: var(--ex-ink);
  font-size: var(--ex-fs-control); /* rendered value, as the time chips above */
  font-weight: 400;
  line-height: normal;
  letter-spacing: .06em;
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-showroom-booking__role:hover .ex-showroom-booking__role-chip { border-color: var(--ex-ink); }
.ex-showroom-booking__input:checked + .ex-showroom-booking__role-chip { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }
.ex-showroom-booking__fields { max-width: 720px; }
.ex-showroom-booking__block .ex-form-actions { max-width: 720px; }
.ex-showroom-booking__submit { margin-top: 24px; }

/* ---- Confirmation ---- */
.ex-showroom-booking__success:not([hidden]) { animation: ex-showroom-booking-fade .3s ease both; }
.ex-showroom-booking__success:focus { outline: none; }
.ex-showroom-booking__success-title { font-size: clamp(24px, 2.2vw, 34px); }
.ex-showroom-booking__confirm { max-width: 560px; margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--ex-ink); }
.ex-showroom-booking__confirm b { font-weight: 700; }
.ex-showroom-booking__success-text { max-width: 560px; font-size: 13px; line-height: 1.6; color: var(--ex-text-muted); }
.ex-showroom-booking__rebook {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid var(--ex-red);
  background: transparent;
  color: var(--ex-ink);
  /* Rendered value: the mockup's `font: … inherit` shorthand is invalid CSS and is dropped, so the control shows the default control font (13.33px / 400). */
  font-family: inherit;
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .07em;
  cursor: pointer;
  transition: color var(--ex-t-fast);
}
.ex-showroom-booking__rebook:hover,
.ex-showroom-booking__rebook:focus-visible { color: var(--ex-red); }

/* ---- Side summary ---- */
.ex-showroom-booking__summary {
  position: sticky;
  top: calc(var(--ex-scroll-offset) - 30px);
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--ex-blue-line);
  background: var(--ex-blue);
  color: var(--ex-ink);
}
.ex-showroom-booking__summary-title { margin: 0 0 14px; font-size: 10.5px; font-weight: 700; line-height: normal; letter-spacing: .22em; color: var(--ex-ink); }
.ex-showroom-booking__summary-list { margin: 0; font-size: 12.5px; line-height: 1.7; }
.ex-showroom-booking__summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: .5px solid rgba(35, 31, 32, .14); }
.ex-showroom-booking__summary-row:last-child { border-bottom: 0; }
.ex-showroom-booking__summary-row dd { margin: 0; font-weight: 800; text-align: right; }
.ex-showroom-booking__summary-note { margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--ex-red); font-size: 11.5px; line-height: 1.6; color: var(--ex-ink); }

@keyframes ex-showroom-booking-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Responsive (proposal — not designed) ---- */
@media (max-width: 1199px) {
  .ex-showroom-booking__layout { grid-template-columns: minmax(0, 1fr); }
  .ex-showroom-booking__summary { position: static; }
}
@media (max-width: 899px) {
  .ex-showroom-booking__slot-chip { padding: 13px 16px; }
  .ex-showroom-booking__role-chip { padding: 13px 18px; }
  .ex-showroom-booking__day-chip { min-width: 58px; }
  .ex-showroom-booking__group-title { font-size: 12px; letter-spacing: .16em; }
  .ex-showroom-booking__rebook { min-height: var(--ex-touch); }
}
@media (max-width: 599px) {
  .ex-showroom-booking__showrooms { grid-template-columns: minmax(0, 1fr); }
  .ex-showroom-booking__days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-showroom-booking__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-showroom-booking__slot-chip { text-align: center; }
  .ex-showroom-booking__submit .ex-btn { width: 100%; }
  .ex-showroom-booking__summary { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-showroom-booking__card,
  .ex-showroom-booking__mark,
  .ex-showroom-booking__day-chip,
  .ex-showroom-booking__slots,
  .ex-showroom-booking__slot-chip,
  .ex-showroom-booking__role-chip,
  .ex-showroom-booking__rebook { transition: none; }
  .ex-showroom-booking__success:not([hidden]) { animation: none; }
}