/* ============================================================
   BROTHERHOOD — /request
   Loads on top of groups.css, which already supplies the card shell
   (.gform, .gfield, .gform__row, .gform__err, .gform__done). Only the
   two-step behaviour and the theater picker live here.
   ============================================================ */

/* ---------- step machine ---------- */
/* Step 1 is .gform__inner, step 2 is .request-pick, done is .gform__done.
   groups.css already hides __inner and reveals __done on .is-sent. */
.gform.is-picking .gform__inner { display: none; }
.gform.is-sent .request-pick { display: none; }

/* The brayer bleeds across the card's top-right corner, which is empty on
   step 1 but is where both later steps put real copy. Its blend mode paints
   it over that content, so it steps aside rather than being out-stacked. */
.gform.is-picking .gform__brayer,
.gform.is-sent .gform__brayer { display: none; }
.request-pick { position: relative; z-index: 1; animation: optinIn .45s cubic-bezier(.2,.7,.2,1); }

/* Name, email and ZIP share one row: three short fields read as "this is
   quick", and a lone ZIP on a full-width row left the card looking half
   empty. auto-fit drops to 2+1 and then to a single column on its own. */
.gform__row--triple { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }

.bh-btn.is-busy { opacity: .6; pointer-events: none; }

/* ---------- intro steps ---------- */
.request-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.request-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.request-steps__n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bh-bright-red); color: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- who we found ---------- */
.request-pick__who {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; color: rgba(255,255,255,.55); margin: 0 0 18px;
}

/* ---------- already booked ---------- */
.request-booked {
  border: 1px solid rgba(0,104,69,.55); background: rgba(0,104,69,.16);
  border-radius: var(--r-sm); padding: 18px; margin-bottom: 26px;
}
.request-booked__title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 17px; line-height: 1.1; color: #fff;
}
.request-booked__title i { width: 19px; height: 19px; }
.request-booked__item { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.request-booked__item:first-child { border-top: 0; padding-top: 0; }
.request-booked__name { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #fff; margin: 0; }
.request-booked__addr,
.request-booked__meta { font-family: var(--font-body); font-size: 13.5px; color: rgba(255,255,255,.66); margin: 0; }
.request-booked__item .bh-btn { justify-self: start; margin-top: 8px; }
.request-booked__fine {
  font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.55);
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
}

/* ---------- theater picker ---------- */
.request-venues { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.request-venues__legend {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 14px; color: rgba(255,255,255,.75); padding: 0; margin-bottom: 12px;
}
.request-venues__list { display: grid; gap: 8px; }
.request-venues__empty {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: rgba(255,255,255,.7); margin: 0 0 12px;
}

.request-venue {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 13px 15px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.32);
  transition: border-color .18s, background .18s;
}
.request-venue:hover { border-color: rgba(255,255,255,.45); }
.request-venue input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--bh-bright-red); }
.request-venue:has(input:checked) { border-color: var(--bh-bright-red); background: rgba(221,67,67,.14); }
.request-venue:has(input:focus-visible) { outline: 2px solid var(--bh-bright-red); outline-offset: 2px; }

.request-venue__body { display: grid; gap: 2px; min-width: 0; }
.request-venue__name { font-family: var(--font-body); font-weight: 600; font-size: 15.5px; color: #fff; }
.request-venue__meta { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.6); }
.request-venue__dist {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em;
  font-size: 11.5px; color: var(--bh-bright-red);
}
.request-venue--other { margin-top: 8px; border-style: dashed; }
/* .gfield is display:flex in groups.css, which out-specifies the UA rule for
   [hidden] — without this the free-text field shows before it's chosen. */
.request-other { margin-top: 12px; }
.request-other[hidden] { display: none; }

.request-done__next {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,.7); margin: 0;
}

/* Three picks reached: the rest dim until one is cleared. */
.request-venue.is-disabled { opacity: .45; cursor: not-allowed; }
.request-venue.is-disabled:hover { border-color: rgba(255,255,255,.22); }