/*
 * Paid registration: package cards, quantity, coupon and total.
 * Loaded only when payments are enabled. Sits on the dark register panel,
 * so it uses the same cream-on-dark tokens as .em-register-5.
 */

.em-package-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.em-package-eyebrow {
  color: var(--fm-gold);
  margin-bottom: 0.1rem;
}

.em-package-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.em-package-card {
  position: relative;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(var(--fm-cream-alt-rgb), 0.22);
  border-radius: 6px;
  background: rgba(var(--fm-cream-alt-rgb), 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.em-package-card:hover {
  border-color: rgba(var(--fm-gold-rgb), 0.6);
}

.em-package-card.is-selected {
  border-color: var(--fm-gold);
  background: rgba(var(--fm-gold-rgb), 0.1);
}

.em-package-card.is-sold-out {
  cursor: not-allowed;
  opacity: 0.55;
}

.em-package-radio {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  border: 1px solid #766c4e;
  border-radius: 50%;
  background: transparent;
  cursor: inherit;
  position: relative;
}

.em-package-radio:checked {
  border-color: var(--fm-gold);
}

.em-package-radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--fm-gold);
}

.em-package-radio:focus-visible {
  outline: 2px solid rgba(var(--fm-gold-rgb), 0.5);
  outline-offset: 2px;
}

.em-package-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.em-package-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.em-package-title {
  color: var(--fm-cream-alt);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}

.em-package-price {
  color: var(--fm-gold);
  font-size: 1.15rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.em-package-desc {
  color: rgba(var(--fm-cream-alt-rgb), 0.7);
  font-size: 0.82rem;
  line-height: 1.5;
}

.em-package-badge {
  align-self: flex-start;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(var(--fm-gold-rgb), 0.6);
  border-radius: 999px;
  color: var(--fm-gold-soft);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.em-package-badge.is-sold-out {
  border-color: rgba(var(--fm-cream-alt-rgb), 0.4);
  color: rgba(var(--fm-cream-alt-rgb), 0.8);
}

.em-package-qty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.em-package-qty-label {
  color: rgba(var(--fm-cream-alt-rgb), 0.75);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.em-package-qty-select {
  min-width: 4.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(var(--fm-cream-alt-rgb), 0.3);
  border-radius: 4px;
  background: transparent;
  color: var(--fm-cream-alt);
}

.em-package-qty-select option {
  color: #2a2418;
}

.em-coupon-row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

.em-coupon-row .em-field-control {
  flex: 1;
  min-width: 0;
}

.em-coupon-input {
  text-transform: uppercase;
}

.em-coupon-input::placeholder {
  text-transform: none;
}

.em-coupon-apply {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--fm-gold);
  border-radius: 4px;
  background: transparent;
  color: var(--fm-gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.em-coupon-apply:hover:not(:disabled) {
  background: var(--fm-gold);
  color: var(--fm-green-panel);
}

.em-coupon-apply:disabled {
  opacity: 0.6;
  cursor: wait;
}

.em-coupon-message {
  display: none;
  margin-top: 6px;
  font-size: 0.78rem;
}

.em-coupon-message.show {
  display: block;
}

.em-coupon-message.is-ok {
  color: var(--fm-gold-soft);
}

.em-package-summary {
  margin: 0.2rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--fm-cream-alt-rgb), 0.2);
}

.em-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(var(--fm-cream-alt-rgb), 0.8);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.em-summary-row + .em-summary-row {
  margin-top: 0.3rem;
}

.em-summary-row dt {
  font-weight: 400;
}

.em-summary-row dd {
  margin: 0;
}

.em-summary-total {
  color: var(--fm-cream-alt);
  font-size: 1rem;
  font-weight: 600;
}

.em-summary-total dd {
  color: var(--fm-gold);
}

.em-summary-note {
  margin-top: 0.35rem;
  color: rgba(var(--fm-cream-alt-rgb), 0.55);
  font-size: 0.72rem;
}

.em-package-all-sold-out {
  color: var(--fm-gold-soft);
  font-size: 0.85rem;
}

/* Registration outcome page (success / cancelled / failed) */
.em-outcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border: 1.5px solid var(--fm-gold);
  border-radius: 50%;
  color: var(--fm-gold);
  font-size: 1.5rem;
}

.em-outcome-icon.is-failed {
  border-color: rgba(var(--fm-cream-alt-rgb), 0.5);
  color: var(--fm-cream-alt);
}

#registration-outcome.em-about-1 {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.em-outcome-ref {
  margin-bottom: 0.35rem;
  color: rgba(var(--fm-cream-alt-rgb), 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#registration-outcome .em-about-2 {
  user-select: all;
}

.em-outcome-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 1rem;
  border: 2px solid rgba(var(--fm-gold-rgb), 0.25);
  border-top-color: var(--fm-gold);
  border-radius: 50%;
  animation: em-outcome-spin 0.9s linear infinite;
}

