/* HMS-360 — unified My Requests tracker (Figma 435:2118): status tabs,
   request cards with a colored left border per type, and form links. */

.hotel-requests {
  display: block;
  padding: var(--wa-space-l, 24px) var(--wa-space-m, 16px);
  max-width: 1200px;
  margin: 0 auto;
}

.hotel-requests__title {
  margin: 0 0 var(--wa-space-m, 16px);
  font-size: 1.5rem;
  font-weight: var(--wa-font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--wa-color-text-normal);
}

/* Show-page detail list: two-column dt/dd, stacked below 640px. */
.hotel-requests__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wa-space-xs, 4px) var(--wa-space-s, 8px);
  margin: 0 0 var(--wa-space-m, 16px);
}

.hotel-requests__detail dt {
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-normal);
}

.hotel-requests__detail dd {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.hotel-requests__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--wa-space-xs, 4px);
  margin-bottom: var(--wa-space-s, 8px);
}

.hotel-requests__tab {
  padding: var(--wa-space-xs, 4px) var(--wa-space-s, 8px);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 999px;
  background: transparent;
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
  cursor: pointer;
}

.hotel-requests__tab--active {
  background: var(--wa-color-brand-90);
  border-color: var(--wa-color-brand);
  color: var(--wa-color-brand);
}

.hotel-requests__forms {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wa-space-s, 8px);
  margin-bottom: var(--wa-space-m, 16px);
}

.hotel-requests__forms-label {
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-requests__form-link {
  color: var(--wa-color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hotel-requests__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wa-space-m, 16px);
}

.hotel-requests__card {
  position: relative;
  padding: var(--wa-space-m, 16px);
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  box-shadow: var(--wa-shadow-s, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Colored left border per request type. */
.hotel-requests__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--wa-border-radius-m, 8px) 0 0 var(--wa-border-radius-m, 8px);
}

/* No -600 or -info tokens exist in this WA build (scale is 05–95, hues are
   brand/danger/neutral/success/warning) — bare hues resolve to the mid stop,
   matching layouts/admin_dashboard.css (blue) and booking_overrides.css. */
.hotel-requests__card--rate::before {
  background: var(--wa-color-brand);
}

.hotel-requests__card--hold::before {
  background: var(--wa-color-warning);
}

.hotel-requests__card--block::before {
  background: var(--wa-color-blue);
}

.hotel-requests__card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--wa-space-s, 8px);
}

.hotel-requests__card-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-normal);
}

.hotel-requests__card-detail {
  margin: var(--wa-space-s, 8px) 0;
  color: var(--wa-color-text-quiet);
}

.hotel-requests__card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wa-space-s, 8px);
}

.hotel-requests__card-foot time {
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-requests__empty {
  padding: var(--wa-space-l, 24px);
  text-align: center;
  color: var(--wa-color-text-quiet);
}

/* Mobile nicety: detail list stacks and card padding tightens below 640px. */
@media (max-width: 640px) {
  .hotel-requests__detail {
    grid-template-columns: 1fr;
    gap: var(--wa-space-xs, 4px);
  }

  .hotel-requests__card {
    padding: var(--wa-space-s, 8px);
  }
}

/* HMS-361 — request detail panel (Figma 435:4679 pending / 435:4762 denied):
   centered panel card mirroring .hotel-booking__panel, with a status banner,
   request-information card, activity timeline, and footer actions. */
.hotel-request-detail {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--wa-space-m, 16px);
}

.hotel-request-detail__panel {
  background: var(--wa-color-surface-raised, var(--wa-color-surface-default));
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  padding: var(--wa-space-l, 24px);
}

.hotel-request-detail__head {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s, 8px);
}

.hotel-request-detail__ref {
  margin: 0;
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-request-detail__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--wa-font-weight-semibold, 600);
}

/* Chip comes before the close link in markup — it pushes both right. */
.hotel-request-detail__head .status-chip {
  margin-left: auto;
}

