/* ---------------------------------------------------
   Meta Jewelry — Brand system: Clear (2026)
   Tokens
--------------------------------------------------- */
:root {
	--mj-white: #FFFFFF;
	--mj-surface: #F4F5F7;
	--mj-surface-2: #EDEEF0;
	--mj-charcoal: #2E3136;
	--mj-green: #1C3A2C;

	--mj-gold-shadow: #B0872F;
	--mj-gold-mid: #D7A866;
	--mj-gold-core: #FFD123;
	--mj-gold-glint: #F9CB20;
	--mj-gold-highlight: #FCF8D0;

	--mj-font-display: 'Newsreader', serif;
	--mj-font-text: 'Figtree', sans-serif;
	--mj-font-mono: 'DM Mono', monospace;

	/* Placeholder hero ground until the final visual direction is confirmed. */
	--mj-hero-bg: var(--mj-green);
}

/* ---------------------------------------------------
   Reset
--------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--mj-font-text);
	font-size: 16px;
	line-height: 1.5;
	color: var(--mj-charcoal);
	background: var(--mj-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* The home page is a single full-bleed hero (see #mj-hero below) with nothing else on the page -
   it should never scroll at all. Belt-and-suspenders alongside #mj-hero's own height cap: if a
   mobile browser's viewport-height unit ever measures even a pixel taller than what's actually
   visible (the well-known iOS Safari address-bar case being the main one), this stops that from
   ever surfacing as a scrollable page rather than relying on the height cap alone. */
body.mj-header-on-hero { overflow: hidden; height: 100vh; height: 100svh; }

/* ---------------------------------------------------
   Preloader
--------------------------------------------------- */
#mj-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(28, 58, 44, 0.35);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, visibility .5s ease;
}
body.mj-loaded #mj-preloader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.mj-preloader-logo {
	position: relative;
	width: 150px;
}
.mj-preloader-logo img {
	position: relative;
	width: 100%;
	height: auto;
	opacity: 0.7;
}
.mj-preloader-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg,
		transparent 22%,
		var(--mj-gold-mid) 38%,
		var(--mj-gold-highlight) 50%,
		var(--mj-gold-core) 62%,
		transparent 78%);
	background-size: 280% 100%;
	background-repeat: no-repeat;
	-webkit-mask-image: url('../images/logo-mark-white.svg');
	mask-image: url('../images/logo-mark-white.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: mj-sheen 1s ease-in-out infinite;
}
@keyframes mj-sheen {
	0%   { background-position: -180% 0; }
	90%  { background-position: 180% 0; }
	100% { background-position: 180% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mj-preloader-logo::after { animation: none; background-position: 0 0; }
	#mj-preloader { transition: none; }
}

/* ---------------------------------------------------
   Header — flush to the very top of the viewport
   Two-row approach carried over from the previous site's
   marketplace header (logo + utility row, then primary nav).
--------------------------------------------------- */
#mj-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 24px 40px 16px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.34), transparent);
	transition: background .3s ease, box-shadow .3s ease;
}
/* Every page besides the home hero has plain content behind the fixed header, so it needs a solid
   ground and dark logo instead of the transparent/white treatment made for the video hero. */
body.mj-header-on-light #mj-header {
	background: var(--mj-white);
	box-shadow: 0 1px 0 var(--mj-surface-2);
}
body.mj-header-on-light .mj-header-nav a {
	color: var(--mj-charcoal);
}
body.mj-header-on-light .mj-header-nav a:hover,
body.mj-header-on-light .mj-header-nav a:focus-visible {
	color: var(--mj-gold-shadow);
	border-color: var(--mj-gold-shadow);
	text-shadow: 0 0 10px rgba(176,135,47,.35);
}
.mj-header-row { display: flex; align-items: center; }
.mj-header-row-top { justify-content: flex-start; }

/* Log In/Sign Up trigger (or, once logged in, name + logout) - margin-left:auto pushes it to the
   right within the top row rather than changing that row's own justify-content, so nothing else
   sharing that rule is affected. */
.mj-header-account { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.mj-header-account-trigger,
.mj-header-account-link,
.mj-header-account-logout {
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mj-white);
	background: none;
	border: none;
	cursor: pointer;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, color .25s ease;
}
.mj-header-account-trigger:hover,
body.mj-header-on-light .mj-header-account-trigger { color: var(--mj-charcoal); }
body.mj-header-on-light .mj-header-account-trigger:hover {
	color: var(--mj-gold-shadow);
	border-color: var(--mj-gold-shadow);
}

/* Account dropdown - the trigger button above opens this list. .mj-account-menu wraps both so
   the list can be positioned relative to it regardless of which page's header renders it. */
.mj-account-menu { position: relative; }
.mj-account-menu-list {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	background: var(--mj-white);
	border: 1px solid var(--mj-surface-2);
	box-shadow: 0 16px 40px rgba(0,0,0,.14);
	padding: 8px 0;
	min-width: 170px;
	list-style: none;
	z-index: 200;
}
.mj-account-menu-list li a {
	display: block;
	padding: 10px 20px;
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mj-charcoal);
	white-space: nowrap;
}
.mj-account-menu-list li a:hover { background: var(--mj-surface); color: var(--mj-gold-shadow); }

/* Same sweep as the Catalog page's own top bar logo (.mjc-topbar-logo in catalog.css) - kept
   identical on purpose so every page's header logo animates the same way. */
