/**
 * Besanj Mobile Auth - frontend styles.
 *
 * Layout/state only - colors, fonts, input borders and buttons are all
 * inherited from Shoptimizer/WooCommerce's own .woocommerce-form,
 * .input-text and .button classes so the form matches the rest of the
 * site automatically.
 */

.besanj-auth {
	max-width: 420px;
	margin: 3em auto;
	padding: 2em;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.besanj-auth[hidden],
.besanj-auth__step[hidden] {
	display: none !important;
}

.besanj-auth__hint {
	margin-bottom: 1.5em;
	color: #666;
}

.besanj-auth__change-mobile,
.besanj-auth__resend,
.besanj-auth__link {
	background: none;
	border: none;
	padding: 0;
	color: var(--wc-primary, #7f54b3);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.besanj-auth__resend[disabled] {
	color: #999;
	text-decoration: none;
	cursor: default;
}

.besanj-auth__resend-row {
	text-align: left;
	direction: ltr;
}

.besanj-auth__error {
	display: block;
	color: #c9302c;
	font-size: 0.85em;
	margin-top: 0.35em;
	min-height: 1.1em;
}

.besanj-auth__field-hint {
	display: block;
	color: #999;
	font-size: 0.8em;
	margin-top: 0.35em;
}

.besanj-auth__debug-hint {
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	border: 1px dashed #d4a72c;
	border-radius: 4px;
	background: #fdf6e3;
	color: #8a6d1a;
	font-size: 0.85em;
	direction: ltr;
	text-align: center;
}

.besanj-auth__masked-mobile {
	direction: ltr;
	display: inline-block;
}

.besanj-auth input.besanj-auth__has-error {
	border-color: #c9302c !important;
}

.besanj-auth__notice--general {
	margin-top: 1em;
	padding: 0.75em 1em;
	border-radius: 4px;
	background: #fbeaea;
	color: #c9302c;
}

.besanj-auth__step--profile .woocommerce-form-row--first,
.besanj-auth__step--profile .woocommerce-form-row--last {
	width: 48%;
}

.besanj-auth__step--profile .woocommerce-form-row--first {
	float: right;
	margin-left: 4%;
}

.besanj-auth__step--profile .woocommerce-form-row--last {
	float: left;
}

.besanj-auth__step--profile::after {
	content: "";
	display: block;
	clear: both;
}

button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.besanj-auth .form-row .woocommerce-form-login__submit,
.besanj-auth .form-row .woocommerce-form-register__submit {
	width: 100%;
}

/* Bigger, more spaced-out digits for the OTP code than regular fields,
   so it reads like a code rather than a normal text field. */
.besanj-auth__otp-input {
	text-align: center;
	font-size: 1.6em;
	letter-spacing: 0.5em;
}

@media (max-width: 480px) {
	.besanj-auth {
		max-width: 340px;
		padding: 2.5em 1.5em 3em;
	}

	.besanj-auth ::placeholder {
		text-align: center;
	}

	.besanj-auth h2 {
		text-align: center;
	}

	.besanj-auth input.input-text {
		text-align: center;
	}

	.besanj-auth .woocommerce-form-row {
		margin-bottom: .5em;
	}

	.besanj-auth__step--profile .woocommerce-form-row--first,
	.besanj-auth__step--profile .woocommerce-form-row--last {
		float: none;
		width: 100%;
	}
}

/**
 * "Besanj - Full Screen Login" page template (templates/page-fullscreen.php):
 * a header/footer-free, full-viewport page with just the logo and the
 * form, centered for both mobile and desktop.
 */

html:has(body.besanj-auth-page) {
	height: 100%;
}

body.besanj-auth-page {
	min-height: 100vh;
	margin: 0;
	background: #fff;
}

.besanj-auth-page__wrapper {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

/* Brand lockup: small logo mark (if set) stacked above the site name, so
   the name itself - not just the mark - is what visitors come to
   recognize and remember. */
.besanj-auth-page__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 2em;
	text-decoration: none;
}

.besanj-auth-page__logo {
	max-height: 32px;
	width: auto;
}

.besanj-auth-page__site-name {
	font-size: 1.6em;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--wc-primary, #333);
}

/* No card: plain, borderless form on the page's own white background. */
.besanj-auth-page .besanj-auth {
	margin: 0;
	width: 100%;
	max-width: 400px;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

@media (max-width: 480px) {
	/* More specific than the plain `.besanj-auth` mobile rule above, so
	   it needs its own copy of the same max-width/height adjustments. */
	.besanj-auth-page .besanj-auth {
		max-width: 340px;
		padding: 1em 0 3em;
	}
}