﻿/**
 * GlassUI Template - CSS
 * RTL-first, dark glassmorphism with gold accent.
 * All styles scoped under .pym-auth--glassui
 *
 * @package OTPex
 * @since   6.5.0
 */

/* ── Font: YekanBakh (internal) ── */
.pym-auth--glassui.pym-auth--font-internal,
.pym-auth--glassui.pym-auth--font-internal *,
.pym-auth--glassui.pym-auth--font-internal *::before,
.pym-auth--glassui.pym-auth--font-internal *::after {
	font-family: 'YekanBakh', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* ── Variables ── */
.pym-auth--glassui {
	--pym-card-radius: 24px;
	--pym-form-width: 440px;
	--glass-bg: rgba(20, 20, 25, 0.6);
	--glass-bg-deep: rgba(20, 20, 25, 0.85);
	--glass-border: rgba(255, 255, 255, 0.1);
	--glass-border-light: rgba(255, 255, 255, 0.15);
	--glass-blur: 20px;
	--glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	--glass-input-bg: rgba(0, 0, 0, 0.3);
	--glass-input-border: rgba(255, 255, 255, 0.1);
	--glass-input-focus-border: rgba(212, 175, 55, 0.5);
	--glass-input-focus-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
	--glass-text: #ffffff;
	--glass-text-secondary: #9ca3af;
	--glass-text-muted: #6b7280;
	--glass-accent: #D4AF37;
	--glass-success: #34d399;
	--glass-error: #f87171;
	--glass-radius-sm: 12px;
	--glass-radius-md: 16px;
	--glass-transition: 0.3s ease;
	--glass-page-bg: #111827;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, 'IRANSans', 'Vazirmatn', Arial, sans-serif !important;
	direction: rtl !important;
	box-sizing: border-box !important;
	position: relative !important;
}

.pym-auth--glassui *,
.pym-auth--glassui *::before,
.pym-auth--glassui *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ══════════════════════════════════
   FULL-PAGE BACKGROUND (context=page)
   ══════════════════════════════════ */
.pym-auth--glassui.pym-auth--page {
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--glass-page-bg) !important;
	overflow: hidden !important;
	padding: 24px !important;
}

/* Full-page background image */
.pym-auth--glassui.pym-auth--page .glassui-bg {
	background: url('image/BodyImageGlass.png') no-repeat center center !important;
	background-size: cover !important;
}

/* Background layers */
.pym-auth--glassui .glassui-bg {
	position: fixed !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
}

/* Background sub-layers hidden — image handles everything */
.pym-auth--glassui .glassui-bg__gradient,
.pym-auth--glassui .glassui-bg__radial,
.pym-auth--glassui .glassui-bg__lines {
	display: none !important;
}

/* Ambient light */
.pym-auth--glassui .glassui-ambient {
	position: fixed !important;
	width: 600px !important;
	height: 600px !important;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 70%) !important;
	top: -200px !important;
	left: -200px !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

/* Corner glow */
.pym-auth--glassui .glassui-corner-glow {
	position: fixed !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 500px !important;
	height: 500px !important;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.04) 0%, transparent 70%) !important;
	border-radius: 50% !important;
	filter: blur(120px) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* ── Glass Card ── */
.pym-auth--glassui .pym-auth__card {
	position: relative !important;
	z-index: 10 !important;
	width: 100% !important;
	max-width: max(var(--pym-form-width), 520px) !important;
	margin: 0 auto !important;
	background: var(--glass-bg) !important;
	backdrop-filter: blur(var(--glass-blur)) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--pym-card-radius) !important;
	box-shadow: var(--glass-shadow) !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.pym-auth--glassui .glassui-card__inner {
	position: relative !important;
	z-index: 2 !important;
	padding: 40px 36px 36px !important;
}

