/* ===========================
   Signup page (page-signup.php)
   Only what style.css doesn't already provide for this page: the "Register as"
   radio group, conditional section spacing, file-input feedback, and inline
   field-error styling. Everything else (.page, .hero-panel, .form-panel,
   .form-wrap, .brand, .title, .divider, .subtitle, .field, .has-toggle/
   .input-wrap/.toggle-visibility, .consent, .submit-btn base layout,
   .login-link, .select-wrapper) is already covered by style.css.
=========================== */

.reg-type-options {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

.reg-type-option {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-dark);
	cursor: pointer;
}

.reg-type-option input[type="radio"] {
	width: 14px;
	height: 14px;
	accent-color: var(--btn-blue);
}

.reg-section {
	margin-bottom: 0.25rem;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}

/* Reduced-motion visitors get the instant, pre-fix behavior back on purpose --
   an accessibility preference, not a place to force an animation on anyone. */
@media (prefers-reduced-motion: reduce) {
	.reg-section {
		transition: none;
	}
}

.field input[type="file"] {
	width: 100%;
	padding: 8px 13px;
	border: 0.8px solid var(--border-light);
	border-radius: 0;
	font-size: 0.8125rem;
	height: auto;
	background: var(--bg);
}

.file-selected-name {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.field-error {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--brand-red);
}

.field-note {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--text-muted);
}

/* The password-strength note sits inside the Password field, which is only
   one column wide now that Password/Confirm Password sit side by side (see
   style.css's #signupFormRest/#resetPasswordForm grid) -- stretching it to
   span both columns (+ the gap between them) reads much better than
   wrapping across several narrow lines. Safe to overflow into the second
   column: that space is already blank there (Confirm Password has no note
   of its own, and the row is already exactly as tall as Password's content
   makes it either way). */
.field.has-toggle .field-note {
	position: relative;
	width: calc(200% + 1rem);
	max-width: calc(200% + 1rem);
}

/* assets/js/registration/alert.js's render() and zurgle_signup_render_alert()
   (inc/signup/signup-functions.php) both build this exact `.status-callout`
   markup (see that class's own rules further down this file) -- every
   success/error/warning/info message on this page (username availability,
   login/signup/forgot/reset-password errors, the "we've sent a reset link"
   confirmation, the resume-account modal's result, and the whole-page states
   like Broken Link/Verification Successful) shares the ONE icon+text
   structure and per-type color, varying only whether the bordered/
   backgrounded box applies: a `.field-note .status-callout` (any inline
   note sitting directly under a form field -- see that lighter-weight
   override further down this file) drops the box entirely, everything
   else keeps it. */

.generate-password {
	display: inline-block;
	margin-top: 6px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--btn-blue);
	cursor: pointer;
	text-decoration: underline;
}

.field-error-general {
	text-align: center;
	margin-bottom: 1rem;
	font-weight: 500;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
	border-color: var(--brand-red);
}

.consent.has-error {
	margin-bottom: 0.5rem;
}

.submit-btn {
	width: 100%;
	background: var(--btn-blue);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	padding: 12px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: var(--transition);
	margin-bottom: 0.5rem;
}

.submit-btn:hover {
	background: var(--btn-blue-hover);
}

.submit-btn:disabled,
.submit-btn.is-submitting {
	opacity: 0.7;
	cursor: not-allowed;
}

/* #signupStatePending / #signupStateSuccess: heading + description only, no
   form -- reuse the existing .title/.subtitle typography, just add readable
   paragraph spacing since these blocks don't have style.css's form-field
   rhythm to fall back on. */
#signupStatePending p,
#signupStateSuccess p,
#signupStateResumeWelcome p {
	text-align: center;
	margin: 0 0 0.75rem;
	color: var(--text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ===========================
   User Type selection (#signupStateUserType)
=========================== */

.user-type-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.25rem 0 1.5rem;
}

/* Real radio inputs drive selection (native keyboard/screen-reader support --
   Tab/Arrow keys/Space all work with zero custom JS keydown handling) --
   visually hidden, not display:none, so they stay focusable. */
.user-type-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.user-type-card {
	flex: 1 1 0;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1.5rem 1rem;
	border: 1.5px solid var(--border-light);
	border-radius: var(--radius);
	background: var(--bg);
	cursor: pointer;
	text-align: center;
	transition: var(--transition);
}

.user-type-card:hover {
	border-color: var(--btn-blue);
	background: #f5fafc;
}

.user-type-radio:focus-visible + .user-type-card {
	outline: 2px solid var(--btn-blue);
	outline-offset: 2px;
}

.user-type-radio:checked + .user-type-card {
	border-color: var(--btn-blue);
	background: var(--btn-blue);
}

.user-type-radio:checked + .user-type-card .user-type-icon,
.user-type-radio:checked + .user-type-card .user-type-label {
	color: #fff;
}

/* Marketplace Settings > General's "Disable new buyer/seller/company
   registration" toggles -- the card for a closed type is genuinely
   un-selectable (the sibling radio carries a real `disabled` attribute,
   see signup-user-type-selection.php), this just makes that state visible. */
.user-type-radio:disabled + .user-type-card {
	cursor: not-allowed;
	opacity: 0.45;
	background: var(--bg);
}

.user-type-radio:disabled + .user-type-card:hover {
	border-color: var(--border-light);
	background: var(--bg);
}

.user-type-icon {
	font-size: 1.75rem;
	color: var(--btn-blue);
	transition: var(--transition);
}

.user-type-label {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-dark);
	transition: var(--transition);
}

