/**
 * Unicom auth forms — Easy Login (xoo-el) page + popup
 * Loaded late so it wins over plugin CSS.
 */

/* ---- Guest my-account page background (full viewport) ---- */
html:has(body.woocommerce-account:not(.logged-in)),
body.woocommerce-account:not(.logged-in) {
	background-color: #22273A !important;
	background-image: var(--um-auth-bg, none) !important;
	background-repeat: no-repeat !important;
	background-position: right top !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	min-height: 100% !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

body.woocommerce-account:not(.logged-in) .mt-main-wraper,
body.woocommerce-account:not(.logged-in) .mt-music-wraper {
	background: transparent !important;
	background-image: none !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

body.woocommerce-account:not(.logged-in) .mt-main-wraper {
	display: flex !important;
	flex-direction: column !important;
}

body.woocommerce-account:not(.logged-in) .mt-music-wraper {
	flex: 1 0 auto !important;
}

body.woocommerce-account:not(.logged-in) .mt-music-content-wrap,
body.woocommerce-account:not(.logged-in) .mt-music-content-wrap.mt-breadcrumb,
body.woocommerce-account:not(.logged-in) .mt-footer,
body.woocommerce-account:not(.logged-in) .mt-copyright {
	background: transparent !important;
	background-image: none !important;
}

body.woocommerce-account:not(.logged-in) .mt-footer.spacer-top {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.woocommerce-account:not(.logged-in) .mt-breadcrumb-box h1 {
	font-family: "Roboto", sans-serif !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: #fff !important;
	line-height: 1 !important;
	margin: 0 0 24px !important;
}

body.woocommerce-account .mt-breadcrumb-box ul {
	display: none !important;
}

/* ---- Inline form on my-account (xoo-el-form-inline) ---- */
body.woocommerce-account .xoo-el-form-container.xoo-el-form-inline,
body .xoo-el-form-container.xoo-el-form-inline {
	max-width: 396px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.woocommerce-account .xoo-el-form-inline .xoo-el-header,
body .xoo-el-form-inline .xoo-el-header {
	margin: 0 0 24px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

body.woocommerce-account .xoo-el-form-inline .xoo-el-section,
body .xoo-el-form-inline .xoo-el-section {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

body.woocommerce-account .xoo-el-form-inline .xoo-el-section.xoo-el-active > .xoo-el-fields,
body .xoo-el-form-inline .xoo-el-section.xoo-el-active > .xoo-el-fields {
	background: #1B2034 !important;
	border-radius: 2px !important;
	padding: 24px !important;
	border: 0 !important;
	box-sizing: border-box !important;
}

/* ---- Tabs (page + popup) ---- */
body .xoo-el-header {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	width: 100% !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

body .xoo-el-tabs {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 16px !important;
	padding: 0 !important;
	margin: 0 !important;
	width: fit-content !important;
	max-width: fit-content !important;
	flex: 0 0 auto !important;
	background: transparent !important;
	border: 0 !important;
}

body .xoo-el-tabs li {
	background: none !important;
	width: fit-content !important;
	max-width: fit-content !important;
	flex: 0 0 auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: auto !important;
	height: auto !important;
	line-height: 1 !important;
	padding: 0 0 4px !important;
	margin: 0 !important;
	color: #7680A5 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	border: 0 !important;
	border-bottom: 1px solid transparent !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	float: none !important;
	text-align: left !important;
}

body .xoo-el-tabs li.xoo-el-active {
	color: #fff !important;
	border-bottom-color: #7680A5 !important;
	background: none !important;
}

/* ---- Field groups ---- */
body .xoo-aff-group {
	width: 100% !important;
	margin: 0 0 24px !important;
	float: none !important;
	padding: 0 !important;
}

body .xoo-aff-input-group {
	position: relative !important;
	width: 100% !important;
	display: block !important;
}

body .xoo-aff-input-group input,
body .xoo-aff-input-group input.xoo-aff-field,
body .xoo-aff-input-group input.xoo-aff-text,
body .xoo-aff-input-group input.xoo-aff-email,
body .xoo-aff-input-group input.xoo-aff-password {
	border: 1px solid #7680A5 !important;
	border-radius: 2px !important;
	padding: 6px 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 36px !important;
	min-height: 36px !important;
	background: #1B2034 !important;
	color: #fff !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	outline: none !important;
}

body .xoo-aff-input-group input.xoo-aff-password {
	padding-right: 44px !important;
}

body .xoo-aff-input-group input::placeholder {
	color: #7680A5 !important;
	opacity: 1 !important;
}

body .xoo-aff-input-group input:focus::placeholder {
	color: transparent !important;
}

body span.xoo-aff-input-icon {
	display: none !important;
}

body svg.xoo-aff-input-icon-svg {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

body .xoo-aff-input-group input:focus ~ svg.xoo-aff-input-icon-svg,
body .xoo-aff-input-group input:not(:placeholder-shown) ~ svg.xoo-aff-input-icon-svg {
	opacity: 0 !important;
}

/* Figma-style labels above fields */
body .xoo-aff-group.um-has-label {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 8px !important;
}

body .um-aff-label {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding-left: 12px !important;
	margin: 0 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #7680A5 !important;
}

body .um-aff-label .um-req {
	color: #AA3E3E !important;
}

/* CSS fallback labels if JS has not run yet */
body .xoo-el-username_cont:not(.um-has-label)::before,
body .xoo-el-password_cont:not(.um-has-label)::before {
	display: block !important;
	padding-left: 12px !important;
	margin: 0 0 8px !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #7680A5 !important;
}
body .xoo-el-username_cont:not(.um-has-label)::before {
	content: "Login *" !important;
}
body .xoo-el-password_cont:not(.um-has-label)::before {
	content: "Password *" !important;
}
body .xoo-el-username_cont:not(.um-has-label),
body .xoo-el-password_cont:not(.um-has-label) {
	display: flex !important;
	flex-direction: column !important;
}

body .xoo-aff-group.um-has-label .xoo-aff-input-group {
	width: 100% !important;
}

/* ---- Password eye ---- */
body .xoo-aff-pw-toggle {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 2 !important;
	cursor: pointer !important;
}

body .xoo-aff-pwtog-show,
body .xoo-aff-pwtog-hide {
	color: #fff !important;
}

/* ---- Remember + actions ---- */
body .xoo-el-login-btm-fields,
body .xoo-aff-group.xoo-el-login-btm-fields {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

body .xoo-el-form-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

body .xoo-el-form-label span {
	color: #fff !important;
	margin: 0 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}

body input[name="xoo-el-rememberme"],
body input[name="xoo_el_reg_terms"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border: 1px solid #7680A5 !important;
	border-radius: 2px !important;
	background: #1B2034 !important;
	cursor: pointer !important;
	position: relative !important;
	margin: 0 8px 0 0 !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
}

body input[name="xoo-el-rememberme"]:checked,
body input[name="xoo_el_reg_terms"]:checked {
	background: #D840AA !important;
	border-color: #D840AA !important;
}

body input[name="xoo-el-rememberme"]:checked::after,
body input[name="xoo_el_reg_terms"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 12px !important;
	height: 9px !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.72667 7.05333L0.946667 4.27333L0 5.21333L3.72667 8.94L11.7267 0.94L10.7867 0L3.72667 7.05333Z' fill='white'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

body .xoo-el-login-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	margin: 0 !important;
}

body button.button.xoo-el-action-btn,
body .xoo-el-action-btn {
	background: #D840AA !important;
	color: #fff !important;
	font-family: "Roboto", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	min-width: 130px !important;
	width: 130px !important;
	height: 36px !important;
	line-height: 1 !important;
	padding: 0 12px !important;
	border-radius: 2px !important;
	border: 0 !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

body .xoo-el-lostpw-tgr {
	color: #7680A5 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	position: static !important;
	margin: 0 0 0 auto !important;
	margin-top: 0 !important;
	padding: 0 !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

body .xoo-el-form-login .xoo-el-lostpw-tgr,
body .xoo-el-login-actions .xoo-el-lostpw-tgr {
	margin-top: 0 !important;
	top: auto !important;
}

body .xoo-el-lostpw-tgr:hover {
	color: #fff !important;
}

/* ---- Popup / modal shell ---- */
body .xoo-el-inmodal {
	max-width: 396px !important;
	max-height: none !important;
	border-radius: 2px !important;
	border: 0 !important;
	background: #1B2034 !important;
	height: auto !important;
}

body .xoo-el-srcont,
body .xoo-el-wrap {
	background: #1B2034 !important;
	border-radius: 2px !important;
}

body .xoo-el-main {
	padding: 24px !important;
}

body .xoo-el-header {
	margin-bottom: 24px !important;
	justify-content: flex-start !important;
}

body span.xoo-el-close {
	top: 16px !important;
	right: 16px !important;
	background: none !important;
	color: #7680A5 !important;
	font-size: 24px !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ---- Register extras ---- */
body .xoo-aff-checkbox_single label {
	color: #7680A5 !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	font-size: 12px !important;
}

body .xoo-aff-checkbox_single label a {
	color: #708AED !important;
}

body .xoo-el-form-register .xoo-el-fields-cont {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}

body .xoo-el-form-register .xoo_el_reg_terms_cont {
	order: 99 !important;
	width: 100% !important;
}

body .xoo-el-form-register .xoo_el_reg_email_cont { order: 1 !important; }
body .xoo-el-form-register .xoo_el_reg_pass_cont { order: 2 !important; }
body .xoo-el-form-register .xoo_el_reg_pass_again_cont { order: 3 !important; }
body .xoo-el-form-register .xoo_el_reg_discord_cont { order: 4 !important; }
body .xoo-el-form-register .xoo_el_reg_telegram_cont { order: 5 !important; }

body .xoo-el-form-lostpw .xoo-el-form-txt {
	color: #fff !important;
	margin-bottom: 24px !important;
	display: block !important;
}

@media (max-width: 767px) {
	body.woocommerce-account:not(.logged-in),
	html:has(body.woocommerce-account:not(.logged-in)) {
		background-attachment: scroll !important;
		background-position: center top !important;
	}

	body.woocommerce-account .xoo-el-form-container.xoo-el-form-inline,
	body .xoo-el-form-container.xoo-el-form-inline {
		max-width: 100% !important;
	}
}