/**
 * Wedding Invite Maker: the invite (page and preview) and the editor.
 *
 * Every size inside an invite is a multiple of --u, one unit of the
 * 390-wide design, set by MSMInvite.scale() from the width the invite is
 * drawn at. The same rules draw the 300-wide preview and a guest's phone.
 */

/* ------------------------------------------------------------------
 * The invite
 * --------------------------------------------------------------- */

.msm-inv {
	--u: 1;
	position: relative;
	color: var(--t);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.msm-inv *,
.msm-inv *::before,
.msm-inv *::after {
	box-sizing: border-box;
}

.msm-inv[data-urdu="nastaliq"] {
	--urf: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Cormorant Garamond', serif;
	--url: 2;
}

.msm-inv[data-urdu="naskh"] {
	--urf: 'Noto Naskh Arabic', 'Cormorant Garamond', serif;
	--url: 1.6;
}

/* Opening screen */

.msm-inv-cover {
	position: relative;
	width: 100%;
	aspect-ratio: 390 / 844;
	overflow: hidden;
	background: var(--c1);
}

.msm-inv-art,
.msm-inv-art svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.msm-inv-cover-text {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 8px);
	text-align: center;
	color: var(--t);
}

.msm-inv-bism {
	font-family: 'Amiri', serif;
	font-size: calc(var(--u) * 17px);
	line-height: 1.7;
	color: var(--a);
}

.msm-inv-wed {
	font-family: 'Cinzel', serif;
	font-weight: 500;
	font-size: calc(var(--u) * 11px);
	letter-spacing: 0.22em;
}

.msm-inv-names {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--a);
	line-height: 1.05;
}

.msm-inv-name {
	max-width: 100%;
	overflow-wrap: anywhere;
	color: var(--a);
}

.msm-inv[data-font="script"] .msm-inv-name {
	font-family: 'Great Vibes', cursive;
	font-weight: 400;
	font-size: calc(var(--u) * 57px);
}

.msm-inv[data-font="classic"] .msm-inv-name {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-style: italic;
	font-size: calc(var(--u) * 52px);
}

.msm-inv[data-font="royal"] .msm-inv-name {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: calc(var(--u) * 34px);
	letter-spacing: 0.04em;
}

.msm-inv-amp {
	margin: calc(var(--u) * 2px) 0;
	font-family: 'Great Vibes', cursive;
	font-size: calc(var(--u) * 34px);
	line-height: 1.05;
	color: var(--a);
}

.msm-inv-range {
	margin-top: calc(var(--u) * 6px);
	font-size: calc(var(--u) * 19.5px);
	font-weight: 600;
}

.msm-inv-city {
	font-size: calc(var(--u) * 17.5px);
}

.msm-inv-open {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	min-width: calc(var(--u) * 192px);
	height: calc(var(--u) * 49px);
	padding: 0 calc(var(--u) * 20px);
	border: 0;
	border-radius: calc(var(--u) * 25px);
	background: var(--a);
	color: var(--bt);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: calc(var(--u) * 12.4px);
	letter-spacing: 0.2em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 calc(var(--u) * 6px) calc(var(--u) * 18px) rgba(0, 0, 0, 0.22);
}

.msm-inv-open:focus-visible,
.msm-inv-btn:focus-visible,
.msm-inv-lang:focus-visible {
	outline: 3px solid var(--a);
	outline-offset: 3px;
}

/* Inside */

.msm-inv-inside {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--u) * 30px);
	padding: calc(var(--u) * 64px) calc(var(--u) * 30px) calc(var(--u) * 40px);
	background: var(--g);
	box-shadow: inset 0 0 0 calc(var(--u) * 11px) var(--g), inset 0 0 0 calc(var(--u) * 12.3px) var(--c2);
	text-align: center;
	color: var(--t);
}

.msm-inv-block {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--u) * 8px);
	border-radius: calc(var(--u) * 14px);
	scroll-margin-top: calc(var(--u) * 20px);
}