/* Card glow effects */
.pym-auth--glassui .glassui-card__glow {
	position: absolute !important;
	width: 192px !important;
	height: 192px !important;
	border-radius: 50% !important;
	filter: blur(60px) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.pym-auth--glassui .glassui-card__glow--top {
	top: -96px !important;
	right: -96px !important;
	background: rgba(212, 175, 55, 0.08) !important;
}

.pym-auth--glassui .glassui-card__glow--bottom {
	bottom: -96px !important;
	left: -96px !important;
	background: rgba(59, 130, 246, 0.04) !important;
}

/* ── Steps ── */
.pym-auth--glassui .pym-auth__step {
	display: none !important;
}

.pym-auth--glassui .pym-auth__step--active {
	display: block !important;
}

/* Animations */
.pym-auth--glassui.pym-animate .pym-auth__step--active {
	animation: pymGlassFadeSlide 0.35s ease both;
}

@keyframes pymGlassFadeSlide {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Header ── */
.pym-auth--glassui .pym-auth__header {
	text-align: center !important;
	margin-bottom: 28px !important;
}

/* Icon box */
.pym-auth--glassui .glassui-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: var(--glass-radius-md) !important;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%) !important;
	border: 1px solid var(--glass-border) !important;
	color: var(--glass-text-secondary) !important;
	margin-bottom: 24px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	transition: all 0.5s ease !important;
}

.pym-auth--glassui .glassui-icon:hover {
	transform: scale(1.05) !important;
	border-color: var(--glass-border-light) !important;
}

.pym-auth--glassui .glassui-icon svg {
	width: 28px !important;
	height: 28px !important;
}

.pym-auth--glassui .pym-auth__title {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--glass-text) !important;
	margin-bottom: 10px !important;
	line-height: 1.5 !important;
	letter-spacing: 0.02em !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.pym-auth--glassui .pym-auth__desc {
	font-size: 14px !important;
	color: var(--glass-text-secondary) !important;
	line-height: 1.8 !important;
	margin-bottom: 0 !important;
	font-weight: 300 !important;
}

/* ── Edit Phone ── */
.pym-auth--glassui .glassui-edit-phone {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 13px !important;
	color: var(--glass-text-secondary) !important;
	background: none !important;
	border: none !important;
	border-bottom: 1px dashed var(--glass-text-muted) !important;
	cursor: pointer !important;
	font-family: inherit !important;
	padding: 2px 4px !important;
	transition: all var(--glass-transition) !important;
}

.pym-auth--glassui .glassui-edit-phone:hover {
	color: var(--glass-text) !important;
	border-bottom-color: var(--glass-text) !important;
}

.pym-auth--glassui .pym-auth__phone-display {
	font-weight: 700 !important;
	color: var(--glass-text) !important;
	direction: ltr !important;
	unicode-bidi: embed !important;
	font-family: monospace, inherit !important;
}

/* ── Fields ── */
.pym-auth--glassui .pym-auth__field {
	margin-bottom: 20px !important;
}

.pym-auth--glassui .pym-auth__label {
	display: block !important;
	text-align: right !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--glass-text-secondary) !important;
	margin-bottom: 8px !important;
	margin-right: 4px !important;
	transition: color var(--glass-transition) !important;
}

.pym-auth--glassui .pym-auth__field:focus-within .pym-auth__label {
	color: var(--glass-accent) !important;
}

.pym-auth--glassui .pym-auth__input-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}

.pym-auth--glassui .glassui-input {
	width: 100% !important;
	padding: 16px !important;
	padding-right: 48px !important;
	font-size: 16px !important;
	font-family: 'Courier New', monospace, inherit !important;
	color: var(--glass-text) !important;
	background: var(--glass-input-bg) !important;
	border: 1px solid var(--glass-input-border) !important;
	border-radius: var(--glass-radius-sm) !important;
	outline: none !important;
	transition: all var(--glass-transition) !important;
	direction: ltr !important;
	text-align: left !important;
	letter-spacing: 0.15em !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.pym-auth--glassui .glassui-input:focus {
	background: rgba(0, 0, 0, 0.5) !important;
	border-color: var(--glass-input-focus-border) !important;
	box-shadow: var(--glass-input-focus-shadow) !important;
}

.pym-auth--glassui .glassui-input::placeholder {
	color: var(--glass-text-muted) !important;
	font-size: 15px !important;
	letter-spacing: 0.12em !important;
}

/* RTL inputs (name, etc.) */
.pym-auth--glassui .pym-auth__input--rtl.glassui-input {
	direction: rtl !important;
	text-align: right !important;
	padding-right: 16px !important;
	padding-left: 48px !important;
	font-family: inherit !important;
	letter-spacing: normal !important;
}

.pym-auth--glassui .glassui-input-icon {
	position: absolute !important;
	right: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--glass-text-muted) !important;
	pointer-events: none !important;
	display: flex !important;
}

