/**
 * My Account / Login / Registration (WP-Members) — 2026-09-16 redesign.
 * page-templates/cricket-account.php renders:
 *   - .cricket-auth-split: benefits panel (.cricket-auth-aside) + glass form
 *     card (.cricket-auth-card) wrapping WP-Members' own forms
 *   - .cricket-dash: logged-in dashboard
 * over the homepage storm background (cricket-storm.css) plus the glows /
 * floating emoji in .cricket-auth-fx. Motion disabled under reduced-motion.
 */

:root {
	--auth-ice: #f1f6ff;
	--auth-ice-2: rgba( 234, 244, 255, 0.76 );
	--auth-ice-3: rgba( 234, 244, 255, 0.5 );
	--auth-gold: #ffb020;
	--auth-gold-2: #ffd66b;
	--auth-coral: #ff6b6b;
	--auth-teal: #4fd1c5;
	--auth-blue: #3a86e0;
	--auth-green: #4fd18b;
	--auth-line: rgba( 255, 255, 255, 0.12 );
	--auth-display: 'Outfit', 'PT Sans', sans-serif;
	--auth-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
	--auth-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
}

.site-content-row > .cricket-auth-page,
.row > .cricket-auth-page {
	flex: 0 0 100%;
	width: 100%;
}

.cricket-auth-page {
	position: relative;
	isolation: isolate;
	padding-block: 64px 90px;
}

.cricket-auth-page .container {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------
 * Background effects
 * ------------------------------------------------------------------- */

.cricket-auth-fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.cricket-auth-fx__glow {
	position: absolute;
	width: 46vmax;
	height: 46vmax;
	border-radius: 50%;
	filter: blur( 80px );
	opacity: 0.5;
	will-change: transform;
}

.cricket-auth-fx__glow--a {
	top: -18vmax;
	left: -14vmax;
	background: radial-gradient( circle, rgba( 255, 176, 32, 0.4 ), rgba( 255, 107, 107, 0.14 ) 45%, transparent 70% );
	animation: auth-drift-a 24s ease-in-out infinite alternate;
}

.cricket-auth-fx__glow--b {
	bottom: -20vmax;
	right: -14vmax;
	background: radial-gradient( circle, rgba( 58, 134, 224, 0.45 ), rgba( 79, 209, 197, 0.16 ) 45%, transparent 70% );
	animation: auth-drift-b 30s ease-in-out infinite alternate;
}

@keyframes auth-drift-a {
	to { transform: translate3d( 6vmax, 4vmax, 0 ) scale( 1.1 ); }
}

@keyframes auth-drift-b {
	to { transform: translate3d( -6vmax, -5vmax, 0 ) scale( 0.92 ); }
}

.cricket-auth-fx__emoji {
	position: absolute;
	left: var( --x );
	top: var( --y );
	font-size: calc( 42px * var( --s, 1 ) );
	line-height: 1;
	opacity: 0.22;
	filter: saturate( 1.2 ) drop-shadow( 0 10px 24px rgba( 0, 0, 0, 0.5 ) );
	animation: auth-float 12s ease-in-out infinite;
	animation-delay: var( --d, 0s );
}

@keyframes auth-float {
	0%, 100% { transform: translateY( 0 ) rotate( -8deg ); }
	50% { transform: translateY( -26px ) rotate( 8deg ); }
}

/* ---------------------------------------------------------------------
 * Split layout
 * ------------------------------------------------------------------- */

.cricket-auth-split {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 460px );
	gap: 56px;
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
}

/* --- Benefits panel ---------------------------------------------------- */

.cricket-auth-aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var( --auth-ice-2 );
	animation: auth-rise 0.9s var( --auth-ease ) both;
}

.cricket-auth-aside__eyebrow {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	background: rgba( 255, 176, 32, 0.1 );
	border: 1px solid rgba( 255, 176, 32, 0.32 );
	font-family: var( --auth-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --auth-gold-2 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

.cricket-auth-aside__eyebrow > span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --auth-gold );
	animation: auth-ping 1.8s ease-out infinite;
}

@keyframes auth-ping {
	0% { box-shadow: 0 0 0 0 rgba( 255, 176, 32, 0.6 ); }
	70%, 100% { box-shadow: 0 0 0 8px rgba( 255, 176, 32, 0 ); }
}