.mj-header-logo { position: relative; display: inline-flex; }
.mj-header-logo img { width: 170px; height: auto; }
.mj-header-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg,
		transparent 40%,
		var(--mj-gold-highlight) 48%,
		var(--mj-gold-core) 50%,
		var(--mj-gold-highlight) 52%,
		transparent 60%);
	background-size: 320% 100%;
	background-repeat: no-repeat;
	-webkit-mask-image: url('../images/logo-white.svg');
	mask-image: url('../images/logo-white.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: mj-header-sheen 3s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mj-header-sheen {
	0%   { background-position: -220% 0; }
	70%  { background-position: 220% 0; }
	100% { background-position: 220% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mj-header-logo::after { animation: none; background-position: 0 0; }
}

.mj-header-nav {
	justify-content: center;
	gap: clamp(20px, 3vw, 48px);
	margin-top: 14px;
}
.mj-header-nav a {
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mj-white);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, color .25s ease;
}
.mj-header-nav a:hover,
.mj-header-nav a:focus-visible {
	/* gold-highlight (#FCF8D0) is nearly indistinguishable from the resting white text against
	   the dark hero video - gold-core reads as an actual color shift, and the text-shadow gives
	   it a real glow instead of a barely-there tint change. */
	color: var(--mj-gold-core);
	border-color: var(--mj-gold-mid);
	text-shadow: 0 0 12px rgba(255,209,35,.65);
}

@media (max-width: 600px) {
	#mj-header { padding: 18px 20px 14px; }
	.mj-header-logo img { width: 130px; }
	.mj-header-nav { gap: 16px; flex-wrap: wrap; }
	.mj-header-nav a { font-size: 11px; }
}

/* ---------------------------------------------------
   Hero — full-bleed video background
--------------------------------------------------- */
#mj-hero {
	position: relative;
	/* height, not min-height: this section IS the entire home page (see front-page.php) and must
	   never be allowed to grow past one viewport regardless of content - a floor alone can't
	   guarantee that. 100vh first as a fallback for browsers without small-viewport-height
	   support; 100svh after it (same specificity, later wins) is iOS Safari's "chrome fully
	   expanded" height, so this never exceeds what's actually visible even while its address bar
	   is showing. */
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: var(--mj-hero-bg);
	padding: 0 clamp(24px, 6vw, 96px);
	overflow: hidden;
}
.mj-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	filter: blur(0px);
	transform: scale(1);
	transition: filter 1.4s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.4,0,.2,1);
}
#mj-hero.mj-hero--focus .mj-hero-video {
	filter: blur(9px);
	transform: scale(1.03); /* hides the blurred edge softening against the viewport bounds */
}
.mj-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.4) 100%);
}

.mj-hero-cta-stack {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	min-width: 170px;
	padding: 16px 8px;
}

.mj-hero-cta {
	position: relative;
	font-family: var(--mj-font-display);
	font-weight: 300;
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.4;
	color: var(--mj-white);
	text-align: right;
	padding: 7px 0;
	transform-origin: right center;
	text-shadow: 0 0 0 transparent;
	transition: color .4s ease, transform .4s cubic-bezier(.25,.8,.25,1), text-shadow .4s ease;
}
.mj-hero-cta.mj-cta-active {
	color: var(--mj-gold-highlight);
	transform: scale(1.4);
	z-index: 2;
	text-shadow: 0 0 18px rgba(255, 209, 35, 0.85), 0 0 36px rgba(255, 209, 35, 0.5);
}
.mj-hero-cta.mj-cta-neighbor {
	transform: scale(1.15);
	z-index: 1;
}

@media (max-width: 700px) {
	#mj-hero { justify-content: center; padding: 0 24px; }
	.mj-hero-cta-stack { align-items: center; }
	.mj-hero-cta { text-align: center; transform-origin: center; }
}

/* ---------------------------------------------------
   Simple pages — Contact Us (and other non-hero pages).
   Kept plain and separate from the hero treatment on purpose:
   these pages aren't part of this round's redesign.
--------------------------------------------------- */
.mj-simple-page {
	padding: 150px 24px 0;
	background: var(--mj-surface);
	overflow-x: hidden;
}
.mj-simple-page-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.mj-simple-h1 {
	font-family: var(--mj-font-display);
	font-weight: 300;
	font-size: clamp(40px, 5.5vw, 64px);
	color: var(--mj-green);
	margin: 0 0 36px;
}
.mj-simple-h2 {
	font-family: var(--mj-font-display);
	font-weight: 400;
	font-size: clamp(22px, 3vw, 28px);
	color: var(--mj-charcoal);
	margin: 0 0 12px;
}
.mj-contact-intro p {
	color: #666;
	margin: 0 0 28px;
}
.mj-gold-rule {
	display: block;
	width: 64px;
	height: 2px;
	margin: 0 auto 48px;
	background: linear-gradient(90deg, var(--mj-gold-shadow), var(--mj-gold-core), var(--mj-gold-shadow));
}

.mj-contact-info-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-bottom: 0;
	text-align: left;
}
.mj-contact-info-box {
	flex: 1 1 260px;
	max-width: 320px;
	padding: 28px 30px;
	background: var(--mj-white);
	border: 1px solid var(--mj-surface-2);
	border-top: 2px solid var(--mj-gold-mid);
}
.mj-contact-info-box p {
	margin: 10px 0 0;
	color: var(--mj-charcoal);
	font-family: var(--mj-font-text);
}
.mj-contact-info-label {
	display: inline-block;
	font-family: var(--mj-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mj-gold-shadow);
}
.mj-contact-info-box a { color: inherit; border-bottom: 1px solid var(--mj-gold-mid); }

