/* The "Set Password" page (reached from the WhatsApp reset-link, or /login's Forgot Password) in the Green
 * Care field design, so it does not look like bare, unstyled Frappe after the branded login page. Added to
 * every website page through web_include_css in hooks.py, scoped to body[data-path="update-password"] so
 * nothing here touches another page. Same tokens and rules as public/css/login.css, kept as its own copy on
 * purpose (same reasons: field-ui.css styles html/body globally and must not load site-wide, and the site
 * theme forces heading fonts/link colours with !important that need restating here too). The structure
 * differs from /login though: this page has no "#page-login" wrapper, so ".for-reset-password" (its own
 * outer <section>) plays that role, and it has password-strength/mismatch elements /login does not. */

@font-face {
	font-family: "GCA Archivo";
	src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "GCA Fraunces";
	src: url("../fonts/fraunces-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body[data-path="update-password"] {
	--gc-paper: #eef1e6;
	--gc-raised: #f9fbf4;
	--gc-ink: #1b2118;
	--gc-soft: #4e5a48;
	--gc-faint: #667260;
	--gc-line: #cbd3bc;
	--gc-leaf: #3d6b35;
	--gc-deep: #1f3a1b;
	--gc-on-deep: #f9fbf4;
	--gc-clay: #96503c;
	--gc-clay-soft: #f3e1db;
	--gc-tint: #e4ebdb;
	--gc-font: "GCA Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
	--gc-display: "GCA Fraunces", Georgia, "Times New Roman", "Noto Sans Devanagari", serif;

	margin: 0;
	background: var(--gc-paper);
	color: var(--gc-ink);
	font-family: var(--gc-font);
	font-size: 15px;
	line-height: 1.45;
	-webkit-tap-highlight-color: transparent;
}
body[data-path="update-password"] .for-reset-password * { box-sizing: border-box; }

/* the deep-green band across the top, with the card overlapping it - the same composition as /login and the Hub */
body[data-path="update-password"] .for-reset-password {
	display: block;
	min-height: 100vh;
	min-height: 100dvh;
	background: linear-gradient(var(--gc-deep) 0, var(--gc-deep) 230px, transparent 230px);
}

body[data-path="update-password"] .page-card,
body[data-path="update-password"] .login-content.page-card {
	width: auto;
	max-width: 420px;
	margin: 72px auto 32px;
	padding: 28px 24px 24px;
	background: var(--gc-raised);
	border: 1px solid var(--gc-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(31, 58, 27, 0.06), 0 14px 30px -14px rgba(31, 58, 27, 0.32);
}

body[data-path="update-password"] .page-card-head { padding: 0; margin: 0 0 20px; text-align: center; border: 0; background: none; }
body[data-path="update-password"] .page-card-head .app-logo { display: block; max-height: 56px; width: auto; max-width: 70%; margin: 0 auto 14px; }
body[data-path="update-password"] .page-card-head h4 {
	margin: 0;
	font-family: var(--gc-display) !important;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--gc-ink);
}
body[data-path="update-password"] .page-card-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--gc-soft); }

body[data-path="update-password"] .page-card-body { padding: 0; }
body[data-path="update-password"] .form-group { margin: 0 0 14px; gap: 0; }
body[data-path="update-password"] .form-label {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 500;
	color: var(--gc-soft);
}
body[data-path="update-password"] .form-control,
body[data-path="update-password"] input.form-control {
	width: 100%;
	height: 46px;
	padding: 0 42px 0 40px; /* every field here has a lock icon on the left and an eye toggle on the right */
	border: 1px solid var(--gc-line);
	border-radius: 12px;
	background: var(--gc-paper);
	color: var(--gc-ink);
	font: inherit;
	font-size: 16px; /* 16px: iPhones zoom into smaller inputs */
	box-shadow: none;
}
body[data-path="update-password"] .form-control::placeholder { color: var(--gc-faint); }
body[data-path="update-password"] .form-control:focus {
	outline: 0;
	border-color: var(--gc-leaf);
	background: var(--gc-paper);
	box-shadow: 0 0 0 3px rgba(61, 107, 53, 0.18);
}
body[data-path="update-password"] .password-field { position: relative; }
body[data-path="update-password"] .password-field .field-icon {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	color: var(--gc-faint); stroke: currentColor; pointer-events: none;
}
body[data-path="update-password"] .password-field .toggle-password {
	position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
	color: var(--gc-faint); stroke: currentColor; cursor: pointer;
}

