@use 'variables' as *;

.simplestats-app--authentication {
	min-height: 100vh;
}

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

/* ------------------------------------------------------------------
 * SimpleStats Auth Card (shared by SignUp + SignIn — Figma 240:444)
 * ------------------------------------------------------------------ */

$simplestats-signup-text:        #212226;
$simplestats-signup-text-muted:  #4F4F4F;
$simplestats-auth-border:        #212226;  // shared border for the card + inputs
$simplestats-signup-input-border:#D5D7DB;
$simplestats-signup-error:       #D32F2F;

.simplestats-auth-card {
	box-sizing: border-box;
	width: 480px;
	max-width: calc(100% - 32px);
	margin: 32px auto;
	padding: 40px;
	background-color: #fff;
	border: 1px solid $simplestats-auth-border;
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
	display: flex;
	flex-direction: column;
	gap: 32px;
	color: $simplestats-signup-text;

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
}

.simplestats-auth-card__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.simplestats-auth-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.simplestats-auth-card__logo-image {
	display: block;
	height: 40px;
	width: auto;
}

.simplestats-auth-card__tagline {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: $simplestats-signup-text;
}

.simplestats-auth-card__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.simplestats-auth-card__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

// `input` prefix bumps specificity to (0,2,1) so the base and :focus rules
// win over WP admin's `input[type=email]:focus` / `input[type=password]:focus`
// (which is also (0,2,1) — source order then decides, and our CSS loads after).
input.simplestats-auth-card__input {
	height: 48px;
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	color: $simplestats-signup-text;
	background-color: #fff;
	border: 1px solid $simplestats-auth-border;
	border-radius: 4px;

	&::placeholder {
		color: $simplestats-signup-text-muted;
	}

	&:focus {
		outline: none;
		border-color: $simplestats-auth-border;
		box-shadow: none;
	}
}

.simplestats-auth-card__field.has-error .simplestats-auth-card__input {
	border-color: $simplestats-signup-error;
}

// Label sits directly above the input/select on screens that opt into a
// visible label (e.g. the tracking-type picker). Sign-up/sign-in still
// rely on placeholders, so this is only used where explicitly rendered.
.simplestats-auth-card__field-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	color: $simplestats-signup-text;
}

// `select` prefix wins specificity over WP admin's `select` rules in the
// same way the input override does, and lets us inherit the field's exact
// look-and-feel (height, border, radius) without a bespoke control.
select.simplestats-auth-card__select {
	height: 48px;
	width: 100%;
	padding: 12px 36px 12px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	color: $simplestats-signup-text;
	background-color: #fff;
	border: 1px solid $simplestats-auth-border;
	border-radius: 4px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	// Inline chevron so we don't ship an asset for one icon.
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23212226' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 12px;

	&:focus,
	&:focus-visible {
		outline: none;
		border-color: $simplestats-auth-border;
		box-shadow: none;
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}
}

.simplestats-auth-card__help-text {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: $simplestats-signup-text-muted;
}

.simplestats-auth-card__error {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: $simplestats-signup-error;
}

.simplestats-auth-card__error-link {
	color: #d3302f;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover,
	&:focus-visible {
		color: #d3302f;
		text-decoration: underline;
	}
}

.simplestats-auth-card__help {
	margin: 0;
	font-size: 13px;
	line-height: 20px;

	a {
		color: $simplestats-signup-text-muted;
		text-decoration: none;

		&:hover,
		&:focus-visible {
			color: $simplestats-signup-text;
			text-decoration: underline;
		}
	}
}

.simplestats-auth-card__notice {
	padding: 12px 14px;
	background-color: #FDECEC;
	color: $simplestats-signup-error;
	border-radius: 6px;
	font-size: 14px;
	line-height: 20px;
}

// Success/confirmation notice used on the forgot-password "we’ve emailed you a link" state.
.simplestats-auth-card__confirmation {
	padding: 16px;
	background-color: rgba(39, 174, 96, 0.08);
	border: 1px solid rgba(39, 174, 96, 0.25);
	border-radius: 6px;
	color: #146e3a;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.simplestats-auth-card__optin {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.simplestats-auth-card__optin-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.simplestats-auth-card__optin-box {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border: 1px solid $simplestats-signup-input-border;
	border-radius: 4px;
	color: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;

	svg {
		display: block;
		opacity: 0;
		transition: opacity 0.15s ease;
	}
}

.simplestats-auth-card__optin-input:checked ~ .simplestats-auth-card__optin-box {
	background-color: $simplestats-signup-text;
	border-color: $simplestats-signup-text;

	svg {
		opacity: 1;
	}
}

.simplestats-auth-card__optin-input:focus-visible ~ .simplestats-auth-card__optin-box {
	box-shadow: 0 0 0 3px rgba(33, 34, 38, 0.18);
}

.simplestats-auth-card__optin-label {
	font-size: 14px;
	line-height: 20px;
	color: $simplestats-signup-text;
}