/* Map left / form right — matches the live site's real Contact Us layout. */
.mj-contact-split {
	max-width: 1240px;
	margin: 64px auto 100px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.mj-contact-map {
	min-height: 480px;
}
.mj-contact-map iframe {
	width: 100%;
	height: 100%;
	min-height: 480px;
	border: 0;
	display: block;
}
.mj-contact-form-section {
	padding: 64px clamp(24px, 5vw, 72px);
	background: var(--mj-white);
	text-align: left;
}
.mj-contact-form-section .mj-simple-h2 { margin-top: 10px; }
.mj-contact-form-note {
	color: #777;
	font-size: 14px;
	margin: 0 0 28px;
}
.mj-contact-form-section .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 20px;
}
.mj-contact-form-section .wpcf7-form p { margin: 0; flex: 1 1 100%; }
.mj-contact-form-section .wpcf7-form p.cols.col-1,
.mj-contact-form-section .wpcf7-form p.cols.col-2 { flex: 1 1 calc(50% - 10px); }
.mj-contact-form-section .wpcf7-form input[type="text"],
.mj-contact-form-section .wpcf7-form input[type="email"],
.mj-contact-form-section .wpcf7-form textarea {
	width: 100%;
	font-family: var(--mj-font-text);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--mj-surface-2);
	border-radius: 0;
	background: var(--mj-surface);
	color: var(--mj-charcoal);
	transition: border-color .2s ease;
}
.mj-contact-form-section .wpcf7-form input[type="text"]:focus,
.mj-contact-form-section .wpcf7-form input[type="email"]:focus,
.mj-contact-form-section .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--mj-gold-mid);
	background: var(--mj-white);
}
.mj-contact-form-section .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.mj-contact-form-section .wpcf7-form input[type="submit"] {
	font-family: var(--mj-font-text);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mj-charcoal);
	background: var(--mj-gold-mid);
	border: none;
	padding: 16px 44px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.mj-contact-form-section .wpcf7-form input[type="submit"]:hover {
	background: var(--mj-gold-core);
}
.wpcf7-not-valid-tip { font-size: 12px; color: #b3261e; margin-top: 4px; }
.wpcf7-response-output { margin: 16px 0 0; border-radius: 4px; font-size: 14px; }

@media (max-width: 900px) {
	.mj-contact-split { grid-template-columns: 1fr; }
	.mj-contact-map, .mj-contact-map iframe { min-height: 340px; }
}
@media (max-width: 600px) {
	.mj-simple-page { padding: 130px 20px 0; }
	.mj-contact-form-section { padding: 48px 24px; }
	.mj-contact-form-section .wpcf7-form p.cols.col-1,
	.mj-contact-form-section .wpcf7-form p.cols.col-2 { flex: 1 1 100%; }
}

/* ---------------------------------------------------
   About Us — same "simple page" treatment as Contact Us.
   Content (Our Story text, photo, testimonials) reproduced from the live
   site's real About Us page; the demo-filler sections it also carries
   (Mission/Vision/Credo, Our Team, partner logos) are hidden there too
   (a "hide" class, display:none) and left out here.
--------------------------------------------------- */
.mj-about-story p {
	color: #666;
	font-family: var(--mj-font-text);
	margin: 0 0 18px;
}
.mj-about-story p:last-child { margin-bottom: 0; }

/* Break out of .mj-simple-page-inner's 720px max-width to run edge to edge. */
.mj-about-photo {
	width: 100vw;
	margin: 56px calc(50% - 50vw) 0;
	height: clamp(280px, 42vw, 460px);
}
.mj-about-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mj-testimonials {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px 80px;
}
.mj-testimonial-viewport { position: relative; min-height: 168px; }
.mj-testimonial {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease;
}
.mj-testimonial.is-active { opacity: 1; visibility: visible; }
.mj-testimonial p {
	font-family: var(--mj-font-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.5;
	color: var(--mj-charcoal);
	margin: 0 0 18px;
}
.mj-testimonial footer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mj-testimonial-name { font-family: var(--mj-font-text); font-weight: 600; font-size: 14px; color: var(--mj-green); }

.mj-testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.mj-testimonial-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--mj-surface-2);
	cursor: pointer;
}
.mj-testimonial-dots button.is-active { background: var(--mj-gold-shadow); }


/* ---------------------------------------------------
   Login/Sign Up modal — triggered from the header (and the Catalog topbar) on
   any public page, rather than a dedicated full-page destination. The card
   itself (.mj-gate-window and everything inside it below) is unchanged from
   the original full-page gate; only the backdrop changes, from a blurred
   hero-video background to a plain dim overlay.
--------------------------------------------------- */
.mj-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 20px;
	box-sizing: border-box;
	overflow-y: auto;
}
.mj-modal-overlay.is-open { display: flex; }
/* Backdrop, in two layers behind the card: the video (Home's own hero video behind the overlay
   there, needs nothing extra; every other page gets its own muted/looping copy - see the
   is_front_page() check in template-parts/auth-modal.php) sits at z-index 0, and this tint sits
   above it at z-index 1 - reproducing the exact look of Home's "default login GUI" (dim tint over
   the live video, no blur out here) everywhere the modal can open, not just Home. The frosted-glass
   look on .mj-gate-window itself further down is separate: its own backdrop-filter, unchanged. */
.mj-modal-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 58, 44, .72);
	z-index: 1;
}
.mj-modal-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
body.mj-modal-open { overflow: hidden; }
.mj-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.08);
	color: var(--mj-white);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.mj-modal-close:hover { background: rgba(255,255,255,.18); }
.mj-gate-window {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 440px;
	background: rgba(28, 58, 44, .55);
	backdrop-filter: blur(24px) saturate(140%);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
	border: 1px solid rgba(255,255,255,.16);
	box-shadow: 0 30px 90px rgba(0,0,0,.45);
	padding: 48px 40px 40px;
	text-align: center;
	box-sizing: border-box;
	transition: max-width .3s ease;
}
/* The 5-step trade-account wizard's two-column field rows need real width to breathe —
   simple login stays a compact card, sign-up opens out wider. */
.mj-gate-window.mj-gate-show-register { max-width: 760px; }
.mj-gate-logo { width: 190px; height: auto; margin: 0 auto 36px; display: block; }

