/**
 * The profile card, ranks, medals, the نسیه balance and the promotion notice.
 *
 * Sits on top of mim-account.css, which owns the panel shell. Everything here
 * is the identity layer: the parts of the account that are about *who this
 * customer is* rather than about what they can do.
 */

/* ═══════════════════════════════════════════════════════════
   Medals
   ═══════════════════════════════════════════════════════════ */

.mim-medal-wrap {
	display: inline-flex;
	vertical-align: middle;
	line-height: 0;
}

.mim-medal {
	display: block;
	width: 1em;
	height: 1em;
}

/* Beside a name, anywhere on the site: small enough to read as punctuation,
   big enough that the colour is legible. */
.mim-medal--inline,
.mim-medal--name {
	width: 0.95em;
	height: 0.95em;
	margin-inline-start: 0.25em;
}

.mim-medal--chip {
	width: 17px;
	height: 17px;
}

.mim-medal--row {
	width: 30px;
	height: 30px;
}

.mim-medal--hero {
	width: 78px;
	height: 78px;
}

/* ═══════════════════════════════════════════════════════════
   Profile card
   ═══════════════════════════════════════════════════════════ */

.mim-profile {
	/* Fallbacks only — the widget writes the current tier's pair inline. */
	--mim-rank-from: #0353A4;
	--mim-rank-to: #0466C8;

	position: relative;
	margin-bottom: 22px;
	overflow: hidden;
	background: var(--mim-acard-bg, #FFF);
	border-radius: 26px;
	box-shadow: 0 22px 48px -34px rgba(37, 51, 78, 0.5);
}

.mim-profile__cover {
	position: relative;
	/* The widget writes --mim-cover-h per device; this is only the fallback for
	   a page where the control has never been touched. */
	height: var(--mim-cover-h, 168px);
	background-color: #25334E;
	background-size: cover;
	background-position: center;
}

.mim-profile__cover-tools {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: flex;
	gap: 8px;
}

.mim-profile__tool {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 12px;
	color: #25334E;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: transform 0.16s ease, background-color 0.16s ease;
}

.mim-profile__tool:hover {
	transform: translateY(-2px);
	background: #FFF;
}

.mim-profile__tool-glyph {
	width: 18px;
	height: 18px;
}

.mim-profile__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 22px 26px;
	text-align: center;
}

/* ── Face and rank ring ───────────────────────────────────── */

.mim-profile__face-wrap {
	position: relative;
	width: 132px;
	height: 132px;
	margin-top: -66px;
	margin-bottom: 14px;
}

/* The ring is a conic gradient built from the rank's two colours, sitting
   under the photo. A `border` could not carry a gradient, and an outline
   could not be rounded — this is the one construction that gives both. */
.mim-profile__ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(
		from 210deg,
		var(--mim-rank-from),
		var(--mim-rank-to),
		var(--mim-rank-from)
	);
}

/* Two selectors deep on purpose.
 *
 * Themes and page builders both like to put a blanket radius on `img`, and a
 * single-class rule loses to `.elementor-widget-container img` on specificity
 * alone — which is how a circular avatar ends up a rounded square. This is the
 * cheapest selector that reliably outranks them without `!important`, so the
 * site owner's own CSS can still take it back.
 *
 * `aspect-ratio` is the belt to that braces: even if something overrides the
 * height, the frame stays square and the circle stays a circle. */
.mim-profile .mim-profile__face-wrap .mim-profile__face,
.mim-profile img.mim-profile__face {
	position: relative;
	display: block;
	width: 132px;
	height: 132px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	border: 5px solid var(--mim-acard-bg, #FFF);
	background: #EFEAE0;
}

.mim-profile__face-btn {
	position: absolute;
	inset-block-end: 2px;
	inset-inline-end: 2px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: #25334E;
	border: 3px solid var(--mim-acard-bg, #FFF);
	border-radius: 50%;
	color: #F3EFE7;
	cursor: pointer;
	transition: transform 0.16s ease;
}

.mim-profile__face-btn:hover {
	transform: scale(1.08);
}

.mim-profile__face-btn .mim-profile__tool-glyph {
	width: 15px;
	height: 15px;
}

/* ── Name block ───────────────────────────────────────────── */

.mim-profile__name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0 0 4px;
	font-size: clamp(19px, 3vw, 23px);
	font-weight: 800;
	line-height: 1.4;
}

.mim-profile__nickname {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.6));
}

/* The chip is the rank's colour, solid, with white on top.
 *
 * It was a 26% tint of the same value, which meant every tier read as a
 * different shade of "nearly the card background" — and the palest one, the
 * first tier every new customer sees, was invisible. A solid fill is the only
 * version that works for all seven at once, and it lets the medal sit on a
 * ground dark enough to see it against. */
.mim-profile__rank {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 6px 16px 6px 7px;
	background: linear-gradient(135deg, var(--mim-rank-from), var(--mim-rank-to));
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #FFF;
	box-shadow: 0 6px 16px -8px var(--mim-rank-to);
}

[dir="rtl"] .mim-profile__rank {
	padding: 6px 7px 6px 16px;
}

/* The medal sits in its own white disc.
 *
 * The chip is filled with the tier's colour and the medal is drawn in that
 * same colour — so on the chip it simply vanished. A white disc behind it is
 * the one treatment that works for all seven tiers without needing a second
 * artwork set. */
.mim-profile__rank .mim-medal--chip {
	width: 15px;
	height: 15px;
}

.mim-profile__rank-disc {
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* Silver is pale metal and white on it is unreadable, so that one tier takes
   dark ink instead. Every other tier is dark enough for white. */
.mim-profile[data-rank="silver"] .mim-profile__rank {
	color: #25334E;
}

/* ── Stats row ────────────────────────────────────────────── */

.mim-profile__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	padding: 16px 8px;
	background: rgba(37, 51, 78, 0.04);
	border-radius: 18px;
}

.mim-profile__stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding-inline: 4px;
}

/* The dividers are drawn between stats only, never at the ends. */
.mim-profile__stat + .mim-profile__stat {
	border-inline-start: 1px solid rgba(37, 51, 78, 0.1);
}

.mim-profile__stat-value {
	font-size: clamp(14px, 2.6vw, 18px);
	font-weight: 800;
	line-height: 1.35;
	/* A long favourite-item name must shrink the row, not widen the card. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The same face as everything around it.
 *
 * `is-ltr` used to force `--mim-font-latin` (Space Grotesk) on the numeric
 * stats. The reasoning was sound in general — Latin digits are cleaner and
 * align better in a figure — but wrong in this row: the numbers are set in
 * Persian digits, sitting directly above Persian labels, inside a Persian card.
 * Swapping the typeface for one of the four tiles reads as a rendering fault
 * rather than as typography.
 *
 * `dir="ltr"` stays on the element, and it is doing something different and
 * still necessary: it stops a figure like ۵۹۵٬۰۰۰ having its groups reordered
 * by the surrounding right-to-left run. Direction and typeface were being
 * conflated by one class; only the direction part was ever needed.
 */
.mim-profile__stat-value.is-ltr {
	font-family: inherit;
	/* Keeps the number a self-contained run without forcing a font change. */
	unicode-bidi: isolate;
}

.mim-profile__stat-label {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.6));
}

/* ── Progress to next rank ────────────────────────────────── */

.mim-profile__progress {
	width: 100%;
	margin-top: 18px;
}

/* The track carries its own reading now, so it is positioned and no longer
   clips: the label sits above it, and the fill rounds its own ends rather than
   borrowing the track's overflow to do it. */
.mim-profile__bar {
	position: relative;
	height: 8px;
	margin-top: 24px;
	background: rgba(37, 51, 78, 0.1);
	border-radius: 999px;
}

