html,
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at top, rgba(15, 118, 110, 0.1), transparent 34%),
    linear-gradient(
      180deg,
      var(--wf-page-bg) 0%,
      var(--wf-page-bg-secondary) 100%
    );
  color: var(--wf-text, #0a2540);
  min-height: 100%;
}

body {
  margin: 0;
}

a,
.btn-link {
  color: var(--wf-link);
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.72rem 1.2rem;
}

.btn-lg {
  padding: 0.92rem 1.45rem;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--wf-primary),
    var(--wf-primary-strong)
  );
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(13, 110, 253, 0.18);
}

.btn-outline-primary {
  border-color: color-mix(in srgb, var(--wf-primary) 34%, white);
  color: color-mix(in srgb, var(--wf-primary-strong) 88%, black);
  background: rgba(255, 255, 255, 0.9);
}

.btn-outline-secondary {
  border-color: rgba(10, 37, 64, 0.18);
  color: var(--wf-text);
  background: rgba(255, 255, 255, 0.78);
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  transform: translateY(-1px);
}

.btn-primary:hover {
  color: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus-visible {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--wf-primary),
    var(--wf-primary-strong)
  );
  border-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus-visible {
  color: var(--wf-text);
  background: var(--wf-surface-muted);
  border-color: rgba(10, 37, 64, 0.18);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.12rem white,
    0 0 0 0.28rem rgba(37, 140, 251, 0.3);
}

.content {
  padding-top: 1.1rem;
}

.portal-panel,
.metric-card,
.offer-card,
.plan-card,
.register-option-card,
.showcase-card,
.upload-card,
.form-section {
  background: var(--wf-surface-elevated);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 1.4rem;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
}

.hero-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.portal-panel {
  padding: 1.6rem;
}

.portal-panel h2,
.portal-panel h3,
.form-section h2,
.form-section h3 {
  margin-top: 0;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.single-column {
  grid-template-columns: minmax(320px, 640px);
}

.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem;
}

.metric-label,
.section-kicker,
.landing-eyebrow,
.plan-tag {
  color: var(--wf-link);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.summary-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.summary-list div {
  display: grid;
  gap: 0.15rem;
}

.summary-list dt {
  color: var(--wf-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.summary-list dd {
  margin: 0;
}

.action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.role-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.role-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--wf-surface-muted);
  color: var(--wf-link);
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.marketing-hero,
.auth-shell,
.profile-shell {
  position: relative;
}

.marketing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.85fr);
  gap: 1.5rem;
  align-items: stretch;
  margin: 0 auto 2rem;
  padding: 1rem 0 0;
}

.marketing-copy,
.marketing-showcase,
.auth-hero,
.auth-panel,
.profile-shell {
  padding: clamp(1.5rem, 2vw, 2.2rem);
}

.marketing-copy,
.auth-hero,
.profile-shell {
  border-radius: 1.8rem;
  background: var(--wf-surface-hero);
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.08);
}

.marketing-copy h1,
.auth-hero h1,
.profile-shell h1 {
  font-size: clamp(2.2rem, 4vw, 4.25rem);
  line-height: 1.03;
  margin: 0;
  max-width: 14ch;
}

.marketing-copy .lead,
.auth-hero p,
.profile-shell p {
  color: var(--wf-text-muted);
  font-size: 1.02rem;
  max-width: 60ch;
}

