/*
 * RYB Connect — Brand Design Layer
 *
 * Loaded after base plugin CSS. Override CSS custom properties
 * per-brand to customize colors, fonts, and accents.
 *
 * Variables are injected dynamically from Theme admin settings.
 * Sections can be toggled on/off from the Theme admin tab.
 */


:root {
  --ryb-primary-color: rgb(96, 38, 213);
  --ryb-dark-color: rgba(17, 6, 39, 1);
  --ryb-paragraph-color: rgba(81, 76, 91, 1);
  --ryb-border-color: rgba(212, 209, 219, 1);
  --ryb-placeholder-color: rgba(239, 234, 249, 1);
  --ryb-background-color: rgba(249, 248, 250, 1);
  --ryb-secondary-color: rgb(57, 16, 237);
  --ryb-light-color: rgba(249, 249, 250, 1);
  --ryb-font-family: 'Geist', sans-serif;
  --ryb-button-bg-image: none;
  --ryb-select-arrow-image: none;
  --ryb-checkbox-image: none;
}

/* Base */
#ryb-connect, #ryb-connect *, #class-finder, #class-finder * { font-family: var(--ryb-font-family) !important; }
#ryb-connect, #class-finder { font-size: 16px; }

/* Invite-only style */
.ryb-connect-overlay#invite-only .ryb-connect-modal #ryb-wizard {
  height: auto;
  text-decoration: none;
}

#ryb-connect .invite-only-box {
  display: flex;
  align-items: center;
  gap: 11px;
  background-color: rgba(255, 252, 233, 1);
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 8px;
  padding: 5px 7px;
  width: fit-content;
}

#ryb-connect .invite-only-box p {
  margin: 0;
  font-size: 13px;
  line-height: 140%;
  color: rgba(30, 30, 30, 1);
}

#ryb-connect .invite-only-box.hide { display: none; }

/* [section:inputs] */

/* Selects */
#ryb-connect .standard-select {
  appearance: none;
  cursor: pointer;
  transition: all .15s ease;
  background-image: var(--ryb-select-arrow-image);
  background-repeat: no-repeat;
  background-position: 97.5% 51%;
}
#ryb-connect .standard-select:hover { border-color: #5426d5; transition: all .15s ease; }

/* Inputs */
#ryb-connect .standard-select, #registration-form .input-wrapper input {
  width: 100%;
  padding: 0 16px !important;
  font-size: 16px;
  height: 50px;
  border-radius: 5px;
  outline: none;
}
#registration-form .checkbox-wrapper input[type='checkbox'] {
  -webkit-appearance: none;
  min-width: 24px; min-height: 24px;
  background: white;
  border-radius: 5px;
  border: 2px solid #ccc;
  outline: none;
}
#registration-form .checkbox-wrapper input[type='checkbox']:checked {
  background-image: var(--ryb-checkbox-image);
  border: none;
}
#ryb-connect .dropdown-wrapper:last-of-type { margin-bottom: 0; }

/* [/section:inputs] */

/* Privacy */
#ryb-connect .wizard-stage .privacy-policy {
  color: rgb(17, 17, 17);
  cursor: default;
  display: block;
  font-size: 14px;
}
#ryb-connect .wizard-stage .privacy-terms { display: none; }

/* Form loader */
#ryb-connect .step-box .form-loader { display: none; text-align: center; }
#ryb-connect .step-box .form-loader.active { display: block; }
#ryb-connect .step-box:has(.form-loader.active) > div:not(.form-loader) { display: none; }
#ryb-connect .step-box.step-box:has(.form-loader.active) + .step-control { display: none; }

/* [section:grid] */

/* Results grid tweaks */
#class-finder .ryb-connect-modal .modal-description { font-size: 16px !important; font-weight: 300 !important; line-height: 1.6 !important; }

#ryb-connect .result-grid-cell .classes-per-week,
#class-finder .result-grid-cell .classes-per-week {
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  font-style: italic !important;
  color: #333;
  padding: 5px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: transparent !important;
}

/* [section:cards] — Result grid card design */

/* Card container */
#ryb-connect .result-grid-cell,
#class-finder .result-grid-cell {
  margin-top: 24px;
  margin-bottom: 16px;
  border: 0 !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
#ryb-connect .result-grid-cell:hover,
#class-finder .result-grid-cell:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px -5px, rgba(0, 0, 0, 0.08) 0px 8px 10px -5px;
  transform: translateY(-2px);
}

/* Time badge — right-aligned, soft green */
#ryb-connect .result-grid-cell .class-start,
#class-finder .result-grid-cell .class-start {
  background: #EBFCF5 !important;
  color: #0C5841 !important;
  right: 15px !important;
  left: auto !important;
}
#ryb-connect .result-grid-cell .class-start .period,
#class-finder .result-grid-cell .class-start .period { font-weight: 700 !important; }

/* Waitlist badge — soft amber */
#ryb-connect .result-grid-cell:has(.waitlist:not(.d-none)) .class-start,
#class-finder .result-grid-cell:has(.waitlist:not(.d-none)) .class-start {
  background: #FFF5E9 !important;
  color: #8B5C1A !important;
}

/* h3 — flex row, proper spacing above for badge */
#ryb-connect .result-grid-cell h3,
#class-finder .result-grid-cell h3 {
  display: flex !important;
  flex-direction: row !important;
  padding: 0 15px !important;
  gap: 8px;
  align-items: flex-start;
  margin-top: 32px;
  margin-bottom: 12px;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
}

/* Class name */
#ryb-connect .grid-results h3 .class-name,
#class-finder .grid-results h3 .class-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  line-height: 1.3;
  flex: 1;
}

/* Info icon — minimal circle, no background box */
#ryb-connect .result-grid-cell .info,
#class-finder .result-grid-cell .info {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  height: 24px;
  width: 24px;
  min-width: 24px;
  flex-shrink: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
}
#ryb-connect .result-grid-cell .info:hover,
#class-finder .result-grid-cell .info:hover {
  background: rgba(110, 38, 213, 0.08);
  transform: scale(1.1);
}
#ryb-connect .result-grid-cell .info svg,
#class-finder .result-grid-cell .info svg { width: 18px !important; height: 18px !important; }
#ryb-connect .result-grid-cell .info svg path.circle,
#class-finder .result-grid-cell .info svg path.circle { fill: #d9d9d9 !important; opacity: 1; }
#ryb-connect .result-grid-cell .info:hover svg path.circle,
#class-finder .result-grid-cell .info:hover svg path.circle { fill: #bbb !important; }
#ryb-connect .result-grid-cell .info svg path.details,
#class-finder .result-grid-cell .info svg path.details { fill: none; stroke: #fff !important; stroke-width: 0.8; opacity: 1; }
#ryb-connect .result-grid-cell .info:hover svg path.details,
#class-finder .result-grid-cell .info:hover svg path.details { stroke: #fff !important; }

/* Price & duration row */
#ryb-connect .result-grid-cell .class-data,
#class-finder .result-grid-cell .class-data {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px;
  padding: 0 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333 !important;
}
#ryb-connect .result-grid-cell .class-data .class-tuition,
#class-finder .result-grid-cell .class-data .class-tuition { flex-shrink: 0; }
#ryb-connect .result-grid-cell .class-data .class-time,
#class-finder .result-grid-cell .class-data .class-time {
  flex-shrink: 0;
  color: #777 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}

/* Classes per week — separator line */
#ryb-connect .result-grid-cell .classes-per-week,
#class-finder .result-grid-cell .classes-per-week {
  color: #999 !important;
  font-size: 12px !important;
  font-style: italic !important;
  border-top: 1px solid #f0f0f0 !important;
  margin: 8px 15px 0 15px !important;
  padding: 8px 0 0 0 !important;
  font-family: var(--ryb-font-family, 'Geist', sans-serif) !important;
}

/* Button section */
#ryb-connect .result-grid-cell .button-section,
#class-finder .result-grid-cell .button-section { margin-top: 12px; }

/* Enroll button — brand blue */
#class-finder button.enroll-class,
#class-finder a.enroll-class {
  font-family: var(--ryb-font-family, 'Geist', sans-serif) !important;
  color: #ffffff !important;
  height: auto !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 0 0 5px 5px !important;
  box-shadow: none !important;
  background: #419AF3 !important;
  padding: 11px !important;
  border-top: 0 !important;
  letter-spacing: 0.3px;
  transition: background 0.2s ease;
}
#class-finder button.enroll-class:hover,
#class-finder a.enroll-class:hover { background: #2d88e0 !important; }

/* Waitlist button — amber tint */
#class-finder button.enroll-class.waitlist {
  color: #b06b1b !important;
  background: #FFF5E9 !important;
  font-weight: 500 !important;
}
#class-finder button.enroll-class.waitlist:hover { background: #FFECD2 !important; }

/* Main info (invite-only) */
#class-finder button.enroll-class.main-info {
  color: var(--ryb-primary-color, #6E26D5) !important;
  background: #f3eefb !important;
  font-weight: 500 !important;
}
#class-finder button.enroll-class.main-info:hover { background: #e8ddf7 !important; }

/* Grid container — open layout, no outer border */
#ryb-connect .grid-view .grid-results,
#class-finder .grid-view .grid-results { border: none !important; border-radius: 0 !important; gap: 16px !important; }
#ryb-connect .grid-view .grid-results > div,
#class-finder .grid-view .grid-results > div { border: none !important; border-right: none !important; padding: 0; background: transparent !important; }
#ryb-connect .grid-view .grid-results > div:nth-child(-n+7),
#class-finder .grid-view .grid-results > div:nth-child(-n+7) { background: transparent !important; border-bottom: none !important; }
#ryb-connect .grid-view .grid-results > :nth-child(n+8),
#class-finder .grid-view .grid-results > :nth-child(n+8) { padding: 0; }
#ryb-connect .grid-view .grid-results > div:nth-child(7), #ryb-connect .grid-view .grid-results > div:nth-child(14),
#class-finder .grid-view .grid-results > div:nth-child(7), #class-finder .grid-view .grid-results > div:nth-child(14) { border-right: none; }

/* Result content area — gray background */
#class-finder .result-content,
#ryb-connect .result-content { background: #f9fafb; padding: 24px; border-radius: 16px; }

/* Day column backgrounds — transparent */
#ryb-connect .grid-view .grid-results > div > div,
#class-finder .grid-view .grid-results > div > div { background-color: transparent !important; padding: 0 !important; }

/* Day headings — centered column, count below name */
#ryb-connect .grid-view .grid-results h4,
#class-finder .grid-view .grid-results h4 { margin: 0 0 16px 0 !important; padding: 10px 0 !important; color: #102a43 !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; background: transparent !important; text-align: center !important; border-bottom: 2px solid #102a43 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; }

