/**
 * Auth Forms CSS — v2
 * FILE: /wp-content/themes/astra-child/auth-forms.css
 *
 * Changes vs v1:
 *   • Brand panel text colors forced with !important (Astra was overriding)
 *   • Logo filter REMOVED (was making logo invisible/white square)
 *   • Math captcha input styling added (BestWebSoft, Tutor native, generic)
 *   • Switch-link layout rewritten (multi-row support)
 */

/* ══════════════════════════════════════════════════════════
   CSS VARIABLES
══════════════════════════════════════════════════════════ */
:root {
	--tnb-primary:    #630320;
	--tnb-logo-red:   #8c1627;
	--tnb-light:      #ebd7da;
	--tnb-dark:       #18130e;
	--tnb-mid:        #bb7680;
	--tnb-white:      #ffffff;
	--tnb-gray-50:    #f9fafb;
	--tnb-gray-100:   #f3f4f6;
	--tnb-gray-200:   #e5e7eb;
	--tnb-gray-300:   #d1d5db;
	--tnb-gray-500:   #6b7280;
	--tnb-gray-700:   #374151;
	--tnb-radius:     10px;
	--tnb-shadow:     0 20px 60px rgba(99,3,32,0.12);
	--font-display:   'Playfair Display', Georgia, serif;
	--font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   ASTRA / GLOBAL CHROME SUPPRESSION
══════════════════════════════════════════════════════════ */
body.tnb-auth-body {
	background: #f5f0f0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--font-body) !important;
}

body.tnb-auth-body #masthead,
body.tnb-auth-body #colophon,
body.tnb-auth-body .site-header,
body.tnb-auth-body .site-footer,
body.tnb-auth-body .ast-above-header,
body.tnb-auth-body .ast-below-header,
body.tnb-auth-body .ast-header-break-point,
body.tnb-auth-body .ast-breadcrumbs-wrapper,
body.tnb-auth-body .main-header-bar-wrap,
body.tnb-auth-body #ast-scroll-top {
	display: none !important;
}

body.tnb-auth-body #content,
body.tnb-auth-body #primary,
body.tnb-auth-body .site-content,
body.tnb-auth-body .ast-container,
body.tnb-auth-body .ast-article-post,
body.tnb-auth-body .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

body.tnb-auth-body.admin-bar { padding-top: 0 !important; }
body.tnb-auth-body #wpadminbar { position: fixed; }

/* ══════════════════════════════════════════════════════════
   AUTH PAGE WRAPPER
══════════════════════════════════════════════════════════ */
.tnb-auth-page {
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	background: #f5f0f0;
	font-family: var(--font-body);
}

/* ══════════════════════════════════════════════════════════
   BRAND PANEL — Left side
══════════════════════════════════════════════════════════ */
.tnb-auth-brand {
	width: 42%;
	flex-shrink: 0;
	background: linear-gradient(145deg, var(--tnb-primary) 0%, var(--tnb-logo-red) 50%, #a01830 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: 60px 50px;
	box-sizing: border-box;
}

.tnb-auth-brand-inner {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--tnb-white) !important;
	width: 100%;
	max-width: 340px;
}

.tnb-auth-brand-logo {
	margin-bottom: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Logo image — NO MORE FILTER. Original colors preserved.
   If your logo has a transparent background, upload a white-on-transparent
   variant via Customizer for best contrast against the maroon gradient. */
.tnb-auth-brand-logo img {
	max-width: 180px;
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.tnb-auth-brand-logo .tnb-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.15);
	border-radius: 20px;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--tnb-white);
	border: 2px solid rgba(255,255,255,0.25);
	letter-spacing: 2px;
}

/* Brand name — !important to defeat Astra h2 color */
.tnb-auth-brand-name,
.tnb-auth-brand .tnb-auth-brand-name {
	font-family: var(--font-display) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: var(--tnb-white) !important;
	margin: 0 0 10px !important;
	line-height: 1.2 !important;
	text-shadow: 0 2px 10px rgba(0,0,0,0.25);
	text-align: center !important;
	background: none !important;
	-webkit-text-fill-color: var(--tnb-white) !important;
}

