/**
 * WP Embed Servers — Frontend Styles
 * Designed to blend with the RetroTube dark theme.
 * All selectors are namespaced under .wp-embed-servers to avoid conflicts.
 */

/* ─── Container ──────────────────────────────────────────────────────────── */

.wp-embed-servers {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* ─── Label ──────────────────────────────────────────────────────────────── */

.wpes-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6b7280;
  margin-right: 2px;
  white-space: nowrap;
}

/* ─── Buttons row ─────────────────────────────────────────────────────────── */

.wpes-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ─── Individual server button ───────────────────────────────────────────── */

.wpes-server-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #c9d3e0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background   0.18s ease,
    border-color 0.18s ease,
    color        0.18s ease,
    transform    0.12s ease,
    box-shadow   0.18s ease;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.wpes-server-btn:hover:not(:disabled) {
  background: rgba(99, 179, 237, 0.15);
  border-color: rgba(99, 179, 237, 0.45);
  color: #90cdf4;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.wpes-server-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* ── Active / selected state ─────────────────────────────────────────────── */

.wpes-server-btn[disabled],
.wpes-server-btn.wpes-active {
  background: linear-gradient(135deg, #1a56db 0%, #3b82f6 100%);
  border-color: #2563eb;
  color: #ffffff;
  cursor: default;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.4),
    0 4px 14px rgba(59, 130, 246, 0.3);
  transform: none;
}

/* Small active dot indicator */
.wpes-server-btn.wpes-active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #7dd3fc;
  border-radius: 50%;
  margin-right: 4px;
  animation: wpesPulse 1.8s ease-in-out infinite;
}

@keyframes wpesPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Focus ring for accessibility */
.wpes-server-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* ─── Loading overlay ────────────────────────────────────────────────────── */

.wpes-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(10, 15, 25, 0.82);
  backdrop-filter: blur(3px);
  z-index: 100;
  border-radius: 4px;
  pointer-events: none;
}

.wpes-spinner {
  position: relative;
  width: 40px;
  height: 40px;
}

.wpes-spinner-ring {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: wpesRotate 0.75s linear infinite;
}

@keyframes wpesRotate {
  to { transform: rotate(360deg); }
}

.wpes-loading-text {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ─── Player loading state (iframe container) ────────────────────────────── */

.wpes-player-loading {
  position: relative;
  min-height: 80px;
}

.wpes-player-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, 0.7);
  backdrop-filter: blur(2px);
  z-index: 10;
  border-radius: 4px;
  pointer-events: none;
}

/* ─── Spinner overlay centered on the player ─────────────────────────────── */

.wpes-player-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.wpes-player-spinner-ring {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: wpesRotate 0.8s linear infinite;
}

.wpes-player-spinner-text {
  font-size: 13px;
  color: #94a3b8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Iframe inside player ───────────────────────────────────────────────── */

.responsive-player iframe.wpes-inserted-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* ─── Position variants ──────────────────────────────────────────────────── */

.wpes-position-above {
  /* When buttons are above the player — add bottom margin */
  margin-bottom: 8px;
}

.wpes-position-below {
  /* When buttons are below the player — add top margin */
  margin-top: 8px;
}

/* ─── Mobile responsiveness ──────────────────────────────────────────────── */

@media (max-width: 600px) {
  .wpes-server-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .wpes-label {
    width: 100%;
  }

  .wpes-buttons {
    width: 100%;
  }
}

/* ─── Light theme compatibility ──────────────────────────────────────────── */

/*
 * The "off" / idle server buttons default to a light-on-dark look (a faint
 * white overlay + light gray text), designed for dark video-theme sites.
 * On a light theme they need real background/border/text contrast instead.
 *
 * The active/"playing" button (.wpes-active / [disabled]) must look the
 * same — the blue gradient — in BOTH modes, so every rule below explicitly
 * excludes it with :not(.wpes-active):not([disabled]). Without that
 * exclusion, these rules and the active-state rule have equal CSS
 * specificity, and because these come later in the file they'd win the
 * cascade and flatten the active button to plain light-mode gray/white —
 * which is exactly the bug this fixes.
 *
 * Two triggers are covered:
 *  1. [data-theme="light"] — the mechanism themes like UltimateTube/Tube use
 *     for their own manual light/dark toggle (stored in localStorage), which
 *     is independent of the visitor's OS setting. This is the one that
 *     matters for that theme's own toggle button.
 *  2. prefers-color-scheme: light — a fallback for sites with no such
 *     attribute at all (no toggle, following the OS setting only). Guarded
 *     with :not([data-theme]) so it never fights a theme that has
 *     explicitly set data-theme="dark".
 */

[data-theme="light"] .wpes-server-btn:not(.wpes-active):not([disabled]) {
  color: #374151;
  background: #eef1f5;
  border-color: #d0d5dd;
}

[data-theme="light"] .wpes-server-btn:not(.wpes-active):not([disabled]):hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.45);
  color: #1d4ed8;
}

