/* ── Auth Card (two-step dark UI) ─────────────────────────────────────────── */

.cs-auth-card {
	--cs-auth-bg:        #0b1728;
	--cs-auth-border:    rgba( 96, 200, 230, 0.35 );
	--cs-auth-teal:      #00e5cc;
	--cs-auth-text:      #e2e8f0;
	--cs-auth-muted:     rgba( 226, 232, 240, 0.55 );
	--cs-auth-input-bg:  rgba( 255, 255, 255, 0.05 );
	--cs-auth-input-bd:  rgba( 96, 200, 230, 0.28 );
	--cs-auth-radius-lg: 18px;
	--cs-auth-radius-md: 12px;

	max-width: 480px;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	background: var( --cs-auth-bg );
	border: 1.5px solid var( --cs-auth-border );
	border-radius: var( --cs-auth-radius-lg );
	box-sizing: border-box;
	color: var( --cs-auth-text );
	font-family: var( --wp--preset--font-family--outfit, system-ui, sans-serif );
}

/* Heading */
.cs-auth-heading {
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
	color: var( --cs-auth-teal );
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--sora, inherit);
}

/* Tagline / T&Cs */
.cs-auth-tagline {
	text-align: center;
	color: var( --cs-auth-text );
	font-size: 0.95rem;
	margin: 0 0 2rem;
}

.cs-auth-tagline a {
	color: var( --cs-auth-text );
	text-decoration: underline;
}

/* Error banner */
.cs-auth-error {
	background: rgba( 207, 46, 46, 0.12 );
	color: #fc8181;
	border: 1px solid rgba( 207, 46, 46, 0.3 );
	border-radius: 8px;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	margin-bottom: 1.25rem;
	text-align: center;
}

/* SSO button group */
.cs-auth-sso-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.cs-auth-sso-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.9rem 1rem;
	background: transparent;
	color: var( --cs-auth-text );
	border: 1.5px solid var( --cs-auth-border );
	border-radius: var( --cs-auth-radius-md );
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color 0.15s, background 0.15s;
}

.cs-auth-sso-btn:hover,
.cs-auth-sso-btn:focus-visible {
	border-color: var( --cs-auth-teal );
	background: rgba( 0, 229, 204, 0.06 );
	outline: none;
}

.cs-auth-sso-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* "or" divider */
.cs-auth-or {
	text-align: center;
	color: var( --cs-auth-muted );
	font-size: 0.9rem;
	margin: 0.5rem 0;
}

/* "Sign in with email" button (text-only style, same outlined shape) */
.cs-auth-sso-btn--email {
	margin-top: 0.25rem;
}

/* Back control */
.cs-auth-back {
	margin-bottom: 1.25rem;
}

.cs-auth-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	color: var( --cs-auth-text );
	font-size: 0.95rem;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
	opacity: 0.8;
	transition: opacity 0.15s;
}

.cs-auth-back-btn:hover { opacity: 1; }

/* Email step inputs */
.cs-auth-field {
	margin-bottom: 1rem;
}

