/* ============================================================
   RDP Gapless Player — Stylesheet
   Themes: .rdp-theme-dark (default) | .rdp-theme-light
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */

.rdp-player-container.rdp-theme-dark {
	--rdp-bg:           #1a1a2e;
	--rdp-surface:      #16213e;
	--rdp-border:       #0f3460;
	--rdp-accent:       #e94560;
	--rdp-accent-hover: #c73652;
	--rdp-text:         #e0e0e0;
	--rdp-text-muted:   #888;
	--rdp-btn-bg:       #0f3460;
	--rdp-btn-hover:    #1a4d8c;
	--rdp-shadow:       0 4px 24px rgba(0,0,0,.45);
	--rdp-radius:       12px;
}

.rdp-player-container.rdp-theme-light {
	--rdp-bg:           #f5f7fa;
	--rdp-surface:      #ffffff;
	--rdp-border:       #d0d7e3;
	--rdp-accent:       #e94560;
	--rdp-accent-hover: #c73652;
	--rdp-text:         #1a1a2e;
	--rdp-text-muted:   #666;
	--rdp-btn-bg:       #e9ecf3;
	--rdp-btn-hover:    #d3d9e8;
	--rdp-shadow:       0 4px 24px rgba(0,0,0,.12);
	--rdp-radius:       12px;
}

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

.rdp-player-container {
	display:         flex;
	flex-direction:  column;
	align-items:     stretch;
	gap:             12px;
	background:      var(--rdp-bg);
	border:          1px solid var(--rdp-border);
	border-radius:   var(--rdp-radius);
	padding:         20px 24px;
	box-shadow:      var(--rdp-shadow);
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width:       480px;
	width:           100%;
	box-sizing:      border-box;
	margin-left:     auto;
	margin-right:    auto;
	color:           var(--rdp-text);
	/* Prevent accidental text selection on swipe/long-press gestures. */
	-webkit-user-select: none;
	user-select:         none;
}

/* ── Track info ───────────────────────────────────────────── */

.rdp-track-info {
	overflow: hidden;
}

.rdp-marquee-wrapper {
	overflow:    hidden;
	white-space: nowrap;
	position:    relative;
}

.rdp-marquee-text {
	display:        inline-block;
	font-size:      1rem;
	font-weight:    600;
	color:          var(--rdp-text);
	letter-spacing: .01em;
}

/* Marquee animation — only added via JS when text overflows */
@keyframes rdp-marquee {
	0%   { transform: translateX(0); }
	10%  { transform: translateX(0); }
	90%  { transform: translateX(-100%); }
	100% { transform: translateX(-100%); }
}

.rdp-marquee-text.rdp-animate {
	animation: rdp-marquee 12s linear infinite;
}

/* ── Controls row ─────────────────────────────────────────── */

.rdp-controls {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             12px;
}

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

.rdp-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border:          none;
	border-radius:   50%;
	background:      var(--rdp-btn-bg);
	color:           var(--rdp-text);
	cursor:          pointer;
	transition:      background .18s ease, transform .12s ease;
	flex-shrink:     0;
	padding:         0;
	/* Mobile: suppress the iOS/Android tap highlight flash and the 300 ms
	   click delay that browsers add when they cannot distinguish a tap from
	   a double-tap zoom gesture. */
	-webkit-tap-highlight-color: transparent;
	touch-action:                manipulation;
}

.rdp-btn:hover {
	background: var(--rdp-btn-hover);
	transform:  scale(1.06);
}

.rdp-btn:active {
	transform: scale(.96);
}

.rdp-btn-play {
	width:      56px;
	height:     56px;
	background: var(--rdp-accent);
	color:      #fff;
}

.rdp-btn-play:hover {
	background: var(--rdp-accent-hover);
}

/* ── Icons ────────────────────────────────────────────────── */

.rdp-icon {
	width:   20px;
	height:  20px;
	fill:    currentColor;
	stroke:  none;
	display: block;
}

.rdp-btn-play .rdp-icon {
	width:  22px;
	height: 22px;
}