@keyframes em-outcome-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .em-outcome-spinner { animation: none; }
}

/* Copy and lines sit on the dark page, so use the cream text like the
   login/register cards (.em-auth-shell-copy) */
#registration-outcome .em-auth-shell p {
  color: rgba(var(--fm-cream-alt-rgb), 0.75);
  font-size: 0.95rem;
  line-height: 1.65;
}

#registration-outcome .em-auth-shell p strong {
  color: var(--fm-cream-text);
  font-weight: 600;
  word-break: break-word;
}

#registration-outcome .em-auth-shell p.small {
  margin-top: -0.5rem;
  color: rgba(var(--fm-cream-alt-rgb), 0.55);
  font-size: 0.8rem;
}

.em-outcome-lines {
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(var(--fm-cream-alt-rgb), 0.2);
}

.em-outcome-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(var(--fm-cream-alt-rgb), 0.2);
  color: rgba(var(--fm-cream-alt-rgb), 0.8);
  font-size: 0.9rem;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.em-outcome-event {
  display: block;
  margin-top: 2px;
  color: rgba(var(--fm-cream-alt-rgb), 0.55);
  font-size: 0.78rem;
  text-transform: none;
}

.em-outcome-lines li span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.em-outcome-lines li.is-total {
  color: var(--fm-cream-text);
  font-size: 1.05rem;
  font-weight: 600;
}

.em-outcome-lines li.is-total span:last-child {
  color: var(--fm-gold);
}

.em-outcome-pass-link {
  color: var(--fm-gold);
  font-weight: 600;
  text-decoration: none;
}

.em-outcome-pass-link:hover,
.em-outcome-pass-link:focus {
  color: var(--fm-gold);
  text-decoration: underline;
}

.em-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Guest pass page (frontend/registration/pass) */
.em-pass-qr {
  display: inline-block;
  margin: 1.25rem auto 1rem;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  line-height: 0;
}

.em-pass-qr img {
  width: min(240px, 60vw);
  height: auto;
  image-rendering: pixelated;
}

/* Beats .em-outcome-lines li span:last-child (nowrap, no shrink) so long
   values wrap instead of widening the card on phones */
