/* ═══════════════════════════════════════════════════════════
   registration-override.css
   
   Single source of truth for all visual styles on public 
   registration pages. Loads FIRST in <head>, before public 
   template <style> and before inner template <style>.
   
   Rules:
   - This file: colors, typography, borders, shadows, focus,
     buttons, inputs, cards — everything visual.
   - Public template <style>: layout only (header, container, 
     sidebar, iframe, spinner structure).
   - Inner template <style>: page-specific layout only 
     (e.g. ticket-card, section-title). NO colors, NO buttons,
     NO form styles.
   ═══════════════════════════════════════════════════════════ */


/* ─── PAGE ─── */
body {
  background: #f8f9fc;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

/* Bottom breathing room so cards don't touch viewport edge */
body > .container {
  padding-bottom: 3rem;
}


/* ─── TYPE SCALE ───
   5 sizes, 3 weights, 3 colors. Everything maps to these.
   ─────────────────────────────────────────────────────── */
:root {
  --reg-text-xs: 12px;   /* captions, badges, micro labels */
  --reg-text-sm: 13px;   /* labels, descriptions, secondary text */
  --reg-text-base: 15px; /* body, inputs, buttons, form values */
  --reg-text-lg: 18px;   /* prices, ticket names (prominent) */
  --reg-text-xl: 27px;   /* event title (hero only) */

  --reg-weight-normal: 400;
  --reg-weight-medium: 500;
  --reg-weight-semibold: 600;

  --reg-color-primary: #1a1a1a;   /* headings, prices, primary text */
  --reg-color-secondary: #4b5563; /* labels, descriptions, muted text */
  --reg-color-tertiary: #9ca3af;  /* placeholders, hints, disabled */
  --reg-color-accent: #2563eb;    /* schedule accent: recurring first-charge line */

  --reg-border: #e5e7eb;
  --reg-border-hover: #d1d5db;
  --reg-surface: #f8f9fa;
  --reg-radius: 12px;
  --reg-radius-sm: 8px;
  --reg-radius-input: 6px;
  --reg-donation-toggle-bg: #e5e7eb;
  --reg-donation-toggle-indicator: #ffffff;
  --reg-donation-muted: #6b7280;
  --reg-frequency-active-border: #1a1a1a;
  --reg-frequency-active-bg: #ffffff;
  --reg-frequency-active-color: #1a1a1a;
  --reg-order-row-bg: #ffffff;
  --reg-order-row-radius: 8px;
  --reg-order-row-padding-y: 3px;
  --reg-order-row-padding-x: 2px;
}

/* Section micro-labels (REGISTRANT, PAYMENT INFO, etc.) */
.reg-section-label {
  font-size: var(--reg-text-xs);
  font-weight: var(--reg-weight-semibold);
  color: var(--reg-color-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  margin-top: 0.25rem;
}

.control-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: rgb(75, 85, 99);
  display: block;
  margin-bottom: 3px;
  overflow-wrap: break-word;
}


/* ─── SIDEBAR EVENT HERO — 2:1 aspect ratio ─── */
.reg-hero-image {
  position: relative;
  width: 100%;
  padding-top: 50%; /* 2:1 aspect ratio */
  overflow: hidden;
  background: #1e293b;
  border-radius: var(--reg-radius) var(--reg-radius) 0 0;
}

.reg-hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobile: hero + white info panel (continuous card with logo on top)

   overflow is visible, not hidden: this header holds an action (add to calendar)
   whose menu must escape it. Clipping here made the header Popper's boundary, so
   the menu flipped up over the event's own title and date with room to spare
   below. The children round themselves instead, which is the same job done one
   level down: the hero takes the top corners, the info panel the bottom. */
.reg-mobile-event-header {
  overflow: visible;
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: rgba(0, 0, 0, 0.06) 0 1px 3px;
}

.reg-mobile-event-header .reg-hero-image {
  border-radius: 12px 12px 0 0;
}

/* Carries the header's white: the header itself has no background, so without
   this radius the panel's square corners would sit outside the rounded shadow. */
.reg-mobile-event-header__info {
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  padding: 12px 16px;
}

.reg-mobile-event-header__title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.reg-mobile-event-header__meta {
  font-size: 13px;
  line-height: 18px;
  color: #4b5563;
}

.reg-mobile-event-header__meta + .reg-mobile-event-header__meta {
  margin-top: 2px;
}

/* Public layout: flash success (optional successTitle + success body) */
.reg-flash-success {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.reg-flash-success__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reg-flash-success__check {
  display: block;
}

.reg-flash-success__text {
  min-width: 0;
}

.reg-flash-success__title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.reg-flash-success__body {
  font-size: 14px;
  line-height: 20px;
  color: #6b7280;
  margin: 0;
}

/* Mobile: hero only (org-centered checkout, no title block) */
.reg-hero-image--mobile-hero-only {
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: rgba(0, 0, 0, 0.06) 0 1px 3px;
}

/* Full-bleed mobile hero on every public page: the hero is always the first element
   in the container, so break out of the container padding to go edge-to-edge and pull
   flush to the top (cancel the container's pt-4). Covers both mobile hero variants. */
@media (max-width: 767.98px) {
  .reg-mobile-event-header,
  .reg-hero-image--mobile-hero-only {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: -1.5rem;
    margin-bottom: 1.25rem;
  }
}

/* Event header card: sidebar checkout or stacked centered layout */
/* Visible, not hidden: the card holds an action (add to calendar) whose menu has
   to escape it. Clipping made the card Popper's boundary, so the menu flipped up
   over the card's own title and date despite ~485px of free space below. Nothing
   is lost by removing it: .reg-hero-image already sets its own overflow:hidden and
   its own top radius, and the .card's background paints the bottom corners. */
.reg-event-info-card {
  overflow: visible;
}

.reg-event-info-card .reg-hero-image {
  border-radius: var(--reg-radius) var(--reg-radius) 0 0;
}

.reg-event-info-card .card-body.reg-event-info-card__body {
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem 2rem;
}

.reg-event-info-card__meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: #4b5563;
  margin-bottom: 4px;
}

.reg-event-info-card__meta-row--venue {
  margin-bottom: 0;
}

.reg-event-info-card__meta-svg {
  flex-shrink: 0;
  color: #9ca3af;
}

/* The same glyph inside a button: follow the button's own colour instead of the
   muted meta grey, so it tracks rest / hover / open states. */
.btn .reg-event-info-card__meta-svg {
  color: inherit;
}

/* An action on the event's own date/venue, at the foot of the info block. Separated
   from the meta rows above rather than crowding them; the rule reads as the card's
   own footer. Mirrored in the mobile header, which stacks the same block. */
.reg-event-info-card__action {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.reg-event-info-card__title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 6px 0;
}

.reg-event-info-card__venue-link,
.reg-event-info-card__venue-text {
  font-size: 13px;
  line-height: 18px;
  color: #4b5563;
  min-width: 0;
}

.reg-event-info-card__venue-link {
  text-decoration: none;
}

.reg-event-info-card__venue-link:hover {
  color: #374151;
  text-decoration: underline;
}

/* ─── BIG-HERO BLUR BACKDROP ───
   Applied ONLY on big-hero layouts (topBannerTwoColumn / centeredOrgCheckout):
   public.scala.html adds .hero-blur to .newcontainer and passes the banner URL via
   the --hero-blur-img custom property. A blurred, scaled copy of the banner fills the
   band behind the sharp centered logo. .hero-blur--light is set by a luminance probe
   so light artwork (e.g. a logo on white) isn't darkened into mud. Layouts that don't
   render .newcontainer.hero-blur are unaffected. */
.newcontainer.hero-blur {
  position: relative;
  overflow: hidden;
}
.newcontainer.hero-blur::before {
  content: "";
  position: absolute;
  inset: -12%;
  background-image: var(--hero-blur-img, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.18);
  z-index: 0;
  filter: blur(46px) saturate(1.1) brightness(.74);
}
.newcontainer.hero-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(10, 12, 20, 0) 38%, rgba(10, 12, 20, .5) 100%);
}
.newcontainer.hero-blur .indeks {
  position: relative;
  z-index: 1;
  border-radius: 0;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .45);
}
/* Light artwork: keep the backdrop light, separate the logo with a hairline + soft shadow */
.newcontainer.hero-blur.hero-blur--light::before {
  filter: blur(46px) saturate(1.02) brightness(1.04);
}
/* Replace the dark vignette with a frosted white veil so light artwork stays bright */
.newcontainer.hero-blur.hero-blur--light::after {
  background: radial-gradient(120% 120% at 50% 40%, rgba(255, 255, 255, .5) 28%, rgba(255, 255, 255, .78) 100%);
}
.newcontainer.hero-blur.hero-blur--light .indeks {
  box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
  /*border: 1px solid rgba(16, 24, 40, .06);*/
}

