/* ============================================================
   Form card — the labeled-field component shared by the Contact
   inquiry form and every card in the reservation flow
   ============================================================ */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 30px;
  border: 1px solid rgba(217, 217, 217, 0.25);
  border-radius: var(--radius-control-lg);
  background: var(--color-white);
}

.form-card__heading {
  font-size: 30px;
  line-height: 33px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.3px;
  color: var(--color-black);
}

.form-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Contact aligns the card's children to the right for its Send button; the field
     stack still has to run the full width. */
  align-self: stretch;
}

.form-row {
  display: flex;
  gap: 30px;
}

.form-field {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 11px;
}

.form-field__label {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.28px;
  color: var(--color-grey-secondary);
}

.form-field__label span {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
}

.form-field__control {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-control);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-grey-dark);
}

.form-field__control::placeholder {
  font-weight: 300;
  letter-spacing: -0.5px;
  color: var(--color-grey);
}

/* 165px is the whole field, label and control together, not the control alone. */
textarea.form-field__control {
  height: 137px;
  padding: 15px;
  resize: vertical;
}

select.form-field__control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url('../../assets/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 12px;
}

.form-field__control:focus-visible {
  border-color: var(--color-green-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 117, 131, 0.12);
}

/* ============================================================
   Search form
   ============================================================ */

.search-form__inner {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.search-form__field .field {
  height: 56px;
}

.search-form__field {
  flex: 1 1 0;
  min-width: 0;
}

.search-form__field--narrow {
  flex: 0 0 180px;
}

.search-form__date {
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-primary);

  /* The field is one line high. A range that still outruns it has to be cut, not
     wrapped, or it pushes the field taller than the ones beside it. The clip is safe
     here: the picker hangs off the surrounding .field, not off this button. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Select Dates" is a placeholder, so it takes the same gray as the Where field's. */
.search-form__date[data-empty='true'] {
  color: var(--color-grey);
}

.search-form__submit {
  flex: none;
  min-height: 56px;
  padding-inline: 50px;
  font-size: 20px;
  letter-spacing: 1.4px;
  box-shadow: var(--shadow-cta);
}

/* --- Closed search bar ---

   Only a host that asks for it through data-collapsible gets this, and only below 900px.

   Every selector below tests the attribute's *value*, not its presence. Razor drops an
   attribute whose expression is null, but not on a <form>: FormTagHelper writes the whole
   attribute set and turns the null into "". Presence selectors then hid the fields of a
   host that asked for no collapsing, with no summary bar to open them again. */
.search-form__summary {
  display: none;
}

@media (max-width: 900px) {
  .search-form__inner[data-collapsible='true'] .search-form__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-field);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    text-align: left;
  }

  /* Hidden rather than removed, so the fields still submit their values and the date
     picker and the Places autocomplete stay bound to the same elements. */
  .search-form__inner[data-collapsible='true']:not(.is-open) .search-form__field,
  .search-form__inner[data-collapsible='true']:not(.is-open) .search-form__submit {
    display: none;
  }

  .search-form__inner[data-collapsible='true'].is-open .search-form__summary {
    display: none;
  }

  .search-form__summary-icon {
    flex: none;
    color: var(--color-rose);
  }

  .search-form__summary-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  /* One line: a long address must be cut rather than push the bar past 56px. */
  .search-form__summary-place {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
  }

  .search-form__summary-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
}

/* --- Hero variant: frosted card with a notched left edge --- */

.search-panel {
  position: relative;
  width: 907px;
  max-width: 100%;
  min-height: 145px;
  padding: 30px 31px 34px 62px;
}

/* The card face is a pseudo-element, not .search-panel itself. A mask clips the
   descendants of the element that carries it, so on the panel it cut the date picker
   off at the card edge. The face is masked; the panel that holds the fields is not. */
.search-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(9px);

  /* The left slot is a hole through the card that the hero photograph shows through. Two
     mask layers composited with `exclude` punch it out. A mask also clips box-shadow, so
     the card carries none. */
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) 30px 50% / 12px 85px no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) 30px 50% / 12px 85px no-repeat;
  mask-composite: exclude;
}

/* Lifts the fields above the card face, which ::before paints in the same place. */
.search-panel .search-form__inner {
  position: relative;
}

.search-panel .search-form__submit {
  width: 200px;
}

/* --- CTA band variant: pill fields on the teal background --- */

.search-band .search-form__inner {
  align-items: center;
  gap: var(--space-5);
}

.search-band .field {
  min-height: 80px;
  padding-block: 20px;
}

.search-band .search-form__field + .search-form__field {
  flex: 0 0 211px;
}

.search-band .field__input,
.search-band .search-form__date {
  font-size: 20px;
}

.search-band .search-form__submit {
  min-height: 80px;
  padding-inline: 50px;
  font-size: 20px;
  letter-spacing: 1.4px;
  box-shadow: var(--shadow-cta);
}

/* ============================================================
   Date picker
   ============================================================ */

/* Anchored from script against the trigger's viewport rect — see datePicker.js for
   why it sits on <body> rather than inside the field. */
.datepicker {
  position: fixed;
  /* Over the modals too: the availability popup opens one from inside itself. */
  z-index: calc(var(--z-modal) + 1);
  width: max-content;
  max-width: min(620px, calc(100vw - 2 * var(--gutter)));
  /* Capped and scrollable so Clear and Done can always be reached. The cap is also
     what lets the script detect overflow and fall back to a single month; dvh tracks
     the phone's collapsing URL bar where vh over-reports the space. */
  max-height: calc(100vh - 2 * var(--gutter));
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-float);
  cursor: default;
  color: var(--text-primary);
}