// Brand citron primary button (per simplestats-citron-brand-guidelines .btn-primary):
// brand/300 fill, neutral/900 text.
.simplestats-auth-card__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	margin-top: 8px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #18191D;                           // neutral/900
	background-color: #FFE57D;                // brand/300
	border: 0;
	border-radius: 2px;                       // button/radius
	cursor: pointer;

	// WP admin styles `a:focus` / form controls with outline / box-shadow /
	// border-radius — pin these so the branded button shape stays put on focus.
	&:focus,
	&:focus-visible {
		outline: none;
		box-shadow: none;
		border-radius: 2px;
	}

	// Disabled state per Figma (0:664): neutral/400 #A8A48C bg, white text.
	&:disabled {
		background-color: #A8A48C;            // neutral/400
		color: #fff;
		cursor: not-allowed;
	}
}

.simplestats-auth-card__submit-arrow {
	flex-shrink: 0;
	display: block;
	color: currentColor;
}

// Spinner only appears during submit (disabled gray bg) — white on neutral/400 reads cleanly.
.simplestats-auth-card__submit-spinner {
	flex-shrink: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: ss-spin 0.8s linear infinite;
}

.simplestats-auth-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 12px;
}

.simplestats-auth-card__feature {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 20px;
	color: $simplestats-signup-text;
}

.simplestats-auth-card__feature-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: $simplestats-signup-text;
	color: #fff;
	border-radius: 50%;

	svg {
		display: block;
	}
}

.simplestats-auth-card__feature-text {
	display: inline-block;
}

.simplestats-auth-card__alt {
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	color: $simplestats-signup-text-muted;
}

.simplestats-auth-card__alt-link {
	color: $simplestats-signup-text;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover,
	&:focus-visible {
		color: $simplestats-signup-text;
		text-decoration: underline;
	}
}

/* ------------------------------------------------------------------
 * Connecting / Connected variants (Figma 240:516, 240:579, 240:630)
 * ------------------------------------------------------------------ */

.simplestats-auth-card__heading-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	width: 100%;
}

.simplestats-auth-card__subhead {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #757575;
}

/* Connecting page step list */
.simplestats-auth-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.simplestats-auth-steps__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 14px;
	background-color: #FFFFFF;
	border: 1px solid #ECEAF3;
	border-radius: 4px;
	font-size: 14px;
	line-height: 20px;
	color: #212226;
}

.simplestats-auth-steps__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
}

.simplestats-auth-steps__icon-check {
	display: block;
	color: #FFFFFF;
}

.simplestats-auth-steps__icon-loader {
	display: block;
	width: 20px;
	height: 20px;
	animation: ss-spin 1s linear infinite;
}

.simplestats-auth-steps__item.is-done .simplestats-auth-steps__icon {
	background-color: #10B981;
	padding: 3px;
}

.simplestats-auth-steps__item.is-running {
	color: #4F4F4F;
}

.simplestats-auth-steps__item.is-pending {
	color: #8A90A0;
}

.simplestats-auth-steps__item.is-pending .simplestats-auth-steps__icon {
	width: 18px;
	height: 18px;
	background-color: #ECEAF3;
}

/* Connected (success) page */
.simplestats-auth-card--success {
	gap: 24px;
}

.simplestats-auth-card__badge {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto;
}

.simplestats-auth-card__success-meta {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #8A90A0;
	text-align: center;
}

.simplestats-auth-card__success-meta-line {
	display: block;
}

.simplestats-auth-card__success-meta-email {
	display: block;
	font-weight: 600;
	color: #212226;
}

.simplestats-auth-card__success-meta--block {
	color: #8A90A0;
}

.simplestats-auth-card__divider {
	margin: 0;
	border: 0;
	border-top: 1px solid #E8E8E8;
	width: 100%;
}

.simplestats-auth-card__cta-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.simplestats-auth-card__cta-hint {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #212226;
}

// Brand citron primary button (per simplestats-citron-brand-guidelines .btn-primary):
// brand/300 fill, neutral/900 text.
.simplestats-auth-card__dashboard-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px 12px 24px;
	background-color: #FFE57D;                // brand/300
	border: 0;
	border-radius: 2px;                       // button/radius
	color: #18191D;                           // neutral/900
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;

	// WP admin styles `#wpwrap a:hover` (and other link states) with blue —
	// pin the brand text color across all link states.
	&:hover,
	&:focus,
	&:focus-visible,
	&:active,
	&:visited {
		color: #18191D;
	}

	// WP admin styles `a:focus` with outline / box-shadow / border-radius —
	// pin these so the branded button shape stays put on focus.
	&:focus,
	&:focus-visible {
		outline: none;
		box-shadow: none;
		border-radius: 2px;
	}
}

.simplestats-auth-card__dashboard-btn-label {
	display: inline-block;
}

.simplestats-auth-card__dashboard-btn-icon {
	flex-shrink: 0;
	display: block;
	color: currentColor;
}

.simplestats-auth-card__waiting {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 14px;
	line-height: 20px;
	color: #8A90A0;
}

.simplestats-auth-card__waiting-dot {
	flex-shrink: 0;
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #4F4F4F;
	border-radius: 100px;
	animation: ss-pulse 1.6s ease-in-out infinite;
}

@keyframes ss-pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}

@media (max-width: 520px) {
	.simplestats-auth-card {
		margin: 16px;
		padding: 28px 20px;
		gap: 24px;
	}

	.simplestats-auth-card__features {
		grid-template-columns: 1fr;
	}
}