.cricket-auth-aside__title {
	margin: 0;
	font-family: var( --auth-display );
	font-size: clamp( 38px, 5vw, 64px );
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	background-image: linear-gradient( 100deg, #ffffff 0%, #ffe9b3 45%, var( --auth-gold ) 75%, #ff8a5c 100% );
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow( 0 10px 36px rgba( 255, 176, 32, 0.25 ) );
	animation: auth-sheen 8s ease-in-out infinite alternate;
	text-wrap: balance;
}

@keyframes auth-sheen {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

.cricket-auth-aside__sub {
	margin: 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.6;
	color: var( --auth-ice-2 );
}

.cricket-auth-perks {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.cricket-auth-perk {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 16px;
	background: linear-gradient( 160deg, rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.02 ) );
	border: 1px solid var( --auth-line );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	animation: auth-rise 0.8s var( --auth-ease ) both;
	animation-delay: calc( 0.15s + var( --i, 0 ) * 90ms );
	transition: transform 0.35s var( --auth-ease ), border-color 0.35s ease, background 0.35s ease;
}

.cricket-auth-perk:hover {
	transform: translateY( -3px );
	border-color: rgba( 255, 176, 32, 0.4 );
	background: linear-gradient( 160deg, rgba( 255, 176, 32, 0.12 ), rgba( 255, 255, 255, 0.02 ) );
}

.cricket-auth-perk__emoji {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.08 );
	font-size: 21px;
	transition: transform 0.4s var( --auth-ease );
}

.cricket-auth-perk:hover .cricket-auth-perk__emoji {
	transform: scale( 1.15 ) rotate( -8deg );
}

.cricket-auth-perk__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.45;
	color: var( --auth-ice-3 );
}

.cricket-auth-perk__text b {
	font-family: var( --auth-display );
	font-size: 15px;
	font-weight: 700;
	color: var( --auth-ice );
}

.cricket-auth-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 6px;
}

.cricket-auth-stat {
	display: flex;
	flex-direction: column;
	font-family: var( --auth-mono );
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --auth-ice-3 );
}

.cricket-auth-stat b {
	font-family: var( --auth-display );
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var( --auth-ice );
	line-height: 1.1;
}

.cricket-auth-live {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cricket-auth-live__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba( 6, 16, 34, 0.6 );
	border: 1px solid var( --auth-line );
	font-size: 13.5px;
	color: var( --auth-ice-2 );
}

.cricket-auth-live__item b {
	color: var( --auth-gold-2 );
}

.cricket-auth-live__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --auth-green );
	animation: auth-ping-green 1.6s ease-out infinite;
}

@keyframes auth-ping-green {
	0% { box-shadow: 0 0 0 0 rgba( 79, 209, 139, 0.6 ); }
	70%, 100% { box-shadow: 0 0 0 8px rgba( 79, 209, 139, 0 ); }
}

