/* ==========================================================
   باکس راهنما — استایل پایه و ریسپانسیو
   تمام رنگ‌ها و اندازه‌ها از طریق CSS Custom Properties
   (متغیرهایی که به‌صورت inline توسط PHP تزریق می‌شوند) کنترل می‌شوند.
   ========================================================== */


.ibx-box {
	--ibx-header-bg: #C8A02C;
	--ibx-header-color: #000;
	--ibx-body-bg: #FCF6D4;
	--ibx-body-color: #5c4a1a;
	--ibx-border-color: #C8A02C;
	--ibx-radius: 142px;
	--ibx-font-size: 162px;
	--ibx-shadow: 0 4px 14px rgba(0, 0, 0, .08);

	direction: rtl;
	text-align: right;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: var(--ibx-radius);
	overflow: hidden;
	box-shadow: var(--ibx-shadow);
	margin: 1.75em 0;
	font-size: var(--ibx-font-size);
	border: 1px solid color-mix(in srgb, var(--ibx-border-color) 35%, transparent);
}
.ibx-box * {
	box-sizing: border-box;
}

.ibx-box__header {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ibx-header-bg);
	color: var(--ibx-header-color);
	padding: 8px 22px;
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.5;
}

.ibx-box__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--ibx-header-color);
}

.ibx-box__icon svg {
	display: block;
}

.ibx-box__body {
	background: var(--ibx-body-bg);
	color: var(--ibx-body-color);
	padding: 20px 22px;
	line-height: 2;
}

.ibx-box__body > *:first-child {
	margin-top: 0;
}

.ibx-box__body > *:last-child {
	margin-bottom: 0;
}

.ibx-box__body a {
	color: inherit;
	text-decoration: underline;
}

.ibx-box__body ul,
.ibx-box__body ol {
	padding-inline-start: 1.4em;
	margin: 0.6em 0;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 782px) {
	.ibx-box {
		font-size: calc(var(--ibx-font-size) - 1px);
		margin: 1.4em 0;
	}
	.ibx-box__header {
		padding: 12px 16px;
	}
	.ibx-box__body {
		padding: 16px;
		line-height: 1.85;
	}
}

@media (max-width: 480px) {
	.ibx-box {
		border-radius: calc(var(--ibx-radius) * 0.75);
	}
	.ibx-box__header {
		font-size: 1em;
		padding: 10px 14px;
	}
	.ibx-box__body {
		padding: 14px;
		font-size: 0.95em;
	}
	.ibx-box__icon svg {
		width: 17px;
		height: 17px;
	}
}