/**
 * [spr_referral_link] shortcode — base styles.
 *
 * Scoped entirely to .spx-referral-link*: never targets Salient (.nectar-*,
 * .wpb_*) or any other theme wrapper. Must stand alone against an unstyled
 * theme (verified against the default Twenty Twenty-Four theme).
 */

.spx-referral-link {
	--spx-rl-gap: 0.5em;
	--spx-rl-radius: 0.25rem;
	--spx-rl-border-color: #d0d5dd;
	--spx-rl-bg: #fff;
	--spx-rl-padding-inline: 0.75em;
	--spx-rl-padding-block: 0.5em;
	--spx-rl-button-bg: #1c1c1c;
	--spx-rl-button-color: #fff;
	--spx-rl-button-bg-copied: #2f7d4f;

	display: flex;
	flex-direction: column;
	gap: var(--spx-rl-gap);
	max-width: 32rem;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.spx-referral-link__label {
	font-weight: 600;
}

.spx-referral-link__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--spx-rl-gap);
}

.spx-referral-link__url {
	flex: 1 1 16rem;
	min-width: 0;
	padding-inline: var(--spx-rl-padding-inline);
	padding-block: var(--spx-rl-padding-block);
	border: 1px solid var(--spx-rl-border-color);
	border-radius: var(--spx-rl-radius);
	background: var(--spx-rl-bg);
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.spx-referral-link__copy {
	flex: 0 0 auto;
	padding-inline: 1.25em;
	padding-block: var(--spx-rl-padding-block);
	border: 1px solid transparent;
	border-radius: var(--spx-rl-radius);
	background: var(--spx-rl-button-bg);
	color: var(--spx-rl-button-color);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.spx-referral-link__copy.is-copied {
	background: var(--spx-rl-button-bg-copied);
}

.spx-referral-link__message {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Visually hidden but still announced by screen readers via aria-live. */
.spx-referral-link__status {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}