/*
 * Minimal Param authentication card inspired by the supplied reference.
 * Target: WordPress 6.0+; progressive enhancement for modern browsers.
 */

body.login {
	display: grid !important;
	min-height: 100% !important;
	padding: clamp(1rem, 4vw, 3rem) !important;
	place-items: center !important;
	background:
		radial-gradient(circle at 20% 15%, rgba(155, 196, 125, .24), transparent 28rem),
		linear-gradient(145deg, #eef1eb, #e2e5df) !important;
}

body.login .param-login-welcome { display: none !important; }

body.login #login,
body.login.param-register-custom #login {
	width: min(27rem, 100%) !important;
	margin: auto !important;
	padding: clamp(2rem, 5vw, 2.75rem) !important;
	border: 1px solid rgba(100, 142, 80, .12) !important;
	border-radius: 2rem !important;
	background: rgba(252, 253, 250, .97) !important;
	box-shadow: 0 1.4rem 4rem rgba(45, 51, 40, .13) !important;
	backdrop-filter: blur(1rem);
}

body.login.param-register-custom #login { width: min(30rem, 100%) !important; }
body.login h1 { display: none !important; }

body.login .param-login-intro {
	margin: 0 0 1.7rem !important;
	text-align: right;
}

body.login .param-login-intro h2 {
	margin: 0 0 .45rem !important;
	font-size: clamp(1.75rem, 6vw, 2.35rem) !important;
	font-weight: 750 !important;
	line-height: 1.3 !important;
}

body.login .param-login-intro p {
	font-size: .9rem !important;
	line-height: 1.85 !important;
}

body.login form,
body.login .admin-email-confirm-form {
	overflow: visible !important;
}

body.login form > p,
body.login form > div > p { margin: 0 0 .8rem; }

body.login #loginform > [hidden],
body.login #loginform .param-auth-password-row--hidden { display: none !important; }

body.login label {
	display: block;
	margin-bottom: .35rem;
	font-size: .86rem !important;
	font-weight: 590 !important;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login input[type="tel"] {
	min-height: 3.15rem !important;
	margin: .35rem 0 .9rem !important;
	padding: .7rem 1rem !important;
	border: 1px solid transparent !important;
	border-radius: .75rem !important;
	background-color: #f2f4f0 !important;
	color: var(--param-login-ink) !important;
	font-size: .97rem !important;
	box-shadow: inset 0 0 0 1px rgba(40, 40, 34, .025) !important;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login input[type="tel"]:focus {
	border-color: var(--param-login-primary) !important;
	background-color: #fff !important;
	box-shadow: 0 0 0 .2rem rgba(100, 142, 80, .12) !important;
	outline: 0 !important;
}

.param-auth-input {
	position: relative;
	display: block;
}

.param-auth-input__icon {
	position: absolute;
	z-index: 3;
	top: calc(50% - .28rem);
	right: .95rem;
	display: grid;
	width: 1.1rem;
	height: 1.1rem;
	place-items: center;
	transform: translateY(-50%);
	color: #858b82;
	pointer-events: none;
}

.param-auth-input__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

body.login .param-auth-input > .param-auth-input__control {
	padding-right: 2.85rem !important;
}

body.login .param-auth-input > input[type="password"] { padding-left: 3rem !important; }

body.login .param-password-toggle,
body.login .button.wp-hide-pw {
	top: 50% !important;
	right: auto !important;
	left: .55rem !important;
	transform: translateY(-50%) !important;
}

body.login .param-phone-entry,
body.login .param-phone-entry--login {
	margin: .35rem 0 .9rem !important;
}

body.login .param-phone-entry .iti__tel-input {
	margin: 0 !important;
	padding-left: 7.3rem !important;
}

body.login .param-phone-entry--login:not(.is-phone-mode) > input,
body.login .param-phone-entry--login:not(.is-phone-mode) .iti__tel-input {
	margin: 0 !important;
	padding-left: 1rem !important;
	padding-right: 2.85rem !important;
}

body.login .param-phone-entry > .param-auth-input__icon { z-index: 1; }
body.login .param-phone-entry .iti__country-container { z-index: 4; }
body.login .param-phone-entry.is-phone-mode > .param-auth-input__icon { display: none; }

body.login .iti__selected-country-primary {
	border-inline-end: 1px solid rgba(100, 142, 80, .14);
	border-radius: .7rem 0 0 .7rem;
	background: rgba(100, 142, 80, .06);
}

body.login .iti__country-selector { direction: rtl; }
body.login .iti__country-name { text-align: right; }
body.login .iti__dial-code { color: #7c8179; direction: ltr; }

body.login .button-primary,
body.login .admin-email-confirm-form .button-primary {
	min-height: 3.15rem !important;
	border-radius: .7rem !important;
	background: var(--param-login-primary) !important;
	font-size: .95rem !important;
	box-shadow: 0 .7rem 1.5rem rgba(100, 142, 80, .2) !important;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--param-login-primary-dark) !important;
}

body.login .param-auth-forgot {
	margin: .25rem 0 .85rem !important;
	text-align: right;
}

body.login #loginform > .forgetmenot,
body.login #loginform > .param-auth-forgot {
	float: none !important;
	clear: both;
	width: 100%;
	box-sizing: border-box;
}

body.login #loginform > .forgetmenot { display: flex; }
body.login #loginform > .param-auth-forgot { display: block; }

body.login .param-auth-forgot a {
	color: var(--param-login-muted);
	font-size: .8rem;
	font-weight: 520;
	text-decoration: none;
}

body.login.login-action-login #nav a[href*="action=lostpassword"] { display: none; }

body.login #nav {
	margin-top: 1.2rem !important;
	padding-top: 1rem !important;
	font-size: .85rem;
}