/* Success page: full-width hero, image capped at 940px */
.reg-hero-image--inline {
  display: flex;
  justify-content: center;
  padding-top: 0;
  border-radius: var(--reg-radius) var(--reg-radius) 0 0;
}

.reg-hero-image--inline .reg-hero-image-inner {
  width: 100%;
  max-width: 940px;
  position: relative;
}

.reg-hero-image--inline .reg-hero-image-inner::before {
  content: '';
  display: block;
  padding-top: 50%; /* 2:1 */
}

.reg-hero-image--inline img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ─── TWO-COLUMN PAGE TITLE (above main + sidebar; no steps widget) ─── */
.reg-two-col-title-bar {
  margin-bottom: 24px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reg-two-col-title-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.reg-two-col-title-bar__heading {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.reg-two-col-title-bar__actions {
  flex-shrink: 0;
}

a.reg-two-col-title-bar__btn,
button.reg-two-col-title-bar__btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  box-sizing: border-box;
}

a.reg-two-col-title-bar__btn:hover,
button.reg-two-col-title-bar__btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
}

a.reg-two-col-title-bar__btn:focus-visible,
button.reg-two-col-title-bar__btn:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 2px;
}


/* ─── CONSISTENT FOOTER BAR (all checkout steps) ─── */
.reg-footer-bar {
  background: #fff;
  border-radius: var(--reg-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 1.25rem 1.75rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reg-footer-bar .btn-dark,
.reg-footer-bar .btn-primary,
.reg-footer-bar .btn-success {
  padding: 0.75rem 2rem;
  font-size: 15px;
  font-weight: 600;
  margin-left: auto;
}

.reg-footer-bar .btn-outline-secondary,
.reg-footer-bar .btn-light {
  padding: 0.75rem 1.5rem;
  font-size: 15px;
}

.bar-button {
  font-size: 15px;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 10px;
  transition: all 0.2s ease;
}


/* ─── ATTENDEE CARD (Details step) ─── */
.reg-attendee-card {
  padding: 1.5rem 1.75rem;
}

.reg-attendee-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  flex-shrink: 0;
}

/* ─── LABELS ─── */
label {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.125rem;
  overflow-wrap: break-word;
}

.input-group-btn > button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-group.required > label:after,
label.required:after {
  content: " *";
  color: #9ca3af;
}

/* Information block (CONTENT) questions on public registration forms */
.vendor-info-block__title {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 15px;
  margin-bottom: 6px;
}
.vendor-info-block__body {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.55;
}
.vendor-info-block--note {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
}
.vendor-info-block--important {
  background: #eaf4fb;
  border: 1px solid #cfe6f7;
  border-radius: 8px;
  padding: 14px 16px;
}
.vendor-info-block--important .vendor-info-block__title {
  color: #1d90d2;
}


/* ─── FORM CONTROLS ─── */
.form-control {
  height: 44px;
  font-size: 15px;
  color: #1a1a1a;
  border-color: #e5e7eb;
  border-radius: 6px;
  padding: 0.375rem 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: #9ca3af;
}

.form-control:hover {
  border-color: #d1d5db;
}

.form-control.is-invalid {
  border-color: #dc2626;
}

.form-control:disabled {
  background: #f3f4f6;
  color: #9ca3af;
}

/* Image-question file picker. The raw native button fills the field edge-to-edge
   (and Firefox top-aligns it), which looks heavy next to the padded text fields.
   Center it with flex and style the native button as a compact inset button so the
   field reads like the others. */
.file-input {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: 3px 14px;
  cursor: pointer;
}
.file-input::file-selector-button {
  margin: 2px 12px 0px -4px;
  padding: 4px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #4b5563;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.file-input::file-selector-button:hover {
  background: #f3f4f6;
}

.invalid-feedback {
  font-size: 12px;
  color: #dc2626;
}

.form-group {
  margin-bottom: 1.25rem;
}

textarea.form-control {
  height: auto;
  min-height: 100px;
}


/* ─── SELECTS ─── */
.form-select,
.custom-select,
select.form-control {
  height: 44px;
  font-size: 15px;
  color: #1a1a1a;
  border-color: #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select:hover,
.custom-select:hover,
select.form-control:hover {
  border-color: #d1d5db;
}

/* Copy-from: micro label + select (gray = no source yet; white + label = confirmed) */
.copy-from-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(4px);
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out,
    max-height 150ms ease-out,
    margin-bottom 150ms ease-out;
  pointer-events: none;
}

.copy-from-label.visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 2rem;
  margin-bottom: 4px;
}

