/*
 * WP Salesforce Portal — front-end styles.
 *
 * All visual choices are exposed as CSS Custom Properties on :root so themes
 * (or the admin's Custom CSS textarea on the Appearance tab) can override
 * any of them with a single rule. Defaults fall through to WordPress
 * `--wp--preset--color--*` theme-token values where the theme provides them,
 * so block themes get aligned colors without any admin work.
 *
 * Override examples for theme developers:
 *
 *   :root {
 *     --wsp-primary:    #c4302b;        // override plugin's primary blue
 *     --wsp-card-radius: 12px;          // squarer cards
 *     --wsp-card-shadow: none;          // flat
 *   }
 */
:root {
  /* Brand */
  --wsp-primary: var(--wp--preset--color--primary, #2271b1);
  --wsp-primary-hover: var(--wp--preset--color--primary, #135e96);
  --wsp-primary-text: #ffffff;

  /* Neutrals */
  --wsp-text: var(--wp--preset--color--foreground, #1d2327);
  --wsp-muted: #50575e;
  --wsp-faint: #6c7781;

  /* Surfaces */
  --wsp-card-bg: var(--wp--preset--color--background, #ffffff);
  --wsp-card-border: #e0e0e0;
  --wsp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --wsp-card-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.08);
  --wsp-card-radius: 8px;
  --wsp-bg-subtle: #fafafa;

  /* Spacing */
  --wsp-gap: 1rem;
  --wsp-gap-lg: 1.5rem;

  /* Status pill palette */
  --wsp-status-ok-bg: #e6f4ea;
  --wsp-status-ok-fg: #1e7e34;
  --wsp-status-warn-bg: #fff4e5;
  --wsp-status-warn-fg: #8a4a00;
  --wsp-status-danger-bg: #fdecea;
  --wsp-status-danger-fg: #b32d2e;

  /* Inline messages */
  --wsp-msg-success: #1e7e34;
  --wsp-msg-error: #b32d2e;
}

/* =================================================================
 * Profile — `/sf-profile/` page (read-only contact view)
 * =================================================================
 * Visual language mirrors `.wsp-program-single` + `.wsp-auth`:
 *   - 720px content column
 *   - 2.25rem bold heading at the top
 *   - Light-gray rounded "facts" card holding the field grid
 *   - Eyebrow (uppercase 0.82rem) dt + 1.05rem 600-weight dd
 * Same `--wsp-prog-*` design tokens as the rest of the portal so
 * theme-level overrides re-skin profile alongside cards and forms.
 *
 * Body class `wsp-profile-page` is added by Profile\Shortcode when
 * the [wsp_profile] shortcode is on the page; demotes the theme's
 * H1 into a centered eyebrow above the shortcode's H2 greeting. */
.wsp-profile {
  max-width: 720px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
  color: var(--wsp-text, #1a1a1a);
}

.wsp-profile__heading {
  margin: 0 0 0.5rem;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-profile__lede {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--wsp-muted, #5a5a5a);
}

/* Field grid wrapped in the same `--wsp-prog-card-bg` surface as
   `.wsp-program-single__facts` so the profile reads as a sibling
   panel. */
.wsp-profile__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 2rem;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: var(--wsp-prog-card-radius, 24px);
}
@media (min-width: 560px) {
  .wsp-profile__fields {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2.5rem;
  }
}
@media (min-width: 880px) {
  .wsp-profile__fields {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wsp-profile__field { display: block; margin: 0; }
.wsp-profile__field dt {
  margin: 0 0 0.3rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wsp-muted, #5a5a5a);
}
.wsp-profile__field dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wsp-text, #1a1a1a);
  line-height: 1.4;
  /* Long emails / mailing addresses wrap rather than overflow the
     card on narrow viewports. */
  word-break: break-word;
}

.wsp-profile__footnote {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  color: var(--wsp-muted, #5a5a5a);
  font-style: italic;
  text-align: center;
}

/* Empty fields kept visible (show_empty="yes") render their dd in a
   softer color so the page reads as "these slots exist but aren't
   filled in" rather than "the data is broken". */
.wsp-profile__field--empty dd {
  color: var(--wsp-faint, #6c7781);
  font-weight: 500;
}

/* Friendly fallback when the admin hasn't selected any fields in
   Settings → Salesforce Object → Contact AND every default field is
   also missing. Avoids a blank slate that looks broken. */
.wsp-profile__empty {
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: var(--wsp-prog-card-radius, 24px);
  color: var(--wsp-muted, #5a5a5a);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Guest / error variants — centered, gray, friendly card. */
.wsp-profile--guest,
.wsp-profile--error {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: var(--wsp-prog-card-radius, 24px);
  color: var(--wsp-muted, #5a5a5a);
}
.wsp-profile--guest p,
.wsp-profile--error p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}
.wsp-profile--guest a {
  color: var(--wsp-prog-cta-bg, #14bcbc);
  font-weight: 700;
  text-decoration: none;
}
.wsp-profile--guest a:hover { text-decoration: underline; }

/* Demote the theme's H1 to an eyebrow on the profile page — same
   treatment as `.wsp-auth-page` so the two surfaces feel like
   siblings, and the shortcode's "Hi, {FirstName}!" H2 stays
   dominant. */
body.wsp-profile-page .entry-title,
body.wsp-profile-page .wp-block-post-title {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wsp-muted, #5a5a5a);
  border-bottom: 1px solid #e0e0e0;
}
body.wsp-profile-page .wsp-profile {
  margin-top: 2rem;
}

/* --- Edit form --- */

.wsp-profile__msg {
  margin: 0 0 1rem;
  padding: 0;
  min-height: 1.4em;
  font-size: 0.95rem;
}
.wsp-profile__msg.is-success {
  color: var(--wsp-msg-success);
}
.wsp-profile__msg.is-error {
  color: var(--wsp-msg-error);
}

.wsp-profile__note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: #fcfaf2;
  border-left: 3px solid #dba617;
  color: var(--wsp-muted);
  font-size: 0.9rem;
}

.wsp-profile__form-row {
  display: block;
  margin: 0 0 1rem;
}
.wsp-profile__form-row--pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .wsp-profile__form-row--pair {
    grid-template-columns: 2fr 1fr;
  }
}

.wsp-profile__label {
  display: block;
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--wsp-muted);
}
.wsp-profile__input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  box-sizing: border-box;
  background: var(--wsp-card-bg);
}
.wsp-profile__input:focus {
  outline: 2px solid var(--wsp-primary);
  outline-offset: -1px;
  border-color: var(--wsp-primary);
}

.wsp-profile__actions {
  margin: 1.25rem 0 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wsp-profile__btn {
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--wsp-text);
  background: var(--wsp-bg-subtle);
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  cursor: pointer;
}
.wsp-profile__btn:hover {
  background: #e6e7e7;
}
.wsp-profile__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wsp-profile__btn--primary {
  background: var(--wsp-primary);
  color: #fff;
  border-color: var(--wsp-primary);
}
.wsp-profile__btn--primary:hover {
  background: var(--wsp-primary-hover);
  border-color: var(--wsp-primary-hover);
}

/* =================================================================
 * Programs archive + cards (Phase 7)
 * ================================================================= */

.wsp-programs-archive {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.25rem;
}
.wsp-programs-archive__header {
  margin-bottom: 1.5rem;
  text-align: center;
}
.wsp-programs-archive__title {
  margin: 0 0 0.5rem;
  font-size: 1.85rem;
  line-height: 1.2;
}
.wsp-programs-archive__lede {
  margin: 0;
  color: var(--wsp-muted);
  font-size: 1rem;
}
.wsp-programs-archive__pagination {
  margin-top: 2rem;
  text-align: center;
}

/* Age-group filter — rendered by ListShortcode::renderAgeGroupTabs() above
   the grid. URL-driven (?age_group=...). Styled to match the HSTF site's
   existing "Program Filters" chips: chunky pills with a lime background,
   black active state, no visible border.

   Colors expose CSS variables so a theme / Appearance tab override can
   re-skin without editing the plugin:
       --wsp-filter-bg          inactive pill background
       --wsp-filter-bg-hover    hover/focus background
       --wsp-filter-text        inactive pill text color
       --wsp-filter-active-bg   active pill background
       --wsp-filter-active-text active pill text color
*/
:root {
  --wsp-filter-bg: #E5FB8B; /* lime green */
  --wsp-filter-bg-hover: #000; /* slightly darker on hover */
  --wsp-filter-text: #676767;
  --wsp-filter-active-bg: #000000;
  --wsp-filter-active-text: #ffffff;
}
.wsp-programs__filter {
  /* Gap above so the chip row sits clear of whatever container precedes
       it on the page (a hero block, Elementor section title, etc.). The
       bottom margin separates chips from the category items below. */
  margin: 2.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.wsp-programs__filter-label {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  white-space: nowrap;
}
.wsp-programs__filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.wsp-programs__filter-item {
  margin: 0;
}
.wsp-programs__filter-item a {
  font-family: 'Inter', sans-serif !important;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 60px;
  border: none;
  background: var(--wsp-filter-bg);
  color: var(--wsp-filter-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3em;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s,
    transform 0.05s;
}
.wsp-programs__filter-item a:hover,
.wsp-programs__filter-item a:focus {
  background: var(--wsp-filter-bg-hover);
  color: #fff;
}
.wsp-programs__filter-item a:active {
  transform: translateY(1px);
}
.wsp-programs__filter-item--active a,
.wsp-programs__filter-item--active a:hover,
.wsp-programs__filter-item--active a:focus {
  background: var(--wsp-filter-active-bg);
  color: var(--wsp-filter-active-text);
  cursor: default;
}

.wsp-programs__empty {
  margin: 3rem auto;
  padding: 2rem;
  max-width: 480px;
  text-align: center;
  border: 1px dashed #c3c4c7;
  border-radius: 8px;
  color: var(--wsp-muted);
  background: var(--wsp-bg-subtle);
}

/* ─── [wsp_programs_by_category] — grouped layout ─────────────────────
   Sections stack vertically. Each section has a header (image + text)
   followed by the standard wsp-programs__grid of cards.
   The header stacks on narrow viewports and goes side-by-side at >= 760px. */
.wsp-programs-by-category {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.wsp-programs-by-category__items {
  display: flex;
  flex-direction: column;
  gap: inherit;
  transition: opacity 0.18s ease;
}
.wsp-programs-by-category__items--loading {
  opacity: 0.35;
  pointer-events: none;
}
.wsp-category {
  border-top: 1px solid var(--wsp-card-border, #c3c4c7);
  padding-top: 2rem;
}
.wsp-category:first-of-type {
  border-top: none;
  padding-top: 0;
}
.wsp-category__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  align-items: start;
}
@media (min-width: 760px) {
  .wsp-category__header {
    grid-template-columns: 280px 1fr;
    gap: 2rem;
  }
}
.wsp-category__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wsp-card-radius, 8px);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
/* Masked category image: photo base + frame overlay PNG (transparent star cutout).
   These program-masks assets are overlay frames, not CSS mask-image shapes. */
.wsp-category__image--stacked {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--wsp-card-radius, 8px);
}
.wsp-category__image--stacked .wsp-category__image-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
}
.wsp-category__image--stacked .wsp-category__image-top {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
}
.wsp-category__name {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--wsp-text, #1d2327);
}
.wsp-category__description {
  color: var(--wsp-muted, #50575e);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.wsp-category__description p:first-child {
  margin-top: 0;
}
.wsp-category__description p:last-child {
  margin-bottom: 0;
}
.wsp-category__good-fit h3 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wsp-muted, #50575e);
}
.wsp-category__good-fit p:first-child {
  margin-top: 0;
}
.wsp-category__good-fit p:last-child {
  margin-bottom: 0;
}
.wsp-category__empty {
  color: var(--wsp-muted, #50575e);
  font-style: italic;
  padding: 0.75rem 1rem;
  background: var(--wsp-bg-subtle, #f6f7f7);
  border-radius: 4px;
  margin: 0;
}

/* ─── Categories-only mode (show_programs="no") ─────────────────────
   Matches the HSTF "Programs" page design:
     - Alternating gray/white card backgrounds (odd/even)
     - Small green age label tag above the category name
     - Image positioned on the RIGHT at desktop width
     - Bulleted "Good Fit For" list
     - Orange Learn More CTA pill */

:root {
  --wsp-cat-bg-alt: #F2F2F3; /* alternating gray background */
  --wsp-cat-radius: 24px;
  --wsp-cat-age-color: #798F1D; /* green age-label text */
  --wsp-cta-bg: #FA8804; /* orange Learn More */
  --wsp-cta-bg-hover: #14BCBC;
  --wsp-cta-text: #ffffff;
  /* Small decorative image rendered in the top-right corner of each
       category card. Override per-customer in Appearance → Custom CSS,
       or set to `none` to remove. Default points at HSTF's brand sparkle;
       relative URL so it works on any domain that has the uploads dir. */
  --wsp-cat-decoration: url('/wp-content/uploads/2026/04/fi_18432318.png');
  --wsp-cat-decoration-size: 60px;
  --wsp-cat-decoration-offset: 1.5rem;
}

.wsp-programs-by-category--info-only {
  gap: 2rem;
}
.wsp-programs-by-category--info-only .wsp-category {
  position: relative; /* anchor for the ::before decoration */
  border: none;
  padding: 3.5rem 4rem;
  background: transparent;
  border-radius: var(--wsp-cat-radius);
  overflow: hidden;
}
/* Green sparkle decoration in the top-right corner of every card.
   Hidden when `--wsp-cat-decoration: none;` is set. */
.wsp-programs-by-category--info-only .wsp-category::before {
  content: '';
  position: absolute;
  top: var(--wsp-cat-decoration-offset);
  right: var(--wsp-cat-decoration-offset);
  width: var(--wsp-cat-decoration-size);
  height: var(--wsp-cat-decoration-size);
  background-image: var(--wsp-cat-decoration);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
  z-index: 1;
}
/* Alternating backgrounds — odd cards gray, even cards transparent.
   Targets children of the items wrapper (AJAX-swappable container).
   Each child is either a bare <section.wsp-category> or a
   <a.wsp-category-link> wrapping one. The selector handles both. */
.wsp-programs-by-category--info-only
  .wsp-programs-by-category__items
  > :nth-child(odd)
  .wsp-category,
.wsp-programs-by-category--info-only
  .wsp-programs-by-category__items
  > .wsp-category:nth-child(odd) {
  background: var(--wsp-cat-bg-alt);
}
.wsp-programs-by-category--info-only
  .wsp-programs-by-category__items
  > :nth-child(even)
  .wsp-category,
.wsp-programs-by-category--info-only
  .wsp-programs-by-category__items
  > .wsp-category:nth-child(even) {
  background: transparent;
}

/* Header: image on the right at desktop, stacked on mobile. */
.wsp-programs-by-category--info-only .wsp-category__header {
  margin-bottom: 0;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 760px) {
  .wsp-programs-by-category--info-only .wsp-category__header {
    grid-template-columns: 1fr 420px; /* intro left · image right */
    gap: 3rem;
    align-items: center;
  }
}

/* Image area — stacked base + top images. Top image is positioned on top
   of the base via absolute positioning. Designed for the customer's
   "star-shape mask" pattern: base is the photo, top is a transparent PNG
   that creates the framing/clipping effect. */
.wsp-programs-by-category--info-only .wsp-category__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}
.wsp-programs-by-category--info-only .wsp-category__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wsp-programs-by-category--info-only .wsp-category__image-base {
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.wsp-programs-by-category--info-only .wsp-category__image-top {
  position: absolute;
  inset: 0;
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
}

/* Elementor Loop Grid: photo + frame overlay (same pattern as category shortcode). */
.wsp-program-mask-stack {
  position: relative;
  overflow: hidden;
}
.wsp-program-mask-stack__photo,
.wsp-program-mask-stack__photo .elementor-widget-container {
  position: relative;
  display: block;
  width: 100%;
}
.wsp-program-mask-stack__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.wsp-program-mask-stack__overlay,
.wsp-program-mask-stack__mask-source,
.wsp-program-mask-stack__overlay .elementor-widget-container,
.wsp-program-mask-stack__mask-source .elementor-widget-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.wsp-program-mask-stack__overlay img,
.wsp-program-mask-stack__mask-source img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tiny green age label above the headline. */
.wsp-category__age-label {
  font-family: 'Poppins', sans-serif !important;
  display: block;
  margin-bottom: 0.6rem;
  color: var(--wsp-cat-age-color);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Headline — large and bold. */
.wsp-programs-by-category--info-only .wsp-category__name {
  font-family: 'Momo Trust Display', sans-serif !important;
  margin: 0 0 1.5rem;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3em;
  color: #000000;
}
.wsp-programs-by-category--info-only .wsp-category__description {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  margin: 0 0 2rem;
  max-width: 540px;
}
.wsp-programs-by-category--info-only .wsp-category__description p:first-child {
  margin-top: 0;
}
.wsp-programs-by-category--info-only .wsp-category__description p:last-child {
  margin-bottom: 0;
}

/* "Good Fit For" block — bold label, bulleted list. */
.wsp-programs-by-category--info-only .wsp-category__good-fit {
  margin-bottom: 0.5rem;
}
.wsp-programs-by-category--info-only .wsp-category__good-fit h3 {
  font-family: 'Poppins', sans-serif !important;
  margin: 0 0 0.75rem;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #000000;
}
.wsp-programs-by-category--info-only .wsp-category__good-fit ul {
  margin: 0;
  padding-left: 1.35rem;
  list-style: disc;
}
.wsp-programs-by-category--info-only .wsp-category__good-fit li {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px;
  line-height: 1.6em;
  color: #000000;
}
.wsp-programs-by-category--info-only .wsp-category__good-fit li:last-child {
  margin-bottom: 0;
}

/* Orange Learn More CTA pill. Matches the size of the filter chips. */
.wsp-category__cta {
  font-family: 'Inter', sans-serif !important;
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: 12px 24px;
  background: var(--wsp-cta-bg);
  color: var(--wsp-cta-text);
  border-radius: 60px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3em;
  text-decoration: none;
  transition:
    background-color 0.15s,
    transform 0.05s;
}

/* Linkable wrapper — entire card is an anchor. Strip default link styling
   so the child <section> styling controls everything.
   Cards stay STATIC on hover (matching the HSTF production design); only
   the Learn More CTA pill changes color so the link affordance is clear.
   Keyboard focus still draws an outline for accessibility. */
.wsp-category-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wsp-category-link:hover .wsp-category__cta {
  background: var(--wsp-cta-bg-hover);
}
.wsp-category-link:focus {
  outline: none;
}
.wsp-category-link:focus-visible .wsp-category {
  outline: 3px solid var(--wsp-filter-bg, #E5FB8B);
  outline-offset: 3px;
}

.wsp-programs__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .wsp-programs__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}
@media (min-width: 980px) {
  .wsp-programs__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
  }
}

.wsp-program-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--wsp-card-border);
  border-radius: 10px;
  background: var(--wsp-card-bg);
  box-shadow: var(--wsp-card-shadow);
  transition:
    box-shadow 120ms ease,
    transform 120ms ease;
}
.wsp-program-card:hover {
  box-shadow: var(--wsp-card-shadow-hover);
  transform: translateY(-2px);
}

.wsp-program-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wsp-program-card__status {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: #e0e7ec;
  color: var(--wsp-text);
}
.wsp-program-card--enrolling .wsp-program-card__status {
  background: var(--wsp-status-ok-bg);
  color: var(--wsp-msg-success);
}
.wsp-program-card--pre-enrollment .wsp-program-card__status {
  background: var(--wsp-status-warn-bg);
  color: var(--wsp-status-warn-fg);
}
.wsp-program-card--waitlist-only .wsp-program-card__status {
  background: var(--wsp-status-danger-bg);
  color: var(--wsp-msg-error);
}

.wsp-program-card__year {
  font-size: 0.78rem;
  color: var(--wsp-faint);
}

.wsp-program-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.3;
}
.wsp-program-card__title a {
  color: var(--wsp-text);
  text-decoration: none;
}
.wsp-program-card__title a:hover {
  text-decoration: underline;
}

.wsp-program-card__tags {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wsp-program-card__tag {
  padding: 0.1rem 0.55rem;
  font-size: 0.78rem;
  border-radius: 999px;
  background: #f0f2f4;
  color: #404040;
}

.wsp-program-card__schedule {
  margin: 0.25rem 0;
  color: var(--wsp-muted);
  font-size: 0.92rem;
}

.wsp-program-card__availability {
  margin: 0.4rem 0 1rem;
  color: var(--wsp-muted);
  font-size: 0.88rem;
  min-height: 1.4em;
}

.wsp-program-card__cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--wsp-primary);
  border-radius: 6px;
  text-decoration: none;
}
.wsp-program-card__cta:hover {
  background: var(--wsp-primary-hover);
}

/* =================================================================
 * Single program (Phase 7)
 * ================================================================= */

/* ─── Single program page (/ta-programs/{slug}/) ──────────────────────
   Styled to match the customer's system design: light gray rounded
   container, bold typography, lime / teal accent palette, generous
   padding. Mirrors the spacing + scale of the program cards on the
   category pages. */

/* Single-page layout shared between programs and events. Every rule
   below targets BOTH `.wsp-program-single*` and `.wsp-event-single*`
   so the two templates render identically without duplicating CSS.
   Add an event-only override by appending a rule below this block
   that targets `.wsp-event-single` only. */
.wsp-program-single,
.wsp-event-single {
  max-width: 1100px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
  color: var(--wsp-text, #1a1a1a);
}

.wsp-program-single__back,
.wsp-event-single__back {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.wsp-program-single__back a,
.wsp-event-single__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--wsp-text, #1a1a1a);
  text-decoration: none;
  transition: color 0.15s;
}
.wsp-program-single__back a:hover,
.wsp-event-single__back a:hover {
  color: var(--wsp-prog-cta-bg, #14bcbc);
  text-decoration: none;
}

/* Main article container — flat layout, no border, no shadow.
   The content sits directly on the page background like other system pages. */
.wsp-program-single__article,
.wsp-event-single__article {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Header: image on the left (desktop), title/chips on the right. */
.wsp-program-single__header,
.wsp-event-single__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  align-items: center;
}
@media (min-width: 760px) {
  .wsp-program-single__header,
  .wsp-event-single__header {
    grid-template-columns: 480px 1fr;
    gap: 3rem;
  }
}

.wsp-program-single__media,
.wsp-event-single__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--wsp-prog-card-bg, #f4f4f4);
}
.wsp-program-single__media img,
.wsp-event-single__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wsp-program-single__media--placeholder,
.wsp-event-single__media--placeholder {
  background:
    var(--wsp-prog-placeholder-icon, none) center/64px 64px no-repeat,
    var(
      --wsp-prog-placeholder-bg,
      linear-gradient(135deg, #e6e6e6 0%, #f0f0f0 60%, #f7f7f7 100%)
    );
  background-blend-mode: normal;
}
.wsp-program-single__media--placeholder::after,
.wsp-event-single__media--placeholder::after {
  /* Brand opacity overlay on placeholder so it doesn't feel empty. */
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--wsp-prog-placeholder-icon, none) center/64px 64px no-repeat;
  opacity: 0.35;
}

.wsp-program-single__intro,
.wsp-event-single__intro {
  /* sits right of the image at desktop, below at mobile */
}

/* Chips row above the title — category + age + status. */
.wsp-program-single__chips,
.wsp-event-single__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.wsp-program-single__chip,
.wsp-event-single__chip {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  background: var(--wsp-filter-bg, #E5FB8B);
  color: var(--wsp-filter-text, #676767);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.wsp-program-single__chip--category,
.wsp-event-single__chip--category {
  background: var(--wsp-prog-cta-bg, #14bcbc);
  color: var(--wsp-prog-cta-text, #fff);
  text-shadow: var(--wsp-prog-cta-shadow, 0 0 10px rgba(0, 0, 0, 0.3));
}
.wsp-program-single__chip--status,
.wsp-event-single__chip--status {
  background: #ececec;
  color: #1a1a1a;
}
.wsp-program-single__chip--enrolling,
.wsp-event-single__chip--enrolling {
  background: var(--wsp-filter-bg, #E5FB8B);
  color: #1a1a1a;
}
.wsp-program-single__chip--pre-enrollment,
.wsp-event-single__chip--pre-enrollment {
  background: #fff1c4;
  color: #6f5300;
}
.wsp-program-single__chip--waitlist-only,
.wsp-event-single__chip--waitlist-only {
  background: #ffd5d5;
  color: #8a1f1f;
}
/* Event-only status variants (use the customer's SF picklist values). */
.wsp-event-single__chip--registration-open {
  background: var(--wsp-filter-bg, #E5FB8B);
  color: #1a1a1a;
}
.wsp-event-single__chip--registration-closed {
  background: #ffd5d5;
  color: #8a1f1f;
}

.wsp-program-single__title,
.wsp-event-single__title {
  margin: 0 0 0.75rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-program-single__code {
  margin: 0;
  color: var(--wsp-muted, #5a5a5a);
  font-size: 0.95rem;
}
.wsp-program-single__code code {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  font-size: 0.85rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Facts grid — clean card with rounded corners + bigger spacing. */
.wsp-program-single__facts,
.wsp-event-single__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  padding: 2rem;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: 24px;
}
@media (min-width: 640px) {
  .wsp-program-single__facts,
  .wsp-event-single__facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2.5rem;
  }
}
@media (min-width: 980px) {
  .wsp-program-single__facts,
  .wsp-event-single__facts {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wsp-program-single__fact dt,
.wsp-event-single__fact dt {
  margin: 0 0 0.3rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wsp-muted, #5a5a5a);
}
.wsp-program-single__fact dd,
.wsp-event-single__fact dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wsp-text, #1a1a1a);
  line-height: 1.4;
}
.wsp-program-single__enrolled {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--wsp-muted, #5a5a5a);
}

.wsp-program-single__body,
.wsp-event-single__body {
  margin: 0 0 2.5rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-program-single__body p:first-child,
.wsp-event-single__body p:first-child {
  margin-top: 0;
}
.wsp-program-single__body p:last-child,
.wsp-event-single__body p:last-child {
  margin-bottom: 0;
}
.wsp-program-single__body h2,
.wsp-program-single__body h3,
.wsp-event-single__body h2,
.wsp-event-single__body h3 {
  margin: 1.75rem 0 0.5rem;
  font-weight: 800;
}

.wsp-program-single__apply,
.wsp-event-single__apply {
  margin-top: 2.5rem;
}

/* =================================================================
 * Apply (Phase 8) — iframe wrapper + non-iframe states
 * ================================================================= */

.wsp-apply {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--wsp-card-border);
  border-radius: 8px;
  background: var(--wsp-card-bg);
}
.wsp-apply__heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}
.wsp-apply__msg {
  margin: 0;
  color: var(--wsp-muted);
  font-size: 0.95rem;
}
.wsp-apply__cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  background: var(--wsp-primary);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.wsp-apply__cta:hover {
  background: var(--wsp-primary-hover);
}

/* Non-iframe variants — subtle status coloring */
.wsp-apply--guest {
  background: #f0f6fb;
  border-color: #d6e7f4;
}
.wsp-apply--no-link,
.wsp-apply--missing,
.wsp-apply--closed,
.wsp-apply--config {
  background: #fcfaf2;
  border-color: #efe7c8;
}
.wsp-apply--pre-enrollment {
  background: var(--wsp-status-warn-bg);
  border-color: #f3dfb8;
}

/* Iframe wrapper — give the form room and a clean border */
.wsp-apply--form {
  padding: 1rem;
}
.wsp-apply__frame-wrap {
  position: relative;
  width: 100%;
  min-height: 800px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--wsp-bg-subtle);
}
.wsp-apply__iframe {
  width: 100%;
  height: 1200px;
  border: 0;
  display: block;
}

.wsp-apply__newtab {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: var(--wsp-muted);
  text-align: right;
}
.wsp-apply__newtab a {
  color: var(--wsp-primary);
  text-decoration: none;
}
.wsp-apply__newtab a:hover {
  text-decoration: underline;
}

.wsp-apply--newtab {
  background: var(--wsp-card-bg);
  border-color: #c3c4c7;
  text-align: center;
}
.wsp-apply--newtab .wsp-apply__cta {
  margin-top: 1rem;
}

/* =================================================================
 * Generic error panel (Phase 9)
 * Used by templates/error.php — keeps SF-down / contact-missing /
 * link-missing failure modes visually consistent.
 * ================================================================= */

.wsp-error {
  max-width: 640px;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  background: #fcfaf2;
  border: 1px solid #efe7c8;
  border-left-width: 4px;
  border-radius: 4px;
  color: var(--wsp-muted);
}
.wsp-error__msg {
  margin: 0;
  font-size: 0.95rem;
}

/* ─── [wsp_events_by_category] — event-category cards ──────────────────
   Distinct design from program-category cards: white card with subtle
   border, green "FREE" badge top-left, bold black title, gray copy,
   orange Learn More CTA. Cards stack on mobile, 3 cols on desktop. */
:root {
  --wsp-event-card-bg: #ffffff;
  --wsp-event-card-border: #ebebeb;
  --wsp-event-card-radius: 24px;
  --wsp-event-img-radius: 18px;
  --wsp-event-badge-bg: #ffffff;
  --wsp-event-badge-text: #14a85a; /* green "FREE" text */
  --wsp-event-cta-bg: var(--wsp-cta-bg, #FA8804);
  --wsp-event-cta-bg-hover: var(--wsp-cta-bg-hover, #14BCBC);
  --wsp-event-cta-text: #ffffff;
}

.wsp-event-cats {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin: 2rem 0;
}
@media (min-width: 640px) {
  .wsp-event-cats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 980px) {
  .wsp-event-cats {
    gap: 2rem;
  }
  .wsp-event-cats--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .wsp-event-cats--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .wsp-event-cats--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .wsp-event-cats--cols-1 {
    grid-template-columns: 1fr;
  }
}

/* Match the SEM plugin's .sem-event-card shape exactly so our event-
   category cards look like the same component family as the actual
   event cards on /events-page/ — flush-to-edge image, 16:9 ratio,
   18/20/20 body padding, 18px / 700-weight title. */
.wsp-event-cat-card {
  background: var(--wsp-event-card-bg);
  border: 1px solid var(--wsp-event-card-border);
  border-radius: var(--wsp-event-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
}

.wsp-event-cat-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f5f6;
}
.wsp-event-cat-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wsp-event-cat-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
}

/* FREE badge — pill in top-left corner of the image, white background,
   green text, uppercase. Matches the reference screenshot exactly. */
.wsp-event-cat-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 14px;
  background: var(--wsp-event-badge-bg);
  color: var(--wsp-event-badge-text);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  z-index: 2;
}

.wsp-event-cat-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.wsp-event-cat-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-event-cat-card__title a {
  color: inherit;
  text-decoration: none;
}
.wsp-event-cat-card__title a:hover {
  color: var(--wsp-event-cta-bg);
}

/* Date/meta line under the title (only used by individual event cards
   rendered by [wsp_events_for_category]; category cards skip it). */
.wsp-event-cat-card__meta {
  margin: 0;
  color: var(--wsp-event-cta-bg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wsp-event-cat-card__desc {
  margin: 0;
  color: var(--wsp-muted, #4a5568);
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
}
.wsp-event-cat-card__desc p:first-child {
  margin-top: 0;
}
.wsp-event-cat-card__desc p:last-child {
  margin-bottom: 0;
}

/* Orange CTA pill spanning full card width. Padding matches the SEM
   primary button size; margin-top adds a small breathing gap above. */
.wsp-event-cat-card__cta {
  display: block;
  width: 100%;
  margin-top: 6px;
  text-align: center;
  padding: 14px 20px;
  background: var(--wsp-event-cta-bg);
  color: var(--wsp-event-cta-text) !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 0.15s;
}
.wsp-event-cat-card__cta:hover,
.wsp-event-cat-card__cta:focus {
  background: var(--wsp-event-cta-bg-hover);
  color: var(--wsp-event-cta-text);
}

.wsp-event-cats__empty {
  margin: 2rem 0;
  padding: 2rem;
  text-align: center;
  color: var(--wsp-muted, #4a5568);
  background: #fafafa;
  border-radius: var(--wsp-event-card-radius);
  border: 1px solid var(--wsp-event-card-border);
}
.wsp-event-cats__empty-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-event-cats__empty-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

/* ─── [wsp_programs_for_category] — program cards ──────────────────
   Designed to match the customer's "Featured Annual Events" reference:
   light gray rounded card, rounded image at top, bold title, gray
   excerpt, orange Learn More pill. Reuses the orange CTA tokens from
   the category cards above so brand colors stay consistent. */
:root {
  --wsp-prog-card-bg: #f4f4f4; /* light gray card background */
  --wsp-prog-card-radius: 24px;
  --wsp-prog-card-img-radius: 18px;
}

.wsp-prog-cards-wrap {
  margin: 0 0 2rem;
}

.wsp-prog-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .wsp-prog-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 980px) {
  .wsp-prog-cards {
    gap: 2rem;
  }
  .wsp-prog-cards--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .wsp-prog-cards--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .wsp-prog-cards--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .wsp-prog-cards--cols-1 {
    grid-template-columns: 1fr;
  }
}

.wsp-prog-card {
  background: var(--wsp-prog-card-bg);
  border-radius: var(--wsp-prog-card-radius);
  display: flex;
  flex-direction: column;
}

.wsp-prog-card__media {
  position: relative;
  display: block;
  border-radius: 24px 24px 0px 0px;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-bottom: 1.5rem;
  background: #f4f5f6;
}
.wsp-prog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder — applied to .wsp-prog-card__media when no featured image
   is set. A soft brand-tinted gradient with a centered photo icon, so
   the card keeps the same 4:3 visual rhythm as cards that have images.

   Customer can override:
     --wsp-prog-placeholder-bg     → swap to a solid color or different gradient
     --wsp-prog-placeholder-icon   → swap to a brand glyph SVG data URL
     --wsp-prog-placeholder-image  → set to url(...) to use a real fallback image
                                     (overrides both bg + icon when set) */
:root {
  --wsp-prog-placeholder-bg: linear-gradient(
    135deg,
    #e6e6e6 0%,
    #f0f0f0 60%,
    #f7f7f7 100%
  );
  --wsp-prog-placeholder-image: none;
  --wsp-prog-placeholder-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>");
}
.wsp-prog-card__media--placeholder {
  background:
    var(--wsp-prog-placeholder-image) center/cover no-repeat,
    var(--wsp-prog-placeholder-bg);
}
.wsp-prog-card__media--placeholder::after {
  /* The icon only renders when no custom placeholder IMAGE is set
       (the cover-sized image would visually overpower the icon anyway). */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wsp-prog-placeholder-icon) center/64px 64px no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
/* If admin has set a real image via the variable, hide the icon. */
.wsp-prog-card__media--placeholder[style*='--wsp-prog-placeholder-image']::after {
  display: none;
}

/* Optional status pill overlay on the image (top-right corner). */
.wsp-prog-card__pill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.85rem;
  background: var(--wsp-cta-bg, #FA8804);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.wsp-prog-card__body {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
  flex: 1;
}

/* Age-range chip above the title. Container ALWAYS rendered (with
   min-height) so cards without a chip reserve the same vertical space
   and the Learn More button stays at a consistent height across the row. */
.wsp-prog-card__chips {
  margin-bottom: 0.6rem;
  min-height: 1.6rem; /* matches the chip's outer height */
  line-height: 1;
}
.wsp-prog-card__chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--wsp-filter-bg, #E5FB8B);
  color: var(--wsp-filter-text, #676767);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.wsp-prog-card__title {
  margin: 0 0 0.75rem;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-prog-card__title a {
  color: inherit;
  text-decoration: none;
}
.wsp-prog-card__title a:hover {
  color: var(--wsp-cta-bg, #FA8804);
}

.wsp-prog-card__excerpt {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wsp-muted, #5a5a5a);
  flex: 1;
}

/* CTA pill — matches the customer's site-wide button style:
   teal background (#14BCBC), white text, subtle drop shadow,
   60px fully-rounded corners. Reuses the same shape as Elementor
   buttons elsewhere on the page so the design is consistent. */
:root {
  --wsp-prog-cta-bg: #14bcbc;
  --wsp-prog-cta-bg-hover: #0fa3a3; /* ~10% darker on hover */
  --wsp-prog-cta-text: #ffffff;
  --wsp-prog-cta-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* matches Elementor text-shadow */
  --wsp-prog-cta-radius: 60px;
}
.wsp-prog-card__cta {
  align-self: stretch;
  text-align: center;
  padding: 14px 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: #FA8804;
  color: var(--wsp-prog-cta-text) !important  ; 
  border-radius: var(--wsp-prog-cta-radius);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 0.15s;
}
.wsp-prog-card__cta:hover,
.wsp-prog-card__cta:focus {
  background-color: var(--wsp-prog-cta-bg-hover);
  color: var(--wsp-prog-cta-text);
}

/* "Coming Soon" empty state for [wsp_programs_for_category].
   A friendly, visually rich card with a centered icon, bold title,
   and subtitle copy. Uses the brand lime + teal palette so it feels
   like part of the system rather than a fallback.
   Override per customer via the shortcode attributes
       [wsp_programs_for_category ... empty_message="Stay tuned!"
        empty_subtitle="We'll publish this season's lineup in August."] */
.wsp-prog-cards__empty {
  margin: 2rem 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--wsp-prog-card-bg);
  border-radius: var(--wsp-prog-card-radius);
  color: var(--wsp-text);
  overflow: hidden;
  position: relative;
}
.wsp-prog-cards__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  background: var(--wsp-prog-cta-bg);
  color: var(--wsp-prog-cta-text);
  border-radius: 999px;
}
.wsp-prog-cards__empty-icon svg {
  width: 22px;
  height: 22px;
}
.wsp-prog-cards__empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--wsp-text);
}
.wsp-prog-cards__empty-subtitle {
  margin: 0 auto;
  max-width: 440px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wsp-muted);
}

/* =================================================================
 * Auth — register + login forms, two-option gate panel
 * =================================================================
 * Visual language mirrors `.wsp-program-single`: light-gray rounded
 * "facts card" wrapping the form, bold black headings at the same
 * scale, teal pill CTA matching `.wsp-prog-card__cta` exactly
 * (uses the canonical --wsp-prog-cta-* tokens), 24px card radius.
 *
 * On /register/ + /login/ the plugin adds a `wsp-auth-page` body
 * class so we can demote the theme's `.entry-title` H1 from a
 * "competing" heading into a centered eyebrow label — the H2
 * inside the shortcode is the dominant heading. */

/* Demote the theme's page H1 on auth pages — centered, smaller,
   muted, with a hairline divider so it reads as a section label
   above the shortcode card rather than the page's main title. */
body.wsp-auth-page .entry-title,
body.wsp-auth-page .wp-block-post-title {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wsp-muted, #5a5a5a);
  border-bottom: 1px solid #e0e0e0;
}
body.wsp-auth-page .wsp-auth {
  margin-top: 2rem;
}
/*
 * Used by:
 *   - AuthGate     → `.wsp-apply--gate` on Apply shortcodes
 *   - RegisterShortcode + LoginShortcode → `.wsp-auth` page wrappers
 *
 * Override any token from a theme; the design tokens live with the
 * program card definitions so all three surfaces (cards, single
 * pages, auth) re-skin together.
 */

/* ---- Two-option gate panel (replaces the single "Log in" card) ----
   Two side-by-side cards that match the program-card aesthetic:
   same `--wsp-prog-card-bg` surface, 24px radius, bold title, gray
   copy, teal pill CTA at the bottom. The "Log in" card uses an
   outline variant so the two CTAs have visual hierarchy without
   competing for attention. */
.wsp-apply--gate {
  max-width: 880px;
  margin: 2rem auto 0;
}
.wsp-apply--gate .wsp-apply__heading {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-auth-gate__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
@media (min-width: 760px) {
  .wsp-auth-gate__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.wsp-auth-gate__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: var(--wsp-prog-card-radius, 24px);
}
.wsp-auth-gate__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-auth-gate__copy {
  margin: 0;
  flex: 1;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wsp-muted, #5a5a5a);
}
/* Gate buttons — clone of `.wsp-prog-card__cta` so they read as the
   same component visitors see on the program/event listing cards.
   Both variants share identical padding, radius, font, transition;
   only colors differ.

   --primary: solid teal pill identical to every other portal CTA.
   --secondary: outlined sibling (same dimensions thanks to a
   transparent border on --primary so the two cards align perfectly
   in the grid). Hover swaps --secondary to the filled state. */
.wsp-auth-gate__cta {
  display: block;
  align-self: stretch;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid #FA8804 !important;
  border-radius: 24px !important;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.wsp-auth-gate__cta--primary {
  background-color: #FA8804 !important;
  border: 1px solid #FA8804 !important;
  border-radius: 24px !important;
  color: #fff !important;
}
.wsp-auth-gate__cta--primary:hover,
.wsp-auth-gate__cta--primary:focus {
  background-color: #14BCBC !important;
  color: #fff !important;
  border: 1px solid #14BCBC !important;
  border-radius: 24px !important;
}
.wsp-auth-gate__cta--secondary {
  background-color: #FA8804 !important;
  color: #fff !important;
  border: 1px solid #FA8804 !important;
  border-radius: 24px !important;
}
.wsp-auth-gate__cta--secondary:hover,
.wsp-auth-gate__cta--secondary:focus {
  background-color: #14BCBC !important;
  color: #fff !important;
  border: 1px solid #14BCBC !important;
  border-radius: 24px !important;
}
.wsp-apply__lede {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--wsp-muted, #5a5a5a);
}

/* ---- Standalone /register/ and /login/ pages ----
   Page width + spacing matches `.wsp-program-single` so the auth
   pages feel like sibling templates rather than orphan forms. */
.wsp-auth {
  max-width: 720px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-auth__heading {
  margin: 0 0 0.6rem;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-auth__lede {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--wsp-muted, #5a5a5a);
}
.wsp-auth__alt {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  text-align: center;
  color: var(--wsp-muted, #5a5a5a);
}
.wsp-auth__alt a {
  color: var(--wsp-prog-cta-bg, #14bcbc);
  font-weight: 700;
  text-decoration: none;
}
.wsp-auth__alt a:hover { text-decoration: underline; }
.wsp-auth__note {
  margin: 1.25rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: var(--wsp-prog-card-radius, 24px);
  font-size: 1rem;
  color: var(--wsp-muted, #5a5a5a);
  line-height: 1.55;
}

/* ---- Form: wraps in a `--wsp-prog-card-bg` rounded card so it
   visually mirrors `.wsp-program-single__facts`. ---- */
.wsp-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem;
  background: var(--wsp-prog-card-bg, #f4f4f4);
  border-radius: var(--wsp-prog-card-radius, 24px);
}
@media (min-width: 640px) {
  .wsp-auth-form { padding: 2.5rem; gap: 1.25rem; }
}
.wsp-auth-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 560px) {
  .wsp-auth-form__row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.wsp-auth-form__label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.wsp-auth-form__label > span {
  /* Eyebrow label — same scale + uppercase as
     `.wsp-program-single__fact dt` so the form fields read like
     the program facts list. */
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wsp-muted, #5a5a5a);
}
.wsp-auth-form input[type="text"],
.wsp-auth-form input[type="email"],
.wsp-auth-form input[type="password"] {
  padding: 0.85rem 1rem;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 500;
  background: #fff;
  color: var(--wsp-text, #1a1a1a);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wsp-auth-form input::placeholder { color: #a0a0a0; }
.wsp-auth-form input:focus {
  outline: none;
  border-color: var(--wsp-prog-cta-bg, #14bcbc);
  box-shadow: 0 0 0 3px rgba(20, 188, 188, 0.18);
}
/* Login / Register submit — unified with the orange CTA used by the
   Programs Learn More, Event card CTA, and Profile Save button.
   Anyone hitting Login → Register → Profile sees the same button. */
.wsp-auth-form__submit {
  appearance: none;
  align-self: stretch;
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid #FA8804 !important;
  border-radius: 24px !important;
  background: var(--wsp-cta-bg, #FA8804) !important;
  color:      var(--wsp-cta-text, #fff) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
}
.wsp-auth-form__submit:hover,
.wsp-auth-form__submit:focus {
  background: var(--wsp-cta-bg-hover, #14BCBC) !important;
  border: 1px solid #14BCBC !important;
  color: var(--wsp-cta-text, #fff);
}
.wsp-auth-form__submit:active { transform: translateY(1px); }
.wsp-auth-form__notice {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
.wsp-auth-form__notice--error {
  background: #fde6e6;
  color: #8a1f1f;
  border: 1px solid #f5c2c2;
}
.wsp-auth-form__error {
  margin: -0.5rem 0 0;
  font-size: 0.9rem;
  color: #8a1f1f;
  font-weight: 700;
}

/* Success card — same surface treatment as the form card so the
   transition from form → success feels seamless. */
.wsp-auth--register-success .wsp-auth__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.wsp-auth--register-success .wsp-auth__heading::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--wsp-prog-cta-bg, #14bcbc)
              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
              center / 60% 60% no-repeat;
  flex-shrink: 0;
}

/* =====================================================================
   [wsp_events] — List / Calendar view container
   ===================================================================== */

.wsp-events {
  --wsp-cal-cell-min:   88px;
  --wsp-cal-border:     #e5e7eb;
  --wsp-cal-text:       var(--wsp-text, #1d2327);
  --wsp-cal-muted:      var(--wsp-faint, #6c7781);
  --wsp-cal-today-bg:   var(--wsp-filter-bg, #E5FB8B);
  --wsp-cal-hover-bg:   #f3f4f6;
  --wsp-cal-event-bg:   #111;
  --wsp-cal-event-fg:   #fff;
  display: block;
  margin: var(--wsp-gap-lg, 1.5rem) 0;
}

/* Default-view modifier hides the opposite view. JS swaps this class. */
.wsp-events--default-list     .wsp-events__view--calendar { display: none; }
.wsp-events--default-calendar .wsp-events__view--list     { display: none; }

/* --- View toggle (Calendar | List) — right-aligned, design-system pills
       matching .wsp-programs__filter-item (Inter, 60px radius, 12/24
       padding, lime-green inactive, black active). */
.wsp-events__toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .85rem;
  margin: 0 0 1.25rem;
}
.wsp-events__toggle-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3em;
  padding: 12px 24px;
  border-radius: 60px;
  background: var(--wsp-filter-bg, #E5FB8B);
  color:      var(--wsp-filter-text, #676767);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.wsp-events__toggle-btn:hover,
.wsp-events__toggle-btn:focus {
  background: var(--wsp-filter-bg-hover, #000);
  color: #fff;
}
.wsp-events__toggle-btn:active { transform: translateY(1px); }
.wsp-events__toggle-btn--active,
.wsp-events__toggle-btn--active:hover,
.wsp-events__toggle-btn--active:focus {
  background: var(--wsp-filter-active-bg, #000);
  color:      var(--wsp-filter-active-text, #fff);
  cursor: default;
}

/* --- Calendar shell --- */
.wsp-cal {
  background: var(--wsp-card-bg, #fff);
  border: 1px solid var(--wsp-cal-border);
  border-radius: var(--wsp-card-radius, 8px);
  overflow: hidden;
}

.wsp-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--wsp-cal-border);
}

.wsp-cal__title {
  margin: 0;
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
}
.wsp-cal__title-month { color: #F9D448; }
.wsp-cal__title-year  { color: #14BCBC; }
@media (max-width: 600px) {
  .wsp-cal__title { font-size: 22px; }
}

.wsp-cal__nav-btn {
  appearance: none;
  border: 1px solid var(--wsp-cal-border);
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 60px;
  font-family: 'Inter', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--wsp-text, #1d2327);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wsp-cal__nav-btn:hover,
.wsp-cal__nav-btn:focus {
  background: var(--wsp-filter-active-bg, #000);
  color: var(--wsp-filter-active-text, #fff);
  border-color: var(--wsp-filter-active-bg, #000);
}

/* --- Day-of-week header --- */
.wsp-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafafa;
  border-bottom: 1px solid var(--wsp-cal-border);
}
.wsp-cal__dow-cell {
  padding: .625rem .5rem;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wsp-muted, #50575e);
  text-align: center;
}

/* --- Month grid --- */
.wsp-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.wsp-cal__cell {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--wsp-cal-border);
  border-bottom: 1px solid var(--wsp-cal-border);
  background: #fff;
  min-height: var(--wsp-cal-cell-min);
  padding: .375rem;
  text-align: left;
  font: inherit;
  color: var(--wsp-cal-text);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: background-color .12s ease;
}
.wsp-cal__cell:nth-child(7n) { border-right: 0; }

.wsp-cal__cell--blank {
  background: #fafafa;
  cursor: default;
}

.wsp-cal__cell--has-events { cursor: pointer; }
.wsp-cal__cell--has-events:hover,
.wsp-cal__cell--has-events:focus { background: var(--wsp-cal-hover-bg); }
.wsp-cal__cell--has-events:focus-visible { outline: 2px solid var(--wsp-primary, #2271b1); outline-offset: -2px; }

.wsp-cal__cell--today .wsp-cal__cell-date {
  background: var(--wsp-cal-today-bg);
  color: #000;
}

.wsp-cal__cell-date {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 60px;
  align-self: flex-start;
  line-height: 1.2;
}

/* Calendar day-cell event chip — matches the .wsp-category__cta pill
   pattern: Inter / 60px pill / brand orange. Smaller padding because
   the chip lives inside a tiny day cell; the visual identity (color,
   font, radius, weight) carries the design language. */
.wsp-cal__cell-event {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3em;
  padding: 4px 10px;
  border-radius: 60px;
  background: var(--wsp-cta-bg, #FA8804);
  color:      var(--wsp-cta-text, #fff);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
  transition: background-color 0.15s, transform 0.05s;
}
.wsp-cal__cell-event:hover {
  background: var(--wsp-cta-bg-hover, #14BCBC);
}

.wsp-cal__cell-more {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--wsp-muted, #50575e);
  padding: 0 8px;
}

/* --- Side panel for selected-day events --- */
.wsp-cal__panel {
  border-top: 1px solid var(--wsp-cal-border);
  background: #fafafa;
  padding: 1rem 1.25rem;
}
.wsp-cal__panel[hidden] { display: none !important; }

.wsp-cal__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--wsp-text, #1d2327);
}

.wsp-cal__panel-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--wsp-muted, #50575e);
  cursor: pointer;
  padding: 0 .5rem;
}
.wsp-cal__panel-close:hover { color: var(--wsp-text, #1d2327); }

.wsp-cal__panel-body { display: flex; flex-direction: column; gap: .75rem; }

.wsp-cal__panel-event {
  display: flex;
  gap: .875rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--wsp-cal-border);
  border-radius: var(--wsp-card-radius, 8px);
  padding: .875rem;
}

.wsp-cal__panel-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
}
.wsp-cal__panel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wsp-cal__panel-event-body { flex: 1; min-width: 0; }

.wsp-cal__panel-title {
  display: block;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wsp-text, #1d2327);
  text-decoration: none;
  margin-bottom: .25rem;
}
.wsp-cal__panel-title:hover {
  color: var(--wsp-event-cta-bg, var(--wsp-primary, #2271b1));
}

.wsp-cal__panel-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  color: var(--wsp-muted, #50575e);
}
.wsp-cal__panel-time {
  font-weight: 600;
  color: var(--wsp-text, #1d2327);
}
.wsp-cal__panel-status {
  background: var(--wsp-status-ok-bg, #e6f4ea);
  color: var(--wsp-status-ok-fg, #1e7e34);
  padding: 3px 10px;
  border-radius: 60px;
  font-weight: 600;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .wsp-events { --wsp-cal-cell-min: 64px; }
  .wsp-cal__cell-event { font-size: 10px; padding: 2px 8px; }
  .wsp-cal__dow-cell { font-size: .65rem; padding: .375rem .25rem; }
  .wsp-cal__panel-thumb { flex-basis: 48px; width: 48px; height: 48px; }
}

/* =====================================================================
   [wsp_events] — List view (true tabular, not cards)
   ===================================================================== */

/* Polished list container — mirrors the event-card surface:
   24px radius, hairline border, soft white card. */
.wsp-events-list {
  background: var(--wsp-event-card-bg, #fff);
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: var(--wsp-event-card-radius, 24px);
  overflow: hidden;
}

.wsp-events-list__table {
  width: 100%;
  border-collapse: collapse;
  font: inherit;
}

/* Header — no fill; thin hairline divider underneath. Quiet labels
   so the eye lands on the title row, not the header chrome. */
.wsp-events-list__th {
  text-align: left;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wsp-faint, #6c7781);
  background: transparent;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--wsp-event-card-border, #ebebeb);
  white-space: nowrap;
}
.wsp-events-list__th--cta { text-align: right; }

/* Rows — softer divider, hover nudges toward warm brand tint. */
.wsp-events-list__row {
  position: relative;
  transition: background-color .15s ease;
}
.wsp-events-list__row:hover { background: #fcfaf6; }
.wsp-events-list__row + .wsp-events-list__row .wsp-events-list__cell {
  border-top: 1px solid #f3f1ed;
}

.wsp-events-list__cell {
  padding: 22px 24px;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wsp-text, #1d2327);
  vertical-align: middle;
}

/* Date carries weight (Poppins/600) — visually anchors the row.
   Time stays neutral so it reads as a secondary detail. */
.wsp-events-list__cell--date,
.wsp-events-list__cell--time {
  white-space: nowrap;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
}
.wsp-events-list__cell--date { color: var(--wsp-text, #1a1a1a); }
.wsp-events-list__cell--time { color: var(--wsp-muted, #50575e); }

.wsp-events-list__cell--cta { text-align: right; white-space: nowrap; }

/* Title — matches event-card title scale + family. */
.wsp-events-list__title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wsp-text, #1a1a1a);
  text-decoration: none;
  transition: color .15s ease;
}
.wsp-events-list__title:hover {
  color: var(--wsp-event-cta-bg, #FA8804);
}

.wsp-events-list__empty,
.wsp-events-list__status-empty { color: #c1c7cd; }

/* Status pill — small color dot + uppercase label. Matches the
   visual rhythm of the FREE badge on cards (soft bg, vivid fg). */
.wsp-events-list__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 60px;
  background: var(--wsp-status-ok-bg, #e6f4ea);
  color:      var(--wsp-status-ok-fg, #1e7e34);
}
.wsp-events-list__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex-shrink: 0;
}
.wsp-events-list__status--registration-closed,
.wsp-events-list__status--cancelled,
.wsp-events-list__status--closed {
  background: var(--wsp-status-danger-bg, #fdecea);
  color:      var(--wsp-status-danger-fg, #b32d2e);
}
.wsp-events-list__status--registration-waitlist,
.wsp-events-list__status--waitlist,
.wsp-events-list__status--pending,
.wsp-events-list__status--planned {
  background: var(--wsp-status-warn-bg, #fff4e5);
  color:      var(--wsp-status-warn-fg, #8a4a00);
}

/* CTA — exact match with the orange event-card Learn More button:
   same tokens, same pill radius, same teal hover. */
.wsp-events-list__cta {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  padding: 12px 26px;
  border-radius: 60px;
  background: var(--wsp-event-cta-bg, #FA8804);
  color:      var(--wsp-event-cta-text, #fff);
  text-decoration: none;
  transition: background-color .15s ease, transform .05s ease;
}
.wsp-events-list__cta:hover,
.wsp-events-list__cta:focus {
  background: var(--wsp-event-cta-bg-hover, #14BCBC);
  color:      var(--wsp-event-cta-text, #fff);
}
.wsp-events-list__cta:active { transform: translateY(1px); }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* --- Responsive: stacked rows under 720px. Each row reads top-down
       like a small card — title, then key/value pairs, then CTA. --- */
@media (max-width: 720px) {
  .wsp-events-list__table thead { display: none; }
  .wsp-events-list__table,
  .wsp-events-list__table tbody,
  .wsp-events-list__row,
  .wsp-events-list__cell { display: block; width: 100%; }
  .wsp-events-list__row {
    padding: 20px 22px;
    border-bottom: 1px solid var(--wsp-event-card-border, #ebebeb);
  }
  .wsp-events-list__row:last-child { border-bottom: 0; }
  .wsp-events-list__row + .wsp-events-list__row .wsp-events-list__cell {
    border-top: 0;
  }
  .wsp-events-list__cell {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    font-size: 13px;
  }
  .wsp-events-list__cell::before {
    content: attr(data-label);
    font-family: 'Inter', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wsp-faint, #6c7781);
  }
  .wsp-events-list__cell--name { padding: 0 0 10px; }
  .wsp-events-list__cell--name::before { display: none; }
  .wsp-events-list__cell--cta {
    padding: 14px 0 0;
    justify-content: flex-start;
  }
  .wsp-events-list__cell--cta::before { display: none; }
  .wsp-events-list__cta { width: 100%; text-align: center; }
}

/* =====================================================================
   [wsp_events] List view — progressive disclosure (Load More)
   ===================================================================== */

.wsp-events-list__row--hidden { display: none !important; }

.wsp-events-list__more-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 24px;
  border-top: 1px solid var(--wsp-event-card-border, #ebebeb);
  background: var(--wsp-event-card-bg, #fff);
}
.wsp-events-list__more-wrap[hidden] { display: none !important; }

.wsp-events-list__more {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3em;
  padding: 12px 28px;
  border-radius: 60px;
  background: var(--wsp-filter-bg, #E5FB8B);
  color:      var(--wsp-filter-text, #676767);
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.wsp-events-list__more:hover,
.wsp-events-list__more:focus {
  background: var(--wsp-filter-active-bg, #000);
  color:      var(--wsp-filter-active-text, #fff);
}
.wsp-events-list__more:active { transform: translateY(1px); }

.wsp-events-list__more-count {
  font-weight: 500;
  color: var(--wsp-faint, #6c7781);
  margin-left: .25rem;
}
.wsp-events-list__more:hover .wsp-events-list__more-count,
.wsp-events-list__more:focus .wsp-events-list__more-count { color: rgba(255,255,255,.75); }

/* =====================================================================
   Role-gated panel — shown on single program/event pages when the
   visitor is logged in but doesn't have the SF Contact link required
   to apply. Modern design-system surface: white card, 24px radius,
   centered icon + title + body + orange CTA. Tone is friendly, not
   alarming — same palette as the event cards.
   ===================================================================== */

.wsp-apply.wsp-apply--gated {
  background: var(--wsp-event-card-bg, #fff);
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: var(--wsp-event-card-radius, 24px);
  padding: 48px 32px;
  margin: 2rem auto;
  max-width: 560px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wsp-apply.wsp-apply--gated .wsp-apply__body { margin-bottom: 0; }

/* Icon — soft warm-tinted circle, brand orange stroke. Communicates
   "access gated" without the loud red of an error state. */
.wsp-apply.wsp-apply--gated .wsp-apply__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  background: #fdf4e8;          /* warm tint of the brand orange */
  color: var(--wsp-cta-bg, #FA8804);
  border-radius: 50%;
}
.wsp-apply.wsp-apply--gated .wsp-apply__icon svg {
  width: 38px;
  height: 38px;
  display: block;
}

.wsp-apply.wsp-apply--gated .wsp-apply__title {
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wsp-text, #1a1a1a);
}

.wsp-apply.wsp-apply--gated .wsp-apply__body {
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--wsp-muted, #50575e);
  max-width: 420px;
  margin-inline: auto;
}

/* CTA — exact match with the event-card Learn More button: same
   orange token, same teal hover, same 60px pill. */
.wsp-apply.wsp-apply--gated .wsp-apply__cta-button {
  display: inline-block;
  margin-top: 28px;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  padding: 12px 28px;
  border-radius: 60px;
  background: var(--wsp-event-cta-bg, var(--wsp-cta-bg, #FA8804));
  color:      var(--wsp-event-cta-text, #fff);
  text-decoration: none;
  transition: background-color .15s ease, transform .05s ease;
}
.wsp-apply.wsp-apply--gated .wsp-apply__cta-button:hover,
.wsp-apply.wsp-apply--gated .wsp-apply__cta-button:focus {
  background: var(--wsp-event-cta-bg-hover, var(--wsp-cta-bg-hover, #14BCBC));
  color:      var(--wsp-event-cta-text, #fff);
}
.wsp-apply.wsp-apply--gated .wsp-apply__cta-button:active {
  transform: translateY(1px);
}

/* Mobile: tighter padding, smaller icon circle. */
@media (max-width: 600px) {
  .wsp-apply.wsp-apply--gated {
    padding: 36px 22px 32px;
    margin: 1.5rem 1rem;
  }
  .wsp-apply.wsp-apply--gated .wsp-apply__icon {
    width: 68px; height: 68px; margin-bottom: 18px;
  }
  .wsp-apply.wsp-apply--gated .wsp-apply__icon svg { width: 32px; height: 32px; }
  .wsp-apply.wsp-apply--gated .wsp-apply__title { font-size: 19px; }
  .wsp-apply.wsp-apply--gated .wsp-apply__body  { font-size: 14px; }
}

/* =====================================================================
   [wsp_profile] /account/ — tabs + editable form + registered lists
   ===================================================================== */

.wsp-profile {
  max-width: 880px;
  margin: 2rem auto;
}

.wsp-profile__heading {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.5rem;
  color: var(--wsp-text, #1a1a1a);
  letter-spacing: -0.01em;
}

/* --- Tabs --- */
/* Profile tabs — same pill language as the Programs filter chips
   (.wsp-programs__filter-item a). Lime inactive → black active,
   60px radius, Inter 13/600, 12/24 padding. */
.wsp-profile__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin: 0 0 1.75rem;
}
.wsp-profile__tab {
  appearance: none;
   border: 1px solid #FA8804 !important;
  border-radius: 24px !important;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3em;
  padding: 12px 24px;
  background: #FA8804 !important;
  color:      #fff !important;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.wsp-profile__tab:hover,
.wsp-profile__tab:focus {
  background-color: #14BCBC !important;
  color: #fff;
  border: 1px solid #14BCBC !important;
  border-radius: 24px !important;
}
.wsp-profile__tab:active { transform: translateY(1px); }
.wsp-profile__tab--active,
.wsp-profile__tab--active:hover,
.wsp-profile__tab--active:focus {
  background-color: #14BCBC !important;
  color: #fff;
  border: 1px solid #14BCBC !important;
  border-radius: 24px !important;
  cursor: default;
}

/* --- Panels --- */
.wsp-profile__panel { display: none; }
.wsp-profile__panel--active { display: block; }

/* --- Notices --- */
.wsp-profile__notice {
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
}
.wsp-profile__notice--success {
  background: var(--wsp-status-ok-bg, #e6f4ea);
  color:      var(--wsp-status-ok-fg, #1e7e34);
}
.wsp-profile__notice--error {
  background: var(--wsp-status-danger-bg, #fdecea);
  color:      var(--wsp-status-danger-fg, #b32d2e);
}

/* --- Editable form --- */
.wsp-profile__form {
  background: var(--wsp-event-card-bg, #fff);
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: var(--wsp-event-card-radius, 24px);
  padding: 36px 40px 32px;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wsp-profile__form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
}

/* Section subheadings span the full grid width and visually break
   the form into Identity / Contact / Address groups. */
.wsp-profile__form-section {
  grid-column: 1 / -1;
  margin: 14px 0 -4px;
  padding-top: 18px;
  border-top: 1px solid #f3f1ed;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--wsp-text, #1a1a1a);
}
/* No leading rule on the form's first section. */
.wsp-profile__form-grid > .wsp-profile__form-section:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
@media (max-width: 600px) {
  .wsp-profile__form { padding: 22px 20px; }
  .wsp-profile__form-grid { grid-template-columns: 1fr; }
}

.wsp-profile__form-field { display: flex; flex-direction: column; gap: 8px; }
.wsp-profile__form-field label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-profile__form-field input {
  appearance: none;
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: 12px;            /* softer than 60px for typeable fields — easier to read */
  background: #fafafa;            /* subtle off-white surface, makes inputs feel like a "well" */
  padding: 14px 18px;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wsp-text, #1a1a1a);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wsp-profile__form-field input::placeholder { color: #b5b8bb; }
.wsp-profile__form-field input:hover { border-color: #d6d6d6; }
.wsp-profile__form-field input:focus {
  outline: 0;
  background: #fff;
  border-color: var(--wsp-cta-bg, #FA8804);
  box-shadow: 0 0 0 4px rgba(250, 136, 4, .12);
}
.wsp-profile__form-field--error input { border-color: var(--wsp-status-danger-fg, #b32d2e); }
.wsp-profile__form-error {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--wsp-status-danger-fg, #b32d2e);
}
.wsp-profile__required {
  color: var(--wsp-cta-bg, #FA8804);
  margin-left: 2px;
}

.wsp-profile__form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
/* Profile Save — same shape as .wsp-auth-form__submit (the unified
   site CTA). Slightly larger than the inline pill chips so it reads
   as the primary action of the form. */
.wsp-profile__submit {
  appearance: none;
  border: 1px solid #FA8804 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  padding: 14px 32px;
  background-color: #FA8804 !important;
  border-radius: 24px !important;
  color: #fff !important;
  transition: background-color .15s ease, transform .05s ease;
}
.wsp-profile__submit:hover,
.wsp-profile__submit:focus {
  background-color: #14BCBC !important;
  color: #fff;
  border: 1px solid #14BCBC !important;
  border-radius: 24px !important;
}
.wsp-profile__submit:active { transform: translateY(1px); }

.wsp-profile__form-footnote {
  margin: 14px 0 0;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  color: var(--wsp-faint, #6c7781);
  line-height: 1.5;
}

/* --- Locked (disabled) field state ---
   The field is visible so the visitor sees their current value
   alongside the editable ones, but it's clearly de-emphasized. */
/* Locked field: muted surface so it visually recedes from the rest
   of the form — the editable inputs are off-white, these go a shade
   deeper to read as "fixed". */
.wsp-profile__form-field--locked input[disabled] {
  background: #f1f1f2;
  color: var(--wsp-muted, #50575e);
  cursor: not-allowed;
  border-color: #e5e5e5;
}
.wsp-profile__form-field--locked input[disabled]:hover { border-color: #e5e5e5; }
.wsp-profile__form-field--locked input[disabled]:focus {
  background: #f1f1f2;
  border-color: #e5e5e5;
  box-shadow: none;
}
.wsp-profile__form-field--locked label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wsp-profile__lock {
  font-size: 11px;
  line-height: 1;
  filter: grayscale(0.5);
  opacity: .8;
}
.wsp-profile__form-hint {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--wsp-faint, #6c7781);
  font-style: italic;
}

/* --- Subheading + read-only details --- */
.wsp-profile__subheading {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-profile__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  background: var(--wsp-event-card-bg, #fff);
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: var(--wsp-event-card-radius, 24px);
  padding: 24px 28px;
  margin: 0;
}
@media (max-width: 600px) {
  .wsp-profile__fields { grid-template-columns: 1fr; padding: 20px; }
}
.wsp-profile__field { margin: 0; }
.wsp-profile__field dt {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wsp-faint, #6c7781);
  margin: 0 0 4px;
}
.wsp-profile__field dd {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  color: var(--wsp-text, #1a1a1a);
  margin: 0;
  word-break: break-word;
}
.wsp-profile__field--empty dd { color: #c1c7cd; }

/* --- Programs / Events list --- */
.wsp-profile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--wsp-event-card-bg, #fff);
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: var(--wsp-event-card-radius, 24px);
  overflow: hidden;
}
.wsp-profile__list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid #f3f1ed;
}
.wsp-profile__list-item:last-child { border-bottom: 0; }
.wsp-profile__list-main { flex: 1; min-width: 0; }

.wsp-profile__list-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--wsp-text, #1a1a1a);
}
.wsp-profile__list-meta {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  color: var(--wsp-muted, #50575e);
}

/* Secondary detail row for Programs tab — Academic Year, Session,
   Grade, Coach, etc. Each label/value pair sits on one line; the
   row wraps to multiple lines when it can't fit. Small middle-dot
   between pairs courtesy of a generated content separator. */
.wsp-profile__list-details {
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  line-height: 1.5;
}
.wsp-profile__list-detail {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  position: relative;
}
/* Middle-dot separator before every item except the first on each
   wrapped row. Cheap pure-CSS approach — no JS needed. */
.wsp-profile__list-detail + .wsp-profile__list-detail::before {
  content: "·";
  color: var(--wsp-faint, #6c7781);
  margin-right: 8px;
  font-weight: 700;
}
.wsp-profile__list-detail dt {
  margin: 0;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--wsp-faint, #6c7781);
}
.wsp-profile__list-detail dd {
  margin: 0;
  font-weight: 500;
  color: var(--wsp-text, #1a1a1a);
}

.wsp-profile__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 60px;
  background: var(--wsp-status-ok-bg, #e6f4ea);
  color:      var(--wsp-status-ok-fg, #1e7e34);
  white-space: nowrap;
}
.wsp-profile__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.wsp-profile__status--withdrawn,
.wsp-profile__status--declined,
.wsp-profile__status--cancelled,
.wsp-profile__status--rejected {
  background: var(--wsp-status-danger-bg, #fdecea);
  color:      var(--wsp-status-danger-fg, #b32d2e);
}
.wsp-profile__status--waitlist,
.wsp-profile__status--waitlisted,
.wsp-profile__status--pending,
.wsp-profile__status--applied,
.wsp-profile__status--in-progress {
  background: var(--wsp-status-warn-bg, #fff4e5);
  color:      var(--wsp-status-warn-fg, #8a4a00);
}

/* --- Empty state --- */
.wsp-profile__empty-state {
  background: var(--wsp-event-card-bg, #fff);
  border: 1px solid var(--wsp-event-card-border, #ebebeb);
  border-radius: var(--wsp-event-card-radius, 24px);
  padding: 48px 32px;
  text-align: center;
}
.wsp-profile__empty-state p {
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px;
  color: var(--wsp-muted, #50575e);
}

/* =====================================================================
   Register form — password show/hide toggle
   ===================================================================== */

.wsp-auth-form__password-wrap {
  position: relative;
  display: block;
}
.wsp-auth-form__password-wrap input[data-wsp-password] {
  /* Make room for the eye button on the right edge. */
  padding-right: 44px;
}
.wsp-auth-form__password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  appearance: none;
  border: 1px solid var(--wsp-event-card-border, #ebebeb) !important;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: var(--wsp-cta-bg, #FA8804) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color .12s ease, background-color .12s ease;
}
.wsp-auth-form__password-toggle:hover,.wsp-auth-form__password-toggle:focus,
.wsp-auth-form__password-toggle:focus-visible {
  color: var(--wsp-cta-bg, #FA8804);
  background: #14BCBC !important;
  outline: 0;
}
.wsp-auth-form__password-icon { width: 20px; height: 20px; display: block; }
.wsp-auth-form__password-toggle--showing { color: var(--wsp-cta-bg, #FA8804); }
.wsp-auth-form__password-toggle--showing .wsp-auth-form__password-icon {
  /* Subtle line through the eye to suggest "now hiding" — keeps the
     icon simple without a second SVG. */
  position: relative;
}
.wsp-auth-form__password-toggle--showing .wsp-auth-form__password-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%) rotate(-20deg);
}