/* Reset inherited theme/framework styles */
#class-finder {
  all: revert;
  display: flex;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2323;
  box-sizing: border-box;
}

#class-finder *,
#class-finder *::before,
#class-finder *::after {
  box-sizing: inherit;
}

:where(#class-finder) :where(h1, h2, h3, h4, h5, h6, p, button, a, div, span) {
  font-family: "Roboto", sans-serif;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  margin: revert;
  letter-spacing: revert;
}

.bg-white {
  background-color: #fff;
}

#class-finder.full-view {
  padding: 0 !important;
  overflow: hidden;
}

/* The camps list widgets are embedded in an ordinary content page, so the
   section has to grow with its list rather than clip it. Paired with the
   `:not(.template-camps)` exclusion on the desktop results-pane clamp in
   ryb-connect-design.css — without both, the section keeps the clipped height
   even once the pane inside it is free to expand. */
#class-finder.template-camps.full-view {
  overflow: visible;
}

#class-finder .filters {
  position: relative;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  width: 350px;
  text-align: left;
  border-right: 1px solid #0000000d;
}

#class-finder .filters .filter-box {
  font-weight: 300;
  font-size: 12px;
  line-height: 14.52px;
  color: #1f232380;
  min-height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #0000000d;
  display: flex;
  justify-content: space-between;
}

#class-finder .filters .filter-box.multiple {
  padding: 20px 20px 0;
  align-items: start;
}

#class-finder .filters .filter-control {
  color: #53d89a;
  cursor: pointer;
}

#class-finder .filters .filter-box label {
  font-size: 14px;
  line-height: 17.94px;
}

#class-finder .filters .filter-box .selected-locations {
  margin-top: 5px;
}

#class-finder .result-content {
  width: 100%;
  padding: 20px;
  text-align: left;
  overflow: auto;
}
#class-finder .results {
  width: 100%;
}

#class-finder .filters label {
  font-size: 16px;
  font-weight: 300;
  color: #1f2323bf;
}

#class-finder .result-content h2 {
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 0;
}

#class-finder .result-content p {
  margin-top: 0;
  color: #1f2323bf;
}

#class-finder .result-content .bar {
  background: #0000000a;
  height: 44px;
  border-radius: 10px;
  margin-bottom: 20px;
}

#class-finder .results .result-card {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid #0000001a;
  width: auto;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}

#class-finder .results .result-card > p {
  display: none;
}

#class-finder .results .result-card .overview {
  grid-column: span 3 / span 3;
}

#class-finder .results .result-card .overview h2,
#ryb-connect
  #ryb-openings-result
  .step-view
  #class-finder
  .results
  .result-card
  .overview
  h2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: #000;
}

#class-finder .results .result-card .overview p {
  font-size: 12px;
  font-weight: 300;
  line-height: 15px;
  color: #000000bf;
}

#class-finder .results .result-card .age,
#class-finder .results .result-card .gender,
#class-finder .results .result-card .price,
#class-finder .results .result-card .button {
  grid-column: span 1 / span 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#class-finder .results .result-card .age .text,
#class-finder .results .result-card .gender .text {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
}

#class-finder .results .result-card .price {
  line-height: 20px;
  font-size: 16px;
  font-weight: 400;
}

#class-finder .results .result-card .price .text {
  font-weight: 700;
}

#class-finder .results .result-card .calendar {
  grid-column: span 2 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#class-finder .results .result-card .button {
  justify-content: end;
}

#class-finder .results .result-card .calendar .text {
  font-size: 13px;
  line-height: 16px;
}

#class-finder button.enroll-class,
#class-finder a.enroll-class {
  background: linear-gradient(228.01deg, #56dad4 0%, #53d89a 82.24%);
  box-shadow: 0px 10px 20px 0px #56dac980;
  width: 100px;
  height: 40px;
  border-radius: 10px;
  transition: 0.3s all;
  color: #fff;
  cursor: pointer;
  border: none;
}

#class-finder button.enroll-class.waitlist {
  background: linear-gradient(228.01deg, #a4a4a4 0%, #808080 82.24%);
  box-shadow: 0px 10px 20px 0px #a4a4a44d;
}

#class-finder button.trial-full {
  cursor: default !important;
  opacity: 0.7;
  pointer-events: none;
}
#class-finder .result-card .icon {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

#class-finder button.enroll-class:hover,
#class-finder a.enroll-class:hover {
  box-shadow: none;
  transition: 0.3s all;
}

#class-finder button.enroll-class.disabled-enroll {
  background: linear-gradient(228.01deg, #a4a4a4 0%, #808080 82.24%);
  box-shadow: none;
  cursor: default;
  opacity: 0.7;
  pointer-events: none;
}

#class-finder .enroll-disabled-banner {
  margin: 16px 20px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8faf4 0%, #e0f5fb 100%);
  border: 1px solid #b8edd8;
  overflow: hidden;
}

#class-finder .enroll-disabled-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
}

#class-finder .enroll-disabled-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #56dad4 0%, #53d89a 100%);
  border-radius: 12px;
  color: #fff;
}

#class-finder .enroll-disabled-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

#class-finder .enroll-disabled-banner p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}

#class-finder .enroll-disabled-banner .enroll-disabled-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(228.01deg, #56dad4 0%, #53d89a 82.24%);
  box-shadow: 0 4px 14px 0 rgba(86, 218, 201, 0.4);
  transition: all 0.25s ease;
  white-space: nowrap;
}

#class-finder .enroll-disabled-banner .enroll-disabled-button:hover {
  box-shadow: 0 6px 20px 0 rgba(86, 218, 201, 0.55);
  transform: translateY(-1px);
}

#class-finder .session-portal-banner {
  margin: 0 0 16px;
  border: 1px solid #f0ddaa;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff9eb 0%, #fff4d9 100%);
  overflow: hidden;
}

#class-finder .session-portal-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}

#class-finder .session-portal-banner p {
  margin: 0;
  color: #5b3e00;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

#class-finder .session-portal-banner-cta {
  border: 0;
  border-radius: 10px;
  background: #1e3a5f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 16px;
  min-width: 94px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#class-finder .session-portal-banner-cta:hover {
  opacity: 0.92;
}

#class-finder .session-portal-banner-cta.disabled,
#class-finder .session-portal-banner-cta:disabled {
  cursor: default;
  opacity: 0.55;
}

@media (max-width: 600px) {
  #class-finder .enroll-disabled-banner-inner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  #class-finder .enroll-disabled-content {
    flex-direction: column;
    gap: 14px;
  }

  #class-finder .session-portal-banner-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }

  #class-finder .session-portal-banner p {
    font-size: 13px;
    text-align: center;
  }

  #class-finder .session-portal-banner-cta {
    width: 100%;
  }
}

/* Handles the overlay
 * Refined backdrop: dark slate with backdrop-blur for a premium feel,
 * replacing the previous teal gradient. */
.ryb-connect-overlay {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: -99;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
}

.ryb-connect-overlay.show {
  opacity: 1;
  z-index: 99;
  pointer-events: all;
}

.ryb-connect-overlay .ryb-connect-modal {
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: #fff;
  border-radius: 18px;
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
  height: auto;
  padding: 32px 32px 28px;
  max-height: 86vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45),
              0 18px 32px -16px rgba(15, 23, 42, 0.25);
  font-feature-settings: "tnum" 1, "kern" 1;
}

.ryb-connect-overlay .ryb-connect-modal {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ryb-connect-overlay.show .ryb-connect-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ryb-connect-modal .modal-title {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: -0.2px;
  margin-top: 0;
  margin-bottom: 4px;
}

.ryb-connect-modal .modal-address {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

/* Architectural price block — tabular numerals for clean alignment,
 * heavy weight on the dollar value, lighter weight on the per-unit suffix. */
.ryb-connect-modal .modal-total-price {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ryb-connect-modal .modal-total-price > span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-right: 1px;
}

.ryb-connect-modal .modal-price {
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.ryb-connect-modal .modal-price-suffix {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 2px;
}

.ryb-connect-modal .main-modal-data .age,
.ryb-connect-modal .main-modal-data .gender,
.ryb-connect-modal .main-modal-data .modal-meeting-day {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: #0f172a;
}

.ryb-connect-modal .main-modal-data .modal-start-time,
.ryb-connect-modal .main-modal-data .modal-end-time {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
}

/* Slightly mute the time parens. */
.ryb-connect-modal .main-modal-data .calendar .modal-times {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
}

/* Smaller, dimmer stat icons so they read as supportive rather than
 * shouting. The previous green tint clashed with the brand accents. */
.ryb-connect-modal .main-modal-data .icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.ryb-connect-modal .main-modal-data .icon svg {
  width: 16px;
  height: 16px;
}

.ryb-connect-modal .top-modal-data {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}
.ryb-connect-modal .top-modal-data .left {
  flex: 1;
  min-width: 0;
}
.ryb-connect-modal .top-modal-data .modal-total-price {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.ryb-connect-modal .top-modal-data > p {
  display: none;
}

.ryb-connect-modal .top-modal-data .left {
  text-align: left;
}

.ryb-connect-modal .main-modal-data {
  margin-top: 0;
  margin-bottom: 18px;
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.ryb-connect-modal .line {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 4px 0 18px;
}

.ryb-connect-modal .modal-description-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: #0f172a;
  letter-spacing: -0.1px;
  margin: 0 0 8px;
  text-align: left;
}

.ryb-connect-modal .modal-description {
  font-weight: 400;
  font-size: 13px !important;
  line-height: 1.55;
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

.ryb-connect-modal .main-modal-data > p {
  display: none;
}

.ryb-connect-modal .main-modal-data .age,
.ryb-connect-modal .main-modal-data .gender,
.ryb-connect-modal .main-modal-data .calendar {
  display: flex;
  gap: 5px;
}
.ryb-connect-modal .main-modal-data .age .text,
.ryb-connect-modal .main-modal-data .gender .text,
.ryb-connect-modal .main-modal-data .calendar .text {
  text-align: left;
}
.ryb-connect-modal .main-modal-data .age > p,
.ryb-connect-modal .main-modal-data .gender > p,
.ryb-connect-modal .main-modal-data .calendar > p {
  display: none;
}

.ryb-connect-modal .main-modal-data .age,
.ryb-connect-modal .main-modal-data .calendar {
  grid-column: span 3 / span 3;
}

.ryb-connect-modal .main-modal-data .calendar {
  margin-top: -4px;
}

.ryb-connect-modal .main-modal-data .calendar .text {
  margin-top: -3px;
}

.ryb-connect-modal .main-modal-data .gender {
  grid-column: span 2 / span 2;
}

.ryb-connect-modal .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: stretch;
  align-items: center;
  margin-top: 24px;
}

.ryb-connect-modal .registration-form,
.ryb-connect-modal .modal-content {
  opacity: 0;
  pointer-events: none;
  height: 0;
  transform: translateY(-20px);
  transition: 0.4s all;
}

.ryb-connect-modal .registration-form.show-field,
.ryb-connect-modal .modal-content.show-field {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  height: auto;
  transition: 0.4s all;
}

.ryb-connect-modal .registration-form .form-name {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.1px;
  text-align: left;
  margin-bottom: 18px;
  margin-top: 6px;
}

.ryb-connect-modal form input {
  width: 100%;
  box-sizing: border-box;
}

.ryb-connect-modal form {
  text-align: right;
}

.ryb-connect-modal .modal-actions .register-button {
  width: 100%;
  border: 0px solid transparent;
  background-color: #56dad4;
  color: #fff;
  font-size: 15px;
  line-height: 17.58px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  border-radius: 20px;
  height: 50px;
  box-shadow: 0px 10px 20px 0px #56dad466;
  transition: 0.4s all;
}

.ryb-connect-modal .modal-actions .register-button:hover,
.ryb-connect-modal .modal-actions .already-registered-button:hover {
  box-shadow: none;
  transition: 0.4s all;
}

.ryb-connect-modal .modal-actions .already-registered-button {
  width: 100%;
  border: 0px solid transparent;
  background-color: #53d89a;
  color: #fff;
  font-size: 15px;
  line-height: 17.58px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  border-radius: 20px;
  height: 50px;
  box-shadow: 0px 10px 20px 0px #53d89a66;
  transition: 0.4s all;
}

#registration-form {
  padding-top: 4px;
}

#registration-form .input-wrapper {
  margin-bottom: 12px;
}

/* Field labels — small all-caps, except the SMS consent label which is
 * a checkbox label with sentence-case body copy. */
#registration-form .input-wrapper > label:not(.sms-consent-label) {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 6px;
}

#registration-form .input-wrapper input[type="text"],
#registration-form .input-wrapper input[type="email"],
#registration-form .input-wrapper input[type="tel"] {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  /* Slightly stronger default border so the input feels like a deliberate
     UI element rather than barely-there decoration. */
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#registration-form .input-wrapper input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

#registration-form .input-wrapper input:hover {
  border-color: #CBD5E1;
}

