/**
 * 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 labeled-field component shared by the Contact
   inquiry 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);
}

/* 165px is the whole field in Figma (`106:15054`, `106:14842`) — a label and its control
   in an 11px column — not the control on its own. Taking it as the control made both the
   Contact Us and GSA cards a line taller than the design. */
textarea.form-field__control {
  height: 137px;
  padding: 15px;
  resize: vertical;
}

/* The design draws its own chevron on a dropdown, so the browser's native arrow has to
   go. Figma parks the glyph dead centre of the box (`106:15052`), which is the unstyled
   component default rather than a placement — it sits at the right edge here, where the
   rest of the theme puts a field's trailing icon. */
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;
}

/* 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;
}

/* "Select Dates" is a placeholder, so it takes the same grey 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 (Figma `207:20066`) ---

   Only a host that asks for it gets this, through data-collapsible, and only below 900px.
   The search results page is the one that does; the hero and the booking band draw their
   fields open in their own frames.

   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 claims the
   element and writes the whole attribute set, turning the null into "". So a host that
   asked for no collapsing still carried a bare data-collapsible, and presence selectors
   hid its fields with no summary bar rendered 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 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
   ============================================================ */

/* 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);
  }

  /* 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: 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;
  }

  /* The mobile frame runs the button across the card. */
  .search-panel .search-form__submit {
    width: 100%;
  }

  /* The mobile frame stacks the caption *inside* the field box, above the value —
     the desktop frame is the one that sets it on its own line above the box. So the
     box moves up to the group and .field below drops to plain layout. Leaving the
     caption outside is what made the card 292px against the design's 221px. */
  .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;
  }

  /* Mobile card (`270:21154`): small uppercase captions, and a pin on the date
     field where the desktop draws a calendar. */
  .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
       text colour, which drew this pin dark where the frame draws it rose. */
    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 (`125:17320`) — two form cards on the page wash
   ============================================================ */

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