/**
 * TTI Auth UI — brand skin for the Tutor LMS 4.0.4 stock auth templates.
 *
 * Loaded ONLY on /tutor-login/, /student-registration/ and
 * /instructor-registration/ (see tti-auth-ui.php :: tti_auth_ui_context).
 *
 * Scoping rule: every selector starts at body.tti-auth-page / .tti-auth-login /
 * .tti-auth-register — classes this mu-plugin adds itself — and then narrows to
 * a specific auth container (#tutor-login-form, #tutor-registration-wrap,
 * .tutor-login-form-wrapper). No rule ever targets a bare Tutor utility class,
 * so nothing here can reach a modal action row or any other page.
 *
 * The dark maroon page gradient and the login card's cream fill still come from
 * the theme's wp_head block (droipbase/functions.php, gated to these same
 * pages). This file only fixes what Tutor 4.0.4's new markup broke and extends
 * the same palette to the registration card.
 *
 * Palette: cream #faf6ee, card border #e8e1d6, ink #1a1a1a,
 *          brand maroon #500000 / hover #7a0012, input border #767676
 *          (#767676 = ~4.5:1 on white, ~4.1:1 on cream — WCAG 1.4.11).
 */

/* ==========================================================================
   1. Login — /tutor-login/
   ========================================================================== */

/*
 * Tutor 4.0.4 added `tutor-card tutor-shadow-md` to the login wrapper, so the
 * modern stylesheet paints an opaque white card AROUND the theme's cream card —
 * a white box with a cream box inside it. Flatten the outer one; the cream
 * .tutor-login-form-wrapper remains the only visible card.
 */
body.tti-auth-login .tutor-page-wrap .tutor-login-wrap.tutor-card {
	width: 100% !important;
	max-width: 584px !important;
	margin: 0 auto !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* The stock inner wrapper adds its own padding on top of the theme's 32px. */
body.tti-auth-login .tutor-login-form-wrapper.tutor-p-8 {
	padding: 32px;
}

/*
 * "Keep me signed in" is stripped in PHP (it is inert — session TTL is capped
 * site-wide), which leaves "Forgot Password?" alone on a justify-between row.
 * Push it back to the right, matching the pre-4.0 layout.
 */
body.tti-auth-login #tutor-login-form .tutor-flex.tutor-justify-between {
	justify-content: flex-end;
}

/* Show/hide password control: visible focus ring (it is now keyboard-reachable). */
body.tti-auth-page #tutor-login-form [role="button"][tabindex="0"]:focus-visible,
body.tti-auth-page #tutor-registration-form [role="button"][tabindex="0"]:focus-visible {
	outline: 2px solid #500000;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   2. Registration — /student-registration/, /instructor-registration/
   ========================================================================== */

/*
 * Stock drops the card straight into <main> with no gutter, so its first label
 * renders underneath the 72px fixed Droip header. Centre the card in the band
 * the header leaves visible.
 */
body.tti-auth-register main.droipbase-site-main {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 104px 20px 56px;
}

/* Cream card, same treatment as the login card. */
body.tti-auth-register #tutor-registration-wrap {
	width: 100% !important;
	max-width: 560px !important;
	margin: 0 auto !important;
	background: #faf6ee !important;
	border: 1px solid #e8e1d6 !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30) !important;
	color: #1a1a1a;
}

body.tti-auth-register #tutor-registration-wrap .tutor-block {
	color: #1a1a1a;
	font-weight: 600;
}

/* Inputs: white on cream with a 1.4.11-compliant border. */
body.tti-auth-register #tutor-registration-form input[type="text"],
body.tti-auth-register #tutor-registration-form input[type="email"],
body.tti-auth-register #tutor-registration-form input[type="password"] {
	background: #ffffff;
	border: 1px solid #767676;
	color: #1a1a1a;
	border-radius: 10px;
}

body.tti-auth-register #tutor-registration-form input[type="text"]::placeholder,
body.tti-auth-register #tutor-registration-form input[type="email"]::placeholder,
body.tti-auth-register #tutor-registration-form input[type="password"]::placeholder {
	color: #595d7e;
	opacity: 1;
}

body.tti-auth-register #tutor-registration-form input[type="text"]:focus,
body.tti-auth-register #tutor-registration-form input[type="email"]:focus,
body.tti-auth-register #tutor-registration-form input[type="password"]:focus {
	outline: none;
	border-color: #b71c1c;
	box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.25);
}

/* Brand links (Terms and Conditions, "Login"). */
body.tti-auth-register #tutor-registration-wrap a {
	color: #500000;
}

body.tti-auth-register #tutor-registration-wrap a:hover {
	color: #7a0012;
}

/* Terms row: keep the checkbox and its label on one line, top-aligned. */
body.tti-auth-register #tutor-registration-form .tutor-input-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body.tti-auth-register #tutor-registration-form .tutor-input-wrapper .tutor-label {
	color: #1a1a1a;
	margin: 0;
	line-height: 1.4;
}