.hotel-request-detail__close {
  margin-left: 0;
  text-decoration: none;
  color: var(--wa-color-text-quiet);
  font-size: 1.1rem;
}

/* Status callout with a colored left strip, like the tracker cards. */
.hotel-request-detail__banner {
  padding: var(--wa-space-s, 8px) var(--wa-space-m, 16px);
  border-radius: var(--wa-border-radius-m, 8px);
  border-left: 4px solid;
  margin: var(--wa-space-m, 16px) 0;
  font-size: var(--wa-font-size-s, 0.875rem);
}

.hotel-request-detail__banner--pending {
  border-color: var(--wa-color-warning);
  background: color-mix(in srgb, var(--wa-color-warning) 8%, transparent);
}

.hotel-request-detail__banner--denied {
  border-color: var(--wa-color-danger);
  background: var(--wa-color-danger-fill-quiet);
}

.hotel-request-detail__banner--approved {
  border-color: var(--wa-color-success);
  background: var(--wa-color-success-fill-quiet);
}

.hotel-request-detail__card {
  background: var(--wa-color-surface-raised, var(--wa-color-surface-default));
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  padding: var(--wa-space-m, 16px);
  margin-bottom: var(--wa-space-m, 16px);
}

.hotel-request-detail__section {
  margin: 0 0 var(--wa-space-s, 8px);
  font-size: var(--wa-font-size-s, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
}

/* Same dt/dd grid as .hotel-requests__detail. */
.hotel-request-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wa-space-xs, 4px) var(--wa-space-s, 8px);
  margin: 0;
}

.hotel-request-detail__facts dt {
  font-weight: var(--wa-font-weight-semibold, 600);
}

.hotel-request-detail__facts dd {
  margin: 0;
}

/* Activity list: vertical rule down the left with a dot per entry. */
.hotel-request-detail__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hotel-request-detail__timeline li {
  position: relative;
  padding-left: var(--wa-space-m, 16px);
  padding-bottom: var(--wa-space-s, 8px);
  border-left: 2px solid var(--wa-color-neutral-border-quiet);
}

.hotel-request-detail__timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wa-color-brand);
}

.hotel-request-detail__timeline li:last-child {
  border-left-color: transparent;
}

.hotel-request-detail__timeline time,
.hotel-request-detail__timeline-date {
  display: block;
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-request-detail__timeline-reason {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

/* Footer row — ghost secondary left, primary forward action right, the
   same pairing as .hotel-request-form__actions. button_to puts its class
   on the submit input, so the wrapping form collapses into the flex row. */
.hotel-request-detail__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--wa-space-s, 8px);
  margin-top: var(--wa-space-m, 16px);
}

.hotel-request-detail__actions form {
  display: contents;
}

.hotel-request-detail__withdraw,
.hotel-request-detail__contact {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  background: transparent;
  color: var(--wa-color-text-quiet);
  font: inherit;
  font-weight: var(--wa-font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
}

.hotel-request-detail__edit,
.hotel-request-detail__new {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m, 8px);
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
  color: var(--wa-color-brand-on-loud);
  font-weight: var(--wa-font-weight-semibold, 600);
  text-decoration: none;
}

/* HMS-361 — "Request Submitted" confirmation dialog (Figma 528:21298). */
dialog.hotel-request-modal {
  border: none;
  border-radius: var(--wa-border-radius-m, 8px);
  padding: 0;
  max-width: 440px;
  width: calc(100vw - 32px);
}

dialog.hotel-request-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.hotel-request-modal__body {
  padding: var(--wa-space-l, 24px);
}

.hotel-request-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--wa-font-weight-semibold, 600);
}

.hotel-request-modal__ref {
  margin: var(--wa-space-xs, 4px) 0 0;
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-request-modal__card {
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  padding: var(--wa-space-m, 16px);
  margin: var(--wa-space-m, 16px) 0;
}

.hotel-request-modal__note {
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-request-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s, 8px);
}