.tnb-auth-brand-tagline {
	font-size: 15px !important;
	color: rgba(255,255,255,0.85) !important;
	margin: 0 0 40px !important;
	font-weight: 300 !important;
	line-height: 1.6 !important;
	text-align: center !important;
}

.tnb-auth-brand-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

.tnb-auth-brand-feature {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 16px !important;
	background: rgba(255,255,255,0.12) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	font-size: 14px !important;
	color: rgba(255,255,255,0.95) !important;
	font-weight: 400 !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.2s;
}

.tnb-auth-brand-feature:hover { background: rgba(255,255,255,0.2) !important; }

/* Force feature text spans to also be white */
.tnb-auth-brand-feature > span,
.tnb-auth-brand-feature span:not(.icon) {
	color: rgba(255,255,255,0.95) !important;
}

.tnb-auth-brand-feature .icon {
	font-size: 18px !important;
	flex-shrink: 0;
	color: initial !important; /* keep emoji color */
	filter: none !important;
}

/* Decorative circles */
.tnb-auth-brand::before {
	content: '';
	position: absolute;
	width: 380px; height: 380px;
	top: -100px; right: -120px;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	pointer-events: none;
}

.tnb-auth-brand::after {
	content: '';
	position: absolute;
	width: 250px; height: 250px;
	bottom: -60px; left: -80px;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   FORM PANEL — Right side
══════════════════════════════════════════════════════════ */
.tnb-auth-form-panel {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tnb-white);
	padding: 60px 40px;
	box-sizing: border-box;
	box-shadow: -4px 0 30px rgba(99,3,32,0.07);
}

.tnb-auth-form-inner {
	width: 100%;
	max-width: 420px;
}

.tnb-auth-form-header { margin-bottom: 28px; }

.tnb-auth-form-title {
	font-family: var(--font-display) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: var(--tnb-dark) !important;
	margin: 0 0 8px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
}

.tnb-auth-form-subtitle {
	font-size: 14px !important;
	color: var(--tnb-gray-500) !important;
	margin: 0 !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════
   HIDE DUPLICATE TUTOR LMS HEADINGS
══════════════════════════════════════════════════════════ */
.tnb-auth-form-content > h1,
.tnb-auth-form-content > h2,
.tnb-auth-form-content > h3,
.tnb-auth-form-content .tutor-login-form-title,
.tnb-auth-form-content .tutor-registration-form-title,
.tnb-auth-form-content .tutor-color-black:first-child {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   TUTOR LMS FORM FIELDS
══════════════════════════════════════════════════════════ */
.tutor-login-wrap,
.tutor-signup-wrap,
.tutor-student-reg-wrap,
.tutor-instructor-reg-wrap,
.tutor-login-form,
.tutor-registration-form {
	font-family: var(--font-body) !important;
}

.tutor-form-group,
.tutor-form-row,
.tutor-mb-12,
.tutor-mb-16,
.tutor-mb-20,
.tutor-login-form .form-group,
.tutor-registration-form .form-group {
	margin-bottom: 18px !important;
}

.tutor-form-group label,
.tutor-form-row label,
.tutor-form-label,
.tutor-login-form label,
.tutor-registration-form label,
.tutor-login-wrap label,
.tutor-signup-wrap label {
	display: block !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--tnb-gray-700) !important;
	margin-bottom: 7px !important;
	letter-spacing: 0.2px;
}

.tnb-auth-form-content input[type="text"],
.tnb-auth-form-content input[type="email"],
.tnb-auth-form-content input[type="password"],
.tnb-auth-form-content input[type="tel"],
.tnb-auth-form-content input[type="url"],
.tnb-auth-form-content input[type="number"],
.tnb-auth-form-content select,
.tnb-auth-form-content textarea,
.tutor-form-control,
.tutor-input-field,
.tutor-form-group input,
.tutor-form-group select,
.tutor-form-group textarea,
.tutor-form-row input,
.tutor-form-row select,
.tutor-login-form input,
.tutor-login-form select,
.tutor-registration-form input,
.tutor-registration-form select,
.tutor-registration-form textarea {
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	color: var(--tnb-gray-700) !important;
	background: var(--tnb-gray-50) !important;
	border: 1.5px solid var(--tnb-gray-300) !important;
	border-radius: var(--tnb-radius) !important;
	padding: 12px 16px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
	height: auto !important;
	line-height: 1.5 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.tnb-auth-form-content input:focus,
.tnb-auth-form-content select:focus,
.tnb-auth-form-content textarea:focus,
.tutor-form-control:focus,
.tutor-input-field:focus {
	border-color: var(--tnb-primary) !important;
	box-shadow: 0 0 0 3px rgba(99,3,32,0.12) !important;
	background: var(--tnb-white) !important;
}

/* Checkboxes */
.tnb-auth-form-content input[type="checkbox"],
.tutor-form-check input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	accent-color: var(--tnb-primary) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
	border-radius: 4px !important;
	-webkit-appearance: auto !important;
	appearance: auto !important;
	background: transparent !important;
	border: 1px solid var(--tnb-gray-300) !important;
}

.tutor-form-check,
.tutor-form-check-inline {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.tutor-form-check label,
.tutor-form-check-inline label {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--tnb-gray-500) !important;
	cursor: pointer !important;
	margin: 0 !important;
}

/* Select dropdown arrow */
.tnb-auth-form-content select,
.tutor-form-group select,
.tutor-registration-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23630320' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 40px !important;
	cursor: pointer !important;
}

