/* ================================================================
   GYM SAAS MANAGER — Global Design Fixes
   Loaded after frontend.css and admin.css.
   Consolidates audit fixes without touching the 343KB base file.
================================================================ */

/* ── 1. COLOR UNIFICATION ─────────────────────────────────────────
   Three competing reds unified to a single canonical value.
   Override the --red token in BOTH the admin and frontend layers.
================================================================ */
:root {
  --red:         #e8294c;
  --red-dk:      #b81d37;
  --red-lt:      #ff3358;
  --red-sat:     #ff1040;
  --red-glow:    rgba(232, 41, 76, 0.40);
  --red-halo:    rgba(232, 41, 76, 0.15);
  --red-dim:     rgba(232, 41, 76, 0.08);
  --red-bd:      rgba(232, 41, 76, 0.28);
  --red-ring:    rgba(232, 41, 76, 0.18);
  --red-glow-lg: rgba(232, 41, 76, 0.35);

  /* Legacy aliases used in some views */
  --gsm-red:      var(--red);
  --gsm-red-lt:   var(--red-lt);
  --gsm-red-dim:  var(--red-dim);
  --gsm-red-bd:   var(--red-bd);
  --gsm-primary:  var(--red);
}

/* ── 2. FONT FAMILY GLOBAL RESET ──────────────────────────────────
   Eliminates Times New Roman fallback bleed-through.
   Scoped to GSM plugin containers to avoid touching theme typography.
================================================================ */
.gsm-saas-layout *,
.gsm-login-wrap *, .gsm-reg-wrap *, .gsm-reset-wrap *,
.gsm-sub-wrap *, .gsm-coach-wrap *, .gsm-portal-wrap *,
.gsm-checkin-wrap *, .gsm-import-wrap *, .gsm-onboard-wrap *,
.gsm-members-wrap *, .gsm-services-wrap *, .gsm-billing-wrap *,
.gsm-edit-gym-wrap *, .gsm-dir-wrap *, .gsm-guide-wrap *,
.gsm-log-wrap *, .gsm-ana-wrap *, .gsm-profile-wrap *,
.gsm-wrap *, .wrap.gsm-wrap *,
.gsm-empty-state,
#gsm-exit-overlay *,
#gsm-onb-overlay * {
  font-family: 'Plus Jakarta Sans', 'Barlow', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace elements — override back to mono */
.gsm-saas-layout code,
.gsm-saas-layout pre,
.gsm-saas-layout .gsm-mono,
.gsm-saas-layout .gsm-badge,
.gsm-saas-layout .gsm-label,
.gsm-saas-layout .gsm-status-pill,
.gsm-saas-layout .gsm-status-badge,
.wrap.gsm-wrap code,
.wrap.gsm-wrap pre,
[class*="gsm-"] .gsm-mono,
[class*="gsm-"] [style*="font-family:var(--mono)"],
[class*="gsm-"] [style*="font-family:var(--disp)"] {
  font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
}

/* ── 3. FOCUS-VISIBLE RING ────────────────────────────────────────
   Single global rule covering all interactive elements in GSM scope.
================================================================ */
.gsm-saas-layout *:focus-visible,
.gsm-wrap *:focus-visible,
.gsm-login-wrap *:focus-visible,
.gsm-reg-wrap *:focus-visible,
.gsm-sub-wrap *:focus-visible,
.gsm-members-wrap *:focus-visible,
.gsm-billing-wrap *:focus-visible,
.gsm-edit-gym-wrap *:focus-visible,
.gsm-checkin-wrap *:focus-visible,
.gsm-ana-wrap *:focus-visible,
#gsm-exit-overlay *:focus-visible,
#gsm-onb-overlay *:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 4. TABULAR NUMERALS — DATA DENSITY ──────────────────────────
   Applied to every element that displays counted data.
================================================================ */
.gsm-stat-number,
.gsm-stat-value,
.gsm-stat-count,
.gsm-total,
.gsm-number,
.gsm-price,
.gsm-count,
.gsm-ltv-num,
.ex-ltv-num,
.gsm-saas-layout table td,
.wrap.gsm-wrap table td,
[class*="gsm-"][class*="-num"],
[class*="gsm-"][class*="-count"],
[class*="gsm-"][class*="-amount"],
[class*="gsm-"][class*="-total"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── 5. BUTTON TRANSITION — GPU ONLY ─────────────────────────────
   Replace `transition: all` with GPU-safe properties only.
   Targets both GSM-generated and Elementor buttons via global rule.
================================================================ */
.gsm-btn,
.gsm-mb-btn,
.gsm-btn-primary,
.gsm-btn-secondary,
.gsm-btn-ghost,
.gsm-btn-outline,
.gsm-btn-danger,
.gsm-mb-btn-primary,
.gsm-mb-btn-secondary,
[class^="gsm-btn-"],
[class*=" gsm-btn-"] {
  transition:
    background-color 180ms cubic-bezier(0.0, 0.0, 0.2, 1.0),
    box-shadow       180ms cubic-bezier(0.0, 0.0, 0.2, 1.0),
    transform        120ms cubic-bezier(0.0, 0.0, 0.2, 1.0),
    border-color     180ms cubic-bezier(0.0, 0.0, 0.2, 1.0),
    opacity          150ms cubic-bezier(0.0, 0.0, 0.2, 1.0) !important;
}

/* ── 6. UPPERCASE LABEL TRACKING ─────────────────────────────────
   Adds letter-spacing that was missing on text-transform:uppercase labels.
================================================================ */
.gsm-label,
.gsm-badge,
.gsm-status-pill,
.gsm-status-badge,
.gsm-memcard-status-pill,
.gsm-saas-layout th,
.wrap.gsm-wrap th,
.gsm-tag,
.gsm-section-tag,
.gsm-eyebrow {
  letter-spacing: 0.06em;
}

/* ── 7. EMPTY STATE COMPONENT ────────────────────────────────────
   Replaces raw red error banners on broken pages.
   Usage: PHP gsm_empty_state() function renders this HTML structure.
================================================================ */
.gsm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
  min-height: 320px;
}