.msm-inv-orn {
	width: calc(var(--u) * 156px);
	height: calc(var(--u) * 18px);
}

.msm-inv-label {
	font-family: 'Cinzel', serif;
	font-weight: 500;
	font-size: calc(var(--u) * 12px);
	letter-spacing: 0.24em;
	line-height: 1.5;
	color: var(--a);
}

.msm-inv-ref {
	font-size: calc(var(--u) * 10.5px);
	color: var(--t);
}

.msm-inv-body {
	max-width: calc(var(--u) * 300px);
	font-size: calc(var(--u) * 18px);
	line-height: 1.45;
}

.msm-inv-small {
	max-width: calc(var(--u) * 310px);
	font-size: calc(var(--u) * 16px);
	font-style: italic;
	line-height: 1.45;
}

.msm-inv-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--u) * 2px);
	padding: calc(var(--u) * 4px) calc(var(--u) * 14px);
	border-radius: calc(var(--u) * 14px);
	max-width: 100%;
}

.msm-inv-inside .msm-inv-name {
	line-height: 1.1;
}

.msm-inv[data-font="script"] .msm-inv-inside .msm-inv-name {
	font-size: calc(var(--u) * 52px);
}

.msm-inv[data-font="classic"] .msm-inv-inside .msm-inv-name {
	font-size: calc(var(--u) * 44px);
}

.msm-inv[data-font="royal"] .msm-inv-inside .msm-inv-name {
	font-size: calc(var(--u) * 28.6px);
}

.msm-inv-inside .msm-inv-amp {
	font-size: calc(var(--u) * 31px);
}

.msm-inv-cards {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 16px);
	margin-top: calc(var(--u) * 6px);
}

.msm-inv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--u) * 2px);
	padding: calc(var(--u) * 16px) calc(var(--u) * 14px) calc(var(--u) * 14px);
	border-radius: calc(var(--u) * 16px);
	background: #fffaf2;
	color: #2b1d16;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	scroll-margin-top: calc(var(--u) * 20px);
}

.msm-inv-ev {
	color: var(--ink);
	line-height: 1.15;
}

.msm-inv[data-font="script"] .msm-inv-ev {
	font-family: 'Great Vibes', cursive;
	font-size: calc(var(--u) * 33px);
}

.msm-inv[data-font="classic"] .msm-inv-ev {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: calc(var(--u) * 28px);
}

.msm-inv[data-font="royal"] .msm-inv-ev {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: calc(var(--u) * 19px);
	letter-spacing: 0.04em;
}

.msm-inv-date {
	font-size: calc(var(--u) * 18px);
	font-weight: 700;
}

.msm-inv-where,
.msm-inv-note {
	font-size: calc(var(--u) * 16px);
	color: #5a4636;
}

.msm-inv-note {
	font-style: italic;
}

.msm-inv-acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--u) * 8px);
	margin-top: calc(var(--u) * 8px);
}

.msm-inv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--u) * 36px);
	padding: 0 calc(var(--u) * 14px);
	border-radius: calc(var(--u) * 18px);
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: calc(var(--u) * 11px);
	letter-spacing: 0.12em;
	text-decoration: none;
	white-space: nowrap;
}

.msm-inv-btn.solid {
	background: var(--ink);
	color: #fffaf2;
}

.msm-inv-btn.line {
	border: 1px solid var(--ink);
	color: var(--ink);
}

.msm-inv-rsvp .msm-inv-btn.solid {
	background: var(--a);
	color: var(--bt);
}

.msm-inv-btn.big {
	min-height: calc(var(--u) * 46px);
	padding: 0 calc(var(--u) * 22px);
	font-size: calc(var(--u) * 13px);
	border-radius: calc(var(--u) * 23px);
}

.msm-inv-ayah {
	font-family: 'Amiri', serif;
	font-size: calc(var(--u) * 22px);
	line-height: 1.9;
	color: var(--a);
	max-width: calc(var(--u) * 320px);
}

