:root {
  --avail-green: #246548;
  --avail-green-soft: #e9f6ee;
  --avail-red: #9f3f3f;
  --avail-red-soft: #fbeaea;
  --avail-gold: #ab7d39;
  --avail-gold-soft: #fcf2df;
  --avail-blue: #355d8a;
  --avail-blue-soft: #eaf2fd;
  --avail-purple: #72509d;
  --avail-purple-soft: #f1ebfb;
}

.availability-page {
  background: linear-gradient(180deg, var(--bone) 0%, #f6f1e8 100%);
  color: var(--ink);
}

.availability-head {
  background: var(--ink);
}

.availability-head .nav__util {
  display: inline-flex;
}

.availability-head .mr-select,
.availability-head .mr-select select {
  min-height: 44px;
}

@media (max-width: 760px) {
  .availability-head .nav {
    flex-wrap: wrap;
    height: auto;
    row-gap: .55rem;
    padding-block: .65rem;
  }

  .availability-head .nav__util {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: .4rem;
  }

  .availability-head .mr-select {
    flex: 1 1 0;
    min-width: 0;
  }

  .availability-head .mr-select select {
    width: 100%;
    min-width: 0;
    font-size: .62rem;
    letter-spacing: .04em;
    padding-left: .52rem;
    padding-right: 1.6rem;
  }
}

/* MEASURED, NOT DECLARED — the same rule the rest of the site follows.
 *
 * This was a flat 7rem, and because it is a single class in a stylesheet that
 * loads after main.css it beat `.page-offset`, which the element also carries
 * and which resolves to the header core.js actually measured. 112px against a
 * header that is 118px at 390 and 122px at 1440 put "Plan your stay" underneath
 * the fixed header by 10px, in every locale. This page carries a second
 * toolbar row that the others do not, so it is the page where a constant was
 * always going to be wrong. The 0.75rem keeps the breathing room the 7rem was
 * buying on top of the header rather than instead of it. */
.availability-shell {
  padding-block: calc(var(--head-actual, var(--head-solid)) + 0.75rem) 4.2rem;
}

.availability-hero {
  display: grid;
  gap: 1.8rem;
  align-items: end;
  margin-bottom: 2.3rem;
}

@media (min-width: 980px) {
  .availability-hero {
    grid-template-columns: 1fr;
  }
}

.availability-card,
.availability-panel,
.availability-results,
.property-focus {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-1);
}

.availability-card {
  padding: 1.4rem;
}

.availability-form {
  display: grid;
  gap: .95rem;
}

.availability-searchbar {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 54px rgba(17, 33, 26, .12);
}

.availability-copy,
.availability-copy > * {
  min-width: 0;
  max-width: 100%;
}

.availability-copy :is(h1, h2, h3, p) {
  overflow-wrap: anywhere;
}

.availability-searchbar__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.availability-searchbar__field {
  position: relative;
  display: grid;
  gap: .45rem;
  align-content: start;
  min-width: 0;
  min-height: 5.15rem;
  padding: 1rem 1rem .95rem;
  background: transparent;
}

.availability-searchbar__field + .availability-searchbar__field::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: var(--line-2);
}

.availability-searchbar__field:focus-within {
  background: rgba(248, 243, 235, .74);
}

.availability-searchbar__field .field__label {
  font-size: .73rem;
  letter-spacing: .11em;
  line-height: 1.35;
}

.availability-searchbar__control {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  min-height: 50px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  padding: .76rem .95rem;
}

.availability-searchbar__field:focus-within .availability-searchbar__control {
  border-color: rgba(164, 119, 73, .38);
  box-shadow: 0 0 0 3px rgba(164, 119, 73, .08);
}

.availability-searchbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  pointer-events: none;
  flex: 0 0 auto;
}

.availability-searchbar__field select,
.availability-searchbar__field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 1.5rem;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.35;
}

.availability-searchbar__field select:focus-visible,
.availability-searchbar__field input:focus-visible,
.availability-searchbar__submit:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