.gsm-empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.gsm-empty-state-title {
  font-size: 17px;
  font-weight: 700;
  color: #e8e8f0;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.gsm-empty-state-desc {
  font-size: 13px;
  color: #6a6a85;
  margin: 0 0 24px;
  line-height: 1.65;
  max-width: 380px;
}

.gsm-empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: var(--red, #e8294c);
  color: #fff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color 180ms ease-out,
    transform 120ms ease-out,
    box-shadow 180ms ease-out;
}

.gsm-empty-state-cta:hover {
  background: #c41f3b;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 41, 76, 0.35);
}

.gsm-empty-state-cta:active {
  transform: translateY(0);
}

/* ── 8. SVG SECTION ICONS ────────────────────────────────────────
   Styles for inline SVG icons replacing emoji in section headers.
================================================================ */
.gsm-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  color: #9494b0;
}

.gsm-section-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.gsm-section-icon.gsm-section-icon--red {
  background: rgba(232, 41, 76, 0.08);
  border-color: rgba(232, 41, 76, 0.25);
  color: var(--red, #e8294c);
}

/* Broadcast/annuaire icon box in dashboard */
.gsm-listing-plan-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gsm-listing-plan-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
}

/* ── 9. PAGE MOUNT FADE-IN ────────────────────────────────────────
   Prevents hard content pop on page load.
================================================================ */
.gsm-saas-layout,
.gsm-members-wrap,
.gsm-billing-wrap,
.gsm-edit-gym-wrap,
.gsm-checkin-wrap,
.gsm-ana-wrap,
.gsm-log-wrap,
.gsm-import-wrap,
.gsm-dir-wrap {
  animation: gsm-page-mount 280ms cubic-bezier(0.0, 0.0, 0.2, 1.0) both;
}

@keyframes gsm-page-mount {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── 10. ADMIN TABLE ENHANCEMENTS ────────────────────────────────
   Row hover, sticky header, better column alignment.
================================================================ */
.gsm-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.gsm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0e0e16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  letter-spacing: 0.06em;
  font-size: 10px;
  text-transform: uppercase;
  color: #6a6a85;
  font-weight: 600;
  padding: 10px 14px;
}

.gsm-table tbody tr {
  transition: background-color 120ms ease-out;
}

.gsm-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.gsm-table tbody tr:hover td:first-child {
  border-left: 2px solid var(--red, #e8294c);
}

.gsm-table tbody td {
  border-left: 2px solid transparent;
  transition: border-color 120ms ease-out;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: #9494b0;
  vertical-align: middle;
}

/* ── 11. BROKEN IMAGE FALLBACK ────────────────────────────────────
   Hides broken img arrows and shows initials avatar instead.
   Works with JS counterpart (added via wp_footer).
================================================================ */
img.gsm-gym-logo-img,
img.gsm-logo-img,
img[class*="gsm"][class*="logo"] {
  background: #12121c;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  object-fit: contain;
  min-width: 32px;
  min-height: 32px;
  color: transparent; /* hide alt text glitch */
}

img.gsm-gym-logo-img.gsm-img-broken,
img.gsm-logo-img.gsm-img-broken,
img[class*="gsm"][class*="logo"].gsm-img-broken {
  display: none !important;
}

.gsm-logo-avatar {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #181824;
  border: 1px solid rgba(255, 255, 255, 0.07);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #6a6a85;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}

.gsm-logo-avatar.gsm-logo-avatar--visible {
  display: flex;
}

/* ── 12. MODAL GLASS EFFECT ──────────────────────────────────────
   Upgrade modals (including exit interview and onboarding) to glass.
================================================================ */
#gsm-exit-overlay,
#gsm-onb-overlay {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* ── 13. STATUS INDICATOR DOTS ───────────────────────────────────
   CSS-based status dots replacing emoji status icons in billing.
================================================================ */
.gsm-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.gsm-status-dot--active    { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.gsm-status-dot--trial     { background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); }
.gsm-status-dot--expired   { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.gsm-status-dot--pending   { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.gsm-status-dot--cancelled { background: #6a6a85; }
.gsm-status-dot--confirmed { background: #22c55e; }
.gsm-status-dot--rejected  { background: #ef4444; }
.gsm-status-dot--info      { background: #3b82f6; }

/* Pulse animation for active dot */
.gsm-status-dot--active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(34, 197, 94, 0.4);
  animation: gsm-dot-pulse 2s ease-in-out infinite;
}

@keyframes gsm-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.6); }
}

/* ── 14. SEARCH ICON WRAPPER ─────────────────────────────────────
   Replaces 🔍 emoji search icon with a proper SVG.
================================================================ */
.gsm-search-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #6a6a85;
  flex-shrink: 0;
}

.gsm-search-icon-svg svg {
  display: block;
}

/* ── 15. ACTIVITY LOG ICON ───────────────────────────────────────
   Container for inline SVG icons in the activity log replacing emoji.
================================================================ */
.gsm-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}

.gsm-activity-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ================================================================
   COACH PROFILE PAGE — v2 REDESIGN
   [gsm_coach_profile] premium layout
================================================================ */
.gsm-cp-v2 {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 80px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

.gsm-cp-back-v2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  color: #9494b0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 28px;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.gsm-cp-back-v2:hover { background: rgba(255,255,255,.08); color: #e8e8f0; }

/* ── Hero card ── */
.gsm-cp-hero-v2 {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 24px;
  background: #0e0e16;
}

.gsm-cp-hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(232,41,76,.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(139,92,246,.10) 0%, transparent 60%);
  pointer-events: none;
}

.gsm-cp-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 40px 36px;
  flex-wrap: wrap;
}

.gsm-cp-photo-col { flex-shrink: 0; }

.gsm-cp-photo-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #e8294c 0%, #7c3aed 100%);
  box-shadow: 0 0 32px rgba(232,41,76,.30);
}

