/* ==========================================================================
   Auth surfaces: LearnDash registration + login modal, and the WooCommerce
   my-account login.

   Styling only. No markup, no fields, no form actions and no LearnDash or
   WooCommerce settings are touched, so login, registration and the redirects
   behave exactly as before. Deleting this file reverts everything.

   Values are taken from the Lovable source (src/routes/login.tsx) rather than
   measured: card max-w-[420px] rounded-2xl p-7, fields rounded-lg with a
   focus-within brand border, button rounded-lg bg-brand py-3.
   ========================================================================== */

.naa-lean-auth-card,
.learndash-wrapper .ld-registration__form,
.learndash-wrapper .ld-login-modal-wrapper,
.woocommerce-account form.woocommerce-form-login {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	padding: 28px;
	border: 1px solid var(--naa-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(9, 20, 15, 0.05);
}

/* The registration card holds two panes; only one shows at a time, so the
   card must not double its padding around them. */
.learndash-wrapper .ld-registration__form > div {
	padding: 0;
}

.learndash-wrapper .ld-registration__size-wrapper,
.learndash-wrapper .ld-registration__wrapper {
	max-width: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
.naa-lean-chrome .learndash-wrapper .ld-registration__heading,
.learndash-wrapper .ld-registration__heading,
.learndash-wrapper .ld-modal-heading,
.woocommerce-account .woocommerce h2 {
	margin: 0 0 8px;
	color: var(--naa-fg);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	text-align: center;
}

.learndash-wrapper .ld-registration__p,
.learndash-wrapper .ld-modal-text {
	margin: 0 0 22px;
	color: color-mix(in srgb, var(--naa-fg) 60%, transparent);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */
.learndash-wrapper .ld-form label,
.learndash-wrapper .learndash-registration-field label,
.learndash-wrapper #loginform label,
.woocommerce-account .woocommerce-form-login label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 8px;
	color: color-mix(in srgb, var(--naa-fg) 55%, transparent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Fields
   The design puts an icon inside the field. Adding one to the markup would
   mean touching LearnDash output, so it is a decorative background image
   instead: no DOM change, and nothing for a screen reader to read out.
   -------------------------------------------------------------------------- */
.learndash-wrapper .ld-form input[type="text"],
.learndash-wrapper .ld-form input[type="email"],
.learndash-wrapper .ld-form input[type="password"],
.learndash-wrapper #loginform input[type="text"],
.learndash-wrapper #loginform input[type="password"],
.woocommerce-account .woocommerce-form-login .input-text {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--naa-border);
	border-radius: 8px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	color: var(--naa-fg);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.learndash-wrapper .ld-form input[type="email"],
.woocommerce-account .woocommerce-form-login #username,
.learndash-wrapper #loginform input[type="text"] {
	padding-left: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2309140f' stroke-opacity='0.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.learndash-wrapper .ld-form input[type="password"],
.learndash-wrapper #loginform input[type="password"],
.woocommerce-account .woocommerce-form-login #password {
	padding-left: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2309140f' stroke-opacity='0.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.learndash-wrapper .ld-form input:focus,
.learndash-wrapper #loginform input:focus,
.woocommerce-account .woocommerce-form-login .input-text:focus {
	border-color: color-mix(in srgb, var(--naa-brand) 50%, transparent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--naa-brand) 10%, transparent);
}

.learndash-wrapper .ld-form input::placeholder,
.woocommerce-account .woocommerce-form-login .input-text::placeholder {
	color: color-mix(in srgb, var(--naa-fg) 35%, transparent);
}

.learndash-wrapper .ld-form__field-outer-wrapper,
.learndash-wrapper #loginform p,
.woocommerce-account .woocommerce-form-login .form-row {
	margin: 0 0 18px;
	padding: 0;
}

/* Woo wraps the password field to hang a reveal button off it. */
.woocommerce-account .woocommerce-form-login .password-input {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.learndash-wrapper .ld-form input[type="submit"],
.learndash-wrapper #loginform input[type="submit"],
.learndash-wrapper .ld-button:not(.ld-button-reverse),
.woocommerce-account .woocommerce-form-login__submit {
	display: block;
	width: 100%;
	min-height: 46px;
	margin-top: 8px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--naa-brand);
	color: var(--naa-brand-fg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.learndash-wrapper .ld-form input[type="submit"]:hover,
.learndash-wrapper #loginform input[type="submit"]:hover,
.learndash-wrapper .ld-button:not(.ld-button-reverse):hover,
.woocommerce-account .woocommerce-form-login__submit:hover {
	transform: translateY(-2px);
	background: var(--naa-brand);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--naa-brand) 20%, transparent);
}

/* --------------------------------------------------------------------------
   Secondary links and small print
   -------------------------------------------------------------------------- */
.learndash-wrapper .ld-forgot-password-link,
.woocommerce-account .woocommerce-LostPassword a,
.learndash-wrapper .ld-registration__login a,
.learndash-wrapper .ld-registration__register a {
	color: var(--naa-brand);
	font-weight: 600;
	text-decoration: none;
}

.learndash-wrapper .ld-forgot-password-link:hover,
.woocommerce-account .woocommerce-LostPassword a:hover {
	text-decoration: underline;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 18px 0 0;
	font-size: 12px;
	text-align: center;
}

.learndash-wrapper .ld-password-strength__hint {
	margin: -8px 0 18px;
	color: color-mix(in srgb, var(--naa-fg) 55%, transparent);
	font-size: 12px;
	line-height: 1.5;
}

/* Consent boxes are legally required, so they get room rather than being
   squeezed to look like the mockup, which has none. */
.learndash-wrapper .ld-terms-checkboxes {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.55;
}

.learndash-wrapper .ld-terms-checkboxes label,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 10px;
	color: color-mix(in srgb, var(--naa-fg) 70%, transparent);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.woocommerce-account .woocommerce-form-login .form-row .woocommerce-form__label-for-checkbox {
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Login modal
   Only the panel inside is restyled. The overlay's position, z-index and
   open/closed classes are LearnDash's and are deliberately left alone.
   -------------------------------------------------------------------------- */
.learndash-wrapper .ld-login-modal-branding {
	margin-top: 20px;
	text-align: center;
}

.learndash-wrapper .ld-login-modal-branding img {
	max-height: 34px;
	width: auto;
	opacity: 0.55;
}

.learndash-wrapper .ld-login-modal-register .ld-button.ld-button-reverse {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 12px 24px;
	border: 1px solid var(--naa-brand);
	border-radius: 8px;
	background: transparent;
	color: var(--naa-brand);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.learndash-wrapper .ld-login-modal-register .ld-button.ld-button-reverse:hover {
	background: var(--naa-brand-soft);
}

@media (max-width: 480px) {
	.learndash-wrapper .ld-registration__form,
	.learndash-wrapper .ld-login-modal-wrapper,
	.woocommerce-account form.woocommerce-form-login {
		padding: 20px;
	}
}

/* ==========================================================================
   Overrides measured in the browser, not guessed
   ========================================================================== */

/*
 * LearnDash sizes the modal panel with `.learndash-wrapper .ld-login-modal
 * .ld-login-modal-wrapper` (three classes), which beat the two-class rule
 * above. Same specificity here, and this file loads later.
 */
.learndash-wrapper .ld-login-modal .ld-login-modal-wrapper {
	max-width: 420px;
	padding: 28px;
}

/*
 * The hover colour comes from an inline `!important` in LearnDash's generated
 * CSS, so it cannot be beaten on specificity alone. This is the one place the
 * file needs !important, and it only changes a hover colour.
 */
.learndash-wrapper .ld-login-modal input[type="submit"]:hover,
.learndash-wrapper .ld-form input[type="submit"]:hover,
.learndash-wrapper #loginform input[type="submit"]:hover,
.learndash-wrapper .ld-button:hover:not([disabled]):not(.ld-button-reverse) {
	background: var(--naa-brand-dark, #0f2a1f) !important;
	background-color: var(--naa-brand-dark, #0f2a1f) !important;
	color: var(--naa-brand-fg) !important;
}

.learndash-wrapper .ld-login-modal input[type="submit"] {
	background: var(--naa-brand);
	background-color: var(--naa-brand);
	border: 0;
	border-radius: 8px;
	color: var(--naa-brand-fg);
}

/*
 * Icons belong on the two-field login the design specifies. The registration
 * form has five fields, and the design says nothing about username, first name
 * or last name; icons on two of five looked arbitrary, so they are removed
 * there rather than invented.
 */
.learndash-wrapper .ld-registration__register-form input[type="text"],
.learndash-wrapper .ld-registration__register-form input[type="email"],
.learndash-wrapper .ld-registration__register-form input[type="password"] {
	padding-left: 14px;
	background-image: none;
}

/* --------------------------------------------------------------------------
   Astra overrides on my-account, matched by measurement

   Astra Addon styles Woo fields through
     body:not(.cartflows-canvas):not(.cartflows-default):not(.cartflows-instant-checkout)
     .woocommerce form .form-row input[type="email"] ...
   which is (0,6,3). The selector below is deliberately built to the same
   weight; this file loads after astra-addon, so equal weight wins. No
   !important needed.
   -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce form.woocommerce-form-login .form-row input.woocommerce-Input.input-text {
	min-height: 44px;
	padding: 10px 14px 10px 40px;
	border: 1px solid var(--naa-border);
	border-radius: 8px;
	background-color: #fff;
	font-size: 14px;
}

/*
 * Astra's inline button CSS wins with `.woocommerce button.button` (0,2,2),
 * which beat the two-class rule above. Four classes settle it.
 */
.woocommerce-account .woocommerce button.button.woocommerce-form-login__submit {
	width: 100%;
	min-height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background-color: var(--naa-brand);
	color: var(--naa-brand-fg);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-account .woocommerce button.button.woocommerce-form-login__submit:hover {
	background-color: var(--naa-brand-dark, #0f2a1f);
	color: var(--naa-brand-fg);
}

/* Astra sizes labels in em, which landed on 11.2px instead of 12px. */
body.woocommerce-account .woocommerce form.woocommerce-form-login .form-row label:not(.woocommerce-form__label-for-checkbox) {
	font-size: 12px;
}

/*
 * The password reveal is also a .ld-button, so the full-width primary styling
 * above turned it into a green bar across the card. It is a small secondary
 * control next to the field, not a submit, so it is excluded and given back a
 * quiet inline look.
 */
.learndash-wrapper .ld-button.ld-button__password-visibility-toggle {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 0;
	margin: 8px 0 0;
	padding: 6px 12px;
	border: 1px solid var(--naa-border);
	border-radius: 999px;
	background: transparent;
	color: color-mix(in srgb, var(--naa-fg) 65%, transparent);
	font-size: 12px;
	font-weight: 600;
}

.learndash-wrapper .ld-button.ld-button__password-visibility-toggle:hover {
	border-color: var(--naa-brand);
	background: transparent !important;
	background-color: transparent !important;
	color: var(--naa-brand) !important;
}

.learndash-wrapper .ld-form__field-password-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.learndash-wrapper .ld-form__field-password-wrapper input {
	width: 100%;
}

/*
 * The modal submit keeps #004437 from an !important rule in LearnDash's
 * generated CSS, so specificity cannot reach it: measured computed value stays
 * rgb(0,68,55) even though this file's rule is last in the cascade order.
 * Matching !important is the only way, and it changes a colour, nothing else.
 */
.learndash-wrapper .ld-login-modal input[type="submit"],
.learndash-wrapper .ld-login-modal .ld-button:not(.ld-button-reverse) {
	background: var(--naa-brand) !important;
	background-color: var(--naa-brand) !important;
	color: var(--naa-brand-fg) !important;
}

/* ==========================================================================
   Login modal, full screen

   LearnDash lays the modal out as `position: absolute; top: 100px; width: 80%`
   with the login and register panels side by side (measured: 1024x649 at
   146,5 with two 512px columns). This turns it into a full-viewport takeover
   with the panels stacked and centred, which is what the Lovable login page
   looks like.

   Every competing rule is `.learndash-wrapper .ld-modal` or
   `.learndash-wrapper .ld-login-modal`, both two classes, and this file loads
   after learndash.min.css, so equal specificity is enough. No !important.
   LearnDash's own open/close classes are untouched; the guard below only makes
   sure the closed state still wins over the display value set here.
   ========================================================================== */
.learndash-wrapper .ld-login-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 88px 24px 48px;
	background-color: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 9000;
}

/* LearnDash hides the modal with this class. Restated so it can never lose to
   the display value above, whatever order the files end up in. */
.learndash-wrapper .ld-login-modal.ld-modal-closed,
.learndash-wrapper .ld-modal.ld-modal-closed {
	display: none;
}

/* The two panels were 50/50 columns. Stacked and centred instead. */
.learndash-wrapper .ld-login-modal .ld-login-modal-login,
.learndash-wrapper .ld-login-modal .ld-login-modal-register {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	max-width: 420px;
	padding: 0;
	border: 0;
}

.learndash-wrapper .ld-login-modal .ld-login-modal-register {
	text-align: center;
}

/* The register half is a prompt, not a second card: no border or padding of
   its own, so it reads like the "No account yet?" line in the design. */
.learndash-wrapper .ld-login-modal .ld-login-modal-register .ld-login-modal-wrapper {
	max-width: 420px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.learndash-wrapper .ld-login-modal .ld-login-modal-register .ld-modal-heading {
	font-size: 15px;
	font-weight: 600;
}

.learndash-wrapper .ld-login-modal .ld-login-modal-register .ld-modal-text {
	margin-bottom: 14px;
	font-size: 13px;
}

/* Closer: a real round button in the corner of the viewport. */
.learndash-wrapper .ld-login-modal .ld-modal-closer {
	position: fixed;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--naa-border, rgba(22, 59, 44, 0.12));
	border-radius: 999px;
	background: #fff;
	color: var(--naa-brand, #163b2c);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.learndash-wrapper .ld-login-modal .ld-modal-closer:hover {
	border-color: var(--naa-brand, #163b2c);
	background: var(--naa-brand-soft, #ecf4f0);
}

@media (max-width: 640px) {
	.learndash-wrapper .ld-login-modal {
		justify-content: flex-start;
		padding: 76px 16px 40px;
	}

	.learndash-wrapper .ld-login-modal .ld-modal-closer {
		top: 14px;
		right: 14px;
	}
}

/*
 * LearnDash centres the modal with a translate(-50%,-50%) alongside top/left
 * 50%. With inset:0 above, that transform pulled the whole panel half its own
 * width and height off screen (measured box -657,-474 at 1315x948). The
 * transform has to be cleared, not just the offsets.
 */
.learndash-wrapper .ld-login-modal,
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal {
	transform: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Fullscreen modal: remaining corrections, all measured
   -------------------------------------------------------------------------- */

/* The register half still carried LearnDash's brand-green panel background
   (measured rgb(22,59,44)), which read as a stray green block under a white
   card. It is a prompt on the same white surface now. */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register {
	padding: 0;
	background: transparent;
	background-color: transparent;
	color: var(--naa-fg, #09140f);
}

.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register .ld-modal-heading,
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register .ld-modal-text {
	color: color-mix(in srgb, var(--naa-fg, #09140f) 65%, transparent);
}

/* On white, the reverse button has to be an outline, not white-on-white. */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-button.ld-button-reverse {
	width: 100%;
	border: 1px solid var(--naa-brand, #163b2c);
	background: transparent;
	background-color: transparent;
	color: var(--naa-brand, #163b2c);
}

.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-button.ld-button-reverse:hover {
	background: var(--naa-brand-soft, #ecf4f0);
	background-color: var(--naa-brand-soft, #ecf4f0);
	color: var(--naa-brand, #163b2c);
}

/* The logo rendered at 110px tall and dominated the card. */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-branding img {
	max-height: 40px;
	width: auto;
	height: auto;
}

/* The closer was white on white: invisible. */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-modal-closer {
	width: 44px;
	height: 44px;
	color: var(--naa-brand, #163b2c);
	background: #fff;
	opacity: 1;
}

.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-modal-closer::before {
	color: var(--naa-brand, #163b2c);
}

/*
 * LearnDash paints the register half with its primary colour from a grouped
 * inline !important rule (the same block that colours every LD button). It
 * cannot be beaten on specificity, only matched. This file is loaded after the
 * inline block, so !important here wins. It changes colours only.
 */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--naa-fg, #09140f) !important;
}

.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register .ld-modal-heading,
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register .ld-modal-text,
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-login-modal-register .ld-content {
	color: color-mix(in srgb, var(--naa-fg, #09140f) 65%, transparent) !important;
	background: transparent !important;
}

.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-button.ld-button-reverse {
	border: 1px solid var(--naa-brand, #163b2c) !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--naa-brand, #163b2c) !important;
}

.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-button.ld-button-reverse:hover {
	background: var(--naa-brand-soft, #ecf4f0) !important;
	background-color: var(--naa-brand-soft, #ecf4f0) !important;
	color: var(--naa-brand, #163b2c) !important;
}

/*
 * LearnDash puts the open/closed class on the WRAPPER, not on the modal:
 *   .learndash-wrapper.learndash-wrapper-login-modal.ld-modal-closed
 * The earlier guard tested `.ld-login-modal.ld-modal-closed`, which is never
 * true, so `display: flex` above kept the modal on screen after the close
 * button was pressed. Measured: class flipped to ld-modal-closed, computed
 * display stayed flex. This is the guard that actually applies.
 */
.learndash-wrapper.ld-modal-closed .ld-login-modal,
.learndash-wrapper.ld-modal-closed .ld-modal,
.learndash-wrapper-login-modal.ld-modal-closed .ld-login-modal {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Rettelser etter visuell gjennomgang
   -------------------------------------------------------------------------- */

/*
 * LearnDash draws its own person/lock icon in these fields, so the injected
 * background icon landed on top of it and the two overlapped. The injected one
 * is removed here; my-account keeps its icons below because WooCommerce ships
 * none there.
 */
.learndash-wrapper .ld-form input[type="text"],
.learndash-wrapper .ld-form input[type="email"],
.learndash-wrapper .ld-form input[type="password"],
.learndash-wrapper #loginform input[type="text"],
.learndash-wrapper #loginform input[type="password"] {
	padding-left: 14px;
	background-image: none;
}

/*
 * The register button carried max-width: 385px from LearnDash, so it sat 35px
 * narrower than the 420px card above it and the two edges did not line up.
 */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-button.ld-button-reverse,
.learndash-wrapper .ld-login-modal .ld-button {
	max-width: none;
	width: 100%;
}

/*
 * The closer is the modal's close button. It was floating alone in the corner
 * of an empty white screen, which read as a stray ring rather than a control.
 * Given a visible label-sized target and moved in line with the card.
 */
.learndash-wrapper.learndash-wrapper-login-modal .ld-login-modal .ld-modal-closer {
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--naa-border, rgba(22, 59, 44, 0.12));
	background: #fff;
	color: var(--naa-brand, #163b2c);
	font-size: 16px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(9, 20, 15, 0.06);
}

/* naa-auth-12: LearnDash draws its own field icons as ::before on the field
   wrapper (p.login-username / p.login-password), absolutely placed at left 8px
   with width 16px. The other auth surfaces (my-account, /login/) use plain
   fields, so hide the icons here instead of padding the text past them. */
.learndash-wrapper .ld-login-modal .ld-login-modal-form .login-username::before,
.learndash-wrapper .ld-login-modal .ld-login-modal-form .login-password::before,
.learndash-wrapper .ld-login-modal .ld-login-modal-form .ld-form p::before {
	display: none;
}