.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.hero-proof-row span {
  background: var(--wf-chip-bg);
  border: 1px solid var(--wf-chip-border);
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.marketing-showcase {
  display: grid;
  gap: 1rem;
  border-radius: 1.8rem;
  background: var(--wf-surface-showcase);
  color: #f8fbff;
  box-shadow: 0 28px 70px rgba(8, 15, 29, 0.18);
}

.showcase-card {
  padding: 1.4rem;
  color: inherit;
  background: var(--wf-surface-showcase-card);
  border-color: rgba(255, 255, 255, 0.12);
}

.showcase-card-primary {
  min-height: 180px;
}

.showcase-metrics {
  display: grid;
  gap: 0.9rem;
}

.showcase-metrics .metric-card {
  background: var(--wf-surface-showcase-metric);
  border-color: rgba(255, 255, 255, 0.12);
  color: inherit;
}

.marketing-section {
  margin: 0 auto 2rem;
}

.marketing-section-compact {
  margin-bottom: 1.5rem;
}

.commercial-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.4rem, 2vw, 2rem);
  border-radius: 1.6rem;
  background: linear-gradient(
    135deg,
    rgba(10, 37, 64, 0.98),
    rgba(16, 92, 104, 0.9)
  );
  color: #f8fbff;
  box-shadow: 0 26px 60px rgba(8, 15, 29, 0.16);
}

.commercial-banner h2 {
  margin: 0.35rem 0 0.7rem;
}

.commercial-banner p {
  margin: 0;
  color: rgba(248, 251, 255, 0.82);
  max-width: 60ch;
}

.commercial-banner .section-kicker {
  color: rgba(201, 231, 255, 0.82);
}

.section-heading {
  margin-bottom: 1.2rem;
  max-width: 56rem;
}

.section-heading h2 {
  margin: 0.3rem 0 0.5rem;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
}

.section-heading p {
  color: var(--wf-text-muted);
  margin: 0;
}

.offer-grid,
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.offer-card,
.plan-card,
.register-option-card {
  padding: 1.35rem;
}

.offer-card p,
.register-option-card p,
.plan-card p {
  color: var(--wf-text-muted);
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plan-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--wf-text-muted);
}

.plan-card-featured {
  background:
    linear-gradient(180deg, rgba(13, 110, 253, 0.06), rgba(15, 118, 110, 0.08)),
    rgba(255, 255, 255, 0.9);
  border-color: rgba(13, 110, 253, 0.18);
  transform: translateY(-6px);
}

.plan-price {
  font-size: 2.2rem;
  font-weight: 800;
}

.plan-price span {
  color: var(--wf-text-muted);
  font-size: 1rem;
  font-weight: 500;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  gap: 1.5rem;
  align-items: start;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}

.auth-shell-wide {
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
}

.auth-panel {
  padding: clamp(1.4rem, 2vw, 2rem);
}

.auth-panel-wide {
  min-width: 0;
}

.auth-benefits {
  display: grid;
  gap: 0.85rem;
  padding-left: 1.15rem;
  margin: 1.5rem 0 0;
}

.auth-benefits li {
  color: var(--wf-text-muted);
}

.register-option-list {
  display: grid;
  gap: 1rem;
}

.register-option-list-inline {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.register-option-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.register-option-card:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 110, 253, 0.2);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12);
}

.form-section {
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.form-section-subtle {
  background: color-mix(in srgb, var(--wf-surface) 78%, transparent);
  box-shadow: none;
}

.form-section-spaced {
  margin-top: 1.4rem;
}

.profile-shell {
  margin-bottom: 1.5rem;
}

.profile-shell-copy {
  max-width: 52rem;
}

.profile-grid {
  align-items: start;
}

.profile-card {
  position: sticky;
  top: 1.5rem;
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-avatar-large-shell {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.14),
    rgba(15, 118, 110, 0.2)
  );
}

.profile-avatar-large,
.profile-avatar-large-fallback {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
}

.profile-avatar-large {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

.profile-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.14),
    rgba(15, 118, 110, 0.2)
  );
  color: var(--wf-primary);
  font-weight: 800;
}

.profile-avatar-large-fallback {
  font-size: 1.4rem;
  width: 100%;
  height: 100%;
}

.upload-card {
  padding: 1rem;
}

.form-control,
.form-select {
  min-height: 3rem;
  border-radius: 1rem;
  border-color: rgba(10, 37, 64, 0.14);
  padding: 0.8rem 0.95rem;
  background-color: var(--wf-input-bg);
  color: var(--wf-text);
}

