/**
 * Login card — visual match of the Scribigo login concept (Lovable dummy).
 * Wraps UM Social Login + UM form 458; does not replace their behavior.
 */

.scribigo-login-card-wrap {
	--sglc-bg: var(--ast-global-color-5, #f7f3ec);
	--sglc-card: #fffdf8;
	--sglc-fg: var(--ast-global-color-2, #2b2418);
	--sglc-muted: var(--ast-global-color-3, #74695c);
	--sglc-primary: var(--ast-global-color-0, #e06a1a);
	--sglc-primary-fg: #fffdf8;
	--sglc-border: color-mix(in srgb, var(--sglc-fg) 14%, #f3eee6);
	--sglc-input: color-mix(in srgb, var(--sglc-bg) 88%, #fff);
	--sglc-radius: 20px;
	--sglc-control: 16px;
	--sglc-text: 14px;
	--sglc-text-sm: 12px;
	--sglc-shadow: 0 22px 50px -32px color-mix(in srgb, var(--sglc-fg) 28%, transparent);

	display: flex;
	justify-content: center;
	width: 100%;
	padding: 8px 0 28px;
	color: var(--sglc-fg);
}

body.scribigo-login-card-page .entry-content > .scribigo-login-card-wrap,
body.scribigo-app-chrome--login .entry-content > .scribigo-login-card-wrap {
	margin-left: auto;
	margin-right: auto;
}

.scribigo-login-card {
	width: 100%;
	max-width: 24rem;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--sglc-border);
	border-radius: var(--sglc-radius);
	background: var(--sglc-card);
	box-shadow: var(--sglc-shadow);
	font-family: inherit;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.scribigo-login-card {
		padding: 24px;
	}
}

.scribigo-login-card__eyebrow {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sglc-primary);
}

.scribigo-login-card__title,
#scribigo-login-card h1.scribigo-login-card__title {
	margin: 6px 0 0;
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif !important;
	font-size: 1.5rem !important;
	font-weight: 400 !important;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sglc-fg);
}

@media (min-width: 640px) {
	.scribigo-login-card__title,
	#scribigo-login-card h1.scribigo-login-card__title {
		font-size: 1.75rem !important;
	}
}

.scribigo-login-card__lead,
.scribigo-login-card__foot {
	margin: 6px 0 0;
	font-size: var(--sglc-text);
	line-height: 1.55;
	color: var(--sglc-muted);
}

.scribigo-login-card__foot {
	margin-top: 14px;
	font-size: var(--sglc-text-sm);
	text-align: center;
}

.scribigo-login-card__social {
	display: grid;
	gap: 8px;
	margin-top: 20px;
}

.scribigo-login-card__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
}

.scribigo-login-card__divider-line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--sglc-border);
}

.scribigo-login-card__divider-label {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sglc-muted);
}

.scribigo-login-card__form {
	margin-top: 16px;
}

.scribigo-login-card__primary,
.scribigo-login-card .scribigo-login-card__primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 14px;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--sglc-control);
	background: var(--sglc-primary);
	color: var(--sglc-primary-fg);
	font-size: var(--sglc-text);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--sglc-primary) 70%, transparent);
	transition: transform 0.2s ease, filter 0.2s ease;
}

.scribigo-login-card__primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	color: var(--sglc-primary-fg);
}

.scribigo-login-card__text-link {
	color: var(--sglc-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.scribigo-login-card-page .entry-content > *:not(.scribigo-login-card-wrap) {
	display: none !important;
}

/* --- UM Social Login: keep links, restyle to uniform buttons --- */

.scribigo-login-card .um-shortcode-social,
.scribigo-login-card .um-social-login,
.scribigo-login-card .um-social-login-overlay,
.scribigo-login-card .um-social-providers,
.scribigo-login-card .um-field-social,
.scribigo-login-card [class*="um-social-login"] {
	display: grid !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	float: none !important;
}

.scribigo-login-card .um-social-login::before,
.scribigo-login-card .um-social-login::after,
.scribigo-login-card .um-clear {
	display: none !important;
}

#scribigo-login-card [id^="um-shortcode-social-"] .um-col-alt,
#scribigo-login-card [id^="um-shortcode-social-"] .um-field {
	display: grid !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

#scribigo-login-card [id^="um-shortcode-social-"] .um-left,
#scribigo-login-card [id^="um-shortcode-social-"] .um-right,
#scribigo-login-card [id^="um-shortcode-social-"] .um-half {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-social,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-social:hover,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-facebook,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-facebook:hover,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-google,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-google:hover,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-linkedin,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-linkedin:hover,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-discord,
#scribigo-login-card [id^="um-shortcode-social-"] a.um-button.um-button-discord:hover,
.scribigo-login-card .um-social-login a,
.scribigo-login-card .um-social-providers a,
.scribigo-login-card a.um-button-social,
.scribigo-login-card .scribigo-login-card__social-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--sglc-border) !important;
	border-radius: var(--sglc-control) !important;
	background: var(--sglc-input) !important;
	color: var(--sglc-fg) !important;
	box-shadow: none !important;
	font-size: var(--sglc-text) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.scribigo-login-card .um-social-login a:hover,
.scribigo-login-card .scribigo-login-card__social-btn:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--sglc-fg) 25%, var(--sglc-border)) !important;
	background: var(--sglc-input) !important;
	color: var(--sglc-fg) !important;
}