/*
 * How far along, in figures.
 *
 * A filled fraction with no scale is a picture of progress, not a measure of
 * one — «somewhere past the middle» was the most anyone could read off it.
 *
 * Above the track rather than inside it: the fill is a gradient in the tier's
 * own colour, which runs from pale silver to near-black across the seven
 * ranks, and no single ink is readable on all of them. Above the bar the
 * number sits on the card and is legible at every rank and every width.
 */
.mim-profile__bar-pct {
	position: absolute;
	bottom: 100%;
	inset-inline-end: 0;
	margin-bottom: 6px;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	line-height: 1;
	color: var(--mim-account-ink, #25334E);
}

.mim-profile__bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--mim-rank-from), var(--mim-rank-to));
	border-radius: 999px;
	transition: width 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.mim-profile__progress-text {
	margin: 9px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.6));
}

.mim-profile__progress-text--top {
	margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   Notices
   ═══════════════════════════════════════════════════════════ */

.mim-notices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.mim-notice {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 16px;
	border: 1px solid transparent;
	overflow: hidden;
	transition: opacity 0.24s ease, height 0.24s ease, margin 0.24s ease, padding 0.24s ease;
}

.mim-notice.is-leaving {
	opacity: 0;
	height: 0 !important;
	margin: 0;
	padding-block: 0;
}

.mim-notice--warn {
	background: rgba(224, 164, 88, 0.13);
	border-color: rgba(224, 164, 88, 0.35);
}

.mim-notice--info {
	background: rgba(139, 158, 199, 0.14);
	border-color: rgba(139, 158, 199, 0.35);
}

.mim-notice--soft {
	background: rgba(37, 51, 78, 0.05);
	border-color: rgba(37, 51, 78, 0.1);
}

.mim-notice__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.mim-notice__title {
	font-size: 14px;
	font-weight: 700;
}

.mim-notice__text {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.62));
}

.mim-notice__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.mim-notice__action {
	padding: 8px 14px;
	background: #25334E;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: #F3EFE7;
	cursor: pointer;
	white-space: nowrap;
}

.mim-notice__close {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	font-size: 20px;
	line-height: 1;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.5));
	cursor: pointer;
}

.mim-notice__close:hover {
	background: rgba(37, 51, 78, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   Debt
   ═══════════════════════════════════════════════════════════ */

.mim-debt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	/* The tab is money owed. It gets the one saturated surface on the page so
	   it cannot be scrolled past. */
	background: linear-gradient(135deg, #25334E, #33456B);
	color: #F3EFE7;
}

.mim-debt--clear {
	background: linear-gradient(135deg, #2F6B4F, #3E8A66);
}

.mim-debt__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	opacity: 0.82;
}

.mim-debt__value {
	margin: 0;
	font-family: var(--mim-font-latin, inherit);
	font-size: clamp(26px, 5vw, 36px);
	font-weight: 800;
	line-height: 1.1;
}

.mim-debt__currency {
	font-size: 0.45em;
	font-weight: 600;
	opacity: 0.75;
}

.mim-debt__meta {
	margin: 8px 0 0;
	font-size: 12.5px;
	opacity: 0.75;
}

.mim-debt__pay {
	background: #F3EFE7;
	color: #25334E;
	border: 0;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Credit ledger
   ═══════════════════════════════════════════════════════════ */

/* The ledger's three figures share the dashboard's stat row, but that row is
   built for however many cards it is given — this pins it at three so the
   balance, the total and the paid amount stay on one line. */
.mim-dash__stats--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mim-stat--debt .mim-stat__value {
	color: #B3453F;
}

.mim-credit__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}

.mim-credit__note {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: rgba(37, 51, 78, 0.05);
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.8;
}

.mim-credit__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mim-credit__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px dashed rgba(37, 51, 78, 0.12);
}

.mim-credit__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mim-credit__row.is-void {
	opacity: 0.45;
	text-decoration: line-through;
}

.mim-credit__row-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mim-credit__row-main strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.mim-credit__row-date {
	font-size: 11.5px;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.55));
}

.mim-credit__amount {
	flex: 0 0 auto;
	font-family: var(--mim-font-latin, inherit);
	font-size: 15px;
	font-weight: 700;
}

.mim-credit__amount--paid {
	color: #2F6B4F;
}

/* ═══════════════════════════════════════════════════════════
   Rank ladder
   ═══════════════════════════════════════════════════════════ */

.mim-ranks {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	counter-reset: rank;
}

.mim-rank {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
	padding: 16px 18px;
	background: var(--mim-acard-bg, #FFF);
	border: 1px solid rgba(37, 51, 78, 0.1);
	border-radius: 18px;
	/* Unearned rungs are visible but recessive — you can see where you are
	   going without the list shouting every step at once. */
	opacity: 0.62;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mim-rank.is-earned {
	opacity: 1;
}

.mim-rank.is-current {
	border-color: var(--mim-rank-to);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--mim-rank-to) 40%, transparent);
	transform: translateX(0);
}

.mim-rank__medal {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: rgba(37, 51, 78, 0.05);
	border-radius: 14px;
}

.mim-rank__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.mim-rank__name {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 700;
}

.mim-rank__you {
	padding: 3px 9px;
	background: var(--mim-rank-to);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: #25334E;
}

.mim-rank__blurb {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.6));
}

.mim-rank__threshold {
	flex: 0 0 auto;
	font-family: var(--mim-font-latin, inherit);
	font-size: 13px;
	font-weight: 700;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.6));
}

.mim-rank__tick {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: rgba(47, 107, 79, 0.14);
	border-radius: 50%;
	color: #2F6B4F;
	font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   Promotion
   ═══════════════════════════════════════════════════════════ */

.mim-rankup {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(20, 27, 41, 0.55);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}

.mim-rankup.is-open {
	opacity: 1;
	visibility: visible;
}

.mim-rankup__card {
	position: relative;
	width: min(400px, 100%);
	padding: 40px 30px 30px;
	overflow: hidden;
	background: #FFF;
	border-radius: 26px;
	text-align: center;
	transform: translateY(16px) scale(0.96);
	transition: transform 0.42s cubic-bezier(0.2, 1.1, 0.35, 1);
}

.mim-rankup.is-open .mim-rankup__card {
	transform: none;
}

/* A soft halo in the tier's own colours behind the medal — the celebration is
   the rank's colour arriving, not confetti. */
.mim-rankup__burst {
	position: absolute;
	inset-block-start: -120px;
	/*
	 * Physical `left`, deliberately.
	 *
	 * `translateX` is physical — a positive value moves right whatever the
	 * writing mode — while `inset-inline-start` flips to `right` under RTL. Pair
	 * them and the two disagree: the halo is placed from the right edge and then
	 * dragged left by half its own width, landing a long way off centre and
	 * hanging 340px of element past the edge of a phone.
	 *
	 * `left: 50%` with `translateX(-50%)` is genuinely centred in both
	 * directions, because both halves of it are physical. This is centring, not
	 * direction, and centring has no handedness.
	 */
	left: 50%;
	width: 340px;
	height: 340px;
	transform: translateX(-50%);
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--mim-rank-to) 55%, transparent) 0%,
		transparent 68%
	);
	pointer-events: none;
}

.mim-rankup__medal {
	position: relative;
	display: grid;
	place-items: center;
	width: 108px;
	height: 108px;
	margin: 0 auto 18px;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0 12px 34px -16px rgba(37, 51, 78, 0.5);
	animation: mim-rank-pop 0.7s cubic-bezier(0.2, 1.2, 0.3, 1) 0.1s both;
}

