/**
 * AlbaSport — Front-end CSS.
 *
 * @package AlbaSport
 * @since   15.0.0
 */

/* Custom properties (تُضبط من الإعدادات عبر wp_head). */
body {
	--asp-fxtr-color: #ed1b24;
	--asp-sldr-color: #0277bd;
	--asp-bg-light:   #fff;
	--asp-bg-dark:    #19232d;
	--asp-text-light: #333;
	--asp-text-dark:  #fff;
	--asp-border-light: #eee;
	--asp-border-dark: rgba(255,255,255,0.05);
}

/* خط AlbaSport — fallback لخط عربي قياسي. */
.asp-font {
	font-family: "Cairo", "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
}

/* layout helpers */
.asp-d-flex { display: flex; }
.asp-w-100 { width: 100%; }
.asp-txt-center { text-align: center; }
.asp-relative { position: relative; }
.asp-align-center { align-items: center; }
.clear { clear: both; }

/* ============================================================
   Matches Table (AlbaSportFixture)
   ============================================================ */
.AlbaSportFixture {
	background: var(--asp-bg-light);
	color: var(--asp-text-light);
	border: 1px solid var(--asp-border-light);
	border-radius: 8px;
	overflow: hidden;
	margin: 16px 0;
	direction: rtl;
}
.AlbaSportFixture.aspwp_dark_style {
	background: var(--asp-bg-dark);
	color: var(--asp-text-dark);
	border-color: var(--asp-border-dark);
}

.AlbaSportFixture .AF_Title {
	padding: 10px 14px;
	background: var(--asp-bg-light);
	border-bottom: 1px solid var(--asp-border-light);
	justify-content: space-between;
}
.AlbaSportFixture.aspwp_dark_style .AF_Title {
	background: #1f2937;
	border-bottom-color: var(--asp-border-dark);
}
.AlbaSportFixture .AF_Title .asp-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--asp-fxtr-color);
}
.AlbaSportFixture .AF_Timezone select {
	padding: 6px 10px;
	border-radius: 4px;
	border: 1px solid var(--asp-border-light);
	background: #fff;
	color: #333;
	font-size: 13px;
}

.AlbaSportFixture .AF_Filters {
	display: flex;
	margin: 0;
	border-bottom: 1px solid var(--asp-border-light);
}
.AlbaSportFixture.aspwp_dark_style .AF_Filters { border-bottom-color: var(--asp-border-dark); }

.AlbaSportFixture .AF_Filters .tablinks {
	flex: 1;
	padding: 12px;
	text-align: center;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	border: none;
	background: transparent;
	color: inherit;
	transition: background 0.2s, color 0.2s;
	border-bottom: 3px solid transparent;
}
.AlbaSportFixture .AF_Filters .tablinks:hover {
	background: rgba(0,0,0,0.04);
}
.AlbaSportFixture.aspwp_dark_style .AF_Filters .tablinks:hover {
	background: rgba(255,255,255,0.06);
}
.AlbaSportFixture .AF_Filters .tablinks.active {
	color: var(--asp-fxtr-color);
	border-bottom-color: var(--asp-fxtr-color);
	background: rgba(237,27,36,0.04);
}

.AlbaSportFixture .AF_Contents { padding: 8px; }
.AlbaSportFixture .AF_TabCon { display: none; }
.AlbaSportFixture .AF_TabCon.active { display: block; }

.AlbaSportFixture .AF_Match {
	display: block;
	padding: 10px;
	border-bottom: 1px solid var(--asp-border-light);
	transition: background 0.15s;
}
.AlbaSportFixture.aspwp_dark_style .AF_Match { border-bottom-color: var(--asp-border-dark); }
.AlbaSportFixture .AF_Match:last-child { border-bottom: none; }
.AlbaSportFixture .AF_Match:hover { background: rgba(0,0,0,0.02); }
.AlbaSportFixture.aspwp_dark_style .AF_Match:hover { background: rgba(255,255,255,0.03); }

