.milan-schedule-box {
	width: 100% !important;
	max-width: 100% !important;
	background: #181b22;
	border: 1px solid #262a34;
	border-radius: 14px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Vazirmatn, Arial, sans-serif;
	direction: rtl;
	box-sizing: border-box;
}

.milan-schedule-box * { box-sizing: border-box; }
.milan-schedule-header {
	background: #1e222b;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid #262a34;
}
.milan-schedule-logo {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: linear-gradient(160deg, #c8202f, #7a0f1a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	color: #fff;
	box-shadow: 0 0 0 1px #3a1418;
	flex-shrink: 0;
}
.milan-schedule-title { color: #e8eaf0; font-size: 15px; font-weight: 600; }
.milan-schedule-subtitle { color: #7d8296; font-size: 11px; margin-top: 2px; }
.milan-schedule-rows { display: flex; flex-direction: column; width: 100%; }
.milan-row {
	display: grid;
	/* قبلا اینجا minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) بود.
	   چون هر سطر یک گرید مستقل است، مقادیر fr عرض هر ستون را بر اساس
	   محتوای همان سطر محاسبه می‌کنند؛ سطر بازی بعدی چون فونتش
	   بزرگ‌تر/بولدتر است و اسم تیم‌ها هم می‌تواند بلندتر باشد،
	   عرض واقعی ستون‌هایش با بقیه سطرها فرق می‌کرد و ناهم‌تراز
	   می‌شد. با درصد ثابت (همان نسبت قبلی 1 : 1.4 : 1) عرض ستون‌ها
	   دیگر به محتوای هر سطر وابسته نیست و در همه سطرها یکسان می‌ماند. */
	grid-template-columns: 29.412% 41.176% 29.412%;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid #262a34;
	width: 100%;
}
.milan-row:last-child { border-bottom: none; }
.milan-col-time { font-size: 13px; color: #9096a8; font-weight: 500; }
/* قبلا این ستون display:flex + justify-content:center بود، یعنی کل مجموعه‌ی
   «تیم میزبان + آیکون + تیم مهمان» به‌عنوان یک بلوک واحد وسط‌چین می‌شد. چون
   طول اسم میزبان و مهمان معمولا با هم فرق دارد، آیکون وسط داخل آن بلوک از
   مرکز واقعی ستون خارج می‌شد و بسته به بازی، به چپ یا راست کج می‌شد؛ همین
   باعث می‌شد سطر به سطر، آیکون (و در نتیجه کل ظاهر ردیف) هم‌تراز به‌نظر نرسد،
   حتی وقتی خود جعبه‌ی ستون (بالا) کاملا هم‌اندازه بود. با گرید سه‌ستونه‌ی زیر
   (میزبان | آیکون | مهمان) آیکون همیشه دقیقا وسط ستون می‌ماند، مستقل از طول
   اسم هر تیم، چون میزبان به لبه‌ی داخلی نیمه‌ی خودش و مهمان هم به لبه‌ی
   داخلی نیمه‌ی خودش می‌چسبد و فقط اندازه‌ی متن آن‌ها به سمت بیرون رشد می‌کند. */
.milan-col-teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #e8eaf0;
	font-weight: 500;
}
.milan-col-teams span:first-child {
	justify-self: end;
	text-align: end;
	min-width: 0;
	overflow-wrap: break-word;
}
.milan-col-teams span:last-child {
	justify-self: start;
	text-align: start;
	min-width: 0;
	overflow-wrap: break-word;
}
.milan-swords { color: #c8202f; flex-shrink: 0; justify-self: center; }
.milan-col-status { display: flex; justify-content: flex-end; }
.milan-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
}
.milan-badge-finished { background: #242835; color: #8fd6b0; }
.milan-badge-live { background: #2e2530; color: #d99b7a; }
.milan-badge-upcoming { background: #242835; color: #7d8296; }
.milan-schedule-empty { padding: 20px; color: #9096a8; font-size: 13px; text-align: center; }

.milan-row-next {
	position: relative;
	background: linear-gradient(90deg, rgba(200,32,47,0.14), rgba(200,32,47,0.02));
	box-shadow: inset 3px 0 0 0 #c8202f;
}
.milan-row-next .milan-col-time {
	font-size: 15px;
	font-weight: 700;
	color: #f0b990;
}
.milan-row-next .milan-col-teams {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
}
.milan-row-next .milan-swords { color: #ff4757; }
.milan-row-next .milan-badge-live { font-size: 12px; }

@media (max-width: 480px) {
	.milan-row {
		grid-template-columns: 1fr;
		row-gap: 6px;
		padding: 12px 14px;
	}
	.milan-col-time {
		order: 1;
		font-size: 11px;
		text-align: center;
	}
	/* روی موبایل، فیکس گرید بالا (که آیکون رو وسط ستون میخکوب می‌کند) برگردانده
	   شده به همان حالت قبلی: کل «میزبان + آیکون + مهمان» به‌صورت یک بلوک واحد
	   وسط‌چین می‌شود، دقیقا مثل قبل از فیکس. این تغییر فقط زیر 480px اثر دارد؛
	   نسخه دسکتاپ (که مشکل هم‌ترازی داشت) همچنان با گرید و آیکون وسط‌چین می‌ماند. */
	.milan-col-teams {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		order: 2;
		font-size: 12.5px;
		gap: 6px;
	}
	.milan-col-teams span:first-child,
	.milan-col-teams span:last-child {
		justify-self: auto;
		text-align: center;
		min-width: auto;
	}
	.milan-swords { justify-self: auto; }
	.milan-col-status {
		order: 3;
		justify-content: center;
	}
	.milan-row-next .milan-col-time { font-size: 13px; }
	.milan-row-next .milan-col-teams { font-size: 14.5px; }
}