/* Empty day headings — transparent border */
#class-finder .grid-view .grid-results > div.no-classes-day > h4,
#ryb-connect .grid-view .grid-results > div.no-classes-day > h4 { border-bottom-color: transparent !important; color: #9CA3AF !important; }

/* Day-count pill inside heading */
#class-finder .grid-view .grid-results .day-count,
#ryb-connect .grid-view .grid-results .day-count { display: inline-block !important; font-size: 10px !important; font-weight: 600 !important; color: #102a43 !important; background: rgba(16, 42, 67, 0.08) !important; padding: 2px 8px !important; border-radius: 10px !important; margin: 0 !important; white-space: nowrap !important; }
#class-finder .grid-view .grid-results > div.no-classes-day .day-count,
#ryb-connect .grid-view .grid-results > div.no-classes-day .day-count { color: #9CA3AF !important; background: rgba(156, 163, 175, 0.1) !important; }

/* Empty state — dashed border container */
#class-finder .grid-view .grid-results .no-result,
#ryb-connect .grid-view .grid-results .no-result { background: rgba(243, 244, 246, 0.5) !important; border: 1px dashed #E5E7EB !important; border-radius: 12px !important; min-height: 400px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #9CA3AF !important; font-size: 13px !important; font-weight: 500 !important; padding: 0 !important; }

/* Full-area "no classes match" fallback shown when zero classes match the
 * combined filter set. Hides the day grid and replaces it with a centered
 * panel + reset/restart actions. */
#class-finder .grid-view.is-empty .grid-results,
#ryb-connect .grid-view.is-empty .grid-results { display: none !important; }
.no-results-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 40px 20px;
  font-family: var(--ryb-font-family, 'Geist', sans-serif);
}
.no-results-fallback__inner {
  max-width: 420px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 36px 32px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.08);
}
.no-results-fallback__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.55);
  margin-bottom: 16px;
}
.no-results-fallback__title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
  margin: 0 0 6px;
}
.no-results-fallback__desc {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  margin: 0 0 20px;
}
.no-results-fallback__actions {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.no-results-fallback__reset,
.no-results-fallback__back {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.no-results-fallback__reset {
  background: var(--ryb-primary-color, #102a43);
  color: #fff;
  border: 1px solid var(--ryb-primary-color, #102a43);
}
.no-results-fallback__reset:hover { transform: translateY(-1px); }
.no-results-fallback__back {
  background: #fff;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.no-results-fallback__back:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.3); }
@media only screen and (max-width: 600px) {
  .no-results-fallback__inner { padding: 28px 22px 22px; }
  .no-results-fallback__actions { flex-direction: column; width: 100%; }
  .no-results-fallback__reset,
  .no-results-fallback__back { width: 100%; }
}

/* [/section:cards] */

/* [section:filters] — Filter pill redesign */

/* Title + filters row */
#class-finder .filter-top,
#ryb-connect .filter-top {
  margin-bottom: 24px !important;
  align-items: center !important;
  gap: 24px;
}
#class-finder .filter-top .main-title,
#ryb-connect .full-view .filter-top .main-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: #102a43 !important;
}

/* Filter pill group */
#ryb-connect .filter-top .filter-controls,
#class-finder .filter-top .filter-controls { gap: 10px !important; }

/* Individual filter pill */
#ryb-connect .filter-top .edit-option,
#class-finder .filter-top .edit-option {
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  height: auto !important;
  width: auto !important;
  min-width: 150px;
  background: #fff !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
#ryb-connect .filter-top .edit-option:hover,
#class-finder .filter-top .edit-option:hover {
  border-color: #102a43 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
#ryb-connect .filter-top .edit-option.active,
#class-finder .filter-top .edit-option.active {
  border-color: #102a43 !important;
  box-shadow: 0 0 0 2px rgba(16, 42, 67, 0.1), 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Label text — tiny uppercase */
#ryb-connect .filter-top .edit-option .label,
#class-finder .filter-top .edit-option .label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #6B7280 !important;
  margin-bottom: 1px;
}

/* Value text — navy medium */
#ryb-connect .filter-top .edit-option .value,
#class-finder .filter-top .edit-option .value {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #102a43 !important;
}

/* Chevron icon */
#ryb-connect .filter-top .edit-option svg,
#class-finder .filter-top .edit-option svg {
  width: 16px !important;
  height: 16px !important;
  color: #9CA3AF !important;
  fill: none !important;
  transition: all 0.2s ease !important;
}
#ryb-connect .filter-top .edit-option:hover svg,
#class-finder .filter-top .edit-option:hover svg { color: #6B7280 !important; }
#ryb-connect .filter-top .edit-option.active svg,
#class-finder .filter-top .edit-option.active svg { color: var(--ryb-primary-color, #6E26D5) !important; }

/* Dropdown panel */
#ryb-connect .filter-top .dropdown,
#class-finder .filter-top .dropdown {
  border: 1.5px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.04) !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  overflow-y: auto !important;
  z-index: 300 !important;
  min-width: 0;
  left: auto !important;
  right: 0 !important;
  width: max-content !important;
  max-width: min(320px, 90vw) !important;
}

/* Dropdown items */
#ryb-connect .filter-top .dropdown ul li,
#class-finder .filter-top .dropdown ul li {
  box-sizing: border-box;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333 !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}
#ryb-connect .filter-top .dropdown ul li:last-child,
#class-finder .filter-top .dropdown ul li:last-child { border-bottom: none; }
#ryb-connect .filter-top .dropdown ul li:hover,
#class-finder .filter-top .dropdown ul li:hover {
  background-color: #f8f5ff !important;
  color: var(--ryb-primary-color, #6E26D5) !important;
}

/* Selected item in dropdown — brand purple */
#ryb-connect .filter-top li.select,
#class-finder .filter-top li.select {
  background-color: var(--ryb-primary-color, #6E26D5) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
#ryb-connect .filter-top li.select:hover,
#class-finder .filter-top li.select:hover {
  background-color: var(--ryb-secondary-color, #5a1ebf) !important;
  color: #fff !important;
}

/* Group headers in Class Types dropdown — non-interactive dividers */
#ryb-connect .filter-top .dropdown-group-header,
#class-finder .filter-top .dropdown-group-header {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #b0b0b0 !important;
  padding: 14px 16px 4px !important;
  cursor: default !important;
  pointer-events: none;
  border-bottom: none !important;
  background: transparent !important;
  margin-top: 4px;
  border-top: 1px solid #f0f0f0 !important;
}
#ryb-connect .filter-top .dropdown-group-header:first-child,
#class-finder .filter-top .dropdown-group-header:first-child {
  border-top: none !important;
  margin-top: 0;
}
#ryb-connect .filter-top .dropdown-group-header:hover,
#class-finder .filter-top .dropdown-group-header:hover {
  background: transparent !important;
  color: #b0b0b0 !important;
}
#ryb-connect .filter-top li.filterable-category,
#class-finder .filter-top li.filterable-category {
  padding-left: 28px !important;
}

/* Selected value color in pill */
#ryb-connect .filter-top .select,
#class-finder .filter-top .select { color: var(--ryb-primary-color, #6E26D5) !important; }

/* [/section:filters] */

#ryb-connect .wizard-stage .stage-text p { font-size: 32px; margin: 50px 0; line-height: 1.4; width: 480px; font-style: italic; }
#ryb-connect .selected { left: calc(50% - 20px); }

#ryb-connect #ryb-openings-result .step-view .box { padding: 40px; }
#ryb-connect .ryb-nav ul li { gap: 10px; }
#ryb-connect #ryb-openings-result .step-view .line { display: none; }
#ryb-connect .ryb-nav .step span.step-title { font-size: 16px; letter-spacing: .5px; }
#ryb-connect .ryb-nav span.step-nr, #ryb-connect .ryb-nav span.step-check { line-height: 1; font-size: 16px; height: 36px; width: 36px; }
#ryb-connect .ryb-nav ul { gap: 24px; }
#ryb-connect #ryb-openings-result .step-view .box p { font-weight: 300; letter-spacing: .5px; margin-bottom: 32px; }

/* Step view text */
#ryb-connect #ryb-openings-result .step-view h3.step-subtitle { font-style: italic; letter-spacing: 1px; font-weight: 300; text-transform: none; }

/* [/section:grid] */

/* Category visibility */
#available-categories > div:not(:has(.wizard-card)) { display: none; }

/* [section:modal] */

#class-finder .ryb-connect-overlay .ryb-connect-modal { padding: 32px; }
#class-finder .ryb-connect-modal .top-controls { margin-bottom: 16px; }
#class-finder .ryb-connect-modal .top-modal-data { align-items: flex-start; }
#class-finder .ryb-connect-modal .modal-title { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
#class-finder .ryb-connect-modal .modal-address { font-size: 16px !important; font-weight: 300 !important; }
#class-finder .ryb-connect-modal .modal-total-price, #class-finder .ryb-connect-modal .modal-price { font-size: 20px !important; }
#class-finder .main-modal-data > div { align-items: center; }
#class-finder .ryb-connect-modal .main-modal-data .text, #class-finder .ryb-connect-modal .main-modal-data .icon { line-height: 1; }
#class-finder .ryb-connect-modal .main-modal-data .calendar .text { margin-top: 0; }
#class-finder .ryb-connect-modal .main-modal-data {
  padding: 19px 0 16px 0;
  line-height: 1;
  border-top: 1px solid #00000010;
  border-bottom: 1px solid #00000010;
}
#class-finder .ryb-connect-modal .modal-actions .register-now {
  font-size: 16px !important;
  border-radius: 30px !important;
  height: 48px !important;
  transition: all .3s ease;
  background-size: contain;
}
#class-finder .ryb-connect-modal .modal-actions .register-now:hover { filter: hue-rotate(15deg); transition: all .3s ease; border: none !important; }

/* Funnel modal button */
#class-finder .ryb-connect-modal .modal-actions .register-now {
  padding: 5px 15px;
  background-image: var(--ryb-button-bg-image);
  border-radius: 5px;
  border: 1px solid transparent;
  color: #fff;
  width: 160px;
  height: 40px;
  cursor: pointer;
}
#class-finder #invite-only .ryb-connect-modal .modal-actions .register-now { display: flex; justify-content: space-around; align-items: center; text-decoration: none; }

/* Enrollment modal — standalone pages (camps, clinics, etc.) */

/* Fix: labels were right-aligned due to form text-align:right in filter.css */
.ryb-connect-modal form {
  text-align: left !important;
}

/* Fix: input labels styling */
.ryb-connect-modal #registration-form .input-wrapper label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 6px;
}

