/*
 * Sign-in, registration and password recovery.
 *
 * A credential screen is the first thing a prospective seller sees, and
 * wp-login.php told them they were signing into somebody's WordPress. This is
 * a split panel instead: brand and proof on the left, the form on the right,
 * and a trust strip underneath — the shape people already recognise from every
 * merchant portal they have used.
 *
 * Tokens come from marketplace.css; nothing here hard-codes a brand colour.
 */

.advmp-auth {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--advmp-space-6) var(--advmp-space-4) var(--advmp-space-7);
}

/* ---------------------------------------------------------------------- */
/* Shell                                                                   */
/* ---------------------------------------------------------------------- */

.advmp-auth__shell {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	background: var(--advmp-surface);
	border: 1px solid var(--advmp-border);
	border-radius: var(--advmp-radius-lg);
	box-shadow: var(--advmp-shadow-lg);
	overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Brand panel                                                             */
/* ---------------------------------------------------------------------- */

.advmp-auth__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--advmp-primary-soft);
	color: var(--advmp-primary-contrast);
}

.advmp-auth__brand-top {
	padding: var(--advmp-space-6) var(--advmp-space-6) var(--advmp-space-2);
	background: linear-gradient(155deg, #12459c 0%, var(--advmp-primary) 45%, #001f4d 100%);
}

.advmp-auth__wordmark {
	display: flex;
	align-items: center;
	gap: var(--advmp-space-3);
	margin: 0 0 var(--advmp-space-3);
	font-family: var(--advmp-font-heading, var(--advmp-font));
	font-size: var(--advmp-fs-xl);
	font-weight: 400;
	line-height: 1.2;
	color: var(--advmp-primary-contrast);
}

.advmp-auth__wordmark strong { font-weight: 700; }

.advmp-auth__wordmark-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--advmp-radius);
	background: rgba(255, 255, 255, .16);
}

.advmp-auth__wordmark-icon .advmp-icon { width: 22px; height: 22px; }

.advmp-auth__tagline {
	margin: 0;
	max-width: 18ch;
	font-size: var(--advmp-fs-md);
	line-height: 1.45;
	color: rgba(255, 255, 255, .82);
}

/*
 * The curve is drawn rather than faked with border-radius so it stretches with
 * the panel instead of pinching at narrow widths.
 */
.advmp-auth__wave {
	display: block;
	width: 100%;
	height: 58px;
	margin-top: -1px;
	color: #002456;
}

/* ---------------------------------------------------------------------- */
/* Dashboard mock — decoration, never read as the user's own figures        */
/* ---------------------------------------------------------------------- */

.advmp-auth__mock {
	display: flex;
	margin: calc(var(--advmp-space-5) * -1) var(--advmp-space-5) var(--advmp-space-6);
	border-radius: var(--advmp-radius);
	background: var(--advmp-surface);
	box-shadow: var(--advmp-shadow);
	overflow: hidden;
}

.advmp-auth__mock-rail {
	flex-shrink: 0;
	width: 36px;
	padding: var(--advmp-space-3) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	background: var(--advmp-primary-soft);
}

.advmp-auth__mock-rail span {
	width: 13px;
	height: 13px;
	border-radius: 4px;
	background: var(--advmp-primary);
	opacity: .28;
}

.advmp-auth__mock-rail span:first-child { opacity: .7; }

.advmp-auth__mock-body {
	flex: 1;
	min-width: 0;
	padding: var(--advmp-space-3) var(--advmp-space-4) var(--advmp-space-4);
}

.advmp-auth__mock-head {
	margin: 0 0 var(--advmp-space-3);
	padding-bottom: var(--advmp-space-2);
	border-bottom: 1px solid var(--advmp-border);
	font-size: var(--advmp-fs-sm);
	font-weight: 600;
	color: var(--advmp-text);
}

.advmp-auth__mock-hero {
	position: relative;
	padding: var(--advmp-space-3);
	border: 1px solid var(--advmp-border);
	border-radius: var(--advmp-radius-sm);
}

.advmp-auth__mock-label {
	display: block;
	font-size: var(--advmp-fs-xs);
	color: var(--advmp-text-subtle);
}

.advmp-auth__mock-value {
	display: block;
	margin-top: 2px;
	font-size: var(--advmp-fs-lg);
	font-weight: 700;
	color: var(--advmp-text);
}

.advmp-auth__spark {
	position: absolute;
	right: var(--advmp-space-3);
	bottom: var(--advmp-space-3);
	width: 96px;
	height: 30px;
	color: var(--advmp-primary);
}