.gsm-cp-photo-ring img,
.gsm-cp-photo-ring .gsm-cp-photo-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #181824;
}

.gsm-cp-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 800;
  color: #6a6a85;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.gsm-cp-info-col { flex: 1; min-width: 200px; }

.gsm-cp-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  background: rgba(232,41,76,.10);
  border: 1px solid rgba(232,41,76,.28);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #e8294c;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.gsm-cp-name-v2 {
  font-size: 28px;
  font-weight: 800;
  color: #f5f5fa;
  margin: 0 0 20px;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
}

.gsm-cp-stats-strip {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
  width: fit-content;
}

.gsm-cp-stat-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px;
  border-right: 1px solid rgba(255,255,255,.06);
  min-width: 80px;
}
.gsm-cp-stat-v2:last-child { border-right: none; }
.gsm-cp-stat-v2-val {
  font-size: 20px;
  font-weight: 800;
  color: #f5f5fa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 3px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.gsm-cp-stat-v2-lbl {
  font-size: 10px;
  color: #6a6a85;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  white-space: nowrap;
}

.gsm-cp-cta-row-v2 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gsm-cp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 180ms ease-out;
  border: 1px solid transparent;
}
.gsm-cp-cta-btn svg { flex-shrink: 0; }

.gsm-cp-cta-wa {
  background: rgba(37,211,102,.10);
  border-color: rgba(37,211,102,.28);
  color: #25d366;
}
.gsm-cp-cta-wa:hover {
  background: rgba(37,211,102,.18);
  transform: translateY(-1px);
}

.gsm-cp-cta-ig {
  background: rgba(225,48,108,.10);
  border-color: rgba(225,48,108,.28);
  color: #e1306c;
}
.gsm-cp-cta-ig:hover {
  background: rgba(225,48,108,.18);
  transform: translateY(-1px);
}

/* ── Body content ── */
.gsm-cp-body-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gsm-cp-section-v2 {
  background: #0e0e16;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 28px 32px;
}

.gsm-cp-section-title-v2 {
  font-size: 13px;
  font-weight: 700;
  color: #9494b0;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gsm-cp-section-title-v2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.06);
  border-radius: 1px;
}

.gsm-cp-bio-text {
  font-size: 14px;
  color: #9494b0;
  line-height: 1.75;
  margin: 0;
  white-space: pre-line;
}

.gsm-cp-certif-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.gsm-cp-certif-item-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  font-size: 12px;
  color: #bdbdd0;
  line-height: 1.4;
}
.gsm-cp-certif-item-v2 svg {
  flex-shrink: 0;
  color: #22c55e;
  width: 14px;
  height: 14px;
}

.gsm-cp-courses-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.gsm-cp-course-card-v2 {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}
.gsm-cp-course-card-v2:hover {
  border-color: rgba(255,255,255,.14);
  transform: translateY(-2px);
}
.gsm-cp-course-thumb-v2 {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.gsm-cp-course-thumb-fallback-v2 {
  width: 100%;
  height: 120px;
  background: #181824;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.12);
}
.gsm-cp-course-body-v2 { padding: 14px; }
.gsm-cp-course-title-v2 {
  font-size: 13px;
  font-weight: 700;
  color: #e8e8f0;
  margin: 0 0 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gsm-cp-course-meta-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #6a6a85;
}
.gsm-cp-course-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gsm-cp-course-price-v2 {
  font-weight: 700;
  color: #e8294c;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.gsm-cp-course-free { color: #22c55e; font-weight: 700; font-size: 12px; }

.gsm-cp-empty-field {
  font-size: 13px;
  color: #484860;
  font-style: italic;
}

/* mobile */
@media (max-width: 680px) {
  .gsm-cp-hero-inner { padding: 28px 20px; gap: 20px; flex-direction: column; align-items: center; text-align: center; }
  .gsm-cp-stats-strip { width: 100%; justify-content: center; }
  .gsm-cp-cta-row-v2 { justify-content: center; }
  .gsm-cp-name-v2 { font-size: 22px; }
  .gsm-cp-section-v2 { padding: 20px 18px; }
  .gsm-cp-certif-grid-v2 { grid-template-columns: 1fr; }
}

/* ================================================================
   COACHES DIRECTORY — v2 CARD UPGRADES
   Fixes emoji, improves action buttons, adds proper icon-based meta
================================================================ */

/* Social action buttons (replacing emoji) */
.gsm-cdc-btn-wa-v2,
.gsm-cdc-btn-ig-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid;
  transition: all 150ms ease-out;
  text-decoration: none;
  flex-shrink: 0;
}
.gsm-cdc-btn-wa-v2 {
  background: rgba(37,211,102,.08);
  border-color: rgba(37,211,102,.22);
  color: #25d366;
}
.gsm-cdc-btn-wa-v2:hover { background: rgba(37,211,102,.16); transform: scale(1.05); }
.gsm-cdc-btn-ig-v2 {
  background: rgba(225,48,108,.08);
  border-color: rgba(225,48,108,.22);
  color: #e1306c;
}
.gsm-cdc-btn-ig-v2:hover { background: rgba(225,48,108,.16); transform: scale(1.05); }

/* Card meta row — icons + text */
.gsm-cdc-meta-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 10px;
}
.gsm-cdc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6a6a85;
}
.gsm-cdc-meta-item svg { color: #484860; }
.gsm-cdc-meta-item strong { color: #9494b0; font-weight: 600; }

/* Certif items — replace ✓ text with SVG */
.gsm-cdc-certif-v2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.16);
  border-radius: 6px;
  font-size: 10px;
  color: #34d399;
  margin: 2px;
}
.gsm-cdc-certif-v2 svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Coaches home widget — meta icons */
.gsm-ch-hc-meta-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.gsm-ch-hc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6a6a85;
}
.gsm-ch-hc-meta-item svg { width: 11px; height: 11px; color: #484860; }

/* CTA buttons in coaches home — no emoji */
.gsm-ch-cta-btn-v2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 180ms ease-out;
}