#registration-form .input-wrapper input:focus {
  /* Focus state — brand purple ring (was neutral slate). Tells the user the
     form is on-brand and active. */
  outline: none;
  border-color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 18%, transparent);
}

#registration-form .checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

#registration-form .checkbox-wrapper label {
  font-size: 14px;
}

/* ========================================================================
 * Enroll modal — refinements
 * ====================================================================== */

/* Visually-hidden utility for screen-reader-only labels (close button, etc.). */
.ryb-connect-modal .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Larger, easier-to-tap close button, anchored to the modal corner. */
.ryb-connect-modal .close-modal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.55);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  font-size: 0;
  line-height: 0;
  z-index: 2;
}
.ryb-connect-modal .close-modal:hover {
  background: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.85);
  transform: rotate(90deg);
}
.ryb-connect-modal .close-modal:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}
/* Hide any stray legacy "Close" text (e.g. cached partial without the
 * visually-hidden span). The icon is the only visible thing. */
.ryb-connect-modal .close-modal::before,
.ryb-connect-modal .close-modal::after {
  content: none;
}

/* Reserve space for the close button so the title doesn't overlap. */
.ryb-connect-modal .top-modal-data {
  padding-right: 48px;
}

/* Date-range hero — the most actionable piece of info ("which week is this?")
 * gets a strong, ticket-stub treatment. Sits between the stats row and the
 * price breakdown. */
.ryb-connect-modal .modal-date-range {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.1px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.ryb-connect-modal .modal-date-range .year {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.ryb-connect-modal .modal-date-range[hidden] {
  display: none;
}

/* Price breakdown inside the modal — a tier ladder. The highlighted (max
 * days) cell gets a soft green chip + a "Best value" ribbon to nudge users
 * toward the full week. */
.ryb-connect-modal .modal-price-breakdown {
  display: flex;
  gap: 0;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 22px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.ryb-connect-modal .modal-price-breakdown[hidden] {
  display: none;
}
.ryb-connect-modal .modal-price-breakdown .bd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  min-width: 64px;
  flex: 1 1 auto;
  gap: 3px;
  position: relative;
  border-radius: 8px;
}
.ryb-connect-modal .modal-price-breakdown .bd-cell:first-child {
  border-left: none;
}
.ryb-connect-modal .modal-price-breakdown .bd-days {
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ryb-connect-modal .modal-price-breakdown .bd-price {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.ryb-connect-modal .modal-price-breakdown .bd-cell.highlight {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-left-color: transparent;
}
.ryb-connect-modal .modal-price-breakdown .bd-cell.highlight + .bd-cell {
  border-left-color: transparent;
}
.ryb-connect-modal .modal-price-breakdown .bd-cell.highlight .bd-days,
.ryb-connect-modal .modal-price-breakdown .bd-cell.highlight .bd-price {
  color: #15803d;
}
.ryb-connect-modal .modal-price-breakdown .bd-cell.highlight::before {
  content: "Best value";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: #15803d;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* "Back" button inside the registration form — quiet ghost button. */
.ryb-connect-modal .modal-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px 4px 0;
  margin: 0 0 4px -4px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.ryb-connect-modal .modal-back-button:hover {
  color: rgba(0, 0, 0, 0.85);
  background: rgba(0, 0, 0, 0.04);
}
.ryb-connect-modal .modal-back-button:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* Button hierarchy: solid primary for "New Registration",
 * outline/secondary for "Already Registered".
 * The primary CTA gets a small right-arrow affordance on hover. */
.ryb-connect-modal .modal-actions .register-button,
.ryb-connect-modal .modal-actions .already-registered-button {
  flex: 1 1 0;
  min-height: 50px;
  height: auto;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.15s ease,
              background 0.15s ease,
              border-color 0.15s ease;
}
.ryb-connect-modal .modal-actions .already-registered-button {
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: none;
}
.ryb-connect-modal .modal-actions .already-registered-button:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}
.ryb-connect-modal .modal-actions .register-button:hover {
  transform: translateY(-1px);
}
.ryb-connect-modal .modal-actions .register-button::after {
  content: "→";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin-left: 2px;
  transform: translateX(0);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.ryb-connect-modal .modal-actions .register-button:hover::after {
  transform: translateX(3px);
}

/* SMS consent row — checkbox + label, vertically aligned, small print. */
#registration-form .sms-consent-wrapper {
  display: block;
  margin: 6px 0 12px;
}
#registration-form .sms-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  user-select: none;
  text-align: left;
}
#registration-form .sms-consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
}
#registration-form .sms-consent-label .sms-consent-text {
  flex: 1;
}

/* Mobile: stack the icon-stat row vertically below ~480px so multi-day
 * meeting labels and time ranges have room to breathe. */
@media only screen and (max-width: 480px) {
  .ryb-connect-overlay .ryb-connect-modal {
    padding: 20px 18px;
    border-radius: 12px;
  }
  .ryb-connect-modal .top-modal-data {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-right: 40px;
  }
  .ryb-connect-modal .modal-total-price {
    align-self: flex-start;
  }
  .ryb-connect-modal .main-modal-data {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 18px;
  }
  .ryb-connect-modal .main-modal-data .age,
  .ryb-connect-modal .main-modal-data .gender,
  .ryb-connect-modal .main-modal-data .calendar {
    width: 100%;
  }
  .ryb-connect-modal .modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .ryb-connect-modal .modal-price-breakdown .bd-cell {
    min-width: 0;
    padding: 4px 8px;
  }
}

.inner-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: 0.4s;
  background-color: #fff;
  box-shadow: 4px 0 6px -1px rgb(0 0 0 / 0.1), 2px 0 4px -2px rgb(0 0 0 / 0.1);
  border-left: 1px solid #0000000d;
}

.inner-filter.active {
  left: 100%;
  pointer-events: all;
  opacity: 1;
  transition: 0.4s;
}

.filter-flex {
  display: flex;
  gap: 15px;
}

.back-arrow {
  font-size: 21px;
}

.back-arrow:hover {
  cursor: pointer;
  color: #53d89a;
  transition: 0.4s;
}

#age-radio,
#class-type,
#locations {
  padding: 10px;
}

#age-radio input[type="radio"] {
  accent-color: #53d89a;
  background-color: #fff;
}

#age-radio input[type="radio"]:focus-visible,
#age-radio input[type="radio"]:focus {
  outline: none;
}

#age-radio input[type="radio"]:after {
  width: 9px;
  height: 9px;
  border-radius: 15px;
  top: 0;
  left: 0;
  position: relative;
  background-color: #d1d3d1;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 3px solid white;
  outline: 1px solid #d1d3d1;
  transition: 0.4s all;
  cursor: pointer;
}

#age-radio input[type="radio"]:disabled:after {
  pointer-events: none;
  background-color: #ededed;
  outline: 1px solid #ededed;
}

#age-radio input[type="radio"]:disabled + label {
  color: #ededed;
}

#age-radio input[type="radio"]:checked:after {
  width: 9px;
  height: 9px;
  border-radius: 15px;
  top: 0;
  left: 0;
  position: relative;
  background-color: #53d89a;
  content: "";
  display: inline-block;
  visibility: visible;
  outline: 1px solid #d1d3d1;
  border: 3px solid #fff;
  transition: 0.4s all;
}

#class-type input:focus-visible,
#class-type input:focus,
#locations input:focus-visible,
#locations input:focus {
  border: none;
  outline: none;
}

#class-type label,
#locations label {
  position: relative;
  cursor: pointer;
}

#class-type input,
#locations input {
  opacity: 0;
  cursor: pointer;
}

#class-type label:hover .custom-checkbox,
#locations label:hover .custom-checkbox {
  background-color: #ededed;
  transition: 0.2s all;
}

#class-type .custom-checkbox,
#locations .custom-checkbox {
  position: absolute;
  top: -1px;
  left: -1px;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid #ededed;
  cursor: pointer;
  transition: 0.2s all;
}

#class-type .custom-checkbox .check,
#locations .custom-checkbox .check {
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  height: 10px;
  width: 4px;
}

#class-type .custom-checkbox:after,
#locations .custom-checkbox:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#class-type .input-option,
#locations .input-option {
  margin-bottom: 10px;
}

#class-type input:checked ~ .custom-checkbox,
#locations input:checked ~ .custom-checkbox {
  background-color: #53d89a;
  transition: 0.2s all;
  border: 1px solid #53d89a;
}

.kids-class-type {
  text-transform: capitalize;
}

.filter-locations .filter-control.disabled {
  opacity: 0;
  pointer-events: none;
}

.empty-results .result-card {
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
}

.empty-results .result-card.last-card {
  opacity: 0.25;
}

.bar-text {
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 15.73px;
}
.bar {
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
}

.bar-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bar-col .bar-days {
  display: flex;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
}

.bar .day {
  border-radius: 7px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  transition: 0.3s all;
  border: 1px solid #0000001a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-days .day,
.bar-days .day.weekend {
  cursor: pointer;
  transition: 0.4s;
}

.bar-days .day:hover,
.bar-days .day.weekend:hover {
  transition: 0.4s;
  background-color: #dfe7e3;
}

.bar .day.weekend {
  background-color: #effcfb;
  border: 1px solid #c0e3d3;
  transition: 0.3s all;
}

.bar .day.active {
  background-color: #53d89a;
  border: 1px solid #53d89a;
  color: #fff;
  transition: 0.3s all;
}

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  outline: 1px solid #0000001a;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: -1px;
  bottom: -1px;
  background-color: #0000001a;
  border: 1px solid #0000001a;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #fff;
}

input:checked + .slider:before {
  background-color: #53d89a;
}

input:focus + .slider {
  box-shadow: 0 0 1px #fff;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 5px;
}

.slider.round:before {
  border-radius: 5px;
}

.filter-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1900px;
}

.grid-view-select {
  display: flex;
  justify-content: end;
  max-width: 1900px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 10px;
  padding-bottom: 10px;
}

.grid-view-select span {
  cursor: pointer;
}

.grid-view-select .active {
  font-weight: 600;
}

.grid-view-select .label {
  font-weight: 200;
  cursor: auto;
}

#ryb-connect .grid-view,
#ryb-connect .list-view {
  margin-left: auto;
  margin-right: auto;
  max-width: 1900px;
}

#ryb-connect .full-view .filter-top .main-title {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}

.grid-view .grid-results {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #00000026;
}

.grid-view .grid-results > div {
  grid-column: span 1 / span 1;
  border: 1px solid #00000026;
  position: relative;
}