body[data-path="update-password"] .password-hint {
	display: flex; align-items: flex-start; gap: 6px;
	margin: 8px 0 0; font-size: 12.5px; color: var(--gc-faint); line-height: 1.4;
}
body[data-path="update-password"] .password-hint svg { flex: none; margin-top: 1px; stroke: currentColor; }

body[data-path="update-password"] .password-strength-container { margin: 10px 0 0; }
body[data-path="update-password"] .password-strength-bar-track {
	height: 5px; border-radius: 3px; overflow: hidden; background: var(--gc-line);
}
body[data-path="update-password"] .password-strength-bar-fill { height: 100%; border-radius: 3px; transition: width 0.2s ease; }
body[data-path="update-password"] .password-strength-bar-fill.strength-red { background: #b3261e; }
body[data-path="update-password"] .password-strength-bar-fill.strength-orange { background: #a66a1e; }
body[data-path="update-password"] .password-strength-bar-fill.strength-blue { background: #2a5a8c; }
body[data-path="update-password"] .password-strength-bar-fill.strength-green { background: var(--gc-leaf); }
body[data-path="update-password"] .password-strength-label { display: block; margin: 5px 0 0; font-size: 12.5px; font-weight: 500; }
body[data-path="update-password"] .password-strength-label.strength-red { color: #b3261e; }
body[data-path="update-password"] .password-strength-label.strength-orange { color: #a66a1e; }
body[data-path="update-password"] .password-strength-label.strength-blue { color: #2a5a8c; }
body[data-path="update-password"] .password-strength-label.strength-green { color: var(--gc-leaf); }
body[data-path="update-password"] .password-strength-message,
body[data-path="update-password"] .password-mismatch-message { margin: 8px 0 0; font-size: 12.5px; color: var(--gc-clay); }

body[data-path="update-password"] .page-card-actions { padding: 10px 0 0; }
body[data-path="update-password"] .btn.btn-block,
body[data-path="update-password"] .btn-signup {
	display: flex; align-items: center; justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--gc-deep);
	color: var(--gc-on-deep);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	box-shadow: none;
}
body[data-path="update-password"] .btn.btn-block:hover,
body[data-path="update-password"] .btn.btn-block:focus,
body[data-path="update-password"] .btn-signup:hover { background: var(--gc-deep); color: var(--gc-on-deep); }
body[data-path="update-password"] .btn.btn-block:active { transform: scale(0.99); }
body[data-path="update-password"] .btn.btn-block[disabled],
body[data-path="update-password"] .btn-signup[disabled] { background: var(--gc-line); color: var(--gc-faint); opacity: 1; cursor: not-allowed; }

body[data-path="update-password"] .page-card a,
body[data-path="update-password"] .page-card a:hover,
body[data-path="update-password"] .page-card a:visited { color: var(--gc-leaf); font-weight: 500; text-decoration: none; }
body[data-path="update-password"] .sign-up-message { margin: 18px 0 0; font-size: 14px; text-align: center; color: var(--gc-soft); }

@media (max-width: 480px) {
	body[data-path="update-password"] .for-reset-password { background: linear-gradient(var(--gc-deep) 0, var(--gc-deep) 190px, transparent 190px); }
	body[data-path="update-password"] .page-card,
	body[data-path="update-password"] .login-content.page-card { margin: 48px 14px 24px; padding: 24px 18px 20px; }
}