/*
 * CR Race Stats — Stylesheet
 * Dark gaming theme matching raycin.com:
 *   Background: #2a3740   Text: #f0f0f0
 *   Cyan accent: #00e5ff  Orange accent: #ff6b35
 *   Font: Open Sans (inherits from raycin.com)
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
	--cr-bg:         #2a3740;
	--cr-bg-dark:    #1a2730;
	--cr-bg-row:     #222e36;
	--cr-border:     rgba(0, 229, 255, 0.25);
	--cr-border-hov: rgba(0, 229, 255, 0.65);
	--cr-text:       #f0f0f0;
	--cr-muted:      #8a9ba8;
	--cr-cyan:       #00e5ff;
	--cr-orange:     #ff6b35;
	--cr-gold:       #ffd700;
	--cr-silver:     #c0c0c0;
	--cr-bronze:     #cd7f32;
	--cr-radius:     6px;
}

/* ── Panel ──────────────────────────────────────────────────────────────────── */
.cr-panel {
	background:    var(--cr-bg);
	border:        1px solid var(--cr-border);
	border-radius: var(--cr-radius);
	padding:       0;
	margin:        1.5em 0;
	overflow:      hidden;
	color:         var(--cr-text);
	font-family:   "Open Sans", Tahoma, Geneva, sans-serif;
	transition:    border-color 0.25s, box-shadow 0.25s;
}
.cr-panel:hover {
	border-color: var(--cr-border-hov);
	box-shadow:   0 0 14px rgba(0, 229, 255, 0.15);
}

.cr-panel-header {
	background:     var(--cr-bg-dark);
	color:          var(--cr-cyan);
	font-size:      1em;
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding:        0.65em 1em;
	border-bottom:  1px solid var(--cr-border);
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.cr-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.9em;
}
.cr-table thead tr {
	background: var(--cr-bg-dark);
}
.cr-table th {
	color:          var(--cr-muted);
	font-size:      0.75em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding:        0.6em 1em;
	text-align:     left;
	border-bottom:  1px solid var(--cr-border);
}
.cr-table td {
	padding:       0.55em 1em;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	color:         var(--cr-text);
}
.cr-table tbody tr:hover {
	background: rgba(0, 229, 255, 0.05);
}
.cr-table tbody tr:last-child td {
	border-bottom: none;
}

/* Position column */
.cr-table td.cr-pos {
	color:      var(--cr-cyan);
	font-weight: 700;
	width:      2.5em;
	text-align: center;
}

/* Time column */
.cr-table td.cr-time {
	font-family: monospace;
	color:       var(--cr-cyan);
	letter-spacing: 0.04em;
}

/* Points column */
.cr-table td.cr-pts {
	color:       var(--cr-orange);
	font-weight: 700;
}

/* Podium row colours */
.cr-table tr.cr-gold   td { border-left: 3px solid var(--cr-gold); }
.cr-table tr.cr-silver td { border-left: 3px solid var(--cr-silver); }
.cr-table tr.cr-bronze td { border-left: 3px solid var(--cr-bronze); }

/* ── Track Cards (grid layout) ──────────────────────────────────────────────── */
.cr-track-cards {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:                   1em;
	padding:               1em;
}
.cr-track-card {
	background:    var(--cr-bg-dark);
	border:        1px solid var(--cr-border);
	border-radius: var(--cr-radius);
	overflow:      hidden;
	transition:    border-color 0.2s, transform 0.2s;
}
.cr-track-card:hover {
	border-color: var(--cr-cyan);
	transform:    translateY(-2px);
}
.cr-track-img {
	width:       100%;
	height:      130px;
	object-fit:  cover;
	display:     block;
}
.cr-track-no-img {
	height:          130px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       2.5em;
	background:      #111c22;
}
.cr-track-info {
	padding: 0.6em 0.8em;
}
.cr-track-name {
	font-weight:    700;
	font-size:      0.92em;
	color:          var(--cr-text);
	margin-bottom:  0.3em;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
}
.cr-track-meta {
	font-size:  0.78em;
	color:      var(--cr-muted);
	display:    flex;
	flex-wrap:  wrap;
	gap:        0.3em 0.7em;
}

/* ── Track Detail ───────────────────────────────────────────────────────────── */
.cr-track-header-img {
	width:        100%;
	max-height:   220px;
	object-fit:   cover;
	display:      block;
}
.cr-track-stats {
	display:    flex;
	flex-wrap:  wrap;
	gap:        0.4em 1.2em;
	padding:    0.7em 1em;
	font-size:  0.85em;
	color:      var(--cr-muted);
	border-bottom: 1px solid var(--cr-border);
}

