/*
 * App layer — the surfaces that only exist once the site is installed.
 *
 * Three components: the five-item bottom navigation bar, the search sheet it
 * opens, and the install invitation. All three are printed on every front-end
 * page and hidden here, because the bar in particular has to be in the very
 * first paint of an installed app — building it in JavaScript would show the
 * page once without it and then reflow.
 *
 * Visibility rule, in one place:
 *   html.mg-app                 -> installed app (PWA standalone or Android TWA)
 *   .mg-appnav--always + ≤720px -> owner chose to show it in the mobile browser too
 *
 * Colours are checked against the WCAG AA threshold in both schemes; the muted
 * label colour is #56677b (5.3:1 on the bar) rather than the site's --mg-faint,
 * which is 3.04:1 and would fail at this size.
 */

.mg-app,
.mg-app body {
	/* Own scroll containment: an installed app has no browser chrome to absorb
	   overscroll, so a rubber-band bounce reveals the page background. */
	overscroll-behavior-y: none;
}

:root {
	--mg-appnav-h: 60px;
	--mg-layer-appnav: 860;
	--mg-layer-install: 880;
	--mg-layer-appsearch: 920;
}

/* ==========================================================================
   Bottom navigation
   ========================================================================== */

.mg-appnav {
	display: none;
	position: fixed;
	z-index: var(--mg-layer-appnav);
	inset-inline: 0;
	inset-block-end: 0;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	align-items: stretch;
	padding: 4px 4px max(4px, env(safe-area-inset-bottom));
	border-block-start: 1px solid rgba(11, 19, 32, .1);
	background: rgba(255, 255, 255, .93);
	box-shadow: 0 -12px 36px -22px rgba(7, 26, 40, .55);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	font-family: inherit;
}

.mg-app .mg-appnav { display: grid; }

/* The browser-wide option is a mobile pattern only; on a desktop viewport the
   site's own header already carries these five destinations, so the opt-in is
   scoped to the phone breakpoint rather than switched off again above it. */
@media (max-width: 720px) {
	.mg-appnav--always { display: grid; }
}

