/**
 * Theme My Login - Custom : Auth UI (login, register, lost password)
 *
 * Shared rules target the common .tml container; per-form rules are scoped to
 * .tml-login / .tml-register / .tml-lostpassword.
 * Brand color is injected as --tmlc-brand via wp_add_inline_style.
 */

.tml {
	--tmlc-brand: #0D9488;
	--tmlc-brand-hover: color-mix( in srgb, var(--tmlc-brand) 85%, #000 );
	--tmlc-border: #d1d5db;
	--tmlc-text: #1f2937;
	--tmlc-muted: #6b7280;
	--tmlc-radius: 10px;

	box-sizing: border-box;
	max-width: 420px;
	padding: 0;
	background: transparent;
	font-size: 15px;
	color: var(--tmlc-text);
}

.tml *,
.tml *::before,
.tml *::after {
	box-sizing: border-box;
}

/* Field wrappers */
.tml .tml-field-wrap {
	margin-bottom: 1.1rem;
}

/* Labels */
.tml .tml-label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--tmlc-text);
}

/* Text / email / password inputs */
.tml input[type="text"],
.tml input[type="email"],
.tml input[type="password"] {
	width: 100%;
	padding: 0.7rem 0.9rem 0.7rem 2.6rem;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--tmlc-text);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 0.85rem center;
	background-size: 20px 20px;
	border: 1px solid var(--tmlc-border);
	border-radius: var(--tmlc-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tml input[type="text"]:focus,
.tml input[type="email"]:focus,
.tml input[type="password"]:focus {
	border-color: var(--tmlc-brand);
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--tmlc-brand) 22%, transparent );
}

.tml input::placeholder {
	color: #9ca3af;
}

/* Field descriptions / helper text */
.tml .tml-description {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.82rem;
	color: var(--tmlc-muted);
}

/* ---- Field icons (left) ---- */
.tml-login .tml-log-wrap input,
.tml-register .tml-user_email-wrap input,
.tml-lostpassword .tml-user_login-wrap input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
}

.tml-login .tml-pwd-wrap input,
.tml-register .tml-user_pass1-wrap input,
.tml-register .tml-user_pass2-wrap input,
.tml-resetpass .tml-pass1-wrap input,
.tml-resetpass .tml-pass2-wrap input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.tml-register .tml-first_name-wrap input,
.tml-register .tml-last_name-wrap input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.tml-register .tml-user_login-wrap input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E");
}

/* ---- Password show/hide toggle ---- */
.tmlc-input-wrap {
	position: relative;
	display: block;
}

.tmlc-input-wrap input[type="text"],
.tmlc-input-wrap input[type="password"] {
	padding-right: 2.8rem;
}

.tmlc-pwd-toggle {
	position: absolute;
	right: 0.6rem;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--tmlc-muted);
	cursor: pointer;
	border-radius: 6px;
}

.tmlc-pwd-toggle:hover,
.tmlc-pwd-toggle:focus-visible {
	color: var(--tmlc-text);
	outline: none;
}

.tmlc-pwd-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* ---- Submit button (shared) ---- */
.tml .tml-submit-wrap {
	margin-bottom: 1rem;
}

.tml button[type="submit"] {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background-color: var(--tmlc-brand);
	border: 0;
	border-radius: var(--tmlc-radius);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tml button[type="submit"]:hover,
.tml button[type="submit"]:focus-visible {
	background-color: var(--tmlc-brand-hover);
	outline: none;
}

/* ---- Bottom links (shared) ---- */
.tml .tml-links {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	text-align: center;
}

.tml .tml-links li {
	margin: 0;
}

.tml .tml-links a {
	color: var(--tmlc-brand);
	font-weight: 600;
	text-decoration: none;
}

.tml .tml-links a:hover {
	text-decoration: underline;
}

/* ---- Alerts (shared) ---- */
.tml .tml-alerts ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--tmlc-radius);
	font-size: 0.9rem;
	line-height: 1.45;
	box-shadow: none;
}

/* Flatten the inner <li> — Theme My Login adds a left border + box-shadow that
   double-enclosed the message inside our outer box. */
