/**
 * Public form styling for the forms the plugin renders into theme pages: the
 * contact-page shortcode (`.rc-contact-form`), the account page's Support tab
 * (`.rc-support-form`), the affiliate application shortcode
 * (`.rc-affiliate-application`) and the Affiliate tab's details form
 * (`.rc-affiliate-details`).
 *
 * EVERY RULE HERE IS PALETTE-FREE, and that is the whole point of the file.
 * `docs/deployment/wp-integration.md` forbids inline colours in member-facing
 * plugin markup because an inline hex cannot be overridden by a theme
 * stylesheet, so it silently wins on every install. The contact form shipped
 * with inline light backgrounds (#f3faf5, #fdf3f4) and a #555 note, which on
 * the dark RetireRange theme gave the page's own near-white ink on a near-white
 * box — the same failure the referral panel had in 2026-09. The fix is not a
 * dark palette inlined instead: it is to assert NO colour at all.
 *
 * So: `color: inherit` takes whatever ink the theme has already set for the
 * surrounding copy, `currentColor` draws the notice rule in that same ink, and
 * `opacity` mutes a note without naming a colour. All three are correct on a
 * light theme and on a dark one, and the theme can still override any of them
 * from its own stylesheet.
 *
 * The labels need a rule at all because Astra paints bare `label` elements with
 * its own Customizer colour and a reduced size, which on a dark page reads as
 * near-black small text (owner reports, 2026-10-27). `.rc-field-label` inside a
 * form wrapper is specificity 0,2,0, which beats Astra's `.ast-container label`.
 */

.rc-contact-form,
.rc-affiliate-application {
	max-width: 640px;
}

.rc-contact-form .rc-field-label,
.rc-support-form .rc-field-label,
.rc-affiliate-application .rc-field-label,
.rc-affiliate-details .rc-field-label,
.rc-contact-form legend,
.rc-support-form legend,
.rc-affiliate-application legend {
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
	display: inline-block;
	margin-bottom: 4px;
}

/* A notice (sent / blocked / validation errors). No background and no border
   box: the box was asserting a light surface the theme does not share, and it
   was carrying no meaning the heading does not already carry. A rule in the
   page's own ink marks the block without claiming a palette. */
.rc-form-notice {
	margin: 0 0 16px;
	padding: 2px 0 2px 14px;
	border-left: 3px solid currentColor;
}

.rc-form-notice p,
.rc-form-notice li {
	color: inherit;
}

.rc-form-notice p:first-child {
	margin-top: 0;
}

.rc-form-notice p:last-child,
.rc-form-notice ul:last-child {
	margin-bottom: 0;
}

/* The retention note under the send button. Muted by opacity, not by a hex. */
.rc-contact-form .rc-form-note,
.rc-support-form .rc-form-note,
.rc-affiliate-application .rc-form-note {
	color: inherit;
	opacity: 0.75;
	font-size: 0.9375rem;
}

/* The affiliate forms print a label as a bare string beside its field, where
   the contact form puts a <strong> and a <br>, so the weight and the stacking
   are stated here. */
.rc-affiliate-application .rc-field-label,
.rc-affiliate-details .rc-field-label,
.rc-affiliate-application legend {
	display: block;
	font-weight: 600;
}

.rc-affiliate-application input[type="text"],
.rc-affiliate-application input[type="email"],
.rc-affiliate-application input[type="tel"],
.rc-affiliate-application select,
.rc-affiliate-details input[type="text"],
.rc-affiliate-details input[type="tel"],
.rc-affiliate-details select {
	width: 100%;
}

/* The top margin sets the radio groups apart from the address field above them,
   whose paragraph margin is the theme's and was too tight to read as a break. */
.rc-affiliate-application fieldset {
	margin: 24px 0 16px;
	padding: 0;
	border: 0;
}
.rc-affiliate-application legend {
	padding: 0;
}

.rc-affiliate-application .rc-check-label {
	display: block;
	margin-bottom: 4px;
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.rc-affiliate-application .rc-field-hint,
.rc-affiliate-details .rc-field-hint {
	display: block;
	margin-top: 4px;
	color: inherit;
	opacity: 0.75;
	font-size: 0.875rem;
}

/* Bold rather than red: a colour named here would win over the theme's, and the
   words already say what's wrong. */
.rc-affiliate-application .rc-field-error,
.rc-affiliate-details .rc-field-error {
	display: block;
	margin-top: 4px;
	padding-left: 10px;
	border-left: 3px solid currentColor;
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* The W-9 warning beside the button matters too much to mute. */
.rc-affiliate-application .rc-affiliate-w9-warning {
	margin: 16px 0;
	padding-left: 14px;
	border-left: 3px solid currentColor;
	color: inherit;
}

/* The Affiliate tab's buttons, one size and with room between them. The theme
   sizes .rr-btn and draws .rc-qr-toggle smaller for the Referrals tab, so the
   toggle takes .rr-btn's figures here, and the min-width fits the longest label. */
.rc-affiliate-tab .rr-btn,
.rc-affiliate-tab .rc-referral-qr .rc-qr-toggle {
	box-sizing: border-box;
	min-width: 13em;
	font-size: 15px;
}

.rc-affiliate-tab .rc-referral-qr .rc-qr-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	line-height: 1;
}

.rc-affiliate-tab form + form {
	margin-top: 16px;
}

/* The payout grid's date range: labels above the dates, wrapping on a phone. */
.rc-affiliate-tab .rc-affiliate-range {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 16px;
}

.rc-affiliate-tab .rc-affiliate-range p {
	margin: 0;
}

.rc-affiliate-tab .rc-affiliate-range .rc-field-label {
	display: block;
	color: inherit;
}