.advmp-auth__mock-tiles {
	margin-top: var(--advmp-space-2);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--advmp-space-2);
}

.advmp-auth__mock-tiles div {
	padding: var(--advmp-space-2) var(--advmp-space-3);
	border: 1px solid var(--advmp-border);
	border-radius: var(--advmp-radius-sm);
}

.advmp-auth__mock-num {
	display: block;
	margin-top: 1px;
	font-size: var(--advmp-fs-md);
	font-weight: 700;
	color: var(--advmp-text);
}

/* Fills the panel below the mock, and keeps the brand column from ending in
 * a tall band of empty teal on desktop. */
.advmp-auth__points {
	list-style: none;
	margin: auto 0 0;
	padding: 0 var(--advmp-space-5) var(--advmp-space-6);
	display: grid;
	gap: var(--advmp-space-3);
}

.advmp-auth__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--advmp-space-2);
	font-size: var(--advmp-fs-sm);
	line-height: 1.45;
	color: var(--advmp-primary-hover);
}

.advmp-auth__points .advmp-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--advmp-primary);
	stroke-width: 3;
}

/* ---------------------------------------------------------------------- */
/* Form card                                                               */
/* ---------------------------------------------------------------------- */

.advmp-auth__card {
	display: flex;
	flex-direction: column;
	padding: var(--advmp-space-7) var(--advmp-space-6) var(--advmp-space-5);
	background: var(--advmp-surface);
}

.advmp-auth__head {
	margin-bottom: var(--advmp-space-5);
	text-align: center;
}

/*
 * Doubled class: this page renders through the theme's post wrapper, and
 * Bevesi ships `.klb-post h1 { font-size: 38.5px }` at (0,1,1) — which
 * outranks a single class and blew the heading up to blog-post size.
 */
.advmp-auth__title.advmp-auth__title {
	margin: 0 0 var(--advmp-space-2);
	font-family: var(--advmp-font-heading, var(--advmp-font));
	font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--advmp-text);
}

.advmp-auth__sub {
	margin: 0;
	font-size: var(--advmp-fs-base);
	color: var(--advmp-text-muted);
}

.advmp-auth__form { margin: 0; }

.advmp-auth__form .advmp-field { margin-bottom: var(--advmp-space-4); }

/* Field with a leading icon, and optionally a reveal toggle. */
.advmp-inputwrap {
	position: relative;
	display: flex;
	align-items: center;
}

.advmp-inputwrap .advmp-input { width: 100%; }

.advmp-inputwrap__icon {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--advmp-text-subtle);
	pointer-events: none;
}

.advmp-inputwrap.has-icon .advmp-input { padding-left: 42px; }

.advmp-inputwrap.has-reveal .advmp-input { padding-right: 44px; }

.advmp-inputwrap__reveal {
	position: absolute;
	right: 6px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--advmp-radius-sm);
	background: transparent;
	color: var(--advmp-text-subtle);
	cursor: pointer;
}

.advmp-inputwrap__reveal:hover { color: var(--advmp-text); background: var(--advmp-surface-muted); }

.advmp-inputwrap__reveal:focus-visible {
	outline: 2px solid var(--advmp-primary);
	outline-offset: 1px;
}

.advmp-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--advmp-space-2);
	margin-bottom: var(--advmp-space-5);
}

.advmp-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--advmp-space-2);
	font-size: var(--advmp-fs-sm);
	color: var(--advmp-text-muted);
	cursor: pointer;
}

.advmp-auth__link {
	font-size: var(--advmp-fs-sm);
	font-weight: 600;
	color: var(--advmp-primary);
	text-decoration: none;
}

.advmp-auth__link:hover { text-decoration: underline; }

.advmp-auth__alt {
	margin: var(--advmp-space-5) 0 0;
	text-align: center;
	font-size: var(--advmp-fs-sm);
	color: var(--advmp-text-muted);
}

.advmp-auth__signed { display: grid; gap: var(--advmp-space-3); }

/* Pushed to the bottom of the card so it reads as a footer at any height. */
.advmp-auth__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--advmp-space-2);
	margin: auto 0 0;
	padding-top: var(--advmp-space-5);
	font-size: var(--advmp-fs-xs);
	color: var(--advmp-text-subtle);
}