.tml .tml-alerts li {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

.tml .tml-alerts li + li {
	margin-top: 0.35rem;
}

.tml .tml-alerts .tml-errors {
	background: #fef2f2;
	border-color: #f5c6c6;
	color: #b42318;
}

.tml .tml-alerts .tml-messages {
	background: color-mix( in srgb, var(--tmlc-brand) 10%, #fff );
	border-color: color-mix( in srgb, var(--tmlc-brand) 35%, #fff );
	color: color-mix( in srgb, var(--tmlc-brand) 80%, #000 );
}

/* =========================================================================
 * LOGIN-specific
 * ====================================================================== */

/* Remember me + Forgot password row (forgot link relocated here by JS) */
.tml-login .tml-rememberme-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.4rem;
}

.tml-login .tml-rememberme-wrap input[type="checkbox"] {
	margin: 0 0.4rem 0 0;
	width: 16px;
	height: 16px;
	accent-color: var(--tmlc-brand);
	vertical-align: middle;
}

.tml-login .tml-rememberme-wrap .tml-label {
	display: inline-flex;
	align-items: center;
	margin: 0 auto 0 0;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--tmlc-text);
}

.tml-login .tmlc-forgot-link {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tmlc-brand);
	text-decoration: none;
	white-space: nowrap;
}

.tml-login .tmlc-forgot-link:hover {
	text-decoration: underline;
}

.tml-login .tml-register-link {
	font-size: 0.92rem;
	color: var(--tmlc-muted);
}

.tml-login .tml-register-link::before {
	content: "Don't have an account? ";
	color: var(--tmlc-muted);
}

/* The forgot link is moved into the remember row; hide its original list item. */
.tml-login .tml-links .tml-lostpassword-link {
	display: none;
}

/* =========================================================================
 * REGISTER-specific
 * ====================================================================== */

/* First name / Last name two-column row (wrapper added by JS) */
.tml-register .tmlc-name-row {
	display: flex;
	gap: 0.8rem;
}

.tml-register .tmlc-name-row .tml-field-wrap {
	flex: 1 1 0;
	min-width: 0;
}

/* Hide the password strength meter (kept the password hint instead) */
.tml-register .tml-indicator-wrap,
.tml-register #pass-strength-result {
	display: none !important;
}

/* Dedicated password hint (wp_get_password_hint) — subtle, italic */
.tml-register .tml-indicator_hint-wrap .indicator-hint {
	margin: 0;
	font-size: 0.78rem;
	font-style: italic;
	line-height: 1.4;
	color: #9ca3af;
}

/* Terms & conditions checkbox row */
.tml-register .tml-accept_terms-wrap {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1.4rem;
}

.tml-register .tml-accept_terms-wrap input[type="checkbox"] {
	margin: 0.15rem 0 0;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	accent-color: var(--tmlc-brand);
}

.tml-register .tml-accept_terms-wrap .tml-label {
	margin: 0;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--tmlc-text);
}

.tml-register .tml-accept_terms-wrap .tml-label a {
	color: var(--tmlc-brand);
	font-weight: 600;
	text-decoration: none;
}

.tml-register .tml-accept_terms-wrap .tml-label a:hover {
	text-decoration: underline;
}

/* Bottom "Already have an account? Sign in" */
.tml-register .tml-login-link {
	font-size: 0.92rem;
	color: var(--tmlc-muted);
}

.tml-register .tml-login-link::before {
	content: "Already have an account? ";
	color: var(--tmlc-muted);
}

/* =========================================================================
 * LOST PASSWORD-specific
 * ====================================================================== */

/* Hide the default instruction paragraph (field + button only). */
.tml-lostpassword .tml-message-wrap {
	display: none;
}

/* =========================================================================
 * RESET PASSWORD-specific
 * ====================================================================== */

/* Remove the password hint text above the Save password button. */
.tml-resetpass .tml-indicator_hint-wrap {
	display: none;
}

/* Keep the strength meter, but collapse its blank default state so the gap
   before the button stays uniform. The meter only appears once WordPress adds
   a strength class (short/bad/good/strong) while typing. */
.tml-resetpass .tml-indicator-wrap {
	margin-bottom: 0;
}

.tml-resetpass #pass-strength-result {
	display: none;
	margin: 0;
}

.tml-resetpass #pass-strength-result.short,
.tml-resetpass #pass-strength-result.bad,
.tml-resetpass #pass-strength-result.good,
.tml-resetpass #pass-strength-result.strong,
.tml-resetpass #pass-strength-result.mismatch {
	display: block;
	margin-top: 0.6rem;
	margin-bottom: 1.1rem;
	opacity: 1;
	border-radius: var(--tmlc-radius);
}