/* ==========================================================================
   BD Bracket — Elite Gold/Onyx theme
   طراحی بر اساس نسخه‌ی نمایشی «Elite Bracket 2026»، اما کاملاً داینامیک:
   هیچ عددی برای تعداد تیم‌ها/دورها در این فایل هاردکد نشده. کلاس‌های
   bd-size-sm/md/lg/xl فقط برای تنظیم ظرافت بصری (فونت، فاصله) بر اساس
   تعداد واقعی شرکت‌کننده‌ها اضافه می‌شوند و به منطق ساختار ربطی ندارند.
   ========================================================================== */
.bd-box-score {
	font-family: 'Primary-FontFamily'!important;
}

@media (max-width: 900px) {
	.bd-bracket-wrap {
		padding: 20px 10px;
	}

	.bd-center {
		width: 200px;
	}
	.bd-trophy {
		font-size: 34px;
	}
	.bd-round-col {
		min-width: 130px;
	}

	/* محدود کردن حداکثر ارتفاع براکت در موبایل */
	.bd-bracket-scroll-wrapper{
		max-height: 400px;
		min-height: 0 !important;
	}
	
	.bd-bracket-wrap.bd-size-xl {
	max-height: 400px;
}
}

.bd-bracket-wrap {
	--bd-gold: #D4AF37;
	--bd-gold-light: #F3E5AB;
	--bd-gold-dark: #996515;
	--bd-onyx: #0F0F0F;
	--bd-glass: rgba(20, 20, 20, 0.8);
	--bd-border: rgba(212, 175, 55, 0.35);
	--bd-gold-gradient: linear-gradient(135deg, var(--bd-gold) 0%, var(--bd-gold-light) 50%, var(--bd-gold-dark) 100%);

	direction: ltr;
	background: radial-gradient(ellipse at center, #141414 0%, var(--bd-onyx) 70%);
	border: 1px solid var(--bd-border);
	border-radius: 16px;
	padding: 40px 20px;
	overflow-x: auto;
	font-family: 'Sora', 'Primary-FontFamily', sans-serif;
	position: relative;
}

.bd-bracket-empty {
	color: var(--bd-gold, #d4af37);
	text-align: center;
	padding: 30px;
	direction: rtl;
	font-size: 15px;
}

.bd-bracket-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: max-content;
	margin: 0 auto;
}

/* ------------------------------- Zoom ------------------------------------ */

.bd-zoom-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 18px;
}

.bd-zoom-controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	background: var(--bd-glass);
	border: 1px solid var(--bd-border);
	border-radius: 6px;
	color: var(--bd-gold);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}

.bd-zoom-controls button:hover {
	background: rgba(212, 175, 55, 0.12);
	border-color: var(--bd-gold);
}

.bd-zoom-controls .bd-zoom-reset {
	font-size: 12px;
	font-weight: 600;
}

.bd-zoom-level {
	min-width: 48px;
	text-align: center;
	color: var(--bd-gold-light);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.bd-bracket-scroll-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	margin: 0 auto;
	cursor: grab;
	touch-action: none;
}

.bd-bracket-scroll-wrapper:active {
	cursor: grabbing;
}

.bd-bracket-zoom-container {
	width: max-content;
	margin: 0 auto;
}

/* ------------------------------ Sides ---------------------------------- */

.bd-side {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
}

/* آینه کردن سمت راست تا خطوط و باکس‌ها بر عکس سمت چپ به مرکز همگرا شوند */
.bd-side-right {
	transform: scaleX(-1);
}
.bd-side-right .bd-box,
.bd-side-right .bd-box-empty,
.bd-side-right .bd-round-label {
	transform: scaleX(-1);
}

.bd-round-col {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 30px; /* فاصله برای لیبل دور */
}

.bd-round-label {
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--bd-gold);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: rgba(13, 13, 13, 0.9);
	padding: 3px 10px;
	border-radius: 4px;
	border: 1px solid var(--bd-border);
	white-space: nowrap;
	z-index: 10;
}

.bd-side-right .bd-round-label {
	transform: scaleX(-1) translateX(-50%);
}

/* ------------------------------ Boxes ----------------------------------- */

.bd-box-slot {
	position: absolute;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
}

.bd-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bd-glass);
	border: 1px solid var(--bd-border);
	border-radius: 6px;
	padding: 8px 12px;
	color: #f1f1f1;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bd-side-left .bd-box:hover {
	background: rgba(212, 175, 55, 0.1);
	border-color: var(--bd-gold);
	transform: translateX(4px);
}
.bd-side-right .bd-box:hover {
	background: rgba(212, 175, 55, 0.1);
	border-color: var(--bd-gold);
	/* والد آینه شده، پس اینجا هم باید در جهت آینه حرکت کند */
}

/* نمایش تعداد گل روی کارت برنده */
.bd-box-winner .bd-box-score {
    display: inline-block;
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(247, 151, 30, 0.3);
}

