/* ====================================================================
 * ProfilePress — login, sign-up, password reset (inc/profilepress.php)
 * --------------------------------------------------------------------
 * The plugin prints its own theme: white card, blue pill button,
 * Merriweather, Material-icon glyphs inside the fields. This puts the
 * form in the site's own clothes, the way tutor.css does for Tutor.
 * Written as `.pp-form-container .x` (0,2,0) and with a few !important
 * where ProfilePress inlines a <style> with the same weight.
 * ==================================================================== */

.pp-form-container {
	max-inline-size: 26rem;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body) !important;
	direction: rtl;
}
html[lang="en-US"] .pp-form-container,
html[lang="en"] .pp-form-container { direction: ltr; }

/* The card */
.pp-form-container .pp-form-wrapper {
	background-color: var(--wp--preset--color--card) !important;
	color: var(--wp--preset--color--text) !important;
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--card, 12px) !important;
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9) !important;
	padding: 1.75rem 1.6rem 1.6rem !important;
	font-family: inherit !important;
}
/* The page H1 already says «تسجيل الدخول»; the card's own headline repeats it. */
.pp-form-container .ppbs-headline { display: none !important; }

/* Fields: dark inputs, the body face, the placeholder in the secondary text
   colour. The icon moves to the inline END so it no longer sits over the
   start of an RTL placeholder; the input gets room for it on that side. */
.pp-form-container .pp-form-field-wrap { margin-block: 0 0.9rem !important; }
.pp-form-container .pp-form-field-input-textarea-wrap { position: relative; }
.pp-form-container input.pp-form-field:not([type="checkbox"]):not([type="radio"]) {
	inline-size: 100% !important;
	min-block-size: 48px !important;
	padding: 0.7rem 1rem !important;
	padding-inline-end: 2.75rem !important;
	background-color: var(--wp--preset--color--ground-alt) !important;
	color: var(--wp--preset--color--text) !important;
	border: 1px solid rgba(167, 154, 217, 0.25) !important;
	border-radius: var(--wp--custom--radius--button, 8px) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	text-align: start !important;
	direction: inherit !important;
}
.pp-form-container input.pp-form-field:not([type="checkbox"])::placeholder { color: var(--wp--preset--color--text-2) !important; opacity: 1; }
.pp-form-container input.pp-form-field:not([type="checkbox"]):focus {
	outline: none !important;
	border-color: var(--wp--preset--color--brand) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 245, 0.35) !important;
}
.pp-form-container .pp-form-material-icons {
	position: absolute !important;
	inset-block-start: 50% !important;
	inset-inline-end: 0.9rem !important;
	inset-inline-start: auto !important;
	transform: translateY(-50%) !important;
	right: auto !important;
	left: auto !important;
	color: var(--wp--preset--color--text-3) !important;
	font-size: 1.25rem !important;
	line-height: 1 !important;
	pointer-events: none;
}
html[dir="rtl"] .pp-form-container .pp-form-material-icons { left: 0.9rem !important; }
html[dir="ltr"] .pp-form-container .pp-form-material-icons { right: 0.9rem !important; }
/* The eye toggles the password: it stays clickable and gets a 44px target. */
.pp-form-container .has-password-visibility-icon .pp-form-material-icons {
	pointer-events: auto;
	cursor: pointer;
	padding: 0.6rem;
	margin: -0.6rem;
}
/* The «face» glyph on the username field is decoration only. */
.pp-form-container .login-username .pp-form-material-icons,
.pp-form-container .reg-username .pp-form-material-icons,
.pp-form-container .reg-email .pp-form-material-icons { display: none !important; }
.pp-form-container .login-username input.pp-form-field { padding-inline-end: 1rem !important; }

/* Remember me */
.pp-form-container .ppform-remember-me { margin-block: 0.25rem 0.5rem; }
.pp-form-container .ppform-remember-checkbox {
	display: inline-flex; align-items: center; gap: 0.5rem;
	min-block-size: 44px; cursor: pointer;
	color: var(--wp--preset--color--text-2) !important;
	font-family: inherit !important; font-weight: 400 !important; font-size: 0.9375rem !important;
}
.pp-form-container .ppform-remember-checkbox input[type="checkbox"] { accent-color: var(--wp--preset--color--brand); inline-size: 1.05rem; block-size: 1.05rem; margin: 0; }