/* The s6 markup wraps each dt/dd pair in a <div> (the valid HTML5 pattern
   inside <dl>) — display: contents lets the pair join the two-column
   label | value grid instead of tiling as two-up cells. */
.hotel-request-detail__facts > div {
  display: contents;
}

/* The submitted-modal info card mirrors the detail card's section heading
   and facts grid (classes invented by the modal partial). */
.hotel-request-modal__section {
  margin: 0 0 var(--wa-space-s, 8px);
  font-size: var(--wa-font-size-s, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
}

.hotel-request-modal__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wa-space-xs, 4px) var(--wa-space-s, 8px);
  margin: 0;
}

.hotel-request-modal__facts > div {
  display: contents;
}

.hotel-request-modal__facts dt {
  font-weight: var(--wa-font-weight-semibold, 600);
}

.hotel-request-modal__facts dd {
  margin: 0;
}

@media (max-width: 640px) {
  .hotel-request-detail__panel {
    padding: var(--wa-space-s, 8px);
  }

  .hotel-request-detail__facts {
    grid-template-columns: 1fr;
    gap: var(--wa-space-xs, 4px);
  }

  .hotel-request-modal__facts {
    grid-template-columns: 1fr;
    gap: var(--wa-space-xs, 4px);
  }

  dialog.hotel-request-modal {
    width: calc(100vw - 16px);
  }
}

/* HMS-362 — three designed request forms (Figma 435:1738 / 435:1916 /
   435:5124): page banner + stepper above a 2/3 form card with a 1/3
   right rail. All classes scoped under .hotel-request-form except the
   stepper, which sits at page level in the block-request markup. */
.hotel-request-form {
  display: block;
  max-width: 1400px;
  margin: 0;
  padding: 0;
}

.hotel-request-form__title {
  margin: 0 0 var(--wa-space-m, 16px);
  font-size: 1.5rem;
  font-weight: var(--wa-font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--wa-color-text-normal);
}

/* Info strip — same left-border callout as .hotel-request-detail__banner,
   brand palette standing in for "info" (no -info tokens in this WA build,
   see the note at .hotel-requests__card--rate). __delta is the identical
   strip inside the form, above the actions row. */
.hotel-request-form__banner,
.hotel-request-form__delta {
  padding: var(--wa-space-s, 8px) var(--wa-space-m, 16px);
  border-left: 4px solid var(--wa-color-brand);
  border-radius: var(--wa-border-radius-m, 8px);
  background: color-mix(in srgb, var(--wa-color-brand) 8%, transparent);
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-normal);
}

.hotel-request-form__banner {
  margin: 0 0 var(--wa-space-m, 16px);
}

.hotel-request-form__banner i {
  margin-right: var(--wa-space-xs, 4px);
}

.hotel-request-form__delta {
  margin: var(--wa-space-m, 16px) 0;
}

/* Form card 2/3 + right-rail card 1/3; collapses to one column under
   1024px where the rail drops below the form. */
.hotel-request-form__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 1.5rem;
}

/* Edit/resubmit pages have no Request History rail — a single capped column,
   otherwise the 360px aside track stays empty beside the card. */
.hotel-request-form__layout--single {
  grid-template-columns: 1fr;
  max-width: 48rem;
}

/* Same chrome as .hotel-requests__card / .hotel-request-detail__card. */
.hotel-request-form__card,
.hotel-request-form__side {
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  box-shadow: var(--wa-shadow-s, 0 1px 2px rgba(0, 0, 0, 0.05));
  padding: var(--wa-space-l, 24px);
}

.hotel-request-form__card h2,
.hotel-request-form__side h2 {
  margin: 0 0 var(--wa-space-m, 16px);
  font-size: 1.05rem;
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-normal);
}

/* Field block: bold ~0.85rem label stacked over a full-width control. */
.hotel-request-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs, 4px);
  margin-bottom: var(--wa-space-m, 16px);
}