@keyframes mim-rank-pop {
	from { transform: scale(0.4) rotate(-14deg); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mim-rankup__card,
	.mim-rankup__medal {
		animation: none;
		transition: none;
		transform: none;
	}
}

.mim-rankup__kicker {
	position: relative;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(37, 51, 78, 0.6);
}

.mim-rankup__title {
	position: relative;
	margin: 0 0 10px;
	font-size: clamp(24px, 5vw, 30px);
	font-weight: 800;
}

.mim-rankup__text {
	position: relative;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.9;
	color: rgba(37, 51, 78, 0.72);
}

.mim-rankup__from {
	position: relative;
	margin: 0 0 22px;
	padding: 9px 14px;
	background: rgba(37, 51, 78, 0.05);
	border-radius: 12px;
	font-size: 12.5px;
	color: rgba(37, 51, 78, 0.7);
}

/* ═══════════════════════════════════════════════════════════
   Verification
   ═══════════════════════════════════════════════════════════ */

.mim-verify__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.mim-verify__badge {
	padding: 5px 12px;
	background: rgba(224, 164, 88, 0.16);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #8A5A17;
}

.mim-verify.is-verified .mim-verify__badge {
	background: rgba(47, 107, 79, 0.14);
	color: #2F6B4F;
}

.mim-verify__number {
	margin: 0 0 10px;
	font-family: var(--mim-font-latin, inherit);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.mim-verify__text {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.62));
}

/* The code form only appears once a code has actually been requested — an
   empty box asking for a number nobody has been sent is just confusing. */
.mim-verify__form {
	display: none;
	margin-top: 14px;
}

.mim-verify.is-sent .mim-verify__form {
	display: block;
}

.mim-verify__row {
	display: flex;
	gap: 8px;
	margin-top: 7px;
}

.mim-verify__row .mim-account__input {
	flex: 1 1 auto;
	max-width: 160px;
	letter-spacing: 0.4em;
	text-align: center;
}

.mim-verify__status {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.8;
}

.mim-verify__status--ok {
	color: #2F6B4F;
}

.mim-verify__status--warn {
	color: #A5322E;
}

/* ═══════════════════════════════════════════════════════════
   Story capture flash
   ═══════════════════════════════════════════════════════════ */

.mim-story-flash {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #FFF;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.26s ease;
}

