/**
 * Simple Browser TTS – Frontend Player Styles
 *
 * Uses CSS custom properties (set via inline style from PHP)
 * for easy per-site theming.
 *
 * @package SimpleBrowserTTS
 */

/* ─── CSS Variables (defaults; overridden by PHP inline style) ──────────── */
:root {
  --sbt-bg:     #2271b1;
  --sbt-fg:     #ffffff;
  --sbt-hover:  #135e96;
  --sbt-radius: 6px;
  --sbt-fs:     14px;
}

/* ─── Wrapper ─────────────────────────────────────────────────────────────── */
.sbt-player-wrap {
  margin: 1.25em 0;
  clear: both;
}

.sbt-player {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

/* ─── Button ──────────────────────────────────────────────────────────────── */
.sbt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.1em;
  background: var(--sbt-bg);
  color: var(--sbt-fg);
  border: none;
  border-radius: var(--sbt-radius);
  font-size: var(--sbt-fs);
  font-family: inherit;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    transform 0.1s ease,
    box-shadow 0.18s ease;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}

.sbt-btn:hover,
.sbt-btn:focus-visible {
  background: var(--sbt-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sbt-btn:focus-visible {
  outline: 3px solid var(--sbt-bg);
  outline-offset: 3px;
}

.sbt-btn:active {
  transform: scale(0.97);
}

/* ─── Playing state ───────────────────────────────────────────────────────── */
.sbt-btn--playing {
  background: var(--sbt-hover);
}

.sbt-btn--playing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: sbt-shimmer 1.8s ease-in-out infinite;
}

@keyframes sbt-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── Paused state ────────────────────────────────────────────────────────── */
.sbt-btn--paused {
  opacity: 0.85;
}

/* ─── Done state ──────────────────────────────────────────────────────────── */
.sbt-btn--done {
  background: var(--sbt-hover);
  opacity: 0.9;
}

/* ─── Icon ────────────────────────────────────────────────────────────────── */
.sbt-icon {
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: middle;
  pointer-events: none;
}

/* ─── Status / Error ──────────────────────────────────────────────────────── */
.sbt-status {
  font-size: 0.85em;
  color: #cc1818;
  font-style: italic;
}

/* ─── Screen-reader only helper ───────────────────────────────────────────── */
.sbt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sbt-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── High contrast / forced-colors ──────────────────────────────────────── */
@media (forced-colors: active) {
  .sbt-btn {
    border: 2px solid ButtonText;
  }
  .sbt-btn--playing::after {
    display: none;
  }
}

/* ─── Prefers reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sbt-btn--playing::after {
    animation: none;
  }
  .sbt-btn {
    transition: none;
  }
}