/* مُراسل تك — أنماط صفحة الاشتراك والدفع */

.mt-co,
.mt-res {
	--mt-blue: #007AFF;
	--mt-navy: #0B1F3A;
	--mt-ink: #16202e;
	--mt-dim: #5b6a80;
	--mt-line: #e3e9f2;
	--mt-bg: #f6f8fc;
	--mt-radius: 18px;
	font-family: 'Alexandria', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
	color: var(--mt-ink);
	max-width: 1080px;
	margin: 0 auto;
	line-height: 1.75;
}

.mt-co *,
.mt-res * { box-sizing: border-box; }

/* شريط اللغة */
.mt-co-langbar { display: flex; gap: 6px; justify-content: flex-start; margin-bottom: 14px; }
.mt-co-lang {
	background: #fff; border: 1px solid var(--mt-line); color: var(--mt-dim);
	border-radius: 999px; padding: 5px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.mt-co-lang.is-on { background: var(--mt-navy); color: #fff; border-color: var(--mt-navy); }

/* شريط العرض */
.mt-co-offer {
	display: flex; align-items: center; gap: 10px;
	background: linear-gradient(90deg, rgba(0,122,255,.10), rgba(11,31,58,.06));
	border: 1px solid rgba(0,122,255,.25); color: var(--mt-navy);
	border-radius: 14px; padding: 11px 16px; margin-bottom: 18px; font-size: 14px; font-weight: 600;
}
.mt-co-offer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mt-blue); flex: none; }

