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

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

/* هیرو/بنر */
.radepa-demo__hero {
	background: linear-gradient(135deg, #229ED9, #168AC0);
	color: #fff;
	border-radius: 18px;
	padding: 28px 26px;
	margin-bottom: 20px;
	text-align: center;
}
.radepa-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;
}
.radepa-demo__hero h2 {
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 8px;
	line-height: 1.5;
}
.radepa-demo__hero p {
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
	margin: 0;
	line-height: 2;
}

/* تب‌های بخش */
.radepa-demo__sections {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.radepa-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;
}
.radepa-demo__sec:hover { border-color: #229ED9; color: #229ED9; }
.radepa-demo__sec.is-active { background: #229ED9; border-color: #229ED9; color: #fff; }
.radepa-demo__sec .dashicons { font-size: 18px; width: 18px; height: 18px; }

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

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

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

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

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

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


/* هویت بصری اختصاصی دمو: آبی تلگرامی + نارنجی */
.radepa-demo.radepa-wrap {
	--radepa-blue: #229ED9;
	--radepa-orange: #F59E0B;
	--radepa-aqua: #168AC0;
	--radepa-yellow: #FFB547;
	--radepa-ink: #172033;
	--radepa-muted: #6B7280;
	--radepa-surface: #FFFFFF;
	--radepa-plane: #F5FAFD;
	--radepa-border: rgba(34, 158, 217, .14);
}
.radepa-demo__hero {
	background: linear-gradient(135deg, #229ED9 0%, #168AC0 62%, #F59E0B 100%);
	box-shadow: 0 16px 42px rgba(34, 158, 217, .18);
}
.radepa-demo .radepa-card,
.radepa-demo .radepa-panel {
	border-color: rgba(34, 158, 217, .14);
}
.radepa-demo .radepa-card--leads .radepa-card__icon,
.radepa-demo .radepa-card--today .radepa-card__icon { background: #229ED9; }
.radepa-demo .radepa-card--week .radepa-card__icon { background: #168AC0; }
.radepa-demo .radepa-card--month .radepa-card__icon { background: #F59E0B; }
.radepa-demo .radepa-badge {
	background: rgba(34, 158, 217, .12);
	color: #168AC0;
}
.radepa-demo .radepa-table tbody tr:hover,
.radepa-demo .radepa-table tr:hover { background: rgba(34, 158, 217, .05); }
.radepa-demo #d-utm-copy {
	background: #F59E0B;
	border-color: #F59E0B;
	color: #fff;
}
.radepa-demo #d-utm-copy:hover {
	background: #D97706;
	border-color: #D97706;
}
.radepa-demo .radepa-utm-form input:focus,
.radepa-demo .radepa-utm-output textarea:focus {
	border-color: #229ED9;
	box-shadow: 0 0 0 2px rgba(34, 158, 217, .12);
	outline: none;
}