.msm-inv-ayah-sm {
	font-size: calc(var(--u) * 18px);
}

.msm-inv-tiles {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--u) * 10px);
}

.msm-inv-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: calc(var(--u) * 10px) calc(var(--u) * 4px) calc(var(--u) * 8px);
	border-radius: calc(var(--u) * 12px);
	background: #fffaf2;
	color: #5a4636;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.msm-inv-num {
	font-size: calc(var(--u) * 31px);
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
}

.msm-inv-unit {
	margin-top: calc(var(--u) * 4px);
	font-family: 'Cinzel', serif;
	font-size: calc(var(--u) * 10.5px);
	letter-spacing: 0.16em;
}

.msm-inv-q {
	color: var(--a);
	line-height: 1.15;
}

.msm-inv[data-font="script"] .msm-inv-q {
	font-family: 'Great Vibes', cursive;
	font-size: calc(var(--u) * 36px);
}

.msm-inv[data-font="classic"] .msm-inv-q {
	font-style: italic;
	font-weight: 600;
	font-size: calc(var(--u) * 31px);
}

.msm-inv[data-font="royal"] .msm-inv-q {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: calc(var(--u) * 20px);
}

.msm-inv-who {
	font-size: calc(var(--u) * 21px);
	font-weight: 700;
	color: var(--a);
}

.msm-inv-credit {
	font-size: calc(var(--u) * 14px);
	opacity: 0.85;
}

.msm-inv-credit a {
	color: inherit;
	font-weight: 700;
}

.msm-inv-lang {
	position: absolute;
	top: calc(var(--u) * 20px);
	inset-inline-end: calc(var(--u) * 20px);
	z-index: 3;
	min-height: calc(var(--u) * 32px);
	padding: 0 calc(var(--u) * 14px);
	border: 1px solid var(--a);
	border-radius: calc(var(--u) * 16px);
	background: var(--g);
	color: var(--t);
	display: inline-flex;
	align-items: center;
	font-size: calc(var(--u) * 13px);
	cursor: pointer;
}

.msm-inv-lang[lang="ur"] {
	font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
	line-height: 2;
}

.msm-inv-lang[lang="en"] {
	font-family: 'Cinzel', serif;
	letter-spacing: 0.06em;
}

/* Urdu: every line in the chosen Urdu lettering; verses stay in Amiri. */

.msm-inv[lang="ur"] .msm-inv-cover-text,
.msm-inv[lang="ur"] .msm-inv-inside {
	font-family: var(--urf);
	line-height: var(--url);
}

.msm-inv[lang="ur"] .msm-inv-wed,
.msm-inv[lang="ur"] .msm-inv-label,
.msm-inv[lang="ur"] .msm-inv-unit,
.msm-inv[lang="ur"] .msm-inv-btn,
.msm-inv[lang="ur"] .msm-inv-open {
	font-family: var(--urf);
	letter-spacing: 0;
	font-weight: 700;
	line-height: var(--url);
}

.msm-inv[lang="ur"] .msm-inv-wed {
	font-size: calc(var(--u) * 15px);
	line-height: 1.8;
}

/* Nastaliq needs room above and below each line, so the opening screen's
   Urdu lines are a little smaller and tighter: the names, the date and
   the city must fit the same space the English ones do. */
.msm-inv[lang="ur"] .msm-inv-cover-text .msm-inv-name {
	font-size: calc(var(--u) * 32px);
	line-height: 1.75;
}

.msm-inv[lang="ur"] .msm-inv-cover-text .msm-inv-amp {
	line-height: 1.6;
}

.msm-inv[lang="ur"] .msm-inv-cover-text .msm-inv-range,
.msm-inv[lang="ur"] .msm-inv-cover-text .msm-inv-city {
	line-height: 1.8;
}

