.mpk,
.mpk-dialog {
	--c: #38bdf8;
	box-sizing: border-box;
	direction: rtl;
	font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
	line-height: 1.6;
	text-align: right;
}

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

.mpk-i { display: block; width: 1em; height: 1em; flex: none; }

.mpk {
	position: relative;
	padding: clamp(52px, 7vw, 88px) 20px clamp(56px, 7vw, 96px);
	background: var(--bg);
	color: var(--ink);
}

.mpk.is-above-articles { margin-bottom: clamp(30px, 4vw, 48px); }

.mpk-wrap { max-width: var(--max); margin: 0 auto; }

/* ---------------------------------------------------------------- heading */
.mpk .mpk-head { max-width: 760px; margin: 0 auto clamp(44px, 5vw, 60px); padding: 0; background: none; border: 0; box-shadow: none; text-align: center; }

.mpk .mpk-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	color: var(--muted);
	font-size: 15px;
	font-weight: 600;
}

.mpk .mpk-title {
	margin: 0 0 14px;
	color: var(--ink);
	font-family: inherit;
	font-size: clamp(27px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.3;
	text-wrap: balance;
}

.mpk .mpk-sub { margin: 0 auto; color: var(--muted); font-size: clamp(15.5px, 1.4vw, 18px); text-wrap: pretty; }

/* ------------------------------------------------------------------ cards */
.mpk-grid {
	--n: var(--mpk-n);
	--gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 34px var(--gap);
}

.mpk .mpk-card {
	position: relative;
	display: flex;
	flex: 0 1 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
	flex-direction: column;
	min-width: 0;
	padding: 30px 26px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
	transition: transform .22s ease, border-color .22s ease;
}

.mpk .mpk-card:hover { border-color: var(--c); transform: translateY(-6px); }
.mpk .mpk-card.is-featured { border: 2px solid var(--c); background: linear-gradient(180deg, var(--tint), var(--card) 42%); }

.mpk .mpk-ribbon {
	position: absolute;
	top: -15px;
	right: 0;
	left: 0;
	width: fit-content;
	margin: 0 auto;
	padding: 4px 18px;
	border-radius: 999px;
	background: var(--c);
	color: var(--on);
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.6;
	white-space: nowrap;
}

.mpk-card-head { display: flex; align-items: flex-start; gap: 14px; }

.mpk-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--tint);
	color: var(--c-text);
	font-size: 22px;
}

.mpk .mpk-name { margin: 0 0 2px; color: var(--ink); font-family: inherit; font-size: 21px; font-weight: 800; line-height: 1.4; }
.mpk .mpk-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* The pulse gains strength from one package to the next. */
.mpk-trace {
	display: block;
	flex: none;
	width: calc(100% + 52px);
	height: 48px;
	margin: 12px -26px 8px;
	overflow: hidden;
	color: var(--c);
}

.mpk-trace path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.mpk.is-waiting .mpk-trace { clip-path: inset(0 0 0 100%); }
.mpk.is-in .mpk-trace { animation: mpk-pulse .85s cubic-bezier(.3, .1, .3, 1) both; animation-delay: calc(var(--i) * .4s); }

@keyframes mpk-pulse {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}

.mpk .mpk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.mpk .mpk-price strong { color: var(--ink); font-size: clamp(38px, 3.6vw, 48px); font-weight: 800; line-height: 1.15; }
.mpk .mpk-cur { color: var(--ink); font-size: 18px; font-weight: 700; }
.mpk .mpk-per { color: var(--muted); font-size: 15px; }

.mpk .mpk-note { margin: 6px 0 0; color: var(--c-text); font-size: 14.5px; font-weight: 700; }

.mpk .mpk-features {
	flex: 1 1 auto;
	margin: 20px 0 24px;
	padding: 20px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.mpk .mpk-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 13px;
	padding: 0;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.7;
	list-style: none;
}

.mpk .mpk-features li:last-child { margin-bottom: 0; }
.mpk .mpk-features strong { color: var(--ink); font-weight: 700; }
.mpk .mpk-features li.is-hl { color: var(--ink); }

.mpk-check {
	display: grid;
	flex: none;
	place-items: center;
	width: 21px;
	height: 21px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--tint);
	color: var(--c-text);
	font-size: 11px;
}

.mpk .mpk-pick {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: calc(var(--r) * .6);
	background: var(--c);
	box-shadow: none;
	color: var(--on);
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.5;
	text-transform: none;
	cursor: pointer;
	transition: transform .15s ease;
}