[data-theme="light"] .wpes-label {
  color: #5b6472;
}

/* Outline variant: idle background stays transparent by design, so on a
   light page it needs its own visible border/text rather than relying on
   the base fix above (which sets a background this variant deliberately
   omits). Active state excluded for the same reason as above. */
[data-theme="light"] .wpes-style-outline .wpes-server-btn:not(.wpes-active):not([disabled]) {
  border-color: #c4cad3;
  color: #374151;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .wpes-server-btn:not(.wpes-active):not([disabled]) {
    color: #374151;
    background: #eef1f5;
    border-color: #d0d5dd;
  }

  :root:not([data-theme]) .wpes-server-btn:not(.wpes-active):not([disabled]):hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
  }

  :root:not([data-theme]) .wpes-label {
    color: #5b6472;
  }

  :root:not([data-theme]) .wpes-style-outline .wpes-server-btn:not(.wpes-active):not([disabled]) {
    border-color: #c4cad3;
    color: #374151;
  }
}

/* ─── Fade-in animation for switcher ─────────────────────────────────────── */

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

.wp-embed-servers {
  animation: wpesFadeIn 0.3s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Button style variants — selectable in Settings → Embed Servers → Appearance.
   Each variant is scoped under .wpes-style-{key} on the switcher container and
   only overrides idle / hover / active treatment of .wpes-server-btn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Pill — fully rounded, roomier padding ──────────────────────────────── */

.wpes-style-pill .wpes-server-btn {
  border-radius: 999px;
  padding: 7px 18px;
}

/* ─── Solid — flat single-color fill, no gradient/glow ───────────────────── */

.wpes-style-solid .wpes-server-btn[disabled],
.wpes-style-solid .wpes-server-btn.wpes-active {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: none;
}

.wpes-style-solid .wpes-server-btn.wpes-active::before {
  animation: none;
  background: #ffffff;
}

/* ─── Outline — transparent idle, outlined + tinted active ───────────────── */

.wpes-style-outline .wpes-server-btn {
  background: transparent;
}

.wpes-style-outline .wpes-server-btn[disabled],
.wpes-style-outline .wpes-server-btn.wpes-active {
  background: rgba(59, 130, 246, 0.12);
  border: 1.5px solid #3b82f6;
  color: #93c5fd;
  box-shadow: none;
}

/* ─── Minimal — text only, underline indicator on active ─────────────────── */

.wpes-style-minimal .wpes-server-btn {
  background: transparent;
  border-color: transparent;
  padding: 6px 10px;
}

.wpes-style-minimal .wpes-server-btn:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #90cdf4;
  transform: none;
  box-shadow: none;
}

.wpes-style-minimal .wpes-server-btn[disabled],
.wpes-style-minimal .wpes-server-btn.wpes-active {
  background: transparent;
  border-color: transparent;
  color: #60a5fa;
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 #3b82f6;
}

.wpes-style-minimal .wpes-server-btn.wpes-active::before {
  display: none;
}

/* ─── Neon — glowing retro-arcade border ──────────────────────────────────── */

.wpes-style-neon .wpes-server-btn {
  background: #0b1220;
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

.wpes-style-neon .wpes-server-btn:hover:not(:disabled) {
  background: #0b1220;
  border-color: #38bdf8;
  color: #bae6fd;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.wpes-style-neon .wpes-server-btn[disabled],
.wpes-style-neon .wpes-server-btn.wpes-active {
  background: #0b1220;
  border-color: #38bdf8;
  color: #e0f2fe;
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.6),
    0 0 20px rgba(56, 189, 248, 0.3);
}

.wpes-style-neon .wpes-server-btn.wpes-active::before {
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

/* ─── Style-picker preview swatches (Settings page) ──────────────────────── */

.wpes-style-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  max-width: 720px;
}

.wpes-style-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.wpes-style-option input[type="radio"] {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  z-index: 1;
}

.wpes-style-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wpes-style-option input[type="radio"]:checked ~ .wpes-style-card,
.wpes-style-card.wpes-style-card-checked {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.wpes-style-option:hover .wpes-style-card {
  border-color: #93c5fd;
}

.wpes-style-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  background: #0f1a26;
  border-radius: 6px;
  animation: none;
}

.wpes-style-preview .wpes-buttons {
  pointer-events: none;
}

.wpes-style-preview .wpes-server-btn {
  font-size: 12px;
  padding: 5px 12px;
}

.wpes-style-name {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-align: center;
}