/*
 * The WordPress login page in Farin's look (inc/Features/LoginPage.php).
 * Colours arrive as --fl-* on body.farin-login; the pictures as its background.
 * Only WordPress's own markup is styled: #login, #loginform, #nav, #backtoblog.
 */

body.farin-login {
	min-block-size: 100dvh;
	background-color: var(--fl-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--fl-text);
	font-family: var(--farin-font, "IRANSansX", Tahoma, sans-serif);
}

body.farin-login,
body.farin-login :is(input, button, select, label, a, p) {
	letter-spacing: 0;
}

body.farin-login #login {
	inline-size: min(100% - 32px, 420px);
	padding-block: 6vh 32px;
}

/* Logo and the line under it. */
body.farin-login #login h1 a {
	margin-block-end: 12px;
}

body.farin-login .farin-login__tag {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--fl-muted);
	font-size: 15px;
	text-align: center;
}

/*
 * WordPress's own notices («نام کاربری یا کلمه عبور نادرست است» …): a soft
 * card as wide as the form, a round mark at the start, a colour for its
 * meaning (error, information, success); not WordPress's grey box with a
 * thick edge.
 */
body.farin-login :is(#login_error, .message, .notice, .success) {
	--fl-note: var(--fl-accent, #7b2cbf);
	--fl-note-bg: color-mix(in srgb, var(--fl-note) 8%, #fff);
	--fl-note-text: color-mix(in srgb, var(--fl-note) 70%, #1d1730);
	position: relative;
	margin: 0 0 16px;
	padding: 14px 18px;
	padding-inline-start: 54px;
	border: 1px solid color-mix(in srgb, var(--fl-note) 22%, transparent) !important;
	border-radius: var(--fl-radius, 16px);
	background: var(--fl-note-bg);
	box-shadow: 0 10px 30px rgb(40 20 80 / 0.06);
	color: var(--fl-note-text);
	font-size: 14px;
	line-height: 1.9;
	text-align: start;
	animation: fl-note-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

body.farin-login :is(#login_error, .message, .notice, .success)::before {
	content: "i";
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 16px;
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background: var(--fl-note);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

body.farin-login #login_error,
body.farin-login .notice-error {
	--fl-note: #dc2626;
	--fl-note-bg: #fef2f2;
	--fl-note-text: #991b1b;
}

body.farin-login #login_error::before,
body.farin-login .notice-error::before {
	content: "!";
}

body.farin-login :is(.success, .notice-success) {
	--fl-note: #16a34a;
	--fl-note-bg: #f0fdf4;
	--fl-note-text: #14532d;
}

body.farin-login :is(.success, .notice-success)::before {
	content: "✓";
}

body.farin-login :is(#login_error, .message, .notice, .success) p {
	margin: 0;
	padding: 0;
}

body.farin-login :is(#login_error, .message, .notice, .success) a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@keyframes fl-note-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.farin-login :is(#login_error, .message, .notice, .success) {
		animation: none;
	}
}

/* The form card. */
body.farin-login #loginform,
body.farin-login #lostpasswordform,
body.farin-login #registerform,
body.farin-login #resetpassform {
	margin-block-start: 0;
	padding: 28px;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--fl-radius);
	background: var(--fl-card);
	box-shadow: 0 24px 60px rgb(40 20 80 / 0.12), 0 2px 6px rgb(40 20 80 / 0.06);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
}

body.farin-login form label {
	margin-block-end: 8px;
	color: var(--fl-text);
	font-size: 14px;
	font-weight: 700;
}

body.farin-login form :is(.input, input[type="text"], input[type="password"], input[type="email"]) {
	min-block-size: 52px;
	margin: 0 0 18px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--fl-text) 14%, transparent);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var(--fl-text);
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

body.farin-login form :is(.input, input[type="text"], input[type="password"]):focus {
	border-color: var(--fl-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-accent) 22%, transparent);
}

body.farin-login .wp-pwd {
	margin-block-end: 18px;
}

body.farin-login .wp-pwd .input {
	margin-block-end: 0;
}

body.farin-login .wp-hide-pw {
	block-size: 52px;
	min-inline-size: 48px;
	color: var(--fl-accent);
}

body.farin-login .wp-hide-pw:focus {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--fl-accent);
}

body.farin-login .forgetmenot {
	float: none;
	margin-block-end: 20px;
}

body.farin-login .forgetmenot label {
	font-weight: 400;
}

body.farin-login input[type="checkbox"] {
	border-color: color-mix(in srgb, var(--fl-text) 30%, transparent);
	border-radius: 6px;
}

body.farin-login input[type="checkbox"]:checked::before {
	filter: hue-rotate(0deg);
}

body.farin-login input[type="checkbox"]:focus {
	border-color: var(--fl-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--fl-accent) 30%, transparent);
}

/* The button: full width, the shop's colour. */
body.farin-login .submit {
	clear: both;
}

body.farin-login .button-primary,
body.farin-login #wp-submit {
	float: none;
	inline-size: 100%;
	min-block-size: 52px;
	border: 0;
	border-radius: 12px;
	background: var(--fl-accent);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--fl-accent) 35%, transparent);
	color: var(--fl-on-accent);
	font-size: 16px;
	font-weight: 700;
	text-shadow: none;
	transition: filter 0.2s, transform 0.1s;
}

body.farin-login .button-primary:hover,
body.farin-login .button-primary:focus {
	background: var(--fl-accent);
	color: var(--fl-on-accent);
	filter: brightness(1.08);
}

body.farin-login .button-primary:focus-visible {
	outline: 2px solid var(--fl-accent);
	outline-offset: 3px;
}

body.farin-login .button-primary:active {
	transform: scale(0.99);
}

/* Links under the card, with a quiet «یا» divider above them. */
body.farin-login #nav,
body.farin-login #backtoblog {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 14px;
}

body.farin-login #nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-block-start: 24px;
}

body.farin-login #nav::before {
	content: "یا";
	display: block;
	inline-size: 100%;
	color: var(--fl-muted);
	font-size: 13px;
	background: linear-gradient(currentColor, currentColor) right center / 40% 1px no-repeat, linear-gradient(currentColor, currentColor) left center / 40% 1px no-repeat;
	opacity: 0.8;
}

body.farin-login #backtoblog {
	margin-block-start: 12px;
}

body.farin-login :is(#nav, #backtoblog, .privacy-policy-page-link) a {
	color: var(--fl-text);
	text-decoration: none;
	transition: color 0.2s;
}

body.farin-login :is(#nav, #backtoblog, .privacy-policy-page-link) a:hover,
body.farin-login :is(#nav, #backtoblog, .privacy-policy-page-link) a:focus {
	color: var(--fl-accent);
}

/* Language switcher: same corners and colour. */
body.farin-login .language-switcher {
	margin-block-start: 24px;
}

body.farin-login .language-switcher :is(select, .button) {
	min-block-size: 44px;
	border-radius: 12px;
}

body.farin-login .language-switcher .button {
	border-color: color-mix(in srgb, var(--fl-accent) 40%, transparent);
	background: color-mix(in srgb, var(--fl-accent) 8%, #fff);
	color: var(--fl-accent);
}

/* Phones: the picture behind, the card nearly full width. */
@media (max-width: 767.98px) {
	body.farin-login {
		background-attachment: scroll;
	}

	body.farin-login #login {
		padding-block-start: 32px;
	}

	body.farin-login #loginform {
		padding: 22px;
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.farin-login #loginform {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}