/* ======================================================
   Cuba Remixes – Top Remixes Leaderboard
   Final aligned pack-style UI
   ====================================================== */

/* WRAPPER */
.crtr-wrap {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
}

/* HEADER */
.crtr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.crtr-title h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: .2px;
}

.crtr-updated {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	opacity: .8;
}

.crtr-updated-rel {
	font-size: 11px;
	opacity: .65;
}

/* TABS (single-pack style) */
.crtr-tabs {
	display: flex;
	gap: 10px;
}

.crtr-tab {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.15);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.crtr-tab.is-active {
	border-color: rgba(255,0,0,.7);
	box-shadow: inset 0 0 0 2px rgba(255,0,0,.18);
}

/* LIST */
.crtr-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ROW */
.crtr-item {
	display: flex;
	align-items: center;
	background: #0b0b0b;
	border-radius: 14px;
	padding: 18px 22px;
	transition: background .2s ease, transform .15s ease;
}

.crtr-item:hover {
	background: #111;
	transform: translateY(-1px);
}

/* =========================
   RANK COLUMN (LOCKED)
   ========================= */
.crtr-rankline {
	flex: 0 0 96px; /* HARD WIDTH */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-right: 15px;
}

/* Rank number */
.crtr-ranknum {
	font-size: 18px;
	font-weight: 900;
	color: #ff3b3b;
	min-width: 24px;
	text-align: right;
}

/* Movement arrow */
.crtr-delta {
	font-size: 12px;
	line-height: 1;
}

.crtr-delta.up {
	color: #34c759;
}

.crtr-delta.down {
	color: #ff3b30;
}

.crtr-delta.same {
	opacity: .4;
}

/* NEW badge */
.crtr-badge-new {
	font-size: 10px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 6px;
	color: #ff3b30;
	border: 1px solid rgba(255,59,48,.7);
	letter-spacing: .5px;
	line-height: 1;
	margin-left: 5px;
}

/* Flame */
.crht-flame {
	font-size: 14px;
	filter: drop-shadow(0 0 6px rgba(255,90,0,.35));
}

/* =========================
   INFO COLUMN
   ========================= */
.crtr-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* TITLE */
.crtr-track {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .2px;
	color: #fff;
	text-decoration: none;
}

.crtr-track:hover {
	color: #ff3b3b;
}

/* META */
.crtr-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255,255,255,.7);
}

.crtr-remixer {
	font-weight: 600;
	color: rgba(255,255,255,.85);
	white-space: nowrap;
}

.crtr-bpm {
	opacity: .65;
	white-space: nowrap;
}

/* =========================
   ACTIONS
   ========================= */
.crtr-actions {
	margin-left: 16px;
	display: flex;
	align-items: center;
}

.crtr-actions a.cubaremixes.audio {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	box-shadow: none;
}

.crtr-preview-ico {
	width: 22px;
	height: 22px;
	opacity: .85;
}

.crtr-item:hover .crtr-preview-ico {
	opacity: 1;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 780px) {
	.crtr-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.crtr-rankline {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.crtr-actions {
		margin-left: 0;
		margin-top: 10px;
	}
}
/* Hide neutral / no-movement indicator completely */
.crtr-delta.same {
	display: none;
}
/* ===============================
   CURRENTLY PLAYING ROW (FORCE)
================================ */

/* Case 1: class on the row itself */
.crtr-item.is-playing-row {
	box-shadow:
		inset 0 0 0 2px rgba(255,59,48,0.8),
		0 0 18px rgba(255,59,48,0.25);
	background: #111;
}

/* Case 2: class added to audio link */
.crtr-item:has(.cubaremixes.audio.is-playing),
.crtr-item:has(.cubaremixes.audio.playing) {
	box-shadow:
		inset 0 0 0 2px rgba(255,59,48,0.8),
		0 0 18px rgba(255,59,48,0.25);
	background: #111;
}

/* Keep hover stable */
.crtr-item.is-playing-row:hover,
.crtr-item:has(.cubaremixes.audio.is-playing):hover,
.crtr-item:has(.cubaremixes.audio.playing):hover {
	background: #111;
}
/* =========================================
   TOP REMIXES TABS (24h / 7d / 30d / All time)
   Hover + Active text color
========================================= */

.crtr-tabs .crtr-tab{
	color: rgba(255,255,255,.88) !important;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* Hover */
.crtr-tabs .crtr-tab:hover{
	color: #ff3b3b !important;
	border-color: rgba(255,59,48,.75) !important;
	background: rgba(255,59,48,.08) !important;
}

/* Active */
.crtr-tabs .crtr-tab.is-active{
	color: #ffffff !important;
	border-color: rgba(255,59,48,.9) !important;
	background: rgba(255,59,48,.10) !important;
	box-shadow: 0 0 0 2px rgba(255,59,48,.18) inset !important;
}

/* Active hover (optional: keep it red-ish, not washed out) */
.crtr-tabs .crtr-tab.is-active:hover{
	color: #ffffff !important;
	background: rgba(255,59,48,.14) !important;
}
/* =========================================
   TOP REMIXES HEADER – POLISHED
========================================= */

.crtr-title h2{
	margin: 0;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: .3px;
	color: #e0e0e0;
}

/* Updated wrapper */
.crtr-updated{
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Absolute time (primary) */
.crtr-updated-abs{
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.75);
}

/* Relative time (secondary) */
.crtr-updated-rel{
	font-size: 12px;
	color: rgba(255,255,255,.45);
}

/* Optional subtle divider under header */
.crtr-head{
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	margin-bottom: 26px;
}

/* Mobile tweaks */
@media (max-width: 780px){
	.crtr-title h2{
		font-size: 26px;
	}

	.crtr-updated{
		margin-top: 6px;
	}

	.crtr-updated-abs{
		font-size: 12px;
	}

	.crtr-updated-rel{
		font-size: 11px;
	}
}