/* Fix: Continue button — not inside #ryb-connect so wizard-stage scoped styles don't apply */
.ryb-connect-modal button.form-submit {
  background: linear-gradient(to bottom, var(--ryb-primary-color, #6026d5), var(--ryb-secondary-color, #3910ed)) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  height: 48px !important;
  width: 100% !important;
  padding: 0 40px !important;
  border-radius: 9px !important;
  border: 0 !important;
  box-shadow: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 50%, transparent) 0px 10px 20px 0px !important;
  color: #fff !important;
  cursor: pointer;
  transition: 0.3s !important;
  font-family: var(--ryb-font-family, 'Geist', sans-serif) !important;
}
.ryb-connect-modal button.form-submit:hover {
  filter: hue-rotate(15deg) !important;
  transition: 0.3s !important;
}

/* The close button is now an icon-button (SVG inside <button>) styled in
 * ryb-connect-filter.css. The previous CSS pseudo-element drew an "×" via
 * ::after, which clashes with the new SVG and produces a double-X glyph.
 * Keep this section intentionally empty so legacy `.top-controls .close-modal`
 * markup doesn't get the duplicate icon. */

/* Modal action buttons — primary uses the brand color, secondary is an
 * outlined ghost button (handled in ryb-connect-filter.css). Keep only the
 * brand color override here so customer themes can re-skin via CSS variables. */
.ryb-connect-modal .modal-actions .register-button {
  background-color: var(--ryb-primary-color, #6026d5) !important;
  color: #fff !important;
  border: 1px solid var(--ryb-primary-color, #6026d5) !important;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 45%, transparent) !important;
}
.ryb-connect-modal .modal-actions .register-button:hover {
  box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 55%, transparent) !important;
}

/* [/section:modal] */

/* [section:wizard] */

/* Funnel / wizard tweaks */
#ryb-connect .wizard-stage .bg-white .container-wrapper { min-height: 100%; display: flex; flex-direction: column; }
#ryb-connect .wizard-stage .bg-white .container-wrapper:has(> .box.show > .user-type) { justify-content: center; }
#ryb-connect .result-grid-cell .control-button button.enroll-class.enroll:hover,
#class-finder .result-grid-cell .control-button button.enroll-class.enroll:hover { background: #5426d5 !important; color: #fff !important; }
#ryb-connect .result-grid-cell .control-button button.enroll-class,
#class-finder .result-grid-cell .control-button button.enroll-class { border-bottom-left-radius: 5px !important; border-bottom-right-radius: 5px !important; }
#ryb-connect .wizard-card.active { background-color: var(--ryb-secondary-color) !important; }
#ryb-connect .wizard-card.active p { color: #fff !important; }
#ryb-connect .wizard-card { padding: 16px 32px 16px 16px; border-radius: 10px; }
#ryb-connect .wizard-card:hover { border-color: var(--ryb-secondary-color); }
#ryb-connect .wizard-stage img { min-height: 100%; }
#ryb-connect .wizard-card .card .bg-image {
  aspect-ratio: 1/1;
  min-width: 120px; min-height: 120px;
  max-width: 120px; max-height: 120px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0ecf8 0%, #e8f2f0 50%, #ededed 100%);
}
#ryb-connect .wizard-card .card .name { margin-top: 0; font-weight: 600; color: #000; font-size: 16px; }
#ryb-connect .wizard-card .card .location { font-weight: 300; font-size: 14px; letter-spacing: .25px; margin-bottom: 0; }
#ryb-connect .wizard-stage .bg-white { align-items: flex-start; }
#ryb-connect .wizard-stage .box, #ryb-connect .wizard-stage .box.show { position: initial; }
#ryb-connect .wizard-stage .box { height: 0; display: none; }
#ryb-connect .wizard-stage .box.show { height: auto; display: block; padding: 0; }
#ryb-connect .box.classes.show #available-categories { height: auto; width: 100%; }

/* Layout containers */
#ryb-connect .bg-white { max-height: 100% !important; position: relative; overflow-y: auto; }
#ryb-connect .bg-white .container-wrapper { padding-top: 48px; align-items: flex-start !important; }
#ryb-connect .box.classes h1 + p { margin: 0; }
#ryb-connect .wizard-results { flex-grow: 1; }
#ryb-connect .box.classes.show .controls { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #00000010; box-shadow: 0 -5px 0 #00000005; justify-content: center; width: 100%; }
#ryb-connect .box.classes.show .controls button { margin-left: 16px; }
#ryb-connect .box.child .step-box { padding-bottom: 48px; }
#ryb-connect .box.child .step-box h2 { margin-top: 0; }
#ryb-connect .box.child .step-box #registration-form { padding: 0; }
#ryb-connect .box.child .step-control {
  position: sticky;
  bottom: 0 !important;
  background: #fff;
  padding: 32px 0;
  border-top: 1px solid #00000010;
}

/* Step 0 card styles are centralized below under scoped selectors. */

/* Toggle */
#ryb-connect .layout-toggle { display: none; }

/* Overall layout */
body.admin-bar #ryb-connect { height: calc(100vh - 36px); }
#ryb-connect { display: flex; flex-direction: column; height: 100vh; }
#available-categories { padding-bottom: 50px; }
#ryb-connect .bottom-controls {
  padding: 20px;
  position: sticky;
  bottom: 0;
  align-items: center;
  background: white;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, .15);
}
.admin-bar #ryb-connect .ryb-connect-content { height: auto !important; }
#ryb-connect .ryb-connect-content { height: auto !important; flex: 1; overflow-y: auto; }
#ryb-openings-result:not(.show) { display: none; height: 0; }

/* Prevent nested desktop scrolling when results are visible. */
@media only screen and (min-width: 1200px) {
  #ryb-connect .ryb-connect-content:has(#ryb-openings-result.show) {
    overflow-y: hidden;
  }
}

/* Stage text / Results alignment */
#ryb-connect .wizard-stage .stage-text { left: 10%; }
#ryb-connect .wizard-results { justify-content: center; flex-direction: column; }

/* [/section:wizard] */

/* [section:header] */

#ryb-connect header {
  background: #fff !important;
  padding: 0 24px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  position: relative !important;
  z-index: 10 !important;
}

#ryb-connect header .ryb-connect-default-wrapper {
  height: 100%;
}

/* Logo — clean fallback when no image is configured */
#ryb-connect header img[src=""],
#ryb-connect header img:not([src]) {
  display: none !important;
}
#ryb-connect header a:has(img[src=""]),
#ryb-connect header a:has(img:not([src])) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
#ryb-connect header a:has(img[src=""])::before,
#ryb-connect header a:has(img:not([src]))::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ryb-primary-color, #4326d5), var(--ryb-secondary-color, #6e26d5));
  flex-shrink: 0;
}
#ryb-connect header a:has(img[src=""])::after,
#ryb-connect header a:has(img:not([src]))::after {
  content: "Home";
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  letter-spacing: -.2px !important;
}

/* Right-side contacts area */
#ryb-connect .top-right-contacts {
  font-size: 14px;
  color: #64748b;
  gap: 16px !important;
}
#ryb-connect .top-right-contacts a {
  color: #334155;
  font-weight: 500;
  transition: color .2s ease;
  text-decoration: none !important;
}
#ryb-connect .top-right-contacts a:hover {
  color: var(--ryb-primary-color, #4326d5);
  text-decoration: none !important;
}

/* Phone number link — subtle emphasis */
#ryb-connect .top-right-contacts span a[href^="tel"] {
  font-weight: 600 !important;
  color: #0f172a !important;
  font-variant-numeric: tabular-nums !important;
}
#ryb-connect .top-right-contacts span a[href^="tel"]:hover {
  color: var(--ryb-primary-color, #4326d5) !important;
}

/* Back home button — refined pill with brand accent */
#ryb-connect .top-right-contacts .go-back-link {
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  color: #334155 !important;
  transition: all .2s ease !important;
  text-decoration: none !important;
}
#ryb-connect .top-right-contacts .go-back-link:hover {
  border-color: var(--ryb-primary-color, #4326d5) !important;
  color: var(--ryb-primary-color, #4326d5) !important;
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 4%, transparent) !important;
  text-decoration: none !important;
}

/* [/section:header] */

/* [section:typography] */

#ryb-connect .wizard-stage h1 {
  font-family: var(--ryb-font-family);
  font-size: clamp(32px, 2.8vw, 44px) !important;
  font-weight: 500;
  line-height: 1.15 !important;
  color: var(--ryb-dark-color, #0f172a);
  margin-top: 0;
  margin-bottom: 12px;
  text-align: left;
}
#ryb-connect .wizard-stage h1 span {
  font-style: italic;
  font-weight: 900;
  color: var(--ryb-primary-color, #6126D5);
  font-family: var(--ryb-heading-font-family, var(--ryb-font-family, 'DM Serif Display')) !important;
  background: -webkit-linear-gradient(var(--ryb-secondary-color, #4326D5), var(--ryb-primary-color, #6E26D5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#ryb-connect .wizard-stage h1 + p {
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ryb-paragraph-color, #64748b);
  margin-bottom: 0;
}
#ryb-connect .wizard-stage .line {
  height: 1px;
  background: linear-gradient(90deg, var(--ryb-primary-color, #4326d5) 0%, color-mix(in srgb, var(--ryb-primary-color, #6026d5) 10%, transparent) 100%);
  margin: 28px 0;
  width: 80px;
}
#ryb-connect .wizard-stage h2,
#ryb-connect .wizard-stage .box.child h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #1e293b;
}

/* Main title override */
#ryb-connect .full-view .filter-top .main-title,
#class-finder .filter-top .main-title { font-size: 32px; font-weight: 700 !important; line-height: 1.2; }

/* Refined heading — larger, bolder */
#ryb-connect .wizard-stage h1 {
  font-size: clamp(36px, 3.2vw, 52px) !important;
  font-weight: 700;
  line-height: 1.1 !important;
  margin-bottom: 8px;
}
#ryb-connect .wizard-stage h1 + p {
  font-size: 18px;
  margin-bottom: 0;
}
#ryb-connect .wizard-stage h2 {
  font-size: 19px;
  margin-bottom: 20px;
}

/* Step-indicator diamonds */
#ryb-connect .step-diamonds {
  display: flex;
  gap: 8px;
  margin: 28px 0;
}
#ryb-connect .step-diamonds span {
  width: 10px;
  height: 10px;
  background-color: var(--ryb-primary-color, #6026d5);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Refined option cards */
#ryb-connect .wizard-stage .user-type {
  gap: 16px !important;
}
#ryb-connect .wizard-stage .user-type li {
  padding: 24px !important;
  gap: 32px !important;
  border-radius: 16px !important;
}
#ryb-connect .wizard-stage .user-type li .point {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  align-self: auto !important;
}

