/*
 * In-page authentication modal — modern-auth-system.
 *
 * Palette and spacing follow the house rules in CLAUDE.md: white background,
 * #e8e8e8 hairline borders, near-black primary CTA, brand red #c0392b used
 * SPARINGLY (here: exactly one element, the error message), generous padding.
 *
 * ⚠️ Every rule is scoped under .mas-auth-modal. Woodmart and Elementor both ship
 * broad element rules — .elementor img { height:auto } once collapsed a card image
 * to 0px on this site — so an unscoped .tab or .input here would be a trap for
 * somebody else's page.
 *
 * ⚠️ RTL: the layout is a single column with no left/right offsets, so it mirrors
 * correctly under dir="rtl" with no [dir="rtl"] override. Do not add one — that
 * would un-mirror it. The one exception is the close button, which is pinned to a
 * physical corner and therefore uses logical properties.
 */

.mas-auth-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;              /* above Woodmart's sticky header (999) and its overlays */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mas-auth-modal[hidden] {
	display: none;
}

.mas-auth-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, .55);
}

.mas-auth-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 430px;
	margin: auto;
	background: #ffffff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	padding: 26px 24px 22px;
	font-family: inherit;
}

.mas-auth-modal__x {
	position: absolute;
	top: 8px;
	inset-inline-end: 10px;       /* logical: flips on /ar/ without an RTL override */
	background: none;
	border: 0;
	padding: 4px 8px;
	font-size: 24px;
	line-height: 1;
	color: #9a9a9a;
	cursor: pointer;
}

.mas-auth-modal__x:hover {
	color: #0a0a0a;
}

.mas-auth-modal__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 800;
	color: #0a0a0a;
	line-height: 1.3;
	padding-inline-end: 26px;     /* keeps a long title clear of the × */
}

.mas-auth-modal__intro {
	margin: 0 0 18px;
	font-size: .86rem;
	line-height: 1.55;
	color: #6b6b6b;
}

/* The single red element on this dialog. */
.mas-auth-modal__msg {
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px solid #e8e8e8;
	border-inline-start: 4px solid #c0392b;
	border-radius: 6px;
	background: #fff8f8;
	font-size: .82rem;
	line-height: 1.5;
	color: #1a1a1a;
}

.mas-auth-modal__msg.is-ok {
	border-inline-start-color: #1a7f4b;
	background: #f6fbf8;
}

.mas-auth-modal__msg[hidden] {
	display: none;
}

/* ── Social ─────────────────────────────────────────────────────────────── */

.mas-auth-modal__social {
	margin: 0 0 4px;
}

/* Nextend renders its own container; make the buttons fill the dialog width so
   the social route reads as the primary one, which is what the owner asked for. */
.mas-auth-modal__social .nsl-container-buttons {
	display: block;
}

.mas-auth-modal__social .nsl-container-buttons a {
	display: block;
	margin-bottom: 8px;
}

.mas-auth-modal__social .nsl-container {
	text-align: center;
}

/* tn3dp-legal appends its consent notice to the shortcode output. */
.mas-auth-modal__social .tnl-social-consent {
	margin: 8px 0 0;
	font-size: .72rem;
	line-height: 1.45;
	color: #8a8a8a;
}

.mas-auth-modal__or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 16px;
	color: #9a9a9a;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.mas-auth-modal__or::before,
.mas-auth-modal__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #f0f0f0;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.mas-auth-modal__tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 18px;
	border-bottom: 1px solid #f0f0f0;
}

.mas-auth-modal__tab {
	flex: 1 1 auto;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 8px 4px 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9a9a9a;
	cursor: pointer;
	margin-bottom: -1px;
}

.mas-auth-modal__tab.is-active {
	color: #0a0a0a;
	border-bottom-color: #0a0a0a;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.mas-auth-modal__panel[hidden] {
	display: none;
}

.mas-auth-modal__label {
	display: block;
	margin: 0 0 5px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #6b6b6b;
}

.mas-auth-modal__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 11px 12px;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	background: #ffffff;
	font-size: .9rem;
	color: #1a1a1a;
	line-height: 1.4;
}

.mas-auth-modal__input:focus {
	outline: none;
	border-color: #0a0a0a;
}

.mas-auth-modal__input::placeholder {
	color: #9a9a9a;
	opacity: 1;                   /* Firefox applies its own wash without this */
}

.mas-auth-modal__pw {
	position: relative;
}

.mas-auth-modal__pw .mas-auth-modal__input {
	padding-inline-end: 62px;     /* room for the reveal button, both directions */
}

.mas-auth-modal__reveal {
	position: absolute;
	top: 9px;
	inset-inline-end: 8px;
	background: none;
	border: 0;
	padding: 3px 6px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b6b6b;
	cursor: pointer;
}

.mas-auth-modal__hint {
	margin: -8px 0 14px;
	font-size: .72rem;
	line-height: 1.45;
	color: #8a8a8a;
}

.mas-auth-modal__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px;
	font-size: .78rem;
	line-height: 1.5;
	color: #6b6b6b;
	cursor: pointer;
}

.mas-auth-modal__consent input {
	flex: 0 0 auto;
	margin-top: 3px;
}

.mas-auth-modal__consent a {
	color: #1a1a1a;
	text-decoration: underline;
}

/* ── Actions ────────────────────────────────────────────────────────────── */

.mas-auth-modal__submit {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	border-radius: 6px;
	background: #0a0a0a;
	color: #ffffff;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
}

.mas-auth-modal__submit:hover {
	background: #1a1a1a;
}

.mas-auth-modal__submit[disabled] {
	opacity: .6;
	cursor: default;
}

.mas-auth-modal__links {
	margin: 12px 0 0;
	text-align: center;
	font-size: .78rem;
}

.mas-auth-modal__links a {
	color: #6b6b6b;
	text-decoration: underline;
}

.mas-auth-modal__foot {
	margin: 16px 0 0;
	font-size: .72rem;
	line-height: 1.5;
	color: #8a8a8a;
	text-align: center;
}

@media (max-width: 480px) {
	.mas-auth-modal {
		padding: 12px 10px;
	}

	.mas-auth-modal__dialog {
		padding: 22px 16px 18px;
	}
}

/* ── Two-factor row (v1.5.0) ──────────────────────────────────────────────
 * Rendered for everyone, revealed by JS only when the server asked for a code —
 * which it does only for an account that has 2FA, i.e. an administrator here.
 *
 * ⚠️ The explicit display:none !important is not belt-and-braces. [hidden] is only
 * a user-agent default, so ONE theme rule setting display on this element would
 * show the code field to every customer. The same rule is written down for the
 * quote tool's teaser for the same reason.
 */
.mas-auth-modal__2fa {
	margin: 0 0 4px;
	padding: 14px 14px 6px;
	border: 1px solid #e8e8e8;
	border-left: 4px solid #c0392b;
	border-radius: 8px;
	background: #fff;
}

.mas-auth-modal__2fa[hidden] {
	display: none !important;
}

.mas-auth-modal__2fa .mas-auth-modal__input {
	letter-spacing: .18em;
	font-variant-numeric: tabular-nums;
}

.mas-auth-modal__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: .78rem;
	color: #6b6b6b;
	cursor: pointer;
}