/**
 * Psy Core — wrapper styles for plugin-owned virtual routes
 * (/register/, /login/, /forgot-password/, /account/).
 *
 * Loaded by VirtualRoutesModule so the route pages share the same dark
 * psytrance look even before the inner shortcode/dashboard CSS kicks in.
 */

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@400;500;600;700&display=swap');

/* Apply the psytrance dark bg at the body level so the area between the
 * route content and the footer doesn't fall back to the theme's default
 * white. The wrapper stays transparent. */
body.psy-route {
	background:
		url('https://psytranceartist.com/wp-content/uploads/2026/06/bck-scaled.png') center top / cover no-repeat fixed,
		linear-gradient(180deg, #160a32 0%, #1f0e44 100%) !important;
	background-attachment: fixed, fixed !important;
	color: #fff;
}

.psy-route-main {
	--psy-bg: #160a32;
	--psy-bg-2: #1f0e44;
	--psy-pink: #ff43c8;
	--psy-violet: #6c2bff;
	--psy-grad: linear-gradient(135deg, #ff43c8 0%, #ff2bbb 35%, #b328ff 100%);
	--psy-text: #fff;
	--psy-text-mute: rgba(255, 255, 255, 0.65);
	--psy-card: rgba(20, 8, 50, 0.55);
	--psy-border: rgba(255, 255, 255, 0.08);

	min-height: 60vh;
	padding: 28px 50px 80px;
	color: var(--psy-text);
	font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: transparent;
}

@media (max-width: 768px) {
	.psy-route-main {
		padding: 24px 20px 60px;
	}
}

/* Explore route is fully self-styled by `.psy-explore` (its own bg image,
 * full-bleed). Suppress the route wrapper chrome here so it doesn't double
 * the background and doesn't add padding around the explore page. */
body.psy-route--explore {
	background: var(--psy-blue-dark, #050033) !important;
}

body.psy-route--explore .psy-route-main {
	padding: 0;
	min-height: 0;
}

.psy-route__form-wrap {
	max-width: 720px;
	margin: 0 auto;
	background: var(--psy-card);
	border: 1px solid var(--psy-border);
	border-radius: 22px;
	padding: 36px clamp(20px, 4vw, 44px);
}

.psy-route__title {
	font-family: 'Audiowide', sans-serif;
	font-size: clamp(26px, 4vw, 40px);
	margin: 0 0 6px;
	letter-spacing: 0.02em;
}

.psy-route__subtitle {
	color: var(--psy-text-mute);
	font-size: 14px;
	margin: 0 0 24px;
}

.psy-route__footer {
	margin: 24px 0 0;
	font-size: 13px;
	color: var(--psy-text-mute);
	text-align: center;
}
.psy-route__footer a { color: var(--psy-pink); text-decoration: none; }
.psy-route__footer a:hover { text-decoration: underline; }

.psy-route__error {
	max-width: 600px;
	margin: 60px auto;
	text-align: center;
}
.psy-route__error h1 { font-family: 'Audiowide', sans-serif; }

/* --------- Login + forgot password forms (Figma "BENTORNATO" + "Reset
   your password"). The wrap is a transparent passthrough — the form
   itself is the card, inheriting `.psy-form` chrome from register-form.css
   (bg #0C0548 + border #1A0F5C + radius 20) and overriding what differs. */
.psy-route__form-wrap--auth {
	max-width: none;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* `psy-has-signup` paints fixed bg ::before + overlay ::after at z-index 0
   (see register-form.css). The .psy-signup wrapper sits at z-index 1, but
   the virtual-route wrapper is .psy-route-main — needs the same lift so
   the auth card isn't dimmed by the ::after overlay.

   register-form.css also zeroes `.psy-route-main` padding for /register/
   (the signup shortcode owns its own hero spacing). Auth routes
   (/login/, /forgot-password/) don't have an inner hero, so the card
   would slam into the header + footer. Restore breathing room here with
   matching specificity + !important to win the cascade. */
body.psy-has-signup.psy-route--login .psy-route-main,
body.psy-has-signup.psy-route--forgot .psy-route-main,
body.psy-has-signup.psy-route--verify .psy-route-main {
	position: relative;
	z-index: 1;
	padding: 80px clamp(20px, 4vw, 50px) 120px !important;
	min-height: calc(100vh - 240px) !important;
}

body.psy-has-signup.psy-route--register .psy-route-main {
	position: relative;
	z-index: 1;
}

/* Two-class selector to outrank the `.psy-form` base in register-form.css,
   which is loaded AFTER routes.css and would otherwise re-apply its 900px
   max-width on top of the modifier. */
.psy-form.psy-form--login,
.psy-form.psy-form--forgot,
.psy-form.psy-form--logged {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 520px;
	margin: 0 auto;
	padding: 50px 40px;
	border-radius: 24px;
}

.psy-form.psy-form--forgot,
.psy-form.psy-form--logged {
	max-width: 480px;
	text-align: center;
	align-items: center;
}

.psy-form--forgot .psy-form__fields,
.psy-form--forgot .psy-form__messages,
.psy-form--forgot .psy-form__submit {
	width: 100%;
}

.psy-form--forgot .psy-form__fields { text-align: left; }

.psy-form__icon {
	margin: 0 auto 6px;
}

.psy-form__title {
	font-family: 'Yacota Display Sans', 'Yacote', 'Audiowide', system-ui, sans-serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 46px;
	letter-spacing: -0.11em;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
}

/* Sentence-case Open Sans variant — used by /forgot-password/ and other
   non-display titles. Placed AFTER `.psy-form__title` so it wins under
   equal specificity. */
.psy-form__title.psy-form__title--plain {
	font-family: var(--font-body, 'Open Sans', sans-serif);
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 0;
	font-weight: 700;
	text-transform: none;
}

.psy-form__subtitle {
	margin: 0 0 18px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.psy-form__messages {
	min-height: 18px;
	font-size: 13px;
}
.psy-form__messages[data-tone="error"]   { color: #ff5b8e; }
.psy-form__messages[data-tone="success"] { color: #38e29c; }

.psy-form__fields { display: flex; flex-direction: column; gap: 14px; }

.psy-form--login .psy-field__label,
.psy-form--forgot .psy-field__label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 6px;
	font-weight: 700;
}

.psy-form--login input[type="email"],
.psy-form--login input[type="password"],
.psy-form--forgot input[type="email"] {
	width: 100%;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #0A032E;
	color: #fff;
	font: inherit;
	font-size: 14px;
}
.psy-form--login input::placeholder,
.psy-form--forgot input::placeholder { color: rgba(255, 255, 255, 0.35); }

.psy-form--login input:focus,
.psy-form--forgot input:focus {
	outline: none;
	border-color: var(--psy-pink);
	box-shadow: 0 0 0 2px rgba(255, 67, 200, 0.18);
}

.psy-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}

.psy-field__consent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
}

.psy-field__consent input { accent-color: var(--psy-pink); }

.psy-form__forgot {
	font-size: 13px;
	color: var(--psy-pink);
	text-decoration: none;
	font-weight: 600;
}
.psy-form__forgot:hover { text-decoration: underline; }

.psy-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 16px 22px;
	border: 0;
	border-radius: 26px;
	background: #E54ADA;
	color: #0A032E;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	cursor: pointer;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.15s, transform 0.15s;
}
.psy-form__submit:hover { filter: brightness(1.06); }
.psy-form__submit:active { transform: translateY(1px); }

.psy-form__signup {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}
.psy-form__signup a {
	color: var(--psy-pink);
	font-weight: 600;
	text-decoration: none;
}
.psy-form__signup a:hover { text-decoration: underline; }

.psy-form--logged { text-align: center; }

/* Register type selector */
.psy-register-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.psy-register-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 20px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--psy-border);
	color: var(--psy-text);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.psy-register-card__icon {
	width: 36px;
	height: 36px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	flex-shrink: 0;
	margin-bottom: 6px;
}

.psy-register-card:hover {
	transform: translateY(-2px);
	border-color: var(--psy-pink);
	background: rgba(255, 67, 200, 0.06);
}

.psy-register-card strong {
	font-size: 16px;
	font-weight: 700;
}

.psy-register-card span {
	font-size: 12px;
	color: var(--psy-text-mute);
}