/* Step 1 — filter dropdowns and form spacing */
#ryb-connect .custom-funnel-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#ryb-connect .custom-funnel-filters .dropdown-wrapper {
  width: 100%;
}
#ryb-connect .wizard-stage .form-box {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 24px;
}
#ryb-connect .wizard-stage .form-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* [/section:typography] */

/* [section:buttons] */

#ryb-connect .bottom-controls .next-step-button,
#ryb-connect .bottom-controls .results-button,
#ryb-connect .event-card .button.enroll,
#ryb-connect .wizard-stage button.registered, #ryb-connect .wizard-stage button.existing-member,
#ryb-connect .wizard-stage button {
  background-color: var(--ryb-primary-color, #6026d5);
  background-size: 130%;
  width: auto;
  background-image: var(--ryb-button-bg-image);
  text-decoration: none;
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 10px 20px 0px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 50%, transparent) !important;
  padding: 0 40px;
  border-radius: 25px;
  color: #fff !important;
  font-weight: 500;
  transition: all .3s ease;
  border: none !important;
  cursor: pointer;
}
#ryb-connect .event-card .button.waitlist {
  background-size: 130%;
  width: auto;
  background: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
  padding: 0 40px;
  border-radius: 25px;
  color: #fff !important;
  font-weight: 500;
  transition: all .3s ease;
  border: none !important;
  cursor: pointer;
  margin-left: 20px;
}
#ryb-connect .event-card .button.waitlist:hover { transition: all .3s ease; background: rgba(0, 0, 0, 0.6); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
#ryb-connect .bottom-controls .next-step-button:hover,
#ryb-connect .bottom-controls .results-button:hover,
#ryb-connect .event-card .button.enroll:hover,
#ryb-connect .wizard-stage button.registered:hover, #ryb-connect .wizard-stage button.existing-member:hover,
#ryb-connect .wizard-stage button:hover { filter: hue-rotate(15deg); transition: all .3s ease; border: none !important; }
#ryb-connect .wizard-stage button.new-user {
  border: 2px solid #5426d5;
  color: #5426d5;
  background: transparent;
  height: 48px;
  line-height: 1;
  box-shadow: none;
}
#ryb-connect .wizard-stage button.new-user:hover { filter: hue-rotate(15deg) !important; color: #5426d5 !important; transition: all .3s ease !important; background: transparent !important; }
#ryb-connect .bottom-controls .right-controls { align-items: center; }

/* [/section:buttons] */

/* [section:events] */

#ryb-connect .event-card {
  border: 2px solid rgba(0, 0, 0, .1);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}
#ryb-connect .event-card:last-of-type { margin-bottom: 0; }
#ryb-connect .event-card .date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 2px solid rgba(0, 0, 0, .1);
  padding-right: 20px;
  margin-right: 20px;
  min-width: 76px;
}
#ryb-connect .event-card .date span:first-of-type { color: rgba(0, 0, 0, .5); font-size: 18px; font-weight: 300; letter-spacing: 1px; line-height: 1; }
#ryb-connect .event-card .date span:last-of-type { font-size: 50px; letter-spacing: -3px; font-weight: 900; color: #000; line-height: 1; }
#ryb-connect .event-card .name { flex: 1; }
#ryb-connect .event-card .name h3 { font-weight: bold; color: #000; font-size: 20px; margin: 0; }
#ryb-connect .event-card .name p { margin: 0; color: rgba(0, 0, 0, .5); font-size: 16px; font-weight: 300; }
#ryb-connect .event-card > div:last-of-type { display: flex; align-items: center; }
#ryb-connect .event-card .price { font-size: 20px; font-weight: 300; color: rgba(0, 0, 0, .5); }
#ryb-connect .event-card .price span { color: black; font-weight: bold; margin-left: 5px; }
#ryb-connect .event-card .button.enroll { margin: 0 10px 0 20px; }

/* Clinics */
#ryb-connect-clinic-list .no-content p { font-style: italic; font-size: 16px; color: rgba(31, 35, 35, 0.5); font-weight: 300; text-align: center; }
#ryb-connect-clinic-list .no-content p a { color: #53d89a; }
#ryb-connect-clinic-list .no-content { text-align: center; }

/* Standalone event list widgets (camps, clinics, parents night out, etc.) */
[id$="-list-container"] {
  font-family: var(--ryb-font-family, 'Geist', sans-serif) !important;
}
[id$="-list-container"] *  {
  font-family: inherit !important;
  box-sizing: border-box;
}
[id$="-list-container"] h4 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(0, 0, 0, .4);
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
[id$="-list-container"] h4:first-child { margin-top: 0; }
[id$="-list-container"] .event-card {
  border: 2px solid rgba(0, 0, 0, .08);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
[id$="-list-container"] .event-card:hover {
  border-color: rgba(0, 0, 0, .15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
[id$="-list-container"] .event-card:last-of-type { margin-bottom: 0; }
[id$="-list-container"] .event-card .date,
[id$="-list-container"] .event-card .multi-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 2px solid rgba(0, 0, 0, .08);
  padding-right: 20px;
  margin-right: 20px;
  min-width: 76px;
}
[id$="-list-container"] .event-card .date span:first-of-type,
[id$="-list-container"] .event-card .multi-date .weekdays {
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}
[id$="-list-container"] .event-card .multi-date .weekdays .and { margin: 0 1px; }
[id$="-list-container"] .event-card .date span:last-of-type,
[id$="-list-container"] .event-card .multi-date .day {
  font-size: 32px;
  font-weight: 900;
  color: #000;
  line-height: 1.1;
  letter-spacing: -1px;
}
[id$="-list-container"] .event-card .multi-date .day .and { font-size: 20px; margin: 0 2px; font-weight: 400; color: rgba(0, 0, 0, .3); }
[id$="-list-container"] .event-card .name { flex: 1; min-width: 0; }
[id$="-list-container"] .event-card .name h3 { font-weight: 700; color: #000; font-size: 18px; margin: 0; line-height: 1.3; }
[id$="-list-container"] .event-card .name h5 { font-weight: 600; color: rgba(0, 0, 0, .7); font-size: 14px; margin: 4px 0; }
[id$="-list-container"] .event-card .name p { margin: 0; color: rgba(0, 0, 0, .4); font-size: 14px; font-weight: 400; }
[id$="-list-container"] .event-card > div:last-of-type,
[id$="-list-container"] .event-card .card-actions { display: flex; align-items: center; flex-shrink: 0; margin-left: 16px; }
[id$="-list-container"] .event-card .price { font-size: 18px; font-weight: 400; color: rgba(0, 0, 0, .45); white-space: nowrap; }
[id$="-list-container"] .event-card .price span.text { color: #000; font-weight: 700; }
[id$="-list-container"] .event-card .price span.per-day { font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, .35); }
[id$="-list-container"] .event-card .button.enroll {
  background-color: var(--ryb-primary-color, #6026d5);
  background-size: 130%;
  background-image: var(--ryb-button-bg-image);
  text-decoration: none;
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 35%, transparent);
  padding: 0 28px;
  border-radius: 25px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s ease;
  border: none !important;
  cursor: pointer;
  margin-left: 16px;
  white-space: nowrap;
}
[id$="-list-container"] .event-card .button.enroll:hover {
  filter: hue-rotate(15deg);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 45%, transparent);
  transform: translateY(-1px);
}
[id$="-list-container"] .event-card .button.waitlist {
  background: rgba(0, 0, 0, 0.65);
  text-decoration: none;
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0 28px;
  border-radius: 25px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s ease;
  border: none !important;
  cursor: pointer;
  margin-left: 16px;
  white-space: nowrap;
}
[id$="-list-container"] .event-card .button.waitlist:hover { background: rgba(0, 0, 0, 0.55); }
[id$="-list-container"] .event-card.has-breakdown,
#ryb-connect-list .event-card.has-breakdown { flex-wrap: wrap; }
[id$="-list-container"] .event-card.has-breakdown > div:last-of-type,
#ryb-connect-list .event-card.has-breakdown > div:last-of-type { display: flex; width: 100%; margin-left: 0; flex-shrink: unset; }
/* Price breakdown strip for multi-day events */
[id$="-list-container"] .event-card .price-breakdown,
#ryb-connect-list .event-card .price-breakdown {
  display: flex;
  gap: 0;
  width: 100%;
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, .06);
  margin-top: 14px;
  padding-top: 10px;
}
[id$="-list-container"] .event-card .price-breakdown .bd-cell,
#ryb-connect-list .event-card .price-breakdown .bd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-left: 1px solid rgba(0, 0, 0, .06);
  min-width: 56px;
}
[id$="-list-container"] .event-card .price-breakdown .bd-cell:first-child,
#ryb-connect-list .event-card .price-breakdown .bd-cell:first-child { border-left: none; }
[id$="-list-container"] .event-card .price-breakdown .bd-days,
#ryb-connect-list .event-card .price-breakdown .bd-days {
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, .35);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
[id$="-list-container"] .event-card .price-breakdown .bd-price,
#ryb-connect-list .event-card .price-breakdown .bd-price {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, .7);
  white-space: nowrap;
}
[id$="-list-container"] .event-card .price-breakdown .bd-cell.highlight,
#ryb-connect-list .event-card .price-breakdown .bd-cell.highlight {
  background: #f0fdf4;
  border-radius: 6px;
  border-left-color: transparent;
}
[id$="-list-container"] .event-card .price-breakdown .bd-cell.highlight .bd-days,
#ryb-connect-list .event-card .price-breakdown .bd-cell.highlight .bd-days { color: #15803d; }
[id$="-list-container"] .event-card .price-breakdown .bd-cell.highlight .bd-price,
#ryb-connect-list .event-card .price-breakdown .bd-cell.highlight .bd-price { color: #15803d; }
[id$="-list-container"] .no-content { text-align: center; }
[id$="-list-container"] .no-content p { font-style: italic; font-size: 16px; color: rgba(31, 35, 35, 0.5); font-weight: 300; }
[id$="-list-container"] .no-content p a { color: var(--ryb-primary-color, #6026d5); }
[id$="-list-container"] .loader {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

@media only screen and (max-width: 600px) {
  [id$="-list-container"] .event-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
  }
  [id$="-list-container"] .event-card .date,
  [id$="-list-container"] .event-card .multi-date {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: 0 0 10px;
    margin: 0 0 12px;
    min-width: unset;
    gap: 6px;
  }
  [id$="-list-container"] .event-card .multi-date .day { font-size: 22px; }
  [id$="-list-container"] .event-card .multi-date .weekdays { font-size: 13px; }
  [id$="-list-container"] .event-card .date span:last-of-type { font-size: 22px; letter-spacing: 0; }
  [id$="-list-container"] .event-card .date span:first-of-type { font-size: 13px; }
  [id$="-list-container"] .event-card .name { margin-bottom: 12px; }
  [id$="-list-container"] .event-card .name h3 { font-size: 16px; }
  [id$="-list-container"] .event-card > div:last-of-type,
  [id$="-list-container"] .event-card .card-actions {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-top: 12px;
  }
  [id$="-list-container"] .event-card .button.enroll,
  [id$="-list-container"] .event-card .button.waitlist {
    margin-left: 0;
  }
  [id$="-list-container"] .event-card .price-breakdown,
  #ryb-connect-list .event-card .price-breakdown {
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
  }
  [id$="-list-container"] .event-card .price-breakdown .bd-cell,
  #ryb-connect-list .event-card .price-breakdown .bd-cell {
    padding: 4px 6px;
    min-width: 44px;
  }
}