.hotel-request-form__field label {
  font-size: 0.85rem;
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-normal);
}

/* The range pill below overrides border/background on its date inputs —
   keep that rule after this one so it wins on equal specificity. */
.hotel-request-form__field input,
.hotel-request-form__field select,
.hotel-request-form__field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--wa-space-s, 8px);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  background: var(--wa-color-surface-raised);
  font: inherit;
  font-size: 0.9rem;
  color: var(--wa-color-text-normal);
}

.hotel-request-form__field input[readonly] {
  background: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-quiet);
}

/* appearance:none selects paint the option label inside the content box,
   so the shared 12px padding leaves ~15px for a 23px line box and the text
   is shaved at the bottom. Slim the block padding and pin the field height
   so the line box fits. */
.hotel-request-form__field select {
  padding-block: var(--wa-space-xs, 4px);
  min-height: 2.5rem;
  line-height: 1.4;
}

/* Validation errors on the 422 re-render: left-border alert in the danger
   hue — same callout shape as __banner / __delta. */
.hotel-request-form__errors {
  margin: 0 0 var(--wa-space-m, 16px);
  padding: var(--wa-space-s, 12px) var(--wa-space-m, 16px);
  padding-left: calc(var(--wa-space-m, 16px) + 1.25rem);
  border-left: 4px solid var(--wa-color-danger);
  border-radius: var(--wa-border-radius-m, 8px);
  background: color-mix(in srgb, var(--wa-color-danger) 8%, transparent);
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-normal);
}

.hotel-request-form__errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

.hotel-request-form__errors li + li {
  margin-top: var(--wa-space-3xs, 2px);
}

/* Two-up grid for paired fields (Current|Proposed, Start|End); stacks
   under 640px. Bottom spacing comes from the nested __field margins. */
.hotel-request-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* The add/modify slots toggle via the hidden attribute, but an explicit
   display class beats the UA [hidden] rule — guard it explicitly. */
.hotel-request-form [hidden] {
  display: none !important;
}

/* Actions row: Cancel ghost link-button left, primary submit right. The
   markup emits a bare <a> and <button type="submit">, so the element
   selectors below carry the button styling. */
.hotel-request-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--wa-space-m, 16px);
}

.hotel-request-form__actions a {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  background: transparent;
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-semibold, 600);
  text-decoration: none;
}

/* Primary submit — same brand fill tokens as .booking-review__submit in
   layouts/booking_funnel.css, with fallbacks in this file's style. */
.hotel-request-form__actions button[type="submit"],
.hotel-request-form__actions input[type="submit"] {
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m, 8px);
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-weight: var(--wa-font-weight-semibold, 600);
  cursor: pointer;
}

/* Right-rail definition rows / mini table: label left, value right,
   hairline separators (rate card, inventory snapshot). */
.hotel-request-form__side dl {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0;
}

.hotel-request-form__side dt {
  padding: var(--wa-space-xs, 4px) 0;
  color: var(--wa-color-text-normal);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-request-form__side dd {
  margin: 0;
  padding: var(--wa-space-xs, 4px) 0;
  text-align: right;
  color: var(--wa-color-text-quiet);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-request-form__side dt:last-of-type,
.hotel-request-form__side dd:last-of-type {
  border-bottom: none;
}

.hotel-request-form__side table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wa-font-size-s, 0.875rem);
}

.hotel-request-form__side th,
.hotel-request-form__side td {
  padding: var(--wa-space-xs, 4px) 0;
  text-align: left;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

/* Value columns right-align; the first column stays the label. The left
   padding keeps adjacent headers ("Contracted" / "Available") apart —
   th/td carry only block padding above. */
.hotel-request-form__side th:not(:first-child),
.hotel-request-form__side td:not(:first-child) {
  padding-left: var(--wa-space-m, 16px);
  text-align: right;
}

.hotel-request-form__side th {
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-quiet);
}

