/*
 * Affiliate area — logged-out forms of the AffiliateWP [affiliate_area]
 * shortcode (page /affiliate-area/, templates/register.php + login.php:
 * form.affwp-form.affwp-register-form / .affwp-login-form, each a fieldset
 * with a legend, p > label + input rows, .affwp-tos / .affwp-user-remember
 * checkbox labels, input.button submit, p.affwp-lost-password). The page is a
 * plain content page (page.php reading layout → .sisa-page-body), so without
 * this file the forms inherit the 17px article type, 1.4em paragraph margins
 * and the yellow content-link underline, while Blocksy's 40px/3px-radius
 * fields and the plugin's own forms.min.css do the rest.
 *
 * Voice = the shop's form grammar (Mein-Konto login/register in checkout.css,
 * Kontakt consent row in kontakt.css): 13/500 labels, 48px hairline fields on
 * --sisa-bg-input, ink border on focus, sharp 16px checkbox with ink mark,
 * Brauer 20/700 section titles, Blocksy's primary button bridge untouched.
 *
 * Scope: every selector hangs off .affwp-register-form / .affwp-login-form
 * (the plugin's logged-OUT forms; the logged-in dashboard / portal forms carry
 * neither class) — nothing here reaches other pages or the affiliate portal.
 * Form IDs are suffixed with a random number, hence class selectors only.
 */