@keyframes auth-rise {
	from { opacity: 0; transform: translateY( 20px ); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * Glass form card
 * ------------------------------------------------------------------- */

.cricket-auth-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	padding: 34px 34px 30px;
	border-radius: 26px;
	background:
		radial-gradient( 120% 60% at 50% 0%, rgba( 255, 176, 32, 0.12 ), transparent 60% ),
		linear-gradient( 180deg, rgba( 16, 38, 70, 0.9 ), rgba( 8, 20, 42, 0.92 ) );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 40px 80px -40px rgba( 0, 0, 0, 0.9 ), inset 0 1px 0 rgba( 255, 255, 255, 0.08 );
	backdrop-filter: blur( 16px );
	-webkit-backdrop-filter: blur( 16px );
	animation: auth-rise 0.9s var( --auth-ease ) 0.12s both;
}

/* Travelling gradient edge. */
.cricket-auth-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient( from var( --auth-angle, 0deg ), rgba( 255, 214, 107, 0.95 ), rgba( 58, 134, 224, 0.15 ) 25%, rgba( 255, 107, 107, 0.7 ) 50%, rgba( 58, 134, 224, 0.15 ) 75%, rgba( 255, 214, 107, 0.95 ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask: linear-gradient( #000 0 0 ) content-box exclude, linear-gradient( #000 0 0 );
	animation: auth-orbit 9s linear infinite;
	pointer-events: none;
}

@property --auth-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes auth-orbit {
	to { --auth-angle: 360deg; }
}

.cricket-auth-card__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	text-align: center;
}

.cricket-auth-card__emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: linear-gradient( 135deg, rgba( 255, 214, 107, 0.3 ), rgba( 255, 107, 107, 0.15 ) );
	border: 1px solid rgba( 255, 214, 107, 0.4 );
	font-size: 34px;
	box-shadow: 0 16px 34px -14px rgba( 255, 150, 50, 0.7 );
	animation: auth-wave 2.6s ease-in-out infinite;
	transform-origin: 70% 80%;
}

@keyframes auth-wave {
	0%, 60%, 100% { transform: rotate( 0 ); }
	10%, 30% { transform: rotate( 14deg ); }
	20%, 40% { transform: rotate( -8deg ); }
}

.cricket-auth-card__kicker {
	margin: 4px 0 0;
	font-family: var( --auth-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --auth-ice-3 );
}

.cricket-auth-back,
.cricket-auth-back:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid var( --auth-line );
	font-size: 13px;
	font-weight: 700;
	color: var( --auth-ice-2 );
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.cricket-auth-back:hover,
.cricket-auth-back:focus-visible {
	background: rgba( 255, 176, 32, 0.12 );
	color: var( --auth-gold-2 );
}

.cricket-auth-card__body > p:empty {
	display: none;
}

.cricket-auth-card__body > p {
	margin: 0;
}

.cricket-auth-card__alt {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var( --auth-line );
	text-align: center;
	font-size: 14px;
	color: var( --auth-ice-3 );
}

.cricket-auth-card__alt a,
.cricket-auth-card__alt a:visited {
	color: var( --auth-gold-2 );
	font-weight: 700;
	text-decoration: none;
}

/* --- Login / Register tabs (cricket-auth.js) ------------------------- */

.cricket-auth-tabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 14px 0 22px;
	padding: 5px;
	border-radius: 999px;
	background: rgba( 4, 12, 28, 0.7 );
	border: 1px solid var( --auth-line );
}

.cricket-auth-tabs__pill {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc( 50% - 5px );
	height: calc( 100% - 10px );
	border-radius: 999px;
	background: linear-gradient( 135deg, var( --auth-gold-2 ), var( --auth-gold ) 55%, #ff8a5c );
	box-shadow: 0 10px 22px -8px rgba( 255, 150, 50, 0.7 );
	transition: transform 0.45s var( --auth-ease );
}

.cricket-auth-tabs[data-active="register"] .cricket-auth-tabs__pill {
	transform: translateX( 100% );
}

.cricket-auth-tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --auth-ice-2 );
	font-family: var( --auth-display );
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.3s ease;
}

.cricket-auth-tab[aria-selected="true"] {
	color: #1a1200;
}

.cricket-auth-tab:focus-visible {
	outline: 2px solid var( --auth-ice );
	outline-offset: 2px;
}

.cricket-auth-panel-in {
	animation: auth-panel 0.5s var( --auth-ease ) both;
}

@keyframes auth-panel {
	from { opacity: 0; transform: translateY( 10px ) scale( 0.99 ); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * WP-Members forms (login, register, edit profile, change / reset password)
 * ------------------------------------------------------------------- */

.cricket-auth-card #wpmem_login,
.cricket-auth-card #wpmem_reg,
.cricket-auth-card #wpmem_restricted_msg {
	display: block;
	float: none;
	width: 100%;
}

.cricket-auth-card #wpmem_login form,
.cricket-auth-card #wpmem_reg form {
	margin: 0;
}

.cricket-auth-card fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.cricket-auth-card legend {
	width: 100%;
	margin-bottom: 22px;
	padding: 0;
	text-align: center;
	font-family: var( --auth-display );
	font-size: clamp( 26px, 3vw, 32px );
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	background-image: linear-gradient( 180deg, #ffffff, #cfe0ff );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: none;
}

.cricket-auth-card label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
	font-family: var( --auth-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --auth-ice-3 );
	float: none;
	width: auto;
	text-align: left;
}

/* Emoji cue on the common fields. */
.cricket-auth-card label[for="log"]::before,
.cricket-auth-card label[for="username"]::before { content: "👤"; }
.cricket-auth-card label[for="pwd"]::before,
.cricket-auth-card label[for="password"]::before,
.cricket-auth-card label[for="pass1"]::before { content: "🔒"; }
.cricket-auth-card label[for="confirm_password"]::before,
.cricket-auth-card label[for="pass2"]::before { content: "✅"; }
.cricket-auth-card label[for="user_email"]::before { content: "✉️"; }
.cricket-auth-card label[for="billing_country"]::before { content: "🌍"; }
.cricket-auth-card label[for="first_name"]::before,
.cricket-auth-card label[for="last_name"]::before { content: "🪪"; }