.grid-view .grid-results > div > div {
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

.grid-view .grid-results > div .accordion svg {
  width: 20px;
  transform: rotate(0);
  fill: rgba(86, 218, 212, 1);
  transition: 0.4s;
}

.grid-view .grid-results > div .accordion.open svg {
  transform: rotate(45deg);
  fill: rgba(0, 0, 0, 0.5);
  transition: 0.4s;
}

.grid-view .grid-results > div .accordion {
  position: absolute;
  top: 12px;
  right: 15px;
  cursor: pointer;
}

.grid-view .grid-results h4 {
  color: #00000080;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 3%;
  font-weight: 700;
  text-align: center;
  margin-top: 13px;
  padding-bottom: 13px;
  margin-bottom: 0;
  border-bottom: 1px solid #00000026;
}

.grid-view .grid-results h4 + div {
  padding: 5px;
}

.grid-results h3 .class-name {
  font-size: 20px;
  line-height: 20px;
  color: #000;
  padding-top: 16px;
  font-weight: 600;
  text-align: left;
  padding-left: 16px;
  text-transform: capitalize;
  position: relative;
}

.result-grid-cell .location-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.result-grid-cell .location-wrapper h6 {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Location — enhanced card style */
.result-grid-cell.enhanced-card .location-wrapper {
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.result-grid-cell.enhanced-card .location-wrapper svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #6B7280;
}

.result-grid-cell.enhanced-card .location-wrapper h6 {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.result-grid-cell .info {
  position: relative;
  cursor: pointer;
}

.result-grid-cell .info .tooltip_text {
  opacity: 0;
  pointer-events: none;
  width: 80px;
  background-color: #796e6e;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  position: absolute;
  transition: 0.2s;
  top: -100%;
  right: 0%;
}

.result-grid-cell .info .info-icon {
  width: 18px;
  height: 18px;
}

.info .info-icon .details {
  stroke: white;
  fill: #d9d9d9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info:hover .info-icon .details {
  fill: #777;
}

.result-grid-cell .info:hover .tooltip_text {
  opacity: 1;
  pointer-events: all;
  transition: 0.2s;
}

.form-info .error-message {
  color: red;
  font-size: 13px;
  margin-top: 5px;
}

.result-grid-cell {
  display: flex;
  justify-content: space-between;
  flex-flow: column;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #0000001a;
  width: 100%;
  margin-top: 20px;
  position: relative;
}

.result-grid-cell:last-child {
  margin-bottom: 0;
}

.result-grid-cell .class-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #000000bf;
}

.result-grid-cell .classes-per-week {
  color: red;
  font-size: 13px;
  padding: 0 16px 8px;
}

.result-grid-cell .class-data .class-time,
.result-grid-cell .class-data .class-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #000000bf;
}

.result-grid-cell .button-section {
  display: flex;
}

.result-grid-cell .control-button {
  width: 100%;
}

.result-grid-cell .control-button button.enroll-class,
.result-grid-cell .control-button a.enroll-class {
  color: #5426d5 !important;
  height: 44px !important;
  width: 100% !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  background-color: #fff !important;
  background: #fff !important;
  border-top: 1px solid #0000001a !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.result-grid-cell .control-button a.enroll-class {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.result-grid-cell .info-button {
  background: transparent;
  cursor: pointer;
  border-top: 1px solid #0000001a;
  border-left: 1px solid #0000001a;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-bottom-right-radius: transparent;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  height: 44px;
  width: 64px;
  border-radius: 5px;
}

.result-grid-cell .class-start {
  width: fit-content;
  position: absolute;
  top: -15px;
  left: 15px;
  background: #defffb;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
}
.result-grid-cell .class-start .time {
  font-weight: 700;
}

.result-grid-cell .class-start .period {
  font-weight: 200;
}

.filter-top .edit-option {
  position: relative;
  border: 1px solid #00000026;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 205px;
  height: 44px;
  transition: 0.4s;
}

.filter-top .dropdown {
  position: absolute;
  top: 100%;
  width: -webkit-fill-available;
  left: 0;
  border: 1px solid #00000026;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  margin-top: 5px;
  transform: translateY(-20px);
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
  max-height: 50vh;
  overflow: scroll;
  z-index: 300;
}

.filter-top li.select {
  background-color: #53d89a;
  color: #333;
}

.filter-top .select {
  color: #53d89a;
}

/* ── Checkbox multi-select for Class Types dropdown ── */
.filter-top .dropdown .checkbox-label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
  padding: 2px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.filter-top .dropdown .checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.filter-top .dropdown .checkbox-mark {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background: #fff;
}
.filter-top .dropdown li.select .checkbox-mark {
  background-color: #53d89a;
  border-color: #53d89a;
}
.filter-top .dropdown li.select .checkbox-mark::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -1px;
}
.filter-top .dropdown .checkbox-text {
  font-size: 14px;
  color: #333;
  line-height: 1.3;
}
/* Override green background — checkbox mark is enough */
.filter-top .dropdown.classes li.select {
  background-color: transparent;
}
.filter-top .dropdown.classes li.select:hover,
.filter-top .dropdown.classes li.filterable-category:hover {
  background-color: #f3f4f6;
}
/* "All selected" reset item */
.filter-top .dropdown.classes li:first-child {
  font-weight: 600;
  color: #53d89a;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 16px;
}

.filter-top .edit-option.active .dropdown {
  opacity: 1;
  transition: 0.4s;
  transform: translateY(0);
  pointer-events: all;
}

.filter-top .dropdown ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  width: 100%;
}

.filter-top .dropdown ul li {
  padding: 5px 10px;
  width: 100%;
  transition: 0.4s;
}

.filter-top .dropdown ul li:hover {
  background-color: #00000026;
  transition: 0.4s;
}

.filter-top .dropdown ul li:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.filter-top .dropdown ul li:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.filter-top .edit-option:hover,
.filter-top .edit-option.active {
  transition: 0.4s;
  border: 1px solid #53d89a;
  cursor: pointer;
}

.filter-top .edit-option.active svg {
  transition: 0.4s;
  color: #53d89a;
  fill: #53d89a;
  fill-opacity: 1;
}

.filter-top .edit-option .label {
  color: #1f2323bf;
  font-size: 16px;
  font-weight: 300;
}

.filter-top .edit-option .value {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}

.filter-top .edit-option svg {
  color: #1f2323;
  fill: none;
  transition: 0.4s;
}

.filter-top .filter-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.grid-view .no-result {
  font-size: 14px;
  color: #00000095;
  text-align: center;
  padding-top: 12px;
}

.grid-view .grid-results .accordion {
  display: none;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

@media only screen and (max-width: 1370px) {
  .filter-top .edit-option {
    width: 170px;
  }
}

@media only screen and (max-width: 1250px) {
  .filter-top {
    flex-flow: column;
    margin-bottom: 32px;
    gap: 24px;
  }
}

@media only screen and (max-width: 1200px) {
  .grid-view .grid-results .accordion {
    display: block;
  }

  .grid-view .grid-results .accordion + div {
    display: none;
  }

  .grid-view .grid-results .accordion.open + div {
    display: flex;
  }

  .grid-view .grid-results {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-view .grid-results > div > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .result-grid-cell {
    max-width: 30%;
  }
}

@media only screen and (max-width: 767px) {
  .result-grid-cell {
    max-width: 45%;
  }
}

/* ── Mobile filter drawer overlay ── */
.filter-drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.28);
  z-index: 980;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}
.filter-drawer-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.ryb-filter-drawer-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

@media only screen and (max-width: 768px) {
  body.ryb-filter-drawer-open chat-widget,
  body.ryb-filter-drawer-open [aria-label*="chat widget" i] {
    display: none !important;
    visibility: hidden !important;
  }

  #class-finder .filter-top .edit-option .dropdown,
  #ryb-connect .filter-top .edit-option .dropdown {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    margin-top: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    z-index: 995;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  #class-finder .filter-top .edit-option.active,
  #ryb-connect .filter-top .edit-option.active {
    z-index: 990;
  }

  #class-finder .filter-top .edit-option.active .dropdown,
  #ryb-connect .filter-top .edit-option.active .dropdown {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .filter-drawer-overlay {
    z-index: 980;
  }

  /* Drag handle at top of drawer */
  .filter-top .dropdown::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 10px;
  }
  /* Larger touch targets */
  .filter-top .dropdown ul li {
    padding: 12px 16px;
    font-size: 15px;
  }
}

@media only screen and (max-width: 450px) {
  .result-grid-cell {
    max-width: 100%;
  }
}

/* ==================== Camps Template ==================== */

/* --- Filter bar --- */

#class-finder.template-camps:not(.template-new-camps) .camps-filter-bar {
  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;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Quick filter button */

#class-finder.template-camps:not(.template-new-camps) .camps-quick-filter {
  /* Quick-filter (session shortcut) — brand-aligned purple tonal scheme.
     Was a yellow/gold gradient with sun-themed palette that hardcoded a
     "summer" treatment and clashed with the rest of the design system. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 6%, white);
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ryb-primary-color, #6026d5);
  border: 1px solid color-mix(in srgb, var(--ryb-primary-color, #6026d5) 35%, white);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camps-quick-filter:hover {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 12%, white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 18%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camps-quick-filter.active {
  background: var(--ryb-primary-color, #6026d5);
  color: #fff;
  border-color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 28%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camps-quick-filter.active svg {
  /* Active pill — keep icon legible against purple fill */
  color: #fff;
}

#class-finder.template-camps:not(.template-new-camps) .camps-quick-filter svg {
  flex-shrink: 0;
}

/* Filter pill buttons */

#class-finder.template-camps:not(.template-new-camps) .camps-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;
}

#class-finder.template-camps:not(.template-new-camps) .camps-pill-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.active {
  /* Open dropdown state — brand purple (was mint #53d89a) */
  border-color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 0 0 1px var(--ryb-primary-color, #6026d5);
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 6%, white);
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.has-value {
  /* Applied-filter state — brand purple (was green) */
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 6%, white);
  border-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 35%, white);
  color: var(--ryb-primary-color, #6026d5);
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill svg {
  flex-shrink: 0;
  color: #94a3b8;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.has-value svg {
  color: var(--ryb-primary-color, #6026d5);
}

#class-finder.template-camps:not(.template-new-camps) .camps-pill-chevron {
  transition: transform 0.2s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.active .camps-pill-chevron {
  transform: rotate(180deg);
}

#class-finder.template-camps:not(.template-new-camps) .camps-pill-label {
  color: #94a3b8;
  font-weight: 500;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.has-value .camps-pill-label {
  color: var(--ryb-primary-color, #6026d5);
}

#class-finder.template-camps:not(.template-new-camps) .camps-pill-value {
  font-weight: 600;
}

/* Filter dropdown */

#class-finder.template-camps:not(.template-new-camps) .camps-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;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.active .camps-filter-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown li {
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  transition: background 0.1s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown li:hover {
  background: #f1f5f9;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown li.selected {
  /* Selected option — brand purple tint (was green) */
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, white);
  color: var(--ryb-primary-color, #6026d5);
  font-weight: 600;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown::-webkit-scrollbar {
  width: 6px;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

#class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* --- Filter bar responsive --- */

@media only screen and (max-width: 768px) {
  #class-finder.template-camps:not(.template-new-camps) .camps-filter-bar {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-filters-wrap {
    gap: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-filter-pill {
    padding: 10px 12px;
    font-size: 12px;
    gap: 6px;
    /* WCAG 2.5.5 / iOS HIG / Material — ensure ≥44px tap target on touch devices */
    min-height: 44px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-quick-filter {
    padding: 10px 14px;
    font-size: 12px;
    min-height: 44px;
  }

  /* Lift active dropdown above downstream rows so it doesn't blend visually
     into the month-group header or the next pill row. */
  #class-finder.template-camps:not(.template-new-camps) .camps-filter-pill.active .camps-filter-dropdown {
    z-index: 50;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16),
                0 2px 6px rgba(15, 23, 42, 0.08);
  }
}

@media only screen and (max-width: 480px) {
  #class-finder.template-camps:not(.template-new-camps) .camps-filters-wrap {
    gap: 6px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-filter-pill {
    padding: 10px 12px;
    font-size: 11px;
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 44px;
    justify-content: center;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-filter-pill[data-filter="session"],
  #class-finder.template-camps:not(.template-new-camps) .camps-filter-pill[data-filter="gender"] {
    flex-basis: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-quick-filter {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown {
    min-width: 180px;
    left: auto;
    right: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-filter-dropdown li {
    /* Bigger tap target for individual options too */
    padding: 12px 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-pill-label {
    display: inline;
  }
}

@keyframes campCardEnter {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Container --- */

#class-finder.template-camps:not(.template-new-camps) .camps-results {
  max-width: 1900px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 48px;
}

/* --- Type (session) filter bar --- */

#class-finder.template-camps:not(.template-new-camps) .camps-type-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#class-finder.template-camps:not(.template-new-camps) .camps-type-bar::-webkit-scrollbar {
  display: none;
}

#class-finder.template-camps:not(.template-new-camps) .camps-type-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  margin-right: 4px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-type-pill:hover {
  border-color: rgba(3, 105, 161, 0.3);
  color: #0f172a;
  background: rgba(3, 105, 161, 0.04);
}

#class-finder.template-camps:not(.template-new-camps) .camp-type-pill.active {
  background: #0369a1;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25);
}

#class-finder.template-camps:not(.template-new-camps) .camp-type-pill.active:hover {
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.2);
}

#class-finder.template-camps:not(.template-new-camps) .camp-type-pill .pill-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
}

#class-finder.template-camps:not(.template-new-camps) .camp-type-pill.active .pill-count {
  opacity: 0.85;
}

/* --- Month filter bar --- */

#class-finder.template-camps:not(.template-new-camps) .camps-month-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-bar::-webkit-scrollbar {
  display: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-month-pill:hover {
  border-color: rgba(83, 216, 154, 0.4);
  color: #0f172a;
  background: rgba(83, 216, 154, 0.04);
}

#class-finder.template-camps:not(.template-new-camps) .camp-month-pill.active {
  background: linear-gradient(228deg, #56dad4, #53d89a 82%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(83, 216, 154, 0.25);
}

#class-finder.template-camps:not(.template-new-camps) .camp-month-pill.active:hover {
  box-shadow: 0 2px 8px rgba(83, 216, 154, 0.2);
}

#class-finder.template-camps:not(.template-new-camps) .pill-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
}

#class-finder.template-camps:not(.template-new-camps) .camp-month-pill.active .pill-count {
  opacity: 0.85;
}

/* Month group show/hide */

#class-finder.template-camps:not(.template-new-camps) .camps-month-group {
  transition: opacity 0.25s ease, max-height 0.3s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-group.camps-hidden {
  display: none;
}

/* --- Month headings --- */

#class-finder.template-camps:not(.template-new-camps) h4.camps-month-heading {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 48px 0 20px;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

#class-finder.template-camps:not(.template-new-camps) h4.camps-month-heading::before {
  content: "";
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #56dad4, #53d89a);
  border-radius: 2px;
  flex-shrink: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-group:first-of-type h4.camps-month-heading {
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-count {
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.35);
  margin-left: -4px;
}

