/**
 * Search form and date picker styling.
 * Pairs with src/shared/searchForm.js and src/shared/datePicker.js; the host section
 * supplies the surrounding card (hero glass panel, CTA band, browse filter bar).
 */

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

/* Figma `106:15041` / `294:21751`: a white card on a 25%-opacity hairline, 14px radius,
   30px padding, 28px between the heading and the fields. */
.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;
}

/* Rows share their width equally — two fields on most, three on town/state/zip. */
.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);
}

/* The design marks required fields with a 5px rose dot, not an asterisk. */
.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);
}

textarea.form-field__control {
  height: 165px;
  padding: 15px;
  resize: vertical;
}

.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;
}

/* Wide enough for "2 guests" at the design's 18px field text plus the leading icon. */
.search-form__field--narrow {
  flex: 0 0 180px;
}

/* The date trigger is a button styled to read as an input value. */
.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;
}

.search-form__date:empty::before,
.search-form__date[data-empty='true'] {
  color: var(--text-muted);
}

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

/* --- Hero variant: frosted card with the notched left edge from the design --- */

/* Figma `175:18868`: 907x145 card, content inset 62/30, two 291px fields + a 200px
   button at 16px gaps. */
.search-panel {
  position: relative;
  width: 907px;
  max-width: 100%;
  min-height: 145px;
  padding: 30px 31px 34px 62px;
}

/* Changed for the Razor port: the card face moved off .search-panel onto this
   pseudo-element. A mask clips the descendants of the element that carries it, so
   while the mask sat on the panel the date picker was cut off at the card edge and
   could not open. 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 boolean Exclude in the design — a hole through the card that
     the hero photograph shows through, not a coloured bar. Two mask layers composited
     with `exclude` punch it out. A mask also clips box-shadow, so the card carries
     none, matching the Figma shape. */
  -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 --- */

/* CTA band: 80px controls with 20px gaps and 20px field text, per Figma `175:19196`. */
.search-band .search-form__inner {
  align-items: center;
  gap: var(--space-5);
}

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

/* Figma splits the 926px row as 327 / 211 / 348: the destination field flexes, the
   date field is fixed, the button takes what it needs. */
.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
   ============================================================ */

.datepicker {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--z-overlay);
  width: max-content;
  max-width: min(620px, calc(100vw - 2 * var(--gutter)));
  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.
   The hint only shows while a check-in is open; while it is hidden it takes no space
   and the footer falls back to Clear left, Done right. */
.datepicker__hint {
  margin-right: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

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

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

  /* Rows stack, so their fields go back to auto height. */
  .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: var(--space-5);
  }

  .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;
  }

  .datepicker {
    left: 50%;
    translate: -50% 0;
  }

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

  .datepicker__month {
    width: 100%;
  }
}