.pym-auth--glassui .pym-auth__input--rtl + .glassui-input-icon {
	right: auto !important;
	left: 16px !important;
}

/* ── OTP Inputs ── */
.pym-auth--glassui .glassui-otp-wrap {
	display: flex !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
	direction: ltr !important;
}

.pym-auth--glassui .glassui-otp-input {
	width: 52px !important;
	height: 60px !important;
	text-align: center !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	color: #111 !important;
	background: #ffffff !important;
	border: 2px solid transparent !important;
	border-radius: var(--glass-radius-sm) !important;
	outline: none !important;
	transition: all var(--glass-transition) !important;
	caret-color: var(--glass-accent) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 0 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.pym-auth--glassui .glassui-otp-input:focus {
	border-color: var(--glass-text) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
	background: #ffffff !important;
}

.pym-auth--glassui .glassui-otp-input.filled {
	background: #ffffff !important;
}

/* ── Timer ── */
.pym-auth--glassui .glassui-timer-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 24px !important;
	padding: 0 4px !important;
	min-height: 28px !important;
}

.pym-auth--glassui .glassui-timer {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--glass-text-secondary) !important;
	font-family: monospace, inherit !important;
}

.pym-auth--glassui .pym-auth__resend,
.pym-auth--glassui .glassui-resend {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--glass-text-secondary) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	padding: 4px 0 !important;
	transition: color var(--glass-transition) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.pym-auth--glassui .pym-auth__resend:hover,
.pym-auth--glassui .glassui-resend:hover {
	color: var(--glass-text) !important;
}

.pym-auth--glassui .pym-auth__resend:disabled {
	opacity: 0.4 !important;
	cursor: default !important;
}

.pym-auth--glassui .glassui-resend-wrap {
	text-align: center !important;
	margin-top: 24px !important;
}

/* ── Primary Button (white CTA) ── */
.pym-auth--glassui .glassui-btn-primary {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	padding: 16px 24px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	color: #000000 !important;
	background: #ffffff !important;
	border: none !important;
	border-radius: var(--glass-radius-sm) !important;
	cursor: pointer !important;
	transition: all var(--glass-transition) !important;
	position: relative !important;
	overflow: hidden !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

.pym-auth--glassui .glassui-btn-primary:hover {
	background: #f3f4f6 !important;
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.2) !important;
	color: #000000 !important;
}

.pym-auth--glassui .glassui-btn-primary:active {
	transform: scale(0.98) !important;
}

.pym-auth--glassui .glassui-btn-primary:disabled {
	opacity: 0.6 !important;
	cursor: default !important;
	transform: none !important;
}

/* ── Spinner ── */
.pym-auth--glassui .pym-auth__spinner {
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid rgba(0, 0, 0, 0.2) !important;
	border-top-color: #000 !important;
	border-radius: 50% !important;
	animation: pymGlassSpin 0.6s linear infinite !important;
}

@keyframes pymGlassSpin {
	to { transform: rotate(360deg); }
}

/* ── Messages ── */
.pym-auth--glassui .pym-auth__message {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 16px !important;
	border-radius: var(--glass-radius-sm) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin-bottom: 16px !important;
	animation: pymGlassFadeIn 0.25s ease-out !important;
}