textarea.form-control {
  min-height: 7rem;
}

.form-check-input {
  margin-top: 0.28rem;
}

.list-group {
  border-radius: 1rem;
  overflow: hidden;
}

.list-group-item {
  border-color: rgba(10, 37, 64, 0.08);
}

.status-alert {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
}

.status-alert-compact {
  margin-bottom: 0;
}

.status-alert-copy {
  display: grid;
  gap: 0.35rem;
}

.status-alert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.92rem;
}

.facility-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facility-status-chip-live {
  background: rgba(73, 181, 122, 0.12);
  color: #237a4d;
}

.facility-status-chip-draft {
  background: rgba(10, 37, 64, 0.08);
  color: var(--wf-text-muted);
}

.publish-status-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(10, 37, 64, 0.08);
}

.publish-status-banner-live {
  background: rgba(73, 181, 122, 0.08);
  border-color: rgba(73, 181, 122, 0.18);
}

.publish-status-banner-draft {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.22);
}

.publish-status-label {
  color: var(--wf-link);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.25rem;
}

.empty-state {
  display: grid;
  gap: 0.55rem;
}

.global-error-panel {
  border-color: rgba(220, 53, 69, 0.18);
  background: linear-gradient(
    180deg,
    rgba(220, 53, 69, 0.04),
    rgba(255, 255, 255, 0.94)
  );
}

.global-error-details {
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 1rem;
  background: rgba(10, 37, 64, 0.03);
  overflow: hidden;
}

.global-error-details summary {
  cursor: pointer;
  padding: 0.95rem 1.1rem;
  font-weight: 700;
}

.global-error-details pre {
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--wf-text);
  font-size: 0.92rem;
}

.booking-type-chip,
.booking-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-type-chip {
  background: rgba(13, 110, 253, 0.1);
  color: var(--wf-primary);
}

.booking-status-chip-live {
  background: rgba(73, 181, 122, 0.12);
  color: #237a4d;
}

.booking-status-chip-pending {
  background: rgba(255, 193, 7, 0.14);
  color: #9a6b00;
}

.booking-status-chip-cancelled {
  background: rgba(220, 53, 69, 0.12);
  color: #a52834;
}

.detail-status-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.facility-progress {
  height: 0.9rem;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.08);
  overflow: hidden;
}

.facility-progress .progress-bar {
  background: linear-gradient(
    135deg,
    var(--wf-primary),
    var(--wf-primary-strong)
  );
  border-radius: 999px;
}

.publish-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.publish-checklist-item {
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--wf-surface-elevated) 88%, white);
}

.publish-checklist-item-complete {
  border-color: rgba(73, 181, 122, 0.22);
  background: rgba(73, 181, 122, 0.06);
}

.publish-checklist-item-missing {
  border-color: rgba(220, 53, 69, 0.14);
  background: rgba(255, 248, 248, 0.9);
}

.publish-checklist-points {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.publish-checklist-points li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.92rem;
}

.publish-checklist-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.publish-checklist-point-complete::before {
  background: #237a4d;
}

.publish-checklist-point-missing::before {
  background: #c13a46;
}

.status-alert-dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: currentColor;
  opacity: 0.72;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.75rem;
}

.status-alert-dismiss:hover {
  opacity: 1;
}