/* --- Row-based camp layout --- */

#class-finder.template-camps:not(.template-new-camps) .camp-row-enter {
  animation: campCardEnter 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* --- Collapsible month header --- */

#class-finder.template-camps:not(.template-new-camps) .camps-month-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  transition: background 0.15s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-header:hover {
  background: rgba(0, 0, 0, 0.015);
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-header h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  padding: 0;
  border: none;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #6B7280;
  transition: transform 0.25s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-group.collapsed .camps-month-chevron {
  transform: rotate(-90deg);
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-bar-accent {
  width: 3px;
  height: 24px;
  /* Section accent bar — brand purple (was emerald #10B981). Green now reserved
     for success states only. */
  background: var(--ryb-primary-color, #6026d5);
  border-radius: 2px;
  flex-shrink: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-count {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 12px;
  white-space: nowrap;
  margin-left: 4px;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-rows {
  transition: opacity 0.2s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-group.collapsed .camps-month-rows {
  display: none;
}

#class-finder.template-camps:not(.template-new-camps) .camps-month-group + .camps-month-group {
  margin-top: 8px;
}

/* --- Card layout (desktop) --- */

#class-finder.template-camps:not(.template-new-camps) .camp-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row:hover {
  /* Hover affordance — brand purple (was emerald #10B981) */
  border-color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 16%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:not(.is-collapsed):hover,
#class-finder.template-new-camps .camp-row-multi:not(.is-collapsed):hover {
  border-color: #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row:last-child {
  margin-bottom: 0;
}

/* --- Left panel --- */

#class-finder.template-camps:not(.template-new-camps) .camp-card-left {
  flex: 0 0 300px;
  background: #F9FAFB;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-card-left-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* --- Date (inside left panel) --- */

#class-finder.template-camps:not(.template-new-camps) .camp-row-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-date .date-range {
  /* Date is METADATA, not a headline. Was 20px/800 Playfair serif (treated
     it as a hero element, competed with both the section header and the card
     title for attention). Now sized as supporting meta: medium weight, sans,
     muted color so the eye lands on the title first. */
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-date .weekday-range {
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
}

/* --- Info (inside left panel) --- */

#class-finder.template-camps:not(.template-new-camps) .camp-row-name {
  /* Card title — promoted from 16px to 18px so it's clearly the primary
     attention anchor on each card (date is now metadata below). */
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-top: 4px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-title-line,
#class-finder.template-new-camps .camp-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-title-line .camp-row-name,
#class-finder.template-new-camps .camp-title-line .camp-row-name {
  min-width: 0;
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.3;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-desc {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-time .clock-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* --- Multi-camp info line --- */

#class-finder.template-camps:not(.template-new-camps) .camp-card-multi-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: auto;
}

#class-finder.template-camps:not(.template-new-camps) .camp-card-multi-info svg {
  flex-shrink: 0;
  color: #94a3b8;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-toggle,
#class-finder.template-new-camps .camp-row-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  margin-top: 14px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  /* "View options" toggle — brand purple (was emerald #10B981) */
  background: var(--ryb-primary-color, #6026d5);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:not(.is-collapsed) .camp-row-toggle,
#class-finder.template-new-camps .camp-row-multi:not(.is-collapsed) .camp-row-toggle {
  min-height: 34px;
  border: 1px solid #D7E1EA;
  background: rgba(255, 255, 255, 0.7);
  color: #475569;
  box-shadow: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-toggle:hover,
#class-finder.template-new-camps .camp-row-toggle:hover {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 88%, black);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 22%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:not(.is-collapsed) .camp-row-toggle:hover,
#class-finder.template-new-camps .camp-row-multi:not(.is-collapsed) .camp-row-toggle:hover {
  border-color: #CBD5E1;
  background: #fff;
  color: #1E293B;
  box-shadow: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-toggle:focus-visible,
#class-finder.template-new-camps .camp-row-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ryb-primary-color, #6026d5) 45%, transparent);
  outline-offset: 2px;
}

/* --- Expanded state: lift the toggle to a top-right "close" affordance ---
   When the card is open, the toggle is no longer the primary action — it's
   a dismissal. So it's repositioned to the natural close-button spot, made
   icon-led, and styled as a compact slate chip rather than a primary button. */

#class-finder.template-camps:not(.template-new-camps) .camp-row {
  position: relative;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:not(.is-collapsed) .camp-row-toggle,
#class-finder.template-new-camps .camp-row-multi:not(.is-collapsed) .camp-row-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  margin-top: 0;
  padding: 0 12px;
  height: 32px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:not(.is-collapsed) .camp-row-toggle:hover,
#class-finder.template-new-camps .camp-row-multi:not(.is-collapsed) .camp-row-toggle:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 35%, white);
  color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 12%, transparent);
}

/* --- Click anywhere on the collapsed card to expand ---
   The whole left-panel becomes the affordance, not just the tiny toggle. */

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed {
  cursor: pointer;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed:hover {
  border-color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 14%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed:hover .camp-row-toggle {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 88%, black);
}

/* Interactive children inside the collapsed card keep their default cursor
   (the row-level click handler ignores clicks on them, but we still want
   the visual to match). */
#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed a,
#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed button {
  cursor: pointer;
}

/* --- Camps preview (collapsed state only) ---
   Replaces the old "(i) 4 camps + 3 add-ons" count line with a richer
   preview: chips of the camp names + a "from $X/day" price hint. Helps
   users see WHAT they'd be looking at without expanding first. */

#class-finder.template-camps:not(.template-new-camps) .camp-card-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-preview-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* The mobile count fallback ("4 camps") is hidden on desktop — chips do the
   talking there. CSS will flip these at the mobile breakpoint. */
#class-finder.template-camps:not(.template-new-camps) .camp-preview-count {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-preview-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#class-finder.template-camps:not(.template-new-camps) .camp-preview-more {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
}

/* --- "$X/day" price hint placed next to the CTA ---
   Two-part composition so the dollar amount can carry the visual weight:
   - "$55"  : large, dark, bold — the figure users actually scan for
   - "/day" : small slate suffix
   Was a single 12px slate run — read as tiny gray noise above the CTA.
   Now reads as a real price label. */
#class-finder.template-camps:not(.template-new-camps) .camp-row-price-hint {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
  color: #64748B;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-price-amount {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* "/day" trailing the bold amount — small, muted, baseline-aligned so it
   sits visually attached to the figure without competing for attention. */
#class-finder.template-camps:not(.template-new-camps) .camp-row-price-suffix {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

/* --- Mobile: trade chips for a compact count line ---
   Below 768px the chip list piles up vertically (long camp names can't
   fit two-per-row), pushing each collapsed card past 350px tall. On
   mobile we hide the chip list entirely and show a one-line summary:
   "4 camps · 3 add-ons · from $31/day". Same information, ~75% less
   vertical real estate per card. */
@media only screen and (max-width: 768px) {
  #class-finder.template-camps:not(.template-new-camps) .camp-card-preview {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 10px;
  }

  /* Hide desktop chip list on mobile, show the count summary instead */
  #class-finder.template-camps:not(.template-new-camps) .camp-preview-chips {
    display: none;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-preview-count {
    display: inline;
  }

  /* (Removed the inline add-ons hint and the inline price hint — both
     moved/dropped. The mobile preview is just `4 camps` now; the price
     hint lives in the CTA column next to the View options button.) */

  /* Tighten the collapsed card padding so each card is compact on mobile.
     Was ~350px tall; with these tweaks it lands closer to ~210-230px. */
  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-left {
    padding: 16px 18px;
    gap: 2px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-toggle {
    margin-top: 14px;
  }

  /* Session pill on mobile — slightly tighter padding so it doesn't span the
     full content width and dominate vertical space. */
  #class-finder.template-camps:not(.template-new-camps) .camp-tag-session {
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 11.5px;
  }
}

/* (Legacy accordion rule removed — the camps row no longer has an
   "expanded" state since options moved into the modal. The selector below
   is left as a no-op shell to keep the surrounding closing brace structure
   intact if any tooling expects it; the rule does nothing because
   is-collapsed is never absent under the new design.) */
#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.never-applies-keep-empty .camp-card-preview {
  /* intentionally empty */
  visibility: visible;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-toggle-icon,
#class-finder.template-new-camps .camp-row-toggle-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:not(.is-collapsed) .camp-row-toggle-icon,
#class-finder.template-new-camps .camp-row-multi:not(.is-collapsed) .camp-row-toggle-icon {
  transform: rotate(180deg);
}

/* --- Tags (shared) --- */

#class-finder.template-camps:not(.template-new-camps) .camp-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 12px;
  white-space: nowrap;
  line-height: 1;
}

#class-finder.template-camps:not(.template-new-camps) .camp-tag-age {
  /* Age range tag — neutral slate (was green). It's metadata, not a primary
     attribute, so it shouldn't compete with brand purple for attention. */
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-tag-session {
  /* Session tag — matches the visual design of the .camps-quick-filter pill
     in the filter bar so the relationship is obvious: "this card belongs to
     the session you can filter on with that pill". Rounded-full pill shape,
     brand-purple tonal palette, sun icon for summer sessions, slightly more
     padding + a touch larger than the small rectangular tag it replaces. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ryb-primary-color, #6026d5);
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 7%, white);
  border: 1px solid color-mix(in srgb, var(--ryb-primary-color, #6026d5) 28%, white);
  border-radius: 9999px;
  line-height: 1;
}

#class-finder.template-camps:not(.template-new-camps) .camp-tag-session .camp-tag-icon {
  flex-shrink: 0;
  color: var(--ryb-primary-color, #6026d5);
}

/* --- Right panel (single rows: price + button) --- */

#class-finder.template-camps:not(.template-new-camps) .camp-card-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-price.has-breakdown {
  min-width: 280px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-right-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-price .amount {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-price .price-suffix {
  font-size: 12px;
  font-weight: 400;
  color: #9CA3AF;
}

/* --- Status indicators --- */

#class-finder.template-camps:not(.template-new-camps) .camp-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-status.low {
  color: #d97706;
}

#class-finder.template-camps:not(.template-new-camps) .camp-status.low .status-dot {
  background: #F59E0B;
}

#class-finder.template-camps:not(.template-new-camps) .camp-status.waitlist {
  color: #9ca3af;
}

#class-finder.template-camps:not(.template-new-camps) .camp-status.waitlist .status-dot {
  background: #9CA3AF;
}

/* --- Action (inside right panel) --- */

#class-finder.template-camps:not(.template-new-camps) .camp-row-action {
  flex-shrink: 0;
}

/* --- Buttons --- */