.em-outcome-lines li span.em-pass-value:last-child {
  flex-shrink: 1;
  min-width: 0;
  color: var(--fm-cream-text);
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.em-pass-alert {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(var(--fm-gold-rgb), 0.5);
  border-radius: 8px;
}

.em-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.em-wallet-btn:hover,
.em-wallet-btn:focus-visible {
  border-color: var(--fm-gold);
  color: #fff;
}

.em-wallet-btn .bi {
  font-size: 1.15rem;
}

/* Light variant: the cream registration card (.fm-card) on content pages */
.em-package-picker--light .em-package-card {
  border-color: rgba(var(--fm-green-link-rgb), 0.18);
  background: var(--fm-cream-input);
}
.em-package-picker--light .em-package-card:hover {
  border-color: rgba(var(--fm-gold-rgb), 0.7);
}
.em-package-picker--light .em-package-card.is-selected {
  border-color: var(--fm-gold);
  background: rgba(var(--fm-gold-rgb), 0.14);
}
.em-package-picker--light .em-package-title,
.em-package-picker--light .em-summary-total {
  color: var(--fm-green-link);
}
.em-package-picker--light .em-package-price,
.em-package-picker--light .em-summary-total dd {
  color: var(--fm-gold-dark);
}
.em-package-picker--light .em-package-desc,
.em-package-picker--light .em-summary-row,
.em-package-picker--light .em-package-qty-label {
  color: rgba(var(--fm-green-link-rgb), 0.75);
}
.em-package-picker--light .em-summary-note {
  color: rgba(var(--fm-green-link-rgb), 0.55);
}
.em-package-picker--light .em-package-badge {
  color: var(--fm-gold-dark);
}
.em-package-picker--light .em-package-badge.is-sold-out {
  border-color: rgba(var(--fm-green-link-rgb), 0.35);
  color: rgba(var(--fm-green-link-rgb), 0.7);
}
.em-package-picker--light .em-package-radio {
  border-color: rgba(var(--fm-green-link-rgb), 0.45);
}
.em-package-picker--light .em-package-qty-select {
  border-color: rgba(var(--fm-green-link-rgb), 0.25);
  background: var(--fm-cream-input);
  color: var(--fm-green-link);
}
.em-package-picker--light .em-coupon-row {
  align-items: stretch;
}
.em-package-picker--light .em-coupon-apply {
  color: var(--fm-gold-dark);
  border-color: var(--fm-gold-dark);
}
.em-package-picker--light .em-coupon-apply:hover:not(:disabled) {
  background: var(--fm-gold-dark);
  color: #fff;
}
.em-package-picker--light .em-coupon-message.is-ok {
  color: var(--fm-gold-dark);
}
.em-package-picker--light .em-package-summary {
  border-top-color: rgba(var(--fm-green-link-rgb), 0.15);
}
.em-package-picker--light .em-package-eyebrow {
  color: var(--fm-gold-dark);
}
.em-package-picker--light .em-package-all-sold-out {
  color: var(--fm-gold-dark);
}
.fm-card .em-package-picker {
  margin: 0.35rem 0 0.6rem;
}

/* "Was" price, saving badge and summary breakdown */
.em-package-prices {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}
.em-package-was {
  color: rgba(var(--fm-cream-alt-rgb), 0.8);
  font-size: 1rem;
  text-decoration: line-through;
  text-decoration-color: var(--fm-gold);
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}
.em-package-badge.is-saving {
  border-color: var(--fm-gold);
  background: rgba(var(--fm-gold-rgb), 0.15);
}
.em-summary-discount dd {
  color: var(--fm-gold-soft);
}
/* Saving on the "was" prices: its own note, not a line in the breakdown (the total already includes it) */
.em-summary-saving {
  margin-top: 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--fm-gold-rgb), 0.45);
  border-radius: 6px;
  background: rgba(var(--fm-gold-rgb), 0.12);
  color: var(--fm-gold-soft);
  font-size: 0.82rem;
  text-align: center;
}
.em-summary-saving[hidden] {
  display: none;
}
.em-summary-vat {
  font-size: 0.75rem;
  color: rgba(var(--fm-cream-alt-rgb), 0.55);
}
.em-summary-total {
  margin-top: 0.45rem !important;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(var(--fm-cream-alt-rgb), 0.15);
}
.em-package-picker--light .em-summary-vat {
  color: rgba(var(--fm-green-link-rgb), 0.5);
}
.em-package-picker--light .em-package-was {
  color: rgba(var(--fm-green-link-rgb), 0.75);
}
.em-package-picker--light .em-summary-discount dd {
  color: var(--fm-gold-dark);
}
.em-package-picker--light .em-summary-saving {
  border-color: rgba(var(--fm-green-link-rgb), 0.2);
  background: rgba(var(--fm-gold-rgb), 0.12);
  color: var(--fm-gold-dark);
}
.em-package-picker--light .em-summary-total {
  border-top-color: rgba(var(--fm-green-link-rgb), 0.15);
}

/* Required Terms & Conditions box */
.em-terms-field .em-register-6 {
  margin: 0.2rem 0 0;
}
.em-terms-field a {
  color: var(--fm-gold);
  text-decoration: underline;
}
.em-package-picker--light .em-terms-field a {
  color: var(--fm-gold-dark);
}

/* Several packages per booking: quantity stepper on each card */
.em-package-card[data-package-card] {
  cursor: default;
}

