/* Unicorn Elementor Blocks — User widget
 * Compound selectors throughout to outweigh Elementor / theme global rules.
 * All CSS variables are set per-instance via inline <style> in render(),
 * scoped to .ueb-user-modal[data-ueb-user-modal-id="<id>"].
 */

/* ------------------------------------------------------------------ Avatar */

.ueb-user {
	--ueb-user-avatar-size: 32px;
	--ueb-user-avatar-bg: #813b9f;
	--ueb-user-avatar-color: #ffffff;
	--ueb-user-avatar-border-color: #813b9f;
	--ueb-user-avatar-border-width: 2px;
	--ueb-user-avatar-gap: 3px;
	--ueb-user-icon-size: 16px;
	--ueb-user-icon-color: #494947;
	--ueb-user-icon-hit: 32px;

	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 1;
}

/* Shared avatar base — no chrome of its own. */
.ueb-user .ueb-user-avatar,
.ueb-user a.ueb-user-avatar,
.ueb-user button.ueb-user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 9999px;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font: inherit;
	box-sizing: border-box;
}

.ueb-user .ueb-user-avatar:hover,
.ueb-user .ueb-user-avatar:focus-visible {
	transform: scale(1.04);
	outline: none;
}

.ueb-user .ueb-user-avatar:focus-visible {
	box-shadow: 0 0 0 3px rgba(58, 18, 77, 0.25);
}

/* Logged-out: bare person icon, no ring, no fill. */
.ueb-user .ueb-user-avatar--icon {
	width: var(--ueb-user-icon-hit);
	height: var(--ueb-user-icon-hit);
	color: var(--ueb-user-icon-color);
}

.ueb-user .ueb-user-avatar--icon .ueb-user-avatar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ueb-user-icon-size);
	height: var(--ueb-user-icon-size);
	color: inherit;
	background: transparent;
	border-radius: 0;
}

.ueb-user .ueb-user-avatar--icon .ueb-user-avatar__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
	color: currentColor;
}

/* Logged-in: purple ring + filled circle with initials. */
.ueb-user .ueb-user-avatar--initials {
	width: calc(var(--ueb-user-avatar-size) + (var(--ueb-user-avatar-border-width) + var(--ueb-user-avatar-gap)) * 2);
	height: calc(var(--ueb-user-avatar-size) + (var(--ueb-user-avatar-border-width) + var(--ueb-user-avatar-gap)) * 2);
	padding: var(--ueb-user-avatar-gap);
	border: var(--ueb-user-avatar-border-width) solid var(--ueb-user-avatar-border-color);
	color: var(--ueb-user-avatar-color);
}

.ueb-user .ueb-user-avatar--initials .ueb-user-avatar__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ueb-user-avatar-size);
	height: var(--ueb-user-avatar-size);
	background: var(--ueb-user-avatar-bg);
	color: var(--ueb-user-avatar-color);
	border-radius: 9999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	user-select: none;
	box-sizing: border-box;
}

/* Defensive: some themes override [hidden] with display:block */
.ueb-user .ueb-user-avatar[hidden],
.ueb-user-modal[hidden] {
	display: none !important;
}

/* The <template> element should never render. */
.ueb-user template {
	display: none !important;
}

/* ------------------------------------------------------------------ Modal */

.ueb-user-modal {
	--ueb-overlay-bg: rgba(116, 119, 125, 0.7);
	--ueb-overlay-blur: 0px;
	--ueb-container-bg: #fcfcfe;
	--ueb-container-max-width: 523px;
	--ueb-container-radius: 16px;
	--ueb-container-padding: 48px;
	--ueb-container-padding-mobile: 24px;
	--ueb-tab-active: #1b1c19;
	--ueb-tab-inactive: rgba(68, 71, 76, 0.4);
	--ueb-tab-underline: #3a124d;
	--ueb-tab-gap: 32px;
	--ueb-input-bg: #f5f5f5;
	--ueb-input-border: #f2edf5;
	--ueb-input-radius: 32px;
	--ueb-input-text: #1b1c19;
	--ueb-input-placeholder: #6b7280;
	--ueb-input-focus: #3a124d;
	--ueb-label-color: #44474c;
	--ueb-primary-bg: #3a124d;
	--ueb-primary-bg-hover: #52196b;
	--ueb-primary-color: #f5f3ee;
	--ueb-primary-radius: 32px;
	--ueb-google-border: rgba(196, 198, 204, 0.3);
	--ueb-google-text: #1b1c19;
	--ueb-google-hover-bg: #f8f7f5;
	--ueb-divider-color: rgba(196, 198, 204, 0.5);
	--ueb-divider-text: #44474c;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.ueb-user-modal *,
.ueb-user-modal *::before,
.ueb-user-modal *::after {
	box-sizing: inherit;
}

.ueb-user-modal[hidden] {
	display: none;
}

.ueb-user-modal .ueb-user-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--ueb-overlay-bg);
	backdrop-filter: blur(var(--ueb-overlay-blur));
	-webkit-backdrop-filter: blur(var(--ueb-overlay-blur));
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.ueb-user-modal .ueb-user-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ueb-container-max-width);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--ueb-container-bg);
	border-radius: var(--ueb-container-radius);
	box-shadow: 0 24px 64px rgba(13, 27, 42, 0.12);
	padding: var(--ueb-container-padding);
	display: flex;
	flex-direction: column;
	gap: 40px;
	animation: ueb-user-modal-in 0.18s ease;
}