#class-finder.template-camps:not(.template-new-camps) .camp-button {
  min-width: 110px;
  height: 42px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.enroll {
  /* Primary enrollment CTA — brand purple (was emerald #10B981) */
  background: var(--ryb-primary-color, #6026d5);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 22%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.enroll:hover {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 88%, black);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 32%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.waitlist {
  background: #fff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.waitlist:hover {
  border-color: #94a3b8;
  color: #1e293b;
  background: #f8fafc;
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  cursor: default;
  font-size: 12px;
  font-weight: 500;
}

/* --- Multi-option rows --- */

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi {
  display: block;
  align-items: stretch;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-main,
#class-finder.template-new-camps .camp-row-multi .camp-row-main {
  display: flex;
  align-items: stretch;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.has-inline-addons .camp-row-main,
#class-finder.template-new-camps .camp-row-multi.has-inline-addons .camp-row-main {
  border-bottom: 1px solid #E6ECF3;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-main,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-main {
  display: block;
  border-bottom: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-card-left,
#class-finder.template-new-camps .camp-row-multi .camp-card-left {
  /* Was cream (#FCF8ED) — replaced with a near-white slate that keeps the
     header column visually distinct from the option grid without introducing
     a warm yellow tint that clashes with the rest of the design system. */
  background: var(--ryb-background-color, #F9F8FA);
  border-right-color: var(--ryb-border-color, #D4D1DB);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-left,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-left {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 20px;
  width: 100%;
  min-height: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 18px 24px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-left-header,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-left-header {
  grid-column: 1;
  grid-row: 1 / span 4;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-title-line,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-title-line {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-desc,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-desc {
  grid-column: 2;
  display: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-tag-session,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-tag-session {
  grid-column: 2;
  grid-row: 2;
  width: fit-content;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-multi-info,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-multi-info {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-toggle,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-toggle {
  grid-column: 3;
  grid-row: 1 / span 3;
  justify-self: end;
  align-self: center;
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-options,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-options,
#class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-inline-addon-group,
#class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-inline-addon-group {
  display: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 14px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-options-header {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  padding: 0 2px 2px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-options-header svg {
  flex-shrink: 0;
  color: #9CA3AF;
}

#class-finder.template-camps:not(.template-new-camps) .camp-sub-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camp-sub-option:hover {
  background: rgba(0, 0, 0, 0.025);
}

#class-finder.template-camps:not(.template-new-camps) .camp-sub-option + .camp-sub-option {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.045);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon):hover {
  border-color: #dbe4ee;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 32, 51, 0.045);
  transform: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) + .camp-sub-option:not(.addon) {
  border-top: 1px solid #dbe4ee;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-info {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  gap: 3px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-label {
  font-size: 14px;
  font-weight: 800;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-option-right {
  display: contents;
  margin-left: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-price-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #edf1f5;
  text-align: left;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-button {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  min-width: 104px;
  height: 38px;
  margin-left: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-price-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0;
  width: 100%;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-price-breakdown::before {
  content: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-price-cell {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
  padding: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-price-cell + .camp-price-cell {
  padding-left: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-price-cell + .camp-price-cell::before {
  content: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-price-cell .amount {
  font-size: 14px;
}

#class-finder.template-camps:not(.template-new-camps) .sub-info {
  display: flex;
  flex-direction: column;
  /* Force children to align to the left edge — without this an
     `inline-flex` child like .sub-label-row collapses to its content
     width and the `align-items: stretch` default doesn't pull it to
     the left, which made the time below it appear visually centered. */
  align-items: flex-start;
  gap: 1px;
  min-width: 100px;
  flex: 1;
  text-align: left;
}

#class-finder.template-camps:not(.template-new-camps) .sub-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-align: left;
}

#class-finder.template-camps:not(.template-new-camps) .sub-label-row,
#class-finder.template-new-camps .sub-label-row {
  /* `flex` (not `inline-flex`) so the row spans the full sub-info width
     and the contents stay flush left even when the title wraps. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  width: 100%;
  text-align: left;
}

#class-finder.template-camps:not(.template-new-camps) .sub-label-row .sub-label,
#class-finder.template-new-camps .sub-label-row .sub-label {
  min-width: 0;
}

#class-finder.template-camps:not(.template-new-camps) .sub-label-row .camp-tag-age,
#class-finder.template-new-camps .sub-label-row .camp-tag-age {
  padding: 3px 7px;
  font-size: 10px;
}

#class-finder.template-camps:not(.template-new-camps) .sub-time {
  /* Block element pinned to the left edge so a short time string like
     "8AM-12PM" doesn't get auto-centered by the column's intrinsic
     sizing. */
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

#class-finder.template-camps:not(.template-new-camps) .sub-option-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

#class-finder.template-camps:not(.template-new-camps) .sub-option-right.has-price-breakdown {
  align-items: flex-start;
}

#class-finder.template-camps:not(.template-new-camps) .sub-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 60px;
  text-align: right;
}

#class-finder.template-camps:not(.template-new-camps) .sub-price-wrap.has-breakdown {
  min-width: 280px;
}

#class-finder.template-camps:not(.template-new-camps) .sub-price-wrap .amount {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-breakdown {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
  user-select: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-breakdown::before {
  content: "Tuition";
  flex: 0 0 auto;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-cell {
  display: inline-flex;
  position: relative;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-cell + .camp-price-cell {
  border-left: 0;
  padding-left: 10px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-cell + .camp-price-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: #e2e8f0;
  transform: translateY(-50%);
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-cell .price-days {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-price-cell .amount {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-sub-option .camp-button {
  min-width: 102px;
  height: 36px;
  font-size: 12px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group,
#class-finder.template-new-camps .camp-inline-addon-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 160px repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px;
  overflow: visible;
  border: 0;
  border-top: 1px solid #E2E8F0;
  border-radius: 0;
  /* Was sky blue (#E9F7FD) — now neutral slate so the add-ons section feels
     like a continuation of the camp card rather than a separate product. */
  background: #F8FAFC;
  box-shadow: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-addons-divider,
#class-finder.template-new-camps .camp-inline-addon-group .camp-addons-divider {
  display: block;
  padding: 4px 0 0;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  /* "Add-ons" label — slate (was sky-800 #075985). Uses uppercase eyebrow
     treatment to clearly demote it as a secondary section header. */
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-addons-divider small,
#class-finder.template-new-camps .camp-inline-addon-group .camp-addons-divider small {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon {
  display: grid;
  gap: 8px;
  padding: 12px;
  /* Was sky-100 border (#CDEAF7) — now neutral slate-200 */
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon:hover,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon:hover {
  border-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 35%, white);
  background: #FFFFFF;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, transparent);
  transform: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon + .camp-sub-option.addon,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon + .camp-sub-option.addon {
  border-top: 1px solid #E2E8F0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .sub-info,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .sub-info {
  min-width: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .sub-option-right,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .sub-option-right {
  width: 100%;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  margin-left: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .sub-price-wrap,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .sub-price-wrap {
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 6px;
  padding-top: 8px;
  /* Was sky-tinted (#E2EEF6) — neutral slate-200 */
  border-top: 1px solid #E2E8F0;
  text-align: left;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-breakdown,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-breakdown::before,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-breakdown::before {
  content: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
  padding: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell + .camp-price-cell,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell + .camp-price-cell {
  padding-left: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell + .camp-price-cell::before,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell + .camp-price-cell::before {
  content: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .price-days,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .price-days {
  color: #64748b;
  font-size: 9px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .amount,
#class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .amount {
  font-size: 12px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-button,
#class-finder.template-new-camps .camp-inline-addon-group .camp-button {
  width: 100%;
  min-width: 0;
  height: 36px;
  font-size: 11px;
}

/* --- Category add-on section --- */

#class-finder.template-camps:not(.template-new-camps) .camp-addon-section,
#class-finder.template-new-camps .camp-addon-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #BAE6FD;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-section-header,
#class-finder.template-new-camps .camp-addon-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid #BAE6FD;
  border-radius: 8px;
  background: #F0F9FF;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-eyebrow,
#class-finder.template-new-camps .camp-addon-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: #0369A1;
  border: 1px solid #BAE6FD;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-section-header h4,
#class-finder.template-new-camps .camp-addon-section-header h4 {
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-section-header p,
#class-finder.template-new-camps .camp-addon-section-header p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748B;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-count,
#class-finder.template-new-camps .camp-addon-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #BAE6FD;
  color: #0369A1;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-rows,
#class-finder.template-new-camps .camp-addon-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-addon,
#class-finder.template-new-camps .camp-row-addon {
  border-color: #BAE6FD;
  background: #fff;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-addon:hover,
#class-finder.template-new-camps .camp-row-addon:hover {
  border-color: #0EA5E9;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.12);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-addon .camp-card-left,
#class-finder.template-new-camps .camp-row-addon .camp-card-left {
  background: #F8FAFC;
  box-shadow: inset 4px 0 0 #0EA5E9;
}

#class-finder.template-camps:not(.template-new-camps) .camp-tag-addon,
#class-finder.template-new-camps .camp-tag-addon {
  width: fit-content;
  color: #0369A1;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  border-radius: 6px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-addon-note,
#class-finder.template-new-camps .camp-addon-note {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  color: #0369A1;
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.addon-enroll-button,
#class-finder.template-new-camps .camp-button.addon-enroll-button {
  /* "Add this" — secondary action, outlined purple (was filled navy #0369A1).
     The visual distinction (outline vs. filled) communicates the hierarchy:
     main camp Select = primary action (filled), Add-on Add this = secondary. */
  min-width: 176px;
  padding: 0 16px;
  background: #FFFFFF;
  color: var(--ryb-primary-color, #6026d5);
  border: 1.5px solid var(--ryb-primary-color, #6026d5);
  box-shadow: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-button.addon-enroll-button:hover,
#class-finder.template-new-camps .camp-button.addon-enroll-button:hover {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, white);
  color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 16%, transparent);
}

/* --- Empty state --- */

#class-finder.template-camps:not(.template-new-camps) .no-camps-message {
  text-align: center;
  padding: 80px 20px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 400;
}

/* --- Responsive — Tablet --- */

@media only screen and (max-width: 768px) {
  #class-finder.template-camps:not(.template-new-camps) .camp-row {
    flex-direction: column;
    border-radius: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-main,
  #class-finder.template-new-camps .camp-row-multi .camp-row-main {
    flex-direction: column;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-card-left {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px;
    border-radius: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-left,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-left {
    border-bottom: 0;
    grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) auto;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-card-right {
    padding: 16px 20px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-right-meta {
    align-items: flex-end;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options {
    width: 100%;
    min-width: unset;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group,
  #class-finder.template-new-camps .camp-inline-addon-group {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-addons-divider,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-addons-divider {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-addons-divider small,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-addons-divider small {
    white-space: normal;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon {
    min-width: 0;
  }
}

/* --- Responsive — Mobile --- */

@media only screen and (max-width: 480px) {
  #class-finder.template-camps:not(.template-new-camps) {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
  }

  #class-finder.template-camps:not(.template-new-camps) .result-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-type-bar {
    gap: 6px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-type-pill {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-month-bar {
    gap: 6px;
    padding-bottom: 16px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  #class-finder.template-camps:not(.template-new-camps) .filter-controls {
    margin-bottom: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-month-pill {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-month-header {
    padding: 14px 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-month-header h4 {
    font-size: 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row {
    border-radius: 10px;
    margin-bottom: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-card-left {
    padding: 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-left,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-left {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-left-header,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-left-header,
  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-title-line,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-title-line,
  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-desc,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-desc,
  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-tag-session,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-tag-session,
  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-card-multi-info,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-card-multi-info,
  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-toggle,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-toggle {
    grid-column: 1;
    grid-row: auto;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi.is-collapsed .camp-row-toggle,
  #class-finder.template-new-camps .camp-row-multi.is-collapsed .camp-row-toggle {
    justify-self: stretch;
    width: 100%;
    margin-top: 2px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-date .date-range {
    font-size: 18px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-name {
    font-size: 14px;
    margin-top: 4px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-title-line,
  #class-finder.template-new-camps .camp-title-line {
    gap: 6px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-title-line .camp-row-name,
  #class-finder.template-new-camps .camp-title-line .camp-row-name {
    margin-top: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-card-right {
    padding: 12px 16px;
    gap: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-price.has-breakdown {
    min-width: 0;
    width: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-price.has-breakdown .camp-price-breakdown {
    justify-content: flex-start;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options {
    width: 100%;
    min-width: unset;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-sub-option {
    padding: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-sub-option .camp-button {
    margin-left: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-option-right.has-price-breakdown {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    margin-left: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-price-wrap.has-breakdown {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-price-wrap.has-breakdown .camp-price-breakdown {
    justify-content: flex-start;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-option-right.has-price-breakdown .camp-button {
    align-self: flex-end;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group,
  #class-finder.template-new-camps .camp-inline-addon-group {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-addons-divider,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-addons-divider {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-addons-divider small,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-addons-divider small {
    white-space: normal;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .sub-option-right,
  #class-finder.template-new-camps .camp-inline-addon-group .sub-option-right {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-button,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-button {
    width: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-option-right.has-price-breakdown {
    gap: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-price-wrap.has-breakdown {
    gap: 4px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-breakdown {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    column-gap: 0;
    row-gap: 3px;
    width: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-breakdown::before {
    grid-column: 1 / -1;
    font-size: 9px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 0 4px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell + .camp-price-cell {
    padding-left: 6px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell + .camp-price-cell::before {
    height: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell .price-days {
    font-size: 9px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell .price-days[data-short-label] {
    font-size: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell .price-days[data-short-label]::after {
    content: attr(data-short-label);
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-price-cell .amount {
    font-size: 11px;
  }

  #class-finder.template-camps:not(.template-new-camps) .sub-option-right.has-price-breakdown .camp-button {
    min-width: 88px;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 10px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-info {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-option-right.has-price-breakdown {
    display: contents;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-price-wrap.has-breakdown {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .camp-button,
  #class-finder.template-camps:not(.template-new-camps) .camp-row-options > .camp-sub-option:not(.addon) .sub-option-right.has-price-breakdown .camp-button {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-breakdown,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-breakdown {
    min-width: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .price-days[data-short-label],
  #class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .price-days[data-short-label] {
    font-size: 0;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .price-days[data-short-label]::after,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-sub-option.addon .camp-price-cell .price-days[data-short-label]::after {
    content: attr(data-short-label);
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .sub-option-right.has-price-breakdown .camp-button {
    width: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-inline-addon-group .camp-button.addon-enroll-button,
  #class-finder.template-new-camps .camp-inline-addon-group .camp-button.addon-enroll-button {
    min-width: 0;
    min-height: 36px;
    height: auto;
    padding: 7px 8px;
    line-height: 1.15;
    white-space: normal;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-addon-section-header,
  #class-finder.template-new-camps .camp-addon-section-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-addon .camp-card-right,
  #class-finder.template-new-camps .camp-row-addon .camp-card-right {
    align-items: stretch;
    flex-direction: column;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-addon .camp-right-meta,
  #class-finder.template-new-camps .camp-row-addon .camp-right-meta {
    align-items: stretch;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-addon .camp-button,
  #class-finder.template-new-camps .camp-row-addon .camp-button {
    width: 100%;
  }
}

/* --- Camps: compact filter on narrow mobile --- */

@media only screen and (max-width: 520px) {
  #class-finder.template-camps:not(.template-new-camps) .filter-top {
    margin-top: 8px;
    margin-bottom: 4px;
    gap: 12px;
  }

  #class-finder.template-camps:not(.template-new-camps) .filter-top .main-title {
    font-size: 22px !important;
    margin-bottom: 4px;
  }

  #class-finder.template-camps:not(.template-new-camps) .filter-controls {
    flex-flow: row !important;
    gap: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .filter-controls .edit-option {
    height: 48px !important;
    width: 50% !important;
    padding: 6px 10px;
  }

  #class-finder.template-camps:not(.template-new-camps) .filter-controls .edit-option .label {
    font-size: 11px;
  }

  #class-finder.template-camps:not(.template-new-camps) .filter-controls .edit-option .value {
    font-size: 13px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camps-month-bar {
    padding-bottom: 10px;
    margin-bottom: 4px;
  }
}

/* --- Camps: scroll overflow indicators on mobile --- */

@media only screen and (max-width: 768px) {
  #class-finder.template-camps:not(.template-new-camps) .camps-type-bar::after,
  #class-finder.template-camps:not(.template-new-camps) .camps-month-bar::after {
    content: "";
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 40px;
    min-height: 100%;
    margin-left: -40px;
    background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* ==================== New Camps — Add-on & Footer styles ==================== */

#class-finder.template-camps:not(.template-new-camps) .camp-addons-divider,
#class-finder.template-new-camps .camp-addons-divider {
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9CA3AF;
  border-top: 1px solid #F3F4F6;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

#class-finder.template-camps:not(.template-new-camps) .camp-sub-option.addon .sub-label,
#class-finder.template-new-camps .camp-sub-option.addon .sub-label {
  color: #6B7280;
  font-weight: 500;
}

#class-finder.template-camps:not(.template-new-camps) .camp-sub-option.addon .sub-price-wrap .amount,
#class-finder.template-new-camps .camp-sub-option.addon .sub-price-wrap .amount {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
}

#class-finder.template-camps:not(.template-new-camps) .camp-option-footer,
#class-finder.template-new-camps .camp-option-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #F3F4F6;
}

/* ==================== Camp options modal ====================
 *
 * Replaces the previous in-place accordion. A click on a week row opens a
 * focused modal containing the camp options grid + add-ons (with full
 * pricing breakdowns). Benefits:
 *   - Users get a focused view of one week at a time
 *   - The week list stays compact and scannable
 *   - No more nested expand/collapse, no losing your place in a long scroll
 */

.camps-options-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.camps-options-modal[hidden] {
  display: none;
}

.camps-options-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: campsModalOverlayIn 0.18s ease;
}

.camps-options-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  /* Don't shrink uncomfortably small on very short viewports — at least
     ensure the header + a reasonable scroll area are visible. The body
     handles overflow via internal scroll. */
  min-height: 280px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25),
              0 4px 12px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: campsModalPanelIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.camps-options-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #E2E8F0;
  background: #fff;
  flex-shrink: 0;
}

.camps-options-modal__heading {
  min-width: 0;
  flex: 1;
}

.camps-options-modal__title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.camps-options-modal__subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
}

.camps-options-modal__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.camps-options-modal__close:hover {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 8%, white);
  border-color: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 35%, white);
  color: var(--ryb-primary-color, #6026d5);
}

.camps-options-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ryb-primary-color, #6026d5) 45%, transparent);
  outline-offset: 2px;
}

.camps-options-modal__body {
  /* Use `overflow-y: scroll` rather than `auto` so the scrollbar is always
     visible when the panel is mounted — gives the user an obvious
     affordance that the panel scrolls. Reserve gutter space so the layout
     doesn't shift when the scrollbar appears/disappears. */
  position: relative;
  flex: 1;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  padding: 20px 24px 24px;
  background: #F9FAFB;
}

/* Make the modal scrollbar slightly more visible than the OS default so
   the affordance is noticeable on short viewports. */
.camps-options-modal__body::-webkit-scrollbar {
  width: 10px;
}

.camps-options-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.camps-options-modal__body::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 8px;
  border: 2px solid #F9FAFB;
}

.camps-options-modal__body::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.32);
}

/* Subtle fade at the bottom edge of the scroll area to hint that there's
   more content below when the body is scrollable. Sticky-positioned so it
   stays glued to the visible bottom of the scroll viewport, not the
   content's bottom. */
.camps-options-modal__body::after {
  content: "";
  position: sticky;
  bottom: -24px;
  left: 0;
  right: 0;
  height: 24px;
  margin-top: -24px;
  background: linear-gradient(to bottom, rgba(249, 250, 251, 0), #F9FAFB);
  pointer-events: none;
  display: block;
}

/* Lock background scroll while the modal is open */
body.camps-options-modal-open {
  overflow: hidden;
}

/* The injected camp-row-options content uses existing styles — but inside
   the modal it gets a tighter top spacing and the inline-addon-group needs
   to flow naturally inside the body padding rather than touching the edges. */
.camps-options-modal__body .camp-row-options {
  padding: 0;
  background: transparent;
  border: 0;
  margin-bottom: 16px;
}

.camps-options-modal__body .camp-inline-addon-group {
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  margin-top: 8px;
}

@keyframes campsModalOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes campsModalPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile — full-screen sheet that slides up from the bottom */
@media only screen and (max-width: 768px) {
  .camps-options-modal {
    align-items: flex-end;
    padding: 0;
  }

  .camps-options-modal__panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    animation: campsModalSheetIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .camps-options-modal__header {
    padding: 18px 18px 14px;
  }

  .camps-options-modal__title {
    font-size: 18px;
  }

  .camps-options-modal__body {
    padding: 16px 16px 24px;
  }
}

@keyframes campsModalSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}


/* ==================== Compact week-row (post-modal) ====================
 *
 * Now that camp options live in the modal, the week list is a stack of
 * compact, horizontally-laid-out cards optimized for scanning many weeks
 * at a glance.
 */

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi {
  display: block;
  cursor: pointer;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  /* Override the .camp-row { overflow: hidden } from the single-row layout
     above, so the focus ring + chip overflow can render outside the card. */
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:hover,
#class-finder.template-camps:not(.template-new-camps) .camp-row-multi:focus-visible {
  border-color: var(--ryb-primary-color, #6026d5);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 14%, transparent);
  outline: none;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-summary {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-date-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid #E2E8F0;
  padding-right: 18px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-body-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-name {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-title-line {
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-tag-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-card-preview {
  margin-top: 0;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-cta-col {
  /* Stack the "from $X/day" price hint above the View options button so
     the price reads as a direct attribute of the CTA, not as floating
     meta. Right-aligned to mirror the column's grid placement. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 0;
  background: var(--ryb-primary-color, #6026d5);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 22%, transparent);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-cta:hover {
  background: color-mix(in srgb, var(--ryb-primary-color, #6026d5) 88%, black);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ryb-primary-color, #6026d5) 32%, transparent);
  transform: translateY(-1px);
}

#class-finder.template-camps:not(.template-new-camps) .camp-row-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ryb-primary-color, #6026d5) 45%, transparent);
  outline-offset: 2px;
}

/* Mobile — stack the three columns vertically so it's scannable but compact */
@media only screen and (max-width: 768px) {
  #class-finder.template-camps:not(.template-new-camps) .camp-row-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-date-col {
    border-right: 0;
    padding-right: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #F1F5F9;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-cta-col {
    /* Mobile — full-width column with price hint above a full-width CTA */
    align-items: stretch;
    gap: 8px;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-price-hint {
    /* Center the inline-flex price hint above the full-width mobile CTA */
    justify-content: center;
    width: 100%;
  }

  #class-finder.template-camps:not(.template-new-camps) .camp-row-multi .camp-row-cta {
    width: 100%;
    height: 44px;
    justify-content: center;
  }
}

/* ==================== Pre-redirect modal ==================== */

.redirect-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.redirect-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: redirectModalSlideIn 0.25s ease-out;
}

@keyframes redirectModalSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.redirect-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  line-height: 1;
  padding: 4px;
}
.redirect-modal-close:hover { color: #333; }

.redirect-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px;
  line-height: 1.3;
}

.redirect-modal-description {
  font-size: 15px;
  color: #555;
  margin: 0 0 24px;
  line-height: 1.6;
  text-align: left;
}

.redirect-modal-description ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.redirect-modal-description ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.redirect-modal-description ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #10B981;
  font-weight: 700;
}

.redirect-modal-cta {
  display: inline-block;
  background: linear-gradient(228.01deg, #56dad4 0%, #53d89a 82.24%);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  max-width: 320px;
}
.redirect-modal-cta:hover {
  filter: brightness(1.1);
}

.redirect-modal-helper {
  font-size: 13px;
  color: #888;
  margin: 8px 0 0;
}

.redirect-modal-countdown {
  font-size: 14px;
  color: #666;
  margin: 16px 0 0;
  font-style: italic;
}

@media (max-width: 480px) {
  .redirect-modal {
    padding: 24px 20px;
    border-radius: 12px;
  }
  .redirect-modal-title { font-size: 18px; }
}

/* ==================== Session Mode ==================== */

/* Hide legacy badge element on result cards */
#class-finder .result-grid-cell .session-badge {
  display: none !important;
}

/* Card — overflow visible so time badge can float outside */
#class-finder .result-grid-cell.enhanced-card,
#ryb-connect .result-grid-cell.enhanced-card {
  border-radius: 16px !important;
  overflow: visible !important;
  position: relative;
  border: 1px solid #f3f4f6 !important;
}

/* Time badge — floating outside top-right corner, high hierarchy */
#class-finder .result-grid-cell.enhanced-card .class-start,
#ryb-connect .result-grid-cell.enhanced-card .class-start {
  position: absolute !important;
  top: -12px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 10 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #111827 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  white-space: nowrap !important;
}

/* Time badge — green (class has openings) */
#class-finder .result-grid-cell.enhanced-card .class-start.time-available,
#ryb-connect .result-grid-cell.enhanced-card .class-start.time-available {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}

/* Time badge — gray (waitlist / no openings) */
#class-finder .result-grid-cell.enhanced-card .class-start.time-waitlist,
#ryb-connect .result-grid-cell.enhanced-card .class-start.time-waitlist {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #6B7280 !important;
}

/* Content wrapper — generous padding */
#class-finder .result-grid-cell.enhanced-card > div:nth-child(3) {
  padding: 24px 24px 0 24px !important;
}

/* Status pill — "Ongoing" / "Starts MM/DD" */
.session-start-date {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 12px;
  background: rgba(209, 250, 229, 0.6);
  color: #065F46;
}

.session-status-upcoming .session-start-date {
  background: rgba(219, 234, 254, 0.6);
  color: #1E40AF;
}

.session-status-going .session-start-date {
  background: rgba(209, 250, 229, 0.6);
  color: #065F46;
}

.session-status-past .session-start-date {
  background: #F3F4F6;
  color: #6B7280;
}

/* h3 — no extra top margin (status pill provides spacing) */
#class-finder .result-grid-cell.enhanced-card h3,
#ryb-connect .result-grid-cell.enhanced-card h3 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
}

/* Class name — compact, bold */
#class-finder .result-grid-cell.enhanced-card h3 .class-name,
#ryb-connect .result-grid-cell.enhanced-card h3 .class-name {
  font-family: 'DM Serif Display', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #102a43 !important;
}

/* Next class line — below the class name */
.session-next-class {
  display: block;
  font-size: 12px;
  font-weight: 500;
  padding: 0 !important;
  color: #6B7280;
  margin-bottom: 20px;
}

.session-next-class span {
  color: #111827;
  font-weight: 600;
}

/* Price section — vertical, standalone */
#class-finder .result-grid-cell.enhanced-card .class-data,
#ryb-connect .result-grid-cell.enhanced-card .class-data {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 0 24px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Currency sign — small, muted */
#class-finder .result-grid-cell.enhanced-card .class-tuition [data-placeholder-text*="currency"],
#ryb-connect .result-grid-cell.enhanced-card .class-tuition [data-placeholder-text*="currency"] {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(17, 24, 39, 0.5) !important;
  vertical-align: baseline;
}

/* Price number — large, bold */
#class-finder .result-grid-cell.enhanced-card .class-tuition .class-price,
#ryb-connect .result-grid-cell.enhanced-card .class-tuition .class-price {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Tuition container */
#class-finder .result-grid-cell.enhanced-card .class-tuition,
#ryb-connect .result-grid-cell.enhanced-card .class-tuition {
  font-size: 24px !important;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 2px;
}

#class-finder .result-grid-cell.enhanced-card .class-tuition [data-placeholder-text*="payment_type"],
#ryb-connect .result-grid-cell.enhanced-card .class-tuition [data-placeholder-text*="payment_type"] {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: rgba(17, 24, 39, 0.55) !important;
  margin-left: 3px;
  text-transform: none !important;
  white-space: nowrap;
}

/* Hide payment type text in session/prorated mode only. Monthly cards show "/monthly". */
#class-finder .result-grid-cell.schedule-type-session .class-tuition [data-placeholder-text*="payment_type"],
#class-finder .result-grid-cell[class*="session-status-"] .class-tuition [data-placeholder-text*="payment_type"],
#ryb-connect .result-grid-cell.schedule-type-session .class-tuition [data-placeholder-text*="payment_type"],
#ryb-connect .result-grid-cell[class*="session-status-"] .class-tuition [data-placeholder-text*="payment_type"] {
  display: none !important;
}

/* Original price — strikethrough, gray, smaller */
#class-finder .result-grid-cell[class*="session-status-"] .class-tuition .original-price,
#ryb-connect .result-grid-cell[class*="session-status-"] .class-tuition .original-price {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  text-decoration: line-through;
  margin-left: 8px;
}

/* "Prorated price" label — small blue text below the tuition */
#class-finder .result-grid-cell[class*="session-status-"] .prorated-label,
#ryb-connect .result-grid-cell[class*="session-status-"] .prorated-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #2563EB;
  padding: 0 24px;
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1;
}

/* Hide original class-time (moved into session-details by JS) */
#class-finder .result-grid-cell.enhanced-card .class-time,
#ryb-connect .result-grid-cell.enhanced-card .class-time {
  display: none !important;
}

/* Hide original session-classes-count and classes-per-week (moved into session-details by JS) */
#class-finder .result-grid-cell.enhanced-card .session-classes-count,
#ryb-connect .result-grid-cell.enhanced-card .session-classes-count {
  display: none !important;
}

#class-finder .result-grid-cell.enhanced-card .classes-per-week,
#ryb-connect .result-grid-cell.enhanced-card .classes-per-week {
  display: none !important;
}

/* Session details section (icons + text, injected by JS) */
.session-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 24px 0;
  border-top: 1px solid #f9fafb;
  margin-bottom: 8px;
}

.session-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}

.session-detail-item .session-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #9CA3AF;
}

.session-detail-item.session-detail-blue {
  color: #2563EB;
  font-weight: 600;
}

.session-detail-item.session-detail-blue .session-icon {
  color: #2563EB;
}

.session-detail-item.session-detail-muted {
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 500;
}

.session-detail-item.session-detail-muted .session-icon {
  color: #9CA3AF;
}

/* Button — rounded inside card for session mode */
#class-finder .result-grid-cell.enhanced-card .button-section {
  padding: 16px 24px 24px !important;
  margin-top: 8px !important;
}


/* Past session — faded */
.session-status-past {
  opacity: 0.55;
}

#class-finder .result-grid-cell.session-status-past button.enroll-class.disabled-enroll {
  background: #E5E7EB !important;
  color: #9CA3AF !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* ─── Session Toolbar ─── */
#class-finder .session-toolbar {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 16px;
}

#class-finder .session-tabs {
  display: flex;
  border-bottom: 1px solid #E5E7EB;
}

#class-finder .session-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #6B7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#class-finder .session-tab:hover {
  color: #374151;
  background: rgba(30, 58, 95, 0.03);
}

#class-finder .session-tab.active {
  color: #1e3a5f;
  font-weight: 700;
  border-bottom-color: #1e3a5f;
  background: rgba(30, 58, 95, 0.04);
}

#class-finder .session-tab-label {
  pointer-events: none;
}

#class-finder .session-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: #D1FAE5;
  color: #047857;
  border: 1px solid #A7F3D0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}

#class-finder .session-info-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 20px;
  background: #F8FAFC;
  border-top: 1px solid #F1F5F9;
}

#class-finder .session-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

#class-finder .session-info-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 58, 95, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#class-finder .session-info-icon-circle--red {
  background: rgba(220, 38, 38, 0.08);
}

#class-finder .session-info-icon {
  width: 16px;
  height: 16px;
  color: #1e3a5f;
}

#class-finder .session-info-icon-circle--red .session-info-icon {
  color: #DC2626;
}

#class-finder .session-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#class-finder .session-info-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9CA3AF;
  line-height: 1;
}

#class-finder .session-info-value {
  font-size: 13px;
  font-weight: 500;
  color: #1e3a5f;
  line-height: 1.3;
}

#class-finder .session-info-holidays .session-info-value {
  color: #DC2626;
}

#class-finder .session-info-divider {
  width: 1px;
  height: 32px;
  background: #E2E8F0;
  flex-shrink: 0;
}

/* Mobile: horizontal scroll for tabs */
@media (max-width: 767px) {
  #class-finder .session-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #class-finder .session-tabs::-webkit-scrollbar {
    display: none;
  }

  #class-finder .session-tab {
    min-width: 120px;
    padding: 12px 10px;
    font-size: 13px;
  }

  #class-finder .session-info-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  #class-finder .session-info-item {
    padding: 0 12px;
  }

  #class-finder .session-info-divider {
    height: 24px;
  }

  #class-finder .session-info-icon-circle {
    width: 28px;
    height: 28px;
  }

  #class-finder .session-info-icon {
    width: 14px;
    height: 14px;
  }

  #class-finder .session-info-value {
    font-size: 12px;
  }
}

/* ==================== Mobile: Two-Column Enhanced Cards ==================== */

@media (max-width: 767px) {

  /* Card wrapper — remove gap (cards have their own spacing) */
  .grid-view .grid-results > div > div {
    gap: 8px !important;
  }

  /* Force full width at 767px (not just 450px) */
  .result-grid-cell {
    max-width: 100% !important;
  }

  /* Card container — CSS grid, two columns */
  #class-finder .result-grid-cell.enhanced-card,
  #ryb-connect .result-grid-cell.enhanced-card {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto repeat(3, auto);
    column-gap: 16px;
    row-gap: 0;
    padding: 12px 16px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  /* Remove hover effects on mobile */
  #class-finder .result-grid-cell.enhanced-card:hover,
  #ryb-connect .result-grid-cell.enhanced-card:hover {
    transform: none !important;
  }

  /* Time badge — inline, top row, full width */
  #class-finder .result-grid-cell.enhanced-card .class-start,
  #ryb-connect .result-grid-cell.enhanced-card .class-start {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 8px;
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  /* Content wrapper (name, date, location) — left column, spans rows 2-4 */
  #class-finder .result-grid-cell.enhanced-card > div:nth-child(3) {
    grid-column: 1;
    grid-row: 2 / 5;
    padding: 0 !important;
    min-width: 0;
  }

  /* Class name — smaller */
  #class-finder .result-grid-cell.enhanced-card h3,
  #ryb-connect .result-grid-cell.enhanced-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
  }

  #class-finder .result-grid-cell.enhanced-card h3 .class-name,
  #ryb-connect .result-grid-cell.enhanced-card h3 .class-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3;
  }

  /* Next class date — tighter */
  #class-finder .result-grid-cell.enhanced-card .session-next-class,
  #ryb-connect .result-grid-cell.enhanced-card .session-next-class {
    margin-bottom: 4px !important;
    font-size: 11px;
  }

  /* Location — compact */
  #class-finder .result-grid-cell.enhanced-card .location-wrapper,
  #ryb-connect .result-grid-cell.enhanced-card .location-wrapper {
    margin-bottom: 0 !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  #class-finder .result-grid-cell.enhanced-card .location-wrapper svg,
  #ryb-connect .result-grid-cell.enhanced-card .location-wrapper svg {
    width: 11px !important;
    height: 11px !important;
  }

  #class-finder .result-grid-cell.enhanced-card .location-wrapper h6,
  #ryb-connect .result-grid-cell.enhanced-card .location-wrapper h6 {
    font-size: 12px !important;
    color: #374151 !important;
  }

  /* Price — right column, row 2 */
  #class-finder .result-grid-cell.enhanced-card .class-data,
  #ryb-connect .result-grid-cell.enhanced-card .class-data {
    grid-column: 2;
    grid-row: 2;
    padding: 0 !important;
    margin: 0 !important;
    align-self: start;
    text-align: right;
  }

  #class-finder .result-grid-cell.enhanced-card .class-tuition,
  #ryb-connect .result-grid-cell.enhanced-card .class-tuition {
    font-size: 18px !important;
    margin-bottom: 2px !important;
    justify-content: flex-end;
  }

  #class-finder .result-grid-cell.enhanced-card .class-tuition .class-price,
  #ryb-connect .result-grid-cell.enhanced-card .class-tuition .class-price {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  #class-finder .result-grid-cell.enhanced-card .class-tuition [data-placeholder-text*="currency"],
  #ryb-connect .result-grid-cell.enhanced-card .class-tuition [data-placeholder-text*="currency"] {
    font-size: 11px !important;
  }

  /* Session details — right column, row 3 */
  #class-finder .result-grid-cell.enhanced-card .session-details,
  #ryb-connect .result-grid-cell.enhanced-card .session-details {
    grid-column: 2;
    grid-row: 3;
    padding: 0 !important;
    margin: 0 !important;
    border-top: none !important;
    gap: 2px !important;
    align-items: flex-end;
  }

  #class-finder .result-grid-cell.enhanced-card .session-detail-item,
  #ryb-connect .result-grid-cell.enhanced-card .session-detail-item {
    font-size: 11px;
    justify-content: flex-end;
    gap: 4px;
  }

  #class-finder .result-grid-cell.enhanced-card .session-detail-item .session-icon,
  #ryb-connect .result-grid-cell.enhanced-card .session-detail-item .session-icon {
    width: 12px;
    height: 12px;
    order: -1;
  }

  /* Button — right column, row 4, compact */
  #class-finder .result-grid-cell.enhanced-card .button-section,
  #ryb-connect .result-grid-cell.enhanced-card .button-section {
    grid-column: 2;
    grid-row: 4;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    justify-self: end;
  }

  #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;
    font-weight: 600 !important;
    border-radius: 8px !important;
    height: auto !important;
    width: auto !important;
    min-height: 32px;
    box-shadow: none !important;
  }

  /* Prorated label — compact */
  #class-finder .result-grid-cell.enhanced-card .prorated-label,
  #ryb-connect .result-grid-cell.enhanced-card .prorated-label {
    padding: 0 !important;
    font-size: 9px !important;
    text-align: right;
    margin-bottom: 2px !important;
  }

  /* Original price strikethrough — smaller */
  #class-finder .result-grid-cell.enhanced-card .class-tuition .original-price,
  #ryb-connect .result-grid-cell.enhanced-card .class-tuition .original-price {
    font-size: 11px !important;
    margin-left: 4px;
  }
}