.cs-auth-input {
	display: block;
	width: 100%;
	padding: 1rem 1.1rem;
	background: var( --cs-auth-input-bg );
	border: 1.5px solid var( --cs-auth-input-bd );
	border-radius: var( --cs-auth-radius-md );
	color: var( --cs-auth-text );
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cs-auth-input::placeholder {
	color: var( --cs-auth-muted );
}

.cs-auth-input:focus {
	outline: none;
	border-color: var( --cs-auth-teal );
	box-shadow: 0 0 0 3px rgba( 0, 229, 204, 0.15 );
}

/* Submit button — teal→blue gradient pill */
.cs-auth-submit-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.cs-auth-submit {
	display: inline-block;
	padding: 0.85rem 3rem;
	background: linear-gradient( 90deg, #00e5cc 0%, #1a7fff 100% );
	color: #0b1728;
	font-size: 1.05rem;
	font-weight: 700;
	font-family: inherit;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: filter 0.18s, box-shadow 0.18s;
	box-shadow: 0 4px 18px rgba( 0, 229, 204, 0.3 );
}

.cs-auth-submit:hover,
.cs-auth-submit:focus-visible {
	filter: brightness( 1.08 );
	box-shadow: 0 6px 24px rgba( 0, 229, 204, 0.45 );
	outline: none;
}

/* Mobile */
@media ( max-width: 520px ) {
	.cs-auth-card {
		padding: 1.75rem 1.25rem;
		border-radius: var( --cs-auth-radius-md );
	}
	.cs-auth-heading { font-size: 1.6rem; }
}

/* ── Notice / Error ───────────────────────────────────────────────────────── */

.ctrlsite-notice {
    padding: 10px;
    margin-bottom: 15px;
    border-left: 4px solid #bf985c;
    border: 1px solid #bf985c;
    border-left-width: 4px;
}

.ctrlsite-error {
	color: red;
	margin-bottom: 15px;
}

/* Legacy billing-form classes kept for compatibility */
.ctrlsite-billing-form { display: inline-block; }
.ctrlsite-billing-form--funds { margin-right: 10px; }

/* ============================================================
   CUSTOMER DASHBOARD — design tokens + component library
   (mirrors ctrlsite-app.css Remote Sites block; self-contained
   so the SaaS plugin works without Central being installed)
   ============================================================ */

/* -- Scoped design tokens -- */

.ctrlsite-remote-sites-app {
	--cs-rs-surface:      color-mix( in srgb, currentColor 4%, transparent );
	--cs-rs-surface-2:    color-mix( in srgb, currentColor 7%, transparent );
	--cs-rs-border:       color-mix( in srgb, currentColor 18%, transparent );
	--cs-rs-border-soft:  color-mix( in srgb, currentColor 10%, transparent );
	--cs-rs-muted:        color-mix( in srgb, currentColor 55%, transparent );
	--cs-rs-accent:       var( --wp--preset--color--primary, var( --wp--preset--color--accent, var( --wp--preset--color--contrast, #1e1e1e ) ) );
	--cs-rs-success:      var( --wp--preset--color--vivid-green-cyan, #00a32a );
	--cs-rs-warning:      var( --wp--preset--color--luminous-vivid-amber, #dba617 );
	--cs-rs-danger:       var( --wp--preset--color--vivid-red, #cf2e2e );
	/* Card geometry — mirrors ctrlsite-app.css Remote Sites */
	--cs-rs-radius:       10px;
	--cs-rs-card-pad:     1.25rem 1.5rem;
	--cs-rs-card-gap:     1rem;
}

/* -- Buttons -- */

.ctrlsite-btn {
	padding: 0.35em 0.85em !important;
	font-size: var( --wp--preset--font-size--small, 0.8rem ) !important;
	line-height: 1.4 !important;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.15s, opacity 0.15s !important;
}

.ctrlsite-btn:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.ctrlsite-btn--outline {
	background: transparent !important;
	color: inherit !important;
	border: 1.5px solid var( --cs-rs-border ) !important;
	box-shadow: none !important;
}

.ctrlsite-btn--outline:hover:not(:disabled) {
	background: var( --cs-rs-surface ) !important;
	border-color: color-mix( in srgb, currentColor 55%, transparent ) !important;
}

.ctrlsite-btn--primary {
	background: linear-gradient(
		135deg,
		var( --cs-rs-accent ),
		color-mix( in srgb, var( --cs-rs-accent ) 70%, var( --wp--preset--color--accent, #1F7FFF ) )
	) !important;
	color: var( --wp--preset--color--base, #fff ) !important;
	border: 1.5px solid transparent !important;
	box-shadow: 0 2px 10px color-mix( in srgb, var( --cs-rs-accent ) 35%, transparent ) !important;
	transition: filter 0.18s, box-shadow 0.18s, opacity 0.15s !important;
}

.ctrlsite-btn--primary:hover:not(:disabled) {
	filter: brightness( 1.1 ) !important;
	box-shadow: 0 4px 16px color-mix( in srgb, var( --cs-rs-accent ) 45%, transparent ) !important;
}

.ctrlsite-btn--primary:disabled {
	box-shadow: none !important;
}

.ctrlsite-btn--danger {
	background: transparent !important;
	color: var( --cs-rs-danger ) !important;
	border: 1.5px solid color-mix( in srgb, var( --cs-rs-danger ) 45%, transparent ) !important;
	box-shadow: none !important;
}

.ctrlsite-btn--danger:hover:not(:disabled) {
	background: var( --cs-rs-danger ) !important;
	color: var( --wp--preset--color--base, #fff ) !important;
	border-color: var( --cs-rs-danger ) !important;
}

/* -- Form primitives -- */

.ctrlsite-site-form {
	background: var( --cs-rs-surface );
	border: 1px solid var( --cs-rs-border );
	border-radius: 4px;
	padding: 0.85rem 1.2rem;
	margin-bottom: var( --wp--preset--spacing--40, 1.5rem );
}

.ctrlsite-site-form__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Stacked variant: label above input */
.ctrlsite-site-form--stacked .ctrlsite-site-form__row {
	flex-direction: column;
	align-items: stretch;
}

.ctrlsite-site-form--stacked .ctrlsite-site-form__row--actions {
	flex-direction: row;
	align-items: center;
	padding-top: 0.4rem;
}

.ctrlsite-site-form--stacked .ctrlsite-site-form__row--check {
	flex-direction: row;
	align-items: center;
}

.ctrlsite-site-form__label {
	font-size: var( --wp--preset--font-size--small, 0.85rem );
	font-weight: 600;
	white-space: nowrap;
}

.ctrlsite-site-form__input {
	flex: 1;
	min-width: 200px;
	padding: 0.5em 0.8em;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	font-family: var( --wp--preset--font-family--body, inherit );
	border: 1.5px solid var( --cs-rs-border );
	border-radius: 8px;
	background: var( --cs-rs-surface-2 );
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ctrlsite-site-form__input:focus {
	outline: none;
	border-color: var( --cs-rs-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --cs-rs-accent ) 18%, transparent );
}

.ctrlsite-site-form__input:disabled { opacity: 0.55; }

.ctrlsite-site-form__input--narrow { min-width: 0; width: 120px; flex: none; }

.ctrlsite-site-form__hint {
	font-size: 0.78rem;
	color: var( --cs-rs-muted );
	margin-top: 0.15rem;
}

.ctrlsite-site-form__check {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	cursor: pointer;
}

.ctrlsite-site-form__check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var( --cs-rs-accent );
}

.ctrlsite-site-form__error {
	margin: 0.4rem 0 0;
	font-size: 0.82rem;
	color: var( --cs-rs-danger );
}

/* -- Status badge -- */

.ctrlsite-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15em 0.5em;
	border-radius: 9999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ctrlsite-status-badge::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ctrlsite-status-badge--paired {
	background: color-mix( in srgb, var( --cs-rs-success ) 14%, transparent );
	color: var( --cs-rs-success );
	border: 1px solid color-mix( in srgb, var( --cs-rs-success ) 30%, transparent );
}

.ctrlsite-status-badge--paired::before { background: var( --cs-rs-success ); }

.ctrlsite-status-badge--unpaired {
	background: var( --cs-rs-surface );
	color: var( --cs-rs-muted );
	border: 1px solid var( --cs-rs-border );
}

.ctrlsite-status-badge--unpaired::before { background: var( --cs-rs-muted ); }

/* -- Action feedback (notice) -- */

.ctrlsite-site-actions__msg {
	padding: 0.35em 0.9em;
	font-size: 0.8rem;
	border-top: 1px solid transparent;
	border-radius: 4px;
	margin-bottom: var( --wp--preset--spacing--40, 1.5rem );
}

.ctrlsite-site-actions__msg--success {
	background: color-mix( in srgb, var( --cs-rs-success ) 10%, transparent );
	color: var( --cs-rs-success );
	border-top-color: color-mix( in srgb, var( --cs-rs-success ) 22%, transparent );
}

.ctrlsite-site-actions__msg--error {
	background: color-mix( in srgb, var( --cs-rs-danger ) 8%, transparent );
	color: var( --cs-rs-danger );
	border-top-color: color-mix( in srgb, var( --cs-rs-danger ) 22%, transparent );
}

/* ============================================================
   CUSTOMER DASHBOARD — layout rules
   ============================================================ */

.ctrlsite-dashboard.ctrlsite-remote-sites-app {
	max-width: var( --wp--style--global--content-size, 900px );
	margin: 0 auto;
	padding: var( --wp--preset--spacing--40, 1.5rem ) 0;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-family: var( --wp--preset--font-family--body, inherit );
	display: flex;
	flex-direction: column;
	gap: var( --cs-rs-card-gap );
}

/* Dashboard sections as cards */
.ctrlsite-dashboard__section {
	padding: var( --cs-rs-card-pad );
	background: var( --cs-rs-surface );
	border: 1.5px solid var( --cs-rs-border );
	border-radius: var( --cs-rs-radius );
	transition: border-color 0.15s;
}

.ctrlsite-dashboard__section:hover {
	border-color: color-mix( in srgb, currentColor 30%, transparent );
}

/* Section heading */
.ctrlsite-dashboard__title {
	font-size: var( --wp--preset--font-size--medium, 1rem );
	font-weight: 700;
	font-family: var( --wp--preset--font-family--heading, var( --wp--preset--font-family--body, inherit ) );
	margin: 0 0 var( --wp--preset--spacing--30, 1rem );
	/* Inherit theme colour */
}

/* Meta key/value list (Status, Wallet Balance) */
.ctrlsite-dashboard__meta {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0 0 var( --wp--preset--spacing--30, 1rem );
	padding: 0;
}

.ctrlsite-dashboard__meta-row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
}

.ctrlsite-dashboard__meta-row dt {
	font-weight: 600;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	white-space: nowrap;
}

.ctrlsite-dashboard__meta-row dt::after { content: ':'; }

.ctrlsite-dashboard__meta-row dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
}

/* Emphasize Wallet Balance value */
.ctrlsite-dashboard__meta-row--balance dd {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Billing action buttons row */
.ctrlsite-dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.ctrlsite-dashboard__actions form { margin: 0; }

/* Neutralize nested form double-border/background when inside a dashboard card */
.ctrlsite-dashboard__section .ctrlsite-site-form {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
}

/* Fix Profile label/input spacing: stacked rows need top gap */
.ctrlsite-dashboard__section .ctrlsite-site-form--stacked .ctrlsite-site-form__row + .ctrlsite-site-form__row {
	margin-top: 0.75rem;
}

/* Usage metric list: subtle inner panel */
.ctrlsite-dashboard__section .ctrlsite-dashboard__meta {
	background: var( --cs-rs-surface-2 );
	border: 1px solid var( --cs-rs-border-soft );
	border-radius: 6px;
	padding: 0.75rem 1rem;
}

/* Responsive */
@media ( max-width: 600px ) {
	.ctrlsite-dashboard__section {
		padding: 1rem;
	}
	.ctrlsite-dashboard__actions { flex-direction: column; align-items: stretch; }
	.ctrlsite-dashboard__actions form,
	.ctrlsite-dashboard__actions .ctrlsite-btn { width: 100%; }
	.ctrlsite-site-form__input { min-width: 0; }
	.ctrlsite-dashboard__meta-row {
		flex-wrap: wrap;
		gap: 0.25em;
	}
	.ctrlsite-dashboard__meta-row--balance dd {
		font-size: 1.05rem;
	}
}