/* ============================================================
   Nood — Booking form styles
   All values reference existing design tokens from nood-design-system.css.
   No new colours, sizes, or radii are introduced here.
   ============================================================ */


/* ── Container ───────────────────────────────────────────────── */

.nood-booking {
  position: relative;
  overflow: hidden; /* clips amber wipe as it enters/exits */
  padding: var(--nood-space-8) var(--nood-section-px);
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
  background: var(--nood-color-bg-surface);
}

.nood-booking__inner {
  /* max-width removed — each layer controls its own width */
}


/* ── Step progress indicator ─────────────────────────────────── */

.nood-booking__progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--nood-space-7);
}

.nood-booking__progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nood-space-2);
  flex: 1;
}

.nood-booking__progress-line {
  width: 100%;
  height: var(--nood-bw-hairline);
  background: var(--nood-color-border);
  flex: 1;
  align-self: flex-start;
  margin-top: calc(var(--nood-space-4) + 1px); /* align with step number centre */
}

.nood-booking__progress-line--done {
  background: var(--nood-color-text-primary);
}

.nood-booking__progress-num {
  width: var(--nood-space-6);
  height: var(--nood-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--nood-bw-thin) solid var(--nood-color-border);
  font-size: var(--nood-fs-label);
  font-family: var(--nood-font-body);
  letter-spacing: var(--nood-tracking-normal);
  color: var(--nood-color-text-muted);
  flex-shrink: 0;
}

.nood-booking__progress-num--active {
  border-color: var(--nood-color-text-primary);
  color: var(--nood-color-text-primary);
}

.nood-booking__progress-num--done {
  background: var(--nood-color-text-primary);
  border-color: var(--nood-color-text-primary);
  color: var(--nood-color-text-inverse);
}

.nood-booking__progress-label {
  font-size: var(--nood-fs-micro);
  letter-spacing: var(--nood-tracking-label);
  text-transform: uppercase;
  color: var(--nood-color-text-muted);
  white-space: nowrap;
}

.nood-booking__progress-label--active {
  color: var(--nood-color-text-primary);
}


/* ── Step heading ────────────────────────────────────────────── */

.nood-booking__step-label {
  font-size: var(--nood-fs-label);
  letter-spacing: var(--nood-tracking-label);
  text-transform: uppercase;
  color: var(--nood-color-text-muted);
  margin-bottom: var(--nood-space-3);
}

.nood-booking__title {
  font-family: var(--nood-font-display);
  font-size: var(--nood-fs-display-sm);
  font-weight: var(--nood-fw-medium);
  line-height: var(--nood-lh-snug);
  letter-spacing: var(--nood-tracking-tight);
  color: var(--nood-color-text-primary);
  margin: 0 0 var(--nood-space-5);
}


/* ── Event summary (step 1) ──────────────────────────────────── */

.nood-booking__summary {
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
  padding-top: var(--nood-space-5);
  margin-bottom: var(--nood-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--nood-space-3);
}

.nood-booking__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--nood-space-4);
  font-size: var(--nood-fs-body);
  line-height: var(--nood-lh-base);
}

.nood-booking__summary-row span:first-child {
  color: var(--nood-color-text-secondary);
  flex-shrink: 0;
}

.nood-booking__summary-row span:last-child {
  color: var(--nood-color-text-primary);
  text-align: right;
}

.nood-booking__spots {
  font-size: var(--nood-fs-label);
  letter-spacing: var(--nood-tracking-label);
  text-transform: uppercase;
  color: var(--nood-color-text-secondary);
  padding-top: var(--nood-space-3);
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
}

.nood-booking__spots--low   { color: #b94040; }
.nood-booking__spots--full  { color: #b94040; }


/* ── Ticket selector (step 2) ────────────────────────────────── */

.nood-booking__tickets {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--nood-space-6);
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
}

.nood-booking__ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nood-space-4) 0;
  border-bottom: var(--nood-bw-hairline) solid var(--nood-color-border);
  gap: var(--nood-space-4);
}

.nood-booking__ticket-info {
  flex: 1;
}

.nood-booking__ticket-name {
  font-size: var(--nood-fs-body);
  color: var(--nood-color-text-primary);
}

.nood-booking__ticket-price {
  font-size: var(--nood-fs-small);
  color: var(--nood-color-text-secondary);
  margin-top: var(--nood-space-1);
}

.nood-booking__qty {
  display: flex;
  align-items: center;
  gap: var(--nood-space-3);
}