.tnb-auth-form-content textarea {
	min-height: 100px !important;
	resize: vertical !important;
	line-height: 1.6 !important;
}


/* ══════════════════════════════════════════════════════════
   JETPACK PROTECT — math captcha
   Jetpack hardcodes width:50px as an inline style, so we
   need !important + a matching specific selector to override.
   The input appears in: Tutor LMS login modal, wp-login.php,
   registration pages, comment forms — load site-wide.
   ══════════════════════════════════════════════════════════ */

input#jetpack_protect_answer,
input[name="jetpack_protect_num"] {
	width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important;
	height: 36px !important;
	padding: 6px 12px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-align: center !important;
	letter-spacing: 1px !important;
	color: #374151 !important;
	background: #ffffff !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 8px !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
	-moz-appearance: textfield;
}

/* Hide the number-input spinner arrows (they steal width) */
input#jetpack_protect_answer::-webkit-outer-spin-button,
input#jetpack_protect_answer::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input#jetpack_protect_answer:focus,
input[name="jetpack_protect_num"]:focus {
	border-color: #630320 !important;
	box-shadow: 0 0 0 3px rgba(99,3,32,0.1) !important;
	outline: none !important;
}

/* Make the "6 + 7 =" label sit nicely beside the input */
label[for="jetpack_protect_answer"] {
	vertical-align: middle !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	margin-right: 6px !important;
}

/* ══════════════════════════════════════════════════════════
   MATH CAPTCHA — "Prove your humanity"
   Covers BestWebSoft Captcha, Tutor native, and generics
══════════════════════════════════════════════════════════ */
.tnb-auth-form-content .cptch_wrap,
.tnb-auth-form-content .cptch_block,
.tnb-auth-form-content [class*="captcha"],
.tnb-auth-form-content .tutor-captcha-wrap,
.tnb-auth-form-content .tutor-cap-wrap,
.tnb-auth-form-content .tutor-form-row.tutor-mb-16:has(input[name*="cptch"]),
.tnb-auth-form-content .tutor-form-row.tutor-mb-16:has(input[name*="captcha"]) {
	margin-bottom: 20px !important;
	display: block !important;
}

/* Captcha label ("Prove your humanity") */
.tnb-auth-form-content .cptch_wrap > label,
.tnb-auth-form-content .cptch_block > label,
.tnb-auth-form-content [class*="captcha"] > label,
.tnb-auth-form-content .tutor-captcha-wrap > label,
.tnb-auth-form-content label[for*="cptch"],
.tnb-auth-form-content label[for*="captcha"] {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--tnb-gray-700) !important;
	margin-bottom: 8px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.2px !important;
}

