/**
 * Simple frontend view — matches themes/html/login.html (the HERO AI design
 * reference): white card, gradient primary button, underline tabs, code
 * input. Tokens below are copied 1:1 from that reference's variables.css
 * (--blue-500, --violet-500, --grad-brand, --r-md, --sh-brand, ...) so the
 * card reads as on-brand without pulling in the reference's own stylesheet.
 *
 * Loaded after xgate-auth-modal (shared shell, honeypot, captcha container)
 * the same way herobox.css / hero.css are — see
 * FrontendAssets::register_assets(). Only adds what this skin needs; nothing
 * here overrides herobox, hero, or classic.
 *
 * The reference's split OTP boxes are now reproduced (auto-advance, paste
 * splitting, arrow/backspace navigation) — the behaviour lives in
 * auth-engine.js and is shared by every skin; only the look is here. How many
 * boxes render follows the admin OTP "Code Format" length, so it is not
 * always the reference's five.
 *
 * One thing the reference has that this skin still does not reproduce: its
 * full-page two-column layout (gradient marketing panel beside the card) is a
 * page-template concern, not a shortcode/modal one.
 *
 * @since 1.7.0
 */

.xgate-view--simple {
	--xgate-simple-accent: var(--xgate-primary-color, #3d7bf0);
	--xgate-simple-grad: linear-gradient(135deg, #12b5c9 0%, var(--xgate-simple-accent) 48%, #8b4fd9 100%);
	--xgate-simple-text: #1a1d29;
	--xgate-simple-text-2: #6b7280;
	--xgate-simple-text-3: #9aa1ae;
	--xgate-simple-border: #e7e9ef;
	--xgate-simple-surface: #ffffff;
	--xgate-simple-danger: #e0453c;
	--xgate-simple-danger-bg: #fdeceb;
	--xgate-simple-success: #12a56e;
	--xgate-simple-success-bg: #e6f7f0;
	--xgate-simple-r-sm: 8px;
	--xgate-simple-r-md: 12px;
	--xgate-simple-r-lg: 16px;
	font-family: var(--xgate-font);
	color: var(--xgate-simple-text);
}

/* ------------------------------------------------------------------------- */
/* Overlay + modal card                                                      */
/* ------------------------------------------------------------------------- */
.xgate-simple-overlay {
	background: rgba(26, 29, 41, 0.45);
	backdrop-filter: blur(4px);
}

.xgate-simple-modal {
	position: relative;
	width: 100%;
	max-width: 400px;
	padding: 28px;
	background: var(--xgate-simple-surface);
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-lg);
	box-shadow: 0 16px 44px rgba(26, 29, 41, 0.16);
}

.xgate-simple-modal__close {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--xgate-simple-text-3);
	background: transparent;
	border: 0;
	border-radius: var(--xgate-simple-r-sm);
	cursor: pointer;
}

.xgate-simple-modal__close:hover {
	color: var(--xgate-simple-text-2);
	background: #f8f9fb;
}

.xgate-simple-modal__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}

.xgate-simple-modal__body {
	text-align: start;
}

/* ------------------------------------------------------------------------- */
/* Inline embed (page form) — same card, no overlay/close button             */
/* ------------------------------------------------------------------------- */
.xgate-inline-simple {
	max-width: 400px;
	margin-inline: auto;
	padding: 24px;
	background: var(--xgate-simple-surface);
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-lg);
	box-shadow: 0 2px 8px rgba(26, 29, 41, 0.05);
}

.xgate-inline-simple__brand {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.xgate-inline-simple__brand-logo {
	height: 46px;
	width: auto;
}

.xgate-inline-simple__brand-title {
	font-size: 1.125rem;
	font-weight: 700;
}

.xgate-inline-simple__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}

.xgate-inline-simple__body {
	width: 100%;
	text-align: start;
}

/* ------------------------------------------------------------------------- */
/* Fields                                                                     */
/* ------------------------------------------------------------------------- */
.xgate-simple-field {
	display: block;
	margin-bottom: 16px;
}

.xgate-simple-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--xgate-simple-text);
	text-align: start;
}

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

