/* Dooballvip Fixtures — Frontend styles (โปรแกรมบอล)
   ออกแบบให้เป็นกลาง ปรับ theme ต่อได้ง่ายผ่าน CSS variables */
.dbvip-fixtures {
	--dbvip-bg: #0f1720;
	--dbvip-card: #1a2430;
	--dbvip-card-hover: #22303f;
	--dbvip-border: #2b3846;
	--dbvip-text: #e8eef5;
	--dbvip-muted: #8fa3b8;
	--dbvip-accent: #16c60c;
	--dbvip-radius: 12px;
	color: var(--dbvip-text);
	font-family: -apple-system, "Segoe UI", "Sarabun", Tahoma, sans-serif;
	line-height: 1.4;
}

.dbvip-loading,
.dbvip-empty,
.dbvip-error {
	padding: 24px;
	text-align: center;
	color: var(--dbvip-muted);
	background: var(--dbvip-card);
	border: 1px solid var(--dbvip-border);
	border-radius: var(--dbvip-radius);
}
.dbvip-error { color: #ff7a7a; }

/* หัวลีก */
.dbvip-league { margin: 0 0 20px; }
.dbvip-league__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin-bottom: 10px;
	background: linear-gradient(90deg, var(--dbvip-card), transparent);
	border-left: 3px solid var(--dbvip-accent);
	border-radius: 6px;
	font-weight: 700;
}
.dbvip-league__logo { width: 22px; height: 22px; object-fit: contain; }
.dbvip-league__country {
	margin-left: auto;
	font-size: 12px;
	font-weight: 400;
	color: var(--dbvip-muted);
}

/* กริดการ์ด */
.dbvip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

/* การ์ดแมตช์ */
.dbvip-match {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: var(--dbvip-card);
	border: 1px solid var(--dbvip-border);
	border-radius: var(--dbvip-radius);
	transition: background .15s ease, transform .15s ease;
}
.dbvip-match:hover { background: var(--dbvip-card-hover); transform: translateY(-2px); }

.dbvip-match__time {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}
.dbvip-match__hm { font-size: 18px; font-weight: 700; }
.dbvip-match__date { font-size: 11px; color: var(--dbvip-muted); }

.dbvip-match__teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dbvip-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dbvip-team__logo {
	width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto;
}
.dbvip-team__logo--ph {
	display: inline-block; border-radius: 50%; background: var(--dbvip-border);
}
.dbvip-team__name {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-size: 14px;
}
.dbvip-match__vs { font-size: 11px; color: var(--dbvip-muted); padding-left: 30px; }

.dbvip-match__status { text-align: right; }
.dbvip-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	color: #0b0f14;
	background: var(--dbvip-accent);
	border-radius: 999px;
}

.dbvip-updated {
	margin-top: 14px;
	font-size: 11px;
	color: var(--dbvip-muted);
	text-align: right;
}

@media (max-width: 480px) {
	.dbvip-grid { grid-template-columns: 1fr; }
}