.msm-inv[lang="ur"] .msm-inv-label {
	font-size: calc(var(--u) * 16px);
}

.msm-inv[lang="ur"] .msm-inv-open {
	font-size: calc(var(--u) * 15.6px);
}

.msm-inv[lang="ur"] .msm-inv-btn {
	font-size: calc(var(--u) * 13px);
}

.msm-inv[lang="ur"] .msm-inv-name,
.msm-inv[lang="ur"] .msm-inv-ev,
.msm-inv[lang="ur"] .msm-inv-q {
	font-family: var(--urf);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--url);
}

.msm-inv[lang="ur"] .msm-inv-name {
	font-size: calc(var(--u) * 35px);
}

.msm-inv[lang="ur"] .msm-inv-inside .msm-inv-name {
	font-size: calc(var(--u) * 32px);
}

.msm-inv[lang="ur"] .msm-inv-ev,
.msm-inv[lang="ur"] .msm-inv-q {
	font-size: calc(var(--u) * 22px);
}

.msm-inv[lang="ur"] .msm-inv-amp {
	font-family: var(--urf);
	font-size: calc(var(--u) * 17px);
	color: var(--t);
	line-height: var(--url);
}

.msm-inv[lang="ur"] .msm-inv-small,
.msm-inv[lang="ur"] .msm-inv-note {
	font-style: normal;
	font-size: calc(var(--u) * 14px);
}

.msm-inv[lang="ur"] .msm-inv-body {
	font-size: calc(var(--u) * 15.5px);
}

.msm-inv[lang="ur"] .msm-inv-date,
.msm-inv[lang="ur"] .msm-inv-where,
.msm-inv[lang="ur"] .msm-inv-range,
.msm-inv[lang="ur"] .msm-inv-city {
	font-size: calc(var(--u) * 15px);
}

.msm-inv bdi {
	unicode-bidi: isolate;
}

/* Highlight of the part being edited, in the preview only. */

.msm-inv [data-part].is-editing {
	outline: 2px dashed #0d7c6d;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * The invite page guests open
 * --------------------------------------------------------------- */

body.msm-invite-page {
	margin: 0;
	min-height: 100vh;
	background: #1c1917;
}

.msm-invite-page .msm-inv--page {
	min-height: 100vh;
	background: var(--g);
}

.msm-invite-page .msm-inv--page .msm-inv-cover {
	position: fixed;
	z-index: 5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(100vw, calc(100vh * 390 / 844), 480px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

@supports (height: 100dvh) {
	.msm-invite-page .msm-inv--page .msm-inv-cover {
		width: min(100vw, calc(100dvh * 390 / 844), 480px);
	}
}

.msm-invite-page .msm-inv-backdrop {
	position: fixed;
	inset: 0;
	z-index: 4;
	background: var(--c1);
	transition: opacity 0.7s ease;
}

.msm-invite-page .msm-inv--page .msm-inv-inside {
	width: min(100%, 480px);
	min-height: 100vh;
	margin: 0 auto;
}

.msm-invite-page .msm-inv--page .msm-inv-lang {
	position: fixed;
	z-index: 6;
	inset-inline-end: max(calc(var(--u) * 20px), calc(50vw - 240px + 20px));
}

.msm-invite-page.is-closed {
	overflow: hidden;
}

.msm-invite-page.is-closed .msm-inv-inside {
	visibility: hidden;
}

.msm-invite-page.is-open .msm-inv-cover {
	opacity: 0;
	transform: translate(-50%, -56%);
	pointer-events: none;
}

.msm-invite-page.is-open .msm-inv-backdrop {
	opacity: 0;
	pointer-events: none;
}

.msm-invite-page.is-gone .msm-inv-cover,
.msm-invite-page.is-gone .msm-inv-backdrop {
	display: none;
}

.msm-invite-page.is-open .msm-inv-inside > * {
	animation: msm-inv-rise 0.8s ease both;
}

.msm-invite-page.is-open .msm-inv-inside > *:nth-child(2) { animation-delay: 0.12s; }
.msm-invite-page.is-open .msm-inv-inside > *:nth-child(3) { animation-delay: 0.24s; }
.msm-invite-page.is-open .msm-inv-inside > *:nth-child(n+4) { animation-delay: 0.36s; }

@keyframes msm-inv-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.msm-invite-page .msm-inv-cover,
	.msm-invite-page .msm-inv-backdrop {
		transition: none;
	}

	.msm-invite-page.is-open .msm-inv-inside > * {
		animation: none;
	}
}

.msm-invite-broken {
	max-width: 30rem;
	margin: 18vh auto 0;
	padding: 28px 24px;
	border-radius: 18px;
	background: #ffffff;
	color: #1c1917;
	font-family: system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
}

.msm-invite-broken h1 {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.3;
}

.msm-invite-broken p {
	margin: 0 0 12px;
}

/* A short link's invite on its way. */
.msm-invite-page.is-loading #msmInvite::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 40vh auto 0;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: msm-inv-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.msm-invite-page.is-loading #msmInvite::before {
		animation: none;
	}
}