.cricket-auth-card label::before {
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	filter: saturate( 1.1 );
}

.cricket-auth-card label[for="rememberme"] {
	display: inline-flex;
	margin: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var( --auth-ice-2 );
	cursor: pointer;
}

.cricket-auth-card label[for="rememberme"]::before {
	content: none;
}

.cricket-auth-card .req {
	color: var( --auth-gold );
	margin-left: 2px;
}

.cricket-auth-card .div_text,
.cricket-auth-card .div_textarea,
.cricket-auth-card .div_select {
	position: relative;
	float: none;
	width: 100%;
	margin: 0 0 16px;
}

.cricket-auth-card input[type="text"],
.cricket-auth-card input[type="email"],
.cricket-auth-card input[type="password"],
.cricket-auth-card input[type="tel"],
.cricket-auth-card input[type="url"],
.cricket-auth-card select,
.cricket-auth-card textarea {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	border-radius: 14px;
	border: 1.5px solid rgba( 255, 255, 255, 0.14 );
	background: rgba( 4, 12, 28, 0.55 );
	color: var( --auth-ice );
	font-size: 16px;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.cricket-auth-card input[type="password"] {
	padding-right: 52px;
}

.cricket-auth-card input:hover,
.cricket-auth-card select:hover,
.cricket-auth-card textarea:hover {
	border-color: rgba( 255, 255, 255, 0.24 );
}

.cricket-auth-card input::placeholder,
.cricket-auth-card textarea::placeholder {
	color: rgba( 255, 255, 255, 0.35 );
}

.cricket-auth-card input:focus,
.cricket-auth-card select:focus,
.cricket-auth-card textarea:focus {
	outline: none;
	border-color: var( --auth-gold );
	background: rgba( 4, 12, 28, 0.75 );
	box-shadow: 0 0 0 4px rgba( 255, 176, 32, 0.18 ), 0 10px 30px -16px rgba( 255, 176, 32, 0.6 );
}

/* Autofill keeps the dark field. */
.cricket-auth-card input:-webkit-autofill {
	-webkit-text-fill-color: var( --auth-ice );
	-webkit-box-shadow: 0 0 0 40px #0b1a33 inset;
	caret-color: var( --auth-ice );
}

/* Show / hide password (cricket-auth.js). */
.cricket-auth-eye {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.cricket-auth-eye:hover,
.cricket-auth-eye:focus-visible {
	background: rgba( 255, 255, 255, 0.08 );
}

.cricket-auth-eye:focus-visible {
	outline: 2px solid var( --auth-gold );
	outline-offset: 1px;
}

/* Password match hint (register + change password). */
.cricket-auth-match {
	display: block;
	margin: -8px 0 14px;
	font-size: 12.5px;
	font-weight: 700;
	min-height: 16px;
}

.cricket-auth-match--ok { color: var( --auth-green ); }
.cricket-auth-match--no { color: #ff9d9d; }

.cricket-auth-card .button_div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 10px;
	margin-top: 6px;
	float: none;
	width: 100%;
	text-align: left;
}

.cricket-auth-card input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var( --auth-gold );
	vertical-align: middle;
	cursor: pointer;
}

.cricket-auth-card input.buttons,
.cricket-auth-card input[type="submit"] {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 54px;
	margin-top: 4px;
	padding: 0 22px;
	border: none;
	border-radius: 999px;
	background: linear-gradient( 100deg, var( --auth-gold-2 ), var( --auth-gold ) 45%, #ff8a5c 80%, var( --auth-coral ) );
	background-size: 180% 100%;
	color: #1a1200;
	font-family: var( --auth-display );
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 16px 34px -14px rgba( 255, 140, 60, 0.75 );
	transition: transform 0.25s var( --auth-ease ), box-shadow 0.25s ease, background-position 0.6s ease;
}

.cricket-auth-card input.buttons:hover,
.cricket-auth-card input[type="submit"]:hover,
.cricket-auth-card input.buttons:focus-visible,
.cricket-auth-card input[type="submit"]:focus-visible {
	background-position: 100% 0;
	transform: translateY( -2px );
	box-shadow: 0 22px 40px -14px rgba( 255, 140, 60, 0.85 );
}

.cricket-auth-card input.buttons:active,
.cricket-auth-card input[type="submit"]:active {
	transform: translateY( 0 ) scale( 0.98 );
}

.cricket-auth-card input[type="submit"]:focus-visible {
	outline: 3px solid rgba( 255, 255, 255, 0.6 );
	outline-offset: 3px;
}

.cricket-auth-card input[type="reset"] {
	display: none;
}

.cricket-auth-card .link-text {
	margin-top: 16px;
	text-align: center;
	font-size: 13.5px;
	color: var( --auth-ice-3 );
	float: none;
	width: 100%;
}

.cricket-auth-card .req-text {
	margin-top: 16px;
	text-align: center;
	font-size: 11.5px;
	color: var( --auth-ice-3 );
	float: none;
}

.cricket-auth-card .req-text .req {
	margin: 0 3px 0 0;
}

.cricket-auth-card a,
.cricket-auth-card a:visited {
	color: var( --auth-gold-2 );
	font-weight: 700;
	text-decoration: none;
}

.cricket-auth-card a:hover,
.cricket-auth-card a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cricket-auth-card .clear {
	clear: both;
}

/* reCAPTCHA widget: centred, with room. */
.cricket-auth-card .captcha {
	display: flex;
	justify-content: center;
	margin: 6px 0 18px;
}

/* WP-Members messages (login failed, profile updated, errors…). */
.cricket-auth-card .wpmem_msg,
.cricket-auth-card #wpmem_msg {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba( 255, 176, 32, 0.4 );
	background: rgba( 255, 176, 32, 0.1 );
	color: var( --auth-ice );
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	animation: auth-shake 0.5s ease 0.2s;
}

.cricket-auth-card .wpmem_msg::before {
	content: "⚠️ ";
}

@keyframes auth-shake {
	0%, 100% { transform: none; }
	20%, 60% { transform: translateX( -6px ); }
	40%, 80% { transform: translateX( 6px ); }
}

/* Logged-in message on Registration ("You are logged in as …"). */
.cricket-auth-card__body > p a,
.cricket-auth-card #wpmem_reg + p {
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Logged-in dashboard
 * ------------------------------------------------------------------- */

.cricket-dash {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 1080px;
	margin: 0 auto;
}

.cricket-dash__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 30px 32px;
	overflow: hidden;
	border-radius: 26px;
	background:
		radial-gradient( 80% 120% at 0% 0%, rgba( 255, 176, 32, 0.22 ), transparent 55% ),
		radial-gradient( 70% 120% at 100% 100%, rgba( 58, 134, 224, 0.28 ), transparent 55% ),
		linear-gradient( 135deg, rgba( 24, 52, 94, 0.95 ), rgba( 9, 22, 46, 0.95 ) );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 40px 80px -40px rgba( 0, 0, 0, 0.9 );
	animation: auth-rise 0.8s var( --auth-ease ) both;
}