.ueb-user-modal.is-closing .ueb-user-modal__dialog {
	animation: ueb-user-modal-out 0.15s ease forwards;
}

@keyframes ueb-user-modal-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ueb-user-modal-out {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
	.ueb-user-modal .ueb-user-modal__dialog,
	.ueb-user-modal.is-closing .ueb-user-modal__dialog {
		animation: none;
	}
}

.ueb-user-modal .ueb-user-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.ueb-user-modal .ueb-user-tabs {
	display: flex;
	align-items: flex-start;
	gap: var(--ueb-tab-gap);
	margin: 0;
	padding: 0;
}

.ueb-user-modal button.ueb-user-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 6px 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--ueb-tab-inactive);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ueb-user-modal button.ueb-user-tab.is-active {
	color: var(--ueb-tab-active);
	border-bottom-color: var(--ueb-tab-underline);
}

.ueb-user-modal button.ueb-user-tab:focus-visible {
	outline: none;
	color: var(--ueb-tab-active);
}

.ueb-user-modal button.ueb-user-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 5px;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #1b1c19;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: background 0.15s ease;
}

.ueb-user-modal button.ueb-user-modal__close:hover,
.ueb-user-modal button.ueb-user-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

.ueb-user-modal button.ueb-user-modal__close svg {
	width: 14px;
	height: 14px;
	display: block;
	color: currentColor;
}

/* ------------------------------------------------------------------ Forms */

.ueb-user-modal form.ueb-user-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 100%;
}

.ueb-user-modal form.ueb-user-form[hidden] {
	display: none;
}

.ueb-user-modal .ueb-user-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.ueb-user-modal .ueb-user-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ueb-user-modal .ueb-user-label {
	display: block;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 16.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--ueb-label-color);
}

.ueb-user-modal button.ueb-user-forgot {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ueb-primary-bg);
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ueb-user-modal button.ueb-user-forgot:hover,
.ueb-user-modal button.ueb-user-forgot:focus-visible {
	text-decoration: underline;
	outline: none;
}

.ueb-user-modal input.ueb-user-input,
.ueb-user-modal input[type="email"].ueb-user-input,
.ueb-user-modal input[type="text"].ueb-user-input,
.ueb-user-modal input[type="password"].ueb-user-input {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 14px 16px;
	background: var(--ueb-input-bg);
	background-image: none;
	background-color: var(--ueb-input-bg);
	color: var(--ueb-input-text);
	border: 1px solid var(--ueb-input-border);
	border-radius: var(--ueb-input-radius);
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	text-align: left;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ueb-user-modal input.ueb-user-input::placeholder {
	color: var(--ueb-input-placeholder);
	opacity: 1;
}

.ueb-user-modal input.ueb-user-input:focus,
.ueb-user-modal input.ueb-user-input:focus-visible {
	border-color: var(--ueb-input-focus);
	outline: none;
	box-shadow: 0 0 0 3px rgba(58, 18, 77, 0.12);
}

.ueb-user-modal .ueb-user-field.has-error input.ueb-user-input {
	border-color: #d92d20;
	box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.ueb-user-modal .ueb-user-input-wrap {
	position: relative;
}

.ueb-user-modal .ueb-user-input-wrap--password input.ueb-user-input {
	padding-right: 44px;
}

.ueb-user-modal button.ueb-user-pass-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	background-color: transparent;
	background-image: none;
	color: #6b7280;
	cursor: pointer;
	border-radius: 8px;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ueb-user-modal button.ueb-user-pass-toggle:hover,
.ueb-user-modal button.ueb-user-pass-toggle:focus,
.ueb-user-modal button.ueb-user-pass-toggle:focus-visible {
	background: rgba(58, 18, 77, 0.06);
	background-color: rgba(58, 18, 77, 0.06);
	background-image: none;
	color: var(--ueb-input-text);
}

.ueb-user-modal button.ueb-user-pass-toggle:focus-visible {
	outline: 2px solid var(--ueb-input-focus);
	outline-offset: 2px;
}

.ueb-user-modal .ueb-user-pass-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
}

.ueb-user-modal .ueb-user-pass-toggle__icon[hidden] {
	display: none;
}

.ueb-user-modal .ueb-user-field__error {
	display: block;
	margin: 0;
	padding: 0 4px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #d92d20;
}

.ueb-user-modal .ueb-user-field__error[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ Buttons */

.ueb-user-modal .ueb-user-btn,
.ueb-user-modal a.ueb-user-btn,
.ueb-user-modal button.ueb-user-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: var(--ueb-primary-radius);
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	position: relative;
}

.ueb-user-modal .ueb-user-btn--primary,
.ueb-user-modal button.ueb-user-btn--primary {
	background: var(--ueb-primary-bg);
	color: var(--ueb-primary-color);
}

.ueb-user-modal .ueb-user-btn--primary:hover,
.ueb-user-modal .ueb-user-btn--primary:focus-visible {
	background: var(--ueb-primary-bg-hover);
	color: var(--ueb-primary-color);
	outline: none;
}

.ueb-user-modal .ueb-user-btn--primary[disabled],
.ueb-user-modal .ueb-user-btn--primary.is-loading {
	cursor: progress;
	opacity: 0.85;
}

.ueb-user-modal .ueb-user-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ueb-user-modal .ueb-user-btn__icon svg {
	width: 14px;
	height: 14px;
	display: block;
	color: currentColor;
}

.ueb-user-modal .ueb-user-btn--google .ueb-user-btn__icon svg {
	width: 20px;
	height: 20px;
}

.ueb-user-modal .ueb-user-btn__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ueb-user-spin 0.7s linear infinite;
}

