/**
 * Sign-in and sign-up.
 *
 * Cream page, white card, navy ink — the same pairing the order bar's
 * "مشاهده سفارشات" button uses, so arriving here from the menu does not feel
 * like leaving the site.
 *
 * Every colour is a custom property set by the widget's own controls, so the
 * designer can retune the whole screen from the Elementor panel without
 * touching a rule here.
 */

.mim-auth {
	--mim-auth-ink: #25334E;
	--mim-auth-accent: #25334E;
	--mim-auth-cream: #BAAF91;
	--mim-auth-muted: rgba(37, 51, 78, 0.6);
	--mim-auth-line: #E4DFD5;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding: clamp(16px, 5vw, 56px) var(--mim-gutter, 20px);
	background-color: #F3EFE7;
	color: var(--mim-auth-ink);
	font-family: var(--mim-font, inherit);
	box-sizing: border-box;
}

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

/* ── The card ─────────────────────────────────────────────── */

.mim-auth__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 920px;
	overflow: hidden;
	background: #FFF;
	border-radius: 26px;
	box-shadow: 0 30px 70px -40px rgba(37, 51, 78, 0.55);
}

.mim-auth__card--single {
	grid-template-columns: 1fr;
	max-width: 460px;
}

/* The art column is second in the source so it can never come before the form
   for a screen reader; `order` is what puts it on the requested side. */
.mim-auth--art-start .mim-auth__art {
	order: -1;
}

/* ── Artwork ──────────────────────────────────────────────── */

.mim-auth__art {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 520px;
	padding: 32px;
	background-size: cover;
	background-position: center;
	color: #FFF;
}

.mim-auth__art::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(37, 51, 78, 0.72);
}

.mim-auth__art-body {
	position: relative;
	z-index: 1;
}

.mim-auth__brand {
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
}

.mim-auth__tagline {
	margin: 6px 0 0;
	font-size: 15px;
	opacity: 0.82;
}

/* ── Panel ────────────────────────────────────────────────── */

.mim-auth__panel {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 4vw, 40px);
	background: #FFF;
}

.mim-auth__title {
	margin: 0 0 6px;
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
	line-height: 1.3;
	color: var(--mim-auth-ink);
}

.mim-auth__subtitle {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mim-auth-muted);
}

/* ── The login / register switch ──────────────────────────── */

.mim-auth__switch {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 26px;
	padding: 4px;
	background: #F3EFE7;
	border-radius: 999px;
}

.mim-auth__switch-btn {
	position: relative;
	z-index: 1;
	padding: 10px 8px;
	background: none;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	color: var(--mim-auth-muted);
	cursor: pointer;
	transition: color 0.25s ease;
}

.mim-auth__switch-btn.is-active {
	color: #FFF;
}

.mim-auth__switch-pill {
	position: absolute;
	z-index: 0;
	top: 4px;
	bottom: 4px;
	width: calc(50% - 4px);
	background: var(--mim-auth-accent);
	border-radius: 999px;
	transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* RTL: the first tab sits on the right, so an "active second tab" moves the
   pill left — a negative translate in logical terms. */
.mim-auth__switch-pill {
	inset-inline-start: 4px;
}

.mim-auth[data-mim-view='register'] .mim-auth__switch-pill {
	transform: translateX(var(--mim-auth-pill-shift, -100%));
}

[dir='ltr'] .mim-auth[data-mim-view='register'] .mim-auth__switch-pill {
	--mim-auth-pill-shift: 100%;
}

/* ── Forms ────────────────────────────────────────────────── */

.mim-auth__form {
	display: none;
	flex-direction: column;
}

.mim-auth[data-mim-view='login'] .mim-auth__form--login,
.mim-auth[data-mim-view='register'] .mim-auth__form--register {
	display: flex;
	animation: mim-auth-in 0.35s ease both;
}

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

@media (prefers-reduced-motion: reduce) {
	.mim-auth__form,
	.mim-auth__switch-pill {
		animation: none;
		transition: none;
	}
}

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

.mim-auth__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.mim-auth__field {
	margin-bottom: 16px;
}

.mim-auth__label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mim-auth-ink);
}