.cricket-dash__who {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
}

.cricket-dash__avatar-ring {
	position: relative;
	flex: none;
	display: inline-flex;
	padding: 5px;
	border-radius: 50%;
	isolation: isolate;
}

.cricket-dash__avatar-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient( var( --auth-gold-2 ), var( --auth-coral ), var( --auth-blue ), var( --auth-teal ), var( --auth-gold-2 ) );
	animation: auth-spin 6s linear infinite;
}

@keyframes auth-spin {
	to { transform: rotate( 360deg ); }
}

.cricket-dash__avatar {
	border: 4px solid #0b1b36 !important;
	font-size: 28px;
}

.cricket-dash__hello {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cricket-dash__eyebrow {
	font-family: var( --auth-mono );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --auth-gold-2 );
}

.cricket-dash__name {
	margin: 0;
	font-family: var( --auth-display );
	font-size: clamp( 32px, 4.5vw, 54px );
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --auth-ice );
	overflow-wrap: anywhere;
}

.cricket-dash__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 4px;
	font-size: 13px;
	color: var( --auth-ice-3 );
}

.cricket-dash__level {
	padding: 1px 10px;
	border-radius: 999px;
	background: rgba( 255, 176, 32, 0.16 );
	border: 1px solid rgba( 255, 176, 32, 0.4 );
	font-family: var( --auth-mono );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --auth-gold-2 );
}

.cricket-dash__logout,
.cricket-dash__logout:visited {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.07 );
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	font-size: 14px;
	font-weight: 700;
	color: var( --auth-ice );
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cricket-dash__logout:hover,
.cricket-dash__logout:focus-visible {
	background: rgba( 255, 107, 107, 0.16 );
	border-color: rgba( 255, 107, 107, 0.5 );
	color: #ffffff;
}