/* ==================== New Camps — Restored Pre-Redesign Styles ====================
 * 
 * The new-camps template historically shared the `.template-camps` class with
 * legacy camps and inherited its CSS — that was the original intent when both
 * widgets needed identical base styling.
 *
 * In 216ff52 the legacy camps got a major design polish (modal-driven row, 
 * refined typography, brand-purple CTAs, compact week-row layout). Those
 * changes were authored against `#class-finder.template-camps` selectors, so
 * they LEAKED into new-camps via the shared class — visibly breaking what
 * had been a perfectly-fine inline-list design.
 *
 * The fix is two-part:
 * 
 *   1. Every `#class-finder.template-camps` selector in the file is now
 *      qualified with `:not(.template-new-camps)`. Legacy camps still gets
 *      its polished modal-driven design; new-camps is excluded.
 *
 *   2. The rules below are the pre-216ff52 `.template-camps` styles, lifted
 *      verbatim from the git history and re-scoped to `.template-new-camps`.
 *      This restores the design that new-camps was inheriting before the
 *      legacy polish — the per-camp inline price list the user wants back.
 *
 * Existing `#class-finder.template-new-camps` rules earlier in the file
 * (the addon section, the option footer, the row-toggle, etc.) remain in
 * effect: they're more specific than these base rules and apply on top.
 * ============================================================================ */