.xgate-simple-country {
	flex: 0 0 76px;
}

.xgate-simple-country__combo {
	position: relative;
	width: 100%;
}

.xgate-simple-country__search,
.xgate-simple-country__fixed {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 11px 8px;
	font-size: 0.9375rem;
	color: var(--xgate-simple-text);
	background: var(--xgate-simple-surface);
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-md);
	box-sizing: border-box;
	/* No intrinsic width without this — a bare text input falls back to the
	 * browser's native ~20-character default, dwarfing a 2-4 char dial code. */
	direction: ltr;
	text-align: center;
}

.xgate-simple-country__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	inset-inline-start: 0;
	min-width: 220px;
	max-height: 200px;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	background: var(--xgate-simple-surface);
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-md);
	box-shadow: 0 6px 20px rgba(26, 29, 41, 0.07);
}

.xgate-simple-country__option {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 0.875rem;
	text-align: start;
	color: var(--xgate-simple-text);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.xgate-simple-country__option:hover {
	background: #f8f9fb;
}

.xgate-simple-input {
	display: block;
	width: 100%;
	padding: 11px 14px;
	font-size: 0.9375rem;
	color: var(--xgate-simple-text);
	background: var(--xgate-simple-surface);
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-md);
	box-sizing: border-box;
}

.xgate-simple-input::placeholder {
	color: var(--xgate-simple-text-3);
}

.xgate-simple-input:focus {
	outline: none;
	border-color: var(--xgate-simple-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--xgate-simple-accent) 13%, transparent);
}

.xgate-simple-identifier .xgate-simple-input {
	flex: 1 1 auto;
	min-width: 0;
}

.xgate-simple-input--checkbox {
	width: auto;
	min-height: 0;
}

/* ------------------------------------------------------------------------- */
/* Code input (OTP): one box per character                                    */
/* ------------------------------------------------------------------------- */
/* dir="ltr" is on the row in the template, not here: a code reads left to
   right in the RTL interface too, and auth-engine.js maps the arrow keys to
   box positions literally on that basis. */
.xgate-simple-otp {
	display: flex;
	gap: 8px;
	justify-content: center;
}

/* Boxes share the row rather than claiming a fixed width, so an eight-character
   code still fits the 400px card instead of overflowing it. */
.xgate-simple-otp__box {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	max-width: 56px;
	height: 56px;
	padding: 0;
	font-family: inherit;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--xgate-simple-text);
	text-align: center;
	background: var(--xgate-simple-surface);
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-md);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.xgate-simple-otp__box:focus {
	outline: none;
	border-color: var(--xgate-simple-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--xgate-simple-accent) 18%, transparent);
}

/* Toggled from Alpine (is-filled) rather than :placeholder-shown — the boxes
   carry no placeholder to key that pseudo-class off. */
.xgate-simple-otp__box.is-filled {
	color: #ffffff;
	background: var(--xgate-simple-grad);
	border-color: transparent;
}

/* ------------------------------------------------------------------------- */
/* Header: heading plus the back control                                      */
/* ------------------------------------------------------------------------- */
/*
 * The back button is taken out of flow so the heading stays optically centred
 * in the card whether or not the current step offers a way back — a flex row
 * would shift the title sideways the moment the button appears.
 */
.xgate-simple-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin-bottom: 20px;
}

.xgate-simple-head__title {
	/* Room for the control at both ends so a long heading never slides under it. */
	padding-inline: 46px;
}

.xgate-simple-back {
	position: absolute;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--xgate-simple-text-2);
	background: #ffffff;
	border: 1px solid var(--xgate-simple-border);
	border-radius: var(--xgate-simple-r-sm);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.xgate-simple-back:hover:not(:disabled) {
	color: var(--xgate-simple-text);
	background: #f8f9fb;
}

.xgate-simple-back:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Physical on purpose: "previous" points the other way once the page flips. */
[dir="rtl"] .xgate-simple-back__icon {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------------- */
/* Actions                                                                    */
/* ------------------------------------------------------------------------- */
.xgate-simple-actions {
	margin-top: 4px;
}

.xgate-simple-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 20px;
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: var(--xgate-simple-r-md);
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.24s ease, background-position 0.24s ease;
}

