/**
 * Herobox frontend view — minimal modal and inline form.
 *
 * @since 1.6.0
 */

/* ------------------------------------------------------------------------- */
/* Overlay + modal card */
/* ------------------------------------------------------------------------- */
/* Shared show-password button (modal.css) in this skin's slate greys. */
.xgate-view--herobox {
	--xgate-reveal-color: #94a3b8;
	--xgate-reveal-color-active: #64748b;
}

.xgate-herobox-overlay {
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(4px);
}

.xgate-herobox-modal {
	position: relative;
	width: 100%;
	max-width: 400px;
	padding: 20px 24px 28px;
	font-family: var(--xgate-font);
	color: #334155;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.xgate-herobox-modal__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 32px;
	margin-bottom: 8px;
}

/* Inline embed: back row above the form (modal uses __toolbar instead). */
.xgate-herobox-nav {
	display: flex;
	align-items: center;
	min-height: 32px;
	margin-bottom: 8px;
}

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

.xgate-herobox-nav__back:hover {
	color: #64748b;
	background: #f1f5f9;
}

.xgate-herobox-modal__back,
.xgate-herobox-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #94a3b8;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.xgate-herobox-modal__back:hover,
.xgate-herobox-modal__close:hover {
	color: #64748b;
	background: #f1f5f9;
}

.xgate-herobox-modal__close {
	margin-inline-start: auto;
}

/* ------------------------------------------------------------------------- */
/* Inline embed (page form) */
/* ------------------------------------------------------------------------- */
.xgate-inline-herobox {
	max-width: 360px;
	margin-inline: auto;
	padding: 8px 0 24px;
	font-family: var(--xgate-font);
	color: #334155;
}

.xgate-inline-herobox__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.xgate-inline-herobox__brand-logo {
	max-width: 140px;
	height: auto;
}

.xgate-inline-herobox__brand-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #0f172a;
}

.xgate-inline-herobox__body {
	width: 100%;
}

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

.xgate-herobox-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #475569;
	text-align: start;
}

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

/* A flex box so the locked dial code below fills the row's full height. */
.xgate-herobox-country {
	display: flex;
	flex: 0 0 auto;
	min-width: 72px;
}

.xgate-herobox-country__combo {
	position: relative;
}

.xgate-herobox-country__search,
.xgate-herobox-country__fixed {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font-size: 0.9375rem;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-sizing: border-box;
	direction: ltr;
}

/*
 * The fixed code was an inline <span>: min-height does nothing on an inline
 * box, so it rode 18px above the number field beside it. As a centred flex
 * box it fills the row and lines up.
 */
.xgate-herobox-country__fixed {
	display: flex;
	align-items: center;
	justify-content: center;
}

.xgate-herobox-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: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

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

.xgate-herobox-country__option:hover {
	background: #f1f5f9;
}

.xgate-herobox-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 1rem;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-sizing: border-box;
}

.xgate-herobox-input::placeholder {
	color: #cbd5e1;
}