/* The math problem text "1 + 3 =" */
.tnb-auth-form-content .cptch_wrap > span,
.tnb-auth-form-content .cptch_block > span,
.tnb-auth-form-content .cptch_q,
.tnb-auth-form-content .cptch_span,
.tnb-auth-form-content [class*="cptch_"]:not(input):not(label) {
	font-size: 16px !important;
	color: var(--tnb-gray-700) !important;
	display: inline-block !important;
	margin-right: 6px !important;
	font-weight: 500 !important;
	vertical-align: middle !important;
	line-height: 1.5 !important;
}

/* The actual captcha INPUT — make it wide enough to see what you typed */
.tnb-auth-form-content .cptch_input,
.tnb-auth-form-content input[name*="cptch"],
.tnb-auth-form-content input[name*="captcha"],
.tnb-auth-form-content input[id*="cptch"],
.tnb-auth-form-content input[id*="captcha"],
.tnb-auth-form-content .tutor-captcha-input,
.tnb-auth-form-content .cptch_block input[type="text"] {
	display: inline-block !important;
	width: 140px !important;
	min-width: 140px !important;
	max-width: 100% !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding: 10px 14px !important;
	background: var(--tnb-white) !important;
	border: 1.5px solid var(--tnb-gray-300) !important;
	border-radius: var(--tnb-radius) !important;
	color: var(--tnb-gray-700) !important;
	height: auto !important;
	vertical-align: middle !important;
	margin-left: 8px !important;
	letter-spacing: 1px !important;
}