.AlbaSportFixture .AF_inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 8px;
}
.AlbaSportFixture .AF_Team {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.AlbaSportFixture .AF_TeamLogo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.AlbaSportFixture .AF_TeamLogo img {
	max-width: 64px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.AlbaSportFixture .AF_TeamName {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}

.AlbaSportFixture .AF_Data {
	flex: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.AlbaSportFixture .AF_EventResult {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.AlbaSportFixture .AF_EventResult .result {
	font-size: 22px;
	font-weight: 700;
	min-width: 24px;
	text-align: center;
	color: var(--asp-fxtr-color);
}
.AlbaSportFixture .AF_EvTime {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 4px;
}
.AlbaSportFixture .asp-city {
	font-size: 10px;
	color: #888;
	margin-bottom: 2px;
}
.AlbaSportFixture.aspwp_dark_style .asp-city { color: #aaa; }
.AlbaSportFixture .AF_EvStat {
	display: flex;
	justify-content: center;
}
.AlbaSportFixture .AF_StaText {
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 12px;
	background: #888;
	color: #fff;
	text-transform: uppercase;
}
.AlbaSportFixture .AF_StaText.live-blink {
	background: var(--asp-fxtr-color);
	animation: asp-pulse 1.5s infinite;
}
@keyframes asp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
.AlbaSportFixture .AF_StaText[data-status="2"] { background: #ff9800; } /* coming-soon */
.AlbaSportFixture .AF_StaText[data-status="5"] { background: #555; } /* ended */

.AlbaSportFixture .AF_Footer {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--asp-border-light);
}
.AlbaSportFixture.aspwp_dark_style .AF_Footer { border-top-color: var(--asp-border-dark); }
.AlbaSportFixture .AF_EvInfo {
	display: flex;
	gap: 14px;
	font-size: 11px;
	color: #777;
	flex-wrap: wrap;
}
.AlbaSportFixture.aspwp_dark_style .AF_EvInfo { color: #aaa; }
.AlbaSportFixture .AF_EvInfo .albaicon {
	display: inline-block;
	width: 12px;
	height: 12px;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-inline-end: 4px;
}

/* Small variant */
.AlbaSportFixture.small .AF_TeamLogo img { max-width: 40px; max-height: 40px; }
.AlbaSportFixture.small .AF_TeamName { font-size: 11px; }
.AlbaSportFixture.small .AF_EvTime { font-size: 14px; }
.AlbaSportFixture.small .AF_EventResult .result { font-size: 16px; }
.AlbaSportFixture.small .AF_EvInfo { font-size: 10px; }

/* ============================================================
   Matches Slider (AspTopSliderMatch)
   ============================================================ */
.AspTopSliderMatch {
	background: var(--asp-bg-light);
	color: var(--asp-text-light);
	border: 1px solid var(--asp-border-light);
	border-radius: 8px;
	overflow: hidden;
	margin: 16px 0;
	direction: rtl;
}
.AspTopSliderMatch.aspwp_dark_style {
	background: var(--asp-bg-dark);
	color: var(--asp-text-dark);
	border-color: var(--asp-border-dark);
}
.AspTopSliderMatch .asp-filter-day {
	display: flex;
	background: var(--asp-bg-light);
	border-bottom: 1px solid var(--asp-border-light);
}
.AspTopSliderMatch.aspwp_dark_style .asp-filter-day { background: #1f2937; border-bottom-color: var(--asp-border-dark); }
.AspTopSliderMatch .asp-filter-day .gotoDay {
	flex: 1;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	border-bottom: 3px solid transparent;
	transition: all 0.2s;
}
.AspTopSliderMatch .asp-filter-day .gotoDay:hover {
	background: rgba(0,0,0,0.04);
}
.AspTopSliderMatch .asp-filter-day .gotoDay.active {
	color: var(--asp-sldr-color);
	border-bottom-color: var(--asp-sldr-color);
}
.AspTopSliderMatch .AspSliderInner {
	position: relative;
	padding: 14px;
}
.AspTopSliderMatch .AspMatchSlider {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 6px;
}
.AspTopSliderMatch .AspMatchItem {
	flex: 0 0 220px;
	background: #f7f7f7;
	border: 1px solid var(--asp-border-light);
	border-radius: 6px;
	padding: 10px;
	display: block;
}
.AspTopSliderMatch.aspwp_dark_style .AspMatchItem {
	background: #202a34;
	border-color: var(--asp-border-dark);
}
.AspTopSliderMatch .AspMatchItem .leaguName {
	font-size: 11px;
	color: #888;
	margin-bottom: 6px;
	text-align: center;
	font-weight: 600;
}
.AspTopSliderMatch .AspMatchItem .teamA,
.AspTopSliderMatch .AspMatchItem .teamB {
	display: flex;
	align-items: center;
	gap: 6px;
}
.AspTopSliderMatch .AspMatchItem .teamA { flex-direction: row; }
.AspTopSliderMatch .AspMatchItem .teamB { flex-direction: row-reverse; }
.AspTopSliderMatch .AspMatchItem .teamA img,
.AspTopSliderMatch .AspMatchItem .teamB img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.AspTopSliderMatch .AspMatchItem .teamA span,
.AspTopSliderMatch .AspMatchItem .teamB span {
	font-size: 12px;
	font-weight: 600;
}
.AspTopSliderMatch .AspMatchItem .resultDiv {
	text-align: center;
	margin: 8px 0;
}
.AspTopSliderMatch .AspMatchItem .matchResult {
	font-size: 16px;
	font-weight: 700;
	display: flex;
	justify-content: center;
	gap: 6px;
	color: var(--asp-sldr-color);
}
.AspTopSliderMatch .AspMatchItem .matchStatus {
	font-size: 10px;
	margin-top: 4px;
}
.AspTopSliderMatch .AspMatchItem .matchStatus .asps-status.live {
	color: var(--asp-fxtr-color);
	font-weight: 700;
	animation: asp-pulse 1.5s infinite;
}

.AspTopSliderMatch .lSAction {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}
.AspTopSliderMatch .lSAction a {
	pointer-events: auto;
	background: rgba(255,255,255,0.85);
	color: var(--asp-sldr-color);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	cursor: pointer;
}
.AspTopSliderMatch .lSAction a svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ============================================================
   Match Card
   ============================================================ */
.AlbaMatchCard {
	background: var(--asp-bg-light);
	color: var(--asp-text-light);
	border: 1px solid var(--asp-border-light);
	border-radius: 8px;
	padding: 14px;
	margin: 14px auto;
	max-width: 600px;
	direction: rtl;
}
.AlbaMatchCard.asp-card-dark {
	background: var(--asp-bg-dark);
	color: var(--asp-text-dark);
	border-color: var(--asp-border-dark);
}
.AlbaMatchCard .asp-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--asp-border-light);
}
.AlbaMatchCard .asp-card-league {
	font-size: 12px;
	font-weight: 600;
	color: var(--asp-fxtr-color);
}
.AlbaMatchCard .asp-card-status {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 12px;
	background: #888;
	color: #fff;
}
.AlbaMatchCard .asp-card-status.asp-status-1 { background: var(--asp-fxtr-color); animation: asp-pulse 1.5s infinite; }
.AlbaMatchCard .asp-card-status.asp-status-2 { background: #ff9800; }
.AlbaMatchCard .asp-card-status.asp-status-5 { background: #555; }

.AlbaMatchCard .asp-card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.AlbaMatchCard .asp-card-team {
	flex: 1;
	text-align: center;
}
.AlbaMatchCard .asp-card-logo {
	max-width: 80px;
	max-height: 80px;
	object-fit: contain;
	margin: 0 auto 8px;
	display: block;
}
.AlbaMatchCard .asp-card-name {
	font-size: 13px;
	font-weight: 700;
}
.AlbaMatchCard .asp-card-result {
	text-align: center;
}
.AlbaMatchCard .asp-card-score {
	font-size: 24px;
	font-weight: 800;
	color: var(--asp-fxtr-color);
}
.AlbaMatchCard .asp-card-score .asp-score-sep {
	margin: 0 8px;
	color: #888;
}
.AlbaMatchCard .asp-card-time {
	font-size: 14px;
	margin-top: 4px;
	font-weight: 600;
}
.AlbaMatchCard .asp-card-penalty {
	font-size: 11px;
	margin-top: 4px;
	color: #888;
}
.AlbaMatchCard .asp-card-footer {
	display: flex;
	gap: 14px;
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px dashed var(--asp-border-light);
	font-size: 11px;
	color: #777;
}
.AlbaMatchCard .asp-card-link {
	display: block;
	margin-top: 12px;
	text-align: center;
	padding: 10px;
	background: var(--asp-fxtr-color);
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 700;
	transition: opacity 0.2s;
}
.AlbaMatchCard .asp-card-link:hover { opacity: 0.85; }

/* ============================================================
   Live Streaming Servers
   ============================================================ */
.AlbaServersList {
	margin: 16px 0;
	direction: rtl;
}
.AlbaServersList .asp-servers-header h3 {
	margin: 0 0 10px 0;
	font-size: 16px;
	font-weight: 700;
}
.AlbaServersList .asp-servers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}
.AlbaServersList .asp-server-button {
	width: 100%;
	padding: 10px;
	background: #f7f7f7;
	border: 1px solid var(--asp-border-light);
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	transition: all 0.15s;
}
.AlbaServersList .asp-server-button:hover {
	background: var(--asp-fxtr-color);
	color: #fff;
	border-color: var(--asp-fxtr-color);
}
.AlbaServersList .asp-server-button.active {
	background: var(--asp-fxtr-color);
	color: #fff;
	border-color: var(--asp-fxtr-color);
}
.AlbaServersList .asp-server-content {
	grid-column: 1 / -1;
	background: #fff;
	border: 1px solid var(--asp-border-light);
	border-radius: 6px;
	padding: 14px;
	min-height: 200px;
}
.AlbaServersList .asp-server-content.hidden { display: none; }
.AlbaServersList .asp-server-content iframe {
	width: 100%;
	min-height: 400px;
	border: 0;
}

/* ============================================================
   Live Now (AlbaLiveList)
   ============================================================ */
.AlbaLiveList {
	margin: 16px 0;
	direction: rtl;
}
.AlbaLiveList .asp-live-header h3 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}
.AlbaLiveList .asp-live-pulse {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--asp-fxtr-color);
	animation: asp-pulse 1.5s infinite;
}
.AlbaLiveList .asp-live-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
}
.AlbaLiveList .asp-live-item a {
	display: block;
	padding: 10px;
	background: var(--asp-bg-light);
	border: 1px solid var(--asp-border-light);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	transition: all 0.15s;
}
.AlbaLiveList .asp-live-item a:hover {
	border-color: var(--asp-fxtr-color);
	transform: translateY(-1px);
}
.AlbaLiveList .asp-live-teams {
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
}
.AlbaLiveList .asp-live-team-home,
.AlbaLiveList .asp-live-team-away {
	display: flex;
	align-items: center;
	gap: 4px;
}
.AlbaLiveList .asp-live-team-home img,
.AlbaLiveList .asp-live-team-away img {
	border-radius: 4px;
}
.AlbaLiveList .asp-live-score {
	font-weight: 800;
	color: var(--asp-fxtr-color);
}
.AlbaLiveList .asp-live-competition {
	font-size: 10px;
	color: #888;
	text-align: center;
	margin-top: 4px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
	.AlbaSportFixture .AF_inner { flex-direction: column; }
	.AlbaSportFixture .AF_Data { margin: 8px 0; }
	.AlbaSportFixture.small .AF_TeamLogo img { max-width: 32px; max-height: 32px; }
	.AlbaMatchCard .asp-card-logo { max-width: 60px; max-height: 60px; }
	.AlbaMatchCard .asp-card-score { font-size: 20px; }
	.AspTopSliderMatch .AspMatchItem { flex: 0 0 180px; }
}

/* ============================================================
   LTR support (English sites)
   ============================================================ */
html[dir="ltr"] .AlbaSportFixture,
html[dir="ltr"] .AspTopSliderMatch,
html[dir="ltr"] .AlbaMatchCard,
html[dir="ltr"] .AlbaServersList,
html[dir="ltr"] .AlbaLiveList {
	direction: ltr;
}

/* ============================================================
   AMP-compatible CSS (no JavaScript required for basic display)
   ============================================================ */
.AlbaSportFixture .AF_TabCon.active { display: block !important; }

/* ============================================================
   League Standings (AlbaStandings)
   ============================================================ */
.AlbaStandings {
	background: var(--asp-bg-light);
	color: var(--asp-text-light);
	border: 1px solid var(--asp-border-light);
	border-radius: 8px;
	padding: 14px;
	margin: 16px 0;
	direction: rtl;
	overflow-x: auto;
}
.AlbaStandings.asp-standings-dark {
	background: var(--asp-bg-dark);
	color: var(--asp-text-dark);
	border-color: var(--asp-border-dark);
}
.AlbaStandings .asp-standings-title {
	margin: 0 0 10px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--asp-fxtr-color);
}
.AlbaStandings .asp-standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.AlbaStandings .asp-standings-table th,
.AlbaStandings .asp-standings-table td {
	padding: 6px 8px;
	text-align: center;
	border-bottom: 1px solid var(--asp-border-light);
}
.AlbaStandings.asp-standings-dark .asp-standings-table th,
.AlbaStandings.asp-standings-dark .asp-standings-table td {
	border-bottom-color: var(--asp-border-dark);
}
.AlbaStandings .asp-standings-table th {
	font-weight: 700;
	background: rgba(0,0,0,0.02);
}
.AlbaStandings.asp-standings-dark .asp-standings-table th {
	background: rgba(255,255,255,0.04);
}
.AlbaStandings .asp-standings-table .asp-pos {
	width: 32px;
	font-weight: 700;
	color: #888;
}
.AlbaStandings .asp-standings-table .asp-logo-col {
	width: 30px;
}
.AlbaStandings .asp-standings-table .asp-logo-col img {
	border-radius: 2px;
}
.AlbaStandings .asp-standings-table .asp-team {
	text-align: start;
	font-weight: 600;
}
.AlbaStandings .asp-standings-table .asp-team a {
	color: inherit;
	text-decoration: none;
}
.AlbaStandings .asp-standings-table .asp-team a:hover {
	color: var(--asp-fxtr-color);
}
.AlbaStandings .asp-standings-table .asp-pts {
	font-weight: 700;
	color: var(--asp-fxtr-color);
	width: 40px;
}
.AlbaStandings .asp-row.asp-pos-ucl td { background: rgba(34,139,34,0.05); }
.AlbaStandings .asp-row.asp-pos-uel td { background: rgba(255,165,0,0.05); }
.AlbaStandings .asp-row.asp-pos-releg td { background: rgba(220,20,60,0.05); }

/* ============================================================
   Match Preview Metabox
   ============================================================ */
.aspwp-preview-metabox .form-table th {
	width: 180px;
	padding: 8px 10px 8px 0;
}
.aspwp-preview-metabox .form-table td {
	padding: 8px 0;
}
.aspwp-preview-metabox textarea {
	resize: vertical;
}

/* ============================================================
   Auto-Title Match Preview
   ============================================================ */
.albasport-match-preview {
	direction: rtl;
}
.albasport-match-preview strong {
	font-size: 14px;
	color: #1d2327;
}

/* ============================================================
   Players List (AlbaPlayersList)
   ============================================================ */
.AlbaPlayersList {
	background: var(--asp-bg-light);
	color: var(--asp-text-light);
	border: 1px solid var(--asp-border-light);
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
	direction: rtl;
}
.AlbaPlayersList.asp-players-dark {
	background: var(--asp-bg-dark);
	color: var(--asp-text-dark);
	border-color: var(--asp-border-dark);
}
.AlbaPlayersList .asp-players-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--asp-fxtr-color);
}
.AlbaPlayersList .asp-players-team-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.AlbaPlayersList .asp-players-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--asp-fxtr-color);
}
.AlbaPlayersList .asp-players-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}
.AlbaPlayersList .asp-player-card {
	background: #f9f9f9;
	border: 1px solid var(--asp-border-light);
	border-radius: 6px;
	padding: 12px 8px;
	text-align: center;
	transition: transform 0.15s, box-shadow 0.15s;
}
.AlbaPlayersList.asp-players-dark .asp-player-card {
	background: #2a3441;
	border-color: var(--asp-border-dark);
}
.AlbaPlayersList .asp-player-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.AlbaPlayersList .asp-player-photo-wrap {
	position: relative;
	display: inline-block;
	margin-bottom: 8px;
}
.AlbaPlayersList .asp-player-photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--asp-fxtr-color);
}
.AlbaPlayersList .asp-player-number {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--asp-fxtr-color);
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}
.AlbaPlayersList .asp-player-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.AlbaPlayersList .asp-player-name {
	font-size: 13px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	display: block;
	line-height: 1.3;
}
.AlbaPlayersList .asp-player-name:hover {
	color: var(--asp-fxtr-color);
}
.AlbaPlayersList .asp-player-position {
	font-size: 11px;
	color: #666;
	padding: 2px 8px;
	background: rgba(0,0,0,0.06);
	border-radius: 10px;
	display: inline-block;
	margin: 2px auto 0;
}
.AlbaPlayersList.asp-players-dark .asp-player-position {
	color: #aaa;
	background: rgba(255,255,255,0.08);
}
.AlbaPlayersList .asp-player-nationality {
	font-size: 10px;
	color: #888;
	margin-top: 2px;
}

/* Formation view */
.AlbaPlayersList .asp-players-formation {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 20px 0;
	background: linear-gradient(180deg, #4a8c3f 0%, #5ba84e 100%);
	border-radius: 6px;
}
.AlbaPlayersList.asp-players-dark .asp-players-formation {
	background: linear-gradient(180deg, #2d5a28 0%, #3a7035 100%);
}
.AlbaPlayersList .asp-formation-line {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.AlbaPlayersList .asp-formation-player {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.AlbaPlayersList .asp-formation-player img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
}
.AlbaPlayersList .asp-formation-number {
	background: var(--asp-fxtr-color);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 10px;
}
.AlbaPlayersList .asp-formation-name {
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	max-width: 80px;
	text-align: center;
	line-height: 1.2;
}