/* Event list filter bar
 * Scoped to either *-container (legacy shortcodes) or #ryb-connect-categories
 * (the modern [ryb_connect_category] shortcode that doesn't use the
 * -list-container ID convention). */
[id$="-container"] .events-filter-bar,
#ryb-connect-categories .events-filter-bar {
  font-family: var(--ryb-font-family, 'Geist', sans-serif);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}
[id$="-container"] .events-filter-bar *,
#ryb-connect-categories .events-filter-bar * {
  font-family: inherit;
  box-sizing: border-box;
}
[id$="-container"] .events-filters-wrap,
#ryb-connect-categories .events-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Quick filter button (Summer Camps) */
[id$="-container"] .events-quick-filter,
#ryb-connect-categories .events-quick-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
  border: 1px solid #fcd34d;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
[id$="-container"] .events-quick-filter:hover,
#ryb-connect-categories .events-quick-filter:hover {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  box-shadow: 0 2px 8px rgba(252, 211, 77, 0.3);
}
[id$="-container"] .events-quick-filter.active,
#ryb-connect-categories .events-quick-filter.active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
[id$="-container"] .events-quick-filter svg,
#ryb-connect-categories .events-quick-filter svg { flex-shrink: 0; }
/* Filter pill buttons */
[id$="-container"] .events-filter-pill,
#ryb-connect-categories .events-filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  padding: 10px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}
[id$="-container"] .events-filter-pill:hover,
#ryb-connect-categories .events-filter-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[id$="-container"] .events-filter-pill.active,
#ryb-connect-categories .events-filter-pill.active {
  border-color: #53d89a;
  box-shadow: 0 0 0 1px #53d89a;
  background: #f0fdf4;
}
[id$="-container"] .events-filter-pill.has-value,
#ryb-connect-categories .events-filter-pill.has-value {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
[id$="-container"] .events-filter-pill svg,
#ryb-connect-categories .events-filter-pill svg {
  flex-shrink: 0;
  color: #94a3b8;
}
[id$="-container"] .events-filter-pill.has-value svg,
#ryb-connect-categories .events-filter-pill.has-value svg { color: #16a34a; }
[id$="-container"] .events-pill-chevron,
#ryb-connect-categories .events-pill-chevron { transition: transform 0.2s ease; }
[id$="-container"] .events-filter-pill.active .events-pill-chevron,
#ryb-connect-categories .events-filter-pill.active .events-pill-chevron { transform: rotate(180deg); }
[id$="-container"] .events-pill-label,
#ryb-connect-categories .events-pill-label { color: #94a3b8; font-weight: 500; }
[id$="-container"] .events-filter-pill.has-value .events-pill-label,
#ryb-connect-categories .events-filter-pill.has-value .events-pill-label { color: #16a34a; }
[id$="-container"] .events-pill-value,
#ryb-connect-categories .events-pill-value { font-weight: 600; }
/* Clear filters button */
[id$="-container"] .events-clear-filters,
#ryb-connect-categories .events-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #fecaca;
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
[id$="-container"] .events-clear-filters:hover,
#ryb-connect-categories .events-clear-filters:hover {
  background: #fef2f2;
  border-color: #f87171;
}
/* Filter dropdown */
[id$="-container"] .events-filter-dropdown,
#ryb-connect-categories .events-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}
[id$="-container"] .events-filter-pill.active .events-filter-dropdown,
#ryb-connect-categories .events-filter-pill.active .events-filter-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
[id$="-container"] .events-filter-dropdown ul,
#ryb-connect-categories .events-filter-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
[id$="-container"] .events-filter-dropdown li,
#ryb-connect-categories .events-filter-dropdown li {
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  transition: background 0.1s ease;
}
[id$="-container"] .events-filter-dropdown li:hover,
#ryb-connect-categories .events-filter-dropdown li:hover { background: #f1f5f9; }
[id$="-container"] .events-filter-dropdown li.selected,
#ryb-connect-categories .events-filter-dropdown li.selected {
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 600;
}
[id$="-container"] .events-filter-dropdown::-webkit-scrollbar,
#ryb-connect-categories .events-filter-dropdown::-webkit-scrollbar { width: 6px; }
[id$="-container"] .events-filter-dropdown::-webkit-scrollbar-track,
#ryb-connect-categories .events-filter-dropdown::-webkit-scrollbar-track { background: transparent; }
[id$="-container"] .events-filter-dropdown::-webkit-scrollbar-thumb,
#ryb-connect-categories .events-filter-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
/* No filter results */
[id$="-list-container"] .no-filter-results,
#ryb-connect-list .no-filter-results {
  text-align: center;
  padding: 40px 20px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 15px;
}
[id$="-list-container"] .no-filter-results p,
#ryb-connect-list .no-filter-results p { margin: 0 0 12px; }
[id$="-list-container"] .reset-filters-btn,
#ryb-connect-list .reset-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
[id$="-list-container"] .reset-filters-btn:hover,
#ryb-connect-list .reset-filters-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.25);
}

@media only screen and (max-width: 768px) {
  [id$="-container"] .events-filter-bar,
  #ryb-connect-categories .events-filter-bar { padding: 12px; border-radius: 12px; margin-bottom: 16px; }
  [id$="-container"] .events-filters-wrap,
  #ryb-connect-categories .events-filters-wrap { gap: 8px; }
  [id$="-container"] .events-filter-pill,
  #ryb-connect-categories .events-filter-pill { padding: 8px 12px; font-size: 12px; gap: 6px; }
  [id$="-container"] .events-quick-filter,
  #ryb-connect-categories .events-quick-filter { padding: 8px 14px; font-size: 12px; }
}
@media only screen and (max-width: 480px) {
  [id$="-container"] .events-filters-wrap,
  #ryb-connect-categories .events-filters-wrap { gap: 6px; }
  [id$="-container"] .events-filter-pill,
  #ryb-connect-categories .events-filter-pill {
    padding: 8px 10px;
    font-size: 11px;
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    justify-content: center;
  }
  [id$="-container"] .events-quick-filter,
  #ryb-connect-categories .events-quick-filter { width: 100%; justify-content: center; }
  [id$="-container"] .events-filter-dropdown,
  #ryb-connect-categories .events-filter-dropdown { min-width: 180px; left: auto; right: 0; }
  [id$="-container"] .events-pill-label,
  #ryb-connect-categories .events-pill-label { display: none; }
}

/* [/section:events] */

/* ========================================
   Responsive
   ======================================== */

@media only screen and (max-width: 1199px) {
  #ryb-connect .grid-view .grid-results h4,
  #class-finder .grid-view .grid-results h4 { text-align: left; padding-left: 20px; font-size: 18px; background: #00000010; margin-bottom: 0; }
  #ryb-connect .grid-view .grid-results > div,
  #class-finder .grid-view .grid-results > div { border-right: none; }
}

@media only screen and (max-width: 991px) {
  #ryb-connect .wizard-stage h1 + p { font-size: 15px; }
  #ryb-connect .wizard-stage .bg-white + div { display: none; }
  #ryb-connect .user-type li { font-size: 15px !important; }
  #ryb-connect .wizard-stage.active { display: flex !important; flex-direction: column; }
  #ryb-connect .wizard-stage .stage-text { padding: 0 40px; width: 100%; left: 0; align-items: center; position: relative; box-sizing: border-box; }
  #ryb-connect .wizard-stage .bg-white { width: 100%; height: 100vh; background: #ffffff; align-items: flex-start !important; padding-top: 8%; }
  #ryb-connect .wizard-stage .bg-white .container-wrapper { max-width: 560px; padding-top: 0; }
  #ryb-connect .wizard-stage h1 { text-align: center !important; }
  #ryb-connect .wizard-stage h1 + p { text-align: center; }
  #ryb-connect .wizard-stage .line { margin-left: auto; margin-right: auto; }
  #ryb-connect .step-diamonds { justify-content: center; }
  #ryb-connect .wizard-stage h1 { font-size: 5vw; line-height: 1.3; }
  #ryb-connect .wizard-stage .stage-text p { text-align: center; }
  #ryb-connect .wizard-stage .button-section { justify-content: center; }
}

@media only screen and (max-width: 768px) {
  #ryb-connect .top-right-contacts { gap: 12px !important; font-size: 13px; }
  #ryb-connect header img { height: 28px; width: auto; }
  #ryb-connect header { padding: 0 16px !important; }
  #ryb-connect .header-funnel-title { font-size: 14px; padding-left: 12px; }
  #ryb-connect .wizard-stage h1 { font-size: clamp(30px, 7vw, 44px) !important; }

  /* Overall layout */
  body.admin-bar #ryb-connect { height: calc(100vh - 46px); }
  #ryb-connect .ryb-connect-content { height: auto !important; }

  .filter-top .filter-controls .edit-option { box-sizing: border-box; height: auto; }
  .step-view.step-two:has(.wizard-card) .full-view { padding-top: 75px !important; }
  #ryb-connect #ryb-openings-result .step-view h3.step-subtitle { font-size: 14px; }
  #ryb-connect #ryb-openings-result .step-view h2.step-title,
  #ryb-connect .full-view .filter-top .main-title { font-size: 32px; }
  #ryb-connect #ryb-openings-result .step-view .box { padding: 0; }
  #ryb-connect .wizard-stage .stage-text p { width: auto; }
  #ryb-connect .wizard-stage .button-section { width: 100%; }
  #ryb-connect .wizard-stage .button-section button { width: calc(50% - 10px); }
  #ryb-connect .wizard-stage .dropdown-wrapper select { color: #111 !important; background: #fff !important; }
  #ryb-connect .box.child .step-control { position: relative !important; }
}

