/* ============================================================
   Yoga LMS — توکن‌های طراحی و استایل پایه (RTL)
   رنگ سازمانی: #0ecad1 — فلت و حرفه‌ای، بدون گرادینت تصنعی
   ============================================================ */

:root {
	/* برند */
	--yl-brand:        #0ecad1;
	--yl-brand-700:    #0aa6ac;
	--yl-brand-600:    #0bb4ba;
	--yl-brand-050:    #e6fbfb;
	--yl-brand-100:    #c9f5f5;

	/* خنثی */
	--yl-ink:          #1f2937;
	--yl-ink-soft:     #4b5563;
	--yl-muted:        #6b7280;
	--yl-line:         #e5e7eb;
	--yl-line-soft:    #f1f3f5;
	--yl-bg:           #f7f8fa;
	--yl-card:         #ffffff;

	/* وضعیت */
	--yl-success:      #16a34a;
	--yl-warning:      #f59e0b;
	--yl-danger:       #ef4444;
	--yl-star:         #f5a623;

	/* فرم */
	--yl-radius:       14px;
	--yl-radius-sm:    10px;
	--yl-radius-lg:    20px;
	--yl-shadow:       0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
	--yl-shadow-soft:  0 1px 3px rgba(16,24,40,.05);

	/* تایپوگرافی */
	--yl-font:         'Peyda', 'Vazirmatn', Tahoma, sans-serif;
	--yl-fs-sm:        13px;
	--yl-fs-base:      15px;
	--yl-fs-lg:        18px;
	--yl-fs-xl:        22px;

	/* فاصله */
	--yl-gap:          16px;
	--yl-container:    1180px;
	--yl-content:      980px;
}

html { direction: rtl; }

body.yl-front,
.yl-scope {
	font-family: var(--yl-font);
	color: var(--yl-ink);
	background: var(--yl-bg);
	font-size: var(--yl-fs-base);
	line-height: 1.85;
	font-weight: 300;
}

.yl-scope *,
.yl-scope *::before,
.yl-scope *::after { box-sizing: border-box; }

.yl-container {
	max-width: var(--yl-container);
	margin-inline: auto;
	padding-inline: 16px;
}

/* دکمه‌ها */
.yl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: var(--yl-fs-base);
	font-weight: 400;
	border: 0;
	border-radius: var(--yl-radius);
	padding: 12px 20px;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
	text-decoration: none;
}
.yl-btn:active { transform: translateY(1px); }
.yl-btn--primary { background: #CBAE82; color: #fff; }
.yl-btn--primary:hover { background: var(--yl-brand); color: #fff; }
/* دکمهٔ پرداخت و فعال‌سازی اشتراک — فیروزه‌ای می‌ماند */
.yl-btn--primary.yl-pay { background: var(--yl-brand); color: #fff; }
.yl-btn--primary.yl-pay:hover { background: var(--yl-brand-700); color: #fff; }
.yl-btn--block { width: 100%; }
.yl-btn--ghost {
	background: var(--yl-brand-050);
	color: var(--yl-brand-700);
}

/* کارت */
.yl-card {
	background: var(--yl-card);
	border: 1px solid var(--yl-line);
	border-radius: var(--yl-radius);
	box-shadow: var(--yl-shadow-soft);
}

/* بج */
.yl-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--yl-fs-sm);
	font-weight: 400;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--yl-brand-050);
	color: var(--yl-brand-700);
}

/* ستاره امتیاز */
.yl-stars { color: var(--yl-star); letter-spacing: 2px; }

/* دکمهٔ دایره‌ای فیکس تیکت (روی سینگل دوره — فاز بعد فعال می‌شود) */
.yl-fab {
	position: fixed;
	inset-inline-end: 22px;
	inset-block-end: 22px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--yl-brand);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(14,202,209,.45);
	border: 0;
	cursor: pointer;
	z-index: 9000;
}
.yl-fab:hover { background: var(--yl-brand-600); }

/* ریسپانسیو پایه */
@media (max-width: 1024px) {
	:root { --yl-container: 100%; }
}
@media (max-width: 600px) {
	.yl-fab { inset-inline-end: 14px; inset-block-end: 14px; width: 52px; height: 52px; }
}

/* ── قالب برگه (page.php) ── */
.yl-page {
	max-width: var(--yl-container);
	margin: 0 auto;
	padding: 28px 16px 56px;
}
.yl-page__wrap { max-width: var(--yl-content); margin: 0 auto; }
.yl-page--full { max-width: 1320px; }
.yl-page__title {
	font-size: var(--yl-fs-xl);
	font-weight: 400;
	color: var(--yl-ink);
	margin: 0 0 18px;
}
.yl-page__content { color: var(--yl-ink); }
.yl-page__content a { color: var(--yl-brand-700); }