.mim-auth__input {
	width: 100%;
	padding: 13px 15px;
	background: #F7F5F0;
	border: 1px solid var(--mim-auth-line);
	border-radius: 14px;
	font: inherit;
	font-size: 15px;
	color: var(--mim-auth-ink);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mim-auth__input:focus {
	outline: none;
	border-color: var(--mim-auth-accent);
	box-shadow: 0 0 0 3px rgba(37, 51, 78, 0.12);
}

.mim-auth__input--ltr {
	direction: ltr;
	text-align: start;
	font-family: var(--mim-font-latin, inherit);
	letter-spacing: 0.04em;
}

.mim-auth__input.is-invalid {
	border-color: #D9534F;
	box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.14);
}

.mim-auth__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--mim-auth-muted);
}

/* Password reveal */

.mim-auth__pass {
	position: relative;
}

.mim-auth__pass .mim-auth__input {
	padding-inline-end: 46px;
}

.mim-auth__eye {
	position: absolute;
	inset-inline-end: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 10px;
	color: var(--mim-auth-muted);
	cursor: pointer;
}

.mim-auth__eye:hover {
	background: #F3EFE7;
	color: var(--mim-auth-ink);
}

.mim-auth__eye-icon {
	width: 18px;
	height: 18px;
}

.mim-auth__eye.is-on {
	color: var(--mim-auth-accent);
}

/* ── Picker ───────────────────────────────────────────────── */

.mim-auth__picker {
	margin-bottom: 20px;
}

.mim-auth__picker-label {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
}

/* Wrapped, not scrolled.
 *
 * A horizontal scroller hides most of the choices behind a gesture nobody is
 * told about — with fourteen faces in the library, four were visible and the
 * rest may as well not have existed. Wrapping shows the whole set at once, and
 * the tiles are small enough that it costs two rows. */
.mim-auth__picker-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 2px;
}

/* Two selectors deep, and the size pinned three ways.
 *
 * A theme that says `button { width: 100% }` — and most of them do — beats a
 * single class, which is how a 62px square thumbnail ended up a full-width
 * pink ellipse: the width stretched, the height did not, and `border-radius:
 * 50%` turned the result into an oval. `flex-basis`, `width` and `aspect-ratio`
 * together mean no single overridden property can distort it again. */
.mim-auth__picker-row .mim-auth__thumb,
button.mim-auth__thumb,
label.mim-auth__thumb {
	flex: 0 0 66px;
	box-sizing: border-box;
	width: 66px;
	min-width: 66px;
	max-width: 66px;
	height: 66px;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	background: #F3EFE7;
	border: 2px solid transparent;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.mim-auth__picker-row.is-round .mim-auth__thumb {
	border-radius: 50%;
}

.mim-auth__picker-row .mim-auth__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

/* The cover strip is wide by nature, so it gets its own shape rather than
   being squeezed into the square the faces use. */
.mim-auth__picker--cover .mim-auth__picker-row .mim-auth__thumb,
.mim-auth__picker--cover button.mim-auth__thumb {
	flex: 0 0 132px;
	width: 132px;
	min-width: 132px;
	max-width: 132px;
	height: 52px;
	aspect-ratio: auto;
	border-radius: 12px;
}

.mim-auth__thumb.is-selected {
	border-color: var(--mim-auth-accent);
	transform: translateY(-2px);
}

.mim-auth__thumb:focus-visible {
	outline: 2px solid var(--mim-auth-accent);
	outline-offset: 2px;
}

/* ── The carried-over identity on step two ────────────────── */

.mim-auth__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 10px 14px;
	background: #F7F5F0;
	border-radius: 16px;
}