.tnb-auth-form-content .cptch_input:focus,
.tnb-auth-form-content input[name*="cptch"]:focus,
.tnb-auth-form-content input[name*="captcha"]:focus {
	border-color: var(--tnb-primary) !important;
	box-shadow: 0 0 0 3px rgba(99,3,32,0.12) !important;
	background: var(--tnb-white) !important;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — Submit / Login / Register
══════════════════════════════════════════════════════════ */
.tnb-auth-form-content button[type="submit"],
.tnb-auth-form-content input[type="submit"],
.tnb-auth-form-content .tutor-btn,
.tnb-auth-form-content .tutor-btn-primary,
.tutor-login-btn,
.tutor-register-btn,
.tutor-login-form button[type="submit"],
.tutor-login-form input[type="submit"],
.tutor-registration-form button[type="submit"],
.tutor-registration-form input[type="submit"] {
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	background: var(--tnb-primary) !important;
	color: var(--tnb-white) !important;
	border: 2px solid var(--tnb-primary) !important;
	border-radius: var(--tnb-radius) !important;
	padding: 13px 24px !important;
	width: 100% !important;
	cursor: pointer !important;
	letter-spacing: 0.3px !important;
	text-align: center !important;
	display: block !important;
	box-sizing: border-box !important;
	box-shadow: 0 4px 15px rgba(99,3,32,0.25) !important;
	transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s !important;
	line-height: 1.5 !important;
	height: auto !important;
	text-shadow: none !important;
	text-decoration: none !important;
}

.tnb-auth-form-content button[type="submit"]:hover,
.tnb-auth-form-content input[type="submit"]:hover,
.tnb-auth-form-content .tutor-btn-primary:hover,
.tutor-login-form button[type="submit"]:hover,
.tutor-registration-form button[type="submit"]:hover {
	opacity: 0.92 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(99,3,32,0.35) !important;
	background: var(--tnb-primary) !important;
	color: var(--tnb-white) !important;
}

.tnb-auth-form-content button[type="submit"]:active,
.tnb-auth-form-content input[type="submit"]:active {
	transform: translateY(0) !important;
}

/* ══════════════════════════════════════════════════════════
   LINKS inside the form (forgot password, etc.)
══════════════════════════════════════════════════════════ */
.tnb-auth-form-content a,
.tutor-login-form a,
.tutor-registration-form a {
	color: var(--tnb-primary) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: opacity 0.2s !important;
}

.tnb-auth-form-content a:hover,
.tutor-login-form a:hover,
.tutor-registration-form a:hover {
	opacity: 0.75 !important;
	text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════
   ERROR / SUCCESS / INFO MESSAGES
══════════════════════════════════════════════════════════ */
.tutor-alert,
.tutor-form-feedback,
.tutor-validation-error,
.tutor-login-form .alert,
.tutor-registration-form .alert {
	border-radius: var(--tnb-radius) !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
	font-family: var(--font-body) !important;
	margin-bottom: 20px !important;
	border-left: 4px solid var(--tnb-primary) !important;
	box-shadow: none !important;
}

.tutor-alert-success,
.tutor-alert.success {
	background: #f0fdf4 !important;
	border-left-color: #16a34a !important;
	color: #15803d !important;
}

.tutor-alert-danger,
.tutor-alert.error,
.tutor-alert-error,
.tutor-validation-error {
	background: #fef2f2 !important;
	border-left-color: #dc2626 !important;
	color: #dc2626 !important;
}

.tutor-alert-warning {
	background: #fffbeb !important;
	border-left-color: #d97706 !important;
	color: #92400e !important;
}

.tutor-alert-info {
	background: var(--tnb-light) !important;
	border-left-color: var(--tnb-primary) !important;
	color: var(--tnb-dark) !important;
}

/* ══════════════════════════════════════════════════════════
   DIVIDERS — "OR" separator
══════════════════════════════════════════════════════════ */
.tutor-login-separator,
.tutor-auth-separator {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 24px 0 !important;
	font-size: 13px !important;
	color: var(--tnb-gray-500) !important;
}

.tutor-login-separator::before,
.tutor-login-separator::after,
.tutor-auth-separator::before,
.tutor-auth-separator::after {
	content: '' !important;
	flex: 1 !important;
	height: 1px !important;
	background: var(--tnb-gray-200) !important;
}

/* ══════════════════════════════════════════════════════════
   SWITCH LINKS — multi-row "Already have account?" etc.
══════════════════════════════════════════════════════════ */
.tnb-auth-switch {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--tnb-gray-200);
	font-size: 14px;
	color: var(--tnb-gray-500);
	font-family: var(--font-body);
	line-height: 1.6;
}

.tnb-auth-switch-row {
	display: block;
}

.tnb-auth-switch-sep {
	margin: 0 6px;
	color: var(--tnb-gray-300);
}

.tnb-auth-switch a {
	color: var(--tnb-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 4px;
}

.tnb-auth-switch a:hover { text-decoration: underline !important; }

/* ══════════════════════════════════════════════════════════
   TUTOR LMS DASHBOARD LOGIN WIDGET (defensive)
══════════════════════════════════════════════════════════ */
.tutor-dashboard-login,
.tutor-dashboard-content-inner > .tutor-login-form-wrap {
	background: var(--tnb-white) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	margin: 0 auto !important;
	box-shadow: none !important;
	font-family: var(--font-body) !important;
}

.tutor-dashboard-login h2,
.tutor-dashboard-login h3 {
	font-family: var(--font-display) !important;
	color: var(--tnb-dark) !important;
	margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.tnb-auth-page {
		flex-direction: column;
		min-height: auto;
	}

	.tnb-auth-brand {
		width: 100%;
		padding: 40px 30px;
		min-height: auto;
	}

	.tnb-auth-brand-features { display: none; }
	.tnb-auth-brand-tagline { margin-bottom: 10px !important; }

	.tnb-auth-form-panel {
		padding: 40px 24px;
		box-shadow: none;
	}
}

@media (max-width: 480px) {
	.tnb-auth-brand { padding: 30px 20px; }
	.tnb-auth-form-panel { padding: 30px 16px; }
	.tnb-auth-form-title { font-size: 24px !important; }
	.tnb-auth-brand-name { font-size: 22px !important; }
}