.mg-appnav__i {
	display: flex;
	min-height: 52px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 2px;
	border: 0;
	border-radius: 14px;
	appearance: none;
	background: transparent;
	color: #56677b;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.mg-appnav__i:hover { color: #0b1320; }
.mg-appnav__i:active { transform: scale(.94); }

.mg-appnav__i:focus-visible {
	outline: 3px solid var(--mg-focus, #ffbf47);
	outline-offset: -3px;
}

.mg-appnav__ic {
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
}

.mg-appnav__ic svg {
	width: 23px;
	height: 23px;
	display: block;
}

.mg-appnav__t {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mg-appnav__i.is-active {
	background: rgba(0, 103, 177, .1);
	color: #0059a0;
	font-weight: 800;
}

.mg-appnav__i.is-active .mg-appnav__ic svg { stroke-width: 2.1; }

/* Room for the bar, and for anchors that would otherwise land under it. */
.mg-app body:not(.wp-admin) {
	padding-block-end: calc(var(--mg-appnav-h) + env(safe-area-inset-bottom)) !important;
}
.mg-app { scroll-padding-block-end: calc(var(--mg-appnav-h) + 12px); }

/* The always-on variant carries a body class from PHP rather than being matched
   with :has(), so the reserved space does not depend on selector support. */
@media (max-width: 720px) {
	body.mg-appnav-always:not(.wp-admin) {
		padding-block-end: calc(var(--mg-appnav-h) + env(safe-area-inset-bottom));
	}
}

/*
 * The site already has a fixed bottom bar on mobile — the «درخواست مشاوره /
 * تماس» conversion strip, and a floating contact button above it. Two docked
 * bars stacked on each other is the failure this prevents: wherever the app bar
 * shows, that strip is hidden and its call-to-action lives in the site header
 * and the contact page, both one tap away.
 */
.mg-app .mg-mobile-conversion,
.mg-app .mg-fab {
	display: none !important;
}

/* In the browser-only variant the app bar exists just on phones, so the strip
   is suppressed only there — the desktop floating contact button is untouched. */
@media (max-width: 720px) {
	body.mg-appnav-always .mg-mobile-conversion { display: none !important; }
}

/* ==========================================================================
   Search sheet
   ========================================================================== */

.mg-appsearch {
	position: fixed;
	z-index: var(--mg-layer-appsearch);
	inset: 0;
	display: grid;
	align-items: end;
}

.mg-appsearch[hidden] { display: none; }

.mg-appsearch__scrim {
	position: absolute;
	inset: 0;
	background: rgba(7, 20, 32, .5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: mg-appfade .22s ease both;
}

.mg-appsearch__card {
	position: relative;
	padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
	border-radius: 22px 22px 0 0;
	background: var(--mg-bg, #fff);
	box-shadow: 0 -26px 60px -28px rgba(7, 26, 40, .7);
	animation: mg-appup .28s cubic-bezier(.16, 1, .3, 1) both;
}

.mg-appsearch__form {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border: 1px solid var(--mg-border, #e5eaf1);
	border-radius: 14px;
	background: var(--mg-surface, #f5f8fc);
}

.mg-appsearch__ic {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	color: #56677b;
}
.mg-appsearch__ic svg { width: 20px; height: 20px; }

.mg-appsearch__in {
	min-width: 0;
	min-height: 44px;
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: var(--mg-text, #0b1320);
	font: inherit;
	font-size: 16px; /* below 16px iOS zooms the whole page on focus */
}
.mg-appsearch__in:focus { outline: 0; }
/* 4.73:1 on the field's surface. The lighter grey a placeholder usually gets
   measured 4.02:1 here and would have failed AA; this is the same value the
   catalogue module settled on for exactly this reason. */
.mg-appsearch__in::placeholder { color: #5e7184; }

.mg-appsearch__go {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--mg-conversion, #005f9f);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.mg-appsearch__go:active { transform: translateY(1px); }

.mg-appsearch__x {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #56677b;
	cursor: pointer;
}
.mg-appsearch__x svg { width: 18px; height: 18px; }

.mg-appsearch__hint {
	margin: 18px 0 10px;
	color: #56677b;
	font-size: 12px;
	font-weight: 700;
}

.mg-appsearch__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mg-appsearch__term {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	padding: 0 14px;
	border: 1px solid var(--mg-border, #e5eaf1);
	border-radius: 999px;
	background: var(--mg-surface, #f5f8fc);
	color: #33475c;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.mg-appsearch__term:hover {
	border-color: var(--mg-accent, #0067b1);
	color: #0059a0;
}

/* ==========================================================================
   Install invitation
   ========================================================================== */

.mg-install {
	position: fixed;
	z-index: var(--mg-layer-install);
	inset-inline: 0;
	inset-block-end: 0;
	display: grid;
	justify-items: center;
	padding: 12px;
	padding-block-end: calc(12px + env(safe-area-inset-bottom));
	pointer-events: none;
}

.mg-install[hidden] { display: none; }
.mg-install[hidden], .mg-install__help[hidden] { display: none !important; }
.mg-footer .mg-install--footer {
	position: static;
	inset: auto;
	z-index: auto;
	display: block;
	padding: 24px 0;
	margin-top: 28px;
	border-top: 1px solid var(--mg-border, rgba(128, 155, 177, .3));
	pointer-events: auto;
}
.mg-install--footer .mg-install__card {
	width: 100%;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	box-shadow: none;
	animation: none;
}
.mg-install--footer .mg-install__acts { grid-column: auto; }
.mg-install--footer .mg-install__t { margin: 0 0 6px; font-size: 18px; }
.mg-footer--pro .mg-install--footer .mg-install__card { background: #f3f7fa; color: #183347; border-color: #d0dce5; }
.mg-footer--pro .mg-install--footer { --mg-footer-heading: #132e43; --mg-footer-text: #385469; }
[data-theme="dark"] .mg-footer--pro .mg-install--footer { --mg-footer-heading: #edf5fa; --mg-footer-text: #c6d9e5; }
.mg-footer--pro .mg-install--footer .mg-install__t { color: #132e43; opacity: 1; }
.mg-footer--pro .mg-install--footer :is(.mg-install__p, .mg-install__help p, noscript p) { color: #385469; opacity: 1; line-height: 1.8; }
.mg-footer--pro .mg-install--footer .mg-install__later { background: #e4edf3; color: #183347; border-color: #bdceda; }
[data-theme="dark"] .mg-footer--pro .mg-install--footer .mg-install__card { background: #102431; color: #edf5fa; border-color: #365263; }
[data-theme="dark"] .mg-footer--pro .mg-install--footer .mg-install__t { color: #edf5fa; }
[data-theme="dark"] .mg-footer--pro .mg-install--footer :is(.mg-install__p, .mg-install__help p, noscript p) { color: #c6d9e5; }
[data-theme="dark"] .mg-footer--pro .mg-install--footer .mg-install__later { background: #1b3545; color: #edf5fa; border-color: #527183; }
.mg-footer--pro .mg-install--footer .mg-install__go { background: #00629c; color: #fff; }
.mg-footer--pro .mg-install--footer .mg-install__go:hover { background: #004d7d; }
.mg-install__help { grid-column: 1 / -1; border-top: 1px solid var(--mg-border, #d4dce7); padding-top: 14px; }
.mg-install__help p { color: inherit; font-size: 14px; line-height: 1.9; }
.mg-install--footer button:focus-visible { outline: 3px solid #63baf2; outline-offset: 4px; }
@media (max-width: 600px) {
	.mg-install--footer .mg-install__card { grid-template-columns: auto minmax(0, 1fr); }
	.mg-install--footer .mg-install__acts { grid-column: 1 / -1; }
	.mg-install--footer .mg-install__go { width: 100%; }
}

.mg-install__card {
	display: grid;
	width: min(100%, 30rem);
	grid-template-columns: auto 1fr;
	gap: 12px 14px;
	padding: 16px;
	border: 1px solid var(--mg-border, #e5eaf1);
	border-radius: 18px;
	background: var(--mg-bg, #fff);
	box-shadow: 0 30px 70px -26px rgba(7, 26, 40, .55);
	pointer-events: auto;
	animation: mg-appup .34s cubic-bezier(.16, 1, .3, 1) both;
}

.mg-install__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	object-fit: cover;
}

.mg-install__body { min-width: 0; }

.mg-install__t {
	display: block;
	margin-block-end: 5px;
	color: var(--mg-heading, #0a1626);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
}

.mg-install__p {
	margin: 0;
	color: #56677b;
	font-size: 13px;
	line-height: 1.75;
}

.mg-install__acts {
	display: flex;
	grid-column: 1 / -1;
	gap: 8px;
}

.mg-install__go {
	flex: 1 1 auto;
	min-height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--mg-conversion, #005f9f);
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.mg-install__go:hover { background: var(--mg-conversion-hover, #004879); }
.mg-install__go:active { transform: translateY(1px); }

.mg-install__later {
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--mg-border-strong, #d4dce7);
	border-radius: 12px;
	background: transparent;
	color: #40526a;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.mg-install__later:hover { border-color: #9fb0c2; color: #0b1320; }

/* The iOS variant swaps the install button for the share-sheet instructions,
   because Safari has no programmatic install and a dead button would lie. */
.mg-install.is-ios .mg-install__go { display: none; }
.mg-install.is-ios .mg-install__later { flex: 1 1 auto; }

.mg-install__ios {
	display: none;
	align-items: center;
	gap: 7px;
	margin-block-start: 8px;
	color: #40526a;
	font-size: 13px;
	font-weight: 600;
}
.mg-install.is-ios .mg-install__ios { display: flex; }
.mg-install__ios svg { width: 17px; height: 17px; flex: none; }

@keyframes mg-appup {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mg-appfade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-install__card,
	.mg-appsearch__card,
	.mg-appsearch__scrim { animation: none; }
	.mg-appnav__i { transition: none; }
}

/* ==========================================================================
   Dark scheme
   ========================================================================== */

[data-theme="dark"] .mg-appnav {
	border-block-start-color: rgba(255, 255, 255, .12);
	background: rgba(10, 22, 33, .93);
	box-shadow: 0 -12px 36px -22px rgba(0, 0, 0, .9);
}
[data-theme="dark"] .mg-appnav__i { color: #9db1c2; }
[data-theme="dark"] .mg-appnav__i:hover { color: #eaf2f8; }
[data-theme="dark"] .mg-appnav__i.is-active {
	background: rgba(77, 179, 240, .16);
	color: #7cc8f5;
}

[data-theme="dark"] .mg-appsearch__card { background: #0c1a26; }
[data-theme="dark"] .mg-appsearch__form {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
}
[data-theme="dark"] .mg-appsearch__in { color: #eaf2f8; }
[data-theme="dark"] .mg-appsearch__in::placeholder { color: #93a7b8; }
[data-theme="dark"] .mg-appsearch__ic,
[data-theme="dark"] .mg-appsearch__x,
[data-theme="dark"] .mg-appsearch__hint { color: #93a7b8; }
[data-theme="dark"] .mg-appsearch__term {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
	color: #cddced;
}
[data-theme="dark"] .mg-appsearch__term:hover { color: #7cc8f5; }

[data-theme="dark"] .mg-install__card {
	border-color: rgba(255, 255, 255, .12);
	background: #0c1a26;
}
[data-theme="dark"] .mg-install__t { color: #f2f7fb; }
[data-theme="dark"] .mg-install__p,
[data-theme="dark"] .mg-install__ios { color: #a9bccc; }
[data-theme="dark"] .mg-install__later {
	border-color: rgba(255, 255, 255, .2);
	color: #cddced;
}
[data-theme="dark"] .mg-install__later:hover { color: #f2f7fb; }

/* ==========================================================================
 * Sign-in screen inside the app (/account/ while signed out)
 *
 * In a browser tab /account/ is a web page: site header, a marketing
 * introduction, two forms side by side, the footer. Opened from the «ورود» tab
 * of an installed app that read as "the website squeezed into a phone" — the
 * header showed a generic glyph instead of the logo, and the forms started
 * below a screen of copy. Here the same page becomes a sign-in screen: the
 * company wordmark, one heading, a ورود / ثبت‌نام switch, one form at a time.
 * The forms, their handlers and their validation are untouched.
 * ========================================================================== */
.mg-app body.mg-account-guest .mg-pdp-headwrap,
.mg-app body.mg-account-guest .mg-pdp-footwrap,
.mg-app body.mg-account-guest .mg-auth__intro {
	display: none !important;
}

.mg-app body.mg-account-guest .mg-account {
	min-height: 100dvh;
	padding: calc(28px + env(safe-area-inset-top)) 18px calc(var(--mg-appnav-h) + 32px + env(safe-area-inset-bottom)) !important;
	background:
		radial-gradient(520px 320px at 50% -60px, rgba(0, 103, 177, .10), transparent 70%),
		var(--mg-bg, #fff);
}

.mg-app .mg-auth__app {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 420px;
	margin: 0 auto 22px;
	text-align: center;
}
.mg-auth__app-brand {
	display: block;
	margin: 14px 0 26px;
	border-radius: 10px;
}
.mg-auth__app-brand:focus-visible { outline: 3px solid var(--mg-focus, #ffbf47); outline-offset: 6px; }
.mg-auth__app-logo {
	width: min(210px, 62vw);
	height: auto;
}
.mg-auth__app-title {
	margin: 0 0 6px;
	color: var(--mg-heading, #0a1626);
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.5;
}
.mg-auth__app-sub {
	margin: 0 0 22px;
	color: #56677b;
	font-size: .95rem;
	line-height: 1.8;
}

/* Segmented switch */
.mg-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	width: 100%;
	padding: 4px;
	border-radius: 14px;
	background: #eaf0f6;
}
.mg-auth__tabs button {
	min-height: 44px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: #3d5163;
	cursor: pointer;
	font: inherit;
	font-size: .98rem;
	font-weight: 700;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mg-auth__tabs button[aria-selected="true"] {
	background: #fff;
	color: var(--mg-heading, #0a1626);
	box-shadow: 0 1px 2px rgba(11, 19, 32, .08), 0 6px 16px -10px rgba(11, 19, 32, .35);
}
.mg-auth__tabs button:focus-visible { outline: 3px solid var(--mg-focus, #ffbf47); outline-offset: 2px; }

.mg-app body.mg-account-guest .mg-auth__wrap {
	display: block;
	max-width: 420px;
	margin: 0 auto;
}
.mg-app body.mg-account-guest .mg-auth__card {
	padding: 22px 20px 24px;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(11, 19, 32, .04), 0 18px 40px -26px rgba(11, 19, 32, .35);
}
/* The switch names the form, so the card's own heading would say it twice. */
.mg-app body.mg-account-guest .mg-auth__card > h2 { display: none; }
.mg-app body.mg-account-guest .mg-auth__card[data-tab-hidden] { display: none; }
.mg-app body.mg-account-guest .mg-auth__forgot { display: block; text-align: center; }

[data-theme="dark"].mg-app body.mg-account-guest .mg-account,
.mg-app[data-theme="dark"] body.mg-account-guest .mg-account {
	background: radial-gradient(520px 320px at 50% -60px, rgba(45, 130, 195, .20), transparent 70%), #08131c;
}
[data-theme="dark"] .mg-auth__app-title { color: #eef4f9; }
[data-theme="dark"] .mg-auth__app-sub { color: #a3b5c4; }
[data-theme="dark"] .mg-auth__tabs { background: #122536; }
[data-theme="dark"] .mg-auth__tabs button { color: #b9c9d6; }
[data-theme="dark"] .mg-auth__tabs button[aria-selected="true"] { background: #1d3a52; color: #fff; box-shadow: none; }
/* The form's top margin was spacing below the (now hidden) card heading. */
.mg-app body.mg-account-guest .mg-auth__card > .mg-form { margin-top: 0; }