.pym-auth--glassui .pym-auth__message--success {
	background: rgba(52, 211, 153, 0.15) !important;
	color: var(--glass-success) !important;
	border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

.pym-auth--glassui .pym-auth__message--error {
	background: rgba(248, 113, 113, 0.15) !important;
	color: var(--glass-error) !important;
	border: 1px solid rgba(248, 113, 113, 0.2) !important;
}

.pym-auth--glassui .pym-auth__message svg {
	flex-shrink: 0 !important;
	width: 18px !important;
	height: 18px !important;
}

@keyframes pymGlassFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ── Footer Links ── */
.pym-auth--glassui .glassui-footer-links {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 28px !important;
	width: 100% !important;
}

.pym-auth--glassui .glassui-link-help {
	font-size: 12px !important;
	color: var(--glass-text-secondary) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	padding: 4px 0 !important;
	transition: color var(--glass-transition) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.pym-auth--glassui .glassui-link-help:hover {
	color: var(--glass-text) !important;
}

.pym-auth--glassui .glassui-link-help svg {
	opacity: 0.5 !important;
	transition: opacity var(--glass-transition) !important;
}

.pym-auth--glassui .glassui-link-help:hover svg {
	opacity: 1 !important;
}

/* Divider */
.pym-auth--glassui .glassui-divider {
	width: 100% !important;
	height: 1px !important;
	background: linear-gradient(to right, transparent, var(--glass-border), transparent) !important;
}

.pym-auth--glassui .glassui-link-email {
	font-size: 14px !important;
	color: var(--glass-text-secondary) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color var(--glass-transition) !important;
	cursor: pointer !important;
}

.pym-auth--glassui .glassui-link-email:hover {
	color: var(--glass-accent) !important;
}

/* Google Login */
.pym-auth--glassui .glassui-link-google {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--glass-text-secondary) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	padding: 4px 0 !important;
	transition: color var(--glass-transition) !important;
}

.pym-auth--glassui .glassui-link-google:hover {
	color: var(--glass-text) !important;
}

/* ── Privacy Note ── */
.pym-auth--glassui .glassui-privacy-note {
	text-align: center !important;
	font-size: 12px !important;
	color: var(--glass-text-muted) !important;
	margin-bottom: 20px !important;
}

/* ── Footer (Secured by) ── */
.pym-auth--glassui .glassui-footer {
	position: relative !important;
	z-index: 10 !important;
	margin-top: 32px !important;
	text-align: center !important;
}

.pym-auth--glassui .glassui-footer__text {
	font-size: 10px !important;
	color: var(--glass-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.2em !important;
	opacity: 0.4 !important;
	transition: opacity var(--glass-transition) !important;
	cursor: default !important;
}

.pym-auth--glassui .glassui-footer__text:hover {
	opacity: 1 !important;
}

/* ── Shake Animation ── */
.pym-auth--glassui .pym-auth__shake {
	animation: pymGlassShake 0.4s ease-in-out;
}

@keyframes pymGlassShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

/* Hide number input spinners */
.pym-auth--glassui input[type=number]::-webkit-inner-spin-button,
.pym-auth--glassui input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.pym-auth--glassui input[type=number] {
	-moz-appearance: textfield !important;
}

/* ══════════════════════════════════
   RESPONSIVE: Tablet
   ══════════════════════════════════ */
@media (max-width: 768px) {
	.pym-auth--glassui .pym-auth__card {
		border-radius: var(--pym-card-radius) var(--pym-card-radius) 0 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3) !important;
	}

	.pym-auth--glassui .glassui-card__inner {
		padding: 32px 24px 24px !important;
	}

	.pym-auth--glassui .glassui-otp-input {
		width: 46px !important;
		height: 52px !important;
		font-size: 20px !important;
	}

	.pym-auth--glassui .glassui-otp-wrap {
		gap: 10px !important;
	}

	.pym-auth--glassui .glassui-footer {
		display: none !important;
	}

	/* ── Page context bottom-sheet (my-account / standalone) ── */
	/* position:fixed breaks out of any parent container (WooCommerce etc.) */
	.pym-auth--glassui.pym-auth--page {
		position: fixed !important;
		inset: 0 !important;
		z-index: 999 !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		justify-content: flex-end !important;
	}

	.pym-auth--glassui.pym-auth--page .pym-auth__card {
		max-width: 100% !important;
		width: 100% !important;
		border-radius: var(--pym-card-radius) var(--pym-card-radius) 0 0 !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: none !important;
	}
}

/* ══════════════════════════════════
   RESPONSIVE: Mobile
   ══════════════════════════════════ */
@media (max-width: 480px) {
	.pym-auth--glassui .glassui-card__inner {
		padding: 28px 20px 20px !important;
	}

	.pym-auth--glassui .pym-auth__title {
		font-size: 22px !important;
	}

	.pym-auth--glassui .glassui-otp-input {
		width: 40px !important;
		height: 46px !important;
		font-size: 18px !important;
	}

	.pym-auth--glassui .glassui-otp-wrap {
		gap: 8px !important;
	}

	.pym-auth--glassui .glassui-btn-primary {
		padding: 14px 20px !important;
		font-size: 14px !important;
	}
}

/* ══════════════════════════════════
   POPUP / BOTTOM-SHEET
   Uses .pym-popup-overlay > .pym-popup-container
   from class-pym-public.php output_login_popup().
   The shortcode inside always renders context=page,
   so we override .pym-auth--page when inside popup.
   ══════════════════════════════════ */

/* ── Glassui inside popup: reset page styles ── */
.pym-popup-overlay.pym-popup-glassui {
	--pym-popup-glass-surface: rgba(20, 20, 25, 0.92);
	--pym-popup-glass-border: rgba(255, 255, 255, 0.12);
}

.pym-popup-container .pym-auth--glassui,
.pym-popup-container .pym-auth--glassui.pym-auth--page {
	position: relative !important;
	inset: auto !important;
	z-index: auto !important;
	min-height: auto !important;
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	overflow: hidden !important;
	display: block !important;
}

/* Hide full-page elements inside popup */
.pym-popup-container .pym-auth--glassui .glassui-bg,
.pym-popup-container .pym-auth--glassui .glassui-ambient,
.pym-popup-container .pym-auth--glassui .glassui-corner-glow,
.pym-popup-container .pym-auth--glassui .glassui-footer {
	display: none !important;
}

/* Card inside popup - semi-transparent glass so glow effects show through */
.pym-popup-container .pym-auth--glassui .pym-auth__card {
	background: var(--pym-popup-glass-surface) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid var(--pym-popup-glass-border) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	max-width: 100% !important;
}

/* Dark background on popup container for glassui (base for glass blur) */
.pym-popup-overlay.pym-popup-glassui .pym-popup-container {
	background: #111827 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	overflow: hidden !important;
}

/* Close button styling for glassui dark theme */
.pym-popup-overlay.pym-popup-glassui .pym-popup-close {
	z-index: 50 !important;
	background: rgba(255, 255, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.7) !important;
}
.pym-popup-overlay.pym-popup-glassui .pym-popup-close:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
}