select.form-control.copy-from-select {
  cursor: pointer;
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 13px;
  border-color: var(--bs-border-color);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

select.form-control.copy-from-select.has-value {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}


/* ─── FOCUS & SHADOWS ─── */
.form-control:focus,
.form-select:focus,
.custom-select:focus,
select.form-control:focus,
textarea:focus,
input:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  outline: none;
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  border-color: #9ca3af;
}


/* ─── CHECKBOXES ─── */
.form-check-input:checked {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}


/* ─── BUTTONS: base ─── */
.btn {
  border-radius: 10px;
  transition: all 0.2s ease;
}

/* ─── BUTTONS: primary / success / dark ─── */
.btn-success,
.btn-primary,
.btn-dark {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  box-shadow: none;
}

.btn-success:hover,
.btn-primary:hover,
.btn-dark:hover {
  background-color: #333333;
  border-color: #333333;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-success:active,
.btn-success:focus:active,
.btn-primary:active,
.btn-primary:focus:active,
.btn-dark:active,
.btn-dark:focus:active {
  background-color: #000000;
  border-color: #000000;
  color: #fff;
  transform: translateY(0);
  box-shadow: none;
}

.btn-success:disabled,
.btn-primary:disabled,
.btn-dark:disabled {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  opacity: 0.4;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ─── BUTTONS: outline secondary (back, utility) ─── */
.btn-outline-secondary {
  font-weight: 500;
  color: #4b5563;
  border-color: #d1d5db;
  background: #fff;
}

.btn-outline-secondary:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #4b5563;
}

/* Pressed, and held while a dropdown it triggers is open. Without this Bootstrap
   fills the button with its stock $secondary (#6c757d), a grey that appears
   nowhere else in this palette. Stay in the ramp and keep the outline shape. */
.btn-outline-secondary:active,
.btn-outline-secondary.show,
.btn-outline-secondary:first-child:active {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  color: #1a1a1a;
}

/* ─── BUTTONS: outline danger ─── */
.btn-outline-danger {
  color: #dc2626;
  border-color: #dc2626;
}

.btn-outline-danger:hover {
  background-color: #fef2f2;
  border-color: #dc2626;
  color: #b91c1c;
}

/* ─── BUTTONS: light (back) ─── */
.btn-light {
  font-weight: 500;
  color: #4b5563;
  border-color: #e5e7eb;
  background: #fff;
  align-self: center;
}

.btn-light:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
  color: #4b5563;
}

