/**
 * Auth modal and inline form — layout, surfaces, and identity-driven accents.
 *
 * @since 1.0.0
 */

/* ------------------------------------------------------------------------- */
/* Design tokens. --xgate-primary-color is set last via wp_add_inline_style on */
/* xgate-auth-button (saved Site Identity); fallbacks here match plugin default. */
/* ------------------------------------------------------------------------- */
:root {
	--xgate-error-color: #dc2626;
	--xgate-success-color: #15803d;
	--xgate-radius-sm: 8px;
	--xgate-radius-md: 12px;
	--xgate-radius-lg: 16px;
	--xgate-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--xgate-shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
	--xgate-shadow-inline: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 10px 24px -6px rgba(15, 23, 42, 0.12);
	--xgate-primary-soft: color-mix(in srgb, var(--xgate-primary-color, #2563eb) 9%, white);
	--xgate-primary-border: color-mix(in srgb, var(--xgate-primary-color, #2563eb) 22%, #e2e8f0);
	--xgate-primary-glow: color-mix(in srgb, var(--xgate-primary-color, #2563eb) 35%, transparent);
}

[x-cloak] {
	display: none !important;
}

/* ------------------------------------------------------------------------- */
/* Modal overlay */
/* ------------------------------------------------------------------------- */
.xgate-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	padding-inline: max(20px, env(safe-area-inset-left, 0px));
	padding-block: max(20px, env(safe-area-inset-top, 0px));
	font-family: var(--xgate-font);
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
	.xgate-modal-overlay {
		backdrop-filter: none;
	}
}

/* ------------------------------------------------------------------------- */
/* Card shell */
/* ------------------------------------------------------------------------- */
.xgate-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	overflow: hidden;
	font-family: var(--xgate-font);
	color: #0f172a;
	background: #ffffff;
	border: 1px solid var(--xgate-primary-border, #e2e8f0);
	border-radius: var(--xgate-radius-lg);
	box-shadow: var(--xgate-shadow-modal);
}

@supports (background: color-mix(in srgb, red, red)) {
	.xgate-modal {
		background: color-mix(in srgb, var(--xgate-primary-color, #2563eb) 3.5%, white);
	}
}

.xgate-inline-auth__panel.xgate-modal {
	max-width: 420px;
	box-shadow: var(--xgate-shadow-inline);
}

/* Top brand strip using Site Identity color */
.xgate-modal__brand-accent {
	height: 4px;
	width: 100%;
	background: linear-gradient(
		90deg,
		var(--xgate-primary-color, #2563eb),
		color-mix(in srgb, var(--xgate-primary-color, #2563eb) 55%, white)
	);
}

@supports not (background: color-mix(in srgb, red, red)) {
	.xgate-modal__brand-accent {
		background: var(--xgate-primary-color, #2563eb);
	}
}

/* ------------------------------------------------------------------------- */
/* Header */
/* ------------------------------------------------------------------------- */
.xgate-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.35);
	background: linear-gradient(180deg, #f8fafc 0%, transparent 100%);
	background: linear-gradient(180deg, var(--xgate-primary-soft, #f8fafc) 0%, transparent 100%);
}

.xgate-inline-auth .xgate-modal__header {
	border-radius: 0;
}

.xgate-modal__title {
	margin: 0;
	flex: 1;
	min-width: 0;
	font-size: clamp(1.05rem, 2.5vw, 1.2rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: #0f172a;
}

/* Form heading alignment (card header + minimal title); mirrors brand row alignment utilities. */
.xgate-modal__header.xgate-form-title-align--start {
	justify-content: flex-start;
}

.xgate-modal__header.xgate-form-title-align--start .xgate-modal__title {
	text-align: start;
}

.xgate-modal__header.xgate-form-title-align--center {
	justify-content: center;
}

.xgate-modal__header.xgate-form-title-align--center .xgate-modal__title {
	text-align: center;
}

.xgate-modal__header.xgate-form-title-align--end {
	justify-content: flex-end;
}

.xgate-modal__header.xgate-form-title-align--end .xgate-modal__title {
	text-align: end;
}

.xgate-inline-auth__minimal-title.xgate-form-title-align--start {
	text-align: start;
}

.xgate-inline-auth__minimal-title.xgate-form-title-align--center {
	text-align: center;
}

.xgate-inline-auth__minimal-title.xgate-form-title-align--end {
	text-align: end;
}

.xgate-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--xgate-radius-sm);
	background: transparent;
	color: #64748b;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.xgate-modal__close:hover {
	background: #f1f5f9;
	color: #0f172a;
}

@supports (background: color-mix(in srgb, red, red)) {
	.xgate-modal__close:hover {
		background: color-mix(in srgb, var(--xgate-primary-color, #2563eb) 8%, white);
	}
}

.xgate-modal__close:focus-visible {
	outline: 2px solid var(--xgate-primary-color, #2563eb);
	outline-offset: 2px;
}

.xgate-modal__close-icon {
	display: block;
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.xgate-modal__close {
		transition: none;
	}
}

/* ------------------------------------------------------------------------- */
/* Body & steps */
/* ------------------------------------------------------------------------- */
.xgate-modal__body {
	padding: 20px 20px 22px;
}

.xgate-step {
	animation: xgate-step-in 0.22s ease-out;
}

@keyframes xgate-step-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.xgate-step {
		animation: none;
	}
}

.xgate-step + .xgate-step {
	margin-top: 0;
}

.xgate-auth-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

.xgate-auth-actions .xgate-btn--primary {
	width: 100%;
	justify-content: center;
	min-height: 46px;
	font-weight: 600;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------------- */
/* Fields */
/* ------------------------------------------------------------------------- */
.xgate-label {
	display: block;
	margin-bottom: 14px;
}

.xgate-label__text {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #334155;
	letter-spacing: 0.01em;
}

.xgate-text {
	margin: 0 0 14px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #475569;
}

.xgate-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	color: #0f172a;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: var(--xgate-radius-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xgate-input:hover {
	border-color: #94a3b8;
}

.xgate-input:focus {
	outline: none;
	border-color: var(--xgate-primary-color, #2563eb);
	box-shadow: 0 0 0 3px var(--xgate-primary-glow, rgba(37, 99, 235, 0.25));
}

.xgate-input::placeholder {
	color: #94a3b8;
}

.xgate-identifier-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.xgate-country-prefix {
	flex: 0 0 auto;
	min-width: 82px;
	max-width: 112px;
	position: relative;
}

.xgate-country-prefix--locked {
	min-width: 56px;
	max-width: 72px;
}

.xgate-country-prefix__combo {
	position: relative;
}

.xgate-country-prefix__search,
.xgate-country-prefix__fixed {
	display: inline-flex;
	align-items: center;
	height: 100%;
	min-height: 48px;
	padding: 0 10px;
	border: 1px solid #cbd5e1;
	border-radius: var(--xgate-radius-md);
	background: #fff;
	color: #0f172a;
	font-size: 0.875rem;
}

.xgate-country-prefix__search {
	width: 100%;
	max-width: 112px;
}

.xgate-country-prefix__list {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	z-index: 30;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	width: min( 340px, 70vw );
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: var(--xgate-radius-md);
	box-shadow: 0 10px 20px rgba( 15, 23, 42, 0.12 );
}

.xgate-country-prefix__option {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	text-align: left;
	font-size: 0.875rem;
	color: #0f172a;
	cursor: pointer;
}

.xgate-country-prefix__option:hover,
.xgate-country-prefix__option:focus {
	background: #eff6ff;
	outline: none;
}

.xgate-country-prefix__fixed {
	white-space: nowrap;
	display: flex;
	justify-content: center;
	width: 100%;
}

.xgate-input--identifier {
	flex: 1 1 auto;
}

/* OTP field: clearer code entry */
.xgate-step--otp .xgate-input {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	text-align: center;
	font-size: 1.25rem;
	padding-block: 14px;
}

/* ------------------------------------------------------------------------- */
/* Messages */
/* ------------------------------------------------------------------------- */
.xgate-msg {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
	border-radius: var(--xgate-radius-md);
	border: 1px solid transparent;
}

.xgate-msg--error {
	color: var(--xgate-error-color);
	background: color-mix(in srgb, var(--xgate-error-color) 8%, white);
	border-color: color-mix(in srgb, var(--xgate-error-color) 22%, white);
}

.xgate-msg--success {
	color: var(--xgate-success-color);
	background: color-mix(in srgb, var(--xgate-success-color) 8%, white);
	border-color: color-mix(in srgb, var(--xgate-success-color) 22%, white);
}

@supports not (background: color-mix(in srgb, red, red)) {
	.xgate-msg--error {
		background: #fef2f2;
		border-color: #fecaca;
	}

	.xgate-msg--success {
		background: #f0fdf4;
		border-color: #bbf7d0;
	}
}

/* ------------------------------------------------------------------------- */
/* Captcha slot */
/* ------------------------------------------------------------------------- */
.xgate-captcha {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: var(--xgate-radius-md);
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	font-size: 0.8125rem;
	color: #64748b;
}

/* ------------------------------------------------------------------------- */
/* Secondary row (resend / cooldown) */
/* ------------------------------------------------------------------------- */
.xgate-aux {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 14px;
	padding-top: 4px;
}

.xgate-aux .xgate-text {
	margin: 0;
	font-size: 0.8125rem;
	color: #64748b;
}

.xgate-aux--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* ------------------------------------------------------------------------- */
/* Back navigation (classic view) */
/* ------------------------------------------------------------------------- */
.xgate-auth-nav {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.xgate-auth-nav__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #64748b;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.xgate-auth-nav__back:hover {
	color: #334155;
	background: #f1f5f9;
}

/* ------------------------------------------------------------------------- */
/* Honeypot */
/* ------------------------------------------------------------------------- */
.xgate-hp {
	position: absolute;
	inset-inline-start: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------------- */
/* Inline embed */
/* ------------------------------------------------------------------------- */
.xgate-inline-auth {
	max-width: 420px;
	margin-block: 8px;
	font-family: var(--xgate-font);
}

/*
 * Xgate Auth Form Elementor widget: remove the 420px reading-width cap so the form
 * fills the widget (and parent flex layouts such as Elementor “Layout 2” columns).
 * The Gutenberg block and shortcode embeds keep the default cap above.
 */
.xgate-block-ui--form.xgate-block-ui--elementor-widget {
	width: 100%;
	box-sizing: border-box;
	align-self: stretch;
}

.xgate-block-ui--form.xgate-block-ui--elementor-widget > .xgate-inline-auth {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.xgate-block-ui--form.xgate-block-ui--elementor-widget .xgate-inline-auth__panel.xgate-modal {
	max-width: none;
	width: 100%;
}

.xgate-inline-auth__panel {
	border-radius: var(--xgate-radius-lg);
}

.xgate-inline-auth--logged-in .xgate-inline-auth__notice {
	margin: 0;
	padding: 16px 18px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #334155;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: var(--xgate-radius-md);
}

/* ------------------------------------------------------------------------- */
/* Optional site identity row (Gutenberg block / branding toggle)            */
/* ------------------------------------------------------------------------- */
.xgate-modal__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	gap: 10px;
	padding: 16px 20px 8px;
	text-align: center;
}

.xgate-modal__identity-logo {
	display: block;
	max-height: 48px;
	max-width: min(200px, 100%);
	width: auto;
	height: auto;
	margin: 0;
	object-fit: contain;
}

.xgate-modal__identity-title {
	display: block;
	width: 100%;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 650;
	color: #0f172a;
	letter-spacing: -0.01em;
	text-align: center;
}

/* Logo + site title alignment (card & minimal branding rows) */
.xgate-modal__identity.xgate-brand-align--start {
	align-items: flex-start;
	text-align: start;
}

.xgate-modal__identity.xgate-brand-align--start .xgate-modal__identity-title {
	text-align: start;
}

.xgate-modal__identity.xgate-brand-align--end {
	align-items: flex-end;
	text-align: end;
}

.xgate-modal__identity.xgate-brand-align--end .xgate-modal__identity-title {
	text-align: end;
}

.xgate-inline-auth__brand-minimal.xgate-brand-align--start {
	align-items: flex-start;
	text-align: start;
}

.xgate-inline-auth__brand-minimal.xgate-brand-align--start .xgate-inline-auth__brand-minimal-title {
	text-align: start;
}

.xgate-inline-auth__brand-minimal.xgate-brand-align--center {
	align-items: center;
	text-align: center;
}

.xgate-inline-auth__brand-minimal.xgate-brand-align--center .xgate-inline-auth__brand-minimal-title {
	text-align: center;
}

.xgate-inline-auth__brand-minimal.xgate-brand-align--end {
	align-items: flex-end;
	text-align: end;
}

.xgate-inline-auth__brand-minimal.xgate-brand-align--end .xgate-inline-auth__brand-minimal-title {
	text-align: end;
}

/* ------------------------------------------------------------------------- */
/* Block-only: hide visible labels while keeping inputs for a11y             */
/* ------------------------------------------------------------------------- */
.xgate-inline-auth--hide-labels .xgate-label__text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------------------- */
/* Gutenberg block scoped variables (wrapper: .xgate-block-ui--form)         */
/* ------------------------------------------------------------------------- */
.xgate-block-ui--form.xgate-ui--panel-bg .xgate-inline-auth .xgate-modal {
	background: var(--xgate-scoped-panel-bg);
}

.xgate-block-ui--form.xgate-ui--panel-border .xgate-inline-auth .xgate-modal {
	border-color: var(--xgate-scoped-panel-border);
}

.xgate-block-ui--form.xgate-ui--radius .xgate-inline-auth .xgate-modal,
.xgate-block-ui--form.xgate-ui--radius .xgate-inline-auth .xgate-input {
	border-radius: var(--xgate-scoped-radius, var(--xgate-radius-md));
}

.xgate-block-ui--form.xgate-ui--input-bg .xgate-inline-auth .xgate-input {
	background: var(--xgate-scoped-input-bg);
}

.xgate-block-ui--form.xgate-ui--input-color .xgate-inline-auth .xgate-input {
	color: var(--xgate-scoped-input-color);
}

.xgate-block-ui--form.xgate-ui--label-color .xgate-inline-auth .xgate-label__text {
	color: var(--xgate-scoped-label-color);
}

.xgate-block-ui--form.xgate-ui--accent .xgate-inline-auth .xgate-input:focus {
	border-color: var(--xgate-primary-color, #2563eb);
	box-shadow: 0 0 0 3px var(--xgate-primary-glow, rgba(37, 99, 235, 0.25));
}

.xgate-block-ui--form.xgate-ui--btn-bg .xgate-inline-auth .xgate-auth-actions .xgate-btn--primary {
	background: var(--xgate-scoped-btn-bg) !important;
	border-color: transparent;
}

.xgate-block-ui--form.xgate-ui--btn-color .xgate-inline-auth .xgate-auth-actions .xgate-btn--primary {
	color: var(--xgate-scoped-btn-color) !important;
}

.xgate-block-ui--form.xgate-ui--btn-shadow .xgate-inline-auth .xgate-auth-actions .xgate-btn--primary {
	box-shadow: var(--xgate-scoped-btn-shadow) !important;
}

.xgate-block-ui--form.xgate-ui--btn-shadow .xgate-inline-auth .xgate-auth-actions .xgate-btn--primary:hover:not(:disabled) {
	box-shadow: var(--xgate-scoped-btn-shadow) !important;
	filter: brightness(1.06);
}

.xgate-block-ui--form.xgate-ui--input-border-color .xgate-inline-auth .xgate-input {
	border-color: var(--xgate-scoped-input-border-color);
}

/* Input stroke width: only real fields inside the card body (never the panel shell or block root). */
.xgate-block-ui--form.xgate-ui--input-border-width .xgate-inline-auth .xgate-inline-auth__panel.xgate-modal {
	border-width: 1px;
	border-style: solid;
}

.xgate-block-ui--form.xgate-ui--input-border-width .xgate-inline-auth .xgate-modal__body input.xgate-input {
	border-width: var(--xgate-scoped-input-border-width);
	border-style: solid;
}

.xgate-block-ui--form.xgate-ui--title-color .xgate-inline-auth .xgate-modal__title {
	color: var(--xgate-scoped-title-color);
}

.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth .xgate-modal,
.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth .xgate-text,
.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth .xgate-captcha,
.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth .xgate-modal__identity-title {
	color: var(--xgate-scoped-body-color);
}

.xgate-block-ui--form.xgate-ui--input-placeholder-color .xgate-inline-auth .xgate-input::placeholder {
	color: var(--xgate-scoped-input-placeholder-color);
	opacity: 1;
}

.xgate-block-ui--form.xgate-ui--field-gap .xgate-inline-auth .xgate-label {
	margin-bottom: var(--xgate-scoped-field-gap);
}

.xgate-block-ui--form.xgate-ui--field-gap .xgate-inline-auth .xgate-label:last-of-type {
	margin-bottom: 0;
}

.xgate-block-ui--form.xgate-ui--input-padding-y .xgate-inline-auth .xgate-input {
	padding-block: var(--xgate-scoped-input-padding-y);
}

.xgate-block-ui--form.xgate-ui--input-font-size .xgate-inline-auth .xgate-input {
	font-size: var(--xgate-scoped-input-font-size);
}

/* Optional typography and logo sizing from block / Elementor (variables omitted when unset). */
.xgate-block-ui--form.xgate-ui--form-title-fs .xgate-inline-auth .xgate-modal__title,
.xgate-block-ui--form.xgate-ui--form-title-fs .xgate-inline-auth .xgate-inline-auth__minimal-title {
	font-size: var(--xgate-scoped-form-title-font-size) !important;
}

.xgate-block-ui--form.xgate-ui--brand-site-title-fs .xgate-inline-auth .xgate-modal__identity-title,
.xgate-block-ui--form.xgate-ui--brand-site-title-fs .xgate-inline-auth .xgate-inline-auth__brand-minimal-title {
	font-size: var(--xgate-scoped-brand-site-title-font-size) !important;
}

.xgate-block-ui--form.xgate-ui--brand-logo-size .xgate-inline-auth .xgate-modal__identity-logo,
.xgate-block-ui--form.xgate-ui--brand-logo-size .xgate-inline-auth .xgate-inline-auth__brand-minimal-logo {
	max-height: var(--xgate-scoped-brand-logo-max-height);
	width: auto;
}

.xgate-block-ui--form.xgate-ui--label-font-size .xgate-inline-auth .xgate-label__text {
	font-size: var(--xgate-scoped-label-font-size);
}

.xgate-block-ui--form.xgate-ui--btn-font-size .xgate-inline-auth .xgate-auth-actions .xgate-btn--primary {
	font-size: var(--xgate-scoped-btn-font-size);
}

/* ------------------------------------------------------------------------- */
/* Layout: minimal — flat shell; card shadow / panel chrome come from builder */
/* ------------------------------------------------------------------------- */
.xgate-inline-auth--layout-minimal {
	margin-block: 4px;
}

.xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-shell {
	position: relative;
	width: 100%;
	/* max-width: 420px; */
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.xgate-inline-auth--layout-minimal .xgate-inline-auth__brand-minimal {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
}

.xgate-inline-auth--layout-minimal .xgate-inline-auth__brand-minimal-logo {
	display: block;
	max-width: min(200px, 100%);
	max-height: 40px;
	width: auto;
	height: auto;
	margin: 0;
	object-fit: contain;
}

.xgate-inline-auth--layout-minimal .xgate-inline-auth__brand-minimal-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0f172a;
}

.xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-title {
	margin: 0 0 12px;
	padding: 0;
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	font-weight: 650;
	color: #0f172a;
	line-height: 1.25;
	background: transparent;
	border: none;
}

.xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-body {
	padding: 0;
	margin: 0;
}

.xgate-inline-auth--layout-minimal .xgate-auth-actions {
	margin-top: 14px;
}

/* Scoped panel surface maps to the minimal shell when colors are set in the block. */
.xgate-block-ui--form.xgate-ui--panel-bg .xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-shell {
	background: var(--xgate-scoped-panel-bg);
}

.xgate-block-ui--form.xgate-ui--panel-border .xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-shell {
	border-width: 1px;
	border-style: solid;
	border-color: var(--xgate-scoped-panel-border);
}

.xgate-block-ui--form.xgate-ui--radius .xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-shell,
.xgate-block-ui--form.xgate-ui--radius .xgate-inline-auth--layout-minimal .xgate-input {
	border-radius: var(--xgate-scoped-radius, var(--xgate-radius-md));
}

.xgate-block-ui--form.xgate-ui--title-color .xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-title {
	color: var(--xgate-scoped-title-color);
}

.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-shell,
.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth--layout-minimal .xgate-text,
.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth--layout-minimal .xgate-captcha,
.xgate-block-ui--form.xgate-ui--body-color .xgate-inline-auth--layout-minimal .xgate-inline-auth__brand-minimal-title {
	color: var(--xgate-scoped-body-color);
}

.xgate-block-ui--form.xgate-ui--input-border-width .xgate-inline-auth--layout-minimal .xgate-inline-auth__minimal-body input.xgate-input {
	border-width: var(--xgate-scoped-input-border-width);
	border-style: solid;
}

/* After-OTP field stack: primary control plus optional per-field dismiss row. */
.xgate-extra-field {
	margin-bottom: 1rem;
}

.xgate-extra-field__dismiss {
	margin-top: 0.35rem;
}

.xgate-extra-field__dismiss-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.xgate-input--checkbox {
	width: auto;
	max-width: none;
	margin: 0;
}

/* ------------------------------------------------------------------------- */
/* Shared field behaviour — every skin opts in through these classes           */
/* ------------------------------------------------------------------------- */

/*
 * A mobile number, an email address, a one-time code and a password are all
 * typed left to right whatever the interface language — in an RTL field the
 * caret jumps around "@", "." and "+" and the start of the value scrolls out
 * of sight. Only the typed value flips: while the field is empty its
 * placeholder is ordinary interface text and keeps the page's direction.
 */
.xgate-ltr-row {
	direction: ltr;
}

.xgate-ltr-input {
	direction: ltr;
	text-align: left;
}

[dir="rtl"] .xgate-ltr-input:placeholder-shown {
	direction: rtl;
	text-align: right;
}

/*
 * Typed values also leave the page font. Persian sites commonly ship a
 * "FaNum" face that draws 0-9 as Persian digits, which is harmless in prose
 * but wrong here: a revealed password showing "۱۲۳" for "123" hides whether
 * Persian or Latin digits were typed — different characters, different
 * password. Not --xgate-font: "use the theme font" repoints that one. The
 * element selectors are there to outrank a skin's own font on the same
 * field (hero sets one on its country input).
 */
.xgate-ltr-input:not(:placeholder-shown),
input.xgate-latin-digits,
span.xgate-latin-digits {
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Password field with a show-password button — partials/password-field.php. */
.xgate-password {
	position: relative;
}

/* Physical on purpose: the value is always left to right (above), so the
   button always sits at the right end of the field and needs its room there
   whichever way the placeholder currently runs. Two classes so it outranks a
   skin's own input padding whatever order the stylesheets load in. */
.xgate-password .xgate-password__input {
	padding-right: 46px;
}

/* Edge draws its own reveal eye inside password fields; one is enough. */
.xgate-password__input::-ms-reveal {
	display: none;
}

.xgate-password__reveal {
	position: absolute;
	top: 50%;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px: comfortably tappable without crowding the field. */
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--xgate-reveal-color, #9aa1ae);
	background: transparent;
	border: 0;
	border-radius: var(--xgate-radius-sm);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 0.15s ease;
	/* The icon swap is the feedback; mobile's tap flash painted a blue square
	   over the field's edge on top of it. */
	-webkit-tap-highlight-color: transparent;
}

.xgate-password__reveal:hover,
.xgate-password__reveal[aria-pressed="true"] {
	color: var(--xgate-reveal-color-active, #6b7280);
}

.xgate-password__reveal:focus-visible {
	outline: 2px solid var(--xgate-primary-color, #3d7bf0);
	outline-offset: -2px;
}