/* Long/short labels: full names by default; phones swap to "Coach" / "Shop"
   ("Entrenador" / "Comprar") so the toggle never overflows. */
.ms-lbl-short { display: none; }
@media (max-width: 560px) {
  .mode-switch .mode-switch-btn span.ms-lbl-full { display: none; }
  .mode-switch .mode-switch-btn span.ms-lbl-short { display: inline; }
}

/* mode-switcher.css
   Airbnb-style Admin ⇄ Shop mode toggle. Colors are hardcoded (not host-page
   custom properties) so this one file drops cleanly into both the admin
   dashboard (white nav, --line-strong tokens) and the shopping page (dark
   nav, --line-s tokens) without a token mismatch. Values match FanFundU's
   red #E12727 / cream #F2E4B1 palette used on both surfaces. */

.mode-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  flex-shrink: 0;
}

.mode-switch-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'REM', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-radius: 999px;
  transition: color .18s ease;
  white-space: nowrap;
}
.mode-switch-btn svg { flex-shrink: 0; display: block; }

.mode-switch-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.mode-switch-thumb.is-shop { transform: translateX(100%); }

/* Light tone — white/admin nav */
.mode-switch-light {
  background: #EFE6C4;
  border: 1.5px solid rgba(36,41,53,.16);
}
.mode-switch-light .mode-switch-thumb {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(36,41,53,.16), 0 0 0 1.5px rgba(36,41,53,.08);
}
.mode-switch-light .mode-switch-btn { color: #5a6170; }
.mode-switch-light .mode-switch-btn.is-active { color: #E12727; }
.mode-switch-light .mode-switch-btn:not(.is-active):hover { color: #242935; }

/* Dark tone — dark shopping nav */
.mode-switch-dark {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.13);
}
.mode-switch-dark .mode-switch-thumb {
  background: #E12727;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.mode-switch-dark .mode-switch-btn { color: rgba(242,228,177,.55); }
.mode-switch-dark .mode-switch-btn.is-active { color: #F2E4B1; }
.mode-switch-dark .mode-switch-btn:not(.is-active):hover { color: #F2E4B1; }

@media (max-width: 1040px) {
  .mode-switch-btn span { display: none; }
  .mode-switch-btn { padding: 9px 12px; }
}
.mode-switch-compact .mode-switch-btn { padding: 9px 12px; }
.mode-switch-compact .mode-switch-btn span { display: none; }

/* ── Mode-switch confirmation toast (shared shape, tone via modifier) ── */
.ffu-mode-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(0);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: 'REM', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 28px -6px rgba(0,0,0,.35);
  animation: ffuModeToastIn .28s ease-out;
  pointer-events: none;
}
.ffu-mode-toast-dark  { background: #242935; color: #F2E4B1; }
.ffu-mode-toast-light { background: #F2E4B1; color: #242935; }
.ffu-mode-toast strong { font-weight: 800; }
.ffu-mode-toast-icon {
  width: 22px; height: 22px; border-radius: 999px;
  background: #E12727; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
@keyframes ffuModeToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}