/* ==========================================================
   Luxa Users — Form Styles
   ========================================================== */

.lxu-form-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 6px;
}
.lxu-form-intro {
	color: var(--lxu-muted);
	font-size: 14px;
	margin: 0 0 20px;
}

.lxu-field {
	margin-bottom: 16px;
}
.lxu-field-row {
	display: flex;
	gap: 12px;
}
.lxu-field-row .lxu-field {
	flex: 1;
}

.lxu-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lxu-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--lxu-text);
}

.lxu-input {
	width: 100%;
	padding: 11px 14px;
	font-size: 14px;
	border: 1.5px solid var(--lxu-border);
	border-radius: 8px;
	background: var(--lxu-input-bg);
	color: var(--lxu-text);
	transition: border-color .15s, box-shadow .15s;
}
.lxu-input:focus {
	outline: none;
	border-color: var(--lxu-primary);
	box-shadow: 0 0 0 3px rgba(var(--lxu-primary-rgb), .15);
}
.lxu-textarea {
	resize: vertical;
	min-height: 80px;
}

.lxu-input-wrap {
	position: relative;
}
.lxu-input-wrap:has(.lxu-toggle-password) .lxu-input {
	padding-right: 42px;
}
.lxu-toggle-password {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--lxu-muted);
	padding: 6px;
	display: flex;
}
.lxu-toggle-password:hover {
	color: var(--lxu-text);
}

/* Leading icon — an .lxu-icon as the input-wrap's first child left-pads
   the input to make room and centers the icon vertically. Optional:
   a wrap with no .lxu-icon (e.g. the password field, whose leading
   space is taken by .lxu-toggle-password on the right instead) is
   unaffected — the left padding only applies when .lxu-icon is present. */
.lxu-input-wrap .lxu-icon {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--lxu-muted);
	display: flex;
	pointer-events: none;
}
.lxu-input-wrap .lxu-icon + .lxu-input {
	padding-left: 40px;
}
.lxu-input-wrap .lxu-icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ── Password strength ────────────────────────────────────── */
.lxu-strength {
	margin-top: 6px;
}
.lxu-strength-bar {
	height: 3px;
	background: var(--lxu-border);
	border-radius: 99px;
	overflow: hidden;
}
.lxu-strength-fill {
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--lxu-error);
	transition: width .3s ease, background-color .3s ease;
}
.lxu-strength-label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--lxu-muted);
}
.lxu-strength[hidden] {
	display: none;
}

.lxu-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--lxu-muted);
	margin-bottom: 16px;
	cursor: pointer;
}
.lxu-checkbox input {
	margin: 0;
}

.lxu-forgot-link {
	font-size: 12px;
	color: var(--lxu-primary);
	text-decoration: none;
}
.lxu-forgot-link:hover {
	text-decoration: underline;
}

.lxu-switch-text {
	text-align: center;
	font-size: 13px;
	color: var(--lxu-muted);
	margin: 18px 0 0;
}
.lxu-switch-text a {
	color: var(--lxu-primary);
	font-weight: 600;
	text-decoration: none;
}
.lxu-switch-text a:hover {
	text-decoration: underline;
}

/* ── Profile page ─────────────────────────────────────────── */

.lxu-wrap[data-form="profile"] {
	max-width: 900px;
}

.lxu-profile-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	background: var(--lxu-bg);
	border-radius: var(--lxu-radius);
	box-shadow: var(--lxu-shadow);
	overflow: hidden;
}