/* ─── BUTTONS: focus (all variants) ─── */
.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  outline: none;
}

.btn:active {
  box-shadow: none;
}

.btn-close:focus,
.btn-close:focus-visible {
  box-shadow: none;
}

/* ─── BUTTONS: large form actions (scoped to footer) ─── */
.reg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.checkout-footer.reg-footer .btn-primary,
.checkout-footer.reg-footer .btn-success,
.checkout-footer.reg-footer .btn-dark {
  padding: 0.75rem 2rem;
  font-size: 15px;
  font-weight: 600;
  margin-left: auto;
}

.reg-footer .btn-primary,
.reg-footer .btn-success {
  padding: 0.75rem 2rem;
  font-size: 15px;
  font-weight: 600;
  margin-left: auto;
}

.reg-footer .btn-dark {
  padding: 0.75rem 2rem;
  font-size: 15px;
  font-weight: 600;
  margin-left: auto;
}

.reg-footer .btn-outline-secondary,
.reg-footer .btn-light {
  padding: 0.75rem 1.5rem;
  font-size: 15px;
}

/*
 * Fixed bottom checkout bar uses Bootstrap d-lg-none — only rendered below 992px.
 * In-card reg-footer uses d-none d-lg-flex so narrow main columns (tablet) use this bar too.
 */
