/* The /register/ page (mu-plugin adorno-register.php). The fields are checkout's (theme assets/css/checkout-page.css):
   the label sits where the value goes and floats up when the field is in use; the grid never moves when a message shows. */
.adorno-reg {
	--ad-ink: #000;
	--ad-muted: #6e7075;
	--ad-faint: #a3a5a9;
	--ad-rule: #e7e9ec;
	--ad-alert: #c0392b;
	max-width: 560px;
}

.adorno-reg-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--ad-ink);
	border-radius: 999px;
	padding: 3px;
	margin: 0 0 4px;
}
.adorno-reg-toggle a {
	text-align: center;
	padding: 9px 12px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 20px;
	color: var(--ad-ink);
	text-decoration: none;
}
.adorno-reg-toggle a[aria-selected="true"], .adorno-reg-toggle a[aria-selected="true"]:hover, .adorno-reg-toggle a[aria-selected="true"]:focus { background: #000 !important; color: #fff !important; }
.adorno-reg-toggle a:hover { color: inherit; opacity: .75; }
.adorno-reg-toggle a[aria-selected="true"]:hover { opacity: 1; }

.adorno-reg-intro { font-size: 14px; line-height: 1.5; color: var(--ad-muted); margin: 0 0 6px; }

.adorno-reg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	align-items: start;
}
.adorno-reg-wide, .adorno-reg-sub, .adorno-reg-exists { grid-column: 1 / -1; }

/* What belongs to the other view is not there at all, so nothing shifts. */
.adorno-reg[data-kind="private"] .adorno-reg-only-trade,
.adorno-reg[data-kind="trade"] .adorno-reg-only-private { display: none !important; }

