/* A quote request form's number field, choice tiles and live estimate (lib/bookings-view.js, public/assets/booking-quote.js).
   All three sit in the booking B selector family (public/explore/booking/b.css): one height, one ring, one radius,
   the brand's accent as the only selected colour, the brand tone as the quiet ground. Outside B the same rules fall
   back to the site tokens. */

/* ---------- the number field: minus, the typed number with what it counts, plus ---------- */
.bk-num {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 320px;
  min-height: var(--xs-h, 52px);
  padding: 4px;
  border-radius: var(--xs-r, 12px);
  background: var(--xs-bg, var(--ls-paper));
  box-shadow: inset 0 0 0 1.5px var(--xs-ring, var(--ls-line-2));
}
.bk-num:hover { box-shadow: inset 0 0 0 2px var(--xs-hover-ring, var(--ls-ink)); }
.bk-num:has(input:focus-visible) { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
.bk-num:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--tud-color-danger, #B3261E); }
.bk-num-step {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--xs-r, 12px) - 4px);
  color: var(--xs-on-ink, var(--ls-paper));
  background: var(--xs-on-bg, var(--ls-ink));
  cursor: pointer;
  transition: opacity 140ms ease;
}
.bk-num-step:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
.bk-num-step:disabled { opacity: 0.35; cursor: default; }
.bk-num-box { display: flex; flex: 1; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; }
/* outweighs each page's own input rule (.xb-quote :is(input[type="number"], ...)) */
.bk-form .bk-num input[type="number"],
.xb-quote .bk-num input[type="number"] {
  box-sizing: content-box;
  width: 3.2ch;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--xs-ink, var(--ls-ink));
  font: 700 20px/1.2 var(--tud-font-secondary, inherit);
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bk-num input[type="number"]::-webkit-outer-spin-button,
.bk-num input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.bk-num-unit { color: var(--xs-ink-2, var(--ls-ink-2)); font-size: 16px; font-weight: 700; white-space: nowrap; }

/* ---------- choice tiles: equal tiles in one row; a photo above the name, or the name alone on the paper ---------- */
/* wider than a phone: one even grid (it outweighs each page's own wrapping pill row, .xb-quote .bk-chips) */
@media (min-width: 601px) {
  .bk-form .bk-chips.bk-tiles, .xb-quote .bk-chips.bk-tiles { display: grid; grid-template-columns: repeat(var(--bk-tiles, 3), minmax(0, 1fr)); gap: 12px; max-width: 560px; }
}
.bk-tile { position: relative; display: block; min-width: 0; cursor: pointer; }
.bk-tile input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.bk-tile-face {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
  border-radius: var(--xs-r, 12px);
  color: var(--xs-ink, var(--ls-ink));
  background: var(--xs-hover-bg, var(--ls-paper));
  box-shadow: inset 0 0 0 1.5px var(--xs-ring, var(--ls-line-2));
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.bk-tile-photo { flex: 1; min-height: 0; margin: 4px 4px 0; overflow: hidden; border-radius: calc(var(--xs-r, 12px) - 4px) calc(var(--xs-r, 12px) - 4px) 0 0; }
.bk-tile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-tile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  overflow: hidden;
  font-family: var(--tud-font-secondary, inherit);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* no photo: the name alone, centred on the paper ground */
.bk-tile--plain .bk-tile-name { flex: 1; font-size: 17px; }
.bk-tile-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--xs-on-ink, var(--ls-paper));
  background: var(--xs-on-bg, var(--ls-ink));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 140ms ease, transform 160ms ease;
}
.bk-tile:hover input:not(:checked) + .bk-tile-face { box-shadow: inset 0 0 0 2px var(--xs-hover-ring, var(--ls-ink)); }
.bk-tile input:focus-visible + .bk-tile-face { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
.bk-tile input:checked + .bk-tile-face { box-shadow: inset 0 0 0 3px var(--xs-on-bg, var(--ls-ink)); }
.bk-tile input:checked + .bk-tile-face .bk-tile-name { color: var(--xs-on-ink, var(--ls-paper)); background: var(--xs-on-bg, var(--ls-ink)); }
.bk-tile input:checked + .bk-tile-face .bk-tile-tick { opacity: 1; transform: none; }
.bk-tile--plain input:checked + .bk-tile-face .bk-tile-tick { color: var(--xs-on-bg, var(--ls-ink)); background: var(--xs-on-ink, var(--ls-paper)); }
@media (prefers-reduced-motion: reduce) {
  .bk-tile-face, .bk-tile-tick { transition: none; }
}
/* phones: the tiles keep one size and the row swipes like the pills (public/assets/booking-choices.css) */
@media (max-width: 600px) {
  :root .ls .bk-tiles[data-bk-choices] { gap: 10px; }
  :root .ls .bk-tiles[data-bk-choices] > .bk-tile { width: 136px; }
  .bk-num { max-width: none; }
}

/* ---------- the live estimate, above the send button ---------- */
.bk-est { display: grid; gap: 6px; margin: 0 0 14px; padding: 16px; border-radius: 14px; background: var(--xb-tone, var(--ls-canvas)); }
.bk-est[hidden] { display: none; }
.bk-est-line { display: grid; gap: 2px; margin: 0; }
.bk-est-k { color: var(--ls-ink-2); font-size: 14px; font-weight: 700; }
.bk-est-fig { color: var(--ls-ink); font-family: var(--tud-font-secondary, inherit); font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-est-dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bk-est-confirm { color: var(--ls-ink-2); font-size: 14px; font-weight: 600; }
.bk-est-sub { margin: 0; color: var(--ls-ink); font-size: 14px; font-weight: 700; }
.bk-est-sub[hidden] { display: none; }
.bk-est-sub + .bk-est-sub { margin-top: -2px; }
.bk-est-line + .bk-est-sub { margin-top: 6px; padding-top: 10px; border-top: 1.5px dashed var(--ls-line-2); }