.mpk .mpk-pick:hover { background: var(--c); color: var(--on); transform: scale(1.02); }
.mpk .mpk-pick:active { transform: scale(.98); }
.mpk .mpk-pick:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 1080px) { .mpk-grid { --n: min(var(--mpk-n), 2); } }

@media (max-width: 720px) {
	.mpk { padding-right: 16px; padding-left: 16px; }
	.mpk-grid { --n: 1; }
	.mpk .mpk-card { max-width: 520px; }
}

/* ----------------------------------------------------------------- dialog */
.mpk-dialog {
	position: fixed;
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 30px 28px 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-top: 5px solid var(--c);
	border-radius: var(--r);
	background: var(--card);
	color: var(--ink);
}

.mpk-dialog[open] { animation: mpk-rise .2s ease-out; }
.mpk-dialog::backdrop { background: rgba(4, 11, 26, .68); }

@keyframes mpk-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.mpk-dialog .mpk-x {
	position: absolute;
	top: 16px;
	left: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--field);
	box-shadow: none;
	color: var(--muted);
	font-size: 15px;
	cursor: pointer;
}

.mpk-dialog .mpk-x:hover { background: var(--field); color: var(--ink); }

.mpk-dialog .mpk-form-title,
.mpk-dialog .mpk-done h3 { margin: 0 0 4px; padding-left: 40px; color: var(--ink); font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1.4; }
.mpk-dialog .mpk-form-text { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; }

.mpk-dialog .mpk-field { margin: 0 0 15px; }

.mpk-dialog .mpk-field label {
	position: static;
	display: block;
	margin: 0 0 6px;
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
}

.mpk-dialog .mpk-input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--field);
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	outline: 0;
}

.mpk-dialog select.mpk-input { font-weight: 700; cursor: pointer; }
.mpk-dialog select.mpk-input option { background: var(--card); color: var(--ink); }
.mpk-dialog .mpk-input.mpk-ltr { text-align: left; }
.mpk-dialog .mpk-input.mpk-ltr:placeholder-shown { text-align: right; }
.mpk-dialog .mpk-input::placeholder { color: var(--muted); opacity: .8; }
.mpk-dialog .mpk-input:focus { border-color: var(--c); box-shadow: 0 0 0 3px var(--tint); }
.mpk-dialog .mpk-input[aria-invalid="true"] { border-color: #f87171; }

.mpk-dialog .mpk-err { margin: 5px 0 0; color: var(--err); font-size: 13.5px; font-weight: 600; }
.mpk-dialog .mpk-form-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(248, 113, 113, .14); color: var(--err); font-size: 14px; font-weight: 600; }

.mpk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mpk-dialog .mpk-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin: 6px 0 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 12px;
	background: var(--c);
	box-shadow: none;
	color: var(--on);
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	text-transform: none;
	cursor: pointer;
}

.mpk-dialog .mpk-submit:hover { background: var(--c); color: var(--on); }
.mpk-dialog .mpk-submit:focus-visible,
.mpk-dialog .mpk-x:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mpk-dialog .mpk-submit[disabled] { cursor: wait; opacity: .75; }

.mpk-dialog .mpk-submit.is-busy span::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-inline-start: 10px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	animation: mpk-spin .7s linear infinite;
}

@keyframes mpk-spin { to { transform: rotate(360deg); } }

.mpk-dialog .mpk-done { padding: 8px 0 0; outline: 0; text-align: center; }
.mpk-dialog .mpk-done h3 { padding: 0; }
.mpk-dialog .mpk-done p { margin: 0 0 8px; color: var(--muted); font-size: 15.5px; }
.mpk-dialog .mpk-done .mpk-done-pack { color: var(--c-text); font-weight: 700; }
.mpk-dialog .mpk-done .mpk-submit { margin-top: 18px; }

.mpk-done-mark {
	display: inline-grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--c);
	color: var(--on);
	font-size: 28px;
	animation: mpk-pop .32s cubic-bezier(.3, 1.5, .5, 1);
}

@keyframes mpk-pop { from { transform: scale(.5); } to { transform: scale(1); } }

@media (max-width: 560px) {
	html.mpk-lock { overflow: hidden; }
	.mpk-dialog {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
		border-radius: var(--r) var(--r) 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpk *,
	.mpk-dialog,
	.mpk-dialog * { animation: none !important; transition: none !important; }
	.mpk.is-waiting .mpk-trace { clip-path: none; }
}