.mobile-bottom-bar .checkout-footer {
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.mobile-bottom-bar .btn-back-desktop {
  display: none !important;
}

/* Back control: ~48px minimum touch target */
.mobile-bottom-bar a.btn-back-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0.625rem 1.5rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-bottom-bar a.btn-back-mobile:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--bs-secondary-color) !important;
}

.mobile-bottom-bar a.btn-back-mobile:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 2px;
}

.mobile-bottom-bar a.btn-back-mobile:active {
  background-color: rgba(0, 0, 0, 0.08);
}

/* Hidden back (e.g. first registration step): remove from layout — no reserved space */
.mobile-bottom-bar .btn-back-mobile--hidden {
  display: none !important;
}

.mobile-bottom-bar .btn-back-mobile--spacer {
  visibility: hidden;
  pointer-events: none;
}

.mobile-bottom-bar .btn-back-mobile--spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0.625rem 1.5rem;
}

/* Primary CTA: inner row → spacer | label | lock */
.reg-checkout-cta .reg-cta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}

.reg-checkout-cta .reg-btn-label {
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
}

.reg-checkout-cta .reg-cta-spacer,
.reg-checkout-cta .reg-cta-lock {
  flex: 0 0 16px;
  width: 16px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.reg-checkout-cta .reg-cta-spacer {
  visibility: hidden;
}

.reg-checkout-cta .reg-cta-lock {
  opacity: 0.7;
}

/* Desktop payment CTA: hold width when loading spinner replaces label (public.scala .btn.loading is 106px) */
@media (min-width: 992px) {
  .reg-checkout-cta:not(.w-100) {
    min-width: 277px;
  }

  .btn.reg-checkout-cta:not(.w-100).loading {
    min-width: 277px;
  }
}

.reg-checkout-cta.loading {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.reg-checkout-cta.loading .spinner-border {
  margin: 0;
  vertical-align: middle;
}

.mobile-bottom-bar button[type="submit"].loading {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-bottom-bar .checkout-cta-btn.reg-cta-primary {
  width: 100%;
  min-height: 48px;
}


/* ─── CARDS ─── */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card-body {
  padding: 2rem;
}

/* ─── ORDER SUMMARY ─── */
.order-side-panel {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background-color: #fff;
  padding: 2rem;
}


/* ─── VENUE LINK ─── */
.reg-venue-link,
.reg-venue-link a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

.reg-venue-link a:hover {
  color: #6b7280;
  text-decoration: underline;
}

.quantity-stepper .form-control {
  height: auto;
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

/* ─── SELECT TICKETS — quantity stepper (integrated selectTickets) ─── */
.quantity-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.quantity-stepper .qty-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: #fff;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #212529;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  touch-action: manipulation;
}

.quantity-stepper .qty-btn:hover:not(:disabled):not(.is-disabled) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.quantity-stepper .qty-btn:active:not(:disabled):not(.is-disabled) {
  background: #f8f9fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: translateY(1px);
}

.quantity-stepper .qty-btn:disabled,
.quantity-stepper .qty-btn.is-disabled {
  color: #adb5bd;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.45;
  box-shadow: none;
  background: #f8f9fa;
}

.quantity-stepper .qty-select {
  min-width: 52px;
  width: auto;
  text-align: center;
  text-align-last: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #212529;
  padding: 4px 8px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.quantity-stepper .form-group {
  margin: 0;
}

@media (min-width: 768px) {
  .quantity-stepper .qty-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 1.1rem;
  }
}

/* ─── SELECT TICKETS — ticket pricing card ─── */
.reg-ticket-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
}

.ticket-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #6c757d;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.ticket-card-price-row {
  min-width: 0;
}

.ticket-discount-badge {
  display: inline-block;
  font-weight: 600;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 600;
  color: rgb(22, 101, 52);
  background: rgb(220, 252, 231);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 4px;
}

.ticket-price-state--a,
.ticket-price-state--b {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.ticket-price-states {
  position: relative;
  min-height: 1.5rem;
}

.ticket-savings-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  background: #ecfdf5;
  color: rgb(22, 101, 52);
  font-size: 13px;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  opacity: 1;
  transform: translateY(0);
  max-height: 6rem;
  overflow: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}

.ticket-savings-bar--collapsed {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.ticket-savings-bar__icon {
  flex-shrink: 0;
  color: #059669;
}

.ticket-fee-suffix {
  font-size: 12px;
  color: #86868b;
  white-space: nowrap;
  font-weight: 400;
}

/* ─── ANIMATIONS ─── */
@keyframes regFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  animation: regFadeUp 0.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

/* ─── MOBILE CHECKBOX / RADIO SIZING ─── */
.form-check-input {
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.05em;
}
.form-check-label {
  margin-left: 0.5em;
}

/*
@media (max-width: 767.98px) {
  .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.1em;
  }
}

@media (max-width: 575.98px) {
  .form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0.05em;
  }
}*/

/* ─── MOBILE FORM ADJUSTMENTS ─── */

/* Inputs and selects — slightly taller on phone for fat fingers */
@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .custom-select,
  select.form-control {
    height: 48px;
    font-size: 16px; /* CRITICAL: prevents iOS zoom on focus */
  }

  /* Labels — slightly larger for readability */
  label {
    font-size: 14px;
  }

  /* Form group spacing — more air between fields on small screens */
  .form-group {
    margin-bottom: 1.25rem;
  }

  /* Buttons — full height tap targets */
  .btn {
    min-height: 48px;
    font-size: 16px;
  }

  /* Select dropdown arrow — more tap room */
  .form-select {
    padding-right: 2.5rem;
  }
}

/* Tablet — minor bump */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .custom-select,
  select.form-control {
    font-size: 16px; /* iOS zoom prevention applies here too */
  }
}