.theme-dark .portal-panel,
.theme-dark .metric-card,
.theme-dark .offer-card,
.theme-dark .plan-card,
.theme-dark .register-option-card,
.theme-dark .upload-card,
.theme-dark .form-section,
.theme-dark .showcase-card,
.theme-dark .marketing-copy,
.theme-dark .auth-hero,
.theme-dark .profile-shell {
  border-color: var(--wf-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.theme-dark .plan-card-featured {
  background:
    linear-gradient(180deg, rgba(93, 158, 255, 0.12), rgba(15, 118, 110, 0.14)),
    var(--wf-surface-elevated);
  border-color: rgba(142, 184, 255, 0.22);
}

.theme-dark .btn-outline-primary {
  background: rgba(13, 23, 37, 0.92);
  border-color: rgba(142, 184, 255, 0.32);
  color: #d9e8ff;
}

.theme-dark .btn-outline-secondary {
  background: rgba(13, 23, 37, 0.84);
  color: var(--wf-text);
}

.theme-dark .btn-outline-secondary:hover,
.theme-dark .btn-outline-secondary:active,
.theme-dark .btn-outline-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
}

.theme-dark .form-control::placeholder,
.theme-dark textarea.form-control::placeholder {
  color: color-mix(in srgb, var(--wf-text-muted) 80%, transparent);
}

.theme-dark .list-group-item {
  background: color-mix(in srgb, var(--wf-surface) 92%, transparent);
  color: var(--wf-text);
  border-color: var(--wf-border);
}

.theme-dark .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--wf-text);
  --bs-table-border-color: var(--wf-border);
  --bs-table-striped-color: var(--wf-text);
  --bs-table-hover-color: var(--wf-text);
}

.theme-dark .alert-success {
  background: rgba(73, 181, 122, 0.14);
  border-color: rgba(73, 181, 122, 0.26);
  color: #d6f6e1;
}

.theme-dark .alert-danger {
  background: rgba(255, 107, 122, 0.12);
  border-color: rgba(255, 107, 122, 0.26);
  color: #ffd5db;
}

.theme-dark .facility-status-chip-live {
  background: rgba(73, 181, 122, 0.16);
  color: #b7f1cb;
}

.theme-dark .facility-status-chip-draft {
  background: rgba(255, 255, 255, 0.08);
  color: var(--wf-text-muted);
}

.theme-dark .publish-status-banner-live {
  background: rgba(73, 181, 122, 0.12);
  border-color: rgba(73, 181, 122, 0.24);
}

.theme-dark .publish-status-banner-draft {
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.22);
}

.theme-dark .booking-type-chip {
  background: rgba(93, 158, 255, 0.14);
  color: #b8d6ff;
}

.theme-dark .booking-status-chip-live {
  background: rgba(73, 181, 122, 0.16);
  color: #b7f1cb;
}

.theme-dark .booking-status-chip-pending {
  background: rgba(255, 193, 7, 0.18);
  color: #ffe29b;
}

.theme-dark .booking-status-chip-cancelled {
  background: rgba(255, 107, 122, 0.18);
  color: #ffd5db;
}

.theme-dark .global-error-panel {
  border-color: rgba(255, 107, 122, 0.24);
  background: linear-gradient(
    180deg,
    rgba(255, 107, 122, 0.08),
    var(--wf-surface-elevated)
  );
}

.theme-dark .global-error-details {
  border-color: var(--wf-border);
  background: rgba(255, 255, 255, 0.04);
}

.theme-dark .facility-progress {
  background: rgba(255, 255, 255, 0.08);
}

.theme-dark .publish-checklist-item {
  background: color-mix(in srgb, var(--wf-surface-elevated) 92%, transparent);
  border-color: var(--wf-border);
}

.theme-dark .publish-checklist-item-complete {
  border-color: rgba(73, 181, 122, 0.26);
  background: rgba(73, 181, 122, 0.1);
}

.theme-dark .publish-checklist-item-missing {
  border-color: rgba(255, 107, 122, 0.24);
  background: rgba(255, 107, 122, 0.08);
}

/* ── Messages / Chat ─────────────────────────────── */
.messages-grid {
  grid-template-columns: minmax(220px, 300px) 1fr;
  align-items: start;
}

.messages-sidebar {
  max-height: 80vh;
  overflow-y: auto;
}

.messages-chat {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.messages-list {
  flex: 1;
  overflow-y: auto;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.5rem 0;
}

.message-bubble {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: 0.15rem;
}

.message-bubble-me {
  align-self: flex-end;
  align-items: flex-end;
}

.message-bubble-other {
  align-self: flex-start;
  align-items: flex-start;
}

.message-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wf-text-muted);
  padding: 0 0.6rem;
}