.mj-gate-tabs {
	display: flex;
	justify-content: center;
	gap: 32px;
	border-bottom: 1px solid rgba(255,255,255,.16);
	margin-bottom: 28px;
}
.mj-gate-tab {
	font-family: var(--mj-font-text);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,.55);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 2px 14px;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
.mj-gate-tab.is-active { color: var(--mj-white); border-color: var(--mj-gold-mid); }
.mj-gate-tab:hover { color: var(--mj-white); }

/* WooCommerce always renders both the login and register forms together (the
   [woocommerce_my_account] shortcode's default two-column layout) — collapse that into a
   single column and let the tabs above show/hide one at a time instead. */
/* WooCommerce's own column rules (".woocommerce .col2-set .col-2 { float:right; width:48% }")
   are 3 classes deep with no type selector — a tie by class-count against an equally-deep
   override, decided unpredictably by source order. Four ancestor classes (0,4,0) wins outright. */
/* WooCommerce's own registration form (u-column2 in its two-column layout) is disabled site-wide
   via the "Allow customers to create an account" setting - the trade-account sign-up wizard below
   replaces it entirely, since WC's register form only understands email/password and has no
   concept of the client's company/buying-profile/trade fields. With registration disabled,
   WooCommerce no longer renders the .u-columns wrapper at all - just a single .woocommerce block
   holding the login form directly - so what's left to hide on the Sign Up tab is that whole block,
   not a specific column. #mj-modal-auth (an ID, always present) is used for specificity here
   instead of stacking ancestor classes - it outweighs WooCommerce's own 3-class-plus-type-selector
   rules on its own. */
.mj-gate-window.mj-gate-show-register .mj-gate-forms > .woocommerce { display: none; }

.mj-gate-forms h2 { display: none; }
.mj-gate-forms form { text-align: left; }
.mj-gate-forms .form-row { margin: 0 0 18px; }
.mj-gate-forms label {
	display: block;
	font-family: var(--mj-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mj-gold-mid);
	margin-bottom: 8px;
}
.mj-gate-forms label .required { display: none; }
/* WooCommerce's own stylesheet targets inputs via ".woocommerce form .form-row .input-text"
   — 3 classes + 1 type selector (specificity 0,3,1). Three ancestor classes of our own only
   ties it on the class count (0,3,0) and loses on the type column, so this needs FOUR class
   selectors (0,4,0) to win outright regardless of the type column. */
#mj-modal-auth .mj-gate-forms .input-text {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	font-family: var(--mj-font-text);
	font-size: 14px;
	border: 1px solid rgba(255,255,255,.28);
	background: rgba(255,255,255,.08);
	color: var(--mj-white);
	border-radius: 0;
	transition: border-color .2s ease, background .2s ease;
}
.mj-gate-forms input::placeholder { color: rgba(255,255,255,.4); }
#mj-modal-auth .mj-gate-forms .input-text:focus {
	outline: none;
	border-color: var(--mj-gold-mid);
	background: rgba(255,255,255,.14);
}
.mj-gate-forms .form-row { position: relative; }
/* WooCommerce's own dashicon-based toggle relies on a font that isn't reliably loaded on the
   front end, and doesn't take a CSS color the way a real icon does — hidden in favour of the
   same .mj-pw-toggle SVG button used on the wizard's own password fields (main.js injects a
   matching one onto this field specifically, since it's not markup this theme controls). */
.mj-gate-forms .show-password-input { display: none !important; }

.mj-gate-forms .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mj-font-text);
	font-size: 13px;
	color: rgba(255,255,255,.75);
	cursor: pointer;
}
/* The remember-me checkbox and the full-width submit button are siblings inside the same
   WooCommerce .form-row <p> — keep this row as normal block flow (not flex) so the button
   simply stacks below instead of being squeezed into a flex row alongside it. */
.mj-gate-forms .form-row:has(.woocommerce-form-login__rememberme) { margin-bottom: 22px; }

/* :not(.mj-wizard-submit) — the wizard's own submit button is also a button[type=submit] and
   needs to stay respectful of its [hidden] attribute (steps 1-4); this rule's unconditional
   display:block was silently overriding that, since any author rule setting display beats the
   browser's default [hidden]{display:none} regardless of specificity. */
.mj-gate-forms button[type="submit"]:not(.mj-wizard-submit) {
	display: block;
	width: 100%;
	margin-top: 8px;
	font-family: var(--mj-font-text);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mj-charcoal);
	background: var(--mj-gold-mid);
	border: none;
	padding: 16px;
	cursor: pointer;
	transition: background .25s ease;
}
.mj-gate-forms button[type="submit"]:not(.mj-wizard-submit):hover { background: var(--mj-gold-core); }
/* Safety net: guarantee [hidden] always wins inside the wizard, regardless of what any other
   rule in this file sets on the same element (the failure mode above). */
.mj-wizard [hidden] { display: none !important; }

.mj-gate-forms .woocommerce-LostPassword {
	margin: 16px 0 0;
	text-align: center;
	font-family: var(--mj-font-text);
	font-size: 12px;
}
.mj-gate-forms .woocommerce-LostPassword a { color: rgba(255,255,255,.65); border-bottom: 1px solid rgba(255,255,255,.3); }
.mj-gate-forms .woocommerce-LostPassword a:hover { color: var(--mj-gold-mid); border-color: var(--mj-gold-mid); }
/* Self-service reset isn't offered - this reads as a short note (contact line included) rather
   than a single link, so it gets a little more breathing room and a softer base color than the
   plain link it replaces. */
.mj-gate-forms .mj-lost-password-notice {
	color: rgba(255,255,255,.75);
	line-height: 1.6;
}
.mj-gate-forms .mj-lost-password-notice a { font-weight: 500; }