/* ── Player Profile ─────────────────────────────────────────────────────────── */
.cr-player-stats {
	display:    flex;
	flex-wrap:  wrap;
	gap:        1em;
	padding:    1em;
}
.cr-stat-box {
	background:    var(--cr-bg-dark);
	border:        1px solid var(--cr-border);
	border-radius: var(--cr-radius);
	padding:       0.8em 1.5em;
	text-align:    center;
	min-width:     110px;
}
.cr-stat-value {
	font-size:    2em;
	font-weight:  700;
	color:        var(--cr-cyan);
	line-height:  1;
}
.cr-stat-label {
	font-size:  0.72em;
	color:      var(--cr-muted);
	margin-top: 0.2em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Subsection header ──────────────────────────────────────────────────────── */
.cr-subsection-header {
	color:       var(--cr-orange);
	font-size:   0.85em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding:     0.5em 1em;
	margin:      0;
	border-top:  1px solid var(--cr-border);
	border-bottom: 1px solid var(--cr-border);
	background:  var(--cr-bg-dark);
}

/* ── Map ────────────────────────────────────────────────────────────────────── */
.cr-track-map-wrap { padding: 0; }
.cr-map-container {
	width:  100%;
	height: 450px;  /* overridden by shortcode height="" attribute */
}
.cr-map-note {
	padding:   0.5em 1em;
	font-size: 0.78em;
	color:     var(--cr-muted);
	margin:    0;
}

/* ── Misc ───────────────────────────────────────────────────────────────────── */
.cr-updated {
	font-size:  0.72em;
	color:      var(--cr-muted);
	text-align: right;
	padding:    0.4em 1em;
	border-top: 1px solid rgba(255,255,255,0.05);
}
.cr-error {
	color:   var(--cr-orange);
	padding: 1em;
	margin:  0;
}
.cr-muted {
	color:   var(--cr-muted);
	padding: 0.5em 1em;
	margin:  0;
}

/* ── Tracks Full (cr_tracks_full) ───────────────────────────────────────────── */
.cr-track-cards-full {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cr-track-card-full .cr-track-img {
	height: 150px;
}
.cr-track-record {
	display:    flex;
	align-items: center;
	gap:        0.4em;
	margin-top: 0.45em;
	font-size:  0.8em;
}
.cr-track-record-label {
	color:      var(--cr-gold);
	font-size:  0.85em;
}
.cr-track-record-holder {
	color:      var(--cr-text);
	font-weight: 600;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cr-track-record-time {
	color:      var(--cr-cyan);
	font-family: monospace;
	white-space: nowrap;
}
.cr-track-updated {
	font-size: 0.72em;
	color:     var(--cr-muted);
	margin-top: 0.3em;
}

/* ── Recent Records (cr_recent_records) ─────────────────────────────────────── */
.cr-recent-records .cr-table td,
.cr-recent-records .cr-table th {
	padding: 0.45em 0.75em;
}

/* ── Search (cr_search) ──────────────────────────────────────────────────────── */
.cr-search-bar {
	padding: 0.75em 1em 0.5em;
}
.cr-search-input {
	width:         100%;
	box-sizing:    border-box;
	background:    var(--cr-bg-dark);
	border:        1px solid var(--cr-border);
	border-radius: var(--cr-radius);
	color:         var(--cr-text);
	font-size:     0.9em;
	padding:       0.5em 0.8em;
	outline:       none;
	transition:    border-color 0.2s;
	font-family:   inherit;
}
.cr-search-input:focus {
	border-color: var(--cr-cyan);
	box-shadow:   0 0 8px rgba(0,229,255,0.2);
}
.cr-search-input::placeholder {
	color: var(--cr-muted);
}

/* ── Featured Track (cr_featured_track) ─────────────────────────────────────── */
.cr-featured-track {
	border-color: rgba(0, 229, 255, 0.55);
	box-shadow:   0 0 22px rgba(0,229,255,0.18);
}
.cr-featured-banner {
	background:     linear-gradient(90deg, #00e5ff22, #00e5ff44, #00e5ff22);
	color:          var(--cr-cyan);
	font-size:      0.8em;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-align:     center;
	padding:        0.45em 1em;
	text-transform: uppercase;
	border-bottom:  1px solid var(--cr-border);
}

/* ── My Stats / Discord Login (cr_my_stats) ──────────────────────────────────── */
.cr-discord-login {
	padding: 0.5em 1em 0.5em;
}
.cr-discord-btn {
	display:         inline-flex;
	align-items:     center;
	background:      #5865F2;
	color:           #fff !important;
	text-decoration: none;
	font-weight:     700;
	font-size:       0.95em;
	padding:         0.6em 1.4em;
	border-radius:   var(--cr-radius);
	border:          none;
	cursor:          pointer;
	transition:      background 0.2s, box-shadow 0.2s;
	font-family:     inherit;
}
.cr-discord-btn:hover {
	background:  #4752C4;
	box-shadow:  0 0 12px rgba(88,101,242,0.45);
	color:       #fff !important;
}
.cr-discord-avatar {
	width:         28px;
	height:        28px;
	border-radius: 50%;
	margin-right:  0.5em;
	vertical-align: middle;
}
.cr-logout-link {
	font-size:   0.75em;
	color:       var(--cr-muted);
	margin-left: auto;
	float:       right;
	text-decoration: none;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.8;
}
.cr-logout-link:hover {
	color: var(--cr-orange);
	opacity: 1;
}
.cr-link-form input[type="text"],
.cr-link-form .cr-search-input {
	max-width: 280px;
}