/* =====================================================================
   32 - THE CHOOSER. The panel a customer buys an event place in.

   Every selector in here is an rhc-chooser* name owned by this file alone.
   Nothing later in the cascade (40-, 47-, 48-, 90-, 95-, 96-...) touches
   that prefix, which is what keeps the "a 32- file loses to a 55- file at
   equal specificity" trap from biting. The older event-checkout rules in
   phase1.css and in 31-events-called-off.css style the panel this one
   replaces; they cannot reach these names either. A validator greps this
   file and fails on any class name outside the prefix.

   Design language: HANDOVER-DESIGN.md. Cream paper inset on the page's own
   ground, ink type, clay hairlines, ONE rust action. Fraunces carries the
   money; Source Sans 3 carries everything procedural. Phone first.
   ===================================================================== */

.rhc-chooser {
  --rhc-chooser-rule: rgba(176, 141, 98, .38);
  max-width: 44rem;
  margin: 0;
  padding: 26px 20px 28px;
  background: var(--surface);
  border-top: 3px solid var(--clay);
  color: var(--tx);
  font-family: var(--b);
}

/* A heading for assistive technology only: the page above already names the
   event, and the owner asked for "just $250" as the first thing you see. */
.rhc-chooser__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Something went wrong on the way here, or this basket cannot be sold online.
   It sits above the price because the customer has to read it before they act. */
.rhc-chooser__problem {
  margin: 0 0 20px;
  max-width: 54ch;
  padding: 14px 16px;
  border-left: 3px solid var(--rust);
  background: var(--ground);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tx);
}

/* The same box, but it sits next to the total it is refusing, not above the price. */
.rhc-chooser__problem--conflict {
  margin: 24px 0 0;
}

.rhc-chooser__price {
  margin: 0;
  font-family: var(--d);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pine);
}

.rhc-chooser__places {
  margin: 10px 0 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-tx, #7C603E);
}

.rhc-chooser__places--full {
  color: var(--rust-tx, #A24825);
}

.rhc-chooser__note {
  margin: 12px 0 0;
  max-width: 54ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tx-2);
}

.rhc-chooser__note--meal {
  margin-top: 6px;
}

/* Nobody is signed in: the price is said, and this is the way in. */
.rhc-chooser__signin {
  margin: 22px 0 0;
  font-weight: 600;
}

.rhc-chooser__signin a {
  color: var(--rust-tx, #A24825);
  border-bottom: 1.5px solid rgba(176, 78, 40, .35);
  padding-bottom: 2px;
}

.rhc-chooser__signin a:hover {
  border-bottom-color: var(--rust);
}

.rhc-chooser__form {
  display: block;
  margin: 0;
}

/* ------------------------------------------------- the things you can tick */

.rhc-chooser__add {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rhc-chooser-rule);
}

.rhc-chooser__box {
  grid-column: 1;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--rust);
  cursor: pointer;
}

.rhc-chooser__add-label {
  grid-column: 2;
  display: block;
  min-height: 26px;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--pine);
  cursor: pointer;
}

.rhc-chooser__add-why {
  grid-column: 2;
  margin: 5px 0 0;
  max-width: 52ch;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tx-2);
}

/* The nights open when the Lodge is ticked. This is a sibling selector on a
   real checkbox, not a script, so it opens with JavaScript switched off. */
.rhc-chooser__nights {
  grid-column: 2;
  display: none;
  margin: 12px 0 0;
}

.rhc-chooser__box:checked ~ .rhc-chooser__nights {
  display: block;
}

.rhc-chooser__night-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rhc-chooser-rule);
}

.rhc-chooser__night {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--rhc-chooser-rule);
}

.rhc-chooser__night-box {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--rust);
  cursor: pointer;
}

.rhc-chooser__night-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  min-height: 46px;
  padding: 12px 0;
  cursor: pointer;
}

.rhc-chooser__night-day {
  font-size: .98rem;
  font-weight: 600;
  color: var(--pine);
}

.rhc-chooser__night-beds {
  font-size: .85rem;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}

/* A night nobody can have reads as unavailable, not as a broken control. */
.rhc-chooser__night--full .rhc-chooser__night-day,
.rhc-chooser__night--full .rhc-chooser__night-beds {
  color: var(--tx-3);
}

.rhc-chooser__night--full .rhc-chooser__night-label,
.rhc-chooser__night-box:disabled,
.rhc-chooser__night-box:disabled + .rhc-chooser__night-label {
  cursor: default;
}