.availability-searchbar__submit {
  min-height: 100%;
  border-radius: 0;
  padding-inline: 1.2rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.availability-searchbar__field--destination {
  padding-left: 1.15rem;
}

.availability-searchbar__field--guests {
  padding-right: .95rem;
}

.availability-searchbar__field--submit {
  align-items: stretch;
}

.availability-searchbar__field--destination,
.availability-searchbar__field--checkin,
.availability-searchbar__field--checkout,
.availability-searchbar__field--guests,
.availability-searchbar__field--submit {
  grid-column: span 1;
}

@media (min-width: 1440px) {
  .availability-searchbar__grid {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }

  .availability-searchbar__field--destination {
    grid-column: span 4;
  }

  .availability-searchbar__field--checkin,
  .availability-searchbar__field--checkout {
    grid-column: span 2;
  }

  .availability-searchbar__field--guests {
    grid-column: span 3;
  }

  .availability-searchbar__field--submit {
    grid-column: span 5;
  }
}

@media (min-width: 981px) and (max-width: 1439px) {
  .availability-searchbar__grid {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .availability-searchbar__field {
    min-height: 5.05rem;
  }

  .availability-searchbar__field--destination {
    grid-column: span 4;
  }

  .availability-searchbar__field--checkin,
  .availability-searchbar__field--checkout {
    grid-column: span 2;
  }

  .availability-searchbar__field--guests {
    grid-column: span 3;
  }

  .availability-searchbar__field--submit {
    grid-column: 1 / -1;
    min-height: 3.8rem;
  }

  .availability-searchbar__field + .availability-searchbar__field::before {
    display: none;
  }

  .availability-searchbar__submit {
    border-top: 1px solid var(--line-2);
    border-radius: 0;
    letter-spacing: .14em;
  }
}

@media (max-width: 980px) {
  .availability-hero {
    grid-template-columns: 1fr;
  }

  .availability-searchbar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .availability-searchbar__field--destination {
    grid-column: span 2;
  }

  .availability-searchbar__field--checkin,
  .availability-searchbar__field--checkout {
    grid-column: span 1;
  }

  .availability-searchbar__field--guests {
    grid-column: span 1;
  }

  .availability-searchbar__field--submit {
    grid-column: span 1;
    min-height: 100%;
  }

  .availability-searchbar__field::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .availability-searchbar__grid {
    grid-template-columns: 1fr;
  }

  .availability-searchbar__field--destination,
  .availability-searchbar__field--checkin,
  .availability-searchbar__field--checkout,
  .availability-searchbar__field--guests,
  .availability-searchbar__field--submit {
    grid-column: span 1;
  }

  .availability-searchbar__field {
    min-height: 4.45rem;
    padding: .95rem 1rem .9rem;
    border-top: 1px solid var(--line-2);
  }

  .availability-searchbar__field:first-child {
    border-top: 0;
  }

  .availability-searchbar__field::before {
    display: none;
  }

  .availability-searchbar__submit {
    border-top: 1px solid var(--line-2);
    min-height: 3.6rem;
  }

  .availability-searchbar__control {
    padding: .78rem .9rem;
  }

  .availability-searchbar__field .field__label {
    font-size: .7rem;
  }
}

@media (max-width: 360px) {
  .availability-searchbar__icon {
    display: none;
  }

  body.availability-page.mr-forms .availability-searchbar__control > :is(input, select) {
    padding-inline-end: .65rem;
  }

  body.mr-forms .availability-searchbar__control {
    padding-inline: .6rem;
  }
}

.field-row {
  display: grid;
  gap: .85rem;
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.availability-form .field {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  min-height: 74px;
  background: rgba(255, 255, 255, 0.86);
}

.availability-form select,
.availability-form input {
  width: 100%;
}

.availability-results {
  padding: 1.3rem;
}

.availability-results__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: .85rem;
}

.availability-results__summary {
  margin-top: .35rem;
  color: var(--text-mute);
  font-size: .96rem;
}

.availability-results__head,
.availability-results__summary,
#availabilityNoResults {
  scroll-margin-top: 6rem;
}

.availability-filters {
  margin-bottom: 1rem;
}

.property-toolbar,
.filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.property-toolbar {
  margin-bottom: .7rem;
}

.field--compact {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  flex: 1 1 15rem;
  min-width: min(100%, 15rem);
  padding: .65rem .8rem;
  display: grid;
  gap: .25rem;
}

.field--compact select,
.field--compact input {
  width: 100%;
  border: 0;
  background: transparent;
}

@media (max-width: 540px) {
  .field--compact {
    min-width: 100%;
    flex: 1 1 100%;
  }
}

.filter-chip-group label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  color: var(--text-mute);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .38rem .7rem;
  background: rgba(255,255,255,.66);
}

.property-results-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.property-results-empty {
  padding: 1rem 1.1rem;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}

@media (min-width: 760px) {
  .property-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  .property-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .property-results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.property-result {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.property-result:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16, 32, 25, .14);
  border-color: rgba(164, 119, 73, .38);
}

