/* Courtesy pass pages: the request form, the status check, and the answers
   submit.php renders through the shared shell. Ships as /theme/courtesy.css
   after the theme's own sheets. It leans on the theme's tokens (--paper,
   --white, --ink, --muted, --blue, --red, --vermilion, --serif, --sans,
   --visitor-rule, --visitor-wash) and its own hero and display heading, so the
   form reads as one more page of the booklet. The few literal colours left are
   form states the theme has no token for (field edge, error wash, focus ring)
   and the .btn copy of the theme's .button that submit.php still asks for.
   Header, footer, logo and the bright red .button come from the site's own
   round2-shared.css, which view.php links just before this file.
   Everything is scoped to body.courtesy-page. */

.courtesy-page {
  --cp-rule: var(--visitor-rule, #cec6ae);
  /* Edges of things you type in, tap or drop a file on: 3:1 against the field,
     so they still read on a phone outdoors. Dividers keep the lighter rule. */
  --cp-field-rule: #968d74;
  --cp-callout: #fff0d7;
  --cp-shadow: var(--visitor-wash, #f8efd9);
  --cp-focus: 0 0 0 3px rgba(24, 72, 120, .16);
}

/* The theme draws keyboard focus in its green; these pages keep to the site's
   blue ring (round2-shared.css), links and buttons alike. */
.courtesy-page :is(a, button, summary, input, select, textarea):focus-visible { outline-color: #183e59; }

/* No fixed booking bar here, so the footer need not leave room for one. */
@media (max-width: 650px) {
  .courtesy-page .site-footer { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- hero ---- */

/* The hero uses the site's own wrap, so the breadcrumb, eyebrow and heading
   start at the same left edge as terms, the FAQs and the footer. The heading is
   the theme's display type (.visitor-hero surbhi-title), blue then vermilion;
   the h1 around it only carries the meaning. */
.courtesy-page .cp-title { margin: 0; font-size: inherit; font-weight: inherit; }
.courtesy-page .cp-title surbhi-title { text-wrap: balance; }
/* the breadcrumb keeps its place but gets a full-height tap area */
.courtesy-page .cp-hero .breadcrumb { padding-block: 14px; margin-top: -14px; margin-bottom: 21px; }
@media (max-width: 500px) { .courtesy-page .cp-hero .breadcrumb { margin-bottom: 11px; } }

.courtesy-page .cp-body { padding-top: 48px; padding-bottom: 90px; }
/* The sheet keeps a comfortable form width, set on the left edge under the
   heading rather than in a centred column of its own. */
.courtesy-page .cp-body > .card { max-width: 742px; }

/* ---------------------------------------------------------------- sheet --- */

.courtesy-page .card {
  position: relative;
  padding: clamp(24px, 4.4vw, 46px);
  background: #fff;
  border: 1px solid var(--cp-rule);
  border-top: 5px solid var(--vermilion);
  box-shadow: 7px 7px 0 var(--cp-shadow);
}
.courtesy-page .card + .card { margin-top: 30px; }

.courtesy-page .grp + .grp {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--cp-rule);
}

.courtesy-page .field { margin: 0 0 22px; }
.courtesy-page .field:last-child { margin-bottom: 0; }
.courtesy-page .cp-lookup .field { margin-bottom: 0; }
.courtesy-page .row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}
.courtesy-page .row2 .field { margin: 0; }

.courtesy-page label {
  display: block;
  margin: 0 0 9px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.courtesy-page p.cp-group-label {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.courtesy-page label .rq,
.courtesy-page .cp-group-label .rq { color: var(--red); }
.courtesy-page .cp-group-label { margin-bottom: 14px; }
.courtesy-page .opt { font-size: 14px; font-weight: 400; color: var(--muted); }

.courtesy-page .hint { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.courtesy-page .hint a {
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.courtesy-page .hint a:hover { color: var(--red); }

/* --------------------------------------------------------------- fields --- */

.courtesy-page .f {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 14px 15px;
  font: 400 16px/1.5 var(--sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--cp-field-rule);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.courtesy-page .f:hover { border-color: var(--muted); }
.courtesy-page .f:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: var(--cp-focus);
}
.courtesy-page .f[readonly] { background: var(--paper); }
.courtesy-page .f.bad { background: #fffaf7; border-color: var(--red); }
.courtesy-page .f.bad:focus { box-shadow: 0 0 0 3px rgba(167, 53, 48, .14); }
.courtesy-page textarea.f { min-height: 110px; resize: vertical; }

/* The number and the button that verifies it read as one control. */
.courtesy-page .inline { display: flex; align-items: stretch; gap: 10px; }
.courtesy-page .phone {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.courtesy-page .phone .cc {
  position: absolute;
  left: 15px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  pointer-events: none;
}
.courtesy-page .phone .f { padding-left: 54px; }

.courtesy-page .verified {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}
.courtesy-page .verified svg { flex: none; }

.courtesy-page .up-err { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--red); }
.courtesy-page .cp-group-label + .up-err { margin: -4px 0 12px; }

/* Out of sight for people, still there for a script to fill in. */
.courtesy-page .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- buttons --- */

/* Verify, Check and Submit use the theme's own .button, the one "Book passes"
   wears. These only fit it to the form. */
.courtesy-page .cp-verify {
  flex: none;
  min-height: 54px;
  padding: 0 22px;
  gap: 8px;
}
.courtesy-page .cp-submit { width: 100%; margin-top: 20px; }
.courtesy-page .button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.courtesy-page .button[disabled]:hover { background: #ec4b3b; border-color: #ec4b3b; }

/* submit.php still asks for .btn classes; give them the same two looks. */
.courtesy-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 21px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
/* The primary answer wears the site's bright red button (round2-shared.css). */
.courtesy-page .btn-gold { background: #ec4b3b; border-color: #ec4b3b; color: var(--paper); }
.courtesy-page .btn-gold:hover {
  background: #d63f30;
  border-color: #d63f30;
  box-shadow: 4px 4px 0 #ec4b3b33;
  transform: translate(-1px, -1px);
}
.courtesy-page :is(.btn-ghost, .btn-quiet) { background: transparent; color: var(--blue); border-color: var(--blue); }
.courtesy-page :is(.btn-ghost, .btn-quiet):hover { background: var(--blue); color: var(--paper); }
/* submit.php puts its two answers side by side in one paragraph; keep them apart when they wrap. */
.courtesy-page p:has(> .btn + .btn) { display: flex; flex-wrap: wrap; gap: 10px; }
.courtesy-page .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ----------------------------------------------------------------- days --- */

/* The same tiles as the nine nights on the home page: a coloured top edge,
   blue once chosen. */
.courtesy-page .dates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.courtesy-page .dt { position: relative; margin: 0; font-weight: 400; }
.courtesy-page .dt input { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; }
.courtesy-page .dt span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px 6px 14px;
  text-align: center;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--cp-field-rule);
  border-top: 5px solid var(--vermilion);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.courtesy-page .dt .day {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.05em;
  color: var(--blue);
}
.courtesy-page .dt .dt-date {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.courtesy-page .dt span:hover { background: var(--cp-callout); transform: translateY(-3px); }
.courtesy-page .dt input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  border-top-color: var(--vermilion);
  transform: translateY(-3px);
}
.courtesy-page .dt input:checked + span :is(.day, .dt-date) { color: var(--paper); }
.courtesy-page .dt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
/* A night the verified number has already asked for: still shown, not choosable. */
.courtesy-page .dt input:disabled + span,
.courtesy-page .dt input:disabled + span:hover {
  cursor: not-allowed;
  background: var(--paper);
  border-color: var(--cp-rule);
  border-top-color: var(--cp-rule);
  transform: none;
}
.courtesy-page .dt input:disabled + span :is(.day, .dt-date) { color: var(--muted); }
.courtesy-page .dt .dt-note {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* --------------------------------------------------------------- upload --- */

.courtesy-page .up {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  margin: 0;
  padding: 14px 16px;
  font-weight: 400;
  cursor: pointer;
  background: var(--white);
  border: 1px dashed var(--cp-field-rule);
  transition: border-color .2s, background-color .2s;
}
.courtesy-page .up:hover { background: #fff; border-color: var(--blue); }
/* The file input stays in the page, out of sight but reachable by keyboard and
   screen reader; the box around it shows the focus. */
.courtesy-page .cp-file {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
}
.courtesy-page .up:focus-within { border-color: var(--blue); box-shadow: var(--cp-focus); }
.courtesy-page .up.chosen { background: #fff; border-style: solid; border-color: var(--blue); }
.courtesy-page .up-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--red);
  background: var(--cp-callout);
}
.courtesy-page .up.chosen .up-ico { color: var(--paper); background: var(--blue); }
.courtesy-page .up-txt { flex: 1; min-width: 0; }
/* A long phone-camera file name stays on one line and trails off. */
.courtesy-page .up-txt b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.courtesy-page .up-txt span { display: block; font-size: 13px; color: var(--muted); }
.courtesy-page .up-change {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}

/* --------------------------------------------------------------- submit --- */

.courtesy-page .submit-wrap {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px solid var(--blue);
}
.courtesy-page .cp-already { margin: 0 0 16px; text-align: center; }
.courtesy-page .cp-already a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
.courtesy-page .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  cursor: pointer;
}
.courtesy-page .consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--red);
  cursor: pointer;
}

/* ------------------------------------------------------ answers, status --- */

.courtesy-page .result { text-align: center; }
.courtesy-page .rule { width: 27px; height: 1px; margin: 0 auto 20px; background: var(--vermilion); }
.courtesy-page .lede {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
}
.courtesy-page .result strong { font-weight: 700; color: var(--blue); }

.courtesy-page .cp-closed-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.045em;
  color: var(--blue);
  text-wrap: balance;
}
.courtesy-page .cp-closed-hint { margin: 26px 0 12px; }

.courtesy-page .cp-nowrap { white-space: nowrap; }
.courtesy-page .cp-who {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.035em;
  color: var(--blue);
  text-wrap: balance;
}
.courtesy-page .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.courtesy-page .st-appr { color: var(--paper); background: var(--blue); }
.courtesy-page .st-review { color: var(--ink); background: var(--cp-callout); box-shadow: inset 0 0 0 1px var(--cp-rule); }
.courtesy-page .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.courtesy-page .cp-note { max-width: 36ch; margin: 18px auto 0; }
.courtesy-page .cp-ticket {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-rule);
  font-variant-numeric: tabular-nums;
}

.courtesy-page .err {
  margin: 0 0 22px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--red);
  background: #fff5f0;
  border-left: 3px solid var(--red);
}
.courtesy-page .err:only-child { margin: 0; }
.courtesy-page .err ul { margin: 6px 0 0; padding-left: 20px; }

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 640px) {
  .courtesy-page .cp-body { padding-top: 30px; padding-bottom: 58px; }
  .courtesy-page .card { padding: 24px 18px 26px; box-shadow: 5px 5px 0 var(--cp-shadow); }
  .courtesy-page .grp + .grp { margin-top: 26px; padding-top: 26px; }
  .courtesy-page .cp-verify { padding: 0 16px; }
  .courtesy-page .lede { font-size: 16px; }
}
@media (max-width: 540px) {
  .courtesy-page .row2 { grid-template-columns: 1fr; }
  .courtesy-page .dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .courtesy-page .dt .day { font-size: 26px; }
}