/* Directory empty state */
.gsm-coaches-dir-empty-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: #6a6a85;
}
.gsm-coaches-dir-empty-v2 svg {
  opacity: .25;
  margin-bottom: 16px;
}
.gsm-coaches-dir-empty-v2 p {
  font-size: 14px;
  margin: 0;
}

/* ================================================================
   GYM DIRECTORY — CARD STAT ROW ICON FIXES
================================================================ */
.gsm-dir-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6a6a85;
}
.gsm-dir-stat-item svg {
  width: 12px;
  height: 12px;
  color: #484860;
  flex-shrink: 0;
}

/* Map popup style override — SUPPRIME (code mort).
   .gsm-map-popup / -name / -type / -addr / -cta ne sont produites nulle
   part : le popup Leaflet de includes/gym-directory.php (marker.bindPopup,
   ~L461) est construit integralement avec des styles inline, sans aucune
   classe. La chaine "map-popup" n'apparait dans aucun des 132 fichiers
   .php/.js. Les valeurs de ces regles etaient d'ailleurs deja dupliquees
   a l'identique dans les styles inline du popup. */

/* ═══════════════════════════════════════════════════════════════════
   CROSS-CUTTING FIXES — from v9.1 QA audit
═══════════════════════════════════════════════════════════════════ */

/* ── Skip-to-content link ──
   La définition qui vivait ici (masquage par top:-100%, révélation par
   :focus{top:0}) était intégralement écrasée par la seconde définition
   de .gsm-skip-link plus bas dans CE MÊME fichier (masquage par
   left:-9999px, révélation par :focus{left:0}) : top, left, z-index,
   background, padding, border-radius et font-weight y sont tous
   redéclarés, et la règle :focus{top:0} était sans effet puisque la
   définition gagnante pose déjà top:0.
   Bloc supprimé — le rendu est inchangé, une seule définition subsiste
   (cf. « Lien d'évitement » plus bas). */

/* ── Gym avatar initial letter fallback (replaces 🏋️ emoji) ── */
.gsm-gym-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 48px;
  min-height: 48px;
  background: var(--red-dim, rgba(232,41,76,.15));
  color: var(--red, #e8294c);
  font-size: 22px;
  font-weight: 900;
  font-style: normal;
  border-radius: 12px;
  line-height: 1;
}

/* ── Plan price input: prevent 34px truncation of 5-digit DZD values ── */
.gsm-plan-field-sm .gsm-input,
.gsm-plan-input-group .gsm-input {
  min-width: 80px !important;
}