.mim-auth__identity-face {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

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

/* ── Buttons ──────────────────────────────────────────────── */

.mim-auth__submit {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 14px 20px;
	background: var(--mim-auth-accent);
	border: 0;
	border-radius: 14px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	color: #F3EFE7;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.2s ease;
}

.mim-auth__submit:hover {
	transform: translateY(-1px);
}

.mim-auth__submit:disabled {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.mim-auth__back {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 6px 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13px;
	color: var(--mim-auth-muted);
	cursor: pointer;
}

.mim-auth__back:hover {
	color: var(--mim-auth-ink);
}

.mim-auth__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 13px;
	color: var(--mim-auth-muted);
	cursor: pointer;
}

.mim-auth__alt {
	margin: 18px 0 0;
	font-size: 13px;
	text-align: center;
	color: var(--mim-auth-muted);
}

.mim-auth__alt a,
.mim-auth__link {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 700;
	color: var(--mim-auth-accent);
	text-decoration: none;
	cursor: pointer;
}

.mim-auth__alt a:hover,
.mim-auth__link:hover {
	text-decoration: underline;
}

.mim-auth__terms {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	color: var(--mim-auth-muted);
}

/* ── Messages ─────────────────────────────────────────────── */

.mim-auth__message {
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.7;
}

.mim-auth__message--error {
	background: rgba(217, 83, 79, 0.1);
	color: #A5322E;
}

.mim-auth__message--ok {
	background: rgba(76, 175, 125, 0.12);
	color: #27714E;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 860px) {
	.mim-auth__card {
		grid-template-columns: 1fr;
		max-width: 460px;
	}

	/* The art becomes a short banner rather than disappearing: it is the only
	   thing on the screen carrying the brand. */
	.mim-auth__art {
		order: -1;
		min-height: 150px;
		padding: 20px;
	}

	.mim-auth__brand {
		font-size: 26px;
	}
}

@media (max-width: 420px) {
	.mim-auth {
		padding: 0;
		background: #FFF;
	}

	.mim-auth__card {
		max-width: none;
		border-radius: 0;
		box-shadow: none;
		min-height: 100svh;
		align-content: start;
	}

	.mim-auth__art {
		min-height: 128px;
	}

	.mim-auth__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mim-auth__panel {
		padding: 22px 18px 34px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Sign-up, on a real phone

   Every child of the panel gets `min-width: 0`. A grid or flex item defaults
   to `min-width: auto`, which means it refuses to shrink below its content —
   and a horizontally scrolling thumbnail strip has very wide content. That is
   the whole reason the form was pushing out past the card.
   ═══════════════════════════════════════════════════════════ */

.mim-auth__panel,
.mim-auth__form,
.mim-auth__step,
.mim-auth__row,
.mim-auth__field,
.mim-auth__picker {
	min-width: 0;
	max-width: 100%;
}

.mim-auth__picker-row {
	/* Scrolls inside itself and never widens its parent. */
	max-width: 100%;
	overscroll-behavior-x: contain;
}

.mim-auth__card {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   Gender

   One question, two answers, nothing else. The earlier version showed a face
   on each tile and offered a third "rather not say" — which turned a
   one-second decision into a three-column layout that read as a form of its
   own, and showed an empty grey disc whenever the avatar folder had no
   matching set to preview.

   The input is a real radio, so the browser owns the state. It has to be
   *visually* removed without being removed from the accessibility tree, and
   without `display: none` — a hidden radio cannot be focused, and keyboard
   users would lose the group entirely.
   ═══════════════════════════════════════════════════════════ */

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

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

/* Three ways at once, because a theme only has to win one of them to put the
   native circle back on the page — which is exactly what happened: the radios
   rendered as six controls beside their own labels. */
.mim-auth__gender-row .mim-auth__gender-input,
input.mim-auth__gender-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
}

.mim-auth__gender-row .mim-auth__gender-btn,
label.mim-auth__gender-btn,
button.mim-auth__gender-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 54px;
	padding: 15px 12px;
	background: #F7F5F0;
	border: 1.5px solid var(--mim-auth-line, #E4DFD5);
	border-radius: 15px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mim-auth-ink, #25334E);
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

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

/* The radio is the source of truth on the sign-up form; the account panel
   uses plain buttons and marks the choice with a class. Both land here. */
.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;
}

/* A tick as well as the fill, so the choice is legible to anyone who cannot
   separate the two grounds by colour alone. */
.mim-auth__gender-input:checked + .mim-auth__gender-btn::after,
.mim-auth__gender-btn.is-active::after {
	content: '¹3';
	font-size: 13px;
	line-height: 1;
	opacity: .85;
}

/* Focus has to be visible on the label, because the thing actually focused is
   a pixel of clipped input nobody can see. */
.mim-auth__gender-input:focus-visible + .mim-auth__gender-btn {
	outline: 2px solid var(--mim-auth-accent, #25334E);
	outline-offset: 2px;
}

@media (max-width: 380px) {
	.mim-auth__gender-btn {
		padding: 13px 8px;
		font-size: 13px;
	}
}

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

/* ═══════════════════════════════════════════════════════════
   Cropping at sign-up
   ═══════════════════════════════════════════════════════════ */

.mim-auth__own {
	margin-top: 10px;
}

.mim-auth__own-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: #F7F5F0;
	border: 1.5px dashed var(--mim-auth-line, #E4DFD5);
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mim-auth-ink, #25334E);
	cursor: pointer;
	transition: border-color .16s, background-color .16s;
}

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

.mim-auth__own.has-own .mim-auth__own-btn {
	border-style: solid;
	border-color: var(--mim-auth-accent, #25334E);
	background: #fff;
}

.mim-auth__own-glyph {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

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

.mim-auth__crop {
	margin-top: 12px;
	padding: 14px;
	background: #F7F5F0;
	border-radius: 16px;
}

.mim-auth__crop-hint {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--mim-auth-muted, rgba(37, 51, 78, .6));
}

/* The stage is exactly the shape the export will be, so what is framed here
   is what comes out — no second guess between preview and result. */
.mim-auth__crop-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mim-crop-ratio, 1);
	max-width: 260px;
	margin-inline: auto;
	overflow: hidden;
	background: #EFEAE0;
	border-radius: 14px;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.mim-auth__crop-stage.is-round {
	border-radius: 50%;
	max-width: 190px;
}

.mim-auth__crop-stage:active {
	cursor: grabbing;
}

.mim-auth__crop-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.mim-auth__crop-zoom {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--mim-auth-muted, rgba(37, 51, 78, .6));
}

.mim-auth__crop-zoom input {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--mim-auth-accent, #25334E);
}

.mim-auth__crop-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.mim-auth__crop-ok,
.mim-auth__crop-cancel {
	flex: 1 1 auto;
	padding: 10px;
	border: 1px solid var(--mim-auth-line, #E4DFD5);
	border-radius: 11px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.mim-auth__crop-ok {
	background: var(--mim-auth-accent, #25334E);
	border-color: var(--mim-auth-accent, #25334E);
	color: #FFFFFF;
}

.mim-auth__crop-cancel {
	background: transparent;
	color: var(--mim-auth-ink, #25334E);
}

/* ═══════════════════════════════════════════════════════════
   Optional fields on sign-up
   ═══════════════════════════════════════════════════════════ */

.mim-auth__optional {
	font-weight: 500;
	font-size: 0.86em;
	opacity: 0.65;
}

/* The explanation sits above the control, not below it.
   "Why are you asking me this" has to be answered before the field is filled
   in, not after — underneath, it is read only by people who already refused. */
.mim-auth__hint--above {
	display: block;
	margin-bottom: 8px;
	margin-top: 0;
	line-height: 1.75;
}

.mim-auth__birth {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   Same defence, on the sign-in card

   «ورود» and «ثبت‌نام» are the two controls a first-time visitor sees before
   anything else on this site, and the page builder was painting both of them
   its link colour — so the tab you are already on and the one you are not
   looked the same, in a colour neither of them chose.
   ═══════════════════════════════════════════════════════════ */

.mim-auth__switch-btn,
.mim-auth__switch-btn:hover,
.mim-auth__switch-btn:focus,
.mim-auth__switch-btn:visited {
	background-color: transparent;
	color: var(--mim-auth-muted, rgba(37, 51, 78, .6));
	text-decoration: none;
	box-shadow: none;
}

.mim-auth__switch-btn.is-active,
.mim-auth__switch-btn.is-active:hover,
.mim-auth__switch-btn.is-active:focus {
	color: var(--mim-auth-ink, #25334E);
}

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

.mim-auth__gender-btn,
.mim-auth__gender-btn:hover,
.mim-auth__gender-btn:focus {
	color: var(--mim-auth-ink, #25334E);
	text-decoration: none;
}

.mim-auth__gender-input:checked + .mim-auth__gender-btn,
.mim-auth__gender-btn.is-active {
	color: #F3EFE7;
}