.eb-container img { 
    object-fit: cover;
    width: 140px !important;
    height: 140px;   
    margin: auto;
}
.eb-page-heading { 
    font-size: 2rem;
}

/* ===============================
   Event Booking — Registration UI Modernization
   Scope: Individual + Group registration forms
   Safe to paste; no markup changes required.
   =============================== */

/* Root tokens (tweak these to brand the look) */
#eb-individual-registration-page,
#eb-group-registration-form {
  /* Colors */
  --eb-bg: #ffffff;
  --eb-surface: #ffffff;
  --eb-elevated: #fafafa;
  --eb-border: #e5e7eb; /* gray-200 */
  --eb-divider: #eef2f7;
  --eb-text: #111827;   /* gray-900 */
  --eb-muted: #6b7280;  /* gray-500 */
  --eb-primary: #2563eb;   /* blue-600 */
  --eb-primary-600: #2563eb;
  --eb-primary-700: #1d4ed8;
  --eb-focus: rgba(37, 99, 235, 0.35);
  --eb-danger: #dc2626;
  --eb-success: #059669;

  /* Radius, shadows, spacing */
  --eb-radius: 12px;
  --eb-radius-sm: 8px;
  --eb-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --eb-shadow-md: 0 2px 6px rgba(0,0,0,.08), 0 12px 24px rgba(0,0,0,.06);
  --eb-gap: 16px;        /* control vertical gap */
  --eb-gap-lg: 22px;     /* group gap */
  --eb-label-w: 240px;   /* for horizontal layout label column */
}

/* Page heading */
#eb-individual-registration-page .eb-page-heading,
#eb-group-registration-form .eb-page-title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: var(--eb-text);
  letter-spacing: -0.015em;
}

/* Generic containers / sections */
#eb-individual-registration-page .eb-message,
#eb-group-registration-form .eb-message,
#eb-individual-registration-page .eb-form-content,
#eb-group-registration-form .eb-form-content {
  background: var(--eb-surface);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  padding: calc(var(--eb-gap) * 1.25);
  box-shadow: var(--eb-shadow-sm);
}

#eb-individual-registration-page .eb-form-heading,
#eb-group-registration-form .eb-form-heading {
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 .5rem 0;
  color: var(--eb-text);
}

/* Horizontal form alignment (Bootstrap mapping: control-group/label/controls) */
#eb-individual-registration-page .control-group,
#eb-group-registration-form .control-group {
  display: grid;
  grid-template-columns: minmax(140px, var(--eb-label-w)) 1fr;
  align-items: start;
  gap: 10px 16px; /* row gap, column gap */
  padding: 10px 0;
  border-top: 1px solid var(--eb-divider);
}
#eb-individual-registration-page .control-group:first-child,
#eb-group-registration-form .control-group:first-child { border-top: 0; }

#eb-individual-registration-page .control-label,
#eb-group-registration-form .control-label {
  font-weight: 600;
  color: var(--eb-text);
  padding-top: 8px; /* align with inputs */
}
#eb-individual-registration-page .controls,
#eb-group-registration-form .controls {
  min-width: 0; /* prevent overflow */
}
#eb-individual-registration-page .required,
#eb-group-registration-form .required { color: var(--eb-danger); margin-left: 4px; }

/* Stacked layout fallback on narrow screens and stacked mode */
@media (max-width: 768px) {
  #eb-individual-registration-page .control-group,
  #eb-group-registration-form .control-group {
    grid-template-columns: 1fr;
  }
  #eb-individual-registration-page .control-label,
  #eb-group-registration-form .control-label {
    padding-top: 0;
  }
}

/* Inputs (covers Bootstrap .form-control and plain inputs) */
#eb-individual-registration-page input[type="text"],
#eb-individual-registration-page input[type="email"],
#eb-individual-registration-page input[type="password"],
#eb-individual-registration-page input[type="tel"],
#eb-individual-registration-page input[type="number"],
#eb-individual-registration-page select,
#eb-individual-registration-page textarea,
#eb-individual-registration-page .form-control,
#eb-group-registration-form input[type="text"],
#eb-group-registration-form input[type="email"],
#eb-group-registration-form input[type="password"],
#eb-group-registration-form input[type="tel"],
#eb-group-registration-form input[type="number"],
#eb-group-registration-form select,
#eb-group-registration-form textarea,
#eb-group-registration-form .form-control {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  color: var(--eb-text);
  padding: 10px 12px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#eb-individual-registration-page input:focus,
#eb-group-registration-form input:focus,
#eb-individual-registration-page select:focus,
#eb-group-registration-form select:focus,
#eb-individual-registration-page textarea:focus,
#eb-group-registration-form textarea:focus,
#eb-individual-registration-page .form-control:focus,
#eb-group-registration-form .form-control:focus {
  outline: 0;
  border-color: var(--eb-primary-600);
  box-shadow: 0 0 0 3px var(--eb-focus);
}