/* برای براکت‌های کوچک */
.bd-size-sm .bd-box-winner .bd-box-score {
    font-size: 10px;
    padding: 1px 6px;
    min-width: 16px;
}

/* برای براکت‌های بزرگ */
.bd-size-xl .bd-box-winner .bd-box-score {
    font-size: 13px;
    padding: 3px 10px;
    min-width: 24px;
}

/* انیمیشن ظاهر شدن امتیاز */
.bd-box-winner .bd-box-score {
    animation: scorePop 0.3s ease-out;
}

@keyframes scorePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bd-box-winner {
	border-color: var(--bd-gold);
	background: linear-gradient(135deg, #2a2410, #3a3013);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
	font-weight: 600;
}

.bd-box-winner-left {
	border-color: var(--bd-gold);
background: linear-gradient(135deg, #2a2410, #3a3013);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.bd-box-winner-right {
	border-color: var(--bd-gold);
	background: linear-gradient(135deg, #2a2410, #3a3013);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.bd-box-empty {
	background: #161616;
	border: 1px dashed #444;
	color: #555;
	text-align: center;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
}

.bd-icon {
	font-size: 16px;
	line-height: 1;
	flex: none;
	filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.25));
}

.bd-box-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	text-align: start;
}

/* ---------------------------- Connectors (SVG) --------------------------- */
/* هر خط اتصال یک <svg> است که بین دو ستون قرار می‌گیرد و مسیر با گوشه‌های گرد
   و گرادیانِ طلایی رسم می‌شود — دقیقاً مثل گرافیک براکت جام جهانی.
   رنگ گرادیان با <linearGradient> درون خودِ SVG تنظیم می‌شود (در PHP). */

.bd-connector-svg {
	position: absolute;
	overflow: visible;
	pointer-events: none;
}

.bd-connector-svg path {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.55));
}

.bd-connector-dot {
	fill: var(--bd-gold);
	filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.8));
}

/* ------------------------------- Center ---------------------------------- */

.bd-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 280px;
	flex: none;
	position: relative;
	gap: 12px;
	margin: 0;
}

.bd-trophy {
	font-size: 48px;
	line-height: 1;
	filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6));
	animation: bd-trophy-pulse 2.4s ease-in-out infinite;
}

@keyframes bd-trophy-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

.bd-final-match {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.bd-final-match .bd-box {
	flex: 1;
	min-width: 0;
	justify-content: center;
}

.bd-vs {
	flex: none;
	color: var(--bd-gold);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	opacity: 0.85;
}

/* خط طلایی که از بین دو تیم فینال به سمت باکس قهرمان بالا می‌رود */
.bd-champion-link {
	width: 2px;
	height: 22px;
	margin: -4px auto;
	background: linear-gradient(to bottom, var(--bd-gold-dark), var(--bd-gold));
	box-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
	border-radius: 2px;
}

.bd-champion-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bd-gold-gradient);
	color: #1a1a1a;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
}

.bd-champion-icon {
	font-size: 18px;
}

.bd-champion-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bd-champion-crown {
	font-size: 16px;
}

/* =================== اندازه‌ها بر اساس تعداد واقعی تیم‌ها ==================
   این کلاس‌ها فقط ظرافت بصری را تنظیم می‌کنند؛ ساختار HTML برای هر تعداد
   تیم یکسان است — تنها با تعداد ستون‌ها و ارتفاع‌های متفاوت رندر می‌شود.
   ========================================================================== */

/* براکت‌های کوچک (مثلاً ۴ تا ۸ تیم): فضای بیشتر، فونت درشت‌تر */
.bd-size-sm .bd-box {
	font-size: 14px;
	padding: 10px 14px;
}
.bd-size-sm .bd-round-col {
	min-width: 200px;
}

/* اندازه متوسط (تا ۱۶ تیم) */
.bd-size-md .bd-box {
	font-size: 13px;
}

/* اندازه بزرگ (تا ۳۲ تیم): کمی فشرده‌تر تا در صفحه جا شود */
.bd-size-lg .bd-box {
	font-size: 12px;
	padding: 6px 10px;
}
.bd-size-lg .bd-round-col {
	min-width: 150px;
}
.bd-size-lg .bd-icon {
	font-size: 14px;
}

/* اندازه خیلی بزرگ (بیش از ۳۲ تیم): فشرده، برای اسکرول افقی بهینه */
.bd-size-xl .bd-box {
	font-size: 11px;
	padding: 5px 8px;
	gap: 6px;
}
.bd-size-xl .bd-round-col {
	min-width: 130px;
}
.bd-size-xl .bd-icon {
	font-size: 13px;
}
.bd-size-xl .bd-center {
	width: 220px;
}
.bd-size-xl .bd-trophy {
	font-size: 36px;
}


/* ------------------------------ Responsive -------------------------------- */

@media (max-width: 900px) {
	.bd-bracket-wrap {
		padding: 20px 10px;
		
	}
	
	.bd-center {
		width: 200px;
	}
	.bd-trophy {
		font-size: 34px;
	}
	.bd-round-col {
		min-width: 130px;
	}
}