/* MFTD 2027 - public badge packs page. Loaded on top of base.css (Badge::index()). */

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-bottom: var(--s-8);
  /* Stretch (the default, stated for clarity): every card in the row takes
     the height of the tallest one, so the CTA lands on the same line
     whether a pack has one feature or five. */
  align-items: stretch;
}
@media (max-width: 900px) { .badge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .badge-grid { grid-template-columns: 1fr; } }

.badge-card {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.badge-card:hover { box-shadow: var(--shadow-hover); }

/* The recommended/premium cards are distinguished by colour and border
   only - no vertical offset, so every card's top and bottom edge still
   line up in the grid row (the earlier translateY() skew is exactly what
   looked "misaligned"). */
.badge-card--recommande { border: 2px solid var(--c-accent); }
.badge-card--premium {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: #fff;
}
.badge-card--premium h3 { color: #fff; }

/* Features grow to fill the gap between the price and the button, so the
   button itself sits on the same baseline across every card. */
.badge-card__features { flex: 1; }
.badge-card > .btn { margin-top: auto; }

.badge-card__tag {
  position: absolute;
  top: -0.75rem;
  left: var(--s-5);
  background: var(--c-accent);
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
}

.badge-card h3 { font-size: var(--fs-h4); color: var(--c-primary); margin: 0; }

.badge-card__price { display: flex; flex-direction: column; }
.badge-card__original { text-decoration: line-through; color: var(--c-muted); font-size: var(--fs-small); }
.badge-card__current { font-family: var(--font-title); font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.badge-card__vat { font-size: var(--fs-tiny); color: var(--c-muted); }
.badge-card--premium .badge-card__vat { color: var(--c-accent-soft); }

.badge-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  font-size: var(--fs-small);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.badge-card__features li { padding-left: var(--s-5); position: relative; }
.badge-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-accent-text);
}
.badge-card--premium .badge-card__features li::before { color: var(--c-accent-soft); }

/* --- Comparison table: see base.css - shared with Exhibit/Sponsoring. ------ */

.badge-compare { padding-bottom: var(--section-y); }

/* --- Registration form: see base.css - shared with Exhibit's booking form. -- */

/* --- Confirmation page --------------------------------------------------------- */

.confirmation { max-width: var(--container-narrow); padding-bottom: var(--section-y); text-align: center; }

.confirmation__card {
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s-8) var(--s-6);
}

.confirmation__text { color: var(--c-muted); margin-bottom: var(--s-6); }

.confirmation__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-5);
  text-align: left;
  max-width: 26rem;
  margin: 0 auto var(--s-7);
  padding: var(--s-5);
  background: var(--c-surface);
  border-radius: var(--radius);
}
.confirmation__summary dt { color: var(--c-muted); font-size: var(--fs-small); }
.confirmation__summary dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; }