/**
 * Stone QR Catalog — homepage login page, AND (from 1.10.0) the SMS
 * login phone/code verification gate (Frontend\Views\otp-gate.php) —
 * both are standalone "auth card" pages sharing the exact same
 * .stone-login__* classes, so this one stylesheet serves both rather
 * than duplicating the same card/form/notice rules in a second file.
 *
 * Restyled (1.12.0, client request — "the whole site should have one
 * continuous style"): dropped the old separate light/brown theme and
 * adopted the exact same dark navy palette, Stone Sans/Tahrir fonts,
 * and background-image mechanism as product-page.css/account-gate.css,
 * so the staff login screen finally looks like the same product as
 * everywhere else a visitor or staff member lands. Gold was also
 * dropped site-wide in this same pass ("not in our palette") — the
 * accent here is the same cool slate/silver tone used everywhere else
 * now, not a color invented just for this page.
 *
 * Mobile-first, no framework, no external fonts/libraries.
 */

@font-face {
	font-family: 'Stone Sans';
	src: url('../fonts/montserrat-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Stone Sans';
	src: url('../fonts/montserrat-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Same tokens as product-page.css/account-gate.css's :root — kept as
	   a literal copy rather than a shared @import, matching this
	   plugin's existing "single self-contained stylesheet per page"
	   convention. */
	--stone-bg-base: #232c37;
	--stone-panel: rgba(255, 255, 255, 0.06);
	--stone-text: #ffffff;
	--stone-muted: #94a6b7;
	--stone-border: rgba(255, 255, 255, 0.14);
	--stone-primary: #9fb4c4;
	--stone-primary-dark: #7c93a5;
	--stone-danger: #ff8a8a;
	--stone-danger-bg: rgba(255, 138, 138, 0.14);
	--stone-radius-lg: 20px;
	--stone-radius-md: 14px;
	--stone-radius-sm: 9px;
	--stone-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--stone-bg-base);
	background-image: var(--stone-bg-image, none);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--stone-text);
	font-family: 'Stone Sans', 'Stone Tahrir', 'Segoe UI', Tahoma, Arial, sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.stone-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.stone-login__card {
	width: 100%;
	max-width: 380px;
	background: rgba(20, 24, 30, 0.72);
	backdrop-filter: blur(2px);
	border: 1px solid var(--stone-border);
	border-radius: var(--stone-radius-lg);
	box-shadow: var(--stone-shadow);
	padding: 32px 28px;
}

.stone-login__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.stone-login__logo {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: var(--stone-radius-sm);
	overflow: hidden;
	/* Corrected (1.12.0): the factory logo's icon mark is an OPAQUE
	   white plate with the mountain silhouette/calligraphy cut out as
	   fully TRANSPARENT negative space (confirmed by pixel inspection —
	   see AppIconComposer::loadImage()'s docblock for the full story),
	   so the "mountain" is only ever visible in whatever color sits
	   BEHIND it. The header on the product page and the logo on the
	   customer account-gate card both already show it this way, with no
	   backing box, directly against their dark background — that's what
	   reveals the mountain in navy. An earlier draft of this rule instead
	   added a white backing square (on the wrong assumption that the
	   mark itself was solid white on transparent), which put white
	   behind white and made the whole thing disappear — caught in this
	   release's own verification screenshot and fixed here to match the
	   other two pages: no background at all, so the dark card shows
	   through instead. */
}

.stone-login__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.stone-login__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--stone-text);
	text-align: center;
}

.stone-login__title {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: var(--stone-text);
}

.stone-login__notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--stone-radius-sm);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

.stone-login__notice--error {
	background: var(--stone-danger-bg);
	color: var(--stone-danger);
}

.stone-login__notice--success {
	background: rgba(159, 180, 196, 0.16);
	color: var(--stone-primary);
}

.stone-login__hint {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--stone-muted);
	text-align: center;
}

.stone-login__links {
	margin: 18px 0 0;
	text-align: center;
	font-size: 13px;
}

.stone-login__links a {
	color: var(--stone-primary);
	text-decoration: none;
	font-weight: 600;
}

.stone-login__links a:hover,
.stone-login__links a:focus-visible {
	text-decoration: underline;
	color: var(--stone-primary-dark);
}

.stone-login__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stone-login__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--stone-muted);
}

.stone-login__field input {
	font-family: inherit;
	font-size: 15px;
	color: var(--stone-text);
	background: var(--stone-panel);
	border: 1px solid var(--stone-border);
	border-radius: var(--stone-radius-sm);
	padding: 12px 14px;
	outline: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.stone-login__field input::placeholder {
	color: var(--stone-muted);
}

.stone-login__field input:focus {
	border-color: var(--stone-primary);
	background: rgba(255, 255, 255, 0.1);
}

.stone-login__submit {
	margin-top: 4px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #1a1f24;
	background: var(--stone-primary);
	border: none;
	border-radius: var(--stone-radius-sm);
	padding: 13px 16px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.stone-login__submit:hover,
.stone-login__submit:focus-visible {
	background: var(--stone-primary-dark);
	color: #fff;
}

/* SMS login (1.10.0): "ارسال دوباره‌ی کد" — a link-styled button (the
   surrounding element must stay a real <form><button> for the resend
   POST to work without JS, so it's styled to look like the existing
   .stone-login__links anchor rather than a full button). */
.stone-otp-resend-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--stone-primary);
	cursor: pointer;
	text-decoration: none;
}

.stone-otp-resend-link:hover,
.stone-otp-resend-link:focus-visible {
	text-decoration: underline;
}

@media (max-width: 380px) {
	.stone-login__card {
		padding: 26px 20px;
	}
}