.nood-booking__qty-btn {
  width: var(--nood-space-7);
  height: var(--nood-space-7);
  border: var(--nood-bw-thin) solid var(--nood-color-border);
  background: none;
  cursor: pointer;
  font-size: var(--nood-fs-body);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nood-color-text-primary);
  transition: border-color var(--nood-dur-fast) var(--nood-ease-out);
}

.nood-booking__qty-btn:hover {
  border-color: var(--nood-color-text-primary);
}

.nood-booking__qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nood-booking__qty-value {
  font-size: var(--nood-fs-body);
  min-width: 1.5rem;
  text-align: center;
  color: var(--nood-color-text-primary);
}

/* Person count (no custom tickets) */
.nood-booking__persons {
  display: flex;
  align-items: center;
  gap: var(--nood-space-4);
  margin-bottom: var(--nood-space-6);
  padding: var(--nood-space-4) 0;
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
  border-bottom: var(--nood-bw-hairline) solid var(--nood-color-border);
}

.nood-booking__persons-label {
  flex: 1;
  font-size: var(--nood-fs-body);
  color: var(--nood-color-text-primary);
}


/* ── Customer detail fields (step 3) ─────────────────────────── */

.nood-booking__fields {
  display: flex;
  flex-direction: column;
  gap: var(--nood-space-4);
  margin-bottom: var(--nood-space-6);
}

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

.nood-booking__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nood-space-4);
}

.nood-booking__label {
  font-size: var(--nood-fs-label);
  letter-spacing: var(--nood-tracking-label);
  text-transform: uppercase;
  color: var(--nood-color-text-secondary);
}

.nood-booking__input {
  width: 100%;
  border: var(--nood-bw-thin) solid var(--nood-color-border);
  background: var(--nood-color-bg-page);
  padding: var(--nood-space-3) var(--nood-space-4);
  font-family: var(--nood-font-body);
  font-size: var(--nood-fs-body);
  color: var(--nood-color-text-primary);
  appearance: none;
  transition: border-color var(--nood-dur-fast) var(--nood-ease-out);
}

.nood-booking__input:focus {
  outline: none;
  border-color: var(--nood-color-text-primary);
}

.nood-booking__input.is-invalid {
  border-color: #b94040;
}

.nood-booking__field-hint {
  font-size: var(--nood-fs-small);
  color: var(--nood-color-text-muted);
}

.nood-booking__field-hint--error {
  color: #b94040;
}


/* ── Payment step ────────────────────────────────────────────── */

.nood-booking__payment-summary {
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
  border-bottom: var(--nood-bw-hairline) solid var(--nood-color-border);
  padding: var(--nood-space-5) 0;
  margin-bottom: var(--nood-space-6);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nood-booking__payment-label {
  font-size: var(--nood-fs-body);
  color: var(--nood-color-text-secondary);
}

.nood-booking__payment-total {
  font-family: var(--nood-font-display);
  font-size: var(--nood-fs-display-sm);
  font-weight: var(--nood-fw-medium);
  letter-spacing: var(--nood-tracking-tight);
  color: var(--nood-color-text-primary);
}

.nood-booking__payment-note {
  font-size: var(--nood-fs-small);
  color: var(--nood-color-text-secondary);
  margin-bottom: var(--nood-space-6);
  line-height: var(--nood-lh-relaxed);
}


/* ── Error message ───────────────────────────────────────────── */

.nood-booking__error {
  padding: var(--nood-space-3) var(--nood-space-4);
  border: var(--nood-bw-thin) solid #b94040;
  font-size: var(--nood-fs-small);
  color: #b94040;
  line-height: var(--nood-lh-relaxed);
  margin-bottom: var(--nood-space-5);
}


/* ── Fully booked state ──────────────────────────────────────── */

.nood-booking__full {
  padding: var(--nood-space-5) 0;
  border-top: var(--nood-bw-hairline) solid var(--nood-color-border);
  border-bottom: var(--nood-bw-hairline) solid var(--nood-color-border);
  margin-bottom: var(--nood-space-6);
}

.nood-booking__full-label {
  font-size: var(--nood-fs-label);
  letter-spacing: var(--nood-tracking-label);
  text-transform: uppercase;
  color: #b94040;
  margin-bottom: var(--nood-space-3);
}

.nood-booking__full-text {
  font-size: var(--nood-fs-body);
  color: var(--nood-color-text-secondary);
  line-height: var(--nood-lh-relaxed);
}


/* ── Confirmation screen (step 5) ────────────────────────────── */

.nood-booking__confirm {
  padding-top: var(--nood-space-6);
  border-top: var(--nood-bw-thin) solid var(--nood-color-text-primary);
}

.nood-booking__confirm-headline {
  font-family: var(--nood-font-display);
  font-size: var(--nood-fs-display-md);
  font-weight: var(--nood-fw-medium);
  letter-spacing: var(--nood-tracking-tight);
  line-height: var(--nood-lh-snug);
  color: var(--nood-color-text-primary);
  margin-bottom: var(--nood-space-6);
}

.nood-booking__confirm-detail {
  font-size: var(--nood-fs-body);
  color: var(--nood-color-text-secondary);
  line-height: var(--nood-lh-relaxed);
  margin-bottom: var(--nood-space-5);
}

.nood-booking__confirm-note {
  font-size: var(--nood-fs-small);
  color: var(--nood-color-text-muted);
  margin-bottom: var(--nood-space-7);
  line-height: var(--nood-lh-relaxed);
}


/* ── Action row ──────────────────────────────────────────────── */

/* Contain booking buttons (snippet #7 sets .nood-btn width:100% globally) */
.nood-booking__actions .nood-btn { width: auto; }

.nood-booking__actions {
  display: flex;
  align-items: center;
  gap: var(--nood-space-5);
  flex-wrap: wrap;
}

.nood-booking__back {
  font-size: var(--nood-fs-small);
  color: var(--nood-color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--nood-font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nood-booking__back:hover {
  color: var(--nood-color-text-primary);
}


/* ── Loading skeleton ────────────────────────────────────────── */

.nood-booking__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--nood-space-4);
}

.nood-booking__skeleton-line {
  height: 1rem;
  background: var(--nood-color-bg-sidebar);
  animation: nood-skeleton-pulse 1.4s ease-in-out infinite;
}

.nood-booking__skeleton-line--short { width: 40%; }
.nood-booking__skeleton-line--med   { width: 65%; }
.nood-booking__skeleton-line--long  { width: 100%; }
.nood-booking__skeleton-line--btn   { width: 10rem; height: 2.75rem; margin-top: var(--nood-space-3); }

@keyframes nood-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}