#class-finder.template-new-camps .camps-filter-bar {
  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;
}

#class-finder.template-new-camps .camps-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#class-finder.template-new-camps .camps-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;
}

#class-finder.template-new-camps .camps-quick-filter:hover {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  box-shadow: 0 2px 8px rgba(252, 211, 77, 0.3);
}

#class-finder.template-new-camps .camps-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);
}

#class-finder.template-new-camps .camps-quick-filter svg {
  flex-shrink: 0;
}

#class-finder.template-new-camps .camps-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;
}

#class-finder.template-new-camps .camps-filter-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

#class-finder.template-new-camps .camps-filter-pill.active {
  border-color: #53d89a;
  box-shadow: 0 0 0 1px #53d89a;
  background: #f0fdf4;
}

#class-finder.template-new-camps .camps-filter-pill.has-value {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

#class-finder.template-new-camps .camps-filter-pill svg {
  flex-shrink: 0;
  color: #94a3b8;
}

#class-finder.template-new-camps .camps-filter-pill.has-value svg {
  color: #16a34a;
}

#class-finder.template-new-camps .camps-pill-chevron {
  transition: transform 0.2s ease;
}

#class-finder.template-new-camps .camps-filter-pill.active .camps-pill-chevron {
  transform: rotate(180deg);
}

