/* Revolutionary License Server — pricing/account/success styles.
 * Themeable via CSS custom properties. Override in your theme's stylesheet
 * or via the WP customizer.
 */

.rls-pricing,
.rls-account,
.rls-success {
	--rls-bg: #ffffff;
	--rls-fg: #1a1a1a;
	--rls-muted: #6b7280;
	--rls-border: #e5e7eb;
	--rls-accent: #2563eb;
	--rls-accent-fg: #ffffff;
	--rls-error: #b91c1c;
	--rls-success: #16a34a;
	--rls-radius: 8px;
	--rls-radius-lg: 14px;
	--rls-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 24px -8px rgba(0, 0, 0, .12);
	--rls-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var(--rls-font);
	color: var(--rls-fg);
	max-width: 560px;
	margin: 2rem auto;
}

/* ---------- Pricing card ---------- */

.rls-pricing__card {
	background: var(--rls-bg);
	border: 1px solid var(--rls-border);
	border-radius: var(--rls-radius-lg);
	box-shadow: var(--rls-shadow);
	padding: 2rem;
}

.rls-pricing__name {
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.rls-pricing__tagline {
	margin: 0 0 1.5rem;
	color: var(--rls-muted);
	line-height: 1.45;
}

.rls-pricing__price-row {
	display: flex;
	align-items: baseline;
	gap: .25rem;
	margin: 1rem 0 1.5rem;
}

.rls-pricing__currency {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--rls-muted);
}

.rls-pricing__amount {
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}

.rls-pricing__interval {
	color: var(--rls-muted);
	font-weight: 500;
}

.rls-plan-toggle {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}

.rls-plan-toggle legend {
	grid-column: 1 / -1;
	margin: 0 0 .5rem;
	font-weight: 600;
	color: var(--rls-muted);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rls-plan-toggle__option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	padding: .75rem 1rem;
	border: 2px solid var(--rls-border);
	border-radius: var(--rls-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.rls-plan-toggle__option:hover {
	border-color: var(--rls-accent);
}

.rls-plan-toggle__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.rls-plan-toggle__option:has(input:checked) {
	border-color: var(--rls-accent);
	background: rgba(37, 99, 235, .06);
}

.rls-plan-toggle__name {
	font-weight: 600;
}

.rls-plan-toggle__price {
	color: var(--rls-muted);
	font-size: .9rem;
}

.rls-pricing__features {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.rls-pricing__features li {
	padding-left: 1.5rem;
	position: relative;
	color: var(--rls-fg);
	line-height: 1.4;
}

.rls-pricing__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--rls-success);
	font-weight: 700;
}

/* ---------- Forms ---------- */

.rls-form {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.rls-form__row {
	display: grid;
	gap: .35rem;
}

.rls-form__label {
	font-size: .875rem;
	font-weight: 600;
	color: var(--rls-fg);
}

.rls-form__optional {
	font-weight: 400;
	color: var(--rls-muted);
}

.rls-form__input {
	width: 100%;
	box-sizing: border-box;
	padding: .65rem .8rem;
	border: 1px solid var(--rls-border);
	border-radius: var(--rls-radius);
	font: inherit;
	color: inherit;
	background: var(--rls-bg);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.rls-form__input:focus {
	outline: none;
	border-color: var(--rls-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rls-accent) 20%, transparent);
}

.rls-payment-element {
	min-height: 80px;
}

/* ---------- Buttons ---------- */

.rls-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	border-radius: var(--rls-radius);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .12s ease, border-color .12s ease, color .12s ease, transform .04s ease;
}

.rls-button:active { transform: translateY(1px); }
.rls-button:disabled { opacity: .6; cursor: not-allowed; }

.rls-button--primary {
	background: var(--rls-accent);
	color: var(--rls-accent-fg);
}

.rls-button--primary:hover { background: color-mix(in srgb, var(--rls-accent) 88%, black); }

.rls-button--ghost {
	background: transparent;
	color: var(--rls-fg);
	border-color: var(--rls-border);
}

.rls-button--ghost:hover { background: color-mix(in srgb, var(--rls-fg) 4%, transparent); }

.rls-button--small {
	padding: .35rem .65rem;
	font-size: .8125rem;
}

.rls-button__spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: rls-spin .7s linear infinite;
}

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

/* ---------- Status text ---------- */

.rls-error {
	color: var(--rls-error);
	font-size: .875rem;
	margin: 0;
	line-height: 1.4;
}

.rls-status {
	color: var(--rls-success);
	background: color-mix(in srgb, var(--rls-success) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--rls-success) 30%, transparent);
	border-radius: var(--rls-radius);
	padding: .65rem .8rem;
	font-size: .9rem;
}

.rls-fineprint,
.rls-account__fineprint {
	color: var(--rls-muted);
	font-size: .8125rem;
	margin: 0;
	line-height: 1.45;
}

.rls-fineprint code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	background: color-mix(in srgb, var(--rls-fg) 8%, transparent);
	padding: 1px 5px;
	border-radius: 4px;
}

/* ---------- Account ---------- */

.rls-account__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.rls-account__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.rls-account__email {
	color: var(--rls-muted);
	margin: .25rem 0 0;
	font-size: .9rem;
}

.rls-account__lede {
	color: var(--rls-muted);
	margin-bottom: 1.5rem;
}

.rls-account__empty {
	border: 1px dashed var(--rls-border);
	border-radius: var(--rls-radius);
	padding: 1.5rem;
	text-align: center;
	display: grid;
	gap: 1rem;
	justify-items: center;
}

.rls-account__licenses {
	display: grid;
	gap: 1rem;
}

.rls-license {
	background: var(--rls-bg);
	border: 1px solid var(--rls-border);
	border-radius: var(--rls-radius-lg);
	padding: 1.25rem;
}

.rls-license__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.rls-license__pill {
	display: inline-block;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: color-mix(in srgb, var(--rls-success) 12%, transparent);
	color: color-mix(in srgb, var(--rls-success) 80%, black);
}

.rls-license--expired .rls-license__pill,
.rls-license--canceled .rls-license__pill,
.rls-license--inactive .rls-license__pill {
	background: color-mix(in srgb, var(--rls-error) 10%, transparent);
	color: color-mix(in srgb, var(--rls-error) 75%, black);
}

.rls-license__expiry {
	color: var(--rls-muted);
	font-size: .875rem;
}

.rls-license__key-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--rls-fg) 4%, transparent);
	border-radius: var(--rls-radius);
	padding: .5rem .75rem;
}

.rls-license__key {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1rem;
	letter-spacing: .03em;
	flex: 1 1 auto;
	user-select: all;
}

.rls-license__actions {
	margin-top: 1rem;
}

/* ---------- Success page ---------- */

.rls-success {
	text-align: center;
}

.rls-success__check {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	background: var(--rls-success);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
}

.rls-success__title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
}

.rls-success__lede {
	color: var(--rls-muted);
	margin: 0 0 1.5rem;
}

.rls-success__license {
	background: var(--rls-bg);
	border: 1px solid var(--rls-border);
	border-radius: var(--rls-radius-lg);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	text-align: left;
}

.rls-success__license-label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--rls-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .5rem;
}

.rls-success__actions {
	margin: 1.5rem 0;
}

.rls-success__nextsteps {
	text-align: left;
	background: color-mix(in srgb, var(--rls-fg) 4%, transparent);
	border-radius: var(--rls-radius-lg);
	padding: 1.25rem 1.5rem;
}

.rls-success__nextsteps h3 {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
}

.rls-success__nextsteps ol {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--rls-fg);
	line-height: 1.5;
}