/* ==========================================================================
   Booth registration page - Figma node 7043:12884.

   The form on the left, the running total and the pay button on the right,
   both inside one <form>. Loaded only on template-payment.php.

   The inputs themselves are the global system in forms.css; this file places
   the cards, styles the summary panel, and owns the two components that exist
   nowhere else - the booth chip and the booth picker's dropdown.
   ========================================================================== */


/* The way back to the plan, above the heading - Figma node 7143:32121. The
   pill itself is .back-pill in buttons.css; only its place is page business. */
.payment__back {
  margin-bottom: var(--space-sm);
}

.payment__title {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-ink-pure);
}

.payment__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

/*
 * One column on a phone, and the price list comes first - it is written ahead
 * of the form for exactly that reason, so nothing here has to reorder it.
 *
 * From 1024px the same three children become two columns: the form down the
 * left across both rows, the price list above the running total on the right.
 * Placing them explicitly is what lets the price list be first in the document
 * and still sit in the right-hand column.
 */
@media (min-width: 1024px) {
  .payment__grid {
    grid-template-columns: 7fr 3fr;
    /*
     * The second track has to be flexible, and that is not a preference. The
     * form spans both rows, and grid shares a spanning item's height out
     * across the tracks it spans - which left the first row as tall as half
     * the form and the running total stranded 660px below the price list.
     * A spanning item contributes nothing to a track set that includes an fr,
     * so `1fr` here hands the form's height entirely to the second row and
     * leaves the first the size of the price card, which is the whole point.
     */
    grid-template-rows: auto 1fr;
    /* The two cards in the right column sit closer than the columns do. */
    row-gap: var(--space-sm);
  }

  .payment__main {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .payment__grid > .price-card {
    grid-column: 2;
    grid-row: 1;
  }

  .payment__grid > .summary {
    grid-column: 2;
    grid-row: 2;
  }
}

.payment__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.payment__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .payment__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The registration cards sit tighter than a standalone form card: the design
   stacks five of them, so they use the smaller padding and gap. */
.payment-card {
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.payment-card__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  color: var(--c-label);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.payment__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.payment__notice,
.payment__errors {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-input);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-copy);
  color: var(--c-ink);
}

.payment__errors {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

.payment__errors ul {
  margin: 0;
  padding-left: var(--space-md);
}

/* --- Booth chips ------------------------------------------------------------
   The tag from the design, used in the picker, in the summary and on the
   receipt. booth-picker.js paints each one in its own zone's colour, so a chip
   matches the cell it was picked off the plan; these are what is left for a
   zone that has no colour set. */
.booth-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 2px var(--space-xs);
  border: 1px solid var(--c-chip-border);
  border-radius: var(--radius-sm);
  background: var(--c-chip-bg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  color: var(--c-on-dark);
}

.booth-chip__remove {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.booth-chip__remove:hover {
  opacity: 0.7;
}

/* --- Booth picker -----------------------------------------------------------
   The <select multiple> is the real control; booth-picker.js hides it and the
   site plan above becomes the way in. Without the script the native select is
   what shows, which is why it carries .field in the markup.

   The combobox that used to be drawn over it - control, chips, search box and
   listbox - is gone: the plan prints every code at desktop sizes and zooms on
   a phone, so there was nothing left for a search box to answer. All that is
   left here is what to say when there is nothing to pick. */
.booth-picker__empty {
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-copy);
  color: var(--c-ink-50);
}

/* --- Summary ----------------------------------------------------------------
   Sticks beside the form once there is room for two columns. */
.summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--c-border-card);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
}

@media (min-width: 1024px) {
  .summary {
    position: sticky;
    /* Clear of the fixed header. */
    top: calc(var(--header-h-solid) + var(--space-md));
  }
}