.xgate-herobox-input:focus {
	outline: none;
	border-color: var(--xgate-primary-color, #1abc9c);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--xgate-primary-color, #1abc9c) 18%, transparent);
}

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

/* ------------------------------------------------------------------------- */
/* Actions */
/* ------------------------------------------------------------------------- */
.xgate-herobox-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.xgate-herobox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 44px;
	padding: 10px 28px;
	font-size: 1rem;
	font-weight: 600;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.xgate-herobox-btn--primary {
	color: #ffffff;
	background: var(--xgate-primary-color, #1abc9c);
}

.xgate-herobox-btn--primary:hover:not(:disabled) {
	filter: brightness(0.95);
}

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

.xgate-herobox-aux {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

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

.xgate-herobox-link {
	padding: 0;
	font-size: 0.875rem;
	color: #94a3b8;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}

.xgate-herobox-link:hover {
	color: #64748b;
}

.xgate-herobox-text {
	margin: 0 0 12px;
	font-size: 0.875rem;
	color: #64748b;
	text-align: start;
}

.xgate-herobox-msg {
	margin-bottom: 12px;
	padding: 10px 12px;
	font-size: 0.875rem;
	border-radius: 8px;
}

.xgate-herobox-msg--error {
	color: var(--xgate-error-color, #dc2626);
	background: #fef2f2;
}

.xgate-herobox-msg--success {
	color: var(--xgate-success-color, #15803d);
	background: #f0fdf4;
}

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

.xgate-herobox-extra__dismiss-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: #64748b;
}

/*
 * A checkbox shares .xgate-herobox-input for its focus ring, but not the
 * text-field box: without this it took the full row width and the 48px
 * height, drew as a large empty square and squeezed "Don't ask again" onto
 * two lines.
 */
.xgate-herobox-input--checkbox {
	flex: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}

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

/* ------------------------------------------------------------------------- */
/* Inline card, Herobox login design                                         */
/*                                                                           */
/* The page form as the Herobox login screen draws it: the site mark and     */
/* name, the step's heading and lead, full-width buttons with the other      */
/* channel as a second button, one box per code character. Scoped to the     */
/* inline card (two classes deep) so the footer modal keeps its own look and */
/* a theme's reset rules for bare inputs and buttons cannot win.             */
/* ------------------------------------------------------------------------- */
.xgate-inline-herobox {
	--xgate-herobox-line: #e6e6e6;
	--xgate-herobox-ink: #2a2d33;
	--xgate-herobox-muted: #aaabad;
	--xgate-herobox-accent: #f79009;

	max-width: none;
	padding: 0;
	color: var(--xgate-herobox-ink);
}

.xgate-inline-herobox .xgate-inline-herobox__brand {
	gap: 10px;
	margin-bottom: 28px;
}

.xgate-inline-herobox .xgate-inline-herobox__brand-logo {
	width: 56px;
	height: 56px;
	max-width: none;
	object-fit: contain;
}

.xgate-inline-herobox .xgate-inline-herobox__brand-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--xgate-herobox-ink);
}

.xgate-inline-herobox .xgate-inline-herobox__head {
	margin-bottom: 20px;
	text-align: start;
}

.xgate-inline-herobox .xgate-inline-herobox__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--xgate-herobox-ink);
}

.xgate-inline-herobox .xgate-inline-herobox__lead {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--xgate-herobox-muted);
}

.xgate-inline-herobox .xgate-herobox-field__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--xgate-herobox-ink);
}