/* Initially show play icon; pause hidden */
.rdp-icon-pause {
	display: none;
}

/* ── Volume ───────────────────────────────────────────────── */

.rdp-volume-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex:        0 1 120px;
	min-width:   80px;
}

.rdp-volume-wrap .rdp-icon {
	width:       18px;
	height:      18px;
	color:       var(--rdp-text-muted);
	flex-shrink: 0;
}

.rdp-volume {
	-webkit-appearance: none;
	appearance:         none;
	width:              100%;
	height:             20px;   /* flex-item height to align with icon; track styled below */
	background:         transparent;
	outline:            none;
	cursor:             pointer;
	margin:             0;
	padding:            0;
	/* Suppress the 300 ms tap delay on mobile without disabling scroll. */
	touch-action:       manipulation;
}

/* ── Volume thumb — WebKit (Chrome, Safari, iOS Safari) ─── */

.rdp-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance:         none;
	width:              22px;
	height:             22px;
	border-radius:      50%;
	background:         var(--rdp-accent);
	cursor:             pointer;
	transition:         transform .12s;
}

.rdp-volume::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

/* Track line for WebKit (required to prevent default grey track on Safari). */
.rdp-volume::-webkit-slider-runnable-track {
	height:       4px;
	border-radius: 2px;
	background:   var(--rdp-border);
}

/* ── Volume thumb & track — Firefox (including Firefox for Android) ── */

.rdp-volume::-moz-range-thumb {
	width:        22px;
	height:       22px;
	border:       none;
	border-radius: 50%;
	background:   var(--rdp-accent);
	cursor:       pointer;
}

.rdp-volume::-moz-range-track {
	height:        4px;
	border-radius: 2px;
	background:    var(--rdp-border);
}

/* ── Progress row ─────────────────────────────────────────── */

.rdp-progress-row {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.rdp-time {
	font-size:            0.7rem;
	color:                var(--rdp-text-muted);
	white-space:          nowrap;
	min-width:            2.8em;
	font-variant-numeric: tabular-nums;
}

.rdp-time-current { text-align: right; }
.rdp-time-duration { text-align: left; }

.rdp-progress-wrap {
	flex:          1;
	height:        4px;
	border-radius: 2px;
	background:    var(--rdp-border);
	cursor:        pointer;
	position:      relative;
	transition:    height .12s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action:  none;
}

.rdp-progress-wrap:hover {
	height: 6px;
}

.rdp-progress-fill {
	height:        100%;
	border-radius: 2px;
	background:    var(--rdp-accent);
	width:         0%;
	pointer-events: none;
}

/* ── Status bar ───────────────────────────────────────────── */

.rdp-status {
	font-size:      0.75rem;
	color:          var(--rdp-text-muted);
	min-height:     1em;
	text-align:     right;
	letter-spacing: .02em;
}

/* ── Filename display ─────────────────────────────────────── */

.rdp-filename {
	font-size:      0.7rem;
	color:          var(--rdp-text-muted);
	text-align:     center;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	font-family:    ui-monospace, "Cascadia Code", "Courier New", monospace;
	letter-spacing: .01em;
	padding-top:    2px;
}

/* ── Error message ────────────────────────────────────────── */

.rdp-error {
	color:        #e94560;
	font-size:    .875rem;
	padding:      8px 12px;
	border-left:  3px solid #e94560;
	background:   rgba(233,69,96,.08);
	border-radius: 4px;
	margin:       0;
}

/* ── Responsive ───────────────────────────────────────────── */

@media ( max-width: 360px ) {
	.rdp-player-container {
		padding: 14px 16px;
	}
	.rdp-btn-play {
		width:  48px;
		height: 48px;
	}
	.rdp-btn {
		width:  38px;
		height: 38px;
	}
}

/* ── Reduced motion ───────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.rdp-marquee-text.rdp-animate {
		animation: none;
	}
	.rdp-btn,
	.rdp-volume::-webkit-slider-thumb {
		transition: none;
	}
}