.message-text {
  background: var(--wf-surface-muted);
  border-radius: 1.2rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: break-word;
}

.message-bubble-me .message-text {
  background: linear-gradient(
    135deg,
    var(--wf-primary),
    var(--wf-primary-strong)
  );
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}

.message-bubble-other .message-text {
  border-bottom-left-radius: 0.3rem;
}

.message-time {
  font-size: 0.72rem;
  color: var(--wf-text-muted);
  padding: 0 0.6rem;
}

@media (max-width: 640px) {
  .messages-grid {
    grid-template-columns: 1fr;
  }

  .messages-sidebar {
    max-height: 40vh;
  }
}

/* ── Plan price display ───────────────────────────── */
.plan-price {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.plan-price span {
  color: var(--wf-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid var(--wf-success);
}

.invalid {
  outline: 1px solid var(--wf-danger);
}

.validation-message {
  color: var(--wf-danger);
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

@media (max-width: 1100px) {
  .marketing-hero,
  .auth-shell,
  .auth-shell-wide {
    grid-template-columns: 1fr;
  }

  .profile-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .hero-card,
  .profile-card-header,
  .action-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-copy,
  .marketing-showcase,
  .auth-hero,
  .auth-panel,
  .profile-shell,
  .portal-panel {
    padding: 1.2rem;
  }

  .public-content {
    width: min(100%, calc(100% - 1rem));
    padding: 1.1rem 0 2.5rem;
  }

  .public-header-inner {
    width: min(100%, calc(100% - 1rem));
  }

  .public-nav {
    gap: 0.5rem;
  }

  .public-nav a,
  .public-nav .btn,
  .top-row-actions > * {
    width: 100%;
  }

  .public-nav .btn,
  .top-row-actions .btn,
  .language-select-wrap {
    min-width: 100%;
  }

  .workspace-pill,
  .profile-link-rich {
    width: 100%;
  }

  .register-option-list-inline,
  .offer-grid,
  .plans-grid,
  .portal-grid {
    grid-template-columns: 1fr;
  }

  .marketing-copy h1,
  .auth-hero h1,
  .profile-shell h1 {
    font-size: 2rem;
  }
}

/* ── Portal tab navigation ──────────────────────────── */
.portal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--wf-surface-muted);
  border-radius: 1rem;
  padding: 0.4rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.portal-tab {
  border: none;
  background: transparent;
  border-radius: 0.75rem;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wf-text-muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}

.portal-tab:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--wf-text);
}

.portal-tab-active {
  background: var(--wf-surface-elevated);
  color: var(--wf-primary);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.theme-dark .portal-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--wf-text);
}

.theme-dark .portal-tab-active {
  background: var(--wf-surface-elevated);
}

/* ── Loading indicator ──────────────────────────────── */
.portal-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--wf-text-muted);
  padding: 1.25rem 0;
  font-size: 0.95rem;
}

/* ── Members mobile cards ────────────────────────────── */
.members-card-list {
  display: none;
}

.member-card {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--wf-surface-elevated);
}

.member-card-selected,
.member-row-selected {
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.22);
}

.member-row-trigger {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  width: 100%;
  color: inherit;
}

.member-row-meta {
  display: block;
  color: var(--wf-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.member-avatar-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.14),
    rgba(15, 118, 110, 0.16)
  );
  color: var(--wf-primary-strong);
  flex-shrink: 0;
}

.member-avatar-shell-sm {
  width: 2.6rem;
  height: 2.6rem;
}

.member-avatar-shell-lg {
  width: 4.6rem;
  height: 4.6rem;
}

.member-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-avatar-fallback {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.member-avatar-fallback-lg {
  font-size: 1.2rem;
}

.members-management-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr) minmax(
      280px,
      0.8fr
    );
  align-items: start;
}