/* ─── REGISTRATION STEP INDICATOR (inline: circle + label, horizontal) ─── */

.reg-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  gap: 0;
}

/* One step = circle + label side by side (not stacked) */
.reg-step {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.reg-step-circle {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 2px solid var(--bs-gray-300);
  color: var(--bs-gray-400);
  background: transparent;
}

.reg-step-circle .fas.fa-check,
.reg-step-circle .fa-check {
  font-size: 10px;
  line-height: 1;
}

.reg-step-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--bs-gray-400);
  white-space: nowrap;
}

.reg-step--active .reg-step-circle {
  background: var(--bs-gray-900);
  border-color: var(--bs-gray-900);
  color: #fff;
}

.reg-step--active .reg-step-label {
  color: var(--bs-gray-900);
  font-weight: 600;
}

.reg-step--done .reg-step-circle {
  background: var(--bs-gray-900);
  border-color: var(--bs-gray-900);
  color: #fff;
}

.reg-step--done .reg-step-label {
  color: var(--bs-gray-600);
  font-weight: 500;
}

/* Connector between step groups; vertically centered with circle row */
.reg-step-line {
  flex: 1 1 12px;
  height: 2px;
  background: var(--bs-gray-300);
  margin: 0 10px;
  align-self: center;
  min-width: 12px;
}

.reg-step-line--done {
  background: var(--bs-gray-900);
}