.mj-gate-forms .woocommerce-privacy-policy-text {
	font-family: var(--mj-font-text);
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255,255,255,.5);
	margin: 4px 0 20px;
}
.mj-gate-forms .woocommerce-privacy-policy-text a { color: rgba(255,255,255,.7); }

/* WooCommerce's own notice style reserves padding-left:3.5em for a warning-icon ::before
   at left:1.5em; our padding below is much narrower, so the icon has to go or it overlaps
   the text - dropped in favour of the plain bordered box, which reads cleaner here anyway. */
.mj-gate-forms .woocommerce-error::before,
.mj-gate-forms .woocommerce-message::before,
.mj-gate-forms .woocommerce-info::before { content: none; }
.mj-gate-forms .woocommerce-error,
.mj-gate-forms .woocommerce-message,
.mj-gate-forms .woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 16px;
	font-family: var(--mj-font-text);
	font-size: 13px;
	line-height: 1.5;
	background: rgba(255,255,255,.08);
	border: none;
	border-left: 3px solid var(--mj-gold-mid);
	color: rgba(255,255,255,.9);
}
/* No red exists in the brand kit's palette, and the coral accent read as too jarring against
   the rest of the gate's quiet gold/green language - the deeper end of the gold ramp (gold-shadow
   vs. the lighter gold-mid used for info/success) gives errors a distinct, still on-brand weight. */
.mj-gate-forms .woocommerce-error { border-left-color: var(--mj-gold-shadow); }

/* ---------------------------------------------------
   Trade account sign-up wizard (5 steps) — Sign Up tab on the account gate.
   Custom markup (not WooCommerce's), so it gets its own full field/button styling
   rather than piggybacking on the .woocommerce-* rules above.
--------------------------------------------------- */
.mj-wizard { display: none; text-align: left; }
.mj-gate-window.mj-gate-show-register .mj-wizard { display: block; }
.mj-gate-forms .mj-wizard-h2 {
	display: block;
	font-family: var(--mj-font-display);
	font-weight: 300;
	font-size: 24px;
	color: var(--mj-white);
	text-align: center;
	margin: 0 0 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255,255,255,.16);
}
.mj-wizard-intro { text-align: center; font-size: 13px; color: rgba(255,255,255,.6); margin: -8px 0 24px; }

/* Stepper */
.mj-wizard-steps { display: flex; align-items: flex-start; margin-bottom: 32px; }
.mj-wizard-step-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 84px; }
.mj-wizard-step-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mj-font-text);
	font-weight: 600;
	font-size: 12px;
	color: rgba(255,255,255,.55);
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.25);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mj-wizard-step-label {
	font-family: var(--mj-font-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
	text-align: center;
	line-height: 1.3;
}
.mj-wizard-step-line { flex: 1; height: 1px; background: rgba(255,255,255,.2); margin-top: 15px; }
.mj-wizard-step-item.is-active .mj-wizard-step-circle { background: var(--mj-gold-mid); border-color: var(--mj-gold-mid); color: var(--mj-charcoal); }
.mj-wizard-step-item.is-active .mj-wizard-step-label { color: var(--mj-white); }
.mj-wizard-step-item.is-complete .mj-wizard-step-circle { background: transparent; border-color: var(--mj-gold-mid); color: var(--mj-gold-mid); }
.mj-wizard-step-item.is-complete .mj-wizard-step-line { background: var(--mj-gold-mid); }
/* Every step is freely clickable — jump to any of the 5 panels in any order, not just forward
   one at a time or back to already-visited ones. Submit only unlocks once every panel validates. */
.mj-wizard-step-item { cursor: pointer; }
.mj-wizard-step-item:hover .mj-wizard-step-circle { background: rgba(255,255,255,.1); }

/* Fields */
.mj-field-row { display: flex; gap: 20px; margin-bottom: 18px; }
.mj-field-row.mj-field-row-1 .mj-field { flex-basis: 100%; }
.mj-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.mj-field label {
	font-family: var(--mj-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mj-gold-mid);
	margin-bottom: 8px;
}
.mj-phone-row { display: flex; gap: 8px; }
.mj-phone-number { flex: 1 1 0; min-width: 0; }

/* Custom phone country-code dropdown — a native <select> can't show a short label while closed
   and full country names in its open list at the same time (whichever text it holds shows both
   ways), which is exactly what was clipping long names like "United Kingdom (+44)" in the closed
   box. A trigger button shows the short form; the list shows full names and writes into a plain
   hidden input, so the submitted field is unchanged from a native select's. */
.mj-phone-select { position: relative; flex: 0 0 108px; }
.mj-phone-trigger {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 13px 12px;
	font-family: var(--mj-font-text);
	font-size: 14px;
	border: 1px solid rgba(255,255,255,.28);
	background: rgba(255,255,255,.08);
	color: var(--mj-white);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.mj-phone-trigger:hover,
.mj-phone-select.is-open .mj-phone-trigger { border-color: var(--mj-gold-mid); background: rgba(255,255,255,.14); }
.mj-phone-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same chevron as every native <select> below (.mj-field select's background-image) instead of
   the small Unicode arrow this used to render as its own char - one dropdown icon, same size and
   weight, everywhere on the form rather than two visibly different ones side by side. */
.mj-phone-trigger-arrow {
	width: 12px;
	height: 8px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D7A866' stroke-width='1.4' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform .2s ease;
}
.mj-phone-select.is-open .mj-phone-trigger-arrow { transform: rotate(180deg); }
.mj-phone-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	width: 220px;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--mj-green);
	border: 1px solid rgba(255,255,255,.2);
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.mj-phone-list li {
	padding: 9px 14px;
	font-family: var(--mj-font-text);
	font-size: 13px;
	color: rgba(255,255,255,.85);
	cursor: pointer;
	white-space: nowrap;
}
.mj-phone-list li:hover { background: rgba(255,255,255,.08); color: var(--mj-white); }
.mj-phone-list li.is-selected { color: var(--mj-gold-mid); }
.mj-req { color: var(--mj-gold-mid); }
.mj-hint { font-family: var(--mj-font-text); font-size: 11px; color: rgba(255,255,255,.45); margin-top: 6px; }
.mj-field input[type="text"],
.mj-field input[type="email"],
.mj-field input[type="tel"],
.mj-field input[type="password"],
.mj-field select,
.mj-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	font-family: var(--mj-font-text);
	font-size: 14px;
	border: 1px solid rgba(255,255,255,.28);
	background: rgba(255,255,255,.08);
	color: var(--mj-white);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .2s ease, background .2s ease;
}
.mj-field textarea { resize: vertical; min-height: 90px; font-family: var(--mj-font-text); }
.mj-field input::placeholder,
.mj-field textarea::placeholder { color: rgba(255,255,255,.4); }
.mj-field input:focus,
.mj-field select:focus,
.mj-field textarea:focus {
	outline: none;
	border-color: var(--mj-gold-mid);
	background: rgba(255,255,255,.14);
}
.mj-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D7A866' stroke-width='1.4' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 36px;
	cursor: pointer;
}
.mj-field select option { background: var(--mj-green); color: var(--mj-white); }
/* State/City "Other" fallback (see the Country -> State -> City cascade in main.js) - sits right
   under its own select, only shown once that select's value is literally "Other". */