.lxu-profile-sidebar {
	background: var(--lxu-surface);
	border-right: 1px solid var(--lxu-border);
	padding: 28px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.lxu-avatar-wrap {
	position: relative;
	flex-shrink: 0;
	margin-bottom: 6px;
}
.lxu-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 3px solid var(--lxu-bg);
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.lxu-avatar-edit {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 26px;
	height: 26px;
	background: var(--lxu-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 2px solid var(--lxu-bg);
	transition: transform .15s;
}
.lxu-avatar-edit:hover {
	transform: scale(1.08);
}
.lxu-avatar-edit .dashicons {
	color: #fff;
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.lxu-profile-header-info {
	text-align: center;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
}
.lxu-profile-header-info strong {
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lxu-profile-header-info span {
	font-size: 12px;
	color: var(--lxu-muted);
	overflow: hidden;
	text-overflow: ellipsis;
}

.lxu-profile-tabs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	flex: 1;
}
.lxu-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: none;
	border: none;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lxu-muted);
	cursor: pointer;
	border-radius: 8px;
	text-align: left;
	transition: background-color .15s, color .15s;
}
.lxu-tab .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.lxu-tab:hover {
	background: var(--lxu-bg);
	color: var(--lxu-text);
}
.lxu-tab.lxu-tab-active {
	background: var(--lxu-bg);
	color: var(--lxu-primary);
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.lxu-profile-header-actions {
	width: 100%;
	margin-top: 8px;
}
.lxu-profile-header-actions .lxu-btn {
	width: 100%;
}

.lxu-tab-panel {
	padding: 32px 36px;
}
.lxu-tab-panel[hidden] {
	display: none;
}

.lxu-tab-panel h3 {
	font-size: 15px;
	margin: 0 0 16px;
}

@media (max-width: 680px) {
	.lxu-profile-layout {
		grid-template-columns: 1fr;
	}
	.lxu-profile-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		border-right: none;
		border-bottom: 1px solid var(--lxu-border);
		padding: 18px;
	}
	.lxu-avatar-wrap {
		margin-bottom: 0;
	}
	.lxu-profile-header-info {
		text-align: left;
		margin-bottom: 0;
		margin-right: auto;
	}
	.lxu-profile-tabs {
		flex-direction: row;
		flex: 0 0 100%;
		order: 3;
	}
	.lxu-profile-header-actions {
		width: auto;
		margin-top: 0;
	}
	.lxu-profile-header-actions .lxu-btn {
		width: auto;
	}
	.lxu-tab-panel {
		padding: 24px 20px;
	}
}

/* ── Themes ────────────────────────────────────────────────
   Each theme redefines the FULL variable set (not just a couple of
   stray properties) so switching themes visibly changes color,
   shadow, and shape everywhere at once — plus one or two genuine
   structural touches beyond color. This matters because a theme that
   only overrides 2-3 properties looks nearly identical to every other
   theme, which was the actual root cause of "every theme looks the
   same" reported earlier.
   ──────────────────────────────────────────────────────────── */

/* Minimal (default) — the plain, safe baseline. Every OTHER theme
   below still needs its OWN full override (a lesson learned the hard
   way: this used to be the only theme with literally zero panel
   styling). Ported as-is from the reference theme-minimal.css — it
   only ever redefined variables, no structural rules, so the
   .lxu-panel styling below (background/radius/shadow) is the same
   baseline every other theme already assumes as its own starting
   point before its own overrides apply. */
.lxu-theme-minimal {
	--lxu-primary:       #6366f1;
	--lxu-primary-hover: #4f46e5;
	--lxu-primary-rgb:   99, 102, 241;
	--lxu-bg:            #ffffff;
	--lxu-surface:       #f8fafc;
	--lxu-border:        #e2e8f0;
	--lxu-text:          #0f172a;
	--lxu-muted:         #64748b;
	--lxu-shadow:        0 4px 32px rgba(0,0,0,.08);
	--lxu-input-bg:      #f8fafc;
	--lxu-radius:        12px;
}
.lxu-theme-minimal .lxu-panel {
	background: var(--lxu-bg);
	border-radius: var(--lxu-radius);
	box-shadow: var(--lxu-shadow);
	padding: 32px;
}

/* Bold — colored top border accent, uppercase primary button, tighter
   4px radius, bigger title. Ported from theme-bold.css. */
.lxu-theme-bold {
	--lxu-primary:       #f43f5e;
	--lxu-primary-hover: #e11d48;
	--lxu-primary-rgb:   244, 63, 94;
	--lxu-bg:            #ffffff;
	--lxu-surface:       #fff1f2;
	--lxu-border:        #fecdd3;
	--lxu-text:          #0f172a;
	--lxu-muted:         #64748b;
	--lxu-shadow:        0 8px 32px rgba(244,63,94,.15);
	--lxu-input-bg:      #ffffff;
	--lxu-radius:        8px;
}
.lxu-theme-bold .lxu-panel {
	background: var(--lxu-bg);
	border-radius: var(--lxu-radius);
	box-shadow: var(--lxu-shadow);
	padding: 32px;
	border-top: 4px solid var(--lxu-primary);
}
.lxu-theme-bold .lxu-form-title {
	font-size: 26px;
	letter-spacing: -.5px;
}
.lxu-theme-bold .lxu-btn-primary {
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 13px;
}
.lxu-theme-bold .lxu-input {
	border-radius: 4px;
}

/* Dark — full dark palette, with explicit per-component overrides for
   elements that don't fully inherit color from variables alone.
   Ported from theme-dark.css. */
.lxu-theme-dark {
	--lxu-primary:       #a78bfa;
	--lxu-primary-hover: #8b5cf6;
	--lxu-primary-rgb:   167, 139, 250;
	--lxu-bg:            #1e1e2e;
	--lxu-surface:       #181825;
	--lxu-border:        #313244;
	--lxu-text:          #cdd6f4;
	--lxu-muted:         #6c7086;
	--lxu-shadow:        0 8px 32px rgba(0,0,0,.4);
	--lxu-input-bg:      #181825;
	--lxu-radius:        12px;
}
.lxu-theme-dark .lxu-panel {
	background: var(--lxu-bg);
	border-radius: var(--lxu-radius);
	box-shadow: var(--lxu-shadow);
	padding: 32px;
}
.lxu-theme-dark .lxu-form-title  { color: #cdd6f4; }
.lxu-theme-dark .lxu-label       { color: #bac2de; }
.lxu-theme-dark .lxu-input       { color: #cdd6f4; border-color: #313244; }
.lxu-theme-dark .lxu-input:focus { border-color: var(--lxu-primary); background: #1e1e2e; }
.lxu-theme-dark .lxu-notice.is-success { background: #1a2e1a; border-color: #2d5a2d; }
.lxu-theme-dark .lxu-notice.is-error   { background: #2e1a1a; border-color: #5a2d2d; }
.lxu-theme-dark .lxu-profile-layout  { background: var(--lxu-bg); }
.lxu-theme-dark .lxu-profile-sidebar { background: #181825; border-color: #313244; }
.lxu-theme-dark .lxu-tab:hover      { background: #1e1e2e; }
.lxu-theme-dark .lxu-tab.lxu-tab-active { background: #1e1e2e; }

/* Glass — a single frosted-glass card floating over a gradient
   backdrop (NOT a 2-column layout — see the Split theme below for
   that). Ported from theme-glass.css. */
.lxu-theme-glass {
	--lxu-primary:       #8b5cf6;
	--lxu-primary-hover: #7c3aed;
	--lxu-primary-rgb:   139, 92, 246;
	--lxu-bg:            rgba(255,255,255,.75);
	--lxu-surface:       rgba(255,255,255,.4);
	--lxu-border:        rgba(255,255,255,.5);
	--lxu-text:          #1e1b4b;
	--lxu-muted:         #6b7280;
	--lxu-shadow:        0 8px 32px rgba(99,102,241,.18);
	--lxu-input-bg:      rgba(255,255,255,.6);
	--lxu-radius:        16px;
}
.lxu-theme-glass .lxu-panel {
	background: var(--lxu-bg);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: var(--lxu-radius);
	padding: 28px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.lxu-theme-glass.lxu-wrap {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px 20px;
	border-radius: 20px;
}
.lxu-theme-glass .lxu-input {
	background: var(--lxu-input-bg);
	border-color: rgba(255,255,255,.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.lxu-theme-glass .lxu-profile-layout {
	background: var(--lxu-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.lxu-theme-glass .lxu-profile-sidebar {
	background: rgba(255,255,255,.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Soft — pastel cyan palette, very rounded (20px card / 12px
   input+button). Ported from theme-soft.css. */
.lxu-theme-soft {
	--lxu-primary:       #06b6d4;
	--lxu-primary-hover: #0891b2;
	--lxu-primary-rgb:   6, 182, 212;
	--lxu-bg:            #f0fdfe;
	--lxu-surface:       #e0f7fa;
	--lxu-border:        #b2ebf2;
	--lxu-text:          #164e63;
	--lxu-muted:         #0e7490;
	--lxu-shadow:        0 4px 24px rgba(6,182,212,.12);
	--lxu-input-bg:      #ffffff;
	--lxu-radius:        20px;
}
.lxu-theme-soft .lxu-panel {
	background: var(--lxu-bg);
	border-radius: var(--lxu-radius);
	box-shadow: var(--lxu-shadow);
	padding: 32px;
	border: 1.5px solid var(--lxu-border);
}
.lxu-theme-soft .lxu-input {
	border-radius: 12px;
}
.lxu-theme-soft .lxu-btn {
	border-radius: 12px;
}
.lxu-theme-soft .lxu-profile-layout {
	border: 1.5px solid var(--lxu-border);
}

/* ── Split-shell: 2-column layout (brand panel + form panel) ──
   Hidden/inert by default — a theme opts in by listing itself in the
   activation selector below. Markup (see shortcoderenderer.php) is
   always rendered the same regardless of theme; only CSS decides
   whether it actually becomes a visible 2-column layout or collapses
   invisibly back to a plain single form, so no per-theme PHP branching
   is needed. This layout has no equivalent among the 5 ported themes
   above — it's the dedicated 2-column "Split" option requested
   separately from porting those. */
.lxu-split-shell {
	display: contents; /* inert: brand panel hidden, form panel unwrapped */
}
.lxu-split-brand {
	display: none;
}
.lxu-split-form {
	display: contents;
}

.lxu-theme-split.lxu-wrap,
.lxu-theme-sidebyside.lxu-wrap {
	max-width: 880px;
}
.lxu-theme-split .lxu-split-shell,
.lxu-theme-sidebyside .lxu-split-shell {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 460px;
	border-radius: var(--lxu-radius);
	overflow: hidden;
	box-shadow: var(--lxu-shadow);
}
.lxu-theme-split .lxu-split-brand,
.lxu-theme-sidebyside .lxu-split-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
	color: #fff;
}
.lxu-split-brand-inner h2 {
	margin: 0 0 12px;
	font-size: 26px;
	line-height: 1.25;
}
.lxu-split-brand-inner p {
	margin: 0;
	opacity: .85;
	font-size: 14px;
	line-height: 1.6;
}
.lxu-theme-split .lxu-split-form,
.lxu-theme-sidebyside .lxu-split-form {
	display: flex;
	align-items: center;
	padding: 44px;
	background: var(--lxu-bg);
}
.lxu-theme-split .lxu-split-form .lxu-panel,
.lxu-theme-sidebyside .lxu-split-form .lxu-panel {
	width: 100%;
	box-shadow: none;
	padding: 0;
	background: transparent;
}
@media (max-width: 780px) {
	.lxu-theme-split .lxu-split-shell,
	.lxu-theme-sidebyside .lxu-split-shell {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.lxu-theme-split .lxu-split-brand,
	.lxu-theme-sidebyside .lxu-split-brand {
		display: none; /* form-only on small screens — the brand panel is decorative, not essential content */
	}
}

/* Split — purple/indigo gradient brand panel, clean white form panel.
   The dramatic option: a 2-column auth screen like a typical modern
   SaaS sign-in page, rather than a single centered card. Distinct
   from Glass above: Glass is one blurred card over a gradient, Split
   is two separate panels side by side. */
.lxu-theme-split {
	--lxu-primary:       #8b5cf6;
	--lxu-primary-hover: #7c3aed;
	--lxu-primary-rgb:   139, 92, 246;
	--lxu-bg:            #ffffff;
	--lxu-surface:       #f5f3ff;
	--lxu-border:        #e9e5ff;
	--lxu-input-bg:      #ffffff;
	--lxu-radius:        16px;
	--lxu-shadow:        0 8px 32px rgba(99,102,241,.18);
}
.lxu-theme-split .lxu-split-brand {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Split has no split-shell equivalent for the profile page (see this
   theme's own note in shortcoderenderer.php for why) — it just uses
   the plain --lxu-* variables above there, same as every theme that
   isn't Glass or Dark needing their own profile-specific overrides. */