@media (max-width: 575.98px) {
  .reg-step {
    gap: 6px;
  }

  .reg-step-label {
    font-size: 11px;
  }

  .reg-step-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 11px;
  }

  .reg-step-circle .fas.fa-check,
  .reg-step-circle .fa-check {
    font-size: 9px;
  }

  .reg-step-line {
    margin: 0 6px;
    min-width: 8px;
  }
}

/* Order summary — savings line (desktop sidebar + mobile drawer) */
.order-summary-savings-pill {
  background: #ecfdf5;
  color: #059669;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}


/* ─── DONATION BUTTON — neutral active state (white-label safe) ─── */
.btn.donation_options.active {
  border-color: #1a1a1a !important;
  border-width: 2px !important;
  background: #fff !important;
  color: #1a1a1a !important;
}

/* ─── SEGMENTED TOGGLE — sufficient contrast on #f8f9fa surface ─── */
.donation-type-toggle {
  background: #e5e7eb !important;
}

/* Shared recurring donation controls (integrated + org donation) */
.reg-donation-section {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
}

.reg-donation-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--reg-donation-toggle-bg);
}

.reg-donation-toggle .segmented-indicator {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 3px);
  height: calc(100% - 4px);
  background: var(--reg-donation-toggle-indicator);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.reg-donation-toggle.recurring-active .segmented-indicator {
  transform: translateX(calc(100% + 2px));
}

.reg-donation-toggle button {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

.reg-donation-toggle button:not(.active) {
  color: var(--reg-donation-muted) !important;
}

.reg-frequency-grid.btn-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: .75rem;
}

.reg-frequency-grid .btn > input[type="radio"] {
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none;
}

.reg-frequency-grid .btn {
  width: 100%;
  height: 44px !important;
  padding: 10px 12px;
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 600 !important;
  box-shadow: none !important;
  border: 1px solid #d1d5db;
  background: #fff !important;
  color: unset;
  /* iOS WebKit paints button text via -webkit-text-fill-color, which otherwise wins
     over `color` (older Safari shows the selected button's text as system blue). */
  -webkit-text-fill-color: currentColor;
}

.reg-frequency-grid .btn:not(.active) {
  color: var(--reg-donation-muted) !important;
}

.reg-frequency-grid .btn.active,
.reg-frequency-grid .btn:active {
  border-color: var(--reg-frequency-active-border) !important;
  border-width: 2px !important;
  background: var(--reg-frequency-active-bg) !important;
  color: var(--reg-frequency-active-color) !important;
}

.reg-recurring-options {
  margin-top: 1rem;
}

.reg-recurring-options .reg-frequency-grid {
  margin-bottom: 1rem;
}

.reg-donation-input-group {
  display: flex;
  align-items: stretch;
}

.reg-donation-input-group .input-group-text {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: #4b5563;
  font-weight: 600;
  font-size: 15px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.reg-donation-input-group .donation_input.form-control {
  border-left: none;
  border-radius: 0 6px 6px 0;
  font-weight: 600;
  border-color: #e5e7eb;
}

.reg-donation-input-group .donation_input.form-control:focus {
  border-color: #9ca3af;
  box-shadow: none;
}

.reg-donation-input-group:focus-within .input-group-text {
  border-color: #9ca3af;
}

/* Shared order-summary chrome */
.reg-order-summary-row {
  margin-bottom: 6px;
  background-color: var(--reg-order-row-bg);
  border-radius: var(--reg-order-row-radius);
  padding: var(--reg-order-row-padding-y) var(--reg-order-row-padding-x);
  font-size: 14px;
}

.reg-order-summary-title {
  font-size: 15px;
}

/* Shared mobile checkout drawer shell */
.reg-mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.reg-mobile-bottom-bar .bottom-bar-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1rem .5rem;
  position: relative;
  z-index: 1001;
  background: white;
}

.reg-mobile-bottom-bar .total-section {
  font-size: 1.25rem;
  font-weight: bold;
  width: 100%;
}

.reg-mobile-bottom-bar .expand-details {
  color: #6c757d;
  padding-right: 0.75rem;
}