.member-badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.member-profile-shell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.member-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.member-preview-card {
  padding: 1.15rem;
  border-radius: 1.2rem;
  background: linear-gradient(
    180deg,
    rgba(13, 110, 253, 0.05),
    rgba(15, 118, 110, 0.08)
  );
  border: 1px solid rgba(13, 110, 253, 0.12);
}

.theme-dark .member-preview-card {
  background: linear-gradient(
    180deg,
    rgba(93, 158, 255, 0.12),
    rgba(15, 118, 110, 0.12)
  );
  border-color: rgba(142, 184, 255, 0.18);
}

@media (max-width: 768px) {
  .members-table-wrapper {
    display: none;
  }

  .members-card-list {
    display: grid;
    gap: 0.85rem;
  }
}

.theme-dark .member-card {
  border-color: var(--wf-border);
}

@media (max-width: 1200px) {
  .members-management-grid,
  .commercial-banner {
    grid-template-columns: 1fr;
  }
}

/* ── Topbar context switcher (global override) ──────── */
.topbar-context {
  display: flex;
  align-items: center;
}

.topbar-context .context-switcher {
  width: auto;
}

.topbar-context .context-switcher-select {
  min-height: auto;
  padding: 0.45rem 2.2rem 0.45rem 0.9rem;
  border-radius: 999px;
  background-color: var(--wf-workspace-pill-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(11,73,160,0.7)' d='M3.2 5.5L8 10.3l4.8-4.8.9.9L8 12.1 2.3 6.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  border-color: var(--wf-border);
  color: var(--wf-workspace-pill-text);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: none;
}

.theme-dark .topbar-context .context-switcher-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(174,205,255,0.7)' d='M3.2 5.5L8 10.3l4.8-4.8.9.9L8 12.1 2.3 6.4z'/%3E%3C/svg%3E");
}

/* ── Dark mode button contrast fix ─────────────────── */
/* In dark mode, --wf-primary is a light blue (#5d9eff) which gives
   low contrast with white text (~2.7:1). Use a darker gradient. */
.theme-dark .btn-primary {
  background: linear-gradient(135deg, #1b6ec2, #1557aa);
  color: #fff;
}

.theme-dark .btn-primary:hover,
.theme-dark .btn-primary:active,
.theme-dark .btn-primary:focus-visible {
  background: linear-gradient(135deg, #1557aa, #0f4a8e);
  color: #fff;
}

/* Ensure btn-primary text is always white (in case Bootstrap overrides) */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
  color: #fff !important;
}

/* ── Landing page: How it works ─────────────────────── */
.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.how-it-works-step {
  position: relative;
  padding: 1.6rem;
  background: var(--wf-surface-elevated);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 1.4rem;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
}

.step-number {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--wf-primary);
  opacity: 0.22;
  margin-bottom: 0.65rem;
  font-variant-numeric: tabular-nums;
}

/* ─────────── Schedule calendar ─────────── */

.schedule-calendar {
  overflow-x: auto;
}

.schedule-calendar-header {
  display: grid;
  grid-template-columns: 4.5rem repeat(7, 1fr);
  gap: 1px;
  background: var(--wf-border);
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
}

.schedule-calendar-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--wf-border);
  border-radius: 0 0 0.75rem 0.75rem;
  overflow: hidden;
}

.schedule-time-gutter {
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wf-text-secondary);
  background: var(--wf-surface-elevated);
  width: 4.5rem;
  min-width: 4.5rem;
  text-align: right;
}

.schedule-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  background: var(--wf-surface-elevated);
  font-weight: 700;
}

.schedule-day-header.schedule-day-today {
  background: rgba(13, 110, 253, 0.08);
}

.schedule-day-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wf-text-secondary);
}

.schedule-day-number {
  font-size: 1.1rem;
}

.schedule-hour-row {
  display: grid;
  grid-template-columns: 4.5rem repeat(7, 1fr);
  min-height: 3.2rem;
}

