/* ==========================================================================
   Corporate Keys — v2 booking flow (ported from approved mockup)
   --------------------------------------------------------------------------
   Design layer for the booking steps only. The site header and footer are the
   real ones and still run on Bootstrap 3, so nothing here may leak into them:
   every rule is namespaced under .bk, which wraps only the booking content
   between the header and the footer.

   Uses production's existing Bootstrap 3 and Font Awesome; no new dependencies.
   ========================================================================== */

.bk {
  /* Brand palette, sampled from the live site rather than invented. */
  --bk-navy: #042354;
  --bk-navy-soft: #0b3570;
  --bk-blue: #0675af;
  --bk-blue-dark: #055d8b;
  --bk-blue-soft: #e8f4fb;

  --bk-ink: #17304f;
  --bk-muted: #667589;
  --bk-line: #dbe2ea;
  --bk-surface: #f5f7fa;

  --bk-danger: #cf3345;
  --bk-success: #1c7a4a;
  --bk-warn-bg: #fff8e6;
  --bk-warn-line: #f0d999;

  --bk-radius: 14px;
  --bk-radius-sm: 10px;
  --bk-shadow: 0 6px 20px rgba(4, 35, 84, .06);
  --bk-shadow-lg: 0 14px 40px rgba(4, 35, 84, .12);

  background: var(--bk-surface);
  color: var(--bk-ink);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  padding: 32px 0 56px;
}

.bk *,
.bk *::before,
.bk *::after { box-sizing: border-box; }

.bk__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Progress
   The step indicator is a list so it still reads as a sequence without CSS.
   The connector is drawn behind the circles with a pseudo-element, which keeps
   it from needing extra markup per gap.
   -------------------------------------------------------------------------- */

.bk-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  counter-reset: bkstep;
}

.bk-steps__item {
  position: relative;
  text-align: center;
  padding-top: 46px;
}

.bk-steps__item::before {
  content: counter(bkstep);
  counter-increment: bkstep;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bk-line);
  color: var(--bk-muted);
  font-weight: 700;
  font-size: 14px;
  line-height: 32px;
  z-index: 1;
}

/* Connector: sits between this circle and the next one. */
.bk-steps__item::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--bk-line);
}

.bk-steps__item:last-child::after { display: none; }

.bk-steps__label {
  display: block;
  font-size: 13px;
  color: var(--bk-muted);
}

.bk-steps__item.is-current::before {
  border-color: var(--bk-blue);
  color: var(--bk-blue);
  box-shadow: 0 0 0 4px rgba(6, 117, 175, .14);
}

.bk-steps__item.is-current .bk-steps__label {
  color: var(--bk-navy);
  font-weight: 700;
}

.bk-steps__item.is-done::before {
  content: "\2713";
  background: var(--bk-blue);
  border-color: var(--bk-blue);
  color: #fff;
}

.bk-steps__item.is-done::after { background: var(--bk-blue); }

.bk-steps__item.is-done .bk-steps__label { color: var(--bk-ink); }

/* --------------------------------------------------------------------------
   Layout: form beside a sticky summary
   -------------------------------------------------------------------------- */

.bk-layout { display: grid; gap: 24px; }

.bk-title {
  margin: 0 0 6px;
  font-family: Arial, Helvetica, sans-serif;
  /* Match the legacy "Apartment Confirmation" heading (26px). */
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--bk-navy);
}

.bk-sub { margin: 0 0 24px; color: var(--bk-muted); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.bk-card {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.bk-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-card__head h2 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--bk-navy);
}

.bk-card__head .bx, .bk-card__head .fa { color: var(--bk-blue); font-size: 20px; }

.bk-card__body { padding: 22px; }

/* --------------------------------------------------------------------------
   Fields
   48px targets, generous hit area, visible focus ring.
   -------------------------------------------------------------------------- */

.bk-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .bk-grid--2 { grid-template-columns: 1fr 1fr; }
  .bk-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bk-span-2 { grid-column: span 2; }
}

.bk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.bk-field > label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-navy);
}

.bk-req { color: var(--bk-danger); margin-left: 2px; }

.bk-field__hint { font-size: 12px; color: var(--bk-muted); }

.bk-input,
.bk-select,
.bk-textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #c3ccd8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--bk-ink);
}

.bk-textarea { min-height: 110px; resize: vertical; }

.bk-input::placeholder { color: #9aa7b8; }

.bk-input:focus,
.bk-select:focus,
.bk-textarea:focus {
  outline: none;
  border-color: var(--bk-blue);
  box-shadow: 0 0 0 3px rgba(6, 117, 175, .18);
}

.bk-select {
  appearance: none;
  /* Chevron drawn inline so the mockup needs no image asset. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667589' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Checkbox / radio rows read as tappable strips, not bare inputs. */
.bk-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-sm);
  cursor: pointer;
}

.bk-check:hover { border-color: #b9c6d6; background: #fbfcfd; }

.bk-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--bk-blue); }

.bk-check span { font-size: 14px; }

.bk-check + .bk-check { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Selectable option cards (payment choices, reservation type)
   -------------------------------------------------------------------------- */

.bk-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 18px;
  border: 2px solid var(--bk-line);
  border-radius: var(--bk-radius-sm);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.bk-option + .bk-option { margin-top: 12px; }

.bk-option:hover { border-color: var(--bk-blue); background: #fbfdff; }

.bk-option.is-selected {
  border-color: var(--bk-blue);
  background: var(--bk-blue-soft);
  box-shadow: 0 0 0 3px rgba(6, 117, 175, .12);
}

.bk-option input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--bk-blue); }