/* ── لینک دکمه‌ای (سراسری فرانت) ── */
.yl-link {
	display: inline-block; background: none; border: 0;
	color: var(--yl-brand-700); cursor: pointer; font-family: inherit;
	font-size: var(--yl-fs-sm); font-weight: 400; padding: 4px;
}
.yl-link:hover { color: var(--yl-brand-600); text-decoration: underline; }

/* ── برچسب وضعیت تیکت (سراسری) ── */
.yl-tk-status { border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 400; white-space: nowrap; }
.yl-tk-status--open { background: #fef3c7; color: #92400e; }
.yl-tk-status--answered { background: var(--yl-brand-050); color: var(--yl-brand-700); }
.yl-tk-status--closed { background: var(--yl-line-soft); color: var(--yl-muted); }

/* رفع اسکرول افقی ناشی از منوی کشویی off-canvas در موبایل */
@media (max-width: 820px) {
	html, body.yl-front { overflow-x: hidden; }
}

/* اسکرول نرم + آیکون‌های SVG */
html { scroll-behavior: smooth; }
.yl-ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* نمایش قیمت با آیکون تومان */
.yl-price { display: inline-flex; align-items: center; gap: 4px; }
.yl-price__num { line-height: 1; }
.yl-toman { flex: 0 0 auto; }

/* ══════════ صفحهٔ ۴۰۴ ══════════ */
.yl-404 {
	min-height: 62vh;
	display: flex; align-items: center; justify-content: center;
	padding: 56px 16px 72px;
}
.yl-404__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.yl-404__art { color: var(--yl-brand); opacity: .35; margin: 0 auto 8px; line-height: 0; }
.yl-404__code {
	font-size: clamp(48px, 9vw, 78px); font-weight: 300; line-height: 1;
	margin: 0 0 10px; color: var(--yl-brand);
}
.yl-404__title {
	font-size: clamp(20px, 3vw, 26px); font-weight: 400;
	margin: 0 0 12px; color: var(--yl-ink);
}
.yl-404__text {
	font-size: var(--yl-fs-base); color: var(--yl-ink-soft);
	line-height: 2; margin: 0 0 26px;
}
.yl-404__actions {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.yl-404__actions .yl-btn { min-width: 168px; justify-content: center; }
/* دکمهٔ دوم ۴۰۴ هم قهوه‌ای (فقط در دامنهٔ ۴۰۴؛ ghost سایر بخش‌ها دست‌نخورده) */
.yl-404__actions .yl-btn--ghost {
	background: transparent;
	color: #CBAE82;
	border: 1px solid #CBAE82;
}
.yl-404__actions .yl-btn--ghost:hover {
	background: transparent;
	color: var(--yl-brand);
	border-color: var(--yl-brand);
}
@media (max-width: 460px) {
	.yl-404__actions .yl-btn { width: 100%; }
}

/* ══════════ فرم ارتباط با ما ══════════ */
.yl-contact { max-width: 620px; margin: 0 auto; }
.yl-contact__ok {
	display: flex; align-items: center; gap: 8px;
	background: var(--yl-brand-050); color: var(--yl-brand-700);
	border: 1px solid var(--yl-brand); border-radius: var(--yl-radius-sm);
	padding: 12px 14px; margin: 0 0 20px; font-size: var(--yl-fs-sm);
}
.yl-contact__row { margin-bottom: 16px; }
.yl-contact__label {
	display: block; margin-bottom: 6px;
	font-size: var(--yl-fs-sm); color: var(--yl-ink);
}
.yl-contact__req { color: var(--yl-danger, #d64545); margin-inline-start: 2px; }
.yl-contact__opt { color: var(--yl-ink-soft); font-size: 11px; margin-inline-start: 4px; }
.yl-contact .yl-input {
	width: 100%; box-sizing: border-box; border: 1px solid var(--yl-line);
	border-radius: var(--yl-radius-sm); padding: 10px 12px; font-family: inherit;
	font-size: var(--yl-fs-base); resize: vertical;
	background: var(--yl-card); color: var(--yl-ink);
}
.yl-contact .yl-input:focus {
	outline: none; border-color: var(--yl-brand); box-shadow: 0 0 0 3px var(--yl-brand-050);
}
.yl-contact .yl-input.is-error { border-color: var(--yl-danger, #d64545); }
.yl-contact__err {
	margin: 6px 0 0; font-size: var(--yl-fs-sm); color: var(--yl-danger, #d64545);
}
.yl-contact__actions { margin-top: 22px; }
.yl-contact__actions .yl-btn { min-width: 160px; justify-content: center; }
@media (max-width: 460px) {
	.yl-contact__actions .yl-btn { width: 100%; }
}