.xgate-inline-herobox .xgate-herobox-input,
.xgate-inline-herobox .xgate-herobox-country__search,
.xgate-inline-herobox .xgate-herobox-country__fixed {
	min-height: 48px;
	border: 1px solid var(--xgate-herobox-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
}

.xgate-inline-herobox .xgate-herobox-input::placeholder {
	color: var(--xgate-herobox-muted);
}

.xgate-inline-herobox .xgate-herobox-text {
	font-size: 14px;
	line-height: 1.8;
	color: var(--xgate-herobox-muted);
}

/* Buttons fill the card's width, the primary one first. */
.xgate-inline-herobox .xgate-herobox-actions {
	display: block;
	margin-top: 16px;
}

.xgate-inline-herobox .xgate-herobox-actions--secondary {
	margin-top: 10px;
}

.xgate-inline-herobox .xgate-herobox-btn {
	display: flex;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 10px 20px;
	border-radius: 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-transform: none;
	transition: filter 0.2s ease, background-color 0.2s ease;
}

.xgate-inline-herobox .xgate-herobox-btn--primary,
.xgate-inline-herobox .xgate-herobox-btn--primary:hover,
.xgate-inline-herobox .xgate-herobox-btn--primary:focus {
	border: 0;
	background: var(--xgate-primary-color, #03a9f4);
	color: #fff;
}

.xgate-inline-herobox .xgate-herobox-btn--secondary,
.xgate-inline-herobox .xgate-herobox-btn--secondary:hover,
.xgate-inline-herobox .xgate-herobox-btn--secondary:focus {
	border: 1px solid var(--xgate-herobox-line);
	background: #f5f5f5;
	color: var(--xgate-herobox-ink);
}

.xgate-inline-herobox .xgate-herobox-btn--secondary:hover:not(:disabled) {
	filter: brightness(0.97);
}

.xgate-inline-herobox .xgate-herobox-btn__icon {
	flex: 0 0 auto;
}

/* Links under the buttons: the way back to recovery in the accent blue, the switch between
   code and password in the design's orange, dotted. */
.xgate-inline-herobox .xgate-herobox-aux {
	justify-content: flex-start;
	margin-top: 16px;
}

.xgate-inline-herobox .xgate-herobox-aux--stack {
	align-items: flex-start;
	gap: 14px;
}

.xgate-inline-herobox .xgate-herobox-link {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--xgate-primary-color, #03a9f4);
	background: transparent;
}

.xgate-inline-herobox .xgate-herobox-link[data-xgate-link="recover"] {
	font-weight: 700;
}

.xgate-inline-herobox .xgate-herobox-link[data-xgate-link="switch"] {
	order: 2;
	color: var(--xgate-herobox-accent);
	text-decoration: underline dotted;
	text-underline-offset: 6px;
}

.xgate-inline-herobox .xgate-herobox-link:hover {
	filter: brightness(0.9);
}

/* The countdown sits alone, centred under the button. */
.xgate-inline-herobox .xgate-herobox-aux--resend {
	justify-content: center;
	margin-top: 10px;
}

.xgate-inline-herobox .xgate-herobox-countdown {
	font-size: 14px;
	font-weight: 600;
	color: var(--xgate-primary-color, #03a9f4);
	direction: ltr;
}

/* One box per code character, in a left-to-right row whatever the page's direction. */
.xgate-inline-herobox .xgate-herobox-otp {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 4px;
}

.xgate-inline-herobox .xgate-herobox-otp__box {
	flex: 0 1 56px;
	width: 56px;
	min-width: 0;
	height: 56px;
	padding: 0;
	border: 1px solid var(--xgate-herobox-line);
	border-radius: 14px;
	background: #fff;
	color: var(--xgate-herobox-ink);
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	box-shadow: none;
}

.xgate-inline-herobox .xgate-herobox-otp__box:focus {
	outline: none;
	border-color: var(--xgate-primary-color, #03a9f4);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--xgate-primary-color, #03a9f4) 18%, transparent);
}

.xgate-inline-herobox .xgate-herobox-otp__box.is-filled {
	border-color: color-mix(in srgb, var(--xgate-primary-color, #03a9f4) 45%, #e6e6e6);
}

/* On a phone the design gives the brand name the accent colour and the second button a tinted
   outline. */
@media (max-width: 767px) {
	.xgate-inline-herobox .xgate-inline-herobox__brand-title {
		color: var(--xgate-primary-color, #03a9f4);
	}

	.xgate-inline-herobox .xgate-herobox-btn--secondary,
	.xgate-inline-herobox .xgate-herobox-btn--secondary:hover,
	.xgate-inline-herobox .xgate-herobox-btn--secondary:focus {
		border-color: var(--xgate-primary-color, #03a9f4);
		background: #e6f6fe;
		color: var(--xgate-primary-color, #03a9f4);
	}

	.xgate-inline-herobox .xgate-herobox-otp {
		gap: 8px;
	}

	.xgate-inline-herobox .xgate-herobox-otp__box {
		height: 48px;
		font-size: 20px;
	}
}

/* The step's own back button: in the card's leading corner rather than between the heading and the
   field, pointing the way back in a right-to-left page. */
.xgate-inline-herobox {
	position: relative;
}

.xgate-inline-herobox .xgate-herobox-nav {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	z-index: 1;
	margin: 0;
}

.xgate-inline-herobox .xgate-herobox-nav__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--xgate-herobox-line);
	border-radius: 12px;
	background: #fff;
	color: var(--xgate-herobox-ink);
	cursor: pointer;
}

.xgate-inline-herobox .xgate-herobox-nav__back:hover {
	border-color: var(--xgate-primary-color, #03a9f4);
	color: var(--xgate-primary-color, #03a9f4);
}

[dir="rtl"] .xgate-inline-herobox .xgate-herobox-nav__back svg,
.rtl .xgate-inline-herobox .xgate-herobox-nav__back svg {
	transform: scaleX(-1);
}