/* Checkboxes / radios (including Bootstrap .form-check-input and UIkit uk-radio) */
#eb-individual-registration-page .form-check-input,
#eb-group-registration-form .form-check-input,
#eb-individual-registration-page input[type="checkbox"],
#eb-group-registration-form input[type="checkbox"],
#eb-individual-registration-page input[type="radio"],
#eb-group-registration-form input[type="radio"],
#eb-individual-registration-page .uk-radio,
#eb-group-registration-form .uk-radio {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--eb-primary-600); /* modern browsers */
}

/* Help text and descriptions */
#eb-individual-registration-page .help-block,
#eb-group-registration-form .help-block,
#eb-individual-registration-page .text-muted,
#eb-group-registration-form .text-muted {
  color: var(--eb-muted);
  font-size: .92rem;
}

/* Validation states */
#eb-individual-registration-page .has-error .form-control,
#eb-group-registration-form .has-error .form-control,
#eb-individual-registration-page .validate[required].error,
#eb-group-registration-form .validate[required].error,
#eb-individual-registration-page input.error,
#eb-group-registration-form input.error,
#eb-individual-registration-page select.error,
#eb-group-registration-form select.error,
#eb-individual-registration-page textarea.error,
#eb-group-registration-form textarea.error {
  border-color: var(--eb-danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}
#eb-individual-registration-page .eb-error,
#eb-group-registration-form .eb-error {
  color: var(--eb-danger);
  margin-top: 6px;
  font-size: .92rem;
}

/* Payment method section as selectable cards */
#eb-individual-registration-page #payment_method_container,
#eb-group-registration-form #payment_method_container,
#eb-individual-registration-page .payment_information,
#eb-group-registration-form .payment_information {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  padding: var(--eb-gap);
  box-shadow: var(--eb-shadow-sm);
  background: var(--eb-elevated);
}
#eb-individual-registration-page #payment_method_container label,
#eb-group-registration-form #payment_method_container label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
#eb-individual-registration-page #payment_method_container label:hover,
#eb-group-registration-form #payment_method_container label:hover {
  border-color: var(--eb-primary-600);
  box-shadow: 0 0 0 3px var(--eb-focus);
}
#eb-individual-registration-page #payment_method_container input[type="radio"],
#eb-group-registration-form #payment_method_container input[type="radio"] {
  flex: 0 0 auto;
}
#eb-individual-registration-page .eb-payment-method-icon,
#eb-group-registration-form .eb-payment-method-icon {
  max-height: 22px; width: auto;
  display: inline-block;
}
/* Selected card state */
#eb-individual-registration-page #payment_method_container input[type="radio"]:checked + img,
#eb-group-registration-form #payment_method_container input[type="radio"]:checked + img { filter: saturate(1.1) contrast(1.05); }

/* Totals / summary boxes (if present) */
#eb-individual-registration-page .eb-total, 
#eb-group-registration-form .eb-total, 
#eb-individual-registration-page .eb-summary, 
#eb-group-registration-form .eb-summary {
  background: var(--eb-elevated);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  padding: var(--eb-gap);
  box-shadow: var(--eb-shadow-sm);
}

/* Buttons (keeps Bootstrap classes but modernizes look slightly) */
#eb-individual-registration-page .btn,
#eb-group-registration-form .btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 16px;
}
#eb-individual-registration-page .btn-primary,
#eb-group-registration-form .btn-primary,
#eb-individual-registration-page .btn.btn-primary,
#eb-group-registration-form .btn.btn-primary {
  background: var(--eb-primary-600);
  border-color: var(--eb-primary-600);
}
#eb-individual-registration-page .btn-primary:hover,
#eb-group-registration-form .btn-primary:hover,
#eb-individual-registration-page .btn.btn-primary:hover,
#eb-group-registration-form .btn.btn-primary:hover {
  background: var(--eb-primary-700);
  border-color: var(--eb-primary-700);
}

/* Group registration blocks */
#eb-group-registration-form #eb-number-group-members,
#eb-group-registration-form #eb-group-members-information,
#eb-group-registration-form #eb-group-billing {
  margin-bottom: var(--eb-gap-lg);
}
#eb-group-registration-form #eb-group-members-information .control-group {
  padding: 12px 0;
}

/* Tickets (if shown on individual form) */
#eb-individual-registration-page .eb-tickets,
#eb-individual-registration-page .eb-ticket-type {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  padding: var(--eb-gap);
  background: var(--eb-elevated);
}

/* Compact density option: add class .eb-compact to the wrapper div to tighten spacing */
#eb-individual-registration-page.eb-compact .control-group,
#eb-group-registration-form.eb-compact .control-group { padding: 6px 0; gap: 8px 12px; }
#eb-individual-registration-page.eb-compact .btn,
#eb-group-registration-form.eb-compact .btn { padding: 8px 14px; border-radius: 8px; }
#eb-individual-registration-page.eb-compact .eb-form-content,
#eb-group-registration-form.eb-compact .eb-form-content { padding: var(--eb-gap); }