#class-finder.template-new-camps .camps-pill-label {
  color: #94a3b8;
  font-weight: 500;
}

#class-finder.template-new-camps .camps-filter-pill.has-value .camps-pill-label {
  color: #16a34a;
}

#class-finder.template-new-camps .camps-pill-value {
  font-weight: 600;
}

#class-finder.template-new-camps .camps-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;
}

#class-finder.template-new-camps .camps-filter-pill.active .camps-filter-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

#class-finder.template-new-camps .camps-filter-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

#class-finder.template-new-camps .camps-filter-dropdown li {
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  transition: background 0.1s ease;
}

#class-finder.template-new-camps .camps-filter-dropdown li:hover {
  background: #f1f5f9;
}

#class-finder.template-new-camps .camps-filter-dropdown li.selected {
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 600;
}

#class-finder.template-new-camps .camps-filter-dropdown::-webkit-scrollbar {
  width: 6px;
}

#class-finder.template-new-camps .camps-filter-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

#class-finder.template-new-camps .camps-filter-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camps-filter-bar {
  padding: 12px;
    border-radius: 12px;
    margin-bottom: 16px;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camps-filters-wrap {
  gap: 8px;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camps-filter-pill {
  padding: 8px 12px;
    font-size: 12px;
    gap: 6px;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camps-quick-filter {
  padding: 8px 14px;
    font-size: 12px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-filters-wrap {
  gap: 6px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-filter-pill {
  padding: 8px 10px;
    font-size: 11px;
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    justify-content: center;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-quick-filter {
  width: 100%;
    justify-content: center;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-filter-dropdown {
  min-width: 180px;
    left: auto;
    right: 0;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-pill-label {
  display: none;
}

}

#class-finder.template-new-camps .camps-results {
  max-width: 1900px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 48px;
}

#class-finder.template-new-camps .camps-type-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#class-finder.template-new-camps .camps-type-bar::-webkit-scrollbar {
  display: none;
}

#class-finder.template-new-camps .camps-type-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  margin-right: 4px;
}

#class-finder.template-new-camps .camp-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#class-finder.template-new-camps .camp-type-pill:hover {
  border-color: rgba(3, 105, 161, 0.3);
  color: #0f172a;
  background: rgba(3, 105, 161, 0.04);
}

#class-finder.template-new-camps .camp-type-pill.active {
  background: #0369a1;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25);
}

#class-finder.template-new-camps .camp-type-pill.active:hover {
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.2);
}

#class-finder.template-new-camps .camp-type-pill .pill-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
}

#class-finder.template-new-camps .camp-type-pill.active .pill-count {
  opacity: 0.85;
}

#class-finder.template-new-camps .camps-month-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#class-finder.template-new-camps .camps-month-bar::-webkit-scrollbar {
  display: none;
}

#class-finder.template-new-camps .camp-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#class-finder.template-new-camps .camp-month-pill:hover {
  border-color: rgba(83, 216, 154, 0.4);
  color: #0f172a;
  background: rgba(83, 216, 154, 0.04);
}

#class-finder.template-new-camps .camp-month-pill.active {
  background: linear-gradient(228deg, #56dad4, #53d89a 82%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(83, 216, 154, 0.25);
}

#class-finder.template-new-camps .camp-month-pill.active:hover {
  box-shadow: 0 2px 8px rgba(83, 216, 154, 0.2);
}

#class-finder.template-new-camps .pill-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
}

#class-finder.template-new-camps .camp-month-pill.active .pill-count {
  opacity: 0.85;
}

#class-finder.template-new-camps .camps-month-group {
  transition: opacity 0.25s ease, max-height 0.3s ease;
}

#class-finder.template-new-camps .camps-month-group.camps-hidden {
  display: none;
}

#class-finder.template-new-camps h4.camps-month-heading {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 48px 0 20px;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

#class-finder.template-new-camps h4.camps-month-heading::before {
  content: "";
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #56dad4, #53d89a);
  border-radius: 2px;
  flex-shrink: 0;
}

#class-finder.template-new-camps .camps-month-group:first-of-type h4.camps-month-heading {
  margin-top: 0;
}

#class-finder.template-new-camps .camp-count {
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.35);
  margin-left: -4px;
}

#class-finder.template-new-camps .camp-row-enter {
  animation: campCardEnter 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

#class-finder.template-new-camps .camps-month-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  transition: background 0.15s ease;
}

#class-finder.template-new-camps .camps-month-header:hover {
  background: rgba(0, 0, 0, 0.015);
}

#class-finder.template-new-camps .camps-month-header h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  padding: 0;
  border: none;
}

#class-finder.template-new-camps .camps-month-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #6B7280;
  transition: transform 0.25s ease;
}

#class-finder.template-new-camps .camps-month-group.collapsed .camps-month-chevron {
  transform: rotate(-90deg);
}

#class-finder.template-new-camps .camps-month-bar-accent {
  width: 3px;
  height: 24px;
  background: #10B981;
  border-radius: 2px;
  flex-shrink: 0;
}

#class-finder.template-new-camps .camps-month-count {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 12px;
  white-space: nowrap;
  margin-left: 4px;
}

#class-finder.template-new-camps .camps-month-rows {
  transition: opacity 0.2s ease;
}

#class-finder.template-new-camps .camps-month-group.collapsed .camps-month-rows {
  display: none;
}

#class-finder.template-new-camps .camps-month-group + .camps-month-group {
  margin-top: 8px;
}

#class-finder.template-new-camps .camp-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

#class-finder.template-new-camps .camp-row:hover {
  border-color: #10B981;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}

#class-finder.template-new-camps .camp-row:last-child {
  margin-bottom: 0;
}

#class-finder.template-new-camps .camp-card-left {
  flex: 0 0 300px;
  background: #F9FAFB;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#class-finder.template-new-camps .camp-card-left-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

#class-finder.template-new-camps .camp-row-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#class-finder.template-new-camps .camp-row-date .date-range {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

#class-finder.template-new-camps .camp-row-date .weekday-range {
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}

#class-finder.template-new-camps .camp-row-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-top: 4px;
}

#class-finder.template-new-camps .camp-row-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.3;
}

#class-finder.template-new-camps .camp-row-desc {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#class-finder.template-new-camps .camp-row-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
}

#class-finder.template-new-camps .camp-row-time .clock-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}

#class-finder.template-new-camps .camp-card-multi-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: auto;
}

#class-finder.template-new-camps .camp-card-multi-info svg {
  flex-shrink: 0;
  color: #94a3b8;
}

#class-finder.template-new-camps .camp-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 12px;
  white-space: nowrap;
  line-height: 1;
}

#class-finder.template-new-camps .camp-tag-age {
  color: #15803D;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 6px;
}

#class-finder.template-new-camps .camp-tag-session {
  color: #0D9488;
  background: #F0FDFA;
  border: 1px solid #99F6E4;
  border-radius: 6px;
}

#class-finder.template-new-camps .camp-card-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
}

#class-finder.template-new-camps .camp-row-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#class-finder.template-new-camps .camp-right-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#class-finder.template-new-camps .camp-row-price .amount {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

#class-finder.template-new-camps .camp-row-price .price-suffix {
  font-size: 12px;
  font-weight: 400;
  color: #9CA3AF;
}

#class-finder.template-new-camps .camp-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

#class-finder.template-new-camps .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

#class-finder.template-new-camps .camp-status.low {
  color: #d97706;
}

#class-finder.template-new-camps .camp-status.low .status-dot {
  background: #F59E0B;
}

#class-finder.template-new-camps .camp-status.waitlist {
  color: #9ca3af;
}

#class-finder.template-new-camps .camp-status.waitlist .status-dot {
  background: #9CA3AF;
}

#class-finder.template-new-camps .camp-row-action {
  flex-shrink: 0;
}

#class-finder.template-new-camps .camp-button {
  min-width: 110px;
  height: 42px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

#class-finder.template-new-camps .camp-button.enroll {
  background: #10B981;
  color: #fff;
}

#class-finder.template-new-camps .camp-button.enroll:hover {
  background: #059669;
}

#class-finder.template-new-camps .camp-button.waitlist {
  background: #fff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}

#class-finder.template-new-camps .camp-button.waitlist:hover {
  border-color: #94a3b8;
  color: #1e293b;
  background: #f8fafc;
}

#class-finder.template-new-camps .camp-button.disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  cursor: default;
  font-size: 12px;
  font-weight: 500;
}

#class-finder.template-new-camps .camp-row-multi {
  align-items: stretch;
}

#class-finder.template-new-camps .camp-row-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
  padding: 8px;
  justify-content: center;
}

#class-finder.template-new-camps .camp-options-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #F3F4F6;
}

#class-finder.template-new-camps .camp-options-header svg {
  flex-shrink: 0;
  color: #9CA3AF;
}

#class-finder.template-new-camps .camp-sub-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

#class-finder.template-new-camps .camp-sub-option:hover {
  background: rgba(0, 0, 0, 0.025);
}

#class-finder.template-new-camps .camp-sub-option + .camp-sub-option {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#class-finder.template-new-camps .sub-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 100px;
  flex: 1;
}

#class-finder.template-new-camps .sub-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

#class-finder.template-new-camps .sub-time {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

#class-finder.template-new-camps .sub-option-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

#class-finder.template-new-camps .sub-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 60px;
  text-align: right;
}

#class-finder.template-new-camps .sub-price-wrap .amount {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

#class-finder.template-new-camps .camp-sub-option .camp-button {
  min-width: 80px;
  height: 36px;
  font-size: 12px;
}

#class-finder.template-new-camps .no-camps-message {
  text-align: center;
  padding: 80px 20px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 400;
}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camp-row {
  flex-direction: column;
    border-radius: 12px;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camp-card-left {
  flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px;
    border-radius: 0;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camp-card-right {
  padding: 16px 20px;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camp-right-meta {
  align-items: flex-end;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camp-row-options {
  width: 100%;
    min-width: unset;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-type-bar {
  gap: 6px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-type-pill {
  height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-month-bar {
  gap: 6px;
    padding-bottom: 16px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .filter-controls {
  margin-bottom: 8px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-month-pill {
  height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-month-header {
  padding: 14px 16px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camps-month-header h4 {
  font-size: 16px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-row {
  border-radius: 10px;
    margin-bottom: 8px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-card-left {
  padding: 16px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-row-date .date-range {
  font-size: 18px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-row-name {
  font-size: 14px;
    margin-top: 4px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-card-right {
  padding: 12px 16px;
    gap: 12px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-row-options {
  width: 100%;
    min-width: unset;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-sub-option {
  padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
}

}

@media only screen and (max-width: 480px) {
#class-finder.template-new-camps .camp-sub-option .camp-button {
  width: 100%;
    margin-left: 0;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .filter-top {
  margin-top: 8px;
    margin-bottom: 4px;
    gap: 12px;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .filter-top .main-title {
  font-size: 22px !important;
    margin-bottom: 4px;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .filter-controls {
  flex-flow: row !important;
    gap: 8px;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .filter-controls .edit-option {
  height: 48px !important;
    width: 50% !important;
    padding: 6px 10px;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .filter-controls .edit-option .label {
  font-size: 11px;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .filter-controls .edit-option .value {
  font-size: 13px;
}

}

@media only screen and (max-width: 520px) {
#class-finder.template-new-camps .camps-month-bar {
  padding-bottom: 10px;
    margin-bottom: 4px;
}

}

@media only screen and (max-width: 768px) {
#class-finder.template-new-camps .camps-type-bar::after,
#class-finder.template-new-camps .camps-month-bar::after {
  content: "";
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 40px;
    min-height: 100%;
    margin-left: -40px;
    background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

}

#class-finder.template-new-camps .camp-addons-divider {
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9CA3AF;
  border-top: 1px solid #F3F4F6;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

#class-finder.template-new-camps .camp-sub-option.addon .sub-label {
  color: #6B7280;
  font-weight: 500;
}

#class-finder.template-new-camps .camp-sub-option.addon .sub-price-wrap .amount {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
}

#class-finder.template-new-camps .camp-option-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #F3F4F6;
}