/* [balt_city_quote] -- makes the city page's booking card work.
 *
 * The card's own look comes entirely from the page stylesheet (.bookcard,
 * .field, .box). Nothing here restyles it. These rules only strip the browser's
 * default control chrome so a real <input> sits inside .box looking exactly
 * like the static text it replaced, and cover the states the static card never
 * had: focus, error, busy, and the success panel. */

.bookcard .field .box { position: relative; }

/* The control fills the box and inherits the box's own type and colour, so the
   only visible difference from the original markup is that it accepts typing. */
.bookcard .field .box input,
.bookcard .field .box select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.bookcard .field .box input::placeholder { color: #8A968E; opacity: 1; }

/* Date and time inputs render their own indicator; keep it in the brand green
   rather than the browser default blue-grey. */
.bookcard .field .box input[type="date"]::-webkit-calendar-picker-indicator,
.bookcard .field .box input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  filter: invert(28%) sepia(18%) saturate(1200%) hue-rotate(93deg);
}
.bookcard .field .box input[type="number"]::-webkit-outer-spin-button,
.bookcard .field .box input[type="number"]::-webkit-inner-spin-button { margin: 0; }

/* The select keeps the chevron the static card drew as a character. */
.bookcard .field .box select { padding-right: 16px; cursor: pointer; }
.bookcard .field .box:has(select)::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border-right: 1.5px solid #8A968E; border-bottom: 1.5px solid #8A968E;
  transform: rotate(45deg);
}

.bookcard .field .box:focus-within {
  border-color: #1F7A43;
  box-shadow: 0 0 0 3px rgba(31, 122, 67, .14);
}
.bookcard .field.has-error .box {
  border-color: #B3391F;
  box-shadow: 0 0 0 3px rgba(179, 57, 31, .12);
}

.bookcard .baltq-error {
  margin: 0;
  font: 500 12px/1.5 Inter, sans-serif;
  color: #B3391F;
}

/* Submit button: the design's own .btn styling stays, this only covers the
   in-flight state, which the static card had no need for. */
.bookcard .baltq-btn { border: 0; width: 100%; cursor: pointer; position: relative; }
.bookcard .baltq-btn__spin { display: none; width: 16px; height: 16px; }
.bookcard .baltq-btn.is-busy { pointer-events: none; opacity: .75; }
.bookcard .baltq-btn.is-busy .baltq-btn__label { visibility: hidden; }
.bookcard .baltq-btn.is-busy .baltq-btn__spin {
  display: block; position: absolute; left: 50%; top: 50%;
  margin: -8px 0 0 -8px; animation: baltcq-spin .7s linear infinite;
}
@keyframes baltcq-spin { to { transform: rotate(360deg); } }

.bookcard .cq-done {
  font: 500 14px/1.7 Inter, sans-serif;
  color: #41504A;
  margin: 0;
}
.bookcard .cq-done strong { color: #123B26; }

/* The honeypot must be reachable by a bot and invisible to a person, so it is
   moved off-screen rather than display:none. */
.bookcard .balt-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .bookcard .baltq-btn.is-busy .baltq-btn__spin { animation: none; }
}

/* The theme sets `h1, h2, h3, h4, h5, h6 { color: #111 }`, which beats the
   white the card header passes down by inheritance -- so "Instant <City> Quote"
   rendered near-black on the dark green gradient. These two rules restate the
   header's own colours with enough specificity to win, on both the form header
   and the confirmation panel. */
.bookcard .bc-head h3,
.bookcard .bc-head h3 * { color: #fff; }
.bookcard .bc-head p { color: #CFE7D8; }