.property-result.is-selected {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass), 0 18px 40px rgba(16, 32, 25, .14);
}

.property-result .res__media {
  aspect-ratio: 16 / 11;
  border-radius: 0;
}

.property-result .res__tag {
  box-sizing: border-box;
  max-width: calc(100% - 2rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.property-result__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 239px) {
  .property-result.res:hover .res__media .property-result__image,
  .property-result.res:focus-within .res__media .property-result__image {
    transform: none;
  }
}

.property-result .res__body {
  padding: 1rem;
  display: grid;
  gap: .5rem;
}

.property-result .res__body > *,
.property-result .res__type,
.property-result__facts span,
.property-result__amenities span,
.property-result__cta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.property-result .res__name {
  font-size: 1.25rem;
  line-height: 1.15;
}

/* A status pill is one token and has to read as one. Broken over two lines
   inside a rounded capsule it looks like a rendering fault rather than a label.
   Four locales say the negative state in two words — "No disponible", "Nicht
   verfügbar", "Non disponibile", "Niet beschikbaar" — and all four wrapped at
   320, German and Dutch as far up as 360, doubling the pill from 24px to 47px.
   English "Unavailable" is a single word and never showed it. */
.property-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .28rem .58rem;
  font-weight: 400;
  white-space: nowrap;
}

.property-badge--available {
  background: var(--avail-green-soft);
  color: var(--avail-green);
}

.property-badge--limited {
  background: var(--avail-red-soft);
  color: var(--avail-red);
}

.property-result__facts {
  font-size: .86rem;
  color: var(--text-mute);
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
}

.property-result__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.property-result__amenities span {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .24rem .56rem;
  font-size: .72rem;
  color: var(--text-mute);
  background: rgba(243,237,227,.6);
}

.property-result__meta {
  color: var(--text-mute);
  font-size: .84rem;
}

.property-result__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .45rem;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ink);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  color: var(--bone);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .65rem .8rem;
}

.property-availability {
  margin-top: 1.45rem;
}

.property-focus {
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* The compact booking summary replaces this long duplicate preview area. */
.property-focus {
  display: none;
}

@media (min-width: 1100px) {
  .property-focus {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
  }
}

.summary-preview {
  min-height: 100%;
}

.availability-preview-card {
  display: grid;
  gap: .7rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bone);
}

.availability-preview-card__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.availability-preview-card__body {
  padding: 0 1rem 1rem;
}

.availability-preview-card__meta {
  color: var(--text-mute);
  font-size: .92rem;
  margin-top: .35rem;
}

.availability-preview-card__price {
  margin-top: .55rem;
  font-weight: 600;
  color: var(--ink);
}

.property-focus__details {
  display: grid;
  gap: .8rem;
}

.property-showcase,
.property-story {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  padding: .95rem;
}

.property-showcase__content {
  display: grid;
  gap: .35rem;
}

.property-showcase__gallery {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: .25rem;
}

.property-showcase__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.9);
}

.property-showcase__figure img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
}

.property-showcase__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .3rem;
}

.property-showcase__facts span {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .22rem .52rem;
  font-size: .74rem;
  color: var(--text-mute);
  background: rgba(243,237,227,.55);
}

.property-showcase__review {
  margin: .4rem 0 0;
  border-left: 3px solid var(--brass);
  padding-left: .65rem;
  color: var(--ink-2);
  font-size: .93rem;
}

@media (max-width: 560px) {
  .property-showcase__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-showcase__figure img {
    height: 84px;
  }
}

.property-showcase__list {
  margin: .3rem 0 0;
  padding-left: 1rem;
  color: var(--text-mute);
  display: grid;
  gap: .2rem;
}

.availability-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 1000px) {
  .availability-content {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .88fr);
    align-items: start;
  }
}

.availability-panel {
  min-width: 0;
  max-width: 100%;
  padding: 1.1rem;
}

.availability-panel--summary {
  align-self: start;
  position: sticky;
  top: 5.7rem;
}

@media (max-width: 999px) {
  .availability-panel--summary {
    position: static;
    top: auto;
  }
}

.availability-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .9rem;
}

.availability-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

@media (max-width: 759px) {
  .availability-toolbar__actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .availability-toolbar__actions .btn {
    width: 100%;
    min-height: 44px;
    padding-inline: .55rem;
    letter-spacing: .1em;
  }
}


.calendar-panels {
  display: grid;
  gap: .85rem;
}

.currency-notice {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--text-mute);
}