/* Handle bar for glassui dark theme on mobile - match card background */
.pym-popup-overlay.pym-popup-glassui .pym-popup-handle {
	background: transparent !important;
	border: 0 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.pym-popup-overlay.pym-popup-glassui .pym-popup-handle span {
	background: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile popup bottom-sheet: handle as overlay line only (no separate color strip) */
@media (max-width: 768px) {
	.pym-popup-overlay.pym-popup-glassui .pym-popup-handle {
		position: absolute !important;
		top: 8px !important;
		left: 0 !important;
		right: 0 !important;
		height: 20px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 25 !important;
	}

	.pym-popup-overlay.pym-popup-glassui .pym-popup-container .pym-auth--glassui .pym-auth__card {
		border-top-color: transparent !important;
	}
}

/* ── Standalone page (my-account / pym-auth page) ── */
.pym-standalone-wrapper .pym-auth--glassui {
	min-height: auto !important;
	height: auto !important;
	overflow: hidden !important;
}

/* ── Popup context class (inline rendering) ── */
.pym-auth--glassui.pym-auth--popup {
	min-height: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	overflow: hidden !important;
	display: block !important;
}

.pym-auth--glassui.pym-auth--popup .glassui-bg,
.pym-auth--glassui.pym-auth--popup .glassui-ambient,
.pym-auth--glassui.pym-auth--popup .glassui-corner-glow,
.pym-auth--glassui.pym-auth--popup .glassui-footer {
	display: none !important;
}

.pym-auth--glassui.pym-auth--popup .pym-auth__card {
	background: var(--glass-bg-deep) !important;
	overflow: hidden !important;
}

/* ══════════════════════════════════════
   Email Auth Styles (GlassUI)
   ══════════════════════════════════════ */

/* ── Mode Tabs (both mode) ── */
.pym-auth--glassui .pym-auth__mode-tabs {
	display: flex !important;
	gap: 0 !important;
	margin-bottom: 20px !important;
	border-radius: var(--glass-radius-sm) !important;
	overflow: hidden !important;
	border: 1px solid var(--glass-border) !important;
	background: var(--glass-input-bg) !important;
}

.pym-auth--glassui .pym-auth__mode-tab {
	flex: 1 !important;
	padding: 10px 16px !important;
	text-align: center !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--glass-text-secondary) !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	transition: all var(--glass-transition) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

.pym-auth--glassui .pym-auth__mode-tab svg {
	width: 16px !important;
	height: 16px !important;
}

.pym-auth--glassui .pym-auth__mode-tab--active {
	background: var(--glass-bg) !important;
	color: var(--glass-accent) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* ── Mode Panels ── */
.pym-auth--glassui .pym-auth__mode-panel {
	display: none !important;
}

.pym-auth--glassui .pym-auth__mode-panel--active {
	display: block !important;
}

/* ── Email Views (login/register toggle) ── */
.pym-auth--glassui .pym-auth__email-view {
	display: none !important;
}

.pym-auth--glassui .pym-auth__email-view--active {
	display: block !important;
}

/* ── Email Form Fields ── */
.pym-auth--glassui .pym-auth__email-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

.pym-auth--glassui .pym-auth__field-group {
	position: relative !important;
}

.pym-auth--glassui .pym-auth__field-group label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--glass-text-secondary) !important;
	margin-bottom: 6px !important;
}

.pym-auth--glassui .pym-auth__field-group input {
	width: 100% !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	border: 1px solid var(--glass-input-border) !important;
	border-radius: var(--glass-radius-sm) !important;
	background: var(--glass-input-bg) !important;
	color: var(--glass-text) !important;
	transition: all var(--glass-transition) !important;
	outline: none !important;
	direction: ltr !important;
	text-align: left !important;
}

.pym-auth--glassui .pym-auth__field-group input:focus {
	border-color: var(--glass-input-focus-border) !important;
	box-shadow: var(--glass-input-focus-shadow) !important;
}

.pym-auth--glassui .pym-auth__field-group input::placeholder {
	color: var(--glass-text-muted) !important;
}

.pym-auth--glassui .pym-auth__field-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
}

