/**
 * Home Warning Notice Section
 *
 * Scoped CSS only for:
 * template-parts/home/home-warning-section.php
 *
 * Note:
 * - Global body, html, *, container style touch kora hoy nai.
 * - Sob color/spacing CSS variables diye control hocche.
 * - Theme Options theke inline variables set hobe.
 */

.home-warning-section-wrap {
	width: 100%;
	padding-top: var(--vss-home-warning-spacing-top, 40px);
	padding-bottom: var(--vss-home-warning-spacing-bottom, 40px);
	padding-left: 18px;
	padding-right: 18px;
}

.home-warning-section-wrap .warning-section {
	width: 100%;
	max-width: var(--vss-home-warning-max-width, 1180px);
	margin: 0 auto;
	background:
		radial-gradient(circle at top left, color-mix(in srgb, var(--vss-home-warning-accent, #f7b733) 12%, transparent), transparent 32%),
		linear-gradient(
			180deg,
			var(--vss-home-warning-card-bg, #ffffff),
			var(--vss-home-warning-card-gradient, #fbfcff)
		);
	border: 1px solid var(--vss-home-warning-border, #eceff4);
	border-radius: 26px;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	position: relative;
}

.home-warning-section-wrap .warning-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--vss-home-warning-accent, #f7b733),
		transparent
	);
}

.home-warning-section-wrap .warning-inner {
	padding: 44px var(--vss-home-warning-padding-desktop, 54px) 46px;
	text-align: center;
}

.home-warning-section-wrap .warning-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 18px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: var(--vss-home-warning-badge-bg, rgba(247, 183, 51, 0.12));
	border: 1px solid var(--vss-home-warning-badge-border, rgba(247, 183, 51, 0.28));
	color: var(--vss-home-warning-badge-text, #d99816);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

.home-warning-section-wrap .warning-badge span {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: var(--vss-home-warning-accent, #f7b733);
	box-shadow: 0 0 16px color-mix(in srgb, var(--vss-home-warning-accent, #f7b733) 90%, transparent);
}

.home-warning-section-wrap .warning-title {
	color: var(--vss-home-warning-title, #ff2d2d);
	font-size: 34px;
	line-height: 1.2;
	font-weight: 900;
	margin: 0 0 26px;
	letter-spacing: 0.4px;
}

.home-warning-section-wrap .warning-title small {
	color: var(--vss-home-warning-title, #ff2d2d);
	font-size: 28px;
	font-weight: 800;
}

.home-warning-section-wrap .warning-content {
	max-width: 900px;
	margin: 0 auto;
}

.home-warning-section-wrap .warning-content p,
.home-warning-section-wrap .warning-content-main p {
	color: var(--vss-home-warning-content, #5f6877);
	font-size: 15px;
	line-height: 1.8;
	margin: 0 0 16px;
}

.home-warning-section-wrap .warning-content-main p:last-child {
	margin-bottom: 0;
}

.home-warning-section-wrap .warning-content a,
.home-warning-section-wrap .warning-content-main a {
	color: var(--vss-home-warning-accent-dark, #d99816);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.home-warning-section-wrap .warning-content strong,
.home-warning-section-wrap .warning-content-main strong,
.home-warning-section-wrap .warning-highlight {
	display: inline-block;
	color: var(--vss-home-warning-highlight, #0b0d12);
	font-weight: 800;
}

.home-warning-section-wrap .warning-note-box {
	margin-top: 28px;
	padding: 18px 22px;
	border-radius: 18px;
	background: var(--vss-home-warning-note-bg, rgba(247, 183, 51, 0.08));
	border: 1px solid var(--vss-home-warning-note-border, rgba(247, 183, 51, 0.22));
}

.home-warning-section-wrap .warning-note-box p {
	margin: 0;
	color: var(--vss-home-warning-note-text, #0b0d12);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.home-warning-section-wrap .warning-brand {
	margin: 28px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 16px;
	background: linear-gradient(
		135deg,
		var(--vss-home-warning-primary-dark, #0b0d12),
		var(--vss-home-warning-secondary-dark, #151922)
	);
	color: var(--vss-home-warning-brand-text, #ffffff);
	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	box-shadow: 0 16px 36px rgba(11, 13, 18, 0.18);
	position: relative;
}

.home-warning-section-wrap .warning-brand::after {
	content: "";
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: var(--vss-home-warning-accent, #f7b733);
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.home-warning-section-wrap .arabic-content {
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--vss-home-warning-divider, #eceff4);
	direction: rtl;
	text-align: center;
}

.home-warning-section-wrap .arabic-content p {
	font-size: 14px;
	color: var(--vss-home-warning-arabic-text, #687181);
	line-height: 2;
	margin: 0 0 16px;
}

.home-warning-section-wrap .arabic-content p:last-child {
	margin-bottom: 0;
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.home-warning-section-wrap .warning-section {
		background:
			radial-gradient(circle at top left, rgba(247, 183, 51, 0.12), transparent 32%),
			linear-gradient(
				180deg,
				var(--vss-home-warning-card-bg, #ffffff),
				var(--vss-home-warning-card-gradient, #fbfcff)
			);
	}

	.home-warning-section-wrap .warning-badge span {
		box-shadow: 0 0 16px rgba(247, 183, 51, 0.9);
	}
}

@media (max-width: 768px) {
	.home-warning-section-wrap {
		padding-left: 14px;
		padding-right: 14px;
	}

	.home-warning-section-wrap .warning-inner {
		padding: 36px var(--vss-home-warning-padding-mobile, 22px) 38px;
	}

	.home-warning-section-wrap .warning-title {
		font-size: 28px;
		margin-bottom: 22px;
	}

	.home-warning-section-wrap .warning-title small {
		font-size: 23px;
	}

	.home-warning-section-wrap .warning-content p,
	.home-warning-section-wrap .warning-content-main p {
		font-size: 14px;
	}

	.home-warning-section-wrap .warning-brand {
		font-size: 21px;
		padding: 13px 24px;
	}

	.home-warning-section-wrap .arabic-content p {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.home-warning-section-wrap .warning-section {
		border-radius: 20px;
	}

	.home-warning-section-wrap .warning-badge {
		font-size: 12px;
		padding: 8px 14px;
	}

	.home-warning-section-wrap .warning-title {
		font-size: 25px;
	}

	.home-warning-section-wrap .warning-title small {
		display: inline-block;
		font-size: 21px;
		margin-top: 4px;
	}

	.home-warning-section-wrap .warning-note-box {
		padding: 16px 18px;
	}

	.home-warning-section-wrap .warning-brand {
		width: 100%;
		max-width: 280px;
		font-size: 19px;
	}
}