@media (min-width: 820px) {
  .calendar-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.calendar-month-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: .9rem;
  background: rgba(250,246,238,.85);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .3rem;
}

.calendar-day-label {
  text-align: center;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-bottom: .3rem;
}

.calendar-cell {
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 78px;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.calendar-cell:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
}

.calendar-cell.is-today {
  border-color: var(--brass);
  box-shadow: inset 0 0 0 1px var(--brass);
}

.calendar-cell.is-selected {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--bone);
}

.calendar-cell.is-disabled {
  opacity: .56;
  cursor: not-allowed;
}

/* One state for every non-bookable date. There is deliberately no separate
 * styling for booked, blocked, maintenance or owner stays: a distinct colour
 * is a disclosure too, and a guest could learn the reason by inspecting it.
 * Solid dark, high contrast against the light available cell. */
.calendar-cell.is-unavailable {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
  cursor: not-allowed;
}

.calendar-cell.is-unavailable .calendar-cell__day,
.calendar-cell.is-unavailable .calendar-cell__meta {
  color: var(--bone);
}

/* Unavailable must not lift on hover: it reads as interactive when it is not. */
.calendar-cell.is-unavailable:hover,
.calendar-cell.is-disabled:hover {
  transform: none;
  border-color: var(--ink);
}

.calendar-cell.is-disabled:hover {
  border-color: var(--line);
}

/* Selected stays a gradient with a brass ring, so it can never be mistaken
   for the flat black of an unavailable date. */
.calendar-cell.is-selected {
  box-shadow: inset 0 0 0 2px var(--brass);
}

.calendar-cell__day {
  font-weight: 600;
}

.calendar-cell__meta {
  font-size: .7rem;
  color: var(--text-mute);
  line-height: 1.2;
}

.calendar-cell.is-selected .calendar-cell__day,
.calendar-cell.is-selected .calendar-cell__meta {
  color: var(--bone);
}

@media (max-width: 540px) {
  .calendar-cell {
    min-height: 68px;
    padding: .35rem;
    border-radius: 11px;
  }

  .calendar-day-label {
    font-size: .62rem;
  }

  .calendar-cell__meta {
    font-size: .6rem;
  }
}

@media (max-width: 420px) {
  .calendar-grid {
    gap: .2rem;
  }

  .calendar-cell {
    min-height: 62px;
    padding: .28rem;
    border-radius: 10px;
  }

  .calendar-cell__meta {
    display: none;
  }
}

.availability-status,
.availability-error {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  line-height: 1.6;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.availability-status {
  margin-top: .9rem;
  color: var(--text-mute);
  font-size: .93rem;
}

.summary-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
}

.summary-card + .summary-card {
  margin-top: .85rem;
}

.booking-summary-card {
  padding: 1rem;
  display: grid;
  gap: .8rem;
}

.booking-summary-section {
  border-top: 1px solid var(--line);
  padding-top: .8rem;
}

.booking-summary-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.booking-summary-property {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}

.booking-summary-property__image {
  width: 92px;
  height: 78px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.booking-summary-property__facts {
  margin-top: .28rem;
  font-size: .84rem;
  color: var(--text-mute);
}

.summary-list {
  display: grid;
  gap: .52rem;
  margin: .7rem 0;
}

.summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .42rem;
}

.summary-list dt {
  color: var(--text-mute);
}

.summary-list dd {
  margin: 0;
  font-weight: 600;
}

.summary-list--stay dt,
.summary-list--stay dd {
  font-size: .92rem;
}

.summary-list--price dt,
.summary-list--price dd {
  font-size: .91rem;
}

.summary-total-row {
  padding-top: .22rem;
  border-bottom: 0;
}

.summary-total-row dt {
  color: var(--ink);
  font-weight: 600;
}

.summary-total-row dd {
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: .01em;
}

.summary-minstay {
  margin: .2rem 0 .75rem;
  font-size: .82rem;
  color: var(--text-mute);
}

.booking-summary-section--trust {
  padding-top: .72rem;
}

.booking-summary-trust {
  margin: 0;
  padding-left: 1rem;
  color: var(--text-mute);
  display: grid;
  gap: .3rem;
  font-size: .84rem;
}

.reservation-stepper--compact {
  margin: .2rem 0 0;
  padding-top: .2rem;
}

.reservation-flow {
  margin-top: 1rem;
}

#reservationFlow {
  margin-top: 1rem;
  padding: 1rem 1rem 1.05rem;
  background: rgba(255,255,255,.76);
}

.booking-flow {
  display: grid;
  gap: .75rem;
}