.ueb-user-modal .ueb-user-btn.is-loading .ueb-user-btn__icon {
	display: none;
}

.ueb-user-modal .ueb-user-btn.is-loading .ueb-user-btn__spinner {
	display: inline-block;
}

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

.ueb-user-modal a.ueb-user-btn--google {
	background: transparent;
	color: var(--ueb-google-text);
	border: 1px solid var(--ueb-google-border);
	padding: 17px 16px;
}

.ueb-user-modal a.ueb-user-btn--google:hover,
.ueb-user-modal a.ueb-user-btn--google:focus-visible {
	background: var(--ueb-google-hover-bg);
	color: var(--ueb-google-text);
	outline: none;
}

.ueb-user-modal a.ueb-user-btn--google[data-disabled="1"] {
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------------------------ Divider */

.ueb-user-modal .ueb-user-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px 0;
}

.ueb-user-modal .ueb-user-divider::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--ueb-divider-color);
}

.ueb-user-modal .ueb-user-divider span {
	position: relative;
	display: inline-block;
	padding: 0 16px;
	background: var(--ueb-container-bg);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ueb-divider-text);
}

/* ------------------------------------------------------------------ Message */

.ueb-user-modal .ueb-user-message {
	display: block;
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	background: rgba(217, 45, 32, 0.08);
	color: #b42318;
}

.ueb-user-modal .ueb-user-message[hidden] {
	display: none;
}

.ueb-user-modal .ueb-user-message.is-success {
	background: rgba(18, 183, 106, 0.08);
	color: #027a48;
}

/* ------------------------------------------------------------ Recover view */

.ueb-user-modal .ueb-user-tabs[hidden],
.ueb-user-modal .ueb-user-recover-heading[hidden] {
	display: none;
}

.ueb-user-modal .ueb-user-recover-heading {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0 0 6px 0;
	border-bottom: 2px solid var(--ueb-tab-underline);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: var(--ueb-tab-active);
}

.ueb-user-modal .ueb-user-recover-intro {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--ueb-tab-active);
}

.ueb-user-modal button.ueb-user-back-login {
	display: inline-flex;
	align-self: center;
	margin: 0;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #813b9f;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ueb-user-modal button.ueb-user-back-login:hover,
.ueb-user-modal button.ueb-user-back-login:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* -------------------------------------------------------------- Turnstile */

.ueb-user-modal .ueb-user-turnstile {
	display: flex;
	justify-content: center;
	margin: 0;
}

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 600px) {
	.ueb-user-modal {
		padding: 16px;
	}

	.ueb-user-modal .ueb-user-modal__dialog {
		padding: var(--ueb-container-padding-mobile);
		gap: 28px;
		border-radius: 12px;
		max-height: calc(100dvh - 32px);
	}

	.ueb-user-modal form.ueb-user-form {
		gap: 18px;
	}

	.ueb-user-modal button.ueb-user-tab {
		font-size: 16px;
		line-height: 24px;
	}

	.ueb-user-modal input.ueb-user-input {
		font-size: 16px; /* keep ≥ 16px to suppress iOS zoom */
		padding: 12px 14px;
	}

	.ueb-user-modal .ueb-user-btn {
		padding: 14px;
		font-size: 15px;
	}
}