/* Brand layer on top of Bootstrap 5 */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--brand-bg);
  color: #211A2E;
  min-height: 100vh;
}
h1, h2, h3, .event-title { font-family: 'Oswald', 'Inter', sans-serif; letter-spacing: .5px; }

.page { max-width: 640px; margin: 0 auto; padding: 28px 16px; }
.page-wide { max-width: 1100px; }

.card { border: none; border-radius: 18px; box-shadow: 0 12px 44px rgba(33, 26, 46, .10); }
.hero-img { width: 100%; display: block; }

.eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); font-weight: 600; }
.event-title { text-transform: uppercase; font-weight: 700; }

/* Brand buttons */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  background-image: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border: none;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}
.text-brand { color: var(--brand) !important; }

.detail-ic { color: var(--brand); font-size: 1.25rem; line-height: 1; }
.qr-img { width: 240px; height: 240px; max-width: 80%; }

.seat-pill {
  background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; font-weight: 600;
  display: inline-block;
}
.seat-pill.full { background: #fbeaea; color: #c0392b; }

.stat-card { background: var(--brand-soft); border-radius: 14px; }
.stat-num { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: var(--brand); font-weight: 700; line-height: 1.1; }

.badge-brand { background: var(--brand-soft); color: var(--brand); }

/* Date / Time / Venue panel */
.event-details {
  background: var(--brand-soft);
  border-radius: 16px;
  padding: 1.25rem .5rem;
}
.detail-cell { padding: .35rem 1rem; }
.detail-cell + .detail-cell { border-left: 1px solid rgba(33, 26, 46, .08); }
.detail-ic { color: var(--brand); font-size: 1.6rem; display: block; margin-bottom: .35rem; }
.detail-label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand); font-weight: 600; margin-bottom: .1rem;
}
.detail-val { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.detail-sub { font-size: .78rem; color: #6c757d; margin-top: .15rem; }
.dress-badge {
  display: inline-block; background: #fff; color: var(--brand);
  border: 1px solid rgba(142, 44, 102, .25); border-radius: 999px;
  padding: .45rem 1rem; font-size: .85rem;
}
@media (max-width: 767px) {
  .detail-cell + .detail-cell { border-left: none; border-top: 1px solid rgba(33, 26, 46, .08); margin-top: .25rem; padding-top: .85rem; }
}