.mj-geo-other { margin-top: 10px; }
/* .mj-input-wrap holds just the input + its toggle button (not the label above), so the
   button's absolute position is anchored to the input alone — anchoring it to the whole
   .mj-field (label included) was what threw the icon's vertical centering off before. */
.mj-input-wrap { position: relative; }
.mj-field-password input { padding-right: 44px; }
/* The login field's toggle is added by JS onto WooCommerce's own .input-text markup, which
   fights WooCommerce's own padding rule (.woocommerce form .form-row .input-text, 3 classes +
   a type selector) - same specificity fight as the .input-text background/border override
   above, same fix: enough ancestor classes to win outright regardless of the type column. */
#mj-modal-auth .mj-gate-forms .mj-input-wrap .input-text { padding-right: 44px; }
.mj-pw-toggle {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: rgba(255,255,255,.75);
	cursor: pointer;
}
.mj-pw-toggle:hover { color: var(--mj-gold-mid); }
.mj-pw-icon { display: block; }

/* File upload dropzones */
.mj-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 22px 12px;
	border: 1px dashed rgba(255,255,255,.3);
	background: rgba(255,255,255,.04);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.mj-dropzone:hover, .mj-dropzone.is-dragover { border-color: var(--mj-gold-mid); background: rgba(255,255,255,.08); }
.mj-dropzone-icon { font-size: 18px; color: rgba(255,255,255,.5); }
.mj-dropzone-text { font-family: var(--mj-font-text); font-size: 13px; color: rgba(255,255,255,.8); }
.mj-dropzone-hint { font-family: var(--mj-font-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,.4); }
.mj-dropzone-filename { font-family: var(--mj-font-text); font-size: 12px; color: var(--mj-gold-mid); word-break: break-all; }
.mj-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0,0,0,0); }

/* Agreements */
/* .mj-gate-forms label { display: block; ... } (0,1,1) was silently beating this rule's
   `display: flex` — .mj-check-row alone is only (0,1,0), one class with no type selector, so it
   lost the specificity tie every time regardless of source order. That's the actual reason the
   checkbox kept rendering against the text's default baseline instead of centered: the row was
   never a flex container in the first place, no matter how the checkbox itself was styled. One
   extra ancestor class (.mj-wizard) is enough to win outright. */
.mj-wizard .mj-check-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mj-font-text);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255,255,255,.85);
	margin-bottom: 16px;
	cursor: pointer;
}
/* A native checkbox's drawn glyph doesn't always sit centered within its own box-model square
   (OS-dependent rendering), which is what kept throwing the tickbox off against its label text
   even with the row's own flex centering correct. Drawing the box and checkmark ourselves
   (appearance:none + a plain border-triangle tick) makes the visible square exactly the box
   flexbox is centering, so alignment is no longer at the mercy of the browser's own rendering. */
.mj-check-row input {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 16px;
	height: 16px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.4);
	background: rgba(255,255,255,.06);
	border-radius: 2px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.mj-check-row input:checked { background: var(--mj-gold-mid); border-color: var(--mj-gold-mid); }
.mj-check-row input:checked::after {
	content: '';
	width: 4px;
	height: 8px;
	border: solid var(--mj-charcoal);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.mj-check-row input:focus-visible { outline: 2px solid var(--mj-gold-mid); outline-offset: 2px; }

/* Nav row */
.mj-wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; gap: 16px; flex-wrap: wrap; }
.mj-wizard-nav-right { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.mj-wizard-switch {
	font-family: var(--mj-font-text);
	font-size: 12px;
	color: rgba(255,255,255,.6);
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,.3);
	cursor: pointer;
	padding: 0;
}
.mj-wizard-switch:hover { color: var(--mj-gold-mid); border-color: var(--mj-gold-mid); }
.mj-wizard-prev {
	font-family: var(--mj-font-text);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mj-white);
	background: none;
	border: 1px solid rgba(255,255,255,.3);
	padding: 13px 28px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.mj-wizard-prev:hover { border-color: var(--mj-gold-mid); background: rgba(255,255,255,.06); }