.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.datepicker__months {
  display: flex;
  gap: var(--space-8);
}

.datepicker__month {
  width: 252px;
}

.datepicker__month-name {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
}

.datepicker__weekdays,
.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.datepicker__weekdays {
  margin-bottom: var(--space-2);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.datepicker__day {
  display: grid;
  place-items: center;
  height: 34px;
  font-size: var(--text-xs);
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.datepicker__day:hover:not(:disabled) {
  background: var(--surface-tint);
}

.datepicker__day.is-blank {
  pointer-events: none;
}

.datepicker__day.is-disabled {
  color: var(--color-grey-light);
  cursor: not-allowed;
}

.datepicker__day.is-in-range {
  background: rgba(2, 117, 131, 0.1);
  border-radius: 0;
}

.datepicker__day.is-start,
.datepicker__day.is-end {
  background: var(--color-green-primary);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
}

.datepicker__day.is-start {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.datepicker__day.is-end {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.datepicker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* The margin, not a rule on the buttons, keeps Clear and Done together on the right. */
.datepicker__hint {
  margin-right: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* A hidden hint still holds its space, so the picker opens wide enough for it and never
   resizes after position() has placed it. The !important beats the global [hidden] rule. */
.datepicker__hint[hidden] {
  display: inline !important;
  visibility: hidden;
}

/* ============================================================
   Responsive
   ============================================================ */

/* The 50px inline padding makes the submit 200px wide, which is the last thing that
   stops the browse filter row fitting between the 900px stacking breakpoint and about
   1024px. It gives up the padding before the row gives up its layout. */
@media (max-width: 1024px) {
  .search-form__submit {
    padding-inline: var(--space-6);
    font-size: var(--text-body);
    letter-spacing: 1px;
  }

  /* The guests field carries a fixed 180px basis for the desktop row; at this width it
     is the difference between the row fitting and not. */
  .search-form__field--narrow {
    flex: 0 1 120px;
  }
}

@media (max-width: 900px) {
  .form-card {
    padding: var(--space-5);
  }

  .form-row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .form-field {
    flex: 0 0 auto;
  }

  .search-form__inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* The row is a column here, so any fixed flex-basis a host set for the desktop
     widths would become a fixed *height*. Every field goes back to auto. */
  .search-form__field,
  .search-form__field--narrow {
    flex: 0 0 auto;
    width: 100%;
  }

  .search-form__submit {
    width: 100%;
  }

  .search-panel {
    padding: 15px;
  }

  .search-panel .search-form__inner {
    gap: var(--space-3);
  }

  .search-panel::before {
    /* The notch is a desktop detail; left applied it punches a hole through the card
       at a width where the design draws none. */
    -webkit-mask: none;
    mask: none;
  }

  .search-panel .search-form__submit {
    width: 100%;
  }

  /* On mobile the caption sits *inside* the field box, above the value, so the box moves
     up to the group and .field below drops to plain layout. */
  .search-panel .search-form__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 56px;
    padding: 0 15px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-light);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-field);
  }

  /* The ring follows the border. components.css hangs :focus-within on .field, which
     has no border here, so without this the focus state would be invisible. */
  .search-panel .search-form__field:focus-within {
    border-color: var(--color-green-primary);
    box-shadow: 0 0 0 3px rgba(2, 117, 131, 0.12);
  }

  .search-panel .search-form__field .field {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .search-panel .field-label {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .search-panel [data-date-trigger] svg.field__icon,
  .search-band [data-date-trigger] svg.field__icon {
    display: none;
  }

  .search-panel [data-date-trigger]::before,
  .search-band [data-date-trigger]::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    /* Rose, like every other .field__icon. currentColor here is the trigger's own dark
       text color. */
    background-color: var(--color-rose);
    -webkit-mask: url('../../assets/icons/pin.svg') center / contain no-repeat;
    mask: url('../../assets/icons/pin.svg') center / contain no-repeat;
  }

  .datepicker {
    max-width: calc(100vw - 2 * var(--gutter));
  }

  .datepicker__months {
    flex-direction: column;
    gap: var(--space-5);
  }

  .datepicker__month {
    width: 100%;
  }
}

/* ============================================================
   Extranet login
   ============================================================ */

.login-page {
  padding-bottom: var(--space-16);
}

.login-page__intro {
  max-width: 720px;
  margin-top: var(--space-4);
  font-size: var(--text-body);
  line-height: 28px;
  color: var(--color-grey-dark);
}

.login-page__intro a {
  color: var(--color-green-primary);
  text-decoration: underline;
}

.login-page__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 480px));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.login-card {
  gap: var(--space-5);
}

.login-card__forgot {
  color: var(--color-green-primary);
}

.login-card .errorMessage,
.login-card .errorMessageGuest {
  color: var(--color-rose);
  font-size: var(--text-sm);
  line-height: 22px;
}

.login-card .errorMessage:empty,
.login-card .errorMessageGuest:empty {
  display: none;
}

/* ManagerExtranet.min.js toggles Bootstrap's spinner markup; the theme loads no
   Bootstrap, so the ring it expects is drawn here. */
.login-card .spinner-border {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: var(--radius-pill);
  animation: login-spin 0.8s linear infinite;
}

@keyframes login-spin {
  to {
    rotate: 360deg;
  }
}