.schedule-cell {
  background: var(--wf-surface-elevated);
  padding: 0.15rem 0.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.schedule-block {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.25rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.72rem;
  line-height: 1.25;
  cursor: pointer;
  border: none;
  text-align: left;
  width: 100%;
  transition: filter 0.15s;
}

.schedule-block:hover {
  filter: brightness(0.92);
}

.schedule-block-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-block-trainer {
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-block-time {
  opacity: 0.7;
  font-size: 0.66rem;
}

/* Monthly grid */

.schedule-month-grid {
  border: 1px solid var(--wf-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.schedule-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--wf-surface-elevated);
  border-bottom: 1px solid var(--wf-border);
}

.schedule-month-day-name {
  padding: 0.4rem 0.3rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wf-text-secondary);
}

.schedule-month-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--wf-border);
}

.schedule-month-week:last-child {
  border-bottom: 0;
}

.schedule-month-cell {
  min-height: 5rem;
  padding: 0.3rem;
  background: var(--wf-surface-elevated);
  border-right: 1px solid var(--wf-border);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.schedule-month-cell:last-child {
  border-right: 0;
}

.schedule-month-cell-dim {
  opacity: 0.4;
}

.schedule-month-cell.schedule-day-today {
  background: rgba(13, 110, 253, 0.06);
}

.schedule-month-cell-day {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.schedule-month-block {
  display: block;
  padding: 0.15rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: none;
  text-align: left;
  width: 100%;
  color: var(--wf-text);
}

.schedule-month-block:hover {
  filter: brightness(0.9);
}

/* Instructor color legend */

.instructor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.instructor-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
}

.instructor-legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
}

/* Schedule detail panel */

.schedule-detail-panel {
  border-left: 4px solid var(--wf-primary);
}

/* ─────────── Members v2 layout ─────────── */

.members-layout {
  max-width: 64rem;
}

.member-add-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.member-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.member-card-v2 {
  background: var(--wf-surface-elevated);
  border: 1px solid var(--wf-border);
  border-radius: 0.85rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}

.member-card-v2:hover {
  border-color: var(--wf-primary);
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.08);
}

.member-card-v2-selected {
  border-color: var(--wf-primary);
}

.member-card-v2-trigger {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: inherit;
}

.member-card-v2-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.member-card-v2-name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.member-card-v2-email {
  font-size: 0.82rem;
  color: var(--wf-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-card-v2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.member-badge-sm {
  font-size: 0.65rem !important;
  padding: 0.2rem 0.5rem !important;
}

.member-card-v2-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.member-verified-badge {
  flex-shrink: 0;
}

/* Member modal */

.member-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

.member-modal {
  background: var(--wf-surface-elevated);
  border-radius: 1.2rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  width: 100%;
  max-width: 36rem;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.member-modal-sm {
  max-width: 28rem;
}

.member-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 1.5rem 0.75rem;
  gap: 1rem;
}

.member-modal-body {
  padding: 0 1.5rem 1.25rem;
}

.member-modal-footer {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid var(--wf-border);
}

/* ─────────── Dashboard bar chart ─────────── */

.dashboard-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 8rem;
  padding: 0.5rem 0;
}

.dashboard-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.dashboard-bar {
  width: 100%;
  max-width: 2.5rem;
  background: var(--wf-primary);
  border-radius: 0.35rem 0.35rem 0 0;
  opacity: 0.75;
  transition: height 0.3s ease;
  min-height: 2px;
}

.dashboard-bar-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--wf-text-secondary);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─────────── Profile layout ─────────── */

.profile-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 48rem;
}

/* ─────────── Discovery cards ─────────── */