/* ---------- form chrome (both forms) ---------- */
.affwp-form:is(.affwp-register-form, .affwp-login-form) {
	margin: 0;
	font-family: var(--sisa-body, "IBM Plex Sans", sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sisa-text-1, #3f3d3a);
	/* Blocksy styles fields through these vars — bridge them onto the tokens
	   first (same pattern as checkout.css), explicit properties below. */
	--theme-form-field-border-radius: 0;
	--theme-form-field-height: 48px;
	--theme-form-field-border-initial-color: var(--sisa-hairline, #eceae3);
	--theme-form-field-border-focus-color: var(--sisa-ink, #1a1a1a);
	--theme-form-field-background-initial-color: var(--sisa-bg-input, #f4f4f4);
	--theme-form-field-background-focus-color: var(--sisa-bg-input, #f4f4f4);
	--theme-form-field-text-initial-color: var(--sisa-ink, #1a1a1a);
	--theme-form-field-text-focus-color: var(--sisa-ink, #1a1a1a);
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) fieldset {
	border: 0; margin: 0; padding: 0; min-width: 0;
}
/* Section title = Mein-Konto's "Anmelden" / "Neues Kundenkonto anlegen" H2. */
.affwp-form:is(.affwp-register-form, .affwp-login-form) legend {
	display: block; float: none; width: 100%; box-sizing: border-box;
	margin: 0 0 20px; padding: 0;
	font-family: var(--sisa-display, "Brauer LL", serif);
	font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.4px;
	color: var(--sisa-ink, #1a1a1a);
}
/* Field rows: the reading column's 1.4em paragraph gap → the form scale. */
.affwp-form:is(.affwp-register-form, .affwp-login-form) p {
	margin: 0 0 16px; padding: 0; max-width: none;
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) p:last-child { margin-bottom: 0; }

/* ---------- labels + fields ---------- */
.affwp-form:is(.affwp-register-form, .affwp-login-form) label {
	display: block; margin: 0 0 6px;
	font-size: 13px; font-weight: 500; line-height: 1.4;
	color: var(--sisa-text-1, #3f3d3a);
	cursor: pointer;
}
.affwp-form:is(.affwp-register-form, .affwp-login-form)
	:is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea) {
	display: block; width: 100%; box-sizing: border-box;
	height: 48px; min-height: 48px; margin: 0; padding: 0 14px;
	border: 1px solid var(--sisa-hairline, #eceae3); border-radius: 0;
	background: var(--sisa-bg-input, #f4f4f4);
	font-family: inherit; font-size: 14px; line-height: 1.5;
	color: var(--sisa-ink, #1a1a1a);
	outline: 0; box-shadow: none;
	transition: border-color .12s;
}
/* Focus = the Mein-Konto convention: the hairline turns ink, nothing else
   (the global :focus-visible halo in layout.css is meant for buttons/links;
   text fields always match :focus-visible, so the halo would land on every
   click — the Kontakt form shows that side effect). */
.affwp-form:is(.affwp-register-form, .affwp-login-form)
	:is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea):focus,
.affwp-form:is(.affwp-register-form, .affwp-login-form)
	:is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea):focus-visible {
	border-color: var(--sisa-ink, #1a1a1a);
	outline: 0; box-shadow: none;
}
/* textarea[name] keeps the (0,3,1) specificity of the shared field rule above
   (:is() counts its most specific argument), so source order decides. */
.affwp-form:is(.affwp-register-form, .affwp-login-form) textarea[name] {
	height: auto; min-height: 130px; padding: 12px 14px; resize: vertical;
}

/* ---------- consent / remember-me rows (Kontakt consent grammar) ---------- */
.affwp-form:is(.affwp-register-form, .affwp-login-form) label:is(.affwp-tos, .affwp-user-remember) {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0; padding: 2px 0;
	font-size: 13px; font-weight: 500; line-height: 1.5;
	color: var(--sisa-text-1, #3f3d3a);
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
	border: 1px solid var(--sisa-text-2, #676562); border-radius: 0;
	background: var(--sisa-panel, #fff); background-image: none;
	display: grid; place-content: center; cursor: pointer;
	box-shadow: none;
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="checkbox"]::before {
	content: ""; width: 8px; height: 8px; transform: scale(0);
	background: var(--sisa-ink, #1a1a1a);
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="checkbox"]::after { content: none; }
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="checkbox"]:checked {
	border-color: var(--sisa-ink, #1a1a1a);
	background: var(--sisa-panel, #fff); background-image: none;
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="checkbox"]:checked::before { transform: scale(1); }
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--sisa-yellow, #f4d435); outline-offset: 2px; box-shadow: none;
}
/* Terms link in the consent row + "Passwort vergessen?": the small-link
   grammar shared by the Kontakt consent text and the content pages — ink,
   1px brand underline, ink underline on hover. */
.affwp-form:is(.affwp-register-form, .affwp-login-form) .affwp-tos a,
.affwp-form.affwp-login-form .affwp-lost-password a {
	color: var(--sisa-ink, #1a1a1a);
	text-decoration: none;
	border-bottom: 1px solid var(--sisa-yellow, #f4d435);
	transition: border-color .12s;
}
.affwp-form:is(.affwp-register-form, .affwp-login-form) .affwp-tos a:hover,
.affwp-form.affwp-login-form .affwp-lost-password a:hover {
	text-decoration: none;
	border-bottom-color: var(--sisa-ink, #1a1a1a);
}

/* ---------- submit + lost password ---------- */
/* The yellow primary already comes from Blocksy's --theme-button-* bridge
   (tokens.css); only the plugin's 1px rgba border has to go. */
.affwp-form:is(.affwp-register-form, .affwp-login-form) p:has(> input[type="submit"]) { margin-top: 24px; }
.affwp-form:is(.affwp-register-form, .affwp-login-form) input[type="submit"] {
	border: 0; border-radius: 0; margin: 0; cursor: pointer;
}
.affwp-form.affwp-login-form .affwp-lost-password {
	margin-top: 16px; font-size: 14px; line-height: 1.5;
}

/* ---------- validation notice (printed by the plugin right before its form) ---------- */
/* Kontakt's failure notice: warm panel, 3px ink rule, no radius, no yellow hex. */
.sisa-page-body > .affwp-errors:has(+ .affwp-form:is(.affwp-register-form, .affwp-login-form)) {
	margin: 0 0 20px; padding: 14px 16px;
	border: 0; border-left: 3px solid var(--sisa-ink, #1a1a1a); border-radius: 0;
	background: var(--sisa-panel-2, #fafaf7);
	color: var(--sisa-ink, #1a1a1a);
	font-size: 14px; line-height: 1.55;
}
.sisa-page-body > .affwp-errors:has(+ .affwp-form:is(.affwp-register-form, .affwp-login-form)) p.affwp-error {
	margin: 0 !important; padding: 0;
}
.sisa-page-body > .affwp-errors:has(+ .affwp-form:is(.affwp-register-form, .affwp-login-form)) p.affwp-error + p.affwp-error { margin-top: 6px !important; }

/* ---------- composition ---------- */
/* Login = the compact secondary action, framed as the design's hairline card
   (panel + 1px hairline + 24px, the SysCard); registration stays the primary,
   open form on the archive background — same surfaces as Mein-Konto. DOM
   order (register → login) is kept everywhere, so tab order = visual order. */
.affwp-form.affwp-login-form {
	box-sizing: border-box;
	padding: 24px;
	background: var(--sisa-panel, #fff);
	border: 1px solid var(--sisa-hairline, #eceae3);
}
.affwp-form.affwp-register-form { margin-block: 0 40px; }

/* Desktop: register left, login card right (sticky while the long form
   scrolls — the checkout order-review pattern). The plain-page reading column
   (760/720) widens to 1040 for this page only; breadcrumb and H1 follow via
   the template's own --col variable. */
@media (min-width: 1024px) {
	.sisa-page:has(> .sisa-page-body > .affwp-form.affwp-login-form) {
		--col: 1040px;
		max-width: 1040px;
	}
	.sisa-page-body:has(> .affwp-form.affwp-login-form) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		/* Row 2 is the flexible one: when a notice occupies row 1 of one column,
		   the other form spans both rows and its surplus height must land in
		   row 2 — with two auto rows it would be split and open a gap under
		   the notice. Without a notice row 2 is empty and collapses to 0. */
		grid-template-rows: auto 1fr;
		grid-auto-flow: dense;
		column-gap: 56px;
		align-items: start;
	}
	.sisa-page-body:has(> .affwp-form.affwp-login-form) > .affwp-form:is(.affwp-register-form, .affwp-login-form),
	.sisa-page-body:has(> .affwp-form.affwp-login-form) > .affwp-errors {
		max-width: none; width: 100%; min-width: 0; margin-inline: 0;
	}
	.sisa-page-body:has(> .affwp-form.affwp-login-form) > .affwp-form.affwp-register-form { grid-column: 1; margin-block: 0; }
	.sisa-page-body:has(> .affwp-form.affwp-login-form) > .affwp-form.affwp-login-form {
		grid-column: 2;
		position: sticky;
		top: calc(var(--header-height, 100px) + 24px);
	}
	/* A validation notice sits above the form it belongs to, in that column;
	   the other form spans both rows so the columns stay top-aligned. */
	.sisa-page-body:has(> .affwp-form.affwp-login-form) > .affwp-errors:has(+ .affwp-form.affwp-register-form) { grid-column: 1; }
	.sisa-page-body:has(> .affwp-form.affwp-login-form) > .affwp-errors:has(+ .affwp-form.affwp-login-form) { grid-column: 2; }
	.sisa-page-body:has(> .affwp-errors + .affwp-form.affwp-login-form) > .affwp-form.affwp-register-form { grid-row: 1 / span 2; }
	.sisa-page-body:has(> .affwp-errors + .affwp-form.affwp-register-form) > .affwp-form.affwp-login-form { grid-row: 1 / span 2; }
}

/* Phone: tighter card inset, the 720 column is already full-bleed. */
@media (max-width: 767px) {
	.affwp-form.affwp-login-form { padding: 20px; }
}