@media (max-width: 480px) {
	.user-type-grid {
		flex-direction: column;
	}

	.user-type-card {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}
}

/* ===========================
   Back-to-user-type link (#signupStateDefault)
=========================== */

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 0.75rem;
	padding: 6px 12px;
	background: #eaf5fa;
	border-radius: var(--radius);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--btn-blue);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.back-link i {
	font-size: 0.75rem;
}

.back-link:hover {
	background: #d9edf5;
	color: var(--btn-blue-hover);
	text-decoration: none;
}

/* ===========================
   "Resume Age Verification" popup (#resumeVerificationModal)
   A frontend-only modal, deliberately separate from the plugin's own
   wp-admin `.zurgle-modal` (different stylesheet, never loaded together).
=========================== */

.signup-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100000;
}

.signup-modal-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100001;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
	padding: 36px;
	width: 90%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
}

.signup-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted);
}

.signup-modal-close:hover {
	color: var(--text-dark);
}

body.signup-modal-open {
	overflow: hidden;
}

/* General-purpose highlighted message callout -- one shared shape, four tones
   (success/error/warning/info), used wherever this page needs to make a
   message's meaning immediately readable at a glance instead of just another
   plain paragraph: the Broken Link/Link Expired states
   (signup-link-issue.php) and the Registration/Verification outcome messages
   (signup-success-state.php). Each tone borrows its color from an existing
   brand variable where one exists (--brand-red for error, --brand-blue for
   info) so these stay visually part of the same palette as the rest of the
   site, not an unrelated set of colors. */
.status-callout {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 12px 14px;
	border-radius: var(--radius);
	font-size: 0.875rem;
	line-height: 1.5;
}

.status-callout p {
	margin: 0;
}

.status-callout p + p {
	margin-top: 0.35rem;
}

.status-callout i {
	font-size: 1.1rem;
	margin-top: 0.1rem;
	flex-shrink: 0;
}

.status-callout--success {
	background: #edf7ed;
	border: 1px solid #b7dfb9;
	color: #235c27;
}

.status-callout--success i {
	color: #2e7d32;
}

.status-callout--error {
	background: #fdecea;
	border: 1px solid #f3b6b2;
	color: #7a2018;
}

.status-callout--error i {
	color: var(--brand-red);
}

.status-callout--warning {
	background: #fff8e1;
	border: 1px solid #ffe082;
	color: #7a5c00;
}

.status-callout--warning i {
	color: #b28704;
}

.status-callout--info {
	background: #eaf5fa;
	border: 1px solid #bcdcf0;
	color: #1c4a72;
}

.status-callout--info i {
	color: var(--brand-blue);
}

/* Field-level inline feedback (username/email availability under
   #signupForm's own fields) -- every ZurgleAlert.show() target that's a
   `.field-note`, not a whole-page state -- reuses the exact same
   .status-callout markup/icon-per-type as the bigger cards (Broken Link,
   Verification Successful) but WITHOUT their bordered/backgrounded box -- a
   compact note sitting directly under a field reads better as just a
   colored icon+text, not a second card competing with the input above it.
   Only background/border/padding/margin are stripped here; each type's own
   text/icon color (set on .status-callout--success/--error/--warning/--info
   and their own `i` rules above) is untouched, so "Username is available."
   still reads in green, an error still reads in red, etc. -- .field-note's
   own margin-top/font-size (signup.css, further up this file) take over
   spacing/sizing instead.

   The forgot/reset-password result messages deliberately do NOT use
   `.field-note` (see `.field-result` below instead) -- per direct request,
   those read as a proper backgrounded card like every other whole-page
   status message, not this compact borderless note. */
.field-note .status-callout {
	display: inline-flex;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-size: inherit;
}

/* The forgot/reset-password AJAX result (#forgotPasswordResult,
   #resetPasswordResult) -- keeps .status-callout's own full box treatment
   (background/border/padding) and its own larger 0.875rem font-size
   untouched, unlike `.field-note` above, so "We've sent you a reset link"
   reads with the same weight as any other status message on this page, not
   a quiet inline note. */
.field-result {
	display: block;
	margin-top: 8px;
}