body.login #backtoblog { display: none; }

body.login .param-register-type__tabs label > span {
	min-height: 5.25rem;
	border-radius: .75rem;
	background: #f2f4f0;
}

body.login .param-register-type__notice {
	border-radius: .65rem;
	background: #f5f6f2;
}

body.login .param-password-group {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.login .param-password-strength {
	margin-top: -.3rem;
	padding: .65rem;
	border-radius: .65rem;
	background: #f5f6f2;
}

body.login .param-login-otp,
body.login .param-register-otp {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.login .param-login-otp__icon { display: none; }

body.login input[autocomplete="one-time-code"] {
	position: absolute !important;
	z-index: 2;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: transparent !important;
	caret-color: transparent;
	opacity: .01;
	letter-spacing: 0 !important;
	text-indent: 0;
}

body.login .param-otp-control {
	position: relative;
	display: block;
	margin: .35rem 0 .9rem;
	direction: ltr;
}

body.login .param-otp-slots {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .5rem;
}

body.login .param-otp-slot {
	display: grid;
	min-width: 0;
	min-height: 3.35rem;
	place-items: center;
	border: 1px solid var(--param-login-border);
	border-radius: .7rem;
	background: #fff;
	color: var(--param-login-ink);
	font-size: 1.25rem;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(40, 40, 34, .02);
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body.login .param-otp-slot.is-filled { background: #f7f9f4; }

body.login .param-otp-control:focus-within .param-otp-slot.is-active {
	border-color: var(--param-login-primary);
	box-shadow: 0 0 0 .2rem rgba(100, 142, 80, .12);
}

body.login .param-register-otp__timer,
body.login .param-login-otp__timer {
	margin: .2rem 0 .8rem;
	background: #f5f6f2;
}

body.login .message,
body.login .notice,
body.login #login_error {
	border-radius: .7rem;
	font-size: .84rem;
}

@media (max-width: 480px) {
	body.login { padding: 1rem !important; }
	body.login #login,
	body.login.param-register-custom #login { padding: 1.7rem 1.35rem !important; border-radius: 1.5rem !important; }
	body.login .param-phone-entry .iti__tel-input { padding-left: 6.8rem !important; }
}