.mj-wizard-next,
.mj-wizard-submit {
	font-family: var(--mj-font-text);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mj-charcoal);
	background: var(--mj-gold-mid);
	border: none;
	padding: 14px 30px;
	cursor: pointer;
	transition: background .25s ease;
}
.mj-wizard-next:hover,
.mj-wizard-submit:hover { background: var(--mj-gold-core); }
.mj-wizard-submit:disabled {
	background: rgba(255,255,255,.15);
	color: rgba(255,255,255,.4);
	cursor: not-allowed;
}
.mj-wizard-submit:disabled:hover { background: rgba(255,255,255,.15); }

@media (max-width: 640px) {
	.mj-gate-window.mj-gate-show-register { max-width: 480px; }
	.mj-field-row { flex-direction: column; gap: 18px; }
	.mj-wizard-step-item { width: auto; flex: 1; }
	.mj-wizard-step-label { display: none; }
	.mj-wizard-nav { flex-direction: column-reverse; align-items: stretch; }
	.mj-wizard-nav-right { margin-left: 0; justify-content: space-between; }
}

@media (max-width: 480px) {
	.mj-gate-window { padding: 40px 26px 32px; }
	.mj-gate-logo { width: 160px; }
}

/* ---------------------------------------------------
   Client profile (page-my-account.php, logged-in view) — view-only, by
   design: no field on this page is ever editable here. Reuses the
   .mj-simple-page shell every other plain page uses, just left-aligned
   instead of centered for a field list.
--------------------------------------------------- */
.mj-profile { text-align: left; margin-top: 32px; }
.mj-profile-status {
	display: inline-block;
	font-family: var(--mj-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 28px;
}
.mj-profile-status.status-pending { background: var(--mj-surface-2); color: var(--mj-charcoal); }
.mj-profile-status.status-approved { background: var(--mj-green); color: var(--mj-white); }
.mj-profile-status.status-denied,
.mj-profile-status.status-revoked { background: rgba(46,49,54,.08); color: var(--mj-charcoal); }
.mj-profile-note { font-family: var(--mj-font-text); color: var(--mj-charcoal); opacity: .75; margin: 0 0 28px; }
.mj-profile-field {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mj-surface-2);
}
.mj-profile-field dt {
	font-family: var(--mj-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mj-gold-shadow);
	flex: 0 0 auto;
}
.mj-profile-field dd {
	margin: 0;
	font-family: var(--mj-font-text);
	color: var(--mj-charcoal);
	text-align: right;
}
.mj-profile-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.mj-profile-reconsider,
.mj-profile-logout {
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 2px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.mj-profile-reconsider {
	background: var(--mj-gold-mid);
	color: var(--mj-charcoal);
	border: none;
}
.mj-profile-reconsider:hover { background: var(--mj-gold-core); }
.mj-profile-logout {
	background: none;
	border: 1px solid var(--mj-surface-2);
	color: var(--mj-charcoal);
}
.mj-profile-logout:hover { border-color: var(--mj-charcoal); }
@media (max-width: 600px) {
	.mj-profile-field { flex-direction: column; gap: 2px; }
	.mj-profile-field dd { text-align: left; }
}

/* Post-signup "under review" message, shown inside the modal card in place of
   the tabs/forms right after a successful sign-up (?mj_signup=pending). */
.mj-gate-message { color: var(--mj-white); }
.mj-gate-message h2 {
	font-family: var(--mj-font-display);
	font-weight: 300;
	font-size: 26px;
	margin: 0 0 16px;
}
.mj-gate-message p { font-family: var(--mj-font-text); opacity: .8; line-height: 1.6; margin: 0 0 28px; }
.mj-gate-message-close {
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--mj-gold-mid);
	color: var(--mj-charcoal);
	border: none;
	padding: 12px 28px;
	border-radius: 2px;
	cursor: pointer;
	transition: background .2s ease;
}
.mj-gate-message-close:hover { background: var(--mj-gold-core); }

/* ---------------------------------------------------
   Admin Panel (page-admin-panel.php) - a real front-end page, admin-only,
   reachable solely via the account dropdown. Plain and functionality-first on
   purpose (per the client's own instruction) - no card-heavy visual language
   beyond what the rest of the site already uses, so it stays legible to a
   non-technical admin at a glance.
--------------------------------------------------- */
.mj-admin-panel { max-width: 1160px; margin: 0 auto; padding: 0 24px 100px; text-align: left; }
.mj-admin-panel h1 { font-family: var(--mj-font-display); font-weight: 300; font-size: 34px; margin: 0 0 24px; }
.mj-admin-notice {
	background: var(--mj-surface);
	border-left: 3px solid var(--mj-green);
	padding: 14px 18px;
	margin-bottom: 24px;
	font-family: var(--mj-font-text);
	font-size: 14px;
}
.mj-admin-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--mj-surface-2);
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.mj-admin-tab {
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mj-charcoal);
	opacity: .55;
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
}
.mj-admin-tab:hover { opacity: .8; }
.mj-admin-tab.is-active { opacity: 1; border-color: var(--mj-gold-shadow); color: var(--mj-gold-shadow); }
.mj-admin-empty { font-family: var(--mj-font-text); color: var(--mj-charcoal); opacity: .6; padding: 24px 0; }
.mj-admin-subhead {
	font-family: var(--mj-font-display);
	font-weight: 400;
	font-size: 20px;
	margin: 40px 0 16px;
}
.mj-admin-subhead:first-of-type { margin-top: 0; }

/* One compact row per client, Company first as the primary identifier - used identically by
   Dashboard, Approve/Deny, and Revoke. A row with a detail target opens the view-only overlay on
   click; clicks inside an inline action form are excluded from that (see main.js), so the
   Approve/Deny/Revoke buttons that live in the same row still work as plain buttons. */