.em-package-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.em-package-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.em-stepper {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  border: 1px solid rgba(var(--fm-cream-alt-rgb), 0.3);
  border-radius: 999px;
}

.em-stepper-btn {
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fm-gold);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.em-stepper-btn:hover:not(:disabled) {
  background: rgba(var(--fm-gold-rgb), 0.15);
}

.em-stepper-btn:focus-visible {
  outline: 2px solid rgba(var(--fm-gold-rgb), 0.6);
  outline-offset: 1px;
}

.em-stepper-btn:disabled {
  color: rgba(var(--fm-cream-alt-rgb), 0.3);
  cursor: not-allowed;
}

.em-stepper-qty {
  min-width: 1.8rem;
  color: var(--fm-cream-alt);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Guest details: one accordion per package, directly under its card */
.em-package-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.em-guests {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.6rem 0 1rem;
}

.em-guests[hidden] {
  display: none;
}

.em-guests-note {
  margin: 0;
  color: rgba(var(--fm-cream-alt-rgb), 0.7);
  font-size: 0.82rem;
  line-height: 1.5;
}

.em-guests-note[hidden] {
  display: none;
}

.em-guest-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.em-guest {
  padding: 1rem 1.15rem;
  border: 1px solid rgba(var(--fm-cream-alt-rgb), 0.18);
  border-radius: 6px;
}

.em-guest-head {
  display: flex;
  align-items: center;
  gap: 0.25rem 0.75rem;
  cursor: pointer;
  list-style: none;
}

.em-guest-head::-webkit-details-marker {
  display: none;
}

.em-guest-head::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  order: 2;
  margin-left: 0.5rem;
  border-right: 1.5px solid var(--fm-gold);
  border-bottom: 1.5px solid var(--fm-gold);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.em-guest[open] > .em-guest-head {
  margin-bottom: 0.9rem;
}

.em-guest[open] > .em-guest-head::after {
  transform: rotate(-135deg);
}

.em-guest-number {
  color: var(--fm-gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.em-guest-name {
  min-width: 0;
  overflow: hidden;
  color: var(--fm-cream-alt);
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-guest-package {
  order: 1;
  margin-left: auto;
  color: rgba(var(--fm-cream-alt-rgb), 0.6);
  font-size: 0.75rem;
  text-align: right;
}

.em-guest-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.em-guest-field {
  min-width: 0;
}

.em-guest-field:first-child {
  grid-column: 1 / -1;
}

/* Below 768px, the 576-767px range in particular squeezes this half-width
   column too tight for the mobile field's placeholder (measured overflow
   even after shortening the text) before the container grows enough at
   768px+ to pair Email/Mobile side by side comfortably. Stack through the
   whole phone/small-tablet range instead of chasing an ever-shorter
   placeholder. */
@media (max-width: 767.98px) {
  .em-guest-fields {
    grid-template-columns: 1fr;
  }
}

/* Light variant (cream card) */
.em-package-picker--light .em-stepper {
  border-color: rgba(var(--fm-green-link-rgb), 0.3);
}
.em-package-picker--light .em-stepper-btn {
  color: var(--fm-green-link);
}
.em-package-picker--light .em-stepper-btn:disabled {
  color: rgba(var(--fm-green-link-rgb), 0.3);
}
.em-package-picker--light .em-stepper-qty {
  color: var(--fm-green-link);
}

.em-package-picker--light .em-guests-note,
.em-package-picker--light .em-guest-package {
  color: rgba(var(--fm-green-link-rgb), 0.7);
}
.em-package-picker--light .em-guest {
  border-color: rgba(var(--fm-green-link-rgb), 0.18);
  background: var(--fm-cream-input);
}
.em-package-picker--light .em-guest-name {
  color: var(--fm-green-link);
}
.em-package-picker--light .em-guest-head::after {
  border-color: var(--fm-gold-dark, #a8832e);
}
.em-package-picker--light .em-guest-number {
  color: var(--fm-gold-dark, #a8832e);
}

/* Time-limited offer: "Early Bird price ends 19 October" */
.em-package-offer-ends {
  color: var(--fm-gold-soft);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.em-package-picker--light .em-package-offer-ends {
  color: var(--fm-gold-dark, #a8832e);
}