.hotel-request-form__side tbody tr:last-child td {
  border-bottom: none;
}

/* History entry: title + date block left, status chip right, hairline
   between rows. */
.hotel-request-form__history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wa-space-s, 8px);
  padding: var(--wa-space-s, 8px) 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-request-form__history-row:last-child {
  border-bottom: none;
}

/* The status chip keeps its pill shape — the text side takes the squeeze. */
.hotel-request-form__history-row > :last-child {
  flex-shrink: 0;
}

/* " · Sep 25" never splits across lines. */
.hotel-request-form__history-date {
  white-space: nowrap;
}

.hotel-request-form__history-row strong {
  font-size: var(--wa-font-size-s, 0.875rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-normal);
}

.hotel-request-form__history-row small {
  color: var(--wa-color-text-quiet);
}

/* Ordered 4-step progress list (Draft | Submitted | Under Review |
   Decision). CSS counters number the circles; is-current fills the
   counter brand, is-done swaps it for a tick, later steps stay quiet. */
.hotel-request-stepper {
  list-style: none;
  counter-reset: request-step;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-s, 8px) var(--wa-space-l, 24px);
  margin: 0 0 var(--wa-space-m, 16px);
  padding: 0;
}

.hotel-request-stepper li {
  counter-increment: request-step;
  display: flex;
  align-items: center;
  gap: var(--wa-space-s, 8px);
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-quiet);
}

.hotel-request-stepper li::before {
  content: counter(request-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 50%;
  background: var(--wa-color-surface-raised);
  font-size: 0.75rem;
  font-weight: var(--wa-font-weight-semibold, 600);
}

.hotel-request-stepper li.is-current {
  color: var(--wa-color-text-normal);
  font-weight: var(--wa-font-weight-semibold, 600);
}

.hotel-request-stepper li.is-current::before {
  border-color: var(--wa-color-brand);
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
  color: var(--wa-color-brand-on-loud);
}

.hotel-request-stepper li.is-done::before {
  content: "\2713";
  border-color: var(--wa-color-brand);
  color: var(--wa-color-brand);
}

/* Paired start/end date inputs dressed as one control: the wrapper is
   the bordered pill, the two inputs inside are borderless, and the en
   dash <span> in the markup is the separator. */
.hotel-request-form__range {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-s, 8px);
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--wa-space-s, 8px);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
  background: var(--wa-color-surface-raised);
}

.hotel-request-form__range input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: var(--wa-space-s, 8px) 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--wa-color-text-normal);
}

.hotel-request-form__range span {
  color: var(--wa-color-text-quiet);
}

/* Tablet: the right rail drops below the form card. */
@media (max-width: 1024px) {
  .hotel-request-form__layout {
    grid-template-columns: 1fr;
  }
}

/* Phone: nothing overflows — paired fields stack, the actions wrap to
   full-width, cards and inputs shrink to the viewport. */
@media (max-width: 640px) {
  .hotel-request-form__layout {
    grid-template-columns: 1fr;
  }

  .hotel-request-form__row {
    grid-template-columns: 1fr;
  }

  .hotel-request-form__card,
  .hotel-request-form__side {
    padding: var(--wa-space-m, 16px);
  }

  .hotel-request-form__actions {
    flex-wrap: wrap;
  }

  .hotel-request-form__actions a,
  .hotel-request-form__actions button[type="submit"],
  .hotel-request-form__actions input[type="submit"] {
    flex: 1 1 100%;
    text-align: center;
  }

  .hotel-request-form__range {
    gap: var(--wa-space-xs, 4px);
  }
}

/* WA's native.css fixes input/select at --wa-form-control-height and
   overflow:hidden — vertical padding inside the fixed height shrinks the
   content box below the line-height and clips the value text. Block
   padding goes back to 0; textarea keeps its padding (it sizes to
   content, not the fixed height). */
.hotel-request-form__field input,
.hotel-request-form__field select {
  padding-block: 0;
}