/*
 * Auth pages (DG-376): login, register, reset-pass, verify-account and mobile-app-links.
 * Taken from the website redesign (docs/New Website/NutriPro-Redesign-19.html, the
 * #login, #register, #password-reset and #client-access screens) and its tokens
 * (src/website/src/styles/tokens.css). One file for both directions: it uses logical
 * properties (margin-inline, padding-inline) instead of left/right.
 * Loaded after the app's own styles, only on these pages (Styles::$AuthPages).
 * Sizes are in px: the app's Bootstrap sets the root font size to 10px, so rem would shrink.
 */

@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/Inter/inter-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/Inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Noto Sans Arabic Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/Noto-Sans-Arabic/noto-sans-arabic-arabic-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

body.np-auth-page {
	--np-forest: #183f32;
	--np-green: #276f52;
	--np-green-hover: #1d593f;
	--np-gold: #e8be64;
	--np-orange: #a95022;
	--np-ink: #294438;
	--np-muted: #53645a;
	--np-line: #dde8df;
	--np-line-strong: #bed2c1;
	--np-pale: #f5f8f3;
	--np-pale-hover: #f1f7f1;
	--np-mint: #edf5ee;
	--np-cream: #fffaef;
	--np-cream-line: #f1dfbc;
	--np-on-dark-muted: #deeadf;
	--np-field-border: #bcd0c1;
	--np-placeholder: #69776d;
	--np-focus-halo: #d2e9db;
	--np-error: #b42318;
	--np-error-bg: #fef3f2;
	--np-error-line: #f6cfcb;
	--np-font: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--np-font-arabic: 'Noto Sans Arabic Variable', 'Inter Variable', system-ui, 'Segoe UI', Tahoma, sans-serif;

	background: var(--np-pale);
	color: var(--np-forest);
	font: 400 16px/1.65 var(--np-font);
}

html[lang='ar'] body.np-auth-page {
	font-family: var(--np-font-arabic);
}

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

.np-auth h1,
.np-auth p,
.np-auth ul,
.np-auth ol {
	margin: 0;
}

.np-auth h1,
.np-auth label,
.np-auth legend,
.np-auth button,
.np-auth input {
	font-family: inherit;
}