@media only screen and (max-width: 500px) {
  #ryb-connect header .ryb-connect-default-wrapper {
    gap: 10px;
  }

  #ryb-connect .header-brand {
    min-width: 0;
    gap: 10px;
    flex: 1 1 auto;
  }

  #ryb-connect .header-funnel-title {
    min-width: 0;
    line-height: 1.2;
  }

  /* Keep the phone link visible on small screens. The "Need help? Call us"
     leading text is hidden via font-size:0 on the wrapping <span> below,
     while the <a href="tel:..."> child stays at font-size:13px. */
  #ryb-connect .top-right-contacts > span a[href^="tel"] {
    display: inline-flex;
    align-items: center;
  }

  #ryb-connect a:has(img) { display: flex; align-items: center; }
  #ryb-connect .wizard-card .card .name { margin-bottom: 8px; }
  #ryb-connect .wizard-card .card .location { font-size: 14px; margin-top: 0; }
  #ryb-connect .wizard-card { padding: 16px; }
  #ryb-connect .wizard-stage button:not(.form-submit) { padding: 0 16px; margin-left: 16px; font-size: 14px; }
  #ryb-connect .box.classes.show .controls { font-size: 14px; }
  #ryb-connect .box.classes.show .controls div { width: 100%; display: flex; align-items: center; justify-content: center; }
  #ryb-connect .top-right-contacts .go-back-link { font-size: 12px !important; padding: 6px 12px !important; flex-shrink: 0; }
  #ryb-connect .top-right-contacts span { flex: 1; text-align: right; font-size: 0; min-width: 0; }
  #ryb-connect .top-right-contacts span a { font-size: 13px; white-space: nowrap; }
  #ryb-connect .wizard-stage .bg-white { padding-top: 5%; }
  #ryb-connect .wizard-stage .bg-white .container-wrapper { width: 90%; }
  #ryb-connect .wizard-card .card { gap: 16px; }
  #ryb-connect .wizard-card .card .bg-image { min-width: 70px; min-height: 70px; max-width: 70px; max-height: 70px; }
}

@media only screen and (min-width: 1200px) {
  /* One scroll region on desktop: filters/session block should scroll away first.
     This is right for the full-page finder, which owns the whole viewport.

     It is wrong for the camps list widgets, which are dropped into an ordinary
     content page via shortcode and share the root id. They inherited a results
     pane locked to calc(100vh - 72px) — measured 673px on a 745px viewport —
     holding 9,005px of camps behind an inner scrollbar. Excluded by class here
     rather than overridden elsewhere, because the selector was simply too broad
     for what the rule means. */
  #class-finder:not(.template-camps) .result-content,
  #ryb-connect .result-content {
    padding: 0 24px 24px 24px !important;
    max-height: calc(100vh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  /* The widgets still want the horizontal padding the rule above supplies. */
  #class-finder.template-camps .result-content {
    padding: 0 24px 24px 24px !important;
  }

  #class-finder .result-content > *:first-child,
  #ryb-connect .result-content > *:first-child {
    margin-top: 24px;
  }

  /* Keep only day headers sticky on desktop; filters/session rows scroll normally. */
  #class-finder .result-content > .filter-top,
  #ryb-connect .result-content > .filter-top,
  #class-finder .result-content > .session-toolbar,
  #ryb-connect .result-content > .session-toolbar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  #ryb-connect .grid-view .grid-results,
  #class-finder .grid-view .grid-results {
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: relative;
    gap: 16px !important;
  }
  #ryb-connect .grid-view .grid-results h4,
  #class-finder .grid-view .grid-results h4 {
    position: sticky;
    z-index: 30;
    top: 0;
    margin-top: 0 !important;
    background: #f9fafb !important;
    box-shadow: none !important;
  }

  /* Keep floating time badges below sticky weekday headers while scrolling. */
  #class-finder .result-grid-cell.enhanced-card .class-start,
  #ryb-connect .result-grid-cell.enhanced-card .class-start {
    z-index: 8 !important;
  }
  /* Hide accordion on desktop */
  #class-finder .grid-view .grid-results .accordion,
  #ryb-connect .grid-view .grid-results .accordion {
    display: none !important;
  }
}

/* ========================================
   Mobile Improvements
   ======================================== */

@media only screen and (max-width: 1199px) {
  /* M2: Compact filter dropdowns */
  #class-finder .filter-controls .edit-option,
  #ryb-connect .filter-controls .edit-option {
    padding: 8px 12px;
    font-size: 14px;
  }

  /* M3: Compact notice bar — row instead of column */
  #class-finder .enroll-disabled-banner .enroll-disabled-banner-inner,
  #ryb-connect .enroll-disabled-banner .enroll-disabled-banner-inner {
    flex-direction: row;
    padding: 8px 12px;
    gap: 8px;
    align-items: center;
  }
  #class-finder .enroll-disabled-banner p,
  #ryb-connect .enroll-disabled-banner p {
    font-size: 13px;
    margin: 0;
  }

  /* M4: Smaller title on mobile */
  #class-finder .filter-top .main-title,
  #ryb-connect .full-view .filter-top .main-title {
    font-size: 24px !important;
    margin-bottom: 8px;
  }

  /* M5: Tighter filter section spacing */
  #class-finder .filter-top,
  #ryb-connect .filter-top {
    padding: 12px 0;
    margin-bottom: 8px;
  }
  #class-finder .filter-controls,
  #ryb-connect .filter-controls {
    gap: 8px;
  }

  /* M6: Smaller card margin */
  #class-finder .result-grid-cell,
  #ryb-connect .result-grid-cell {
    margin-top: 12px;
  }

  /* M7: Sticky day headers on mobile */
  #class-finder .grid-view .grid-results h4,
  #ryb-connect .grid-view .grid-results h4 {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--ryb-background-color, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

  /* Fix: accordion icon must be above sticky h4 to receive clicks */
  #class-finder .grid-view .grid-results .accordion,
  #ryb-connect .grid-view .grid-results .accordion {
    z-index: 10;
  }
}

/* --- Mobile: filter layout fixes --- */

@media only screen and (max-width: 768px) {
  /* Filters: horizontal rail with clearer hierarchy on mobile */
  #class-finder .filter-top,
  #ryb-connect .filter-top {
    align-items: flex-start !important;
  }
  #class-finder .filter-top .filter-controls,
  #ryb-connect .filter-top .filter-controls {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 2px 0 !important;
  }
  #class-finder .filter-top .edit-option,
  #ryb-connect .filter-top .edit-option {
    position: relative !important;
    -webkit-flex: 0 0 calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 34px 8px 12px !important;
    border-radius: 14px !important;
  }
  #class-finder .filter-top .edit-option.class,
  #class-finder .filter-top .edit-option.locations,
  #ryb-connect .filter-top .edit-option.class,
  #ryb-connect .filter-top .edit-option.locations {
    -webkit-flex-basis: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }
  /* Pill label/value hierarchy */
  #class-finder .filter-top .edit-option .label,
  #ryb-connect .filter-top .edit-option .label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }
  #class-finder .filter-top .edit-option .label::after,
  #ryb-connect .filter-top .edit-option .label::after {
    content: none !important;
  }
  #class-finder .filter-top .edit-option .value,
  #ryb-connect .filter-top .edit-option .value {
    display: block !important;
    margin-top: 3px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Hide legacy icon and render chevron affordance */
  #class-finder .filter-top .edit-option svg,
  #ryb-connect .filter-top .edit-option svg {
    display: none !important;
  }
  #class-finder .filter-top .edit-option::after,
  #ryb-connect .filter-top .edit-option::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #64748b !important;
    border-bottom: 2px solid #64748b !important;
    transform: translateY(-65%) rotate(45deg) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
  }
  #class-finder .filter-top .edit-option.active::after,
  #ryb-connect .filter-top .edit-option.active::after {
    border-color: var(--ryb-primary-color, #6e26d5) !important;
    transform: translateY(-30%) rotate(-135deg) !important;
  }

  /* Dropdown becomes bottom-sheet drawer */
  #class-finder .filter-top .dropdown,
  #ryb-connect .filter-top .dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(72vh, 620px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 995 !important;
    margin-top: 0 !important;
    -webkit-transform: translateY(100%) !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    -webkit-box-shadow: 0 -14px 32px rgba(15, 23, 42, 0.2) !important;
    box-shadow: 0 -14px 32px rgba(15, 23, 42, 0.2) !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: #fff !important;
  }
  #class-finder .filter-top .edit-option.active .dropdown,
  #ryb-connect .filter-top .edit-option.active .dropdown {
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #class-finder .filter-top .edit-option.active,
  #ryb-connect .filter-top .edit-option.active {
    z-index: 990 !important;
  }
  /* Drawer list spacing + state styles */
  #class-finder .filter-top .dropdown ul,
  #ryb-connect .filter-top .dropdown ul {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #class-finder .filter-top .dropdown ul li,
  #ryb-connect .filter-top .dropdown ul li {
    padding: 14px 18px !important;
    border-bottom: 1px solid #eef2f7 !important;
  }
  #class-finder .filter-top .dropdown:not(.classes) li.select,
  #ryb-connect .filter-top .dropdown:not(.classes) li.select {
    background: #eef2ff !important;
    color: #102a43 !important;
    font-weight: 600 !important;
  }
  #class-finder .filter-top .dropdown:not(.classes) li.select:hover,
  #ryb-connect .filter-top .dropdown:not(.classes) li.select:hover {
    background: #e4e9ff !important;
    color: #102a43 !important;
  }
  #class-finder .filter-top .dropdown:not(.classes) li.select::after,
  #ryb-connect .filter-top .dropdown:not(.classes) li.select::after {
    content: "" !important;
    float: right !important;
    width: 6px !important;
    height: 12px !important;
    border: solid var(--ryb-primary-color, #6e26d5) !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    margin-top: 2px !important;
  }
  #class-finder .filter-top .dropdown.classes li.select,
  #ryb-connect .filter-top .dropdown.classes li.select {
    background: #f8fafc !important;
    color: #102a43 !important;
    font-weight: 500 !important;
  }
  #class-finder .filter-top .dropdown.classes li.select:hover,
  #ryb-connect .filter-top .dropdown.classes li.select:hover {
    background: #eef2f7 !important;
    color: #102a43 !important;
  }
  /* Ensure label+value wrapper keeps truncation support */
  #class-finder .filter-top .edit-option > div:first-child,
  #ryb-connect .filter-top .edit-option > div:first-child {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  /* Title: reduce margin/padding */
  #class-finder .filter-top .main-title,
  #ryb-connect .full-view .filter-top .main-title {
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  /* Extra mobile bottom gutter so browser chrome does not cover last day */
  #class-finder .result-content,
  #ryb-connect .result-content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #class-finder .grid-view .grid-results,
  #ryb-connect .grid-view .grid-results {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px))
      !important;
  }

  /* Day headers: compact horizontal row */
  #class-finder .grid-view .grid-results h4,
  #ryb-connect .grid-view .grid-results h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 88px 12px 14px !important;
    min-height: 56px !important;
    border-left: none !important;
    background: #fafafb !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    margin: 0 !important;
    color: #111827 !important;
    letter-spacing: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Accordion: replace plus-circle SVG with CSS chevron */
  #class-finder .grid-view .grid-results .accordion svg,
  #ryb-connect .grid-view .grid-results .accordion svg {
    display: none !important;
  }
  #class-finder .grid-view .grid-results .accordion,
  #ryb-connect .grid-view .grid-results .accordion {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
  }
  #class-finder .grid-view .grid-results .accordion::after,
  #ryb-connect .grid-view .grid-results .accordion::after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2.5px solid var(--ryb-primary-color, #6E26D5) !important;
    border-bottom: 2.5px solid var(--ryb-primary-color, #6E26D5) !important;
    transform: rotate(-45deg) translateY(-2px) !important;
    transition: transform 0.3s ease !important;
  }
  #class-finder .grid-view .grid-results .accordion.open::after,
  #ryb-connect .grid-view .grid-results .accordion.open::after {
    transform: rotate(45deg) translateY(0) !important;
  }

  /* Class count pill inside day heading */
  #class-finder .grid-view .grid-results .day-count,
  #ryb-connect .grid-view .grid-results .day-count {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ryb-primary-color, #6e26d5) !important;
    background: rgba(110, 38, 213, 0.07) !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: 28px !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
  }

  /* No-classes day: muted appearance */
  #class-finder .grid-view .grid-results > div.no-classes-day > h4,
  #ryb-connect .grid-view .grid-results > div.no-classes-day > h4 {
    color: #9ca3af !important;
    background: #f6f7f8 !important;
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  }
  #class-finder .grid-view .grid-results > div.no-classes-day .day-count,
  #ryb-connect .grid-view .grid-results > div.no-classes-day .day-count {
    color: #a8b0ba !important;
    background: #eff2f4 !important;
    font-style: italic !important;
  }
  #class-finder .grid-view .grid-results > div.no-classes-day .accordion::after,
  #ryb-connect .grid-view .grid-results > div.no-classes-day .accordion::after {
    border-color: #ccc !important;
  }
}

