/* 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));
}

.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; }

.cyberland-player .clp-toggle {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0; /* avoid baseline shifts from inline text */
}

/* Ensure the play/pause icon is centered and scaled */
/* Normalize all icon types (SVGs, font icons, and text glyphs) */
.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;
}

/* Specific adjustments for text glyph spans used for play/pause */
.cyberland-player .clp-toggle .clp-icon {
  font-size: 20px; /* consistent size for both glyphs */
  line-height: 1;  /* remove font ascent/descent variance */
  vertical-align: middle;
}

/* 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;
  line-height: 1;
}

.cyberland-player .clp-progress {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.cyberland-player .clp-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: #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 rgba(34, 211, 238, 0.6);
  transform: translateX(-50%);
  pointer-events: none;
}

.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;
}