.msm-invite-broken [lang="ur"] {
	font-family: 'Noto Naskh Arabic', serif;
}

.msm-invite-broken a {
	color: #0b5e53;
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * The editor
 * --------------------------------------------------------------- */

.msm-wim [hidden] {
	display: none !important;
}

.msm-wim {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.msm-wim-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.msm-wim-step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px 0 8px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 22px;
	background: var(--card-bg, #ffffff);
	color: var(--text-primary, #1c1917);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.msm-wim-step span {
	width: 26px;
	height: 26px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	background: var(--bg-surface-alt, #f5f4f1);
	color: var(--text-secondary, #57534e);
}

.msm-wim-step[aria-current="step"] {
	border-color: var(--msm-brand, #0d7c6d);
	background: var(--msm-brand, #0d7c6d);
	color: #ffffff;
}

.msm-wim-step[aria-current="step"] span {
	background: #ffffff;
	color: var(--msm-brand, #0d7c6d);
}

.msm-wim-step.is-done span {
	background: var(--msm-brand-soft, #e8f3f1);
	color: var(--msm-brand, #0b5e53);
}

.msm-wim-body {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}

.msm-wim-form {
	flex: 999 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.msm-wim-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.msm-wim-panel[hidden] {
	display: none;
}

.msm-wim-panel h3 {
	margin: 0;
	font-size: 21px;
}

.msm-wim-panel > p,
.msm-wim-hint {
	margin: 0;
	color: var(--text-secondary, #57534e);
	font-size: 15px;
	line-height: 1.6;
}

.msm-wim-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.msm-wim-chip {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--card-border, #d6d3d1);
	border-radius: 20px;
	background: var(--card-bg, #ffffff);
	color: var(--text-primary, #1c1917);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.msm-wim-chip[aria-pressed="true"] {
	border-color: var(--text-primary, #1c1917);
	background: var(--text-primary, #1c1917);
	color: var(--card-bg, #ffffff);
}

.msm-wim-chip.is-add {
	border-style: dashed;
	font-weight: 500;
}

.msm-wim-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 14px;
}

.msm-wim-tpl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px 6px 12px;
	border: 2px solid var(--card-border, #e7e5e4);
	border-radius: 16px;
	background: var(--card-bg, #ffffff);
	color: var(--text-primary, #1c1917);
	font: inherit;
	cursor: pointer;
}

.msm-wim-tpl[aria-pressed="true"] {
	border-color: var(--msm-brand, #0d7c6d);
	box-shadow: 0 0 0 2px var(--msm-brand-soft, #e8f3f1);
}

.msm-wim-tpl[hidden] {
	display: none;
}

.msm-wim-thumb {
	position: relative;
	display: block;
	width: 96px;
	aspect-ratio: 390 / 844;
	border-radius: 10px;
	overflow: hidden;
}

.msm-wim-thumb svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.msm-wim-tpl strong {
	font-size: 14px;
}

.msm-wim-tpl small {
	font-size: 12px;
	color: var(--text-secondary, #57534e);
}

.msm-wim-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.msm-wim-pair fieldset,
.msm-wim-event {
	margin: 0;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.msm-wim-pair legend {
	padding: 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary, #57534e);
}

.msm-wim input[dir="rtl"] {
	font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
	line-height: 2;
}

.msm-wim-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.msm-wim-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 14px;
	border: 2px solid var(--card-border, #e7e5e4);
	border-radius: 14px;
	background: var(--card-bg, #ffffff);
	color: var(--text-primary, #1c1917);
	cursor: pointer;
}

.msm-wim-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.msm-wim-option:has(input:checked) {
	border-color: var(--msm-brand, #0d7c6d);
}

.msm-wim-option.is-checked {
	border-color: var(--msm-brand, #0d7c6d);
}

.msm-wim-option:has(input:focus-visible) {
	outline: 2px solid var(--msm-brand, #0d7c6d);
	outline-offset: 2px;
}

.msm-wim-option strong {
	font-size: 14.5px;
}

.msm-wim-option small {
	font-size: 13px;
	color: var(--text-secondary, #57534e);
}

.msm-wim-option.is-center {
	align-items: center;
	text-align: center;
}

.msm-wim-dots {
	display: flex;
	gap: 6px;
}

.msm-wim-dots i {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.msm-wim-sample-script {
	font-family: 'Great Vibes', cursive;
	font-size: 32px;
	line-height: 1.3;
}

.msm-wim-sample-classic {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.3;
}

.msm-wim-sample-royal {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.9;
}

.msm-wim-sample-nastaliq {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 2;
}

.msm-wim-sample-naskh {
	font-family: 'Noto Naskh Arabic', serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.7;
}

.msm-wim-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.msm-wim-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 10px 16px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 14px;
}

.msm-wim-row.is-current {
	border: 2px solid var(--msm-brand, #0d7c6d);
}

.msm-wim-row > div {
	flex-grow: 1;
	min-width: 0;
}

.msm-wim-row strong {
	display: block;
}

.msm-wim-row small {
	display: block;
	font-size: 13.5px;
	color: var(--text-secondary, #57534e);
	overflow-wrap: anywhere;
}

.msm-wim-row button {
	min-height: 40px;
}

.msm-wim-switch {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--card-border, #f0eeea);
	cursor: pointer;
}

.msm-wim-switch > span:first-child {
	flex-grow: 1;
	min-width: 0;
}

.msm-wim-switch strong {
	display: block;
}

.msm-wim-switch small {
	display: block;
	font-size: 14px;
	color: var(--text-secondary, #57534e);
}

.msm-wim-switch input {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 52px;
	height: 30px;
	margin: 0;
	border-radius: 15px;
	background: #a8a29e;
	position: relative;
	cursor: pointer;
	transition: background 0.15s ease;
}

.msm-wim-switch input::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: inset-inline-start 0.15s ease;
}

.msm-wim-switch input:checked {
	background: var(--msm-brand, #0d7c6d);
}

.msm-wim-switch input:checked::after {
	inset-inline-start: 25px;
}

.msm-wim-switch input:focus-visible {
	outline: 2px solid var(--msm-brand, #0d7c6d);
	outline-offset: 2px;
}

.msm-wim-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--card-border, #f0eeea);
}

.msm-wim-nav .btn-action:only-child {
	margin-inline-start: auto;
}

.msm-wim-warn {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--msm-warn-soft, #fdf6e7);
	border: 1px solid #ecd9a8;
	color: var(--text-primary, #5b4310);
	font-size: 14.5px;
	line-height: 1.55;
}

.msm-wim-warn ul {
	margin: 0;
	padding-inline-start: 20px;
}

.msm-wim-warn button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--msm-brand, #0b5e53);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.msm-wim-link {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.msm-wim-link input {
	flex: 999 1 260px;
	min-width: 0;
	font-family: var(--msm-font-mono, ui-monospace, monospace);
	font-size: 13.5px;
}

/* Share: where the short link stands (saving, saved, changed, long). */
.msm-wim-state:empty {
	display: none;
}

.msm-wim-saved {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--bg-surface-alt, #f5f5f4);
	color: var(--text-secondary, #44403c);
	font-size: 14px;
	line-height: 1.5;
}

.msm-wim-saved.is-done {
	background: var(--msm-brand-soft, #e8f3f1);
	color: var(--text-primary, #0b5e53);
}

.msm-wim-saved svg {
	flex: none;
	color: var(--msm-brand, #0d7c6d);
}

.msm-wim-update {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 14px 16px;
	border: 2px solid var(--msm-brand, #0d7c6d);
	border-radius: 14px;
	background: var(--msm-brand-soft, #f3faf8);
	color: var(--text-primary, #1c1917);
}

.msm-wim-update p {
	flex: 1 1 260px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
}

.msm-wim-update button {
	flex: none;
}

.msm-wim-fallback {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 12px;
	background: var(--bg-surface-alt, #fafaf9);
	color: var(--text-primary, #1c1917);
	font-size: 14px;
	line-height: 1.5;
}

.msm-wim-share > .is-wait,
.msm-wim-link > .is-wait {
	opacity: 0.55;
	cursor: progress;
}

/* The editing link: gold, so it reads as private, not for guests. */
.msm-wim-editbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 2px solid #ecd9a8;
	border-radius: 16px;
	background: var(--msm-warn-soft, #fdf6e7);
	color: var(--text-primary, #5b4310);
}

.msm-wim-editbox p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

.msm-wim-edit-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
}

.msm-wim-edit-title svg {
	flex: none;
	color: #8a6116;
}

.msm-wim-editbox small {
	font-size: 13px;
}

.msm-wim-share {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}

.msm-wim-share > a,
.msm-wim-share > button {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--card-border, #d6d3d1);
	border-radius: 14px;
	background: var(--card-bg, #ffffff);
	color: var(--text-primary, #1c1917);
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.msm-wim-share > .is-primary {
	border-color: var(--msm-brand, #0d7c6d);
	background: var(--msm-brand, #0d7c6d);
	color: #ffffff;
}

.msm-wim-share > [disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.msm-wim-share svg {
	flex: none;
}

.msm-wim-share span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.msm-wim-share strong {
	font-size: 15px;
}

.msm-wim-share small {
	font-size: 13px;
	opacity: 0.85;
}

.msm-wim-preview {
	flex: 1 1 316px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: sticky;
	top: 90px;
}

.msm-wim-pvhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 316px;
	max-width: 100%;
}

.msm-wim-pvhead > span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--text-secondary, #57534e);
}

.msm-wim-toggle {
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--card-border, #d6d3d1);
	border-radius: 20px;
	background: var(--card-bg, #ffffff);
}

.msm-wim-toggle button {
	min-height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 18px;
	background: transparent;
	color: var(--text-primary, #1c1917);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.msm-wim-toggle button[aria-pressed="true"] {
	background: var(--text-primary, #1c1917);
	color: var(--card-bg, #ffffff);
}

.msm-wim-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 28px;
	font-size: 13.5px;
	color: var(--text-secondary, #44403c);
	text-align: center;
}

.msm-wim-caption button {
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid var(--msm-brand, #0d7c6d);
	border-radius: 14px;
	background: transparent;
	color: var(--msm-brand, #0b5e53);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.msm-wim-phone {
	width: 300px;
	height: 649px;
	max-width: 100%;
	border: 8px solid #1c1917;
	border-radius: 30px;
	box-sizing: content-box;
	overflow: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #1c1917;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
	scrollbar-width: thin;
}

.msm-wim-phone .msm-inv--inside {
	min-height: 100%;
	background: var(--g);
}

.msm-wim-meta {
	font-size: 14px;
	color: var(--text-secondary, #57534e);
	text-align: center;
}

@media (max-width: 720px) {
	.msm-wim-preview {
		position: static;
		order: -1;
	}

	.msm-wim-phone {
		width: 240px;
		height: 519px;
	}
}

.msm-wim-group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.msm-wim-options.is-narrow,
.msm-wim-narrow {
	max-width: 420px;
}

.msm-wim-urdu-word {
	font-family: 'Noto Naskh Arabic', serif;
	font-size: 17px;
}

.msm-wim-phone.is-cover {
	overflow: hidden;
}

.msm-wim .field-hint.is-error {
	color: var(--msm-danger, #b42318);
}

/* Music: the round button. On the invite page it is fixed in the corner;
   in the preview, a picture of it stays at the bottom of the phone. */

.msm-inv-music {
	width: 44px;
	height: 44px;
	border-radius: 22px;
	border: 1px solid var(--a);
	background: var(--c1);
	color: var(--a);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.msm-inv-music:focus-visible {
	outline: 3px solid var(--a);
	outline-offset: 3px;
}

.msm-inv-music[hidden] {
	display: none;
}

body > .msm-inv-music {
	position: fixed;
	z-index: 7;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	inset-inline-end: max(16px, calc(50vw - 240px + 16px));
}

.msm-inv > .msm-inv-music {
	position: sticky;
	bottom: 12px;
	float: inline-end;
	margin: -56px 12px 12px;
	z-index: 2;
}

/* Editor: the music list and the video's sound */

.msm-wim-music {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.msm-wim-track {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	border: 2px solid var(--card-border, #e7e5e4);
	border-radius: 14px;
	background: var(--card-bg, #ffffff);
}

.msm-wim-track.is-checked {
	border-color: var(--msm-brand, #0d7c6d);
	background: var(--msm-brand-soft, #f3faf8);
}

.msm-wim-track[hidden] {
	display: none;
}

.msm-wim-track-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.msm-wim-track label {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.msm-wim-track input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--msm-brand, #0d7c6d);
}

.msm-wim-track label span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.msm-wim-track strong {
	font-size: 15px;
}

.msm-wim-track small {
	font-size: 13px;
	color: var(--text-secondary, #57534e);
}

.msm-wim-play {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	border: 1px solid var(--msm-brand, #0d7c6d);
	background: var(--card-bg, #ffffff);
	color: var(--msm-brand, #0d7c6d);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.msm-wim-play[aria-pressed="true"] {
	background: var(--msm-brand, #0d7c6d);
	color: #ffffff;
}

.msm-wim-tag {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	color: var(--msm-brand, #0b5e53);
	background: var(--msm-brand-soft, #e8f3f1);
}

.msm-wim-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-secondary, #57534e);
	padding-inline-start: 30px;
}

.msm-wim-bar > i {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--card-border, #d6e9e5);
	position: relative;
	overflow: hidden;
}

.msm-wim-bar > i > b {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	background: var(--msm-brand, #0d7c6d);
}

.msm-wim-sound {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.msm-wim-sound .msm-wim-option {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.msm-wim-sound .msm-wim-option input {
	position: static;
	opacity: 1;
	pointer-events: auto;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--msm-brand, #0d7c6d);
}

.msm-wim-sound .msm-wim-option > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.msm-wim-option.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.msm-wim-song {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 14px 16px;
	border-radius: 14px;
	border: 1px solid var(--card-border, #e7e5e4);
}

.msm-wim-song-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.msm-wim-song-file input[type="file"] {
	max-width: 100%;
}

.msm-wim-song-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.msm-wim-song-grid input[type="range"] {
	width: 100%;
	accent-color: var(--msm-brand, #0d7c6d);
}