/* --- Wizard Step 1: tighter mobile spacing --- */

@media only screen and (max-width: 768px) {
  #ryb-connect .wizard-stage .line { margin: 16px 0; }
  #ryb-connect .box.child .step-box { padding-bottom: 24px; }
}

@media only screen and (max-width: 500px) {
  #ryb-connect .wizard-stage h2,
  #ryb-connect .wizard-stage .box.child h2 { font-size: 18px; margin-bottom: 12px; }
}

/* --- Wizard Step 1: refined form elements --- */

/* Selects */
#ryb-connect .standard-select {
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  height: 52px !important;
  background-color: #fff !important;
  color: #1e293b !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 16px) center !important;
  background-size: 16px !important;
  padding-right: 44px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
#ryb-connect .standard-select:hover {
  border-color: rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
#ryb-connect .standard-select:focus {
  border-color: var(--ryb-primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, transparent) !important;
  outline: none !important;
}

/* Text inputs */
#registration-form .input-wrapper input {
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  height: 52px !important;
  background-color: #fff !important;
  color: #1e293b !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#registration-form .input-wrapper input:hover {
  border-color: rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
#registration-form .input-wrapper input:focus {
  border-color: var(--ryb-primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, transparent) !important;
  outline: none !important;
}
#registration-form .input-wrapper input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-weight: 400;
}

/* Checkbox */
#registration-form .checkbox-wrapper {
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
#registration-form .checkbox-wrapper input[type='checkbox'] {
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}
#registration-form .checkbox-wrapper input[type='checkbox']:hover {
  border-color: var(--ryb-primary-color) !important;
}
#registration-form .checkbox-wrapper input[type='checkbox']:checked {
  background-color: var(--ryb-primary-color) !important;
  border-color: var(--ryb-primary-color) !important;
}
#registration-form .checkbox-wrapper label {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Location dropdown — enhanced trigger */
#ryb-connect #location.location-select {
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  min-height: 52px !important;
  background-color: #fff !important;
  padding: 14px 40px 14px 20px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
}
#ryb-connect #location.location-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
#ryb-connect #location.location-select:hover {
  border-color: rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Location dropdown — enhanced panel */
#ryb-connect #location .dropdown-location {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  margin-top: 6px !important;
  max-height: 320px;
  overflow-y: auto;
}

/* Location dropdown — rich list items */
#ryb-connect #location .dropdown-location li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  transition: background-color 0.15s ease !important;
}
#ryb-connect #location .dropdown-location li:hover {
  background-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 6%, transparent) !important;
}
#ryb-connect #location .dropdown-location li::after {
  left: 20px !important;
  width: calc(100% - 40px) !important;
  height: 1px !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
}
#ryb-connect #location .dropdown-location .location-pin-icon {
  flex-shrink: 0;
  width: 16px;
  height: 20px;
  margin-top: 2px;
  color: var(--ryb-primary-color, #6026d5);
}
#ryb-connect #location .dropdown-location .location-item-name {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  margin-bottom: 2px;
}
#ryb-connect #location .dropdown-location .location-item-address {
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}

/* Location map tooltip */
#ryb-connect .location-map-tooltip {
  position: relative;
  margin-top: 6px;
  margin-left: 4px;
}
#ryb-connect .location-map-tooltip .location-map-link {
  font-size: 13px;
  color: var(--ryb-primary-color, #6026d5);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#ryb-connect .location-map-tooltip .location-map-link:hover {
  opacity: 0.8;
}
#ryb-connect .location-map-tooltip .location-map-popup {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  margin-top: 8px;
  padding: 8px;
  max-width: 500px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#ryb-connect .location-map-tooltip:hover .location-map-popup {
  opacity: 1;
}
#ryb-connect .location-map-tooltip .location-map-popup img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 8px;
}

/* CTA Button — matches production style */
#ryb-connect .wizard-stage button.form-submit {
  background: linear-gradient(to bottom, var(--ryb-primary-color), var(--ryb-secondary-color)) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  height: 48px !important;
  width: 100% !important;
  padding: 0 40px !important;
  border-radius: 9px !important;
  border: 0 !important;
  box-shadow: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 50%, transparent) 0px 10px 20px 0px !important;
  color: #fff !important;
  transition: 0.3s !important;
}
#ryb-connect .wizard-stage button.form-submit:hover {
  filter: hue-rotate(15deg) !important;
  transition: 0.3s !important;
}

/* Privacy text */
#ryb-connect .wizard-stage .privacy-policy p {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.4) !important;
  margin-top: 12px !important;
}
#ryb-connect .wizard-stage .privacy-policy a {
  color: var(--ryb-primary-color) !important;
  text-decoration-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 30%, transparent) !important;
}

/* Step-control separator */
#ryb-connect .box.child .step-control {
  border-top-color: rgba(0, 0, 0, 0.05) !important;
  padding-top: 24px !important;
}

/* --- Step 1: spacing and hierarchy polish --- */
#ryb-connect .wizard-stage .box.child .step-box--filters,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-box--filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding-bottom: 32px !important;
}

#ryb-connect .wizard-stage .box.child .step-section-title,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-section-title {
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
  align-self: stretch !important;
}

#ryb-connect .wizard-stage .box.child .step-box--form,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-box--form {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-top: 20px !important;
  margin-top: 4px !important;
}

#ryb-connect .wizard-stage .box.child .step-box--form .form-info,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-box--form .form-info {
  gap: 14px !important;
}

#ryb-connect .wizard-stage .box.child .step-box--form .input-wrapper,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-box--form .input-wrapper {
  margin: 0 !important;
}

#ryb-connect .wizard-stage .box.child .step-control--submit,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-control--submit {
  margin-top: 8px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#ryb-connect .wizard-stage .box.child .step-control--submit .button-wrapper,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-control--submit .button-wrapper {
  margin: 0 0 10px !important;
}

#ryb-connect .wizard-stage .box.child .step-control--submit .privacy-policy p,
#ryb-connect.custom-funnel .wizard-stage .box.child .step-control--submit .privacy-policy p {
  margin: 0 !important;
  line-height: 1.5 !important;
}

#ryb-connect .standard-select:active,
#ryb-connect #location.location-select:active,
#ryb-connect #registration-form .input-wrapper input:active {
  border-color: var(--ryb-primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, transparent) !important;
}

/* --- Step 0: card-style user-type options --- */

#ryb-connect .wizard-stage .user-type,
#ryb-connect.custom-funnel .wizard-stage .user-type {
  list-style-type: none !important;
  padding-inline-start: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}

#ryb-connect .wizard-stage .user-type li,
#ryb-connect.custom-funnel .wizard-stage .user-type li {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
  position: relative !important;
  border-radius: 16px !important;
  border: 1.5px solid var(--ryb-border-color, #e2e8f0) !important;
  background: #fff !important;
  color: var(--ryb-paragraph-color, #334155) !important;
  padding: 60px 24px 24px !important;
  margin: 0 !important;
  min-height: 160px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
  list-style: none !important;
}

#ryb-connect .wizard-stage .user-type li:has(a),
#ryb-connect.custom-funnel .wizard-stage .user-type li:has(a) {
  padding: 0 !important;
}

#ryb-connect .wizard-stage .user-type li a,
#ryb-connect.custom-funnel .wizard-stage .user-type li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  gap: 18px !important;
  padding: 60px 24px 24px !important;
  color: inherit !important;
  text-decoration: none !important;
  border-radius: inherit !important;
  position: relative !important;
}

#ryb-connect .wizard-stage .user-type .user-type-label,
#ryb-connect.custom-funnel .wizard-stage .user-type .user-type-label {
  display: block !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  max-width: 90% !important;
  color: inherit !important;
}

#ryb-connect .wizard-stage .user-type .user-type-icon,
#ryb-connect.custom-funnel .wizard-stage .user-type .user-type-icon {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  width: 24px !important;
  height: 24px !important;
  background-color: var(--ryb-primary-color, #6026d5) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

#ryb-connect .wizard-stage .user-type .user-type-icon--new,
#ryb-connect.custom-funnel .wizard-stage .user-type .user-type-icon--new {
  -webkit-mask-image: url("../icons/step0-new-user.svg") !important;
  mask-image: url("../icons/step0-new-user.svg") !important;
}

#ryb-connect .wizard-stage .user-type .user-type-icon--registered,
#ryb-connect.custom-funnel .wizard-stage .user-type .user-type-icon--registered {
  -webkit-mask-image: url("../icons/step0-registered.svg") !important;
  mask-image: url("../icons/step0-registered.svg") !important;
}