.cricket-dash__stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 14px;
}

.cricket-dash__stat {
	--tone: var( --auth-gold );
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 20px 18px;
	overflow: hidden;
	border-radius: 20px;
	background:
		radial-gradient( 90% 90% at 100% 0%, color-mix( in srgb, var( --tone ) 22%, transparent ), transparent 60% ),
		rgba( 10, 24, 48, 0.85 );
	border: 1px solid color-mix( in srgb, var( --tone ) 30%, transparent );
	box-shadow: 0 24px 50px -30px rgba( 0, 0, 0, 0.9 );
	animation: auth-rise 0.8s var( --auth-ease ) both;
	animation-delay: calc( 0.1s + var( --i, 0 ) * 80ms );
	transition: transform 0.35s var( --auth-ease );
}

.cricket-dash__stat:hover {
	transform: translateY( -4px );
}

.cricket-dash__stat--blue { --tone: var( --auth-blue ); }
.cricket-dash__stat--green { --tone: var( --auth-green ); }
.cricket-dash__stat--coral { --tone: var( --auth-coral ); }

.cricket-dash__stat-emoji {
	font-size: 26px;
	line-height: 1;
	margin-bottom: 6px;
}

.cricket-dash__stat-value {
	font-family: var( --auth-display );
	font-size: 36px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var( --auth-ice );
}

.cricket-dash__stat-label {
	font-family: var( --auth-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --auth-ice-3 );
}

.cricket-dash__notice {
	margin: 0;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba( 58, 134, 224, 0.12 );
	border: 1px solid rgba( 58, 134, 224, 0.35 );
	color: var( --auth-ice-2 );
	font-size: 14.5px;
}

.cricket-dash__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.3fr );
	gap: 22px;
	align-items: start;
}

.cricket-dash__panel {
	padding: 24px;
	border-radius: 22px;
	background: rgba( 10, 24, 48, 0.82 );
	border: 1px solid var( --auth-line );
	box-shadow: 0 24px 50px -30px rgba( 0, 0, 0, 0.9 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	animation: auth-rise 0.8s var( --auth-ease ) 0.3s both;
}

.cricket-dash__panel-title {
	margin: 0 0 16px;
	font-family: var( --auth-display );
	font-size: 20px;
	font-weight: 800;
	color: var( --auth-ice );
}

.cricket-dash__actions {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
}

.cricket-dash__action,
.cricket-dash__action:visited {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid var( --auth-line );
	color: var( --auth-ice-3 );
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: transform 0.3s var( --auth-ease ), border-color 0.3s ease, background 0.3s ease;
}

.cricket-dash__action span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cricket-dash__action b {
	font-family: var( --auth-display );
	font-size: 15px;
	font-weight: 700;
	color: var( --auth-ice );
}

.cricket-dash__action-emoji {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.08 );
	font-size: 22px;
	transition: transform 0.4s var( --auth-ease );
}

.cricket-dash__action:hover,
.cricket-dash__action:focus-visible {
	transform: translateY( -3px );
	border-color: rgba( 255, 176, 32, 0.45 );
	background: rgba( 255, 176, 32, 0.08 );
	color: var( --auth-ice-2 );
}

.cricket-dash__action:hover .cricket-dash__action-emoji {
	transform: scale( 1.15 ) rotate( -8deg );
}

.cricket-dash__action--primary,
.cricket-dash__action--primary:visited {
	grid-column: 1 / -1;
	background: linear-gradient( 100deg, rgba( 255, 214, 107, 0.22 ), rgba( 255, 107, 107, 0.12 ) );
	border-color: rgba( 255, 176, 32, 0.45 );
}

.cricket-dash__history {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cricket-dash__pick {
	--tone: var( --auth-blue );
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba( 255, 255, 255, 0.035 );
	border: 1px solid var( --auth-line );
	border-left: 3px solid var( --tone );
	animation: auth-rise 0.6s var( --auth-ease ) both;
	animation-delay: calc( 0.35s + var( --i, 0 ) * 70ms );
}

.cricket-dash__pick--win { --tone: var( --auth-green ); }
.cricket-dash__pick--loss { --tone: var( --auth-coral ); }
.cricket-dash__pick--pending { --tone: var( --auth-gold ); }
.cricket-dash__pick--void { --tone: rgba( 234, 244, 255, 0.4 ); }

.cricket-dash__pick-badge {
	flex: none;
	font-size: 20px;
}

.cricket-dash__pick-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.cricket-dash__pick-q {
	font-family: var( --auth-display );
	font-size: 14.5px;
	font-weight: 700;
	color: var( --auth-ice );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-dash__pick-choice {
	font-size: 12.5px;
	color: var( --auth-ice-3 );
}

.cricket-dash__pick-choice b {
	color: var( --auth-ice-2 );
}

.cricket-dash__pick-result {
	flex: none;
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --tone ) 16%, transparent );
	border: 1px solid color-mix( in srgb, var( --tone ) 40%, transparent );
	font-family: var( --auth-mono );
	font-size: 10.5px;
	font-weight: 700;
	color: var( --auth-ice );
	white-space: nowrap;
}