.advmp-auth__secure .advmp-icon { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------- */
/* Role switch                                                             */
/* ---------------------------------------------------------------------- */

.advmp-auth__roles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: var(--advmp-space-5);
	padding: 4px;
	border-radius: var(--advmp-radius);
	background: var(--advmp-surface-sunken);
}

/* `text-align` and the tightened leading are for the reseller tab, whose label
   is a phrase rather than two words and wraps onto a second line in the
   narrower half of the grid. Both tabs keep the same height because the
   switch is a grid, so the wrap costs nothing. */
.advmp-auth__role {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--advmp-space-2);
	padding: 9px 12px;
	border-radius: var(--advmp-radius-sm);
	font-size: var(--advmp-fs-sm);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--advmp-text-muted);
	text-decoration: none;
	transition: background var(--advmp-speed) var(--advmp-ease), color var(--advmp-speed) var(--advmp-ease);
}

/* Without this the icon shrinks to nothing once the label wraps. */
.advmp-auth__role .advmp-icon { flex-shrink: 0; }

.advmp-auth__role:hover { color: var(--advmp-text); }

.advmp-auth__role.is-active {
	background: var(--advmp-surface);
	color: var(--advmp-primary);
	box-shadow: var(--advmp-shadow-sm);
}

/*
 * Step rail sits tighter here than on the standalone registration page, and
 * carries a rule beneath it so the numbered progress reads as its own band
 * instead of floating between the role switch and the first field.
 *
 * Doubled to outrank `.advmp-steps.advmp-steps`, which owns the shorthands.
 */
.advmp-auth__steps.advmp-auth__steps {
	margin: 0 0 var(--advmp-space-5);
	padding: 0 0 var(--advmp-space-5);
	border-bottom: 1px solid var(--advmp-border);
}

.advmp-auth__form .advmp-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.advmp-auth__form .advmp-step-actions { margin-top: var(--advmp-space-5); }

/* ---------------------------------------------------------------------- */
/* Trust strip                                                             */
/* ---------------------------------------------------------------------- */

.advmp-auth__features {
	list-style: none;
	margin: var(--advmp-space-5) 0 0;
	padding: var(--advmp-space-5);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--advmp-space-5);
	background: var(--advmp-surface);
	border: 1px solid var(--advmp-border);
	border-radius: var(--advmp-radius-lg);
}

.advmp-auth__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--advmp-space-3);
}

.advmp-auth__feature-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--advmp-radius);
	background: var(--advmp-primary-soft);
	color: var(--advmp-primary);
}

.advmp-auth__feature-icon .advmp-icon { width: 20px; height: 20px; }

.advmp-auth__features strong {
	display: block;
	font-size: var(--advmp-fs-base);
	font-weight: 600;
	color: var(--advmp-text);
}

/*
 * Scoped to the text column on purpose. `.advmp-auth__features span` would
 * also match the icon badge — which is a span — and its (0,1,1) beats the
 * badge rule's (0,1,0), repainting every icon in muted grey.
 */
.advmp-auth__features li > div span {
	display: block;
	margin-top: 2px;
	font-size: var(--advmp-fs-sm);
	line-height: 1.5;
	color: var(--advmp-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.advmp-auth__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.advmp-auth__shell { grid-template-columns: 1fr; }

	.advmp-auth__brand-top { padding-bottom: var(--advmp-space-4); }

	.advmp-auth__tagline { max-width: none; }

	.advmp-auth__wave { height: 34px; }

	/*
	 * The mock is a stack of sample numbers. On a phone it would push the
	 * actual sign-in form below the fold, which is the one thing this screen
	 * must not do.
	 */
	.advmp-auth__mock { display: none; }

	.advmp-auth__points {
		grid-template-columns: 1fr;
		padding: var(--advmp-space-4) var(--advmp-space-4) var(--advmp-space-5);
		margin: 0;
	}

	.advmp-auth__card { padding: var(--advmp-space-6) var(--advmp-space-4) var(--advmp-space-4); }
}

@media (max-width: 600px) {
	.advmp-auth { padding: var(--advmp-space-4) var(--advmp-space-3) var(--advmp-space-6); }

	.advmp-auth__features {
		grid-template-columns: 1fr;
		gap: var(--advmp-space-4);
		padding: var(--advmp-space-4);
	}

	.advmp-auth__roles { grid-template-columns: 1fr; }

	/* On a phone the brand panel is pure preamble; three claims above the
	 * sign-in fields push the form itself off the first screen. */
	.advmp-auth__points { display: none; }

	.advmp-auth__form .advmp-step-actions { flex-wrap: wrap; }
}