.bk-option__title { font-weight: 700; color: var(--bk-navy); }

.bk-option__meta { font-size: 13px; color: var(--bk-muted); }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.bk-note {
  border-radius: var(--bk-radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}

.bk-note--info { background: var(--bk-blue-soft); border: 1px solid #bfe0f2; color: #0a4a6e; }
.bk-note--warn { background: var(--bk-warn-bg); border: 1px solid var(--bk-warn-line); color: #6b4e08; }

.bk-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Summary sidebar
   -------------------------------------------------------------------------- */

.bk-summary {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
}

.bk-summary__head { background: var(--bk-navy); color: #fff; padding: 18px 22px; }

.bk-summary__head h2 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.bk-summary__property { font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 4px; }

.bk-summary__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bk-line);
  border-bottom: 1px solid var(--bk-line);
}

.bk-summary__date { background: #fff; padding: 14px 16px; text-align: center; }

.bk-summary__date dt {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bk-muted);
  font-weight: 500;
}

.bk-summary__date dd { margin: 4px 0 0; font-weight: 700; color: var(--bk-navy); }

.bk-summary__rows { padding: 6px 22px 16px; margin: 0; }

.bk-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bk-line);
  font-size: 14px;
}

.bk-summary__row:last-child { border-bottom: 0; }
.bk-summary__row dt { color: var(--bk-muted); font-weight: 400; }
.bk-summary__row dd { margin: 0; text-align: right; font-weight: 700; color: var(--bk-navy); }