.cricket-dash__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 16px;
	border-radius: 16px;
	border: 1px dashed rgba( 255, 255, 255, 0.18 );
	text-align: center;
	color: var( --auth-ice-3 );
}

.cricket-dash__empty > span {
	font-size: 36px;
}

.cricket-dash__empty p {
	margin: 0;
}

.cricket-dash__empty a,
.cricket-dash__empty a:visited {
	color: var( --auth-gold-2 );
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media ( max-width: 991px ) {
	.cricket-auth-split {
		grid-template-columns: minmax( 0, 1fr );
		gap: 34px;
		max-width: 560px;
	}

	/* Form first on phones/tablets — that's what the visitor came for. */
	.cricket-auth-card {
		order: -1;
		max-width: none;
	}

	.cricket-auth-aside__title {
		font-size: clamp( 32px, 8vw, 44px );
	}

	.cricket-dash__stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.cricket-dash__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 560px ) {
	.cricket-auth-page {
		padding-block: 28px 60px;
	}

	.cricket-auth-card {
		padding: 26px 18px 22px;
		border-radius: 22px;
	}

	.cricket-auth-perks {
		grid-template-columns: minmax( 0, 1fr );
	}

	.cricket-auth-fx__emoji {
		font-size: calc( 30px * var( --s, 1 ) );
	}

	.cricket-dash__hero {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px 20px;
	}

	.cricket-dash__who {
		gap: 14px;
	}

	.cricket-dash__avatar-ring .psp-avatar {
		width: 64px !important;
		height: 64px !important;
		font-size: 22px;
	}

	.cricket-dash__logout {
		align-self: stretch;
		justify-content: center;
	}

	.cricket-dash__stat {
		padding: 16px;
	}

	.cricket-dash__stat-value {
		font-size: 28px;
	}

	.cricket-dash__panel {
		padding: 18px 14px;
	}

	.cricket-dash__actions {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-auth-page *,
	.cricket-auth-page *::before,
	.cricket-auth-page *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Specificity bridge: WP-Members' own stylesheet targets
 * `#wpmem_login input[type="text"]` / `#wpmem_reg …` (ID selectors), which
 * outranked the class rules above and painted white fields. Restate the
 * field styling under the same IDs.
 * ------------------------------------------------------------------- */

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) :is( input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="date"], input[type="number"], select, textarea ) {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 16px;
	border: 1.5px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 14px;
	background: rgba( 4, 12, 28, 0.55 );
	color: var( --auth-ice );
	font-family: inherit;
	font-size: 16px;
	box-shadow: none;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) input[type="password"] {
	padding-right: 52px;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) :is( input, select, textarea ):hover {
	border-color: rgba( 255, 255, 255, 0.26 );
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) :is( input, select, textarea ):focus {
	outline: none;
	border-color: var( --auth-gold );
	background: rgba( 4, 12, 28, 0.78 );
	box-shadow: 0 0 0 4px rgba( 255, 176, 32, 0.18 ), 0 10px 30px -16px rgba( 255, 176, 32, 0.6 );
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) :is( input.buttons, input[type="submit"] ) {
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient( 100deg, var( --auth-gold-2 ), var( --auth-gold ) 45%, #ff8a5c 80%, var( --auth-coral ) );
	background-size: 180% 100%;
	color: #1a1200;
	font-family: var( --auth-display );
	font-size: 16.5px;
	font-weight: 800;
	float: none;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) :is( input.buttons, input[type="submit"] ):hover {
	background-position: 100% 0;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) input[type="checkbox"] {
	width: 18px;
	min-height: 0;
	height: 18px;
	padding: 0;
}

/* Remember-me row: checkbox + label together on the left, the submit
   button on its own full-width line below. */
.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) .button_div {
	justify-content: flex-start;
	gap: 14px 0;
	font-size: 0; /* swallow the plugin's &nbsp; spacers */
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) .button_div > * {
	font-size: 14px;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) .button_div :is( input.buttons, input[type="submit"] ) {
	flex: 1 1 100%;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) label {
	float: none;
	width: auto;
	padding: 0;
	text-align: left;
}

.cricket-auth-card :is( #wpmem_login, #wpmem_reg ) .div_text {
	float: none;
	width: 100%;
}

/* ---------------------------------------------------------------------
 * Dashboard streak cards (2026-09-16): prediction streak + daily visit
 * streak, side by side.
 * ------------------------------------------------------------------- */
.cricket-dash__streaks {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
}

.cricket-streak {
	--tone: var( --auth-coral );
	--tone-2: #ff8a5c;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 24px;
	border-radius: 22px;
	background:
		radial-gradient( 120% 90% at 100% 0%, color-mix( in srgb, var( --tone ) 22%, transparent ), transparent 60% ),
		rgba( 10, 24, 48, 0.85 );
	border: 1px solid color-mix( in srgb, var( --tone ) 35%, transparent );
	box-shadow: 0 24px 50px -30px rgba( 0, 0, 0, 0.9 );
	overflow: hidden;
	animation: auth-rise 0.8s var( --auth-ease ) 0.2s both;
}

.cricket-streak--visit {
	--tone: var( --auth-teal );
	--tone-2: #3a86e0;
	animation-delay: 0.3s;
}

.cricket-streak__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cricket-streak__emoji {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient( 140deg, color-mix( in srgb, var( --tone ) 30%, transparent ), color-mix( in srgb, var( --tone-2 ) 12%, transparent ) );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --tone ) 45%, transparent );
	font-size: 24px;
}