/* ── Password wrapper ── */
.pym-auth--glassui .pym-auth__pass-wrapper {
	position: relative !important;
}

.pym-auth--glassui .pym-auth__pass-wrapper input {
	padding-left: 44px !important;
}

.pym-auth--glassui .pym-auth__toggle-pass {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	color: var(--glass-text-muted) !important;
	padding: 4px !important;
	display: flex !important;
	align-items: center !important;
	transition: color var(--glass-transition) !important;
}

.pym-auth--glassui .pym-auth__toggle-pass:hover {
	color: var(--glass-accent) !important;
}

.pym-auth--glassui .pym-auth__toggle-pass svg {
	width: 18px !important;
	height: 18px !important;
}

/* ── Password Strength Meter ── */
.pym-auth--glassui .pym-auth__pass-strength {
	margin-top: 8px !important;
}

.pym-auth--glassui .pym-auth__pass-meter {
	width: 100% !important;
	height: 4px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 2px !important;
	overflow: hidden !important;
}

.pym-auth--glassui .pym-auth__pass-meter-fill {
	height: 100% !important;
	width: 0 !important;
	border-radius: 2px !important;
	transition: all 0.3s ease !important;
}

.pym-auth--glassui .pym-auth__pass-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	margin-top: 4px !important;
	text-align: left !important;
	direction: ltr !important;
}

/* ── Generate Password Button ── */
.pym-auth--glassui .pym-auth__generate-pass {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--glass-accent) !important;
	background: var(--glass-input-bg) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--glass-radius-sm) !important;
	cursor: pointer !important;
	transition: all var(--glass-transition) !important;
	margin-top: 4px !important;
}

.pym-auth--glassui .pym-auth__generate-pass:hover {
	background: rgba(212, 175, 55, 0.1) !important;
	border-color: var(--glass-accent) !important;
}

.pym-auth--glassui .pym-auth__generate-pass svg {
	width: 14px !important;
	height: 14px !important;
}

/* ── Email Auth Submit Button ── */
.pym-auth--glassui .pym-auth__email-submit {
	width: 100% !important;
	padding: 14px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #000 !important;
	background: var(--glass-accent) !important;
	border: none !important;
	border-radius: var(--glass-radius-sm) !important;
	cursor: pointer !important;
	transition: all var(--glass-transition) !important;
	margin-top: 4px !important;
}

.pym-auth--glassui .pym-auth__email-submit:hover {
	background: #c9a430 !important;
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
}

.pym-auth--glassui .pym-auth__email-submit:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* ── Switch Link (login ↔ register) ── */
.pym-auth--glassui .pym-auth__switch-text {
	text-align: center !important;
	font-size: 13px !important;
	color: var(--glass-text-secondary) !important;
	margin-top: 12px !important;
}

.pym-auth--glassui .pym-auth__switch-link {
	color: var(--glass-accent) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	border: none !important;
	background: none !important;
}

.pym-auth--glassui .pym-auth__switch-link:hover {
	text-decoration: underline !important;
}