/* Chevron rotates to point the other way once the drawer is expanded, and never
   shows a focus ring/box-shadow — it's a disclosure toggle, not a form control.
   Scoped under .reg-mobile-bottom-bar so it can't leak onto unrelated
   .expand-details/.close-details/.drawer-handle usage elsewhere in the app. */
.reg-mobile-bottom-bar .expand-details,
.reg-mobile-bottom-bar .expand-details:hover,
.reg-mobile-bottom-bar .expand-details:focus {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

.reg-mobile-bottom-bar .expand-details i {
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
}

.reg-mobile-bottom-bar #orderDetails.expanded ~ .bottom-bar-content .expand-details i {
  transform: rotate(90deg);
}

.reg-mobile-bottom-bar .navigation-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

/* Drawer handle: the small pill users drag/tap to dismiss the order-details sheet. */
.reg-mobile-bottom-bar .drawer-handle {
  width: 100%;
  padding: 10px 0 14px;
  margin: 0;
  touch-action: none;
  cursor: grab;
}

.reg-mobile-bottom-bar .drawer-handle::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #d1d5db;
  margin: 0 auto;
}

/* Close button on the order-details overlay: plain icon button, no default
   button chrome (border/background), no focus ring. */
.reg-mobile-bottom-bar .close-details {
  top: 1rem;
  right: 1rem;
  border: none;
  background: none;
  color: #6c757d;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.25rem;
  z-index: 1;
}

.reg-mobile-bottom-bar .close-details:focus {
  outline: none;
}

.reg-mobile-bottom-bar .order-details {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(var(--reg-mobile-bottom-clearance, 132px) - 14px);
  height: auto;
  max-height: min(80vh, calc(100dvh - var(--reg-mobile-bottom-clearance, 132px) + 14px));
  background: #f8f9fa;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #dee2e6;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform;
  z-index: 999;
  -webkit-overflow-scrolling: touch;
}

.reg-mobile-bottom-bar .order-details.expanded {
  transform: translateY(0);
}

.reg-mobile-bottom-bar .order-details-content {
  padding: 1rem 1rem 1.25rem;
  opacity: 0.8;
  transition: opacity 0.3s ease-out;
}

.reg-mobile-bottom-bar .order-details.expanded .order-details-content {
  opacity: 1;
}

/* Fixed mobile checkout bar: main column clearance (height from JS: bar + 24px + safe area) */
@media (max-width: 991.98px) {
  body.has-reg-mobile-bottom-bar > .container {
    padding-bottom: calc(var(--reg-mobile-bottom-clearance, 168px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.reg-field-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
  display: block;
  line-height: 1.4;
}

/* Placed after .input-group (not inside flex row): keep full width under prefix + control */
.input-group + .reg-field-error {
  width: 100%;
  margin-top: 0.375rem;
}

/* ─── DROPDOWN MENU ─────────────────────────────────────────────────────────
   Stock Bootstrap chrome (6px radius, rgba(0,0,0,.176) hairline, no shadow) is
   the one default surface left on these pages, so it reads as un-designed next
   to the 10px buttons and 12px cards above.

   Scoped to the public body on purpose. This file is also pulled into a few
   admin surfaces through the vendor drawer and offline-assign partials, and
   `vendor/views/list` has a Keen dropdown that unscoped rules here would
   restyle. `layouts/public` is the only body carrying .card-no-border.

   First consumer: the "Add to calendar" menu on the manage-tickets page. */
body.card-no-border .dropdown-menu {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
  padding: 6px;
}

/* Fixed min-height rather than padding: the same trick .reg-two-col-title-bar__btn
   uses, and it holds the 44px touch target whatever the label's line-height does. */
body.card-no-border .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #4b5563;
}

body.card-no-border .dropdown-item:hover,
body.card-no-border .dropdown-item:focus {
  background-color: #f9fafb;
  color: #1a1a1a;
}

/* Bootstrap tints the active item with $primary; keep it in the neutral ramp. */
body.card-no-border .dropdown-item:active,
body.card-no-border .dropdown-item.active {
  background-color: #f3f4f6;
  color: #1a1a1a;
}

/* Same ring the form controls use, so keyboard focus reads identically. */
body.card-no-border .dropdown-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  outline: none;
}