/* The button: --brand, the button radius, inside the card's padding — not
   ProfilePress's full-bleed pill fused to the card's bottom edge. */
.pp-form-container .pp-form-submit-button-wrap { margin-block-start: 0.5rem !important; }
.pp-form-container .ppform-submit-button {
	display: block !important;
	inline-size: 100% !important;
	min-block-size: 48px !important;
	padding: 0.75rem 1.25rem !important;
	background-color: var(--wp--preset--color--brand) !important;
	background-image: none !important;
	color: var(--wp--preset--color--text) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--button, 8px) !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: filter 160ms ease, box-shadow 160ms ease;
}
.pp-form-container .ppform-submit-button:hover,
.pp-form-container .ppform-submit-button:focus-visible { filter: brightness(1.1); box-shadow: 0 0 0 3px rgba(124, 58, 245, 0.35); outline: none; }

/* The links under the card */
.pp-form-container .ppress-form-bottom-links {
	margin-block-start: 1rem;
	text-align: center;
	color: var(--wp--preset--color--text-3);
	font-size: 0.9375rem;
}
.pp-form-container .ppress-form-bottom-links a {
	display: inline-block; min-block-size: 44px; line-height: 44px; padding-inline: 0.35rem;
	color: var(--wp--preset--color--text-2); text-decoration: none;
}
.pp-form-container .ppress-form-bottom-links a:hover,
.pp-form-container .ppress-form-bottom-links a:focus-visible { color: var(--wp--preset--color--text); text-decoration: underline; }

/* Errors and notices in the site's voice, not the plugin's */
.pp-form-container .profilepress-login-status,
.pp-form-container .profilepress-reg-status,
.pp-form-container .profilepress-reset-status,
.pp-form-container .ppress-form-error,
.pp-form-container .pp-alert {
	background-color: rgba(255, 178, 122, 0.12) !important;
	color: var(--wp--preset--color--text) !important;
	border: 1px solid rgba(255, 178, 122, 0.4) !important;
	border-radius: var(--wp--custom--radius--button, 8px) !important;
	padding: 0.75rem 1rem !important;
	margin-block-end: 1rem !important;
	font-family: inherit !important;
}

/* The page around the card: title centred over it, a little air above. */
.page-template-default .entry-content .pp-form-container { margin-block: 0.5rem 2rem; }

/* ── Beating ProfilePress's layout rules ─────────────────────────────
 * frontend.min.css sets these at (0,5,1) with !important: the submit
 * absolutely positioned full-width at the card's bottom with the pill's
 * corners, pill radii on the fields, and `padding: 0 6.387% 4% 0` on every
 * field wrap — a right padding written for LTR that squeezes RTL fields.
 * Same weight or one class more, loaded after, so these win. */
.pp-form-container .pp-form-wrapper.ppBuildScratch .pp-form-field-wrap,
.pp-form-container .pp-form-wrapper.ppBuildScratch .pp-form-submit-button-wrap {
	padding: 0 !important;
	inline-size: 100% !important;
	display: block !important;
}
.pp-form-container .pp-form-wrapper.ppBuildScratch.ppsbw-full-width .pp-form-submit-button-wrap {
	margin: 0.5rem 0 0 !important;
	position: static !important;
}
.pp-form-container .pp-form-wrapper.ppBuildScratch.ppsbw-full-width .pp-form-submit-button-wrap input.ppform-submit-button[type="submit"],
.pp-form-container .pp-form-wrapper.ppBuildScratch.ppsbl-pill .pp-form-submit-button-wrap input.ppform-submit-button[type="submit"] {
	position: static !important;
	inline-size: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: var(--wp--custom--radius--button, 8px) !important;
	padding: 0.85rem 1.25rem !important;
}
.pp-form-container .pp-form-wrapper.ppBuildScratch.ppsbw-full-width.ppsbl-pill,
.pp-form-container .pp-form-wrapper.ppBuildScratch.ppsbw-full-width.ppsbl-round {
	border-radius: var(--wp--custom--radius--card, 12px) !important;
	padding-bottom: 1.6rem !important;
}
.pp-form-container .pp-form-wrapper.ppBuildScratch.ppfl-pill .pp-form-field-wrap input.pp-form-field:not([type="radio"]):not([type="checkbox"]) {
	border-radius: var(--wp--custom--radius--button, 8px) !important;
}