.adorno-reg-row { position: relative; margin: 0; padding: 26px 0 0; }
.adorno-reg-row > label {
	position: absolute;
	left: 0;
	top: 26px;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	color: var(--ad-faint);
	pointer-events: none;
	transition: top .16s ease, font-size .16s ease, line-height .16s ease, color .16s ease;
	margin: 0;
}
.adorno-reg-row:focus-within > label,
.adorno-reg-row.is-filled > label,
.adorno-reg-row:has(input:not(:placeholder-shown)) > label {
	top: 6px;
	font-size: 12px;
	line-height: 16px;
	color: var(--ad-muted);
}
.adorno-reg-row input,
.adorno-reg-row select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 15px;
	line-height: 24px;
	color: var(--ad-ink);
	background: none;
	border: 0 !important;
	border-bottom: 1px solid var(--ad-rule) !important;
	border-radius: 0;
	padding: 0 0 6px;
	min-height: 30px;
	height: auto;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.adorno-reg-row select { padding-right: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e7075'/%3E%3C/svg%3E") no-repeat right 4px top 10px; }
.adorno-reg-row input::placeholder { color: transparent !important; }
/* A field's hint ("8 characters or more") on the label's line, while it is in use; an error takes its place. */
.adorno-reg-row[data-hint]:focus-within:not(.is-invalid)::after { content: attr(data-hint); position: absolute; top: 6px; right: 0; font-size: 11px; line-height: 16px; color: var(--ad-faint); pointer-events: none; }
.adorno-reg-row input:focus, .adorno-reg-row select:focus { border-bottom-color: var(--ad-ink) !important; outline: none; }
.adorno-reg-row.is-invalid input, .adorno-reg-row.is-invalid select { border-bottom-color: var(--ad-alert) !important; }
/* The message sits on the label's line, at the right: showing it never moves anything. */
.adorno-reg-err { position: absolute; top: 6px; right: 0; font-size: 11px; line-height: 16px; color: var(--ad-alert); pointer-events: none; }
.adorno-reg-row.is-invalid > label { color: var(--ad-alert); }

.adorno-reg-sub { margin: 18px 0 0; font-size: 13px; font-weight: 500; color: var(--ad-ink); }
.adorno-reg-exists { margin: 2px 0 6px; padding: 10px 12px; background: #f8f8f7; font-size: 14px; line-height: 1.5; }
.adorno-reg-exists a { color: var(--ad-ink); text-decoration: underline; }
.adorno-reg-hp { position: absolute !important; left: -9999px !important; }

.adorno-reg-terms { font-size: 12px; line-height: 1.5; color: var(--ad-muted); margin: 16px 0 0; }
.adorno-reg-terms a { color: var(--ad-ink); text-decoration: underline; }
.adorno-reg-said { margin: 12px 0 0; font-size: 14px; color: var(--ad-alert); }
.adorno-reg-submit {
	display: block;
	width: 100%;
	margin: 14px 0 0;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ad-ink);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}
.adorno-reg-submit[disabled] { opacity: .5; cursor: wait; }

/* The left half: one panel per view, laid out the same (logo, heading, intro, benefits) on its image under its
   overlay, all from Theme Options. BuddyBoss's own heading and text give way to them. */
body.adorno-reg-panels .login-split > div:not(.adorno-reg-panel) { display: none !important; }
/* Only the view's own panel; the theme styles every div in the column, so this needs its weight. */
body.adorno-reg-panels .login-split > .adorno-reg-panel { display: none !important; }
body.adorno-reg-panels:not(.adorno-reg-trade) .login-split .adorno-reg-panel-private,
body.adorno-reg-trade .login-split .adorno-reg-panel-trade {
	display: flex !important;
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	z-index: 2;
	/* From a fixed height, not centred: the logo and heading stand in the same place in both views. */
	align-items: flex-start;
	justify-content: center;
	background: #000 center / cover no-repeat;
	color: #fff;
}
.adorno-reg-panel-shade { position: absolute; inset: 0; background: #000; pointer-events: none; }
.adorno-reg-panel-in { position: relative; width: 100%; max-width: 620px !important; margin: 0 auto !important; padding: clamp(48px, 16vh, 160px) 8% 48px !important; box-sizing: border-box; font-size: 17px; line-height: 1.6; color: #fff; }
.adorno-reg-panel-in h2 { color: #fff !important; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; font-weight: 500; margin: 0 0 18px; }
.adorno-reg-panel-text, .adorno-reg-panel-text p { color: #fff !important; margin: 0 0 12px; }
.adorno-reg-benefits { list-style: none; margin: 24px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; border-top: 1px solid rgba(255,255,255,.3); }
.adorno-reg-benefits li { margin: 0 !important; padding: 13px 0 !important; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 15px; line-height: 1.4; color: #fff; list-style: none !important; }

/* The logo above the form, on every screen: black on white, white in Trade; its height from Theme Options' Logo Width
   (ADORNO's width), the same for both, so ADORNO stays put when toggling. */
body.registration .register-section-logo { text-align: left !important; }
body.registration .register-section-logo .adorno-reg-top-logo { display: none !important; line-height: 0; color: #000; }
body.registration .register-section-logo .adorno-reg-top-logo svg { display: block; height: var(--adorno-logo-h, 27px); width: auto; }
body.registration:not(.adorno-reg-trade) .register-section-logo .adorno-reg-top-private,
body.registration.adorno-reg-trade .register-section-logo .adorno-reg-top-trade { display: inline-block !important; }
body.adorno-reg-trade .register-section-logo .adorno-reg-top-logo { color: #fff; }

/* The form's half, centred top to bottom (desktop). */
@media (min-width: 992px) {
	body.registration #primary.bs-bp-container-reg { min-height: 100vh; display: flex !important; flex-direction: column; justify-content: center; box-sizing: border-box; }
}

/* Trade: the form's half black, its words, fields and button white. */
body.adorno-reg-trade, body.adorno-reg-trade #page, body.adorno-reg-trade #content, body.adorno-reg-trade #primary.bs-bp-container-reg { background: #000 !important; }
body.adorno-reg-trade #primary .entry-title, body.adorno-reg-trade #primary .entry-header, body.adorno-reg-trade #primary .entry-header a { color: #fff !important; }
body.adorno-reg-trade .adorno-reg { --ad-ink: #fff; --ad-muted: #b9bbbf; --ad-faint: #8a8c90; --ad-rule: rgba(255,255,255,.28); --ad-alert: #ff8a7a; }
body.adorno-reg-trade .adorno-reg-row input, body.adorno-reg-trade .adorno-reg-row select { color: #fff; }
body.adorno-reg-trade .adorno-reg-row select option { color: #000; }
body.adorno-reg-trade .adorno-reg-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff'/%3E%3C/svg%3E"); }
body.adorno-reg-trade .adorno-reg-row input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #000 inset !important; }
body.adorno-reg-trade .adorno-reg-toggle a[aria-selected="true"] { background: #fff; color: #000; }
body.adorno-reg-trade .adorno-reg-submit { background: #fff; color: #000; }
body.adorno-reg-trade .adorno-reg .adorno-reg-exists { background: #1a1a1a !important; color: #fff !important; }
body.adorno-reg-trade footer, body.adorno-reg-trade footer a, body.adorno-reg-trade .footer-bottom, body.adorno-reg-trade .footer-bottom a { color: #b9bbbf !important; }

/* A phone keeps two fields a row (one only below 360px), so the Trade form still fits a phone's first screen. */
@media (max-width: 600px) {
	.adorno-reg-grid { column-gap: 16px; }
	.adorno-reg-benefits { grid-template-columns: 1fr; }
	body.registration #content.site-content { padding-top: 16px !important; }
	body.registration .bs-bp-container-reg { padding-top: 8px !important; }
	body.registration .bs-bp-container-reg .entry-title { font-size: 22px !important; }
	.adorno-reg-row > label, .adorno-reg-row input, .adorno-reg-row select { font-size: 16px; } /* 16px: iOS does not zoom */
	.adorno-reg-row:focus-within > label, .adorno-reg-row.is-filled > label { font-size: 11px; }
}
@media (max-width: 359px) {
	.adorno-reg-grid { grid-template-columns: 1fr; }
}

/* Never below the fold (Martin, 19 October 2026): the page's own header kept tight on this page, tighter on short
   screens. The Trade form, the longest, ends above 768px at a laptop's height. */
body.registration .register-section-logo { margin-top: 0 !important; margin-bottom: 36px !important; padding-top: 0 !important; max-width: 520px !important; }
/* The theme's 450px column made two fields a row too narrow for their labels; there is room for 520. */
body.registration article.bp_register { max-width: 520px !important; }
body.registration .bs-bp-container-reg .entry-header { display: flex !important; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 14px !important; padding: 0 !important; }
body.registration .bs-bp-container-reg .entry-header > span { position: static !important; white-space: nowrap; }
body.registration .bs-bp-container-reg .entry-title { font-size: 26px !important; line-height: 1.2 !important; margin: 0 !important; }
body.registration .bs-bp-container-reg { padding-top: 28px !important; padding-bottom: 20px !important; }
@media (max-height: 820px) and (min-width: 601px) {
	body.registration .bs-bp-container-reg { padding-top: 16px !important; }
	body.registration .register-section-logo { margin-bottom: 24px !important; }
	.adorno-reg-row { padding-top: 24px; }
	.adorno-reg-row > label { top: 24px; }
	.adorno-reg-toggle a { padding: 7px 12px; }
}

/* The theme colours the register page's labels and links itself (#buddypress, .register-page): the Trade view's white
   wins only with these. */
body.adorno-reg-trade .adorno-reg .adorno-reg-row > label { color: #8a8c90 !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-row:focus-within > label,
body.adorno-reg-trade .adorno-reg .adorno-reg-row.is-filled > label { color: #b9bbbf !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-row.is-invalid > label { color: #ff8a7a !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-toggle { border-color: #fff !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-toggle a { color: #fff !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-toggle a[aria-selected="true"],
body.adorno-reg-trade .adorno-reg .adorno-reg-toggle a[aria-selected="true"]:hover,
body.adorno-reg-trade .adorno-reg .adorno-reg-toggle a[aria-selected="true"]:focus { color: #000 !important; background: #fff !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-terms { color: #b9bbbf !important; }
body.adorno-reg-trade .adorno-reg a { color: #fff !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-submit { color: #000 !important; background: #fff !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-row input,
body.adorno-reg-trade .adorno-reg .adorno-reg-row select { color: #fff !important; border-bottom-color: rgba(255,255,255,.28) !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-row input:focus,
body.adorno-reg-trade .adorno-reg .adorno-reg-row select:focus { border-bottom-color: #fff !important; }

/* After sending: the notice in place of the form. */
.adorno-reg-done { padding: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ad-ink); }
.adorno-reg-done p { margin: 0 0 12px; color: inherit; }
.adorno-reg[data-kind="private"] .adorno-reg-done .adorno-reg-only-trade,
.adorno-reg[data-kind="trade"] .adorno-reg-done .adorno-reg-only-private { display: none; }
.adorno-reg-done-small { font-size: 13px; color: var(--ad-muted) !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-done { color: #fff; }
.adorno-reg-terms + .adorno-reg-terms { margin-top: 6px; }

/* Anything the script hides stays hidden, whatever its own display. */
.adorno-reg [hidden] { display: none !important; }

/* The register page has no footer (the theme's checkout footer with its links). */
body.registration .checkout-footer, body.registration footer.site-footer, body.registration #colophon { display: none !important; }
body.adorno-reg-trade .adorno-reg .adorno-reg-done-small a { color: #fff !important; }