.summary__picked {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* The selection itself, and the only copy of it. booth-picker.js hides it and
   the chips above become what is read; with the script off it is the plain
   multi-select that submits, so it has to be usable rather than invisible.

   :not(.visually-hidden) is what keeps those two apart. This file loads after
   layout.css, so a bare `.summary__booths { width }` beats the utility's own
   `width: 1px` at equal specificity and leaves a 341px box behind the card -
   clipped, and still no business being there. */
.summary__booths:not(.visually-hidden) {
  width: 100%;
  font: inherit;
}

.summary__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
  color: var(--c-ink-pure);
}

.summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.summary__none {
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
  color: var(--c-ink-50);
}

.summary__rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--c-border-light);
}

.summary__discounts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.summary__row span {
  color: var(--c-ink-50);
}

.summary__row strong {
  font-weight: var(--fw-medium);
  color: var(--c-ink-pure);
}

.summary__row--pay strong {
  font-size: var(--fs-lg);
}

.summary__hint {
  display: block;
  font-size: var(--fs-label);
  color: var(--c-ink-45);
}

.summary__submit {
  justify-content: space-between;
}

.summary__arrow {
  flex: none;
  width: 20px;
  height: 20px;
}

.summary__terms {
  font-size: var(--fs-label);
  line-height: var(--lh-copy);
  color: var(--c-ink-50);
}

.summary__warning {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--c-error-bg);
  font-size: var(--fs-label);
  line-height: var(--lh-copy);
  color: var(--c-danger);
}

/* --- Receipt ---------------------------------------------------------------- */
.receipt__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.receipt__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
}

.receipt__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-border-light);
}

@media (min-width: 640px) {
  .receipt__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.receipt__facts dt {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-ink-50);
}

.receipt__facts dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-pure);
}

/* ==========================================================================
   The price list, above the running total.

   Moved here from booth.css with the page it used to live on: what a booth
   costs and what this basket costs belong in one column, not on two pages.
   ========================================================================== */
/* --------------------------------------------------------------------------
   The price panel
   -------------------------------------------------------------------------- */

.booth-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-xl) var(--gutter);
}

@media (min-width: 1024px) {
	.booth-panel {
		padding: var(--space-xl) var(--gutter) var(--space-xl) var(--space-sm);
	}
}

.panel-title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-page-title);
	line-height: var(--lh-normal);
	text-transform: uppercase;
	color: var(--c-ink-pure);
}
.price-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-sm);
	border: 1px solid var(--c-border-card);
	border-radius: var(--radius-card);
	background: var(--c-surface);
}

.price-card__label {
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-label);
	color: var(--c-field-text);
}

.price-card__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.price-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-sm);
	border: 1px solid var(--c-border-card);
	border-radius: var(--radius-sm);
	background: var(--c-fill-subtle);
}

.price-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--c-ink-pure);
}

.price-row__name {
	flex: 1 1 0;
	min-width: 0;
}

.price-row__note {
	flex: none;
	color: var(--c-ink-50);
}

/* The colour is per booth type, so it arrives inline; this is only the fallback. */
.swatch {
	flex: none;
	width: 24px;
	height: 16px;
	border-radius: var(--radius-sm);
	background: var(--c-fill-muted);
}

.price-amount {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
}

.price-amount strong {
	flex: 1 1 0;
	min-width: 0;
	font-weight: inherit;
	color: var(--c-ink-pure);
}

.price-amount span {
	flex: none;
	color: var(--c-ink-50);
}

.price-contact {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-org);
	color: var(--c-ink-90);
}

.price-contact a {
	color: var(--c-ink-pure);
	text-decoration: underline;
}

.price-contact a:hover {
	color: var(--c-primary);
}

/* --- Entrance --------------------------------------------------------------
   The title, each of the three form cards and the running total reveal on
   their own as they scroll into view. The form is tall, so one trigger for
   all of it would play the lower cards before anyone can see them.
   Keyframes rather than a transition so nothing already animating on these
   blocks is replaced; `reveal-up` is defined in home.css. The animation ends
   with no transform left behind, so the sticky total keeps working. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .payment [data-reveal]:not(.is-revealed) {
    opacity: 0;
  }

  .has-reveal .payment [data-reveal].is-revealed {
    animation: reveal-up var(--reveal-dur) var(--ease) backwards;
  }
}