.scribigo-login-card .um-social-login a:focus-visible,
.scribigo-login-card .scribigo-login-card__social-btn:focus-visible,
.scribigo-login-card .um-form input:focus-visible,
.scribigo-login-card .um-form button:focus-visible,
.scribigo-login-card .um-form .um-button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--sglc-primary) 55%, transparent);
	outline-offset: 2px;
}

.scribigo-login-card .scribigo-login-card__social-icon {
	display: grid !important;
	place-items: center;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	background: none !important;
	flex: 0 0 20px;
}

.scribigo-login-card .scribigo-login-card__social-icon svg {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
}

/* UM / Bootstrap Icons stay in the DOM (href + onclick intact) but must not paint. */
#scribigo-login-card a.um-button-social > i,
#scribigo-login-card a.scribigo-login-card__social-btn > i,
#scribigo-login-card a.um-button-social .um-sso,
#scribigo-login-card a.scribigo-login-card__social-btn .um-sso,
#scribigo-login-card a.um-button-social .bi,
#scribigo-login-card a.scribigo-login-card__social-btn .bi,
.scribigo-login-card .um-social-login a > i,
.scribigo-login-card .scribigo-login-card__social-btn .scribigo-login-card__um-icon {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
	pointer-events: none !important;
}

#scribigo-login-card a.um-button-social > i::before,
#scribigo-login-card a.um-button-social > i::after,
#scribigo-login-card a.scribigo-login-card__social-btn > i::before,
#scribigo-login-card a.scribigo-login-card__social-btn > i::after,
.scribigo-login-card .scribigo-login-card__social-btn .scribigo-login-card__um-icon::before,
.scribigo-login-card .scribigo-login-card__social-btn .scribigo-login-card__um-icon::after {
	content: none !important;
	display: none !important;
}

.scribigo-login-card .scribigo-login-card__social-label {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hide UM's default colored blocks / extra chrome inside the card. */
.scribigo-login-card .um-social-login-show,
.scribigo-login-card .um-social-login-hidden,
.scribigo-login-card .um-header,
.scribigo-login-card .um-form-header,
.scribigo-login-card .um .um-notice,
.scribigo-login-card .scribigo-login-unified-hint {
	display: none !important;
}

/* --- UM email form --- */

.scribigo-login-card .um,
.scribigo-login-card .um-login,
.scribigo-login-card .um-form,
.scribigo-login-card .um-astra-form {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	float: none !important;
}

.scribigo-login-card .um-field,
.scribigo-login-card .um-field-area,
.scribigo-login-card .um-field-label {
	margin: 0 0 8px !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}

.scribigo-login-card .um-field-label {
	margin-bottom: 6px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sglc-muted) !important;
}

.scribigo-login-card .um-field-label label,
.scribigo-login-card .um-field-label .um-label {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

.scribigo-login-card .um-form input[type="text"],
.scribigo-login-card .um-form input[type="email"],
.scribigo-login-card .um-form input[type="search"],
.scribigo-login-card .um-form input[name="username"],
.scribigo-login-card .um-form input.um-form-field {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 42px;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--sglc-border) !important;
	border-radius: var(--sglc-control) !important;
	background: var(--sglc-input) !important;
	box-shadow: none !important;
	color: var(--sglc-fg) !important;
	font-size: var(--sglc-text) !important;
}

.scribigo-login-card .um-form input::placeholder {
	color: color-mix(in srgb, var(--sglc-muted) 70%, transparent);
}

