/* =====================================================
   Menx — فاز ۵ · صفحه‌ی تعرفه‌ها
   RTL · موبایل‌اول · بدون وابستگی خارجی
   ===================================================== */

.mxp {
	--p-ink: #1c2130;
	--p-mute: #6c7488;
	--p-line: #e6e8ef;
	--p-card: #ffffff;
	--p-bg: #f6f7fb;
	--p-accent: #4f5aa8;
	--p-gold: #d9a441;
	--p-ok: #1e7a44;
	--p-err: #c93a36;
	--p-radius: 18px;

	direction: rtl;
	max-width: 1140px;
	margin-inline: auto;
	padding: 26px 16px 60px;
	color: var(--p-ink);
	font-size: 14px;
	line-height: 1.9;
}

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

/* ------------------------------------------------------------- سرصفحه */

.mxp-head {
	text-align: center;
	margin-block-end: 26px;
}

.mxp-head h1 {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.3px;
}

.mxp-head p {
	margin: 0;
	color: var(--p-mute);
	font-size: 14px;
}

/* ------------------------------------------------------------- پیام‌ها */

.mxp-alert,
.mxp-note,
.mxp-empty {
	border-radius: 14px;
	padding: 13px 16px;
	margin-block-end: 18px;
	font-size: 13.5px;
}

.mxp-alert.is-err {
	background: #fdecec;
	color: #b3261e;
	border: 1px solid #f6cfcd;
}

.mxp-alert.is-ok {
	background: #e6f7ec;
	color: var(--p-ok);
	border: 1px solid #c3ead2;
}

.mxp-note {
	background: #fff8e8;
	color: #8a5c00;
	border: 1px solid #f3e0b5;
}

.mxp-empty {
	background: var(--p-card);
	border: 1px dashed var(--p-line);
	color: var(--p-mute);
	text-align: center;
	padding-block: 40px;
}

/* ------------------------------------------------------------ کارت پلن */

.mxp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: stretch;
}

@media (min-width: 700px) {
	.mxp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1020px) {
	.mxp-grid { grid-template-columns: repeat(3, 1fr); }
}

.mxp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--p-card);
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	padding: 24px 20px 20px;
	box-shadow: 0 2px 10px rgba(20, 25, 45, .04);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mxp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(20, 25, 45, .09);
	border-color: #d5d9e6;
}

.mxp-card.is-hot {
	border-color: var(--p-gold);
	box-shadow: 0 10px 30px rgba(217, 164, 65, .18);
}

.mxp-ribbon {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	background: var(--p-gold);
	color: #241d09;
	font-size: 11.5px;
	font-weight: 800;
	padding: 3px 14px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(217, 164, 65, .4);
}

.mxp-name {
	font-size: 17px;
	font-weight: 800;
	margin-block-end: 4px;
}

.mxp-desc {
	color: var(--p-mute);
	font-size: 12.5px;
	margin-block-end: 14px;
	min-height: 24px;
}

.mxp-price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	padding-block: 10px;
	border-block-start: 1px dashed var(--p-line);
	border-block-end: 1px dashed var(--p-line);
}

.mxp-price s {
	color: #adb3c2;
	font-size: 13px;
}

.mxp-price b {
	font-size: 27px;
	font-weight: 900;
	letter-spacing: -0.5px;
}

.mxp-price i {
	font-style: normal;
	color: var(--p-mute);
	font-size: 12.5px;
}

.mxp-days {
	color: var(--p-mute);
	font-size: 12.5px;
	padding-block: 9px;
}

/* ------------------------------------------------------------ قابلیت‌ها */

.mxp-feats {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	flex: 1;
}

.mxp-feats li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-block: 6px;
	font-size: 13px;
}

.mxp-feats svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mxp-feats li.is-on svg { stroke: var(--p-ok); }

.mxp-feats li.is-off {
	color: #a9afbe;
	text-decoration: line-through;
	text-decoration-color: #dfe2ea;
}

.mxp-feats li.is-off svg { stroke: #c9cedb; }

/* ------------------------------------------------------------- فرم خرید */

.mxp-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mxp-coupon {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--p-line);
	border-radius: 11px;
	font: inherit;
	font-size: 13px;
	background: #fbfbfe;
	color: var(--p-ink);
	text-align: center;
	letter-spacing: 1px;
}

.mxp-coupon:focus {
	outline: none;
	border-color: var(--p-accent);
	box-shadow: 0 0 0 3px rgba(79, 90, 168, .13);
}

.mxp-btn {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 12px;
	background: var(--p-accent);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.mxp-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
}

.mxp-card.is-hot .mxp-btn {
	background: var(--p-gold);
	color: #241d09;
}

/* -------------------------------------------------------------- سوال‌ها */

.mxp-faq {
	margin-block-start: 40px;
	background: var(--p-card);
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	padding: 8px 18px 14px;
}

.mxp-faq h2 {
	font-size: 16px;
	font-weight: 800;
	margin: 14px 0 6px;
}

.mxp-faq details {
	border-block-start: 1px solid var(--p-line);
	padding-block: 10px;
}

.mxp-faq details:first-of-type { border-block-start: 0; }

.mxp-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 13.5px;
	list-style: none;
	position: relative;
	padding-inline-end: 22px;
}

.mxp-faq summary::-webkit-details-marker { display: none; }

.mxp-faq summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0;
	color: var(--p-accent);
	font-weight: 900;
}

.mxp-faq details[open] summary::after { content: "\2212"; }

.mxp-faq p {
	margin: 6px 0 0;
	color: var(--p-mute);
	font-size: 13px;
}

/* ------------------------------------------------- فاکتورها در پنل */

.menx-inv {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.menx-inv th,
.menx-inv td {
	padding: 10px 8px;
	border-block-end: 1px solid #e6e8ee;
	text-align: start;
	white-space: nowrap;
}

.menx-inv th {
	color: #6b7280;
	font-weight: 700;
	font-size: 12px;
	background: #fafbfd;
}

.menx-inv tr:last-child td { border-block-end: 0; }

.menx-inv-wrap {
	overflow-x: auto;
	border: 1px solid #e6e8ee;
	border-radius: 12px;
}

.menx-st {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
}

.menx-st-paid     { background: #e6f7ec; color: #1e7a44; }
.menx-st-pending  { background: #fff4e0; color: #a35c00; }
.menx-st-failed,
.menx-st-canceled { background: #fdecec; color: #b3261e; }
.menx-st-refunded { background: #eef0f3; color: #5b6472; }

/* بانر اشتراک در پنل */

.menx-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid #e6e8ee;
	background: #fafbfd;
	margin-block-end: 16px;
}

.menx-sub.is-warn { background: #fff8e8; border-color: #f3e0b5; }
.menx-sub.is-dead { background: #fdecec; border-color: #f6cfcd; }

.menx-sub-main { flex: 1 1 220px; }

.menx-sub-plan {
	font-weight: 800;
	font-size: 14.5px;
}

.menx-sub-meta {
	color: #6b7280;
	font-size: 12.5px;
}

.menx-sub-cta {
	padding: 9px 18px;
	border-radius: 11px;
	background: #4f5aa8;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.menx-sub-cta:hover { filter: brightness(1.08); color: #fff; }

@media print {
	.mxp-form, .mxp-btn, .mxp-faq { display: none !important; }
}