.np-auth a {
	color: var(--np-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.np-auth a:hover,
.np-auth a:focus {
	color: var(--np-green-hover);
}

.np-auth-header a:focus-visible,
.np-auth a:focus-visible,
.np-auth button:focus-visible,
.np-auth input[type='checkbox']:focus-visible,
.np-auth input[type='radio']:focus-visible {
	outline: 3px solid var(--np-orange);
	outline-offset: 3px;
}

/* Header: logo and language switch, outside the card */

.np-auth-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #ffffffed;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--np-line);
}

.np-auth-header-bar {
	max-width: 1180px;
	min-height: 64px;
	margin: 0 auto;
	padding: 10px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.np-auth-logo {
	display: inline-block;
}

.np-auth-logo img {
	display: block;
	height: 34px;
	width: auto;
}

.np-auth-header .np-auth-langs {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--np-line);
	border-radius: 8px;
	background: var(--np-pale);
}

.np-auth-header .np-auth-langs a {
	display: block;
	min-width: 38px;
	padding: 4px 8px;
	border-radius: 6px;
	color: var(--np-muted);
	font-size: 12.8px;
	font-weight: 650;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
}

.np-auth-header .np-auth-langs a:hover {
	color: var(--np-forest);
	background: #fff;
}

.np-auth-header .np-auth-langs a.active {
	color: #fff;
	background: var(--np-green);
}

/* Layout */

.np-auth {
	max-width: 1180px;
	min-height: calc(100vh - 65px);
	margin: 0 auto;
	padding: 48px 32px 68px;
	display: flex;
	align-items: center;
}

.np-auth-shell {
	width: 100%;
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	border: 1px solid var(--np-line);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 18px 55px #183f320c;
}

/* Story panel */

.np-auth-story {
	padding: 44px 36px;
	background: linear-gradient(145deg, #183f32, #276f52);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}

[dir='rtl'] .np-auth-story {
	background: linear-gradient(215deg, #183f32, #276f52);
}

.np-auth .np-auth-eyebrow {
	color: var(--np-green);
	font-weight: 700;
	font-size: 13.1px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

html[lang='ar'] .np-auth .np-auth-eyebrow {
	letter-spacing: 0;
	text-transform: none;
}

.np-auth .np-auth-story .np-auth-eyebrow {
	color: var(--np-gold);
}

.np-auth .np-auth-story-title {
	color: #fff;
	font-size: 36.8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.03em;
	max-width: 390px;
}

html[lang='ar'] .np-auth .np-auth-story-title {
	letter-spacing: 0;
	line-height: 1.4;
}

.np-auth .np-auth-story-text {
	color: var(--np-on-dark-muted);
	margin-top: 18px;
}

.np-auth-story ul {
	color: var(--np-on-dark-muted);
	padding-inline-start: 20px;
	margin-top: 8px;
}

.np-auth-story li {
	margin: 14px 0;
}

.np-auth-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 9px;
	background: #fff;
	padding: 12px;
}

.np-auth .np-auth-visual p {
	color: var(--np-on-dark-muted);
	font-size: 14px;
	margin-top: 14px;
}

/* Form column */

.np-auth-content {
	padding: 42px 48px;
	min-width: 0;
}

.np-auth .np-auth-head h1 {
	color: var(--np-forest);
	font-size: 34.4px;
	font-weight: 750;
	line-height: 1.16;
	letter-spacing: -0.035em;
}

html[lang='ar'] .np-auth .np-auth-head h1 {
	letter-spacing: 0;
	line-height: 1.35;
}

.np-auth .np-auth-intro {
	color: var(--np-muted);
	margin: 14px 0 28px;
}

.np-auth-head + .np-auth-message {
	margin-top: 24px;
}

.np-auth .np-auth-trial {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: -6px 0 26px;
}

.np-auth-trial li {
	font-size: 13.4px;
	background: var(--np-mint);
	color: var(--np-green);
	padding: 6px 10px;
	border-radius: 5px;
}

/* Form */

.np-auth-form {
	display: grid;
	gap: 19px;
}

.np-auth .np-auth-field label {
	display: block;
	color: var(--np-forest);
	font-weight: 650;
	font-size: 14.7px;
	margin-bottom: 7px;
}

.np-auth .np-auth-field .form-control {
	display: block;
	width: 100%;
	min-width: 0;
	height: 49px;
	border: 1px solid var(--np-field-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--np-forest);
	padding: 11px 13px;
	font-size: 16px;
	line-height: 1.5;
}

.np-auth .np-auth-field .form-control::placeholder {
	color: var(--np-placeholder);
	opacity: 1;
}

.np-auth .np-auth-field .form-control:focus {
	outline: 3px solid var(--np-focus-halo);
	border-color: var(--np-green);
}

.np-auth .np-auth-field .form-control.invalid {
	border-color: var(--np-error) !important;
	outline-color: var(--np-error-line);
}

[dir='rtl'] .np-auth .np-auth-field input[type='email'] {
	direction: ltr;
	text-align: end;
}

.np-auth-hint {
	display: block;
	color: var(--np-muted);
	font-size: 13.4px;
	margin-top: 6px;
}

.np-auth-password {
	display: flex;
	align-items: center;
	gap: 8px;
}

.np-auth .np-auth-password .form-control {
	flex: 1;
}

.np-auth .np-auth-password .showhidebtn {
	position: static;
	flex-shrink: 0;
	width: 49px;
	height: 49px;
	padding: 0;
	background: #f3f7f2;
	color: var(--np-green);
	border: 1px solid var(--np-line);
	border-radius: 7px;
	font-size: 16px;
	cursor: pointer;
}

.np-auth .np-auth-password .showhidebtn:hover {
	background: var(--np-pale-hover);
	border-color: var(--np-line-strong);
}

.np-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14.1px;
}

.np-auth .np-auth-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	color: var(--np-ink);
	font-size: 14.1px;
	font-weight: 400;
	line-height: 1.55;
	cursor: pointer;
}

.np-auth .np-auth-check input {
	position: static;
	opacity: 1;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 2px 0 0;
	accent-color: var(--np-green);
}

.np-auth .np-auth-check input.invalid {
	outline: 2px solid var(--np-error);
	outline-offset: 2px;
}

/* Account-type choice: shown by ajax/forms.php when one username or email has several accounts */

.np-auth .np-auth-types {
	border: 1px solid var(--np-cream-line);
	background: var(--np-cream);
	border-radius: 8px;
	padding: 14px 16px 16px;
	margin: 0;
	min-width: 0;
}

/* Floated so the legend sits inside the box instead of on its border */
.np-auth .np-auth-types legend {
	float: left;
	width: 100%;
	border: 0;
	margin: 0 0 10px;
	padding: 0;
	color: var(--np-forest);
	font-size: 14.7px;
	font-weight: 650;
	line-height: 1.5;
}

.np-auth-types-options {
	clear: both;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.np-auth .np-auth-types label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--np-field-border);
	border-radius: 8px;
	color: var(--np-forest);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

.np-auth .np-auth-types label:hover {
	border-color: var(--np-green);
}

.np-auth .np-auth-types label:has(input:checked) {
	border-color: var(--np-green);
	background: var(--np-mint);
	box-shadow: inset 0 0 0 1px var(--np-green);
}

.np-auth .np-auth-types label.hidden {
	display: none;
}

.np-auth .np-auth-types input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--np-green);
}