#ryb-connect .wizard-stage .user-type .point,
#ryb-connect.custom-funnel .wizard-stage .user-type .point {
  width: 18px !important;
  height: 18px !important;
  background-color: #fff !important;
  border: 1.5px solid var(--ryb-border-color, #cbd5e1) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
}

#ryb-connect .wizard-stage .user-type li:hover,
#ryb-connect .wizard-stage .user-type li:focus-visible,
#ryb-connect .wizard-stage .user-type li:focus-within,
#ryb-connect.custom-funnel .wizard-stage .user-type li:hover,
#ryb-connect.custom-funnel .wizard-stage .user-type li:focus-visible,
#ryb-connect.custom-funnel .wizard-stage .user-type li:focus-within {
  border-color: var(--ryb-primary-color, #6026d5) !important;
  background-color: #fff !important;
  color: var(--ryb-dark-color, #1e293b) !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 12%, transparent) !important;
  transform: translateY(-1px) !important;
}

#ryb-connect .wizard-stage .user-type li:hover .point,
#ryb-connect .wizard-stage .user-type li:focus-visible .point,
#ryb-connect .wizard-stage .user-type li:focus-within .point,
#ryb-connect.custom-funnel .wizard-stage .user-type li:hover .point,
#ryb-connect.custom-funnel .wizard-stage .user-type li:focus-visible .point,
#ryb-connect.custom-funnel .wizard-stage .user-type li:focus-within .point {
  background-color: var(--ryb-primary-color, #6026d5) !important;
  border-color: var(--ryb-primary-color, #6026d5) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 15%, transparent) !important;
}

#ryb-connect .wizard-stage .user-type li[tabindex]:focus-visible,
#ryb-connect.custom-funnel .wizard-stage .user-type li[tabindex]:focus-visible,
#ryb-connect .wizard-stage .user-type li a:focus-visible,
#ryb-connect.custom-funnel .wizard-stage .user-type li a:focus-visible {
  outline: none !important;
}

@media only screen and (max-width: 768px) {
  #ryb-connect .wizard-stage .user-type,
  #ryb-connect.custom-funnel .wizard-stage .user-type {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #ryb-connect .wizard-stage .user-type li,
  #ryb-connect.custom-funnel .wizard-stage .user-type li {
    min-height: 140px;
    padding: 56px 20px 20px !important;
  }

  #ryb-connect .wizard-stage .user-type li a,
  #ryb-connect.custom-funnel .wizard-stage .user-type li a {
    padding: 56px 20px 20px !important;
  }

  #ryb-connect .wizard-stage .user-type .user-type-label,
  #ryb-connect.custom-funnel .wizard-stage .user-type .user-type-label {
    font-size: 16px !important;
  }
}

/* Step 1 container */
#ryb-connect.custom-funnel .box.child .step-control {
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  padding: 32px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Submit button */
#ryb-connect.custom-funnel .wizard-stage button.form-submit {
  background: linear-gradient(to bottom, var(--ryb-primary-color), var(--ryb-secondary-color)) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  height: 48px !important;
  width: 100% !important;
  padding: 0 40px !important;
  border-radius: 9px !important;
  border: 0 !important;
  box-shadow: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 50%, transparent) 0px 10px 20px 0px !important;
  color: #fff !important;
  transition: 0.3s !important;
  cursor: pointer !important;
}
#ryb-connect.custom-funnel .wizard-stage button.form-submit:hover {
  filter: hue-rotate(15deg) !important;
  transition: 0.3s !important;
}

/* Privacy text */
#ryb-connect.custom-funnel .wizard-stage .privacy-policy p {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.4) !important;
  margin-top: 12px !important;
}
#ryb-connect.custom-funnel .wizard-stage .privacy-policy a {
  color: var(--ryb-primary-color) !important;
  text-decoration-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 30%, transparent) !important;
}

/* Form inputs */
#ryb-connect.custom-funnel #registration-form .input-wrapper input {
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  height: 52px !important;
  background-color: #fff !important;
  color: var(--ryb-dark-color, #1e293b) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#ryb-connect.custom-funnel #registration-form .input-wrapper input:focus {
  border-color: var(--ryb-primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, transparent) !important;
  outline: none !important;
}

/* Select dropdowns */
#ryb-connect.custom-funnel .standard-select {
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  height: 52px !important;
  background-color: #fff !important;
  color: var(--ryb-dark-color, #1e293b) !important;
  cursor: pointer !important;
}

/* Form section divider */
#ryb-connect.custom-funnel .wizard-stage .form-box {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-top: 24px !important;
}
#ryb-connect.custom-funnel .wizard-stage .form-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Step diamonds */
#ryb-connect.custom-funnel .step-diamonds {
  display: flex !important;
  gap: 8px !important;
  margin: 28px 0 !important;
}
#ryb-connect.custom-funnel .step-diamonds span {
  width: 10px !important;
  height: 10px !important;
  background-color: var(--ryb-primary-color, #6026d5) !important;
  transform: rotate(45deg) !important;
  border-radius: 2px !important;
}

/* Mobile overrides */
@media only screen and (max-width: 768px) {
  #ryb-connect.custom-funnel .box.child .step-control { position: relative !important; }
  #ryb-connect.custom-funnel .user-type li { font-size: 15px !important; }
}

/* Session-status enroll buttons — rounded style, must use longhand to beat design.css:653 */
#class-finder .result-grid-cell.enhanced-card .control-button button.enroll-class,
#class-finder .result-grid-cell.enhanced-card .control-button a.enroll-class {
  border: none !important;
  border-radius: 12px !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px !important;
  box-shadow: 0 4px 12px rgba(67, 149, 233, 0.2) !important;
  transition: all 0.2s ease !important;
}
#class-finder .result-grid-cell.enhanced-card .control-button button.enroll-class:hover,
#class-finder .result-grid-cell.enhanced-card .control-button a.enroll-class:hover {
  box-shadow: 0 6px 16px rgba(67, 149, 233, 0.3) !important;
  transform: translateY(-1px);
}

/* ==================== Mobile: Two-Column Card Overrides ==================== */
@media (max-width: 767px) {

  /* Hide info tooltip icon on mobile (tooltip doesn't work on touch) */
  #class-finder .result-grid-cell.enhanced-card .info,
  #ryb-connect .result-grid-cell.enhanced-card .info {
    display: none !important;
  }

  /* h3 — remove desktop spacing, align left */
  #class-finder .result-grid-cell.enhanced-card h3,
  #ryb-connect .result-grid-cell.enhanced-card h3 {
    margin: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    justify-content: flex-start;
  }

  /* Button — compact for mobile card */
  #class-finder .result-grid-cell.enhanced-card .control-button button.enroll-class,
  #class-finder .result-grid-cell.enhanced-card .control-button a.enroll-class,
  #ryb-connect .result-grid-cell.enhanced-card .control-button button.enroll-class,
  #ryb-connect .result-grid-cell.enhanced-card .control-button a.enroll-class {
    padding: 6px 16px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
  }
}

/* ============================================================================
   Embeddable Form — [ryb_connect_form]
   Reuses #ryb-connect.custom-funnel styling. Only overrides for inline embed.
   ============================================================================ */

/* Embed form: don't take over the full page like the funnel */
.custom-funnel.ryb-embed-form {
  position: relative;
  height: auto;
  min-height: auto;
}

.custom-funnel.ryb-embed-form .wizard-stage {
  display: block;
  min-height: auto;
  height: auto;
}

.custom-funnel.ryb-embed-form .wizard-stage .bg-white {
  display: flex;
  justify-content: center;
  min-height: auto;
  height: auto;
  padding: 40px 20px;
}

.custom-funnel.ryb-embed-form .wizard-stage .bg-white .container-wrapper {
  max-width: 560px;
  width: 100%;
  min-height: auto;
  display: flex;
  flex-direction: column;
}

/* No side image on embedded form */
.custom-funnel.ryb-embed-form .wizard-stage > div:last-child:not(.bg-white) {
  display: none;
}

/* Show form info immediately (no step toggle needed) */
.custom-funnel.ryb-embed-form .form-box .form-info {
  display: block !important;
  opacity: 1 !important;
}

/* Show child box immediately */
.custom-funnel.ryb-embed-form .box.child {
  display: block;
}

/* Textarea — match input styling */
.custom-funnel.ryb-embed-form .input-wrapper textarea {
  width: 100%;
  padding: 0 16px !important;
  font-size: 16px;
  min-height: 100px;
  border-radius: 5px;
  outline: none;
  border: 1px solid var(--ryb-border-color, #d4d1db);
  font-family: var(--ryb-font-family, 'Geist', sans-serif);
  resize: vertical;
  padding-top: 12px !important;
}

/* Radio/checkbox options within embedded form */
.custom-funnel.ryb-embed-form .ryb-form-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.custom-funnel.ryb-embed-form .ryb-form-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ryb-paragraph-color, #514c5b);
  cursor: pointer;
}

.custom-funnel.ryb-embed-form .ryb-form-option input[type="radio"],
.custom-funnel.ryb-embed-form .ryb-form-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ryb-primary-color, #6026d5);
}

/* Success message */
.custom-funnel.ryb-embed-form .ryb-form-success {
  text-align: center;
  padding: 32px 16px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ryb-dark-color, #110627);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  margin-top: 16px;
}

/* Loading state on submit button */
.custom-funnel.ryb-embed-form .form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.custom-funnel.ryb-embed-form .form-submit.loading {
  position: relative;
  color: transparent !important;
}

.custom-funnel.ryb-embed-form .form-submit.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ryb-spin 0.6s linear infinite;
}

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

/* Ensure step-control and submit button are always visible in embed */
.custom-funnel.ryb-embed-form .box.child .step-control {
  position: relative !important;
  bottom: auto !important;
  background: transparent !important;
  padding: 24px 0 0 !important;
}

.custom-funnel.ryb-embed-form .box.child .step-control .button-wrapper {
  margin: 0 0 10px !important;
}

.custom-funnel.ryb-embed-form button.form-submit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* No background variant: [ryb_connect_form id="1" bg="off"] */
.custom-funnel.ryb-embed-form.ryb-embed-no-bg .wizard-stage .bg-white {
  background: transparent !important;
  padding: 0;
}

/* --- Minimal style override --- */
.custom-funnel.ryb-embed-form.ryb-form--minimal {
  --ryb-primary-color: #2563eb;
  --ryb-secondary-color: #1e40af;
  --ryb-dark-color: #1f2937;
  --ryb-paragraph-color: #4b5563;
  --ryb-border-color: #d1d5db;
  --ryb-background-color: #ffffff;
  --ryb-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ryb-button-bg-image: none;
  --ryb-select-arrow-image: none;
  --ryb-checkbox-image: none;
}