.rhc-chooser__night-box:disabled + .rhc-chooser__night-label .rhc-chooser__night-day {
  color: var(--tx-3);
}

/* A night already ticked on the other weekend of the package: one bed, said once. */
.rhc-chooser__night--twin .rhc-chooser__night-day {
  color: var(--tx-3);
}

.rhc-chooser__night-twin {
  font-size: .85rem;
  font-style: italic;
  color: var(--tx-2);
}

.rhc-chooser__note--twin {
  font-size: .9rem;
  color: var(--tx-2);
}

.rhc-chooser__nights-help,
.rhc-chooser__nights-cap,
.rhc-chooser__lodge-notice,
.rhc-chooser__fine {
  margin: 10px 0 0;
  max-width: 52ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tx-2);
}

.rhc-chooser__nights-cap {
  font-weight: 600;
  color: var(--pine);
}

.rhc-chooser__lodge-notice {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--clay);
  background: var(--ground);
}

/* ------------------------------------------ the second weekend's beds */

/* The Immersion Weekend's nights sit INSIDE the offer that brings them, stepped
   in behind a hairline, so the panel reads as one purchase with two stays
   rather than as two purchases standing side by side. Same rows, same bed
   counts, same limit sentence as the list above: a customer should not have to
   learn a second control. */
.rhc-chooser__nights--offer {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--rhc-chooser-rule);
}

/* The offer's checkbox is the only thing that opens this list, so the list needs
   a heading of its own to say what it is for. */
.rhc-chooser__nights-head {
  margin: 0 0 8px;
  max-width: 50ch;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pine);
}

/* `hidden` has to beat the grid and flex display values above. */
.rhc-chooser [hidden] {
  display: none !important;
}

/*
 * THE SECOND LIST OPENS WITHOUT A SCRIPT.
 *
 * The server prints that list with the `hidden` attribute on it, and the script
 * takes the attribute off when the offer is ticked. With the script absent the
 * checkbox still has to open it, or a customer with JavaScript switched off
 * could never reach the beds at all. This is the same sibling rule the Lodge's
 * own list uses; it carries !important only because the blanket rule directly
 * above it is important too, and it outranks it on specificity.
 */
.rhc-chooser__box:checked ~ .rhc-chooser__nights[hidden] {
  display: block !important;
}

/* ------------------------------------------------------------ the summary */

.rhc-chooser__summary {
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rhc-chooser-rule);
}

.rhc-chooser__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
  padding: 6px 0;
}

.rhc-chooser__line-name {
  margin: 0;
  font-size: .97rem;
  font-weight: 400;
  color: var(--tx-2);
}

.rhc-chooser__line-amount {
  margin: 0;
  font-size: .97rem;
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  text-align: right;
}

.rhc-chooser__line--total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rhc-chooser-rule);
}

.rhc-chooser__line--total .rhc-chooser__line-name,
.rhc-chooser__line--total .rhc-chooser__line-amount {
  font-family: var(--d);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--pine);
}

/* --------------------------------------------------------------- the action */

.rhc-chooser__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 20px 0 0;
  padding: 14px 32px;
  border: 1.5px solid transparent;
  border-radius: 0;
  background: var(--rust);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  transition: background .18s cubic-bezier(.2, 0, .2, 1);
}

.rhc-chooser__submit:hover {
  background: #8F3E1F;
}

.rhc-chooser__submit:disabled {
  background: var(--tx-3);
  cursor: not-allowed;
}

.rhc-chooser :where(input, button, label):focus-visible {
  outline: 3px solid var(--river);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rhc-chooser__submit {
    transition: none;
  }
}

/* ----------------------------------------------------------------- desktop */

/* A narrow screen cannot hold "Thursday, October 15" and "6 of 6 beds free" on one
   line, and letting it wrap only sometimes gave a ragged list. Below this width the
   two always stack, so every row in the list has the same shape. */
@media (max-width: 639px) {
  .rhc-chooser__add {
    column-gap: 10px;
  }

  .rhc-chooser__night-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* A phone has no room to give away: the step-in narrows but stays visible. */
  .rhc-chooser__nights--offer {
    padding-left: 10px;
  }
}

@media (min-width: 640px) {
  .rhc-chooser {
    padding: 32px 34px 34px;
  }

  .rhc-chooser__submit {
    width: auto;
    min-width: 15rem;
  }
}