.bk-summary__total {
  background: var(--bk-surface);
  border-top: 1px solid var(--bk-line);
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bk-summary__total span { font-weight: 700; color: var(--bk-navy); }
.bk-summary__total strong { font-size: 22px; color: var(--bk-navy); }

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.bk-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

/* Step 1 retains a full-width cell wrapper; align its sole action too. */
.bk[data-booking-v2="1"] .bk-actions > .bk-data-cell { text-align: right; }
.bk[data-booking-v2="2"] .bk-actions { flex-direction: row; justify-content: flex-end; }
.bk[data-booking-v2="2"] .bk-actions > .bk-data-cell:not(:has(button)) { display: none; }
.bk[data-booking-v2="2"] .bk-actions > .bk-data-cell { text-align: right; }
.bk[data-booking-v2="2"] .bk-actions > .bk-data-cell > div { margin-right: 0 !important; }
.bk[data-booking-v2="2"] .bk-actions .bk-btn { width: auto; }

.bk-btn--primary { background: var(--bk-blue); color: #fff; }
.bk-btn--primary:hover { background: var(--bk-blue-dark); color: #fff; }

.bk-btn--ghost { background: #fff; border-color: #c3ccd8; color: var(--bk-ink); }
.bk-btn--ghost:hover { border-color: var(--bk-muted); color: var(--bk-ink); }

.bk-btn:focus-visible { outline: 3px solid rgba(6, 117, 175, .4); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Toggled sections
   -------------------------------------------------------------------------- */

.bk-hidden { display: none; }

/* --------------------------------------------------------------------------
   Desktop: summary moves beside the form and sticks while the form scrolls.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .bk-layout { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; }
  .bk-layout--full { grid-template-columns: minmax(0, 860px); justify-content: center; }
  .bk-aside { position: sticky; top: 24px; }
}

/* --------------------------------------------------------------------------
   Mobile: the summary collapses so it never pushes the form off screen.
   -------------------------------------------------------------------------- */

.bk-summary__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 10px;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 992px) {
  .bk-summary__toggle { display: none; }
  .bk-summary__body { display: block !important; }
}

@media (max-width: 991px) {
  .bk-aside { order: -1; }
  .bk-title { font-size: 24px; }
  .bk-steps__label { font-size: 11px; }
}

@media (max-width: 600px) {
  .bk { padding: 20px 0 40px; }
  .bk-title { font-size: 22px; }
  .bk__inner { padding: 0 14px; }
  .bk-card__body { padding: 18px 16px; }
  .bk-actions { flex-direction: column-reverse; align-items: stretch; }
  .bk-actions .bk-btn { width: 100%; }

  /* Only the current step keeps its label, so the row cannot wrap. */
  .bk-steps__item:not(.is-current) .bk-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Making the inherited chrome responsive
   --------------------------------------------------------------------------
   The live site is a fixed-width desktop layout:

     site.css      body { min-width: 1200px !important }
     <head>        <meta name="viewport" content="width=1100px, initial-scale=0">

   Together those force a 1200px canvas and tell phones to render it at desktop
   width. The viewport tag is replaced when the mockup is built; the min-width
   has to be unset here, along with the fixed widths on the header and footer
   containers, or the booking layer is responsive inside a page that is not.

   These rules are what a real rollout would have to adopt too — they are the
   actual cost of making this flow work on a phone, so they belong in the
   mockup rather than being hidden behind a narrower demo.
   ========================================================================== */

@media (max-width: 1199px) {
  html.bk-page,
  body.bk-page {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: clip;
  }

  body.bk-page #body_content,
  body.bk-page .clear_me {
    min-width: 0 !important;
    width: auto !important;
  }

  /* Bootstrap 3's fixed container widths in the header and footer. */
  .site-header .container,
  .site-footer .container,
  .navbar .container {
    width: auto !important;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-footer,
  .site-footer__bottom,
  .site-footer__copyright {
    max-width: 100%;
  }

  /* Footer columns stack rather than overflowing. */
  .site-footer .footer-col-1,
  .site-footer .mjmmm,
  .site-footer .width-80 {
    width: 100% !important;
    float: none !important;
  }

  .site-footer img { max-width: 100%; height: auto; }
}

/* ==========================================================================
   Boxicons inside the booking layer
   --------------------------------------------------------------------------
   The chrome sets `.bx { font-size: 100px }` for the large marketing icons it
   uses on other pages. Icons here are inline with text and must not inherit
   that, so every .bx under .bk is pinned to its own size. Sized in em so an
   icon tracks whatever text it sits beside.
   ========================================================================== */

.bk .bx {
  font-size: 1.25em;
  line-height: 1;
  width: auto;
  height: auto;
  vertical-align: middle;
}

.bk .bk-btn .bx { font-size: 1.15em; }
.bk .bk-card__head .bx { font-size: 1.2em; }
.bk .bk-summary__toggle .bx { font-size: 1.1em; transition: transform .15s ease; }

/* ==========================================================================
   Clearing the fixed mobile header
   --------------------------------------------------------------------------
   Below 992px the chrome swaps in `header.mobile-header`, which is
   `position: fixed; height: 80px; z-index: 99999` and has nothing reserving
   space beneath it. On the live pages the legacy tables happen to start low
   enough that the overlap is not obvious; the booking layer starts at the top
   of #body_content, so its first element sits underneath the bar.

   Padding is applied to .bk rather than to body so the fix stays inside the
   booking scope and does not shift other pages that may already compensate.
   ========================================================================== */

@media (max-width: 991px) {
  .bk { padding-top: 96px; }
}

@media (max-width: 600px) {
  .bk { padding-top: 92px; padding-bottom: 40px; }
}

/* ==========================================================================
   Id collisions with the chrome's stylesheets
   --------------------------------------------------------------------------
   Field ids come from the live booking form and cannot be renamed — the
   submission handler and the shared validation JS both key off them. Some of
   those ids are also used by unrelated parts of the site, and the chrome's
   stylesheets target them with id selectors:

     expansion.css:119   #kitchen, #internet { width: 110px }

   #internet there is the search-listing filter, not this form's field, but the
   selector matches anyway and an id beats any class rule, so the control
   rendered at 110px beside its 351px siblings.

   Matched at id specificity to win it back. Listed individually rather than
   blanket-resetting every control, so a genuine future collision shows up as a
   visible bug instead of being silently absorbed.
   ========================================================================== */

.bk #internet,
.bk #kitchen {
  width: 100%;
}

/* ==========================================================================
   Field-level disclosure
   --------------------------------------------------------------------------
   Used by "Why are only limited dates available to choose to pay from?" under
   the check-in date.

   The live page renders this as an absolutely positioned 345px panel pinned to
   `right: 0`, which cannot work on a narrow screen — it would either overflow
   the viewport or cover the field it explains. Here it expands inline beneath
   the trigger instead, so it pushes content down rather than overlapping it
   and needs no width guess.

   The trigger is a <button>, not an <a href="javascript:;">, because it toggles
   content on the same page rather than navigating. That makes it focusable and
   operable by keyboard for free, and aria-expanded then describes real state.
   ========================================================================== */

.bk .bk-field__link {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  /*
   * Scoped to .bk to outrank `.bk button { font: inherit }` in
   * bootstrap.scoped.css, which loads after this file. `font` is shorthand and
   * resets font-size, so a bare `.bk-field__link` rule loses and the link
   * renders at the inherited 15px.
   */
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--bk-blue);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.bk-field__link:hover { color: var(--bk-blue-dark); }
.bk-field__link:focus-visible {
  outline: 2px solid var(--bk-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.bk-disclosure {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bk-blue-soft);
  border: 1px solid #bfe0f2;
  border-radius: var(--bk-radius-sm);
  font-size: 12px;
  line-height: 1.6;
  color: #0a4a6e;
}

.bk-disclosure p { margin-bottom: 8px; }
.bk-disclosure p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Validation states
   --------------------------------------------------------------------------
   The live flow carries 29 validation messages on step 1 alone, each written
   into an empty placeholder by the shared JS in book/behaviour/step1.php and
   toggled with display. The mockup had none of them, so the design could not
   be reviewed in its error state.

   The chrome styles these as `.error { color:#CC0000; font-size:12px }` — text
   only, no field treatment. A field that is in error here gets a matching
   border and the message beneath it, which is the point the design review
   needs to settle.

   Messages below are copied from the shared JS, not invented. The ids match
   the live ones so a port can drop the same markup in unchanged.
   ========================================================================== */

.bk-field.is-invalid .bk-input,
.bk-field.is-invalid .bk-select,
.bk-field.is-invalid .bk-textarea {
  border-color: var(--bk-danger);
  background: #fff8f8;
}

.bk-field.is-invalid .bk-input:focus,
.bk-field.is-invalid .bk-select:focus,
.bk-field.is-invalid .bk-textarea:focus {
  border-color: var(--bk-danger);
  box-shadow: 0 0 0 3px rgba(207, 51, 69, .18);
}

.bk-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bk-danger);
}

.bk-field__error::before {
  content: "\26A0";
  flex: none;
}

/* .bk-hidden still wins, so an empty error placeholder stays collapsed. */
.bk-field__error.bk-hidden { display: none; }

/*
 * The shared validators toggle display on placeholders that may carry no
 * message, which previously rendered a lone warning glyph. booking-v2.js marks
 * those as empty so the whole row collapses until real text arrives.
 */
.bk .bk-field__error.is-empty { display: none; }

/*
 * Validation-state styling above is kept, but nothing in the mockup triggers
 * it: the messages ship with .bk-hidden and the live flow is what reveals
 * them. To preview the error state, remove .bk-hidden from a
 * [data-error-message] span and add .is-invalid to its .bk-field in DevTools.
 */

/* Match the live booking page's typography rather than the static mockup,
   whose named webfonts are absent from its bundle. Legacy body text and form
   controls render in Arial at 14px/20px with 12px controls. Century Gothic on
   the step 3 payment option buttons is intentionally left to book.css.
   Scoped to .bk so the shared header and footer are untouched. */
.bk, .bk :not(.bx):not(.fa):not(.glyphicon) { font-family: Arial, Helvetica, sans-serif; }
/* The live footer stylesheet marks heading fonts !important. */
.bk h1, .bk h2, .bk h3 { font-family: Arial, Helvetica, sans-serif !important; }
.bk { font-size: 14px; line-height: 20px; }
.bk .bk-field > label { font-size: 12px; }
.bk .bk-field__hint, .bk .bk-field__link { font-size: 11px; }
.bk .bk-field__error { font-size: 12px; }
.bk .bk-title { padding: 0; }
.bk p { margin: 0 0 12px; }
.bk dl, .bk dd { margin: 0; }
.bk input, .bk select, .bk textarea, .bk button { font-family: inherit; }
.bk img { height: auto; }

/* Live integration: legacy validation replaces control className outright. */
body.bk-page { min-width: 0 !important; }
body.bk-page #body_content { min-width: 0 !important; width: 100% !important; }
.bk .bk-main, .bk .bk-aside { min-width: 0; }
.bk #BookingForm { margin: 0; }
.bk .bk-field__control { min-width: 0; }
/* Service selects were inline beside <strong> captions with a 10px offset. */
.bk #car_parking, .bk #internet, .bk #facilities-induction {
  margin-left: 0 !important;
  vertical-align: top;
}
@media (min-width: 720px) {
  .bk .bk-service-field > label { min-height: 40.3px; }
  @supports (grid-template-rows: subgrid) {
    .bk .bk-service-field {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 6px;
    }
    .bk .bk-service-field > label { min-height: 0; align-self: start; }
    .bk .bk-service-field > .bk-field__control { align-self: start; }
  }
}
/* Legacy promotion spacing rows must not consume modern grid tracks. */
.bk #trPromotion1 { display: none !important; }
/* Conditional message copy uses the same 12px scale when revealed/populated.
   Keep summary values, display headings and modal close controls unchanged. */
.bk #deal_message1, .bk #deal_message2,
.bk #div_min91_error, .bk #div_max361_error,
.bk #arrival_note, .bk #weekend,
.bk #trPromotion2, .bk #trPromotion2 .subheadlblue strong,
.bk #trPromotion3, .bk #PromotionDetails,
.bk #fwp-facilities-induction-rate, .bk #alert-banner,
.bk #myModal, .bk #nmessage, .bk #PromoNote1,
.bk #guest_other_p, .bk #guest_other_p_1,
.bk #guest_sole_payment_no, .bk #guest_more_p,
.bk #hasEmv3dsErrors { font-size: 12px; }
/* Group the dates and calculated Nights; keep notice on its own full row. */
.bk .bk-date-row { min-width: 0; }
.bk .bk-exit-fee, .bk .bk-checkin-info { margin-bottom: 0; font-size: 12px; line-height: 20px; }
.bk .bk-exit-fee > strong, .bk .bk-checkin-info > strong { display: block; margin-bottom: 6px; }
.bk .bk-checkin-info[hidden], .bk .bk-fees-info[hidden] { display: none; }
.bk .bk-fees-info { min-width: 0; }
.bk .bk-fees-info .bk-checkin-info { margin-top: 18px; }
.bk .bk-fees-info > .bk-checkin-info:first-child { margin-top: 0; }
.bk .bk-alert-banner { display: flex; align-items: flex-start; gap: 8px; width: 100% !important; margin-top: 12px !important; padding: 10px 12px 10px 16px !important; border: 1px solid #bfe0f2 !important; background: var(--bk-blue-soft); color: #0a4a6e; box-sizing: border-box; }
.bk .bk-alert-banner__icon { flex: none; color: inherit; font-size: 14px; line-height: 20px; }
.bk .bk-alert-banner__copy { min-width: 0; flex: 1; }
.bk .bk-fees-info #check_in_time ul { margin: 0 0 10px; padding-left: 20px; }
.bk .bk-fees-info #check_in_time li { font-size: inherit; }
.bk .bk-fees-info #check_in_time li + li { margin-top: 4px; }
.bk #check_in_time p:last-child, .bk #arrival_note_txt p:last-child { margin-bottom: 0; }
.bk #arrival_note { margin: 0; font-size: 12px; line-height: 20px; gap: 8px; }
.bk #arrival_note > strong { margin: 0; color: inherit; }
.bk #arrival_note > .bk-field__control { color: inherit !important; }
.bk #arrival_note_txt { display: block; }
.bk .bk-date-feedback { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid #ebccd1; border-radius: var(--bk-radius-sm); background: #f2dede; color: #a94442; font-size: 12px; line-height: 20px; box-sizing: border-box; }
.bk .bk-date-feedback[hidden] { display: none; }
.bk .bk-date-feedback > .fa { flex: none; margin-top: 2px; font-size: 14px; line-height: 18px; }
.bk .bk-date-feedback__body { display: grid; gap: 6px; min-width: 0; flex: 1; }
/* Mixed text/link errors must stack rather than become separate flex columns. */
.bk #endError, .bk .bk-date-feedback #alternative { display: block; position: relative; margin-top: 0; padding: 0; font-size: 12px; line-height: 20px; color: inherit; }
.bk #endError.is-empty, .bk #endError.bk-hidden, .bk .bk-date-feedback #alternative.is-empty, .bk .bk-date-feedback #alternative.bk-hidden { display: none; }
.bk #endError::before, .bk .bk-date-feedback #alternative::before { content: none; }
.bk #endError p { margin-bottom: 6px; }
.bk #endError p:last-child { margin-bottom: 0; }
/* One decorative Font Awesome icon per message, including dynamic callbacks.
   Preserve host positioning/padding; keep wrapped copy aligned after the icon. */
.bk .bk-message { font-size: 12px; }
.bk .bk-message--relative { position: relative; }
.bk .bk-message--has-icon, .bk #creditcard .payment-card-error.bk-message--has-icon { padding-left: calc(var(--bk-message-padding-left, 0px) + 20px) !important; }
.bk .bk-message > [data-bk-message-icon] { position: absolute; left: var(--bk-message-padding-left, 0px); top: var(--bk-message-padding-top, 0px); font-family: FontAwesome !important; font-size: 14px !important; line-height: 20px; }
.bk .bk-field__error.bk-message { display: block; }
.bk .bk-field__error.bk-message::before { content: none; }
.bk .bk-field__error.bk-message.is-empty, .bk .bk-field__error.bk-message.bk-hidden { display: none; }
@media (min-width: 720px) {
  .bk .bk-date-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(80px, .4fr); }
  .bk .bk-date-row > .bk-field > label { min-height: 40px; }
  @supports (grid-template-rows: subgrid) {
    .bk .bk-date-row > .bk-field {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 6px;
    }
    .bk .bk-date-row > .bk-field > label { min-height: 0; align-self: start; }
    .bk .bk-date-row > .bk-field > :not(label) { align-self: start; }
  }
}
/* All service descriptions share typography and control-to-copy spacing. */
.bk .bk-service-field .bk-service-description {
  width: 100% !important;
  text-align: left !important;
  display: block;
  margin: 8px 0 0 !important;
  font-size: 14px;
  line-height: 20px;
  color: var(--bk-ink);
}
.bk .bk-service-field > .bk-field__control > br { display: none; }
.bk .bk-field span[style*="float"], .bk .bk-field div[style*="float"] { float: none !important; text-align: left !important; }
/* Legacy controls render at 12px; keep v2's larger touch targets. */
.bk .bk-field input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.bk .bk-field select, .bk .bk-field textarea {
  width: 100% !important; max-width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid #c3ccd8; border-radius: 8px; background-color: #fff;
  color: var(--bk-ink); font-family: inherit; font-size: 12px; line-height: normal; box-sizing: border-box;
}
.bk .bk-field select { padding-right: 38px; }
/* Keep Google's autocomplete failure indicator visible, never tiled over text. */
.bk .bk-field input.gm-err-autocomplete {
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: right 14px center !important;
  padding-right: 44px;
}
/* book.css also targets this ID, outranking the normal field selectors. */
.bk #internet {
  font-size: 12px; padding: 10px 38px 10px 14px;
  border: 1px solid #c3ccd8; border-radius: 8px; color: var(--bk-ink);
}
.bk .bk-field input:focus, .bk .bk-field select:focus, .bk .bk-field textarea:focus {
  outline: 3px solid rgba(6,117,175,.18); border-color: var(--bk-blue);
}
.bk .bk-field .inputlongred, .bk .bk-field .inputshortred,
.bk .bk-field .selectlongred, .bk .bk-field .selectshortred,
.bk .bk-field.is-invalid input, .bk .bk-field.is-invalid select {
  border-color: var(--bk-danger) !important; background-color: #fff8f8 !important;
}
.bk .bk-field__error { width: auto; }
.bk .bk-field > label { margin: 0 0 5px; }
.bk .bk-card__body > .bk-field + .bk-field { margin-top: 18px; }
.bk .bk-card__body.bk-grid > .bk-field { margin-top: 0; }
/* Legacy subsection captions are secondary to the new card headings. */
.bk[data-booking-v2="2"] .bk-field > .subheadlblue { background: transparent; padding: 0; }
.bk[data-booking-v2="2"] .bk-field > .subheadlblue strong { color: var(--bk-navy); }
@media (min-width: 720px) {
  .bk[data-booking-v2="2"] #div-hdhabout .bk-field > label { min-height: 40px; }
}
.bk .bk-payment-fields > .bk-field > .bk-field__control { width: 100%; }
.bk .bk-payment-fields > .bk-field > .bk-field__control:has(#expiry_month) { display: flex; gap: 8px; }
.bk .bk-payment-fields #expiry_month, .bk .bk-payment-fields #expiry_year { flex: 1; width: 50% !important; }
/* Production callbacks reveal these panels with display:inline. */
.bk #divCompany[style*="display: inline"], .bk #divCompany[style*="display:inline"],
.bk #divIndividual[style*="display: inline"], .bk #divIndividual[style*="display:inline"],
.bk #div-hdhabout[style*="display: inline"], .bk #div-hdhabout[style*="display:inline"] { display: block !important; }
.bk .bk-payment-fields { margin-bottom: 18px; }
.bk .bk-payment-fields > .bk-field + .bk-field { margin-top: 0; }
.bk #creditcard .bk-field__control > select { float: none !important; }
.bk #pop_cc_error { width: 100% !important; max-width: 100%; }
.bk #pop_cc_error span[style*="width"] { width: auto !important; max-width: 100%; float: none !important; }
.bk .bk-data { width: 100% !important; float: none !important; max-width: 100%; }
.bk .bk-data-row { display: flex; gap: 12px; align-items: start; padding: 6px 0; }
.bk .bk-data-cell { min-width: 0; flex: 1; }
.bk .bk-data-cell:only-child { flex-basis: 100%; }
.bk .bk-notices { font-size: 13px; margin-bottom: 16px; }
.bk .bk-notices:empty { display: none; }
.bk .bk-summary__row { flex-wrap: wrap; }
.bk .bk-summary__row dd { overflow-wrap: anywhere; }
.bk .bk-summary__row:has(#rentaltext) { display: block; text-align: right; }
.bk .bk-summary__row:has(#rentaltext) dt { width: 100%; text-align: right; }
.bk .bk-summary__row:has(#rentaltext) dd { width: 100%; }
.bk .bk-summary__row #nightError { padding-left: 0 !important; }
.bk .bk-summary__row #nightError > [data-bk-message-icon] { display: none !important; }
.bk .bk-summary__row #rentaltext, .bk .bk-summary__row #nightError { font-size: 12px !important; line-height: 20px; }
.bk .bk-summary__row #nightMessage { position: static !important; width: auto !important; }
.bk .bk-invoice { border: 1px solid var(--bk-line); border-radius: 14px; background: #fff; padding: 18px; margin-top: 16px; font-size: 13px; }
.bk .bk-invoice > br, .bk .bk-card__body > br:first-child { display: none; }
.bk .bk-invoice .bk-data-cell:last-child:not(:only-child) { flex: 0 0 85px; text-align: right; }
.bk .bk-invoice .bk-data-cell:only-child { flex: 1 1 100%; }
.bk .bk-invoice .bk-data-cell > p { text-align: left !important; overflow-wrap: anywhere; margin-top: 12px; }
.bk .bk-invoice div[style*="width: 40%"] { width: 100% !important; float: none !important; position: static !important; top: auto !important; margin-top: 12px; color: var(--bk-muted); font-size: 12px; line-height: 20px; }
.bk .bk-invoice div[style*="width: 40%"] b { color: var(--bk-ink); }
.bk #btn_invoice, .bk #btn_corporate, .bk #btn_authorise {
  width: 100%; min-height: 60px; padding: 18px; border: 1px solid var(--bk-line);
  border-radius: 10px; background: #fff; color: var(--bk-navy); font: inherit; cursor: pointer;
}
.bk #btn_invoice.selpayments, .bk #btn_corporate.selpayments, .bk #btn_authorise.selpayments {
  background: var(--bk-blue-soft); border-color: var(--bk-blue); box-shadow: 0 0 0 1px var(--bk-blue);
}
.bk #creditcard, .bk #creditcard_terms, .bk #creditcard_recurring, .bk #creditcard_tcs, .bk #div_loyalty_points { margin: 0 0 20px !important; }
.bk :is(#creditcard_terms, #creditcard_tcs) label { display: block; }
.bk :is(#creditcard_terms, #creditcard_tcs) label > .bk-data > .bk-data-row { flex-wrap: nowrap; gap: 12px; }
.bk :is(#creditcard_terms, #creditcard_tcs) label > .bk-data > .bk-data-row > .bk-data-cell:first-child { flex: 0 0 20px; }
.bk :is(#creditcard_terms, #creditcard_tcs) label > .bk-data > .bk-data-row > .bk-data-cell:last-child { flex: 1 1 auto; margin-top: 0 !important; }
.bk #creditcard_tcs .bk-card__body > br { display: none; }
.bk #div_loyalty_points .bk-card__body > br { display: none; }
.bk #div_loyalty_points .bk-card__body > b:first-of-type { display: block; margin-bottom: 10px; }
.bk #div_loyalty_points .subheadlblue { display: grid; grid-template-columns: 20px max-content 20px max-content; align-items: center; gap: 8px; padding: 0 0 12px !important; font-size: 14px !important; line-height: 20px; }
.bk #div_loyalty_points .subheadlblue > label:first-of-type { margin-right: 16px; }
.bk #div_loyalty_points .subheadlblue input[type=radio] { margin: 0 !important; }
.bk #div_loyalty_points .subheadlblue label { margin: 0; }
.bk #div_loyalty_points #div_promo_code > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 0 !important; margin-bottom: 0 !important; }
.bk #div_loyalty_points #txt_promo_code { min-height: 44px; }
.bk #div_loyalty_points #apply_promo_code,
.bk #div_loyalty_points #btn_check_balance {
  min-height: 44px; padding: 8px 14px !important;
  background: #0077C0 !important; color: #fff; border: 1px solid #F1F9FB;
  border-radius: 6px; line-height: 20px; font-weight: 400;
}
.bk #div_loyalty_points #div_promo_code > div > br { display: none; }
.bk #div_loyalty_points #div_promo_code #promo_code_msg { flex: 1 0 100%; width: auto !important; margin: 2px 0 0 !important; }
.bk #div_loyalty_points #div_loyalty_code .bk-data-row:first-child { padding: 14px 16px; border: 1px solid #cfe3ef; border-radius: 8px; background: var(--bk-blue-soft); }
/* Keep production's discount notices and conditional rows visible as emitted. */
.bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) { flex-wrap: nowrap; align-items: center; margin-top: 12px; }
.bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) .bk-data-cell:first-child { flex: 1 1 auto; width: auto !important; }
.bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) .bk-data-cell:last-child { flex: 0 0 auto; }
.bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) #convert_to_normal_booking { min-height: 44px; white-space: nowrap; }
.bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) + .bk-data-row { color: var(--bk-muted); }
.bk[data-booking-v2="3"] #bill_options .bk-card__body,
.bk[data-booking-v2="3"] #bill_options .alert,
.bk[data-booking-v2="3"] #payment_schedule,
.bk[data-booking-v2="3"] #div_pay_instruction { font-size: 14px; line-height: 20px; }
.bk #bill_options .bk-card__body > div + .alert { margin-top: 12px; }
.bk #div_pay_instruction { margin-bottom: 12px; }
.bk #div_pay_instruction > br { display: none; }
.bk #div_pay_instruction > b + b { margin-left: 4px; }
.bk #creditcard .bk-payment-spacer { display: none; }
.bk #creditcard .bk-data-row { padding: 0; }
.bk #creditcard .bk-field > label,
.bk #creditcard input:not([type=hidden]), .bk #creditcard select,
.bk #creditcard .payment-gateway, .bk #preauth_clause > .bk-data-cell > div { font-size: 14px !important; line-height: 20px; }
.bk #creditcard .subheadlblue { margin-top: 12px !important; font-size: 14px !important; }
.bk #creditcard .bk-card__body > .bk-data > .bk-data-row:first-child .subheadlblue { margin-top: 0 !important; }
.bk #preauth_clause > .bk-data-cell > div { margin: 12px 0 0 !important; }
/* Step 3 uses one body/control scale; preserve heading and icon hierarchy. */
.bk[data-booking-v2="3"] :is(.bk-card__body, .bk-invoice, .bk-summary__body, .bk-sub),
.bk[data-booking-v2="3"] :is(.bk-card__body, .bk-invoice, .bk-summary__body) :not(.fa):not(.bx):not(.glyphicon) {
  font-size: 14px !important;
  line-height: 20px;
}
.bk #div_loyalty_code .bk-loyalty-spacer, .bk #div_loyalty_code > br { display: none; }
.bk #div_loyalty_code .bk-loyalty-actions { display: grid; grid-template-columns: minmax(0, 200px) auto; justify-content: start; align-items: start; gap: 8px 12px; margin-top: 12px; }
.bk #div_loyalty_code .bk-loyalty-field { width: auto !important; }
.bk #div_loyalty_code .bk-loyalty-actions > label { grid-column: 1 / -1; display: block; margin: 0; }
.bk #div_loyalty_code input.form-control { width: 100% !important; max-width: 320px; min-height: 48px; border: 1px solid #c3ccd8; border-radius: 8px; padding: 10px 14px; text-align: left !important; }
.bk #div_loyalty_code .bk-loyalty-actions > .bk-data-cell:last-child:not(:first-child) { flex: 0 0 auto; }
.bk #div_loyalty_code #clear_voucher_code_btn { display: block; margin: 8px 0 0 !important; }
.bk #creditcard_cancellation { margin: 16px 0 !important; }
.bk #creditcard input:not([type=checkbox]):not([type=radio]), .bk #creditcard select { max-width: 100%; }
.bk #creditcard .payment-card { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.bk #creditcard .payment-card-header { display: none; }
.bk #creditcard .payment-card-body { padding: 0; }
.bk #creditcard .payment-card-table { width: 100%; border-collapse: collapse; }
/* Production determines which payment rows exist and which are hidden. */
.bk #creditcard .payment-card-table .payment-card-section-row,
.bk #creditcard .payment-card-table .payment-card-address-toggle,
.bk #creditcard .payment-card-table .payment-card-error-row,
.bk #creditcard .payment-card-table .payment-card-preauth { display: block; width: 100%; }
.bk #creditcard .payment-card-table .payment-card-section-row,
.bk #creditcard .payment-card-table .payment-card-address-toggle { padding: 0; }
.bk #creditcard .payment-card-table .payment-card-section-row > .bk-data-cell,
.bk #creditcard .payment-card-table .payment-card-address-toggle > .bk-data-cell { width: 100%; padding: 0 10px; }
.bk #creditcard .payment-card-table .payment-card-section-row .subheadlblue { float: none !important; margin: 0 !important; }
.bk #creditcard .payment-card-table .payment-card-address-toggle > .bk-data-cell { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.bk #creditcard .payment-card-table .payment-card-address-toggle input[type=checkbox] { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
.bk #creditcard .payment-card-table .payment-card-address-toggle .payment-card-field-label { flex: 1 1 auto; margin: 0; line-height: 20px; }
.bk #creditcard .payment-card-table .payment-card-field-row.row { display: flex; width: auto; margin-right: -10px; margin-left: -10px; padding: 0; gap: 0; }
.bk #creditcard .payment-card-table .payment-card-field { display: block; min-width: 0; flex: none; padding: 10px; }
.bk #creditcard .payment-card-table .payment-card-field.col-xs-12 { width: 100%; }
@media (min-width: 720px) {
  .bk #creditcard .payment-card-table .payment-card-field.col-sm-6 { width: 50%; }
}
.bk #creditcard .payment-card-table .payment-card-field-label { display: block; margin-bottom: 7px; }
.bk #creditcard .payment-card-table .payment-card-field input,
.bk #creditcard .payment-card-table .payment-card-field select { width: 100% !important; }
.bk #creditcard .payment-card-table .payment-card-expiry-controls.row { margin-right: -4px; margin-left: -4px; }
.bk #creditcard .payment-card-table .payment-card-expiry-controls > [class*="col-"] { padding-right: 4px; padding-left: 4px; }
.bk #creditcard .payment-card-table .payment-card-field-row--expiry .payment-card-select { float: none !important; min-width: 0; }
.bk #creditcard .payment-card-table .payment-card-field-row--number .payment-card-number-layout { display: block; width: 100%; }
.bk #creditcard .payment-card-table .payment-card-field-row--number .payment-card-number-field { width: 100%; min-width: 0; }
.bk #creditcard .payment-card-table .payment-card-field-row--number .payment-card-brands { margin-top: 8px; }
.bk #creditcard .payment-card-table .payment-card-field-row--number .payment-card-number-field input { width: 100% !important; }
.bk #creditcard .payment-card-table .payment-card-error-row > .bk-data-cell,
.bk #creditcard .payment-card-table .payment-card-preauth > .bk-data-cell { display: block; width: 100%; }
.bk #creditcard .payment-card-table .payment-card-preauth { margin-top: 0; padding: 0; border: 1px solid #cfe3ef; border-radius: 8px; background: var(--bk-blue-soft); }
.bk #creditcard .payment-card-table .payment-card-preauth > .bk-data-cell { margin: 0 !important; padding: 0; border: 0; background: transparent; }
.bk #creditcard .payment-card-table .payment-card-preauth .payment-card-preauth-notice { position: relative; display: flex; gap: 4px; flex-direction: column; margin: 0 !important; padding: 14px 16px 14px 42px; border: 0; border-radius: 0; background: transparent; }
.bk #creditcard .payment-card-table .payment-card-preauth .payment-card-preauth-notice > [data-bk-message-icon] { position: absolute; left: 16px; top: 15px; color: #0a4a6e; font-family: FontAwesome !important; font-size: 16px; line-height: 20px; }
.bk #creditcard .payment-card-table .payment-card-preauth .payment-card-preauth-notice strong { color: var(--bk-navy); }
.bk #creditcard .payment-card-table .payment-card-preauth .payment-card-preauth-notice span { color: #29425d; }
.bk #tdbuttons, .bk #buttons { width: 100%; }
.bk #buttons { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.bk #buttons > div { max-width: 100%; }
.bk #buttons #submit1, .bk #buttons #submit2, .bk #buttons #authenticateThreeDsCont { margin-left: auto; }
.bk #authenticateCCViaThreeDs { display: inline-flex !important; background: var(--bk-blue) !important; border: 1px solid var(--bk-blue) !important; }
.bk .bk-choice { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; flex-shrink: 0; accent-color: var(--bk-blue); }
.bk img { max-width: 100%; }
.bk #arrivalLimit { position: relative !important; width: auto !important; margin: 0; }
.bk #arrivalLimit > div:empty { display: none; }
.bk .bk-summary__toggle { min-height: 44px; }
.bk #booking_contact { text-align: left; }
@media (max-width: 719px) {
  .bk #div_loyalty_points .subheadlblue { grid-template-columns: 20px 1fr; }
  .bk #div_loyalty_points .subheadlblue > label:first-of-type { margin-right: 0; }
  .bk #hdhabout { width: 100% !important; }
  .bk #div_loyalty_points #div_promo_code > div { align-items: stretch; }
  .bk #div_loyalty_points #txt_promo_code { flex: 1 1 0; min-width: 0; width: 0 !important; }
  .bk #div_loyalty_points #apply_promo_code { flex: 0 0 auto; }
  .bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) { flex-wrap: wrap; }
  .bk #div_loyalty_points #div_loyalty_code .bk-data-row:has(#convert_to_normal_booking) .bk-data-cell { flex-basis: 100%; }
  .bk .bk-data-row { flex-wrap: wrap; }
  .bk #creditcard .bk-data-cell { flex-basis: 100%; }
  .bk #creditcard .payment-card-field-row.row { flex-wrap: wrap; }
  .bk .bk-invoice .bk-data-row { flex-wrap: nowrap; }
  .bk #buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .bk #buttons > :is(span, div) { width: 100%; margin-left: 0 !important; }
  .bk #buttons .bk-btn { width: 100%; }
  .bk #div_loyalty_code .bk-loyalty-actions > .bk-data-cell { width: auto !important; }
  .bk #div_loyalty_code input.form-control { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after { transition: none !important; }
}