/* SarvTheme auth.css — built from modules. Edit modules + run npm run build */

/* --- captcha.css --- */
/**
 * SarvTheme — global captcha / reCAPTCHA UI.
 *
 * Shared by Auth, Blog comments, and any other form that renders
 * `Auth/templates/components/captcha.php` (`.st-auth-captcha`).
 *
 * Tokens prefer Auth context vars when present, then theme tokens.
 */

.st-auth-captcha {
  --st-captcha-border: var(--sarv-auth-border, var(--st-color-border, #e2e8f0));
  --st-captcha-bg: var(--sarv-auth-input-bg, #f8fafc);
  --st-captcha-radius: var(--sarv-auth-radius, 12px);
  --st-captcha-brand: var(--sarv-auth-brand, var(--st-color-primary, #90c742));
  --st-captcha-brand-soft: var(--sarv-auth-brand-soft, color-mix(in srgb, var(--st-captcha-brand) 14%, #fff));
  --st-captcha-text: var(--sarv-auth-text, var(--st-text, #0f172a));
  --st-captcha-muted: var(--sarv-auth-muted, color-mix(in srgb, var(--st-captcha-text) 55%, transparent));
  --st-captcha-focus-ring: color-mix(in srgb, var(--st-captcha-brand) 28%, transparent);

  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.st-auth-captcha__simple {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.st-auth-captcha .st-auth-field__label {
  display: block;
  margin-block-end: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--st-captcha-text);
}

.st-auth-captcha .st-auth-field__required {
  color: #dc2626;
  margin-inline-start: 0.15rem;
}

.st-auth-captcha__control {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-direction: row-reverse;
  min-height: 3rem;
  border: 1px solid var(--st-captcha-border);
  border-radius: var(--st-captcha-radius);
  background: var(--st-captcha-bg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.st-auth-captcha__control:focus-within {
  border-color: var(--st-captcha-brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--st-captcha-focus-ring);
}

.st-auth-captcha__image {
  display: block;
  flex: 0 0 auto;
  width: 120px;
  height: auto;
  max-height: 100%;
  align-self: center;
  margin: 0.25rem;
  border: 0;
  border-radius: calc(var(--st-captcha-radius) - 4px);
  background: #fff;
  object-fit: contain;
}

.st-auth-captcha__input.st-auth-field__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--st-captcha-text);
  font: inherit;
  padding-block: 0.75rem;
  padding-inline: 0.65rem 2.75rem;
  text-align: right;
}

.st-auth-captcha__input.st-auth-field__input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.st-auth-captcha__refresh,
button.st-auth-captcha__refresh {
  position: absolute;
  inset-inline-end: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--st-captcha-muted);
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  gap: 0;
}

.st-auth-captcha__refresh:hover,
.st-auth-captcha__refresh:focus-visible,
button.st-auth-captcha__refresh:hover,
button.st-auth-captcha__refresh:focus-visible,
button.st-auth-captcha__refresh:active {
  background: var(--st-captcha-brand-soft);
  color: var(--st-captcha-text);
  outline: none;
  transform: translateY(-50%);
  box-shadow: none;
}

.st-auth-captcha__refresh-icon {
  display: block;
  flex-shrink: 0;
}

.st-auth-captcha__hint {
  margin: 0;
  color: var(--st-captcha-muted);
  font-size: 0.8125rem;
}

.st-auth-captcha__google .g-recaptcha {
  transform-origin: right center;
}

/* --- auth.css --- */
/**
 * SarvTheme Authentication — two-column SaaS layout (form + illustration).
 * Layout classes: sarv-auth-*. Form hooks keep st-auth / data-st-auth for Ajax.
 */

/* -------------------------------------------------------------------------
   Page / layout
   ------------------------------------------------------------------------- */

.sarv-auth-page {
	--sarv-auth-brand: var(--st-color-primary, #90c742);
	--sarv-auth-brand-hover: #7fb336;
	--sarv-auth-brand-soft: #f3f9ea;
	--sarv-auth-text: #0f172a;
	--sarv-auth-muted: #64748b;
	--sarv-auth-border: #e2e8f0;
	--sarv-auth-input-bg: #f8fafc;
	--sarv-auth-surface: #ffffff;
	--sarv-auth-sidebar-bg: #0b1220;
	--sarv-auth-radius: 12px;
	--sarv-auth-danger: #dc2626;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--sarv-auth-surface);
	color: var(--sarv-auth-text);
	box-shadow: none;
}

.sarv-auth-page.is-loading,
.st-auth.is-loading {
	pointer-events: none;
	opacity: 0.72;
}

/* Compact embed (header modal / dropdown) */
.sarv-auth-page--embed {
	min-height: 0;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	background: transparent;
}

.sarv-auth-form-panel--embed {
	align-items: stretch;
	justify-content: flex-start;
	min-height: 0;
	padding: 0.5rem 0.25rem 0.25rem;
	background: transparent;
}

.sarv-auth-page--embed .sarv-auth-form-panel__inner {
	max-width: none;
}

.sarv-auth-page--embed .sarv-auth-logo {
	margin-block-end: 1rem;
}

.st-auth-modal .sarv-auth-page--embed,
.st-widget-account__panel--login .sarv-auth-page--embed {
	max-width: none;
}

.st-widget-account__panel--login .sarv-auth-page--embed {
	width: min(400px, calc(100vw - 2rem));
}

.sarv-auth-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	flex: 1;
	width: 100%;
	min-height: 0;
}

.sarv-auth-form-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--sarv-auth-surface);
}

.sarv-auth-form-panel__inner {
	width: 100%;
	max-width: 420px;
}

.sarv-auth-sidebar {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	background-color: var(--sarv-auth-sidebar-bg);
}

.sarv-auth-sidebar__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sarv-auth-sidebar__inner.has-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(11, 18, 32, 0.08) 0%,
		rgba(11, 18, 32, 0.18) 100%
	);
	pointer-events: none;
}

.sarv-auth-sidebar__image {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Full-bleed Authentication page template */
html:has(body.sarv-auth-body) {
	height: 100%;
}

body.sarv-auth-body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	height: 100%;
	margin: 0;
	background: var(--sarv-auth-surface, #fff);
}

body.sarv-auth-body .sarv-auth-page-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

body.sarv-auth-body .sarv-auth-page-wrap > * {
	flex: 1;
	min-height: 0;
}

/* -------------------------------------------------------------------------
   Logo / header / switch
   ------------------------------------------------------------------------- */

.sarv-auth-logo {
	margin-bottom: 1.75rem;
}

.sarv-auth-logo__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.sarv-auth-logo__img {
	display: block;
	max-height: 40px;
	width: auto;
}

.sarv-auth-logo__text {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sarv-auth-form-header,
.st-auth-form-header {
	margin-bottom: 1.35rem;
}

.sarv-auth-form-header__title,
.st-auth-form-header__title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.45rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.sarv-auth-form-header__desc,
.st-auth-form-header__desc {
	margin: 0;
	color: var(--sarv-auth-muted, var(--st-auth-muted, #64748b));
	font-size: 0.95rem;
	line-height: 1.6;
}

.sarv-auth-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.5rem;
	margin: 1.25rem 0 0;
	font-size: 0.9rem;
	color: var(--sarv-auth-muted);
	text-align: center;
}

.sarv-auth-switch__action {
	font-weight: 700;
}

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

.sarv-auth-divider {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0;
}

.sarv-auth-divider__line {
	height: 1px;
	background: var(--sarv-auth-border);
}

.sarv-auth-divider__text {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sarv-auth-muted);
}

.sarv-auth-social {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.65rem;
}

.sarv-auth-page button.sarv-auth-social__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: 2.6rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--sarv-auth-border);
	border-radius: var(--sarv-auth-radius);
	background: #fff;
	color: var(--sarv-auth-text);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: not-allowed;
	opacity: 0.72;
}

.sarv-auth-page button.sarv-auth-social__btn:hover,
.sarv-auth-page button.sarv-auth-social__btn:active {
	background: #fff;
	color: var(--sarv-auth-text);
	border-color: var(--sarv-auth-border);
}

.sarv-auth-social__icon {
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.35;
	flex-shrink: 0;
}

.sarv-auth-social__btn--google .sarv-auth-social__icon {
	background: conic-gradient(from 0deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335);
	opacity: 1;
}

.sarv-auth-page a.sarv-auth-social__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: 2.6rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--sarv-auth-border);
	border-radius: var(--sarv-auth-radius);
	background: #fff;
	color: var(--sarv-auth-text);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	opacity: 1;
}

.sarv-auth-page a.sarv-auth-social__btn:hover,
.sarv-auth-page a.sarv-auth-social__btn:active {
	background: #f8fafc;
	color: var(--sarv-auth-text);
	border-color: var(--sarv-auth-border);
	text-decoration: none;
}

.sarv-auth-social__hint {
	font-size: 0.75rem;
	text-align: center;
}

.sarv-auth-alert {
	margin-bottom: 1rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--sarv-auth-radius, 12px);
	font-size: 0.875rem;
	font-weight: 600;
}

.sarv-auth-alert--error {
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c;
	border: 1px solid rgba(220, 38, 38, 0.2);
}

/* -------------------------------------------------------------------------
   Form controls (keep st-auth hooks)
   ------------------------------------------------------------------------- */

.st-auth-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.st-auth-field__error[hidden] {
	display: none !important;
}

/*
 * Isolate Auth buttons from global theme variants
 * (html.st-btn-flat button, html.st-btn-rounded button, …).
 * Those selectors are (0,1,2) and beat single-class Auth rules.
 */
.sarv-auth-page button.st-auth-tabs__btn,
.sarv-auth-page button.st-auth-btn,
.sarv-auth-page a.st-auth-btn,
.sarv-auth-page button.sarv-auth-social__btn,
.sarv-auth-page a.sarv-auth-social__btn,
.sarv-auth-page button.st-auth-link {
	box-shadow: none;
	transform: none;
	gap: 0.4rem;
	font-family: inherit;
	line-height: 1.3;
	user-select: none;
}

.sarv-auth-page button.st-auth-captcha__refresh {
	box-shadow: none;
	gap: 0;
	font-family: inherit;
	line-height: 1;
	user-select: none;
}

.sarv-auth-page button.st-auth-tabs__btn:hover,
.sarv-auth-page button.st-auth-tabs__btn:active,
.sarv-auth-page button.st-auth-btn:hover,
.sarv-auth-page button.st-auth-btn:active,
.sarv-auth-page a.st-auth-btn:hover,
.sarv-auth-page a.st-auth-btn:active,
.sarv-auth-page button.sarv-auth-social__btn:hover,
.sarv-auth-page button.sarv-auth-social__btn:active,
.sarv-auth-page button.st-auth-link:hover,
.sarv-auth-page button.st-auth-link:active {
	transform: none;
	box-shadow: none;
}

.sarv-auth-page button.st-auth-captcha__refresh:hover,
.sarv-auth-page button.st-auth-captcha__refresh:active {
	transform: translateY(-50%);
	box-shadow: none;
}

.sarv-auth-page .st-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
	margin-bottom: 1rem;
	padding: 0.25rem;
	border-radius: 999px;
	background: var(--sarv-auth-input-bg, #f8fafc);
}

.sarv-auth-page button.st-auth-tabs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.4rem;
	padding: 0.55rem 0.75rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sarv-auth-muted, #64748b);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.sarv-auth-page button.st-auth-tabs__btn:hover {
	background: rgba(255, 255, 255, 0.7);
	color: var(--sarv-auth-text, #0f172a);
}

.sarv-auth-page button.st-auth-tabs__btn.is-active,
.sarv-auth-page button.st-auth-tabs__btn[aria-selected="true"] {
	background: #fff;
	color: var(--sarv-auth-text, #0f172a);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.sarv-auth-page button.st-auth-tabs__btn:focus-visible {
	outline: 2px solid var(--sarv-auth-brand, #90c742);
	outline-offset: 2px;
}

.sarv-auth-form,
.st-auth-form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.sarv-auth-name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.sarv-auth-form__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.st-auth-field-group {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.st-auth-field-group__legend {
	margin-bottom: 0.65rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sarv-auth-muted, #64748b);
}

.st-auth-field-group__body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.st-auth-field__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.st-auth-field__required {
	color: var(--sarv-auth-danger, #dc2626);
	margin-inline-start: 0.15rem;
}

.st-auth-field__input,
.st-auth-field__textarea,
.st-auth-field__select {
	width: 100%;
	border: 1px solid var(--sarv-auth-border, #e2e8f0);
	border-radius: var(--sarv-auth-radius, 12px);
	background: var(--sarv-auth-input-bg, #f8fafc);
	padding: 0.75rem 0.9rem;
	color: var(--sarv-auth-text, #0f172a);
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.sarv-auth-otp-input {
	letter-spacing: 0.35em;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
}

.st-auth-field__input:focus,
.st-auth-field__textarea:focus,
.st-auth-field__select:focus {
	outline: none;
	border-color: var(--sarv-auth-brand, #90c742);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(144, 199, 66, 0.28);
}

.st-auth-field__input[aria-invalid="true"],
.st-auth-field__textarea[aria-invalid="true"],
.st-auth-field__select[aria-invalid="true"] {
	border-color: var(--sarv-auth-danger, #dc2626);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.st-auth-field__error {
	margin: 0.35rem 0 0;
	color: var(--sarv-auth-danger, #dc2626);
	font-size: 0.8125rem;
}

.st-auth-field__check,
.st-auth-remember {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.875rem;
	color: var(--sarv-auth-muted, #64748b);
	cursor: pointer;
}

.st-auth-field__radios {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sarv-auth-page button.st-auth-btn,
.sarv-auth-page a.st-auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.85rem;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: var(--sarv-auth-radius, 12px);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.sarv-auth-page button.st-auth-btn:focus-visible,
.sarv-auth-page a.st-auth-btn:focus-visible {
	outline: 2px solid var(--sarv-auth-brand, #90c742);
	outline-offset: 2px;
}

.sarv-auth-page button.st-auth-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.sarv-auth-page button.st-auth-btn--primary,
.sarv-auth-page a.st-auth-btn--primary {
	width: 100%;
	background: var(--sarv-auth-brand, #90c742);
	color: #fff;
	border-color: transparent;
}

.sarv-auth-page button.st-auth-btn--primary:hover:not(:disabled),
.sarv-auth-page a.st-auth-btn--primary:hover {
	background: var(--sarv-auth-brand-hover, #7fb336);
	color: #fff;
}

.sarv-auth-page button.st-auth-btn--primary:active:not(:disabled),
.sarv-auth-page a.st-auth-btn--primary:active {
	background: var(--sarv-auth-brand-hover, #7fb336);
	color: #fff;
}

.sarv-auth-page button.st-auth-btn--ghost,
.sarv-auth-page a.st-auth-btn--ghost {
	background: transparent;
	color: var(--sarv-auth-muted, #64748b);
	border-color: transparent;
}

.sarv-auth-page button.st-auth-btn--ghost:hover:not(:disabled),
.sarv-auth-page a.st-auth-btn--ghost:hover {
	background: var(--sarv-auth-brand-soft, #f3f9ea);
	color: var(--sarv-auth-text, #0f172a);
}

.st-auth-form-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.sarv-auth-page button.st-auth-link {
	display: inline;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sarv-auth-brand-hover, #7fb336);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sarv-auth-page button.st-auth-link:hover,
.sarv-auth-page button.st-auth-link:active {
	background: transparent;
	color: var(--sarv-auth-brand, #90c742);
}

.sarv-auth-page button.st-auth-link:focus-visible {
	outline: 2px solid var(--sarv-auth-brand, #90c742);
	outline-offset: 2px;
}

.sarv-auth-page button.st-auth-link:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.st-auth-logged-in-actions {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.st-auth-account-fields {
	margin: 1.5rem 0;
	padding: 0;
	border: 0;
}

.st-auth-account-fields legend {
	margin-bottom: 1rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.st-auth-account-fields .st-auth-field {
	margin-bottom: 1rem;
}

.st-auth-field__file-current {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sarv-auth-form-panel__inner {
		max-width: 480px;
	}
}

@media (max-width: 900px) {
	.sarv-auth-layout {
		grid-template-columns: 1fr;
	}

	.sarv-auth-sidebar {
		display: none;
	}

	.sarv-auth-form-panel {
		min-height: 100%;
		padding: clamp(1.25rem, 5vw, 2rem);
	}

	.sarv-auth-form-panel__inner {
		max-width: 440px;
	}
}

@media (max-width: 560px) {
	.sarv-auth-name-row {
		grid-template-columns: 1fr;
	}

	.sarv-auth-social {
		grid-template-columns: 1fr;
	}

	.sarv-auth-social__btn {
		justify-content: flex-start;
		padding-inline: 1rem;
	}
}