/* رادار فروش — استایل دموی عمومی (فرانت‌اند) */

.arsh-demo.arsh-wrap {
	margin: 24px auto;
	max-width: 1160px;
	padding: 0 12px;
	box-sizing: border-box;
}
.arsh-demo * { box-sizing: border-box; }

/* هیرو/بنر */
.arsh-demo__hero {
	background: linear-gradient(135deg, #2a78d6, #4a3aa7);
	color: #fff;
	border-radius: 18px;
	padding: 28px 26px;
	margin-bottom: 20px;
	text-align: center;
}
.arsh-demo__badge {
	display: inline-block;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.arsh-demo__hero h2 {
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 8px;
	line-height: 1.5;
}
.arsh-demo__hero p {
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
	margin: 0;
	line-height: 2;
}

/* تب‌های بخش */
.arsh-demo__sections {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.arsh-demo__sec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1px solid rgba(11, 11, 11, .1);
	background: #fff;
	color: #444;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
}
.arsh-demo__sec:hover { border-color: #2a78d6; color: #2a78d6; }
.arsh-demo__sec.is-active { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.arsh-demo__sec .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* دوره */
.arsh-demo__periods { margin: 0 0 18px; }
.arsh-demo__periods .arsh-tab { cursor: pointer; }

/* پنل‌های بخش */
.arsh-demo__panel { display: none; }
.arsh-demo__panel.is-active { display: block; animation: arsh-fade .25s ease; }

@keyframes arsh-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* در فرانت‌اند مطمئن شویم کارت‌ها و پنل‌ها ظاهر درستی دارند */
.arsh-demo .arsh-cards { margin-bottom: 16px; }
.arsh-demo .button {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 8px;
	border: 1px solid #2a78d6;
	background: #2a78d6;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
}
.arsh-demo .button:hover { opacity: .92; }

@media (max-width: 600px) {
	.arsh-demo__hero h2 { font-size: 19px; }
	.arsh-demo__sec { flex: 1 1 auto; justify-content: center; }
}

/* حالت تیره */
@media (prefers-color-scheme: dark) {
	.arsh-demo__sec { background: #26262a; border-color: rgba(255, 255, 255, .1); color: #ccc; }
}