/* ── Toggle switch OFF-state: more visible track ── */
.gsm-toggle-knob {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.gsm-toggle-switch input:checked + .gsm-toggle-knob {
  background: var(--red, #e8294c) !important;
  border-color: var(--red, #e8294c) !important;
}

/* ── Sub-gym logo placeholder (replaces 🏋️ in subscribe gym selector) ── */
.gsm-sub-gym-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--red-dim, rgba(232,41,76,.12));
  border-radius: 10px;
  color: var(--red, #e8294c);
}

/* ── Gym directory card placeholder — boost contrast (was rgba 0.16/0.22) ── */
.gsm-dir-card-placeholder {
  color: rgba(255,255,255,.45) !important;
}
.gsm-dir-card-placeholder svg {
  opacity: 0.6 !important;
  color: rgba(255,255,255,.55);
}
.gsm-dir-card-placeholder-text {
  color: rgba(255,255,255,.6) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── Coach card name — prevent any theme styles making it look like an input ── */
.gsm-cdc-name {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--snow, #f8fafc) !important;
  margin: 0 0 4px !important;
  display: block !important;
  width: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EDIT GYM PAGE — v9.x complete redesign
   All .gsm-eg-* classes for the two-column paramètres layout
═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.gsm-edit-gym-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 48px;
}

/* ── Fix outer form card (was styled as a big card, now transparent) ── */
.gsm-edit-gym-wrap .gsm-edit-gym-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ── Page header ── */
.gsm-eg-page-header {
  margin-bottom: 28px;
}
.gsm-eg-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  transition: color .18s ease;
}
.gsm-eg-back-link:hover {
  color: var(--fg, #e2e8f0);
  text-decoration: none;
}
.gsm-eg-page-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.gsm-eg-page-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: var(--fg, #e2e8f0);
  line-height: 1.2;
}
.gsm-eg-gym-name-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--red, #e8294c);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ── Two-column layout grid ── */
.gsm-eg-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 860px) {
  .gsm-eg-layout {
    grid-template-columns: 1fr 280px;
  }
}
.gsm-eg-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Sidebar ── */
.gsm-eg-sidebar {
  min-width: 0;
}
@media (min-width: 860px) {
  .gsm-eg-sidebar {
    position: sticky;
    top: 24px;
  }
}
.gsm-eg-sidebar-card {
  background: var(--carbon, #1a1a2e);
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  border-radius: var(--rl, 12px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gsm-eg-sidebar-card .gsm-btn + .gsm-btn {
  margin-top: 8px;
}
.gsm-eg-sidebar-tip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bd, rgba(255,255,255,.07));
  font-size: 11px;
  color: var(--muted, #94a3b8);
  line-height: 1.5;
}

/* ── Fix section header → must be flex ── */
.gsm-edit-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--bd, rgba(255,255,255,.07)) !important;
  background: var(--pit, rgba(255,255,255,.02)) !important;
}
.gsm-edit-section-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg, #e2e8f0);
  flex: 1;
}

/* ── Section icon (contains SVG, not emoji) ── */
/* NOTE cascade : .gsm-section-icon est déclarée une seconde fois ici
   (première déclaration plus haut dans ce fichier). Les valeurs
   ci-dessous gagnent (width/height/display/background/border-radius/
   color) mais le `border: 1px solid rgba(255,255,255,.08)` de la
   première déclaration subsiste car il n'est pas redéclaré. Non
   fusionné volontairement : fusionner changerait le rendu actuel. */
.gsm-section-icon {
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--red-tint, rgba(232,41,76,.12));
  border-radius: 8px;
  color: var(--red, #e8294c);
  flex-shrink: 0;
  font-size: inherit; /* neutralise any emoji font-size */
}
/* .gsm-section-icon svg : doublon exact de la déclaration plus haut dans
   ce fichier (width/height 15px, display:block) — supprimé, sans effet. */

/* ── Section badge (e.g. photo limit in gallery header) ── */
.gsm-eg-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Listing plan banner ── */
.gsm-eg-listing-banner {
  background: var(--carbon, #1a1a2e);
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  border-left: 3px solid var(--plan-color, #e8294c);
  border-radius: var(--rl, 12px);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gsm-eg-listing-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.gsm-eg-listing-icon {
  width: 34px;
  height: 34px;
  background: var(--red-tint, rgba(232,41,76,.1));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plan-color, #e8294c);
  flex-shrink: 0;
}
.gsm-eg-listing-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.gsm-eg-listing-plan-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg, #e2e8f0);
}
.gsm-eg-listing-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st-color, #22c55e);
  background: color-mix(in srgb, var(--st-color, #22c55e) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-color, #22c55e) 30%, transparent);
}
.gsm-eg-listing-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: #22c55e;
}
.gsm-eg-listing-featured {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: #f59e0b;
}
.gsm-eg-listing-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gsm-eg-listing-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}
.gsm-eg-listing-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--red, #e8294c);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s ease, transform .18s ease;
  flex-shrink: 0;
}
.gsm-eg-listing-upgrade:hover {
  opacity: .88;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

/* ── Branding / logo row ── */
.gsm-eg-logo-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 560px) {
  .gsm-eg-logo-row {
    grid-template-columns: 1fr;
  }
}
.gsm-eg-logo-preview {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  background: var(--pit, rgba(255,255,255,.03));
  display: flex;
  align-items: center;
  justify-content: center;
}
.gsm-eg-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gsm-eg-logo-empty {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 1.5px dashed var(--bd, rgba(255,255,255,.15));
  background: var(--pit, rgba(255,255,255,.02));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted, #64748b);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gsm-eg-logo-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.gsm-eg-file-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  padding: 9px 16px;
  background: var(--surface, rgba(255,255,255,.05));
  border: 1px solid var(--bd, rgba(255,255,255,.1));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg, #e2e8f0);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  width: fit-content;
  overflow: hidden;
}
.gsm-eg-file-label:hover {
  background: var(--surface-hover, rgba(255,255,255,.08));
  border-color: var(--bd-hover, rgba(255,255,255,.18));
}

/* ── Gallery grid ── */
.gsm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  min-height: 0;
}
.gsm-gallery-grid:empty {
  display: none;
}
.gsm-gallery-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  background: var(--pit, rgba(255,255,255,.03));
}
.gsm-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gsm-gallery-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,.65);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
  opacity: 0;
  transition: opacity .15s ease;
  line-height: 1;
}
.gsm-gallery-thumb:hover .gsm-gallery-thumb-remove {
  opacity: 1;
}