.xgate-simple-btn--primary {
	color: #ffffff;
	background: var(--xgate-simple-grad);
	background-size: 160% 160%;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--xgate-simple-accent) 26%, transparent);
}

.xgate-simple-btn--primary:hover:not(:disabled) {
	background-position: 100% 0;
	box-shadow: 0 14px 32px rgba(139, 79, 217, 0.3);
}

.xgate-simple-btn--primary:active:not(:disabled) {
	transform: translateY(1px);
}

.xgate-simple-btn--primary:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Secondary actions inside a step (change identifier, resend): sized to their
   own text instead of the full-width primary button. */
.xgate-simple-btn--ghost {
	width: auto;
	color: var(--xgate-simple-text-2);
	background: transparent;
	border-color: var(--xgate-simple-border);
}

.xgate-simple-btn--ghost:hover:not(:disabled) {
	color: var(--xgate-simple-text);
	background: #f8f9fb;
}

.xgate-simple-btn--ghost:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.xgate-simple-btn--sm {
	gap: 6px;
	padding: 7px 12px;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: var(--xgate-simple-r-sm);
	white-space: nowrap;
}

/* Deliberate physical flip: the arrow points at the direction of travel, which
   really does reverse with the writing direction (unlike layout, which uses
   logical properties throughout this file). */
[dir="rtl"] .xgate-simple-btn__icon {
	transform: scaleX(-1);
}

.xgate-simple-aux {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

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

/* Prompt at the start, button at the end — both stay put through the cooldown
   so the row does not reflow every time the countdown ends. */
.xgate-simple-aux--resend {
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Switching verifier is a quieter offer than resending, so it sits on its own
   line below the resend row rather than competing with it. */
.xgate-simple-aux--switch {
	margin-top: 10px;
}

.xgate-simple-link {
	padding: 0;
	font-size: 0.8125rem;
	color: var(--xgate-simple-accent);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}

.xgate-simple-link:hover {
	text-decoration: underline;
}

.xgate-simple-text {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	color: var(--xgate-simple-text-2);
	text-align: center;
}

.xgate-simple-text--inline {
	margin: 0;
	text-align: start;
}

.xgate-simple-msg {
	margin-bottom: 12px;
	padding: 10px 12px;
	font-size: 0.8125rem;
	text-align: start;
	border-radius: var(--xgate-simple-r-sm);
}

.xgate-simple-msg--error {
	color: var(--xgate-simple-danger);
	background: var(--xgate-simple-danger-bg);
}

.xgate-simple-msg--success {
	color: var(--xgate-simple-success);
	background: var(--xgate-simple-success-bg);
}

.xgate-simple-extra {
	margin-bottom: 12px;
}

.xgate-simple-extra__dismiss-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	color: var(--xgate-simple-text-2);
}

/* ------------------------------------------------------------------------- */
/* Security tips popover                                                     */
/* ------------------------------------------------------------------------- */
.xgate-simple-security {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.xgate-simple-security__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 0.75rem;
	color: var(--xgate-simple-text-2);
	cursor: pointer;
	background: #f8f9fb;
	border: 0;
	border-radius: 999px;
}

.xgate-simple-security__toggle:hover {
	color: var(--xgate-simple-text);
	background: #eef0f4;
}

.xgate-simple-security__panel {
	position: absolute;
	z-index: 10;
	top: calc(100% + 8px);
	inset-inline-start: 50%;
	width: 240px;
	padding: 12px 14px;
	background: var(--xgate-simple-text);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(26, 29, 41, 0.2);
	transform: translateX(-50%);
}

[dir="rtl"] .xgate-simple-security__panel {
	transform: translateX(50%);
}

.xgate-simple-security__panel p {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #f8f9fb;
	text-align: center;
}

/* RTL: logical properties above keep layout correct; reinforce direction on shells. */
[dir="rtl"] .xgate-simple-modal,
[dir="rtl"] .xgate-inline-simple,
.xgate-view--simple[dir="rtl"] .xgate-simple-modal {
	direction: rtl;
}