.mj-admin-search { margin-bottom: 20px; }
.mj-admin-search input {
	width: 100%;
	max-width: 360px;
	font-family: var(--mj-font-text);
	font-size: 14px;
	padding: 12px 16px;
	border: 1px solid var(--mj-surface-2);
	box-sizing: border-box;
}
.mj-admin-table { border: 1px solid var(--mj-surface-2); margin-bottom: 32px; }
.mj-admin-row {
	display: grid;
	grid-template-columns: 1.4fr 1.8fr 1fr 1.2fr 1.6fr;
	gap: 16px;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--mj-surface-2);
	font-family: var(--mj-font-text);
	font-size: 13px;
	color: var(--mj-charcoal);
	width: 100%;
	background: var(--mj-white);
	text-align: left;
	box-sizing: border-box;
}
.mj-admin-row:last-child { border-bottom: none; }
.mj-admin-row-company { font-weight: 600; }
.mj-admin-row-email { opacity: .65; }
.mj-admin-row-head {
	font-family: var(--mj-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mj-gold-shadow);
	background: var(--mj-surface);
}
.mj-admin-row[data-detail-target] { cursor: pointer; transition: background .15s ease; }
.mj-admin-row[data-detail-target]:hover { background: var(--mj-surface); }
.mj-admin-row-actions { display: flex; gap: 10px; }
.mj-admin-log-table .mj-admin-row { grid-template-columns: 1.2fr 1.1fr 1.5fr 1.5fr 1fr 1.3fr 1.5fr; font-size: 12px; }
.mj-admin-quotations-table .mj-admin-row { grid-template-columns: 1fr 1.4fr 1.4fr 0.7fr 1fr 1.5fr; }
.mj-admin-inline-form { display: inline-block; }

.mj-admin-btn {
	font-family: var(--mj-font-text);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: none;
	border: 1px solid var(--mj-surface-2);
	color: var(--mj-charcoal);
	padding: 10px 20px;
	border-radius: 2px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.mj-admin-btn:hover { border-color: var(--mj-charcoal); }
.mj-admin-btn-primary { background: var(--mj-gold-mid); border-color: var(--mj-gold-mid); color: var(--mj-charcoal); }
.mj-admin-btn-primary:hover { background: var(--mj-gold-core); border-color: var(--mj-gold-core); }
.mj-admin-btn-danger { border-color: var(--mj-gold-shadow); color: var(--mj-gold-shadow); }
.mj-admin-btn-danger:hover { background: var(--mj-gold-shadow); color: var(--mj-white); }

/* Discount rate - the number input inside mj_admin_action_form (Approve/Grant Access) and
   mj_admin_discount_update_form (editing an already-approved client); the badge is read-only,
   next to the status badge on a row and in the detail overlay. */
.mj-admin-discount-input {
	width: 64px;
	font-family: var(--mj-font-mono);
	font-size: 13px;
	border: 1px solid var(--mj-surface-2);
	border-radius: 2px;
	padding: 9px 8px;
	margin-right: 8px;
	color: var(--mj-charcoal);
	background: var(--mj-white);
	-moz-appearance: textfield;
}
.mj-admin-discount-input::-webkit-outer-spin-button,
.mj-admin-discount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mj-admin-discount-badge {
	display: inline-block;
	font-family: var(--mj-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--mj-gold-highlight);
	color: var(--mj-gold-shadow);
	margin-left: 8px;
}

/* Dashboard detail overlay - view only, reuses the same dim-backdrop pattern as the auth modal
   (.mj-modal-open on body) but its own light-themed card, since this sits over a light page. */
.mj-admin-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(46,49,54,.5);
	align-items: flex-start;
	justify-content: center;
	padding: 40px 20px;
	box-sizing: border-box;
	overflow-y: auto;
}
.mj-admin-overlay:not([hidden]) { display: flex; }
.mj-admin-overlay-card {
	position: relative;
	width: 100%;
	max-width: 560px;
	background: var(--mj-white);
	padding: 44px 36px 36px;
	box-sizing: border-box;
}
/* .mj-modal-close is styled for the dark gate modal (near-white on translucent dark green) - this
   card is white, so it needs its own dark-on-light treatment or the button is invisible. */
.mj-admin-overlay-card .mj-modal-close {
	background: var(--mj-surface);
	color: var(--mj-charcoal);
}
.mj-admin-overlay-card .mj-modal-close:hover { background: var(--mj-surface-2); }
.mj-admin-overlay-card h2 { font-family: var(--mj-font-display); font-weight: 400; font-size: 24px; margin: 0 0 4px; }
.mj-admin-detail-email { font-family: var(--mj-font-text); color: var(--mj-charcoal); opacity: .65; margin: 0 0 16px; }
.mj-admin-detail-docs { display: flex; gap: 20px; margin-top: 20px; }
.mj-admin-detail-docs a {
	font-family: var(--mj-font-text);
	font-size: 13px;
	color: var(--mj-gold-shadow);
	border-bottom: 1px solid var(--mj-gold-mid);
}

/* Logs filter + pagination */
.mj-admin-log-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: var(--mj-font-text); font-size: 13px; }
.mj-admin-log-filter select { font-family: var(--mj-font-text); font-size: 13px; padding: 8px 12px; border: 1px solid var(--mj-surface-2); }
.mj-admin-pagination { margin-top: 24px; font-family: var(--mj-font-text); font-size: 13px; display: flex; gap: 8px; }
.mj-admin-pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--mj-surface-2); color: var(--mj-charcoal); }
.mj-admin-pagination .page-numbers.current { background: var(--mj-green); color: var(--mj-white); border-color: var(--mj-green); }

@media (max-width: 900px) {
	.mj-admin-row { grid-template-columns: 1fr; gap: 4px; }
	.mj-admin-row-head { display: none; }
}