/* Buttons */

.np-auth .np-auth-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 11px 22px;
	border: 1px solid var(--np-green);
	border-radius: 8px;
	background: var(--np-green);
	color: #fff;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 10px #276f5212;
	transition: background 0.16s, box-shadow 0.16s;
}

.np-auth .np-auth-button:hover {
	background: var(--np-green-hover);
	border-color: var(--np-green-hover);
	box-shadow: 0 6px 16px #276f5220;
}

.np-auth .np-auth-button[data-clickable='0'] {
	opacity: 0.7;
	cursor: progress;
}

.np-auth .np-auth-button-facebook {
	background: #fff;
	color: var(--np-forest);
	border-color: var(--np-line);
	box-shadow: none;
}

.np-auth .np-auth-button-facebook:hover {
	background: var(--np-pale-hover);
	border-color: var(--np-line-strong);
	box-shadow: none;
}

.np-auth .np-auth-button-facebook .fa {
	color: #1877f2;
	font-size: 19.2px;
}

.np-auth-social {
	margin-top: 22px;
}

.np-auth .np-auth-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	color: var(--np-muted);
	font-size: 13.4px;
}

.np-auth-divider::before,
.np-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--np-line);
}

/* Messages */

.np-auth-message {
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 15px;
	color: var(--np-ink);
	background: var(--np-mint);
	border: 1px solid #cfe4d4;
}

.np-auth-message-error {
	background: var(--np-error-bg);
	border-color: var(--np-error-line);
	color: var(--np-error);
}

/* The verify-account countdown: the app's style.css makes .jsRedirecting white for the old green banner */
.np-auth .np-auth-message .jsRedirecting {
	color: var(--np-muted);
}

.np-auth .np-auth-message .jsRedirecting a {
	color: var(--np-green);
}

/* Links under the form */

.np-auth-switch {
	font-size: 14.7px;
	margin-top: 24px;
	text-align: center;
	color: var(--np-muted);
}

.np-auth .np-auth-switch p + p {
	margin-top: 6px;
}

.np-auth-note {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--np-line);
	font-size: 14.1px;
	color: var(--np-muted);
}

.np-auth-note b {
	color: var(--np-forest);
	font-weight: 650;
}

.np-auth .np-auth-note p {
	margin-top: 8px;
}

.np-auth .np-auth-small {
	color: var(--np-muted);
	font-size: 14px;
}

/* Client access */

.np-auth .np-auth-steps {
	padding-inline-start: 22px;
	color: var(--np-muted);
}

.np-auth-steps li {
	padding-inline-start: 5px;
	margin: 16px 0;
}

.np-auth-stores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 26px 0;
}

.np-auth .np-auth-stores a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid var(--np-line);
	padding: 16px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--np-forest);
	background: var(--np-pale);
}

.np-auth .np-auth-stores a:hover {
	background: var(--np-pale-hover);
	border-color: var(--np-line-strong);
}

.np-auth-stores small {
	color: var(--np-muted);
	font-size: 13.1px;
}

.np-auth-stores b {
	font-weight: 650;
}

@media (max-width: 850px) {
	.np-auth {
		padding: 32px 24px 48px;
	}

	.np-auth-shell {
		grid-template-columns: 1fr;
	}

	.np-auth-story {
		padding: 28px 30px;
		gap: 16px;
	}

	.np-auth .np-auth-story-title {
		font-size: 30.4px;
		max-width: none;
	}

	.np-auth-story ul {
		margin: 0;
	}

	.np-auth-visual {
		display: none;
	}

	.np-auth-content {
		padding: 28px 30px 34px;
	}
}

@media (max-width: 600px) {
	.np-auth-header-bar {
		min-height: 56px;
		padding: 8px 16px;
	}

	.np-auth-logo img {
		height: 28px;
	}

	.np-auth {
		padding: 16px 16px 40px;
		align-items: flex-start;
	}

	.np-auth-story {
		padding: 22px 22px 24px;
	}

	.np-auth .np-auth-story-title {
		font-size: 24px;
	}

	.np-auth-story ul {
		display: none;
	}

	.np-auth .np-auth-story-text {
		margin-top: 10px;
	}

	.np-auth-content {
		padding: 20px 22px 28px;
	}

	.np-auth .np-auth-head h1 {
		font-size: 29.6px;
	}

	.np-auth-stores {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-auth .np-auth-button {
		transition: none;
	}
}