.mim-story-flash.is-on {
	opacity: 1;
	transition-duration: 0.06s;
}

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 780px) {
	.mim-credit__cols {
		grid-template-columns: 1fr;
	}

	.mim-dash__stats--three {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	/* Deferring to the widget rather than restating a number.
	   The control writes --mim-cover-h per device; a literal height here would
	   silently disagree with whatever was configured. */
	.mim-profile__cover {
		height: var(--mim-cover-h, 132px);
	}

	/* Matches the specificity of the desktop rule above.
	 *
	 * That rule had to go two selectors deep to beat a theme's blanket
	 * `img { border-radius }`, and in doing so it also beat this one — which
	 * left a 132px image inside a 108px frame on every phone. Both halves of a
	 * responsive pair have to weigh the same. */
	.mim-profile .mim-profile__face-wrap,
	.mim-profile .mim-profile__face-wrap .mim-profile__face,
	.mim-profile img.mim-profile__face {
		width: 108px;
		height: 108px;
	}

	.mim-profile .mim-profile__face-wrap {
		margin-top: -54px;
	}

	/* Four stats will not fit across a phone without truncating every one of
	   them to two characters, so they wrap into two rows of two. */
	.mim-profile__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 8px;
	}

	.mim-profile__stat:nth-child(odd) {
		border-inline-start: 0;
	}

	.mim-profile__stat:nth-child(3) {
		border-inline-start: 0;
	}

	.mim-notice {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.mim-notice__tools {
		justify-content: space-between;
	}

	.mim-notice__action {
		flex: 1 1 auto;
	}

	.mim-debt {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.mim-debt__pay {
		width: 100%;
	}

	.mim-rank {
		padding: 14px;
		gap: 11px;
	}

	.mim-rank__medal {
		width: 40px;
		height: 40px;
	}

	.mim-rank__threshold {
		font-size: 11.5px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Just-purchased banner

   Stands in for WooCommerce's thank-you page, which the shop no longer
   sends people to. Green, once, at the top of the orders they came to see.
   ═══════════════════════════════════════════════════════════ */

.mim-purchase {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #2F6B4F, #3E8A66);
	border-radius: 18px;
	color: #F3EFE7;
}

.mim-purchase__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mim-purchase__title {
	font-size: 15px;
	font-weight: 800;
}

.mim-purchase__text {
	font-size: 13px;
	line-height: 1.8;
	opacity: .88;
}

.mim-purchase__link {
	flex: 0 0 auto;
	background: #F3EFE7;
	color: #2F6B4F;
	border: 0;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.mim-purchase {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.mim-purchase__link {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════
   Fold-out

   A native <details>. It opens with no JavaScript, is keyboard-operable for
   free, and the browser owns the open/closed state — three things a scripted
   accordion has to reimplement and usually gets partly wrong.
   ═══════════════════════════════════════════════════════════ */

.mim-fold {
	margin-top: 22px;
	overflow: hidden;
	background: var(--mim-acard-bg, #FFF);
	border: 1px solid rgba(37, 51, 78, .1);
	border-radius: 20px;
}

.mim-fold__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Safari draws its own triangle through a shadow pseudo-element that
   list-style alone will not remove. */
.mim-fold__head::-webkit-details-marker {
	display: none;
}

.mim-fold__head:hover {
	background: rgba(37, 51, 78, .03);
}

.mim-fold__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgba(37, 51, 78, .06);
	border-radius: 13px;
}

.mim-fold__glyph {
	width: 19px;
	height: 19px;
}

.mim-fold__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.mim-fold__title {
	font-size: 15px;
	font-weight: 700;
}

.mim-fold__meta {
	font-size: 12.5px;
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
}

/* A chevron built from a rotated square: no icon file, and it turns with the
   open state rather than being swapped for a second glyph. */
.mim-fold__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	opacity: .5;
	transition: transform .25s ease;
}

.mim-fold[open] .mim-fold__chevron {
	transform: rotate(225deg);
}

.mim-fold__body {
	padding: 4px 20px 20px;
	border-top: 1px solid rgba(37, 51, 78, .08);
}

.mim-fold[open] .mim-fold__body {
	animation: mim-fold-in .28s ease both;
}

@keyframes mim-fold-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mim-fold__chevron,
	.mim-fold[open] .mim-fold__body {
		transition: none;
		animation: none;
	}
}

@media (max-width: 560px) {
	.mim-fold__head {
		padding: 14px 16px;
		gap: 11px;
	}

	.mim-fold__body {
		padding: 4px 14px 16px;
	}

	.mim-fold__icon {
		width: 34px;
		height: 34px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Artwork picker

   Replaces the two scrolling thumbnail strips that used to sit at the bottom
   of the profile card. A dialog gives the grid room to breathe, puts upload
   first where people look for it, and hands the card back its proportions.
   ═══════════════════════════════════════════════════════════ */

.mim-picker {
	position: fixed;
	inset: 0;
	z-index: 9992;
	display: grid;
	place-items: end center;
	opacity: 0;
	transition: opacity .22s ease;
}

.mim-picker[hidden] {
	display: none;
}

.mim-picker.is-open {
	opacity: 1;
}

.mim-picker__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 27, 41, .55);
	backdrop-filter: blur(3px);
}

.mim-picker__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: 88svh;
	overflow-y: auto;
	padding: 20px 22px 24px;
	background: var(--mim-acard-bg, #FFF);
	color: var(--mim-account-ink, #25334E);
	/* A sheet on a phone, a centred card on a desktop — the same element in
	   two postures, so there is only one thing to style. */
	border-radius: 26px 26px 0 0;
	transform: translateY(16px);
	transition: transform .28s cubic-bezier(.2, .9, .3, 1);
}

.mim-picker.is-open .mim-picker__panel {
	transform: none;
}

@media (min-width: 640px) {
	.mim-picker {
		place-items: center;
	}

	.mim-picker__panel {
		border-radius: 24px;
		max-height: 82svh;
	}
}

.mim-picker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.mim-picker__title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

.mim-picker__x {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba(37, 51, 78, .07);
	border: 0;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

.mim-picker__x:hover {
	background: rgba(37, 51, 78, .14);
}

/* ── The grid ─────────────────────────────────────────────── */

.mim-picker__grid {
	display: grid;
	gap: 12px;
}

/* Auto-fitting rather than a fixed count.
 *
 * A fixed two or four columns meant the tiles grew with the dialog: on a
 * desktop the ten covers became ten enormous slabs you had to scroll through.
 * A minimum tile width instead keeps them small and lets the row count follow
 * the space available. */
.mim-picker__grid--cover {
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px;
}

.mim-picker__grid--avatar {
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 10px;
}

.mim-picker__tile {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: rgba(37, 51, 78, .05);
	border: 2px solid transparent;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .18s, transform .18s;
}

/* The shipped covers are 16:9. Framing the thumbnail at 3:1 threw away the
   top and bottom of every one of them, so the tiles were all sky or all
   table and told you nothing about which was which. */
.mim-picker__grid--cover .mim-picker__tile {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
}

.mim-picker__grid--avatar .mim-picker__tile {
	aspect-ratio: 1;
	border-radius: 50%;
}

.mim-picker__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mim-picker__tile:hover {
	transform: translateY(-2px);
}

.mim-picker__tile.is-selected {
	border-color: var(--mim-rank-to, #0466C8);
}

.mim-picker__tile:focus-visible {
	outline: 2px solid var(--mim-rank-to, #0466C8);
	outline-offset: 2px;
}

/* Upload leads the grid. It is what most people opened the dialog for, and
   burying it at the end of a scroll is why nobody found it before. */
.mim-picker__tile--upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: rgba(37, 51, 78, .04);
	border-style: dashed;
	border-color: rgba(37, 51, 78, .28);
	text-align: center;
}

.mim-picker__tile--upload:hover {
	border-color: var(--mim-rank-to, #0466C8);
	background: rgba(4, 102, 200, .06);
}

.mim-picker__upload-icon {
	display: grid;
	place-items: center;
}

.mim-picker__glyph {
	width: 20px;
	height: 20px;
}

.mim-picker__upload-text {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	padding-inline: 4px;
}

/* On the round grid there is no room for a caption next to a 20px icon. */
.mim-picker__grid--avatar .mim-picker__upload-text {
	font-size: 10px;
}

.mim-picker__hint {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
}

/* The body must not scroll behind an open sheet. */
body.mim-no-scroll {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.mim-picker,
	.mim-picker__panel,
	.mim-picker__tile {
		transition: none;
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Small and very wide phones

   A 427×616 window is not a rare case — it is a phone in landscape, and a
   folded device in either orientation. The profile card has to hold together
   at both extremes.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 430px) {
	.mim-picker__grid--avatar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mim-picker__grid--cover {
		grid-template-columns: 1fr;
	}

	.mim-picker__panel {
		padding: 18px 16px 22px;
	}
}

/* The four stats become two rows of two below 560px. The favourite item is
   the one that overflows — it is a whole product name in a quarter of a
   phone — so it gets two lines there instead of an ellipsis that hides it. */
@media (max-width: 560px) {
	.mim-profile__stat-value {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.3;
	}

	.mim-profile__stats {
		align-items: start;
	}
}

/* Short viewports: a landscape phone has barely 380px of height, and a 168px
   cover plus a 132px avatar eats all of it before a single number appears. */
@media (max-height: 560px) and (orientation: landscape) {
	.mim-profile__cover {
		height: var(--mim-cover-h, 110px);
	}

	.mim-profile .mim-profile__face-wrap,
	.mim-profile .mim-profile__face-wrap .mim-profile__face,
	.mim-profile img.mim-profile__face {
		width: 88px;
		height: 88px;
	}

	.mim-profile .mim-profile__face-wrap {
		margin-top: -44px;
		margin-bottom: 10px;
	}

	/* Wide and short is the one shape where four across genuinely fits. */
	.mim-profile__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mim-picker__panel {
		max-height: 94svh;
	}
}

/* ═══════════════════════════════════════════════════════════
   The two-option sheet

   Tapping the cover or the face asks the question first — gallery or upload —
   rather than dropping straight into a grid where the upload option has to be
   hunted for among the thumbnails.
   ═══════════════════════════════════════════════════════════ */

.mim-sheet {
	position: fixed;
	inset: 0;
	z-index: 9993;
	display: grid;
	place-items: end center;
	opacity: 0;
	transition: opacity .2s ease;
}

.mim-sheet[hidden] {
	display: none;
}

.mim-sheet.is-open {
	opacity: 1;
}

.mim-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 27, 41, .5);
}

.mim-sheet__panel {
	position: relative;
	width: min(420px, 100%);
	padding: 18px;
	background: var(--mim-acard-bg, #FFF);
	color: var(--mim-account-ink, #25334E);
	border-radius: 24px 24px 0 0;
	transform: translateY(20px);
	transition: transform .26s cubic-bezier(.2, .9, .3, 1);
}

.mim-sheet.is-open .mim-sheet__panel {
	transform: none;
}

@media (min-width: 640px) {
	.mim-sheet {
		place-items: center;
	}

	.mim-sheet__panel {
		border-radius: 22px;
	}
}

.mim-sheet__title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
}

.mim-sheet__option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin-bottom: 8px;
	padding: 14px 16px;
	background: rgba(37, 51, 78, .04);
	border: 1px solid transparent;
	border-radius: 16px;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color .16s, border-color .16s;
}

.mim-sheet__option:hover {
	background: rgba(37, 51, 78, .07);
	border-color: rgba(37, 51, 78, .12);
}

.mim-sheet__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--mim-acard-bg, #FFF);
	border-radius: 13px;
}

.mim-sheet__glyph {
	width: 19px;
	height: 19px;
}

.mim-sheet__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mim-sheet__text strong {
	font-size: 14.5px;
	font-weight: 700;
}

.mim-sheet__text span {
	font-size: 12px;
	color: var(--mim-account-muted, rgba(37, 51, 78, .58));
}

.mim-sheet__cancel {
	width: 100%;
	margin-top: 6px;
	padding: 12px;
	background: none;
	border: 0;
	border-radius: 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--mim-account-muted, rgba(37, 51, 78, .58));
	cursor: pointer;
}

.mim-sheet__cancel:hover {
	background: rgba(37, 51, 78, .05);
}

@media (prefers-reduced-motion: reduce) {
	.mim-sheet,
	.mim-sheet__panel {
		transition: none;
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Framing the cover
   ═══════════════════════════════════════════════════════════ */

.mim-profile__cover.is-framing {
	cursor: grab;
	/* Nothing else should react while the image is being dragged — a text
	   selection halfway through a drag is what makes this feel broken. */
	user-select: none;
	touch-action: none;
}

.mim-profile__cover.is-framing::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85);
	pointer-events: none;
}

.mim-profile__cover.is-framing:active {
	cursor: grabbing;
}

.mim-profile__frame-hint {
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 9px 14px;
	background: rgba(20, 27, 41, .82);
	border-radius: 12px;
	font-size: 12px;
	line-height: 1.6;
	color: #F3EFE7;
	backdrop-filter: blur(6px);
}

.mim-profile__frame-hint[hidden] {
	display: none;
}

.mim-profile__frame-done {
	flex: 0 0 auto;
	padding: 6px 16px;
	background: #F3EFE7;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: 12px;
	color: #25334E;
	cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   Gender, at sign-up
   ═══════════════════════════════════════════════════════════ */

.mim-auth__gender {
	margin-bottom: 18px;
}

.mim-auth__gender-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mim-auth__gender-btn {
	flex: 1 1 auto;
	text-align: center;
	user-select: none;
	padding: 10px 14px;
	background: #F7F5F0;
	border: 1.5px solid var(--mim-auth-line, #E4DFD5);
	border-radius: 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mim-auth-ink, #25334E);
	cursor: pointer;
	transition: border-color .16s, background-color .16s;
}

.mim-auth__gender-btn:hover {
	border-color: var(--mim-auth-accent, #25334E);
}

/* The input is the state; the label is the control. Hidden rather than
   removed, so the keyboard can still reach it and focus is visible. */
.mim-auth__gender-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mim-auth__gender-input:checked + .mim-auth__gender-btn,
.mim-auth__gender-btn.is-active {
	background: var(--mim-auth-accent, #25334E);
	border-color: var(--mim-auth-accent, #25334E);
	color: #F3EFE7;
}

.mim-auth__gender-input:focus-visible + .mim-auth__gender-btn {
	outline: 2px solid var(--mim-auth-accent, #25334E);
	outline-offset: 2px;
}

.mim-auth__thumb[hidden] {
	display: none;
}

/* ═══════════════════════════════════════════════════════════
   Holding the line against the page builder

   Elementor sets global colours on `a`, `button` and every heading, and it
   loads after this file. That is how the header icons came out purple, why
   "کافه" and "فروشگاه" on the orders filter turned into links, and why the
   profile name picked up a heading colour nobody chose.

   Everything below is scoped to this plugin's own components. It never
   touches the rest of the page, and it uses `currentColor` and `inherit` so
   the widget's own Elementor controls still win — the point is to stop
   *global* styles leaking in, not to stop the designer styling anything.
   ═══════════════════════════════════════════════════════════ */

.mim-header__action,
.mim-header__action:hover,
.mim-header__action:focus,
.mim-header__action:visited {
	color: var(--mim-header-ink, #25334E);
	text-decoration: none;
}

/* An icon marked "keep your own colours" is an <img>, and nothing should be
   painting behind it. */
.mim-header__action--keep-colors .mim-icon {
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
}

/* Inline SVG icons follow the element's colour and nothing else. */
.mim-header .mim-icon,
.mim-account .mim-icon,
.mim-profile .mim-icon,
.mim-orderbar .mim-icon,
.mim-cartbadge .mim-icon {
	fill: currentColor;
	background: none;
}

/* A stroke-drawn icon must stay hollow whatever a stylesheet above decided
   about `fill` on SVGs. */
.mim-icon[fill="none"],
.mim-icon[fill="none"] path {
	fill: none;
}

/* ── Buttons and chips ─────────────────────────────────────── */

.mim-account__chip,
.mim-account__tab,
.mim-abtn,
.mim-auth__submit,
.mim-auth__switch-btn,
.mim-auth__gender-btn,
.mim-profile__tool,
.mim-profile__face-btn,
.mim-sheet__option,
.mim-picker__tile,
.mim-fold__head,
.mim-notice__action {
	font-family: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}

.mim-account__chip,
.mim-account__chip:hover,
.mim-account__chip:focus,
.mim-account__tab,
.mim-account__tab:hover,
.mim-account__tab:focus {
	/* The filter chips are buttons, not links — Elementor's link colour has no
	   business anywhere near them. */
	color: var(--mim-account-ink, #25334E);
}

.mim-abtn,
.mim-abtn:hover,
.mim-abtn:focus,
.mim-abtn:visited {
	text-decoration: none;
}

/* ── Headings ──────────────────────────────────────────────── */

.mim-profile__name,
.mim-profile__nickname,
.mim-account__title,
.mim-acard__title,
.mim-dash__title,
.mim-fold__title,
.mim-picker__title,
.mim-sheet__title,
.mim-auth__title {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.mim-profile__name {
	color: var(--mim-account-ink, #25334E);
}

.mim-profile__nickname {
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
}

/* ── Links inside our cards ────────────────────────────────── */

.mim-profile a,
.mim-account__panel a:not(.mim-abtn):not(.button) {
	color: inherit;
}

/* ── Centring on a phone ───────────────────────────────────── */

/* The profile body is a centred column, but a theme that sets `text-align:
   right` on headings undoes it for exactly the two lines that matter. */
.mim-profile__body,
.mim-profile__name,
.mim-profile__nickname,
.mim-profile__rank,
.mim-profile__progress-text {
	text-align: center;
}

.mim-profile__name {
	justify-content: center;
}

/* ── The cover and the face are themselves the control ─────── */

.mim-profile__cover {
	cursor: pointer;
}

.mim-profile__face-wrap {
	cursor: pointer;
}

/* Only the framing mode overrides that, because there the drag is the point. */
.mim-profile__cover.is-framing {
	cursor: grab;
}

/* ═══════════════════════════════════════════════════════════
   Medals that survive a small screen

   The medal is sized in `em`, and on a phone the name shrinks — so the badge
   shrank with it until it was a few pixels of gradient nobody could see. Below
   the phone breakpoint it gets a floor in pixels and refuses to be squeezed
   by the flex row it sits in.
   ═══════════════════════════════════════════════════════════ */

.mim-medal-wrap {
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.mim-medal--name,
	.mim-medal--inline {
		width: 18px;
		height: 18px;
		min-width: 18px;
		min-height: 18px;
	}

	.mim-profile__rank-disc {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
	}

	.mim-profile__rank .mim-medal--chip {
		width: 15px;
		height: 15px;
		min-width: 15px;
		min-height: 15px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Nothing here may touch the medal's fill.

   This is the whole reason the badge was invisible, and it is worth spelling
   out so it is never "fixed" back.

   A medal paints through `fill="url(#gradient)"` written as a presentation
   attribute on each path. A CSS rule — *any* CSS rule — beats a presentation
   attribute. The guard that used to sit here said `fill: inherit`, so every
   path inherited from the root, the root says `fill="none"`, and the medal
   dutifully painted nothing at all. It still occupied its 22px, which is why
   the name beside it also looked off-centre: the text was being pushed over
   by a badge nobody could see.

   The correct amount of CSS for this element is none. The attributes already
   say the right thing.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Intake — this month against last

   Two bars per metric, sharing a scale. The comparison is the content, so the
   bars are the primary object and the numbers annotate them rather than the
   other way round.
   ═══════════════════════════════════════════════════════════ */

.mim-intake {
	margin-top: 22px;
}

.mim-intake__rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.mim-intake__row {
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
	background: rgba(37, 51, 78, .04);
	border-radius: 18px;
}

.mim-intake__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.mim-intake__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
}

/* The question mark is a real button so it is reachable by keyboard, and its
   explanation is a title attribute so it needs no script to be useful. */
.mim-intake__help {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: rgba(37, 51, 78, .1);
	border: 0;
	border-radius: 50%;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
	cursor: help;
}

.mim-intake__help:hover,
.mim-intake__help:focus-visible {
	background: var(--mim-rank-to, #0466C8);
	color: #fff;
}

.mim-intake__delta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	font-size: 13px;
	font-weight: 800;
	font-family: var(--mim-font-latin, inherit);
	color: var(--mim-account-muted, rgba(37, 51, 78, .55));
	text-align: end;
}

/* More caffeine than last month is not automatically bad news, so the colours
   read as direction rather than as praise and blame. */
.mim-intake__delta.is-up { color: #B3763A; }
.mim-intake__delta.is-down { color: #2F6B4F; }

.mim-intake__delta-note {
	font-family: var(--mim-font, inherit);
	font-size: 10px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--mim-account-muted, rgba(37, 51, 78, .5));
}

/* ── The bars ─────────────────────────────────────────────── */

/* 132px was drawn for a chart with an axis and labels inside it. What is
	    actually in here is two bars and a caption underneath, and the extra
	    height only ever showed as empty space above a short month.

	    The bars carry the comparison; making them taller does not make the
	    comparison clearer, it just pushes everything below them off a phone. */
.mim-intake__bars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: end;
	height: 76px;
}

.mim-intake__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
	min-width: 0;
}

.mim-intake__value {
	font-family: var(--mim-font-latin, inherit);
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.mim-intake__track {
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: 52px;
	flex: 1 1 auto;
	min-height: 0;
	background: rgba(37, 51, 78, .07);
	border-radius: 10px 10px 4px 4px;
	overflow: hidden;
}

.mim-intake__fill {
	width: 100%;
	border-radius: 10px 10px 4px 4px;
	transition: height .6s cubic-bezier(.2, .9, .3, 1);
}

/* Last month is the reference and sits back; this month is the subject. */
.mim-intake__bar--last .mim-intake__fill {
	background: rgba(37, 51, 78, .22);
}

.mim-intake__bar--last .mim-intake__value {
	color: var(--mim-account-muted, rgba(37, 51, 78, .55));
}

.mim-intake__bar--this .mim-intake__fill {
	background: linear-gradient(180deg, var(--mim-rank-to, #0466C8), var(--mim-rank-from, #0353A4));
}

[data-metric="caffeine"] .mim-intake__bar--this .mim-intake__fill {
	background: linear-gradient(180deg, #8A5A2B, #5C2E1F);
}

.mim-intake__month {
	font-size: 11px;
	color: var(--mim-account-muted, rgba(37, 51, 78, .55));
}

.mim-intake__unit {
	margin: 10px 0 0;
	font-size: 11px;
	text-align: center;
	color: var(--mim-account-muted, rgba(37, 51, 78, .45));
}

@media (prefers-reduced-motion: reduce) {
	.mim-intake__fill { transition: none; }
}

/* ── Nothing to show yet ──────────────────────────────────── */

/* ── Empty: the chart it will become ──────────────────────── */

/* The invitation sits on top of a blurred, invented version of the real
   chart. Two stacked layers rather than a background image, because the ghost
   has to be the same markup as the live chart — otherwise it drifts out of
   date the first time the chart changes. */
.mim-intake--empty {
	position: relative;
	display: grid;
	padding: 0;
	overflow: hidden;
	text-align: center;
	isolation: isolate;
}

.mim-intake--empty > * {
	grid-area: 1 / 1;
}

.mim-intake__ghost {
	padding: 24px 24px 20px;
	filter: blur(3.5px) saturate(.65);
	opacity: .5;
	user-select: none;
	pointer-events: none;
}

.mim-intake__ghost-title {
	display: block;
	margin-bottom: 14px;
	font-size: 15px;
	font-weight: 700;
	text-align: start;
	color: var(--mim-account-ink, #25334E);
}

/* Each chart after the first needs air above it, but the first must not push
   the card open at the top — the padding already did that. */
.mim-intake__ghost > .mim-intake__ghost-title ~ .mim-intake__ghost-title {
	margin-top: 26px;
}

/* ── Ghost: spend by category ─────────────────────────────── */

.mim-ghost__cats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mim-ghost__cat {
	display: grid;
	grid-template-columns: 62px 1fr 38px;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--mim-account-ink, #25334E);
}

.mim-ghost__cat-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mim-ghost__cat-track {
	height: 10px;
	background: rgba(37, 51, 78, 0.09);
	border-radius: 999px;
	overflow: hidden;
}

.mim-ghost__cat-fill {
	display: block;
	height: 100%;
	background: linear-gradient(
		to left,
		var(--mim-rank-from, #0353A4),
		var(--mim-rank-to, #0466C8)
	);
	border-radius: 999px;
}

.mim-ghost__cat-pct {
	font-size: 11.5px;
	font-weight: 700;
	text-align: end;
	color: var(--mim-account-muted, rgba(37, 51, 78, 0.55));
}

/* ── Ghost: the last six months ───────────────────────────── */

.mim-ghost__months {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	height: 96px;
	padding-top: 4px;
}

.mim-ghost__month {
	flex: 1 1 0;
	min-width: 0;
	background: linear-gradient(
		to top,
		var(--mim-rank-from, #0353A4),
		var(--mim-rank-to, #0466C8)
	);
	border-radius: 8px 8px 4px 4px;
	opacity: 0.85;
}

.mim-intake__invite {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px 24px;
	/* Densest behind the words, thinning towards both ends.
	   A flat wash over three stacked charts turned the whole card white and
	   there was nothing left to preview; this keeps the top and bottom charts
	   showing while the invitation stays readable in the middle. */
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, .55),
		rgba(255, 255, 255, .93) 32%,
		rgba(255, 255, 255, .93) 68%,
		rgba(255, 255, 255, .55)
	);
}

.mim-intake__ghost-note {
	margin: 2px 0 0;
	font-size: 11.5px;
	color: var(--mim-account-muted, rgba(37, 51, 78, .55));
}

@media (prefers-reduced-motion: no-preference) {
	.mim-intake__ghost {
		transition: filter .3s ease;
	}
}

.mim-intake__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	background: rgba(37, 51, 78, .06);
	border-radius: 18px;
	color: var(--mim-rank-to, #0466C8);
}

.mim-intake__glyph {
	width: 26px;
	height: 26px;
}

.mim-intake__empty-text {
	max-width: 42ch;
	margin: 0 0 6px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
}

@media (max-width: 640px) {
	.mim-intake__rows {
		grid-template-columns: 1fr;
	}

	.mim-intake__bars {
		height: 62px;
	}
}

/* ═══════════════════════════════════════════════════════════
   The header buttons, pinned

   Same lesson as the avatar. `display: grid; place-items: center` centres the
   glyph only while the button is the size it was asked to be — and a theme
   that says `button { width: 100% }` (this one does) stretches it into a
   lozenge with the icon adrift in the middle of it. The size is therefore
   stated four ways, at a specificity a single theme class cannot reach, and
   the centring is written in both the shorthand and the longhands so losing
   one of them does not lose the alignment.
   ═══════════════════════════════════════════════════════════ */

.mim-profile .mim-profile__cover-tools .mim-profile__tool,
.mim-profile button.mim-profile__tool {
	box-sizing: border-box;
	flex: 0 0 38px;
	width: 38px;
	min-width: 38px;
	max-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	place-items: center;
	align-items: center;
	justify-items: center;
	line-height: 0;
	text-align: center;
}

.mim-profile .mim-profile__tool .mim-profile__tool-glyph {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
}

/* The face badge is the same shape problem in a smaller circle. */
.mim-profile .mim-profile__face-wrap .mim-profile__face-btn,
.mim-profile button.mim-profile__face-btn {
	box-sizing: border-box;
	width: 34px;
	min-width: 34px;
	max-width: 34px;
	height: 34px;
	aspect-ratio: 1;
	padding: 0;
	display: grid;
	place-items: center;
	line-height: 0;
}

/* Background off: the icon alone, still the same hit area. */
.mim-profile__cover-tools--bare .mim-profile__tool {
	background: none;
	box-shadow: none;
	backdrop-filter: none;
}

.mim-profile__cover-tools--bare .mim-profile__tool:hover {
	background: none;
}

/* ═══════════════════════════════════════════════════════════
   The name row, pinned

   `align-items: center` on the column already shrink-wraps the heading, so it
   centres — until something gives the heading a width. Then `text-align`
   decides, and a theme heading rule set to `right` wins on specificity. Both
   axes are therefore stated here, on a selector deep enough to hold.
   ═══════════════════════════════════════════════════════════ */

.mim-profile .mim-profile__body {
	align-items: center;
}

.mim-profile .mim-profile__body > .mim-profile__name,
.mim-profile h2.mim-profile__name {
	--mim-medal-slot: calc(max(18px, 0.95em) + 0.25em);

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	margin-inline: auto;
	padding: 0;
	text-align: center;
}

/* An invisible twin of the medal on the opposite side.
 *
 * `justify-content: center` centres the name *and* the badge as one object,
 * which puts the name itself off-centre by half a medal — about eleven pixels,
 * and plainly wrong once you notice it. Balancing the row with an empty slot
 * of exactly the badge's width centres the name, and lets the medal hang
 * beside it where it belongs.
 *
 * Tied to one custom property so the two can never drift apart. */
.mim-profile__name::before {
	content: '';
	flex: 0 0 var(--mim-medal-slot);
	width: var(--mim-medal-slot);
}

/* No badge, no counterweight — otherwise the name leans the other way. */
.mim-profile__name:not(:has(.mim-medal-wrap))::before {
	display: none;
}

.mim-profile .mim-profile__body > .mim-profile__nickname,
.mim-profile .mim-profile__body > .mim-profile__rank {
	margin-inline: auto;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   The medal, on every screen

   It went missing on phones and tablets for two reasons at once. It is sized
   in `em` against a name that shrinks, and it sits in a `nowrap` flex row —
   so once the name was long enough, the flex algorithm took the badge's width
   back down to nothing rather than wrap. A pixel floor fixes the first;
   refusing to shrink fixes the second, and it has to be said on the wrapper
   *and* the SVG because either one collapsing hides it.
   ═══════════════════════════════════════════════════════════ */

.mim-profile__name .mim-medal-wrap,
.mim-medal-wrap {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-width: 0;
}

.mim-profile__name .mim-medal--name,
.mim-medal--name,
.mim-medal--inline {
	flex: 0 0 auto;
	width: max(18px, 0.95em);
	height: max(18px, 0.95em);
	min-width: 18px;
	min-height: 18px;
	visibility: visible;
	opacity: 1;
}

/* A medal paints through `fill="url(#…)"` on its paths and carries
   `fill="none"` on its root. The outline guard for ordinary icons must never
   reach in here and blank those out. */
.mim-medal,
.mim-medal path,
.mim-medal rect {
	visibility: visible;
}

@media (max-width: 1024px) {
	.mim-profile__name .mim-medal--name,
	.mim-medal--name {
		width: 20px;
		height: 20px;
		min-width: 20px;
		min-height: 20px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Cropping, the way a messaging app does it

   The frame is the output shape, the picture moves inside it, and the slider
   is the only other control. No handles to drag, no corners to grab: the
   result is always the same fixed shape, so the only real choices are which
   part of the picture and how close.
   ═══════════════════════════════════════════════════════════ */

.mim-crop[hidden] {
	display: none;
}

.mim-crop {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 4px;
}

.mim-crop__hint {
	margin: 0;
	font-size: 12.5px;
	text-align: center;
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
}

.mim-crop__stage {
	position: relative;
	width: 100%;
	max-width: 340px;
	/* Set inline from the header's configured height, so the frame and the
	   result cannot drift apart. */
	aspect-ratio: var(--mim-crop-ratio, 16 / 9);
	margin-inline: auto;
	overflow: hidden;
	background: #EFEAE0;
	border-radius: 14px;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.mim-crop__stage.is-round {
	aspect-ratio: 1;
	max-width: 240px;
	border-radius: 50%;
}

.mim-crop__stage:active {
	cursor: grabbing;
}

.mim-crop__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

.mim-crop__zoom {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 340px;
	margin-inline: auto;
	width: 100%;
	font-size: 15px;
	color: var(--mim-account-muted, rgba(37, 51, 78, .6));
}

.mim-crop__zoom input {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--mim-rank-to, #0466C8);
}

.mim-crop__actions {
	display: flex;
	gap: 10px;
	max-width: 340px;
	margin-inline: auto;
	width: 100%;
}

.mim-crop .mim-crop__ok,
.mim-crop .mim-crop__cancel,
button.mim-crop__ok,
button.mim-crop__cancel {
	box-sizing: border-box;
	flex: 1 1 0;
	width: auto;
	padding: 11px;
	border: 1.5px solid var(--mim-account-line, #E4DFD5);
	border-radius: 12px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.mim-crop__ok {
	background: var(--mim-rank-to, #0466C8);
	border-color: var(--mim-rank-to, #0466C8);
	color: #FFF;
}

.mim-crop__cancel {
	background: transparent;
	color: var(--mim-account-ink, #25334E);
}

.mim-crop.is-busy {
	opacity: .55;
	pointer-events: none;
}

/* While cropping, the grid of presets is out of the way entirely — two things
   to choose between at once is what makes a dialog confusing. */
.mim-picker__panel.is-cropping .mim-picker__grid,
.mim-picker__panel.is-cropping .mim-picker__hint {
	display: none;
}


/* ── The intake figures ─────────────────────────────────────── */

/*
 * Kalameh, not Space Grotesk.
 *
 * "Mim Sans" is two faces joined by `unicode-range`: Persian letters come from
 * Kalameh and Latin text *and digits* from Space Grotesk. That is deliberate and
 * right nearly everywhere — a price or an order number set in Space Grotesk is
 * cleaner and lines up better.
 *
 * It is wrong here. These figures sit directly under a Persian label and beside
 * a Persian unit, at a size where the change of typeface reads as a mistake
 * rather than as a choice. Naming Kalameh explicitly opts this one number out of
 * the split, because a family named directly is not subject to the ranges that
 * compose "Mim Sans".
 */
.mim-intake__value,
.mim-intake__unit {
	font-family: Kalameh, var(--mim-font, inherit);
	font-feature-settings: "ss01";
}

/* ═══════════════════════════════════════════════════
   The four figures, now that two of them are words
   ═══════════════════════════════════════════════════

   «همیشگیت» and «عادتت» hold a phrase — «مشتری چراغ‌های آخر», «اسپرسو دوبل» —
   where the box used to hold four or five digits. Sized for digits, a phrase
   either overflowed the card or pushed the row taller than the one beside it.

   The same block is what the story image is drawn from, so a value that wraps
   to three lines here is a value that collides with the next one there.
*/
.mim-profile__stat-value {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.mim-profile__stat-value:not(.is-ltr) {
	/* Word values want a smaller, tighter face than a number does — and a cap,
	   so the tallest card cannot set the height of the whole row. */
	font-size: clamp(13px, 3.4vw, 17px);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mim-profile__stat {
	min-width: 0;
}

/*
 * Two across sooner than before.
 *
 * The wrap to 2×2 started at 560px, which was right when all four figures were
 * numbers — four numbers fit across a small tablet comfortably. Two of them are
 * now phrases («بی‌گفتن معلوم است», «اسپرسو دوبل»), and at 600px a quarter of
 * the row is about 130 pixels, which clips every one of them.
 *
 * 720 is above every phone and below the width at which four word-columns stop
 * being cramped.
 */
@media (max-width: 720px) {
	.mim-profile__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 8px;
	}
}

/* ═══════════════════════════════════════════════════════════
   The rank, and the ladder behind it

   The chip was a label that looked like a button, so people tapped it and
   nothing happened. It is a button now, and this is what it opens.
   ═══════════════════════════════════════════════════════════ */

/*
 * The chip, restated in full, because it is a <button> now.
 *
 * The tag changed so the rank can be reached by keyboard and announced as a
 * control. Nothing about it should look any different — but a <button> is in
 * range of every global rule on the page that targets buttons, and this site
 * has one: it sets a 3px corner radius, its own padding, and
 * `display: inline-block`, which collapses the flex row so the medal and the
 * name stack. The result was grey, square-cornered and two lines tall.
 *
 * Turning off the *browser's* button defaults was not enough and was never the
 * problem. What is needed is for every property that gives this chip its
 * appearance to be stated here, so there is nothing left for a global rule to
 * decide. `display` and `white-space` matter most: those are what kept the
 * medal and the name on one line.
 *
 * Two classes deep so it outranks the page builder's own
 * `.elementor-kit-N button`, which is one class plus one element and loads
 * after this file.
 */
.mim-profile .mim-profile__rank,
.mim-profile button.mim-profile__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 8px;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0 0 20px;
	padding: 6px 16px 6px 7px;
	background-color: transparent;
	background-image: linear-gradient(135deg, var(--mim-rank-from), var(--mim-rank-to));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 16px -8px var(--mim-rank-to);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: inherit;
	letter-spacing: normal;
	/* Inherited, not chosen: the card centres its contents, and the chip took
	   that from its parent when it was a paragraph. */
	text-align: inherit;
	text-decoration: none;
	text-transform: none;
	/* `normal`, as it always was. Stacking was `display: inline-block`, which
	   is pinned above — nowrap would be a net holding nothing, and it measures
	   a pixel wider. */
	white-space: normal;
	color: #FFF;
	/* A paragraph sits on the baseline. */
	vertical-align: baseline;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

[dir="rtl"] .mim-profile .mim-profile__rank,
[dir="rtl"] .mim-profile button.mim-profile__rank {
	padding: 6px 7px 6px 16px;
}

/* Silver is pale metal; white on it cannot be read. */
.mim-profile[data-rank="silver"] .mim-profile__rank,
.mim-profile[data-rank="silver"] button.mim-profile__rank {
	color: #25334E;
}

/* The disc holds the medal at a fixed size. A global rule that makes buttons
   `inline-block` also lets their children shrink; this stops that. */
.mim-profile .mim-profile__rank .mim-profile__rank-disc {
	flex: 0 0 auto;
}

/* Hover and active must not move it. The chip never lifted, and a global
   button transition would make it start. */
.mim-profile .mim-profile__rank:hover,
.mim-profile .mim-profile__rank:focus,
.mim-profile .mim-profile__rank:active {
	background-color: transparent;
	background-image: linear-gradient(135deg, var(--mim-rank-from), var(--mim-rank-to));
	box-shadow: 0 6px 16px -8px var(--mim-rank-to);
	transform: none;
}

/* The focus ring stays: invisible to a mouse, and the only thing telling a
   keyboard user where they are. */
.mim-profile .mim-profile__rank:focus-visible {
	outline: 2px solid var(--mim-account-ink, #25334E);
	outline-offset: 3px;
}

/* ── The sheet it opens ────────────────────────────────────── */

/* Taller than the two-option sheet, and scrollable: seven rungs plus a lead
   and a footnote is more than a phone shows at once. */
.mim-sheet__panel--tall {
	width: min(460px, 100%);
	max-height: min(88svh, 720px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mim-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

/* Inside a header the title is no longer the only thing on its row, so it
   stops being centred and stops carrying the bottom margin. */
.mim-sheet__head .mim-sheet__title {
	margin: 0;
	font-size: 16px;
	text-align: start;
}

.mim-sheet__x {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba(37, 51, 78, .07);
	border: 0;
	border-radius: 50%;
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	color: var(--mim-account-ink, #25334E);
	cursor: pointer;
}

.mim-sheet__x:hover {
	background: rgba(37, 51, 78, .14);
}

.mim-sheet__lead {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--mim-account-muted, rgba(37, 51, 78, .62));
}

.mim-sheet__hint {
	margin: 12px 0 4px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--mim-account-muted, rgba(37, 51, 78, .62));
}

/* ── The rungs ─────────────────────────────────────────────── */

.mim-ladder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mim-ladder__row {
	display: grid;
	/* medal · name and requirement · discount. The middle column takes the
	   slack so a long rank name wraps instead of pushing the discount off. */
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(37, 51, 78, .04);
	border: 1.5px solid transparent;
	border-radius: 14px;
}

/* The one they are on. */
.mim-ladder__row.is-now {
	background: rgba(37, 51, 78, .08);
	border-color: var(--mim-rank-to, #25334E);
}

/* Rungs already behind them, dimmed rather than hidden — the ladder only makes
   sense if you can see where you started. */
.mim-ladder__row.is-done {
	opacity: .62;
}

.mim-ladder__medal {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

.mim-medal--ladder {
	width: 20px;
	height: 20px;
}

.mim-ladder__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mim-ladder__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mim-account-ink, #25334E);
}

.mim-ladder__you {
	padding: 1px 8px;
	background: var(--mim-rank-to, #25334E);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	color: #FFF;
}

.mim-profile[data-rank="silver"] .mim-ladder__you {
	color: #25334E;
}

.mim-ladder__need {
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--mim-account-muted, rgba(37, 51, 78, .62));
}

.mim-ladder__off {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--mim-account-ink, #25334E);
	unicode-bidi: isolate;
}

.mim-ladder__off-none {
	font-weight: 600;
	color: var(--mim-account-muted, rgba(37, 51, 78, .4));
}

@media (max-width: 380px) {
	.mim-ladder__row {
		gap: 9px;
		padding: 9px 10px;
	}

	.mim-ladder__medal {
		width: 28px;
		height: 28px;
	}

	.mim-ladder__row {
		grid-template-columns: 28px minmax(0, 1fr) auto;
	}
}

/* ═══════════════════════════════════════════════════════════
   Holding the line against the page builder, part two

   The first pass covered the header, the chips and the headings. It missed
   every <button> inside a dialog — Elementor styles `button` globally, for
   background as well as colour, which is why the «انتخاب از بالستو» row lost
   its grey panel while «تصویر خودم» beside it kept one: the first is a button
   and the second is a label.

   Stated rather than inherited throughout, because `inherit` walks up into
   whatever Elementor put on the ancestor.
   ═══════════════════════════════════════════════════════════ */

.mim-sheet__option,
.mim-sheet__option:hover,
.mim-sheet__option:focus,
.mim-sheet__option:visited,
.mim-picker__tile,
.mim-picker__tile:hover,
.mim-picker__tile:focus {
	color: var(--mim-account-ink, #25334E);
	text-decoration: none;
}

/* The two rows of the sheet are a <button> and a <label>, and they have to
   look identical. Only one of them is something Elementor has an opinion
   about, which is exactly why the opinion has to be overruled here. */
.mim-sheet__option {
	background-color: rgba(37, 51, 78, .04);
	box-shadow: none;
}

.mim-sheet__option:hover {
	background-color: rgba(37, 51, 78, .07);
}

.mim-sheet__text strong {
	color: var(--mim-account-ink, #25334E);
}

.mim-sheet__text span {
	color: var(--mim-account-muted, rgba(37, 51, 78, .58));
}

.mim-sheet__title,
.mim-picker__title {
	color: var(--mim-account-ink, #25334E);
}

.mim-sheet__lead,
.mim-sheet__hint,
.mim-picker__hint {
	color: var(--mim-account-muted, rgba(37, 51, 78, .62));
}

/* Cancel is a quiet control, not a danger. Elementor was painting it in the
   kit's accent, which on this site is a red — and a red «انصراف» reads as
   "this will delete something". */
.mim-sheet__cancel,
.mim-sheet__cancel:hover,
.mim-sheet__cancel:focus {
	background-color: transparent;
	color: var(--mim-account-muted, rgba(37, 51, 78, .58));
	text-decoration: none;
	box-shadow: none;
}

.mim-sheet__cancel:hover {
	background-color: rgba(37, 51, 78, .05);
}

.mim-sheet__x,
.mim-sheet__x:hover,
.mim-sheet__x:focus,
.mim-picker__x,
.mim-picker__x:hover,
.mim-picker__x:focus {
	color: var(--mim-account-ink, #25334E);
}

/* The glyphs inside the sheet follow the row's ink and nothing else. */
.mim-sheet .mim-icon,
.mim-picker .mim-icon {
	fill: currentColor;
	background: none;
}

.mim-profile__rank,
.mim-profile__rank:hover,
.mim-profile__rank:focus,
.mim-profile__rank:visited {
	text-decoration: none;
}

.mim-ladder__name,
.mim-ladder__off {
	color: var(--mim-account-ink, #25334E);
}

.mim-ladder__need,
.mim-ladder__off-none {
	color: var(--mim-account-muted, rgba(37, 51, 78, .62));
}

.mim-profile__bar-pct {
	color: var(--mim-account-ink, #25334E);
}