/* Dark mode (basic) – respects Bootstrap 5 data attribute if present; otherwise prefers-color-scheme */
:root[data-bs-theme="dark"] #eb-individual-registration-page,
:root[data-bs-theme="dark"] #eb-group-registration-form,
@media (prefers-color-scheme: dark) {
  #eb-individual-registration-page, #eb-group-registration-form { --eb-bg: #0b0f14; --eb-surface: #0f1720; --eb-elevated: #111827; --eb-border: #1f2937; --eb-divider: #1f2937; --eb-text: #e5e7eb; --eb-muted: #9ca3af; --eb-focus: rgba(37,99,235,.35); }
  #eb-individual-registration-page .eb-form-content,
  #eb-group-registration-form .eb-form-content,
  #eb-individual-registration-page .eb-message,
  #eb-group-registration-form .eb-message { box-shadow: none; }
  #eb-individual-registration-page #payment_method_container label,
  #eb-group-registration-form #payment_method_container label { background: #0f1720; }
}

/* Scope: Event Booking registration pages only */
#eb-individual-registration-page,
#eb-group-registration-form {
  /* optional, but ensures embedded widgets can stretch to full width */
  --eb-select-min-h: 42px; /* adjust if you use denser layout */
}

/* 1) Native select fixes (Bootstrap 2–5 and plain selects) */
#eb-individual-registration-page select,
#eb-group-registration-form select {
  max-width: 100%;
  width: 100%;
  min-height: var(--eb-select-min-h);
  padding-right: 2rem; /* space for the dropdown arrow */
  line-height: 1.35;   /* avoid vertical clipping */
}

/* Some templates force tiny heights via .form-control */
#eb-individual-registration-page .form-control,
#eb-group-registration-form .form-control {
  min-height: var(--eb-select-min-h);
}

/* 2) Chosen (J3/J4 often uses Chosen). Class variants: .chzn- (old) and .chosen- (new) */
#eb-individual-registration-page .chosen-container,
#eb-group-registration-form .chosen-container,
#eb-individual-registration-page .chzn-container,
#eb-group-registration-form .chzn-container {
  width: 100% !important; /* allow long text */
  max-width: 100% !important;
}
/* Main single-select display */
#eb-individual-registration-page .chosen-container-single .chosen-single,
#eb-group-registration-form .chosen-container-single .chosen-single,
#eb-individual-registration-page .chzn-container-single .chzn-single,
#eb-group-registration-form .chzn-container-single .chzn-single {
  height: auto;                 /* allow multi-line */
  min-height: var(--eb-select-min-h);
  line-height: 1.35;            /* prevent vertical clipping */
  padding: 10px 36px 10px 12px; /* room for arrow */
  white-space: normal;          /* allow wrap instead of cutting off */
}
/* The text span inside chosen */
#eb-individual-registration-page .chosen-container-single .chosen-single span,
#eb-group-registration-form .chosen-container-single .chosen-single span,
#eb-individual-registration-page .chzn-container-single .chzn-single span,
#eb-group-registration-form .chzn-container-single .chzn-single span {
  white-space: normal;
}
/* Arrow alignment so it stays vertically centered with auto height */
#eb-individual-registration-page .chosen-container-single .chosen-single div,
#eb-group-registration-form .chosen-container-single .chosen-single div,
#eb-individual-registration-page .chzn-container-single .chzn-single div,
#eb-group-registration-form .chzn-container-single .chzn-single div {
  width: 28px;
  top: 50%;
  transform: translateY(-50%);
  right: 6px;
}
#eb-individual-registration-page .chosen-container-single .chosen-single div b,
#eb-group-registration-form .chosen-container-single .chosen-single div b,
#eb-individual-registration-page .chzn-container-single .chzn-single div b,
#eb-group-registration-form .chzn-container-single .chzn-single div b {
  margin-top: 0 !important; /* neutralize theme offsets */
}
/* Dropdown results: allow wrapping in the list too (optional) */
#eb-individual-registration-page .chosen-drop .chosen-results li,
#eb-group-registration-form .chosen-drop .chosen-results li,
#eb-individual-registration-page .chzn-drop .chzn-results li,
#eb-group-registration-form .chzn-drop .chzn-results li {
  white-space: normal;
}

/* 3) Select2 (some sites use this instead) */
#eb-individual-registration-page .select2-container,
#eb-group-registration-form .select2-container { width: 100% !important; max-width: 100% !important; }
#eb-individual-registration-page .select2-selection--single,
#eb-group-registration-form .select2-selection--single {
  height: auto; min-height: var(--eb-select-min-h);
}
#eb-individual-registration-page .select2-selection__rendered,
#eb-group-registration-form .select2-selection__rendered {
  white-space: normal; line-height: 1.35; padding-right: 2rem;
}
#eb-individual-registration-page .select2-selection__arrow,
#eb-group-registration-form .select2-selection__arrow { height: 100%; }

/* 4) Prevent parent containers from clipping long text */
#eb-individual-registration-page .controls,
#eb-group-registration-form .controls { overflow: visible; }

/* 5) If your template constrains label/field columns too much, this ensures fields can expand on small screens */
@media (max-width: 768px) {
  #eb-individual-registration-page .control-group,
  #eb-group-registration-form .control-group { grid-template-columns: 1fr; }
}