.discovery-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.discovery-card {
  background: var(--wf-surface-elevated);
  border: 1px solid var(--wf-border);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.discovery-card-image-shell {
  height: 8rem;
  overflow: hidden;
}

.discovery-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discovery-card-body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.discovery-card-title {
  font-size: 1rem;
  margin: 0;
}

.discovery-type-chip {
  align-self: flex-start;
  font-size: 0.62rem !important;
}

.how-it-works-step h3 {
  margin: 0 0 0.55rem;
  font-size: 1.08rem;
}

.how-it-works-step p {
  color: var(--wf-text-muted);
  margin: 0;
  font-size: 0.97rem;
}

.theme-dark .how-it-works-step {
  border-color: var(--wf-border);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

/* ── Offer card icon ─────────────────────────────────── */
.offer-card-icon {
  font-size: 1.5rem;
  color: var(--wf-primary);
  margin-bottom: 0.5rem;
  opacity: 0.7;
  display: none; /* icons as real SVGs would be added in a future pass */
}

/* ── Hero CTA row ────────────────────────────────────── */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

/* ── Commercial banner secondary button ─────────────── */
.commercial-btn-secondary {
  color: rgba(248, 251, 255, 0.88) !important;
  border-color: rgba(248, 251, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.commercial-btn-secondary:hover,
.commercial-btn-secondary:active,
.commercial-btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border-color: rgba(248, 251, 255, 0.38) !important;
}

.commercial-banner-actions {
  flex-direction: column;
  align-items: stretch;
  min-width: 160px;
}

.commercial-banner-actions .btn {
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
  }

  .commercial-banner-actions {
    flex-direction: row;
    min-width: auto;
  }
}

/* ── Class participants list ──────────────────────────────────────────── */
.class-participants-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.class-participants-list li {
  font-size: 0.875rem;
  color: var(--wf-text);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--wf-input-bg, rgba(0, 0, 0, 0.04));
}

/* ── Membership Join page ─────────────────────────────────────────────── */
.join-page-header {
  margin-bottom: 2rem;
}

.join-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.join-plan-card {
  display: flex;
  flex-direction: column;
  background: var(--wf-panel-bg);
  border: 1px solid var(--wf-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.join-plan-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.join-plan-card-free {
  border-color: var(--wf-primary);
  border-width: 2px;
}

.join-plan-card-body {
  padding: 1.25rem 1.25rem 0.75rem;
  flex: 1;
}

.join-plan-card-footer {
  padding: 0.75rem 1.25rem 1.25rem;
}

.join-plan-label {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--wf-text);
}

.join-plan-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--wf-primary);
  margin-top: 0.5rem;
}

.join-plan-interval {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wf-text-secondary);
}

/* Join success state */
.join-success-panel {
  text-align: center;
  padding: 3rem 1rem;
}

.join-success-icon {
  font-size: 3rem;
  color: #198754;
  margin-bottom: 1rem;
  line-height: 1;
}

/* Stripe payment modal overlay */
.stripe-payment-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.stripe-modal-open {
  display: flex;
}

.stripe-payment-modal-inner {
  background: var(--wf-panel-bg);
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
}

@media (max-width: 576px) {
  .join-plans-grid {
    grid-template-columns: 1fr;
  }

  .stripe-payment-modal-inner {
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }
}

/* ── Trainers browse & booking ────────────────────────────────────────── */
.trainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.trainer-card {
  background: var(--wf-panel-bg);
  border: 1px solid var(--wf-border);
  border-radius: 10px;
  padding: 1.25rem;
  transition: border-color 0.15s;
}

.trainer-card:hover {
  border-color: var(--wf-primary);
}

.trainer-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.trainer-card-name {
  font-size: 1rem;
}

/* Slot picker */
.slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.slot-button {
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--wf-border);
  background: var(--wf-panel-bg);
  color: var(--wf-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.slot-button:hover {
  border-color: var(--wf-primary);
}

.slot-button-selected {
  background: var(--wf-primary);
  border-color: var(--wf-primary);
  color: #fff;
}

@media (max-width: 576px) {
  .trainers-grid {
    grid-template-columns: 1fr;
  }
}