.scribigo-login-card .um-col-alt,
.scribigo-login-card .um-left,
.scribigo-login-card .um-right,
.scribigo-login-card .um-half,
.scribigo-login-card .um-center {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.scribigo-login-card .um-col-alt {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px !important;
}

/* Astra leftover: hairline flush against the checkbox. Scope to the email form only. */
.scribigo-login-card .um-form .um-col-alt {
	border: 0 !important;
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* UM 24px line-height strut + double 8px margins made the row taller than the control. */
.scribigo-login-card .um-field-c,
.scribigo-login-card .um-field-c .um-field-area,
#scribigo-login-card .um-field-c,
#scribigo-login-card .um-field-c .um-field-area {
	display: flex !important;
	align-items: center !important;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	float: none !important;
}

#scribigo-login-card label.um-field-checkbox,
.scribigo-login-card .um-field-c label.um-field-checkbox {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	align-content: center !important;
	gap: 10px !important;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: var(--sglc-text) !important;
	font-weight: 400 !important;
	color: var(--sglc-muted) !important;
	cursor: pointer;
}

#scribigo-login-card .um-field-checkbox-state,
#scribigo-login-card .um-field-checkbox-state i,
#scribigo-login-card .um-field-checkbox-state::before,
#scribigo-login-card .um-field-checkbox-state::after {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
	pointer-events: none !important;
}

#scribigo-login-card .um-field-checkbox-option {
	display: block !important;
	position: static !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: var(--sglc-text) !important;
	font-weight: 400 !important;
	color: var(--sglc-muted) !important;
}

#scribigo-login-card label.um-field-checkbox input[type="checkbox"],
#scribigo-login-card .um-field-checkbox input[type="checkbox"],
#scribigo-login-card .um-form input[type="checkbox"][name="rememberme"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	position: static !important;
	float: none !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: var(--sglc-text) !important;
	height: var(--sglc-text) !important;
	min-width: var(--sglc-text) !important;
	min-height: var(--sglc-text) !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border: 1.5px solid var(--sglc-primary) !important;
	border-radius: 3px !important;
	background: var(--sglc-input) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	vertical-align: middle;
	align-self: center !important;
	flex: 0 0 var(--sglc-text) !important;
	cursor: pointer;
	accent-color: var(--sglc-primary);
}

.scribigo-login-card .um-row {
	margin: 0 !important;
}

.scribigo-login-card .um-form input[type="checkbox"]:checked {
	border-color: var(--sglc-primary) !important;
	background-color: var(--sglc-primary) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6L9 17l-5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
}

.scribigo-login-card .um-form .um-button,
.scribigo-login-card .um-form input[type="submit"].um-button,
.scribigo-login-card .um-form button[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: var(--sglc-control) !important;
	background: var(--sglc-primary) !important;
	color: var(--sglc-primary-fg) !important;
	box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--sglc-primary) 70%, transparent) !important;
	font-size: var(--sglc-text) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.scribigo-login-card .um-form .um-button:hover,
.scribigo-login-card .um-form input[type="submit"].um-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	background: var(--sglc-primary) !important;
	color: var(--sglc-primary-fg) !important;
}

.scribigo-login-card .um-form .um-button.scribigo-login-card__submit--icon::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m10 17 5-5-5-5'/><path d='M15 12H3'/><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/></svg>") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m10 17 5-5-5-5'/><path d='M15 12H3'/><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/></svg>") center / contain no-repeat;
}

/* Magic-code OTP panel sits inside the same card. */
.scribigo-login-card .scribigo-magic-code-root,
.scribigo-login-card .scribigo-magic-code-root--inline,
.scribigo-login-card .scribigo-magic-code-panel {
	max-width: none;
	margin: 16px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.scribigo-login-card .scribigo-magic-code-panel h3 {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.25rem;
	font-weight: 400;
}

.scribigo-login-card .scribigo-magic-code-inputs input {
	border-radius: 12px;
	background: var(--sglc-input);
	border-color: var(--sglc-border);
}

.scribigo-login-card .scribigo-magic-code-submit {
	border-radius: var(--sglc-control);
	background: var(--sglc-primary);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--sglc-primary) 70%, transparent);
}

.scribigo-login-card .um-error,
.scribigo-login-card .um-field-error {
	margin: 6px 0 0 !important;
	font-size: 12px;
	color: #b42318;
}