/* The one inline field-note that's deliberately NOT the lighter-weight
   borderless style above: the "email exists but age verification was never
   completed" message (assets/js/registration/validation.js's
   appendResumeVerificationLink()), specifically called out to stand apart
   from a plain availability note since it carries an actual next step (the
   "Resume Verification" action) rather than just informational text. The
   box lives on `.field-note--highlight` itself, not the inner
   `.status-callout` (which stays borderless per the rule above, inheriting
   this outer background instead) -- that way the appended action link
   naturally sits inside the same card as the message rather than trailing
   after it. Plain 100% width, not a doubling trick -- Email's own `.field`
   (style.css's `.field--full-width`) already spans the whole grid row on its
   own (there is no Username field to share it with anymore), so this note
   just needs to fill its actual container, same as any other field-note.

   Two color variants, not one fixed color: this same box is reused for the
   "we've emailed you a link" confirmation once the visitor actually clicks
   Resume Verification (still this element, ZurgleAlert.show() just replaces
   its content) -- that's a success, not an obstruction, so it needs its own
   green tone rather than staying red. validation.js swaps the modifier
   class, never the base `.field-note--highlight` (which only carries the
   shared box shape/spacing/width). Colors match `.status-callout--error`/
   `--success` above exactly, for the same red/green this page already uses
   everywhere else. */
.field-note--highlight {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: var(--radius);
	padding: 12px 14px;
	margin-top: 8px;
}

.field-note--highlight-error {
	background: #fdecea;
	border: 1px solid #f3b6b2;
}

.field-note--highlight-success {
	background: #edf7ed;
	border: 1px solid #b7dfb9;
}

.resume-verification-inline-link {
	display: inline-block;
	margin-left: 4px;
	color: var(--brand-blue);
	font-weight: 600;
	text-decoration: underline;
}

.resume-verification-inline-link:hover,
.resume-verification-inline-link:focus {
	text-decoration: none;
}

/* go.cam "starting"/"finishing" wait states (assets/js/age-verification.js's
   showMessage() toggles this modifier on #gocamStatusCallout and swaps
   #gocamStatusIcon to a spinning icon) -- a bigger, centered, more polished
   card instead of the small inline icon+text row the resolved (verified/
   failed) states use, since this is the state a visitor may sit looking at
   for several seconds while go.cam loads/validates. `order` visually places
   the spinner AFTER the message text without changing DOM order (so a
   screen reader still meets the actual message first). */
.status-callout--center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	gap: 16px;
	padding: 36px 20px;
	background: linear-gradient(180deg, #eaf5fa 0%, #f5fbfd 100%);
	border: 1px solid #bcdcf0;
	border-radius: calc(var(--radius) * 1.5);
	box-shadow: 0 4px 18px rgba(28, 74, 114, 0.08);
	animation: zurgle-callout-in 0.3s ease;
}

.status-callout--center p {
	order: 2;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}

/* The spinner itself: the plain fa-spinner glyph is replaced with a real
   ring spinner drawn from the icon element's own border (font-size: 0 hides
   the FA glyph, the element's box becomes the ring instead) -- a two-tone
   rotating ring reads as noticeably more "alive"/polished than a single
   spinning glyph at this size, and it's what actually communicates "this is
   still working" during what can be a several-second go.cam load. Static
   (non-loading) states never get this class (showMessage()'s own `isLoading`
   flag only adds fa-spin for the starting/finishing/polling steps), so the
   plain fa-circle-info glyph is untouched everywhere else. */
.status-callout--center i.fa-spin {
	display: inline-block;
	order: 1;
	position: relative;
	width: 52px;
	height: 52px;
	font-size: 0;
	border-radius: 50%;
	border: 4px solid rgba(28, 74, 114, 0.12);
	border-top-color: var(--brand-blue);
	border-right-color: var(--brand-blue);
	animation: zurgle-spin 0.75s linear infinite;
}

/* A second, offset ring pulsing behind the spinning one -- purely decorative
   depth, costs nothing extra in markup since it's a pseudo-element of the
   icon that's already there. */
.status-callout--center i.fa-spin::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px solid rgba(28, 74, 114, 0.15);
	animation: zurgle-pulse 1.6s ease-out infinite;
}

@keyframes zurgle-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes zurgle-pulse {
	0% {
		transform: scale(0.85);
		opacity: 0.6;
	}
	100% {
		transform: scale(1.15);
		opacity: 0;
	}
}

@keyframes zurgle-callout-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.status-callout--center i.fa-spin {
		animation-duration: 2.4s;
	}

	.status-callout--center i.fa-spin::after {
		animation: none;
		opacity: 0;
	}

	.status-callout--center {
		animation: none;
	}
}

@media (max-width: 480px) {
	.signup-modal-dialog {
		width: 95%;
		padding: 20px;
	}
}