/* ── Social media input wrap ── */
.gsm-social-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--bd, rgba(255,255,255,.1));
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, rgba(255,255,255,.04));
  transition: border-color .18s ease;
}
.gsm-social-input-wrap:focus-within {
  border-color: var(--red, #e8294c);
}
.gsm-social-icon {
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: inherit; /* override any emoji sizing */
}
.gsm-social-icon svg {
  display: block;
  flex-shrink: 0;
}
.gsm-social-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--fg, #e2e8f0) !important;
  min-width: 0;
}
.gsm-social-input::placeholder {
  color: var(--muted, #64748b);
}

/* ── Plan builder rows ── */
.gsm-plan-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  background: var(--pit, rgba(255,255,255,.02));
  border: 1px solid var(--bd, rgba(255,255,255,.07));
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color .18s ease, background .18s ease;
}
.gsm-plan-row:hover {
  border-color: var(--bd-hover, rgba(255,255,255,.13));
}
.gsm-plan-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 36px;
  cursor: grab;
  color: var(--muted, #64748b);
  flex-shrink: 0;
  transition: color .15s ease;
}
.gsm-plan-drag:active {
  cursor: grabbing;
}
.gsm-plan-drag:hover {
  color: var(--fg, #e2e8f0);
}
.gsm-plan-fields {
  display: grid;
  grid-template-columns: 1fr 130px 70px 110px;
  gap: 10px;
  flex: 1;
  min-width: 0;
  align-items: end;
}
@media (max-width: 640px) {
  .gsm-plan-fields {
    grid-template-columns: 1fr 1fr;
  }
  .gsm-plan-field-per {
    grid-column: span 2;
  }
}
.gsm-plan-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gsm-plan-input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--bd, rgba(255,255,255,.1));
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, rgba(255,255,255,.04));
  transition: border-color .18s ease;
}
.gsm-plan-input-group:focus-within {
  border-color: var(--red, #e8294c);
}
.gsm-plan-input-group .gsm-input {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}
.gsm-plan-addon {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #64748b);
  background: var(--pit, rgba(255,255,255,.03));
  border-left: 1px solid var(--bd, rgba(255,255,255,.07));
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.gsm-plan-per-month {
  padding: 8px 12px;
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--bd, rgba(255,255,255,.07));
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg, #e2e8f0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Plan remove button ── */
.gsm-plan-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(232,41,76,.08) !important;
  border: 1px solid rgba(232,41,76,.2) !important;
  border-radius: 7px;
  color: var(--red, #e8294c) !important;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  align-self: flex-end;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
  font-size: inherit; /* neutralise any emoji font-size */
}
.gsm-plan-remove:hover {
  background: rgba(232,41,76,.18) !important;
  border-color: rgba(232,41,76,.4) !important;
  transform: scale(1.08);
}
.gsm-plan-remove:active {
  transform: scale(.96);
}
.gsm-plan-remove svg {
  display: block;
  flex-shrink: 0;
}

/* ── Toggle switch ── */
.gsm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  background: var(--pit, rgba(255,255,255,.02));
  border: 1px solid var(--bd, rgba(255,255,255,.07));
  border-radius: 10px;
}
.gsm-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gsm-toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg, #e2e8f0);
}
.gsm-toggle-desc {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  line-height: 1.5;
}
.gsm-toggle-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.gsm-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gsm-toggle-knob {
  position: absolute;
  inset: 0;
  background: var(--surface, rgba(255,255,255,.1));
  border: 1px solid var(--bd, rgba(255,255,255,.12));
  border-radius: 24px;
  transition: background .22s cubic-bezier(.4,0,.2,1), border-color .22s ease;
}
.gsm-toggle-knob::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.gsm-toggle-switch input:checked + .gsm-toggle-knob {
  background: var(--red, #e8294c);
  border-color: var(--red, #e8294c);
}
.gsm-toggle-switch input:checked + .gsm-toggle-knob::after {
  transform: translateX(20px);
}
.gsm-toggle-switch input:focus-visible + .gsm-toggle-knob {
  outline: 2px solid var(--red, #e8294c);
  outline-offset: 2px;
}

/* ── C2 FIX: Mobile sidebar slide-in overlay ─────────────────────
   frontend.css line 1719 sets position:relative on .gsm-sidebar to
   create a z-index stacking context above the animated background
   pseudo-elements. This overrides the earlier position:fixed and
   breaks the mobile hamburger overlay on <768px: the sidebar is a
   flex-flow item instead of a fixed overlay, so it does not slide
   over content. Force position:fixed back on mobile so the
   transform:translateX(-100%/0) slide works as an overlay.
================================================================ */
@media (max-width: 768px) {
  .gsm-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    width: var(--sbw, 240px);
  }
  /* When sidebar is fixed on mobile, .gsm-main must span full width */
  .gsm-main {
    margin-left: 0 !important;
  }
}

/* ================================================================
   HIGH-END POLISH LAYER  (SaaS-grade finish)
   Scoped to the plugin's own containers (.gsm-* wrappers) so it
   never bleeds into the host theme. Pure transform/opacity + colour
   work — no layout-affecting properties. Honours reduced-motion.
================================================================ */

/* Crisper type rendering across all plugin surfaces */
.gsm-community-wrap, .gsm-card-page, .gsm-main, .gsm-wrap,
.gsm-portal-wrap, .gsm-checkin-wrap, .gsm-pos-wrap, .gsm-pricing-wrap {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Premium thin scrollbars inside plugin scroll areas */
.gsm-main *, .gsm-community-wrap *, .gsm-card-page *, .gsm-wrap * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.gsm-main *::-webkit-scrollbar,
.gsm-community-wrap *::-webkit-scrollbar,
.gsm-card-page *::-webkit-scrollbar,
.gsm-wrap *::-webkit-scrollbar { width: 9px; height: 9px; }
.gsm-main *::-webkit-scrollbar-thumb,
.gsm-community-wrap *::-webkit-scrollbar-thumb,
.gsm-card-page *::-webkit-scrollbar-thumb,
.gsm-wrap *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.gsm-main *::-webkit-scrollbar-thumb:hover,
.gsm-community-wrap *::-webkit-scrollbar-thumb:hover,
.gsm-card-page *::-webkit-scrollbar-thumb:hover,
.gsm-wrap *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }

/* Branded text selection */
.gsm-community-wrap ::selection, .gsm-card-page ::selection,
.gsm-main ::selection, .gsm-wrap ::selection {
  background: rgba(232,41,76,.28);
  color: #fff;
}

/* Universal, accessible focus ring on every interactive plugin control */
.gsm-main a:focus-visible, .gsm-main button:focus-visible,
.gsm-main input:focus-visible, .gsm-main textarea:focus-visible, .gsm-main select:focus-visible,
.gsm-community-wrap a:focus-visible, .gsm-community-wrap button:focus-visible,
.gsm-community-wrap input:focus-visible, .gsm-community-wrap textarea:focus-visible, .gsm-community-wrap select:focus-visible,
.gsm-card-page a:focus-visible, .gsm-card-page button:focus-visible,
.gsm-card-page input:focus-visible, .gsm-card-page textarea:focus-visible, .gsm-card-page select:focus-visible,
.gsm-wrap a:focus-visible, .gsm-wrap button:focus-visible,
.gsm-wrap input:focus-visible, .gsm-wrap textarea:focus-visible, .gsm-wrap select:focus-visible {
  outline: 2px solid var(--red, #e8294c);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Buttons feel physical: smooth easing + a subtle press */
.gsm-main button:not(:disabled), .gsm-main .gsm-btn,
.gsm-community-wrap button:not(:disabled),
.gsm-card-page button:not(:disabled), .gsm-card-page .gsm-btn,
.gsm-pricing-cta-btn, .gsm-btn {
  transition: transform .15s cubic-bezier(.32,.72,0,1),
              background-color .18s ease, border-color .18s ease,
              box-shadow .2s ease, opacity .18s ease;
}
.gsm-main .gsm-btn:active, .gsm-card-page .gsm-btn:active,
.gsm-community-wrap button:not(:disabled):active,
.gsm-pricing-cta-btn:active, .gsm-btn:active { transform: scale(.975); }

/* Inputs: soft focus glow instead of a hard jump */
.gsm-main input:not([type=checkbox]):not([type=radio]):focus,
.gsm-main textarea:focus, .gsm-main select:focus,
.gsm-card-page input:focus, .gsm-card-page textarea:focus,
.gsm-community-wrap input:focus, .gsm-community-wrap textarea:focus {
  border-color: var(--red, #e8294c) !important;
  box-shadow: 0 0 0 3px rgba(232,41,76,.15);
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Disabled controls read clearly as disabled everywhere */
.gsm-main button:disabled, .gsm-card-page button:disabled,
.gsm-community-wrap button:disabled, .gsm-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.7);
}

/* Pricing cards: gentle lift on hover (GPU-only) */
.gsm-pricing-card {
  transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.gsm-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

/* Lazy/async media never causes a harsh pop-in */
.gsm-community-wrap img, .gsm-card-page img, .gsm-main img { image-rendering: auto; }

/* Member status "En attente" (pending owner approval) — amber, distinct from active/expired. */
.gsm-mb-status-pending { color: #f59e0b !important; background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.28) !important; }
.gsm-mb-status-pending .gsm-mb-status-dot { background: #f59e0b !important; }

/* Check-in result/log: name, status line and plan were rendering flush together
   ("QA Member 1Entrée enregistrée"). Stack the parts so each reads on its own line. */
.gsm-cr-info, .gsm-ci-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.gsm-cr-info > strong, .gsm-cr-info > span, .gsm-cr-info > small,
.gsm-ci-info > strong, .gsm-ci-info > span, .gsm-ci-info > small { display: block; }

/* Respect users who prefer reduced motion — kill all the above motion */
@media (prefers-reduced-motion: reduce) {
  .gsm-main *, .gsm-community-wrap *, .gsm-card-page *, .gsm-wrap *, .gsm-pricing-wrap * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .gsm-pricing-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — visibilité du focus clavier (WCAG 2.4.7, niveau AA)
   ----------------------------------------------------------------------
   Une vingtaine de champs du plugin appliquaient « outline:none » sans
   fournir d'indicateur de remplacement : un utilisateur au clavier (ou
   toute personne n'utilisant pas la souris) ne voyait plus du tout où se
   trouvait le curseur dans les formulaires.
   Ce bloc est chargé en dernier (gsm-global-fixes dépend de gsm-frontend
   et de gsm-admin) : il rétablit donc un anneau de focus visible partout,
   sans toucher aux styles existants.
   On cible :focus-visible pour ne pas afficher l'anneau lors d'un simple
   clic souris, avec un repli :focus pour les navigateurs plus anciens.
   ══════════════════════════════════════════════════════════════════════ */
.gsm-nfc-url-input:focus-visible,
.gsm-sub-textarea:focus-visible,
.gsm-mb-search-input:focus-visible,
.gsm-mb-select:focus-visible,
.gsm-dir-search:focus-visible,
.gsm-dir-search-input:focus-visible,
.gsm-cel-search-input:focus-visible,
.gsm-cel-select:focus-visible,
.gsm-checkin-search-input:focus-visible,
.gsm-social-input:focus-visible,
.gsm-coaches-dir-search input:focus-visible,
.gsm-el-search-input:focus-visible,
.gsm-fm-search-bar input:focus-visible,
.gsm-fm-selects select:focus-visible,
.gsm-el-checkbox-label:focus-visible,
.gsm-mvid-title-input:focus-visible,
.gsm-select-inline:focus-visible,
.gsm-comm-icon-btn:focus-visible,
.gsm-admin-input:focus-visible,
.gsm-wrap .gsm-input:focus-visible {
  outline: 2px solid #E5484D;
  outline-offset: 2px;
  border-color: #E5484D;
}

/* Filet de sécurité : tout contrôle interactif du plugin qui n'aurait
   aucun style de focus reste repérable au clavier. */
.gsm-wrap :is(input, select, textarea, button, [tabindex]):focus-visible,
[class*="gsm-"] :is(input, select, textarea, button, [tabindex]):focus-visible {
  outline: 2px solid #E5484D;
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   Contrôles qui déclarent « outline:none !important » dans admin.css,
   frontend.css ou plus haut dans ce fichier : la règle non-!important
   ci-dessus perdait la cascade et l'anneau de focus ne s'affichait pas.
   Un indicateur de focus ne doit jamais pouvoir être supprimé, d'où le
   !important ici (WCAG 2.4.7 / 2.4.11). :focus-visible => aucun impact
   au clic souris, l'anneau n'apparaît qu'au clavier.
   ---------------------------------------------------------------------- */
.gsm-admin-input:focus-visible,
.gsm-admin-select:focus-visible,
.gsm-admin-textarea:focus-visible,
.gsm-search-input:focus-visible,
.gsm-input:focus-visible,
.gsm-cust-input:focus-visible,
.gsm-cust-textarea:focus-visible,
.gsm-dark-input:focus-visible,
.gsm-dir-search-input:focus-visible,
.gsm-social-input:focus-visible,
.gsm-wrap input:focus-visible,
.gsm-wrap select:focus-visible,
.gsm-wrap textarea:focus-visible,
.gsm-wrap button:focus-visible,
.gsm-wrap a:focus-visible,
[class*="gsm-"]:is(input, select, textarea, button, a, [tabindex]):focus-visible,
[class*="gsm-"] :is(input, select, textarea, button, [tabindex]):focus-visible {
  outline: 2px solid #E5484D !important;
  outline-offset: 2px !important;
}

/* Repli pour les navigateurs sans :focus-visible (Safari < 15.4). */
@supports not selector(:focus-visible) {
  .gsm-wrap :is(input, select, textarea, button):focus,
  [class*="gsm-"] :is(input, select, textarea, button):focus {
    outline: 2px solid #E5484D;
    outline-offset: 2px;
  }
}

/* Lien d'évitement — permet d'atteindre directement le contenu au clavier. */
.gsm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: #101014; color: #fff; padding: 12px 18px;
  border-radius: 0 0 6px 0; font-weight: 600; text-decoration: none;
}
.gsm-skip-link:focus { left: 0; }

/* ══════════════════════════════════════════════════════════════════════
   UX AUDIT — cross-cutting fixes reported by the per-surface passes.
   This file is deliberately the home for them: it is never minified and
   is enqueued in BOTH the front-end and wp-admin contexts, after the main
   stylesheet, so a rule added here reaches production. (frontend.min.css
   is what actually ships when WP_DEBUG is off — a source-only fix would
   never be seen by a live site.)
   ══════════════════════════════════════════════════════════════════════ */

/* --r-sm was referenced by plugin code but defined ONLY inside the inline
   <style> of admin/views/retention.php. Custom properties are scoped to the
   document that declares them, so every front-end use resolved to nothing
   and rendered square corners. Declared here so it exists in both contexts. */
:root { --r-sm: 8px; }

/* iOS Safari zooms the whole viewport when a focused input's font-size is
   under 16px. On this mobile-first market that visibly breaks the portal
   login, registration and password-reset forms on every iPhone. */
.gsm-portal-input,
.gsm-reset-input,
.gsm-reg-input,
.gsm-ma-input,
.gsm-lf-input,
.gsm-sub-input { font-size: 16px; min-height: 44px; }

/* Touch targets — WCAG 2.5.8 / practical thumb size. */
.gsm-portal-submit-btn,
.gsm-reset-btn,
.gsm-reg-submit,
.gsm-lf-submit,
.gsm-sub-submit { min-height: 48px; }

.gsm-reset-eye,
.gsm-reg-eye,
.gsm-lf-eye {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

.gsm-mb-shortcut { min-height: 44px; }

/* Front-desk check-in kiosk: tablet use, arm's length, under time pressure. */
.gsm-ci-result { min-height: 56px; }
.gsm-checkin-refresh-btn { min-height: 44px; padding: 10px 16px; }

/* Hardcoded #ff6b86 predates the token set; --red-lt is the AA-safe text red. */
.gsm-checkin-result-denied .gsm-checkin-result-status { color: var(--red-lt); }

/* CASCADE CONFLICT — .gsm-checkin-result is styled twice in frontend.css. The
   later rule treats it as a clickable dropdown ROW (cursor:pointer, 12px
   padding, border-bottom, hover tint) and overrode the intended verdict-PANEL
   rule, so the most safety-critical element on the check-in screen rendered as
   a list item. Restated here (loaded last) rather than deleting the upstream
   selector, which would risk the .gsm-ci-result rows that legitimately share
   that rule group. */
.gsm-checkin-result {
  cursor: default;
  padding: 20px 18px;
  border-bottom: none;
}
.gsm-checkin-result:hover { background: transparent; }

/* Missing classes the check-in verdict markup emits. */
.gsm-cr-info { display: flex; flex-direction: column; gap: 2px; }
.gsm-checkin-dup     { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25); }
.gsm-checkin-pending { background: var(--surface-2);     border: 1px solid var(--bd); }

/* Focus rings for the auth/portal CTAs (the earlier focus pass covered
   generic controls; these carry their own classes). */
.gsm-lf-submit:focus-visible,
.gsm-reg-submit:focus-visible,
.gsm-reset-btn:focus-visible,
.gsm-portal-submit-btn:focus-visible,
.gsm-sub-submit:focus-visible,
.gsm-ma-input:focus-visible {
  outline: 2px solid var(--red-lt) !important;
  outline-offset: 2px !important;
}