/* Force the entire Cyberland player UI to LTR and left-aligned */
.cyberland-player,
.cyberland-player * {
  direction: ltr !important;
  text-align: left !important;
}

/* Common navigation/pagination containers */
.cyberland-player .nav-links,
.cyberland-player .pagination,
.cyberland-player .page-numbers,
.cyberland-player .navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Reset floats that might cause RTL layouts */
.cyberland-player .page-numbers li,
.cyberland-player .pagination li,
.cyberland-player .nav-links > * {
  float: none;
}

/* Progress and controls alignment safety */
.cyberland-player .clp-progress,
.cyberland-player .clp-controls,
.cyberland-player .clp-toggle {
  text-align: left;
}
/* Pagination: force LTR and left alignment inside the player */
.cyberland-player .pagination,
.cyberland-player .page-numbers,
.cyberland-player .nav-links {
  direction: ltr;
  text-align: left;
}

.cyberland-player .pagination,
.cyberland-player .page-numbers {
  display: flex;
  justify-content: flex-start;
}

.cyberland-player .page-numbers li,
.cyberland-player .pagination li {
  float: none; /* in case themes float items for RTL */
}
/* Full-width container with configurable blurred background */
.cyberland-player {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cyberland-player .clp-bg {
  position: absolute;
  inset: 0;
  background: var(--clp-bg, #111827);
  opacity: var(--clp-opacity, 0.6);
  backdrop-filter: blur(var(--clp-blur, 12px));
  -webkit-backdrop-filter: blur(var(--clp-blur, 12px));
}

/* Solid overlay with seven-color equalizer-like cycle */
.cyberland-player .clp-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: var(--clp-overlay-opacity, 0);
  background: var(--clp-overlay-color, #22d3ee);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: opacity 180ms ease-in-out, transform 160ms ease-out, background-color 220ms ease;
  will-change: transform, opacity;
}

/* Slow decay when paused */
.cyberland-player .clp-overlay.clp-decay {
  transition: opacity 300ms ease-in-out, transform 1500ms ease, background-color 220ms ease;
}

/* (animation removed; JS will set background-color based on audio levels) */

.cyberland-player .clp-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "btn progress time"; /* [button | progress | timer] */
  gap: 12px;
  align-items: center;
  padding: 16px;
  color: #ffffff;
}

/* Title removed: no styles needed */

/* Explicit grid placement for LTR: [button | progress | time] */
.cyberland-player .clp-toggle { grid-area: btn; }
.cyberland-player .clp-progress { grid-area: progress; }
.cyberland-player .clp-time { grid-area: time; }

/* Hard reset to avoid theme/plugin bleed into play/pause button */
.cyberland-player .clp-toggle,
.cyberland-player .clp-toggle * {
  all: unset;
}

.cyberland-player .clp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

/* Ensure the play/pause icon is centered and scaled */
/* Normalize all icon types (SVGs, font icons, and text glyphs) */
/* Normalize icon containers inside the toggle */
.cyberland-player .clp-toggle svg,
.cyberland-player .clp-toggle i,
.cyberland-player .clp-toggle .icon,
.cyberland-player .clp-toggle .clp-icon {
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Specific adjustments for text glyph spans used for play/pause */
/* Explicit font settings to avoid theme font overrides */
/* Remove text glyph styling; use images instead */
.cyberland-player .clp-toggle .clp-icon { display: none; }

/* If using font icons, bump the font size */
.cyberland-player .clp-toggle .material-icons,
.cyberland-player .clp-toggle .fa,
.cyberland-player .clp-toggle .fas,
.cyberland-player .clp-toggle .far {
  font-size: 28px !important;
  line-height: 1 !important;
  color: #fff !important;
}

/* Fix: play icon appears vertically squished in some themes */
/* Play/Pause images: fixed 24x24 */
.cyberland-player .clp-toggle .clp-play,
.cyberland-player .clp-toggle .clp-pause {
  display: inline-block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Ensure no extra spacing for images */
.cyberland-player .clp-toggle img { margin: 0; padding: 0; }

/* Remove legacy text glyph sizing */

.cyberland-player .clp-toggle .clp-play,
.cyberland-player .clp-toggle .clp-pause {
  line-height: 1 !important;
}

/* Guard against global button styles */
.cyberland-player .clp-toggle::before,
.cyberland-player .clp-toggle::after {
  all: unset;
}

/* Prevent global transitions/shadows from themes */
.cyberland-player .clp-toggle {
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* State-related visibility for icons */
.cyberland-player .clp-play { display: block; }
.cyberland-player .clp-pause { display: none; }
.cyberland-player .clp-toggle[data-state="playing"] .clp-play { display: none; }
.cyberland-player .clp-toggle[data-state="playing"] .clp-pause { display: block; }

.cyberland-player .clp-progress {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: visible; /* allow thumb to render fully */
  position: relative;
  margin: 10px;
}

.cyberland-player .clp-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: var(--clp-progress-color, #22d3ee);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Blink the progress bar when downloading/buffering */
@keyframes clp-blink {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}

.cyberland-player.clp-loading .clp-progress-fill {
  animation: clp-blink 0.8s linear infinite;
}

.cyberland-player .clp-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--clp-progress-color, #22d3ee) 60%, transparent);
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 2; /* render above progress fill */
  transition: box-shadow 160ms ease, transform 120ms ease;
}

.cyberland-player .clp-thumb:hover {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clp-progress-color, #22d3ee) 75%, transparent), 0 4px 10px rgba(0,0,0,0.25);
  transform: translateX(-50%) scale(1.06);
}

.cyberland-player .clp-time {
  font-variant-numeric: tabular-nums;
  text-align: left; /* left-align remaining timer */
  opacity: 0.9;
  font-size: 0.9rem;
  padding: 0 10px 0 0;
}

/* RTL support: flip layout and text alignment when site is RTL */
/* Remove RTL flipping: force consistent LTR layout everywhere */
html[dir="rtl"] .cyberland-player,
html[dir="rtl"] .cyberland-player * {
  direction: ltr !important;
  text-align: left !important;
}