/* ── Layer 1: trigger ────────────────────────────────────────── */

.nood-booking__trigger {
  max-width: 36rem;
  padding: var(--nood-space-4) 0;
}


/* ── Layer 2: amber wipe reveal ──────────────────────────────── */

/* Curtain element — sits above everything, sweeps top→bottom on form open */
.nood-booking__wipe {
  position: absolute;
  inset: 0;
  background: var(--nood-color-accent-amber);
  transform: translateY(-101%);
  pointer-events: none;
  z-index: 10;
}

.nood-booking.is-form-open .nood-booking__wipe {
  animation: nood-wipe-through 0.8s var(--nood-ease-smooth) forwards;
}

@keyframes nood-wipe-through {
  0%   { transform: translateY(-101%); }
  40%  { transform: translateY(0);     }
  100% { transform: translateY(101%);  }
}

/* Centered form content */
.nood-booking__form-body {
  max-width: 32rem;
  margin: 0 auto;
}

/* Form body fades in after amber clears (0.8s × ~65% = 0.52s) */
.nood-booking.is-form-open .nood-booking__form-body {
  opacity: 0;
  animation: nood-form-appear 0.35s ease forwards 0.52s;
}

@keyframes nood-form-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Step transitions (Alpine x-transition classes) ─────────── */

.nood-step-enter {
  transition: opacity 220ms var(--nood-ease-out), transform 220ms var(--nood-ease-out);
}
.nood-step-enter-start {
  opacity: 0;
  transform: translateY(6px);
}
.nood-step-enter-end {
  opacity: 1;
  transform: translateY(0);
}

/* Confirmation rule animation — triggered when step 5 mounts */
.nood-booking__confirm-rule {
  display: block;
  width: 0;
  height: var(--nood-bw-thin);
  background: var(--nood-color-text-primary);
  margin-bottom: var(--nood-space-6);
  transition: width 600ms var(--nood-ease-out);
}
.nood-booking__confirm-rule.is-drawn {
  width: 100%;
}


/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nood-booking {
    padding-left: var(--nood-space-5);
    padding-right: var(--nood-space-5);
  }

  .nood-booking__field-row {
    grid-template-columns: 1fr;
  }

  .nood-booking__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .nood-booking__actions .nood-btn {
    width: 100%;
    justify-content: center;
  }
}


/* Square Web Payments card field */
.nood-booking__card-field {
	padding: var(--nood-space-3, 12px) var(--nood-space-4, 16px);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 2px;
	background: #fff;
	min-height: 52px;
}
.nood-booking__card-field.is-focus {
	border-color: #000;
}