/* الخطوات */
.mt-co-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
.mt-co-steps li {
	flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mt-dim);
	background: #fff; border: 1px solid var(--mt-line); border-radius: 12px; padding: 9px 12px;
}
.mt-co-steps li b {
	width: 22px; height: 22px; border-radius: 50%; background: var(--mt-line); color: var(--mt-dim);
	display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none;
}
.mt-co-steps li.is-on { border-color: var(--mt-blue); color: var(--mt-navy); }
.mt-co-steps li.is-on b { background: var(--mt-blue); color: #fff; }
.mt-co-steps li.is-done b { background: #34c759; color: #fff; }

/* الشبكة */
.mt-co-grid { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
.mt-co-form {
	background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: 24px;
	box-shadow: 0 6px 26px rgba(11,31,58,.05);
}
.mt-co-form h3 { margin: 0 0 18px; font-size: 18px; color: var(--mt-navy); }
.mt-co-step { display: none; }
.mt-co-step.is-on { display: block; }

/* الدورة */
.mt-co-cycle { display: inline-flex; background: var(--mt-bg); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.mt-co-cyclebtn {
	border: 0; background: transparent; border-radius: 999px; padding: 9px 20px; cursor: pointer;
	font-family: inherit; font-size: 14px; color: var(--mt-dim); display: inline-flex; align-items: center; gap: 7px;
}
.mt-co-cyclebtn.is-on { background: #fff; color: var(--mt-navy); font-weight: 700; box-shadow: 0 2px 8px rgba(11,31,58,.09); }
.mt-co-cyclebtn em { font-style: normal; font-size: 11px; background: rgba(0,122,255,.12); color: var(--mt-blue); border-radius: 999px; padding: 2px 8px; }

/* بطاقات الباقات */
.mt-co-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mt-co-plan { position: relative; cursor: pointer; display: block; }
.mt-co-plan input { position: absolute; opacity: 0; pointer-events: none; }
.mt-co-plan-body {
	display: block; border: 2px solid var(--mt-line); border-radius: 16px; padding: 16px; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mt-co-plan.is-on .mt-co-plan-body { border-color: var(--mt-blue); box-shadow: 0 6px 20px rgba(0,122,255,.14); }
.mt-co-plan-name { display: block; font-weight: 700; color: var(--mt-navy); font-size: 16px; }
.mt-co-plan-price { display: block; margin: 8px 0 10px; color: var(--mt-navy); }
.mt-co-plan-price b { font-size: 26px; }
.mt-co-plan-price i { font-style: normal; font-size: 13px; color: var(--mt-dim); }
.mt-co-plan-price u { text-decoration: none; font-size: 12px; color: var(--mt-dim); }
.mt-co-plan-feats { display: block; border-top: 1px solid var(--mt-line); padding-top: 10px; }
.mt-co-plan-feats em { display: block; font-style: normal; font-size: 13px; color: var(--mt-dim); margin: 3px 0; }

/* الحقول */
.mt-co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-co-field { margin-bottom: 14px; }
.mt-co-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--mt-navy); margin-bottom: 6px; }
.mt-co-field input,
.mt-co-field select,
.mt-co-warow input,
.mt-co-warow select {
	width: 100%; border: 1px solid var(--mt-line); border-radius: 12px; padding: 11px 14px;
	font-family: inherit; font-size: 15px; background: #fff; color: var(--mt-ink);
}
.mt-co-field input:focus,
.mt-co-warow input:focus { outline: none; border-color: var(--mt-blue); box-shadow: 0 0 0 3px rgba(0,122,255,.12); }
.mt-co-field input.has-err,
.mt-co-warow input.has-err { border-color: #e5484d; }
.mt-co-warow { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.mt-co-note { display: block; font-size: 12.5px; color: var(--mt-dim); margin-top: 6px; }
.mt-co-err { display: block; font-size: 12.5px; color: #e5484d; margin-top: 5px; min-height: 1px; }

.mt-co-more { margin: 6px 0 16px; border: 1px dashed var(--mt-line); border-radius: 12px; padding: 12px 14px; }
.mt-co-more summary { cursor: pointer; font-size: 14px; color: var(--mt-blue); font-weight: 600; }
.mt-co-more[open] summary { margin-bottom: 12px; }

/* الأسئلة */
.mt-co-q { margin-bottom: 22px; }
.mt-co-q > p { font-weight: 600; color: var(--mt-navy); margin: 0 0 10px; font-size: 15px; }
.mt-co-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-co-choices label {
	display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--mt-line);
	border-radius: 12px; padding: 9px 18px; cursor: pointer; font-size: 14px; background: #fff;
}
.mt-co-choices input { accent-color: var(--mt-blue); }
.mt-co-choices label:has(input:checked) { border-color: var(--mt-blue); background: rgba(0,122,255,.06); font-weight: 600; }
.mt-co-warn {
	margin-top: 12px; background: #fff8e6; border: 1px solid #f3d98b; color: #7a5a12;
	border-radius: 12px; padding: 12px 14px; font-size: 13.5px;
}

.mt-co-terms { border-top: 1px solid var(--mt-line); padding-top: 16px; }
.mt-co-terms label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.mt-co-terms input { margin-top: 5px; accent-color: var(--mt-blue); }
.mt-co-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; padding-inline-start: 26px; }
.mt-co-links a { font-size: 13px; color: var(--mt-blue); text-decoration: none; }

/* التنقل */
.mt-co-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; }
.mt-co-next, .mt-co-back {
	border: 0; border-radius: 12px; padding: 12px 26px; font-family: inherit; font-size: 15px;
	font-weight: 600; cursor: pointer;
}
.mt-co-next { background: var(--mt-navy); color: #fff; margin-inline-start: auto; }
.mt-co-back { background: var(--mt-bg); color: var(--mt-dim); }

/* الملخص */
.mt-co-summary {
	background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: 20px;
	position: sticky; top: 20px; box-shadow: 0 6px 26px rgba(11,31,58,.05);
}
.mt-co-summary h4 { margin: 0 0 14px; font-size: 15px; color: var(--mt-navy); }
.mt-co-sum-plan { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--mt-line); }
.mt-co-sum-plan span { font-weight: 700; color: var(--mt-navy); font-size: 16px; }
.mt-co-sum-plan em { font-style: normal; font-size: 12.5px; color: var(--mt-dim); }
.mt-co-sum-lines { list-style: none; padding: 0; margin: 12px 0; }
.mt-co-sum-lines li { display: flex; justify-content: space-between; font-size: 14px; color: var(--mt-dim); padding: 5px 0; gap: 10px; }
.mt-co-sum-lines li b { color: var(--mt-ink); font-weight: 600; white-space: nowrap; }
.mt-co-sum-lines li.is-off { display: none; }
.mt-co-sum-lines li[data-sum-row="discount"] b { color: #1f9d55; }
.mt-co-sum-total {
	display: flex; justify-content: space-between; align-items: center;
	border-top: 2px solid var(--mt-navy); padding-top: 12px; font-size: 15px; font-weight: 700; color: var(--mt-navy);
}
.mt-co-sum-total b { font-size: 22px; }
.mt-co-sum-total i { font-style: normal; font-size: 13px; font-weight: 500; }
.mt-co-sum-note { font-size: 12px; color: var(--mt-dim); margin: 10px 0 0; }

.mt-co-pay {
	display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 14px;
	background: var(--mt-blue); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
	padding: 15px; cursor: pointer; text-align: center; text-decoration: none;
}
.mt-co-pay:disabled { background: #b9c6d8; cursor: not-allowed; }

.mt-co-msg { margin-top: 12px; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; }
.mt-co-msg.is-info { background: rgba(0,122,255,.08); color: var(--mt-navy); }
.mt-co-msg.is-error { background: #fdeaea; color: #b42318; }

.mt-co-pays { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.mt-co-pays span {
	font-size: 11px; font-weight: 700; color: var(--mt-dim); border: 1px solid var(--mt-line);
	border-radius: 7px; padding: 4px 9px; background: var(--mt-bg);
}
.mt-co-secure { font-size: 11.5px; color: var(--mt-dim); text-align: center; margin: 10px 0 0; }

.mt-co-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* شاشة الإرسال للمراجعة */
.mt-co-done {
	background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
	padding: 44px 28px; text-align: center; max-width: 560px; margin: 0 auto;
}
.mt-co-done-icon {
	width: 62px; height: 62px; border-radius: 50%; background: rgba(0,122,255,.10); color: var(--mt-blue);
	display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 16px;
}
.mt-co-done h2 { color: var(--mt-navy); margin: 0 0 10px; }
.mt-co-done-ref { background: var(--mt-bg); border-radius: 12px; padding: 10px; display: inline-block; margin: 12px 0; }

/* صفحة النتيجة */
.mt-res { padding: 30px 16px; }
.mt-res-card {
	background: #fff; border: 1px solid var(--mt-line); border-radius: 20px; padding: 40px 28px;
	text-align: center; max-width: 620px; margin: 0 auto; box-shadow: 0 8px 30px rgba(11,31,58,.06);
}
.mt-res-card h2 { color: var(--mt-navy); margin: 0 0 10px; font-size: 22px; }
.mt-res-icon {
	width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 34px; margin: 0 auto 18px; font-weight: 700;
}
.mt-res-ok { background: rgba(52,199,89,.12); color: #1f9d55; }
.mt-res-warn { background: #fff8e6; color: #b58200; }
.mt-res-ref { background: var(--mt-bg); border-radius: 12px; padding: 10px 16px; display: inline-block; }
.mt-res-line { color: var(--mt-dim); }
.mt-res-next { text-align: start; background: var(--mt-bg); border-radius: 14px; padding: 18px 20px; margin: 20px 0; }
.mt-res-next h3 { margin: 0 0 10px; font-size: 15px; color: var(--mt-navy); }
.mt-res-next ol { margin: 0; padding-inline-start: 20px; color: var(--mt-dim); font-size: 14px; }
.mt-res-btn {
	display: inline-block; background: var(--mt-blue); color: #fff; text-decoration: none;
	border-radius: 14px; padding: 13px 30px; font-weight: 700; margin: 6px 4px;
}
.mt-res-btn.is-ghost { background: var(--mt-bg); color: var(--mt-navy); }
.mt-res-spin {
	width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 18px;
	border: 3px solid var(--mt-line); border-top-color: var(--mt-blue); animation: mtspin .9s linear infinite;
}
@keyframes mtspin { to { transform: rotate(360deg); } }

/* الجوال */
@media (max-width: 900px) {
	.mt-co-grid { grid-template-columns: 1fr; }
	.mt-co-summary { position: static; }
	.mt-co-row { grid-template-columns: 1fr; }
	.mt-co-steps li span { display: none; }
	.mt-co-steps li { justify-content: center; }
}

/* ===== الباقة المختارة مسبقًا ===== */
.mt-co-chosen {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--mt-line); border-radius: 16px;
	padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 4px 18px rgba(11,31,58,.05);
}
.mt-co-chosen-t { font-size: 12.5px; color: var(--mt-dim); }
.mt-co-chosen-v { display: flex; align-items: baseline; gap: 10px; }
.mt-co-chosen-v b { font-size: 18px; color: var(--mt-navy); }
.mt-co-chosen-v em { font-style: normal; font-size: 13px; color: var(--mt-blue); background: rgba(0,122,255,.08); border-radius: 999px; padding: 3px 12px; }
.mt-co-change { margin-inline-start: auto; font-size: 13px; color: var(--mt-blue); text-decoration: none; border-bottom: 1px dashed rgba(0,122,255,.5); }

/* ===== أزرار التنقّل في الأعلى ===== */
.mt-co-topnav {
	display: flex; align-items: center; gap: 10px;
	padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--mt-line);
}
.mt-co-go, .mt-co-back {
	border: 0; border-radius: 12px; padding: 12px 28px; font-family: inherit;
	font-size: 15px; font-weight: 700; cursor: pointer;
}
.mt-co-go { background: var(--mt-navy); color: #fff; margin-inline-start: auto; }
.mt-co-go.is-pay { background: var(--mt-blue); box-shadow: 0 6px 18px rgba(0,122,255,.28); }
.mt-co-go:disabled { background: #b9c6d8; cursor: not-allowed; box-shadow: none; }
.mt-co-back { background: var(--mt-bg); color: var(--mt-dim); }
.mt-co-topnav + .mt-co-msg { margin: -6px 0 16px; }

/* ===== تذييل بهوية الموقع ===== */
.mt-ft {
	font-family: 'Alexandria', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
	background: #0B1F3A; color: #cdd9ea; margin-top: 42px; border-radius: 20px 20px 0 0;
}
.mt-ft-in {
	max-width: 1080px; margin: 0 auto; padding: 32px 22px 24px;
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 26px;
}
.mt-ft-brand .mt-ft-logo { display: block; color: #fff; font-size: 19px; font-weight: 700; }
.mt-ft-brand .mt-ft-tag { display: block; font-size: 12.5px; color: #8ea6c6; margin-top: 4px; }
.mt-ft-brand .mt-ft-meta {
	display: inline-block; margin-top: 12px; font-size: 11.5px; color: #cfe1ff;
	border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 4px 12px;
}
.mt-ft-col h5 { margin: 0 0 10px; font-size: 13px; color: #fff; font-weight: 700; }
.mt-ft-col p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.8; }
.mt-ft-col a { color: #cdd9ea; text-decoration: none; }
.mt-ft-col a:hover { color: #fff; }
.mt-ft-pays { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mt-ft-pays span {
	font-size: 10.5px; font-weight: 700; color: #cdd9ea;
	border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 3px 8px;
}
.mt-ft-sec { font-size: 11.5px; color: #8ea6c6; }
.mt-ft-bar {
	border-top: 1px solid rgba(255,255,255,.12); text-align: center;
	padding: 14px; font-size: 12px; color: #8ea6c6;
}

@media (max-width: 900px) {
	.mt-ft-in { grid-template-columns: 1fr 1fr; gap: 20px; }
	.mt-co-chosen { gap: 8px; }
	.mt-co-change { margin-inline-start: 0; }
}
@media (max-width: 560px) {
	.mt-ft-in { grid-template-columns: 1fr; }
	.mt-co-go, .mt-co-back { padding: 12px 18px; font-size: 14px; }
}