.booking-step {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(249,245,237,.86);
  padding: .9rem;
  transition: opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.booking-step.is-active {
  border-color: var(--brass);
  box-shadow: 0 14px 32px rgba(18, 33, 28, .09);
}

.booking-step.is-upcoming {
  opacity: .86;
}

.booking-step__header {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .8rem;
}

.booking-step__status {
  padding: .2rem .48rem;
  border-radius: 999px;
  background: rgba(18, 33, 28, .08);
  font-size: .72rem;
}

.booking-step.is-active .booking-step__status {
  background: var(--ink);
  color: var(--bone);
}

.booking-step__summary {
  display: grid;
  gap: .8rem;
}

.booking-step__summary.is-collapsed {
  display: none;
}

.booking-review-card,
.booking-confirmation-card,
.booking-submitted__card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.95);
}

.booking-review-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.booking-review-card__content,
.booking-confirmation-card__content,
.booking-submitted__card > div {
  padding: .85rem .95rem 1rem;
}

/* ── REQUEST-TO-BOOK NOTICE + CONFIRMATION ──────────────────
   The guest is told plainly that this is a request, then given a
   receipt they can act on: reference, stay details, next steps,
   timeframe, and a way to reach the team. */
.booking-request-notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold, #8a6a3b);
  border-radius: 12px;
  background: rgba(138,106,59,.06);
  padding: .9rem 1rem;
}

.booking-request-notice__lead {
  margin: 0 0 .5rem;
  font-weight: 600;
}

.booking-request-notice__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
  color: var(--text-mute);
}

.booking-submitted {
  display: grid;
  gap: 1.1rem;
}

.booking-submitted__banner {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(31,102,63,.28);
  background: rgba(31,102,63,.08);
}

.booking-submitted__banner h4 {
  margin: 0 0 .3rem;
}

.booking-submitted__banner p {
  margin: 0;
}

.booking-submitted__mark {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1f663f;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
}

.booking-submitted__reference {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  padding: .75rem .95rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.booking-submitted__reference-label {
  color: var(--text-mute);
}

.booking-submitted__reference-value {
  font-size: 1.15rem;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.booking-submitted__estimate-note {
  margin: -.4rem 0 0;
}

.booking-submitted__next h5,
.booking-submitted__contact h5 {
  margin: 0 0 .5rem;
}

.booking-submitted__steps {
  margin: 0 0 .7rem;
  padding-left: 1.2rem;
  display: grid;
  gap: .4rem;
  color: var(--text-mute);
}

.booking-submitted__timeframe {
  margin: 0 0 .4rem;
  font-weight: 600;
}

.booking-submitted__contact p {
  margin: 0 0 .5rem;
}

.booking-submitted__contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
}

.booking-submitted__contact-list a {
  overflow-wrap: anywhere;
}

@media (max-width: 540px) {
  .booking-submitted__banner {
    flex-direction: column;
    gap: .6rem;
  }

  .booking-submitted__reference {
    flex-direction: column;
    gap: .25rem;
  }
}

.booking-breakdown {
  margin: 0;
  display: grid;
  gap: .45rem;
}

.booking-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .45rem;
}

.booking-breakdown dt {
  color: var(--text-mute);
}

.booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

@media (max-width: 540px) {
  .booking-actions .btn {
    width: 100%;
  }
}

.field-grid {
  display: grid;
  gap: .75rem;
}

@media (min-width: 700px) {
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field--checks {
  display: grid;
  gap: .4rem;
}

.field__error {
  display: block;
  min-height: 1.05rem;
  font-size: .82rem;
  color: var(--danger);
}

.booking-policy {
  font-size: .9rem;
}

.reservation-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: .36rem;
  margin-bottom: .55rem;
}

.reservation-step {
  padding: .28rem .5rem;
  border-radius: 999px;
  background: rgba(53,93,138,.08);
  color: var(--text-mute);
  font-size: .72rem;
}

.reservation-step.is-active {
  background: var(--ink);
  color: var(--bone);
}

.reservation-summary,
.reservation-guest-form {
  display: grid;
  gap: .7rem;
}

.reservation-summary__grid {
  display: grid;
  gap: .55rem;
}

.reservation-summary__grid div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .5rem;
}

.availability-error {
  color: var(--danger);
  min-height: 1.1rem;
  margin-top: .75rem;
}

@media (max-width: 759px) {
  .booking-summary-property {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .booking-summary-property__image {
    width: 78px;
    height: 70px;
  }

  .availability-panel--summary .btn {
    min-height: 46px;
  }
}