.cricket-streak--predict .cricket-streak__emoji {
	animation: cricket-flame 1.8s ease-in-out infinite;
}

@keyframes cricket-flame {
	0%, 100% { transform: scale( 1 ) rotate( 0 ); }
	50% { transform: scale( 1.08 ) rotate( -4deg ); }
}

.cricket-streak__title {
	margin: 0;
	font-family: var( --auth-display );
	font-size: 18px;
	font-weight: 800;
	color: var( --auth-ice );
}

.cricket-streak__sub {
	margin: 2px 0 0;
	font-size: 13px;
	color: var( --auth-ice-3 );
}

.cricket-streak__numbers {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.cricket-streak__big {
	font-family: var( --auth-display );
	font-size: 54px;
	font-weight: 900;
	line-height: 0.9;
	background: linear-gradient( 160deg, #ffffff, var( --tone ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cricket-streak__unit {
	font-family: var( --auth-display );
	font-size: 16px;
	font-weight: 800;
	color: var( --auth-ice-2 );
}

.cricket-streak__best {
	margin-left: auto;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba( 255, 176, 32, 0.12 );
	box-shadow: inset 0 0 0 1px rgba( 255, 214, 107, 0.4 );
	color: var( --auth-gold-2 );
	font-family: var( --auth-display );
	font-size: 12.5px;
	font-weight: 800;
}

.cricket-streak__dots {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 6px;
}

.cricket-streak__dot {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-height: 40px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.05 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.1 );
	color: var( --auth-ice-3 );
	font-family: var( --auth-display );
	font-size: 14px;
	font-weight: 900;
}

.cricket-streak__dot small {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cricket-streak__dot.is-hit {
	background: linear-gradient( 140deg, var( --tone ), var( --tone-2 ) );
	box-shadow: 0 8px 16px -10px var( --tone );
	color: #0a1830;
}

.cricket-streak__dot.is-miss {
	background: rgba( 255, 107, 107, 0.12 );
	box-shadow: inset 0 0 0 1px rgba( 255, 107, 107, 0.4 );
	color: #ff9b9b;
}

.cricket-streak__dot.is-today {
	outline: 2px solid var( --auth-gold-2 );
	outline-offset: 2px;
}

.cricket-streak__tip {
	margin: 0;
	font-size: 13px;
	color: var( --auth-ice-2 );
}

@media ( max-width: 767px ) {
	.cricket-dash__streaks {
		grid-template-columns: minmax( 0, 1fr );
	}

	.cricket-streak__big {
		font-size: 44px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-streak,
	.cricket-streak--predict .cricket-streak__emoji {
		animation: none;
	}
}