/* Primary CTA matches the login button's maroon gradient. */
body.tti-auth-register #tutor-registration-form .tutor-btn-primary {
	width: 100%;
	height: 48px;
	border-radius: 10px;
	background: linear-gradient(90deg, #6b0f0f 0%, #260202 100%);
	border: 0;
	box-shadow: 0 6px 16px rgba(107, 15, 15, 0.45);
}

body.tti-auth-register #tutor-registration-form .tutor-btn-primary:hover {
	filter: brightness(1.05);
}

/* Validation summary stays legible on cream. */
body.tti-auth-register #tutor-registration-wrap .tutor-alert {
	color: #1a1a1a;
}

@media (max-width: 480px) {
	body.tti-auth-register main.droipbase-site-main {
		padding: 88px 16px 40px;
	}

	body.tti-auth-register #tutor-registration-wrap {
		border-radius: 12px;
	}
}

/* ==========================================================================
   3. Two-factor OTP step — home URL + ?step=tutor-2fa
   ==========================================================================

   This surface is not a page of its own. TutorPro\Auth\_2FA points at
   get_home_url() . '?step=tutor-2fa' and swaps the template through
   `template_include`, so the request IS the home page: it carries body.home
   and page-id-2006, it renders the home page's header and footer, and Tutor
   serves the LEGACY tutor.min.css build here instead of the modern
   tutor-core.min.css that /tutor-login/ gets. Everything below exists to make
   that render match /tutor-login/.

   tutor-pro/addons/auth/views/login-otp.php carries an inline <style> under a
   `TTI-PATCH: OTP-FORM-HARDENING` marker whose rules are `#tutor-otp-form …`,
   specificity (1,1,0). Every rule here is `body.tti-auth-otp #tutor-otp-form …`
   or narrower, specificity (1,2,1) or higher, so it wins on specificity alone.
   The vendor file is not edited and none of its patch markers are disturbed.
   `!important` appears only where it overrides an `!important` or an inline
   style attribute in that same vendor view — each such case is called out.

   Palette is the login card's, verbatim: cream #faf6ee, border #e8e1d6,
   title ink #0c111d, body ink #4f4f54, input fill #f5f5f6 with a #767676
   border (4.1:1 on cream — WCAG 1.4.11), brand #500000 / hover #7a0012,
   button gradient #6b0f0f → #260202.
   ========================================================================== */

/*
 * NOTE ON THE HEADER — deliberately not styled here.
 *
 * The header rendered transparent on this step (black nav text on the #3d0a0a
 * gradient, roughly 1.2:1) and the first fix was a `background-color:#fff`
 * override. That was a symptom fix. The cause is that Droip's
 * `<style id='droip-variables-global'>` token block was never emitted on this
 * route, so `var(--pathwise_*)` resolved to nothing for BOTH the header and the
 * footer. tti-auth-ui.php now re-emits the tokens on wp_head, the header paints
 * its own #fff again, and no override is needed. Do not re-add one: it would
 * hide a future token regression instead of surfacing it.
 */

/*
 * Footer. The vendor inline block hides it with `#footer{display:none!important}`,
 * which /tutor-login/ does not do — and which also removes the Digital
 * Accessibility Policy and Accommodation Request links from an auth screen.
 * Restored to the `flex` it resolves to on /tutor-login/ at 1440, 768 and 390.
 * !important: overrides the vendor's own !important.
 */
body.tti-auth-otp #footer {
	display: flex !important;
}

/*
 * Centring band. /tutor-login/ centres its card in the space between the 72px
 * header and the footer; the OTP step top-anchors it with an inline
 * `margin-top:80px`. .tutor-page-wrap itself is not inline-styled, so this rule
 * ((0,2,0) vs tutor-front.min.css's (0,1,0)) needs no !important.
 */
body.tti-auth-otp .tutor-page-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 72px);
	padding: 56px 0 80px;
	box-sizing: border-box;
}

/*
 * The card's wrapper carries a hard-coded style attribute in the vendor view —
 * `max-width:450px;margin:0 auto;margin-top:80px;padding:0 24px` — which no
 * stylesheet can beat without !important. 568px = the login card's 520px plus
 * this wrapper's own 2 x 24px padding, so the card lands at exactly 520px.
 */
body.tti-auth-otp .tutor-page-wrap > div[style] {
	width: 100% !important;
	max-width: 568px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	box-sizing: border-box;
}

/* Card: the login card's fill, border, radius, padding and shadow. */
body.tti-auth-otp #tutor-otp-form {
	box-sizing: border-box;
	width: 100%;
	background: #faf6ee;
	border: 1px solid #e8e1d6;
	border-radius: 14px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
	color: #1a1a1a;
}

/* Title: same treatment as "Hi, Welcome back!" on /tutor-login/. */
body.tti-auth-otp #tutor-otp-form .tti-otp-title {
	margin: 0 0 16px;
	padding: 0;
	color: #0c111d;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
}

/* Instruction copy and the resend counter: login card body size and ink. */
body.tti-auth-otp #tutor-otp-form #tutor-otp-hint,
body.tti-auth-otp #tutor-otp-form .tutor-couter-div {
	color: #4f4f54;
	font-size: 14px;
	line-height: 1.5;
}

body.tti-auth-otp #tutor-otp-form #tutor-otp-hint {
	margin: 0 0 20px;
}

body.tti-auth-otp #tutor-otp-form .tutor-couter-div {
	margin-top: 8px;
}

/*
 * Field + submit. Stock puts them side by side on one flex row, which squeezes
 * the input to 174px at 390px wide. /tutor-login/ stacks a full-width field
 * above a full-width button; do the same.
 */
/* !important: legacy tutor.min.css ships `.tutor-d-flex{display:flex!important}`. */
body.tti-auth-otp #tutor-otp-form .tutor-d-flex {
	display: block !important;
}

body.tti-auth-otp #tutor-otp-form .tutor-form-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #f5f5f6;
	/*
	 * !important: legacy tutor.min.css ends its .tutor-form-control block with
	 * `border:1px solid var(--tutor-border-color)!important`, which is why both
	 * the vendor view's inline border and the first version of this rule were
	 * silently discarded. #e3e5eb measured ~1.3:1 against the field fill;
	 * #767676 measures 4.5:1 (WCAG 1.4.11).
	 */
	border: 1px solid #767676 !important;
	border-radius: 10px;
	letter-spacing: 0.08em;
}

body.tti-auth-otp #tutor-otp-form .tutor-form-control::placeholder {
	color: #595d7e;
	opacity: 1;
	letter-spacing: normal;
}

/*
 * Focus indicator for the code field.
 *
 * The theme's accessibility.css sets a site-wide
 * `input:focus-visible{outline:3px solid #4A90D9!important;box-shadow:0 0 0 1px
 * #4A90D9!important}`. On /tutor-login/ the modern tutor-core build overrides
 * that for the login fields with a 3px solid #1a1a1a ring and no shadow, so the
 * two steps of the same flow would otherwise show two different focus styles.
 * Matched here to /tutor-login/ measured live. !important is required to reach
 * past accessibility.css and is safe: #1a1a1a is 15.9:1 against the field fill
 * and 16.2:1 against the cream card, well past the 3:1 of WCAG 1.4.11, so this
 * strengthens the indicator rather than weakening it.
 *
 * The submit button is deliberately NOT overridden: /tutor-login/'s own submit
 * button resolves to the site-wide #4A90D9 ring, and so does this one.
 */
body.tti-auth-otp #tutor-otp-form .tutor-form-control:focus,
body.tti-auth-otp #tutor-otp-form .tutor-form-control:focus-visible {
	outline: 3px solid #1a1a1a !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	/* !important for the same reason as the base border rule above. */
	border-color: #500000 !important;
}

/* Primary button: the login "Sign In" button, verbatim. */
body.tti-auth-otp #tutor-otp-form .tutor-btn-primary {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 48px;
	margin: 16px 0 0;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: linear-gradient(90deg, #6b0f0f 0%, #260202 100%);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(107, 15, 15, 0.45);
	cursor: pointer;
}

body.tti-auth-otp #tutor-otp-form .tutor-btn-primary:hover {
	filter: brightness(1.05);
}

/* Resend: now a <button>; give it the login page's text-link appearance. */
body.tti-auth-otp #tutor-otp-form .tutor-btn-rent-otp {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: #500000;
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}

body.tti-auth-otp #tutor-otp-form .tutor-btn-rent-otp:hover {
	color: #7a0012;
	text-decoration: underline;
}

body.tti-auth-otp #tutor-otp-form .tutor-btn-rent-otp:focus-visible {
	outline: 2px solid #500000;
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * In-flight state. The vendor's `.tutor-disable-link{color:#999}` measures
 * ~2.4:1 on cream (WCAG 1.4.3); #595959 measures ~6.4:1. pointer-events stays
 * as the vendor set it, and the control is additionally marked aria-disabled
 * by tti-auth-otp.js so keyboard users get the same state mouse users do.
 */
body.tti-auth-otp #tutor-otp-form .tutor-btn-rent-otp.tutor-disable-link {
	color: #595959;
	cursor: not-allowed;
}

/*
 * Error region — mirrors the styling of .tutor-login-error on /tutor-login/.
 * Collapsed while empty so the card is unchanged until something goes wrong.
 * #8a1010 on #fdecea measures ~7.9:1.
 */
body.tti-auth-otp #tutor-otp-form .tti-otp-error {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.45;
	color: #8a1010;
	background: #fdecea;
	border: 1px solid #b71c1c;
	border-radius: 8px;
}

body.tti-auth-otp #tutor-otp-form .tti-otp-error:empty {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}

body.tti-auth-otp #tutor-otp-form .tutor-form-control[aria-invalid="true"] {
	/* !important for the same reason as the base border rule above. */
	border-color: #b71c1c !important;
}

@media (max-width: 480px) {
	body.tti-auth-otp .tutor-page-wrap {
		padding: 32px 0 48px;
	}

	body.tti-auth-otp .tutor-page-wrap > div[style] {
		padding: 0 16px !important;
	}

	body.tti-auth-otp #tutor-otp-form {
		padding: 24px;
		border-radius: 12px;
	}

	body.tti-auth-otp #tutor-otp-form .tti-otp-title {
		font-size: 22px;
	}
}