/**
 * Authyo setup wizard — modal styles.
 *
 * Design tokens follow the plugin's existing WordPress-admin blue
 * (#2271b1 / #135e96, already used across assets/css/admin.css) rather than
 * introducing a new brand hue. Neutrals are biased slightly cool so they sit
 * with the accent instead of reading as flat grey.
 *
 * Layout: a left step rail + right content panel. Everything is scoped under
 * .authyo-setup-* so it cannot leak into other admin screens.
 *
 * File location: includes/setup/setup.css
 */

.authyo-setup-overlay {
	/* Palette */
	--authyo-accent: #2271b1;
	--authyo-accent-deep: #135e96;
	--authyo-accent-wash: #f0f6fc;
	--authyo-ink: #1d2327;
	--authyo-muted: #646970;
	--authyo-faint: #8c8f94;
	--authyo-surface: #f6f8fa;
	--authyo-border: #dfe3e8;
	--authyo-hairline: #eef1f4;
	--authyo-ground: #ffffff;

	/* Semantic — deliberately separate from the accent. */
	--authyo-good: #00a32a;
	--authyo-good-wash: #edfaef;
	--authyo-good-ink: #135e1f;
	--authyo-bad: #d63638;
	--authyo-bad-wash: #fcf0f1;
	--authyo-bad-ink: #8a1f21;

	/* Rhythm */
	--authyo-gap: 16px;
	--authyo-radius: 10px;
	--authyo-radius-sm: 6px;
	--authyo-rail: 208px;
}

/* ── Launcher button ─────────────────────────────────────── */

/*
 * Sits in the page <h1>, beside the page title. This is the primary action on
 * the settings screen, so it is filled rather than outlined.
 *
 * Tokens are redeclared here because the launcher lives outside .authyo-setup-
 * overlay, where the palette above is scoped. The !important on colour beats
 * wp-admin's own .button-primary rules without needing a longer selector.
 */
.wrap .authyo-setup-launch,
.authyo-setup-launch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	margin-left: 10px;
	height: auto;
	/* Vertical rhythm comes from min-height + centring rather than
	   line-height, which would otherwise knock the icon glyph off centre. */
	min-height: 33px;
	box-sizing: border-box;
	padding: 4px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	border-radius: 4px;
	background: #2271b1 !important;
	border: 1px solid #2271b1 !important;
	color: #fff !important;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wrap .authyo-setup-launch:hover,
.wrap .authyo-setup-launch:focus {
	background: #135e96 !important;
	border-color: #135e96 !important;
	color: #fff !important;
}

.wrap .authyo-setup-launch:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/*
 * Dashicons is an icon font, so the glyph sits on the text baseline. Against
 * the button's line-height: 1.8 that leaves it riding high, so the icon is
 * made its own centred flex box and opts out of the inherited line-height.
 */
.authyo-setup-launch .dashicons,
.authyo-setup-launch .dashicons-before::before {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	margin: 0;
	vertical-align: middle;
}

/* ── Overlay ─────────────────────────────────────────────── */

body.authyo-setup-open {
	overflow: hidden;
}

.authyo-setup-overlay {
	position: fixed;
	inset: 0;
	z-index: 160000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 13, 22, 33, 0.55 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
}

.authyo-setup-overlay[hidden] {
	display: none;
}

.authyo-setup-modal {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 940px;
	max-height: 90vh;
	background: var( --authyo-ground );
	color: var( --authyo-ink );
	border-radius: var( --authyo-radius );
	box-shadow:
		0 1px 2px rgba( 13, 22, 33, 0.08 ),
		0 24px 56px -12px rgba( 13, 22, 33, 0.35 );
	overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */

.authyo-setup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	border-bottom: 1px solid var( --authyo-hairline );
	flex: 0 0 auto;
}

.authyo-setup-header h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --authyo-ink );
}

/* Dashicons glyphs sit on the text baseline; centre them explicitly so they
   don't ride high against the surrounding type. */
.authyo-setup-modal .dashicons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

.authyo-setup-header .dashicons-shield-alt {
	color: var( --authyo-accent );
}

.authyo-setup-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: var( --authyo-radius-sm );
	background: none;
	color: var( --authyo-faint );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.authyo-setup-close:hover {
	background: var( --authyo-surface );
	color: var( --authyo-ink );
}

.authyo-setup-close:focus-visible {
	outline: 2px solid var( --authyo-accent );
	outline-offset: 1px;
}

/* ── Shell: rail + content ───────────────────────────────── */

#authyo-setup-form {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

/* Step rail — vertical, with a spine connecting the markers. */
.authyo-setup-steps {
	flex: 0 0 var( --authyo-rail );
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 20px 16px;
	list-style: none;
	background: var( --authyo-surface );
	border-right: 1px solid var( --authyo-hairline );
	overflow-y: auto;
}

.authyo-setup-step-pip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: var( --authyo-radius-sm );
	font-size: 13px;
	line-height: 1.3;
	color: var( --authyo-muted );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.authyo-setup-step-pip:hover {
	background: var( --authyo-accent-wash );
	color: var( --authyo-ink );
}

.authyo-setup-step-pip:focus-visible {
	outline: 2px solid var( --authyo-accent );
	outline-offset: 1px;
}

/* The spine: a hairline dropping from each marker to the next. */
.authyo-setup-step-pip::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 32px;
	bottom: -2px;
	width: 2px;
	background: var( --authyo-border );
}

.authyo-setup-step-pip:last-child::after {
	display: none;
}

.authyo-setup-step-pip.is-done::after {
	background: var( --authyo-good );
}

.authyo-setup-pip-num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 23px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var( --authyo-ground );
	border: 1.5px solid var( --authyo-border );
	color: var( --authyo-faint );
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.authyo-setup-pip-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.authyo-setup-step-pip.is-active {
	background: var( --authyo-ground );
	color: var( --authyo-ink );
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var( --authyo-border );
}

.authyo-setup-step-pip.is-active .authyo-setup-pip-num {
	background: var( --authyo-accent );
	border-color: var( --authyo-accent );
	color: #fff;
}

.authyo-setup-step-pip.is-done .authyo-setup-pip-num {
	background: var( --authyo-good );
	border-color: var( --authyo-good );
	color: #fff;
	font-size: 0; /* Hide the digit; the tick replaces it. */
}

.authyo-setup-step-pip.is-done .authyo-setup-pip-num::before {
	content: "\2713";
	font-size: 12px;
	line-height: 1;
}

/* ── Body ────────────────────────────────────────────────── */

.authyo-setup-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

/* The only scrolling region. `min-height: 0` is required — a flex item
   defaults to `min-height: auto` and would refuse to shrink, pushing the
   footer out of view. */
.authyo-setup-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 24px 28px;
	overflow-y: auto;
}

.authyo-setup-panel {
	display: none;
}

.authyo-setup-panel.is-active {
	display: block;
	animation: authyo-step-in 0.22s ease both;
}

@keyframes authyo-step-in {
	from {
		opacity: 0;
		transform: translateY( 4px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.authyo-setup-panel.is-active {
		animation: none;
	}
}

.authyo-setup-section + .authyo-setup-section {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var( --authyo-hairline );
}

/* Micro-label: the only uppercase in the design, so it needs tracking. */
.authyo-setup-section h3 {
	margin: 0 0 3px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --authyo-accent-deep );
}

.authyo-setup-hint,
.authyo-setup-note {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --authyo-muted );
	max-width: 62ch;
}

.authyo-setup-note {
	color: #a05a00;
}

/* ── Fields ──────────────────────────────────────────────── */

.authyo-setup-field {
	margin-bottom: var( --authyo-gap );
}

.authyo-setup-field > label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --authyo-ink );
}

.authyo-setup-field .req {
	color: var( --authyo-bad );
}

.authyo-setup-body input[type="text"],
.authyo-setup-body input[type="password"],
.authyo-setup-body input[type="number"],
.authyo-setup-body select {
	width: 100%;
	max-width: 100%;
	min-height: 36px;
	padding: 7px 11px;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-ground );
	color: var( --authyo-ink );
	font-size: 13.5px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.authyo-setup-body input[type="text"]:focus,
.authyo-setup-body input[type="password"]:focus,
.authyo-setup-body input[type="number"]:focus,
.authyo-setup-body select:focus {
	border-color: var( --authyo-accent );
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.15 );
	outline: none;
}

.authyo-setup-body input::placeholder {
	color: var( --authyo-faint );
}

.authyo-setup-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 148px, 1fr ) );
	gap: 14px;
}

/* ── Choice rows ─────────────────────────────────────────── */

.authyo-setup-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.authyo-setup-checks--stacked {
	flex-direction: column;
	gap: 7px;
	margin-top: var( --authyo-gap );
}

/* Card-style choices: the whole tile is the hit target. */
.authyo-setup-checks > label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-ground );
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.authyo-setup-checks > label:hover {
	border-color: var( --authyo-accent );
	background: var( --authyo-accent-wash );
}

.authyo-setup-checks--stacked > label {
	padding: 10px 13px;
}

.authyo-setup-checks input[type="checkbox"],
.authyo-setup-checks input[type="radio"] {
	margin: 0;
	flex: 0 0 auto;
}

/* Master switch */
.authyo-setup-switch {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-accent-wash );
	cursor: pointer;
}

.authyo-setup-switch input {
	margin: 2px 0 0;
}

.authyo-setup-switch strong {
	display: block;
	font-size: 13.5px;
	color: var( --authyo-ink );
}

.authyo-setup-switch em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 12.5px;
	color: var( --authyo-muted );
}

/* ── Country picker ──────────────────────────────────────── */

.authyo-setup-countries[hidden],
#authyo-form-existing-wrap[hidden],
#authyo-form-new-wrap[hidden] {
	display: none;
}

#authyo-setup-country-search {
	margin-bottom: 9px;
}

.authyo-setup-country-list {
	max-height: 192px;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 196px, 1fr ) );
	gap: 3px;
	background: var( --authyo-ground );
}

.authyo-setup-country {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 7px;
	border-radius: 4px;
	font-size: 12.5px;
	cursor: pointer;
}

.authyo-setup-country:hover {
	background: var( --authyo-accent-wash );
}

.authyo-setup-country[hidden] {
	display: none;
}

/* ── Feedback ────────────────────────────────────────────── */

.authyo-setup-error {
	margin: 5px 0 0;
	font-size: 12px;
	font-weight: 500;
	color: var( --authyo-bad );
}

.authyo-setup-error[hidden] {
	display: none;
}

.has-error input[type="text"],
.has-error input[type="password"],
.has-error input[type="number"],
.has-error select {
	border-color: var( --authyo-bad );
}

.has-error input:focus,
.has-error select:focus {
	border-color: var( --authyo-bad );
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, 0.15 );
}

.authyo-setup-alert,
.authyo-setup-form-result {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 14px;
	margin-bottom: 18px;
	border-radius: var( --authyo-radius-sm );
	border-left: 3px solid transparent;
	font-size: 13px;
}

.authyo-setup-form-result {
	flex-direction: column;
	align-items: stretch;
	margin: 16px 0 0;
}

.authyo-setup-result-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.authyo-setup-alert[hidden],
.authyo-setup-form-result[hidden] {
	display: none;
}

.authyo-setup-alert.is-error,
.authyo-setup-form-result.is-error {
	background: var( --authyo-bad-wash );
	border-left-color: var( --authyo-bad );
	color: var( --authyo-bad-ink );
}

.authyo-setup-alert.is-success,
.authyo-setup-form-result.is-success {
	background: var( --authyo-good-wash );
	border-left-color: var( --authyo-good );
	color: var( --authyo-good-ink );
}

.authyo-setup-result-row a {
	margin-left: auto;
	font-weight: 600;
	color: inherit;
}

/* ── Shortcode chip ──────────────────────────────────────── */

.authyo-setup-shortcode {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding: 8px 8px 8px 12px;
	background: var( --authyo-ground );
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
}

.authyo-setup-shortcode code {
	flex: 1 1 auto;
	overflow-x: auto;
	white-space: nowrap;
	font-size: 12.5px;
	color: var( --authyo-ink );
	background: none;
	padding: 0;
}

.authyo-setup-copy-shortcode {
	flex: 0 0 auto;
	min-height: 28px !important;
	padding: 0 12px !important;
	line-height: 26px !important;
	font-size: 12px !important;
}

/* ── Footer ──────────────────────────────────────────────── */

.authyo-setup-footer {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	padding: 14px 28px;
	border-top: 1px solid var( --authyo-hairline );
	background: var( --authyo-surface );
	flex: 0 0 auto;
}

.authyo-setup-footer-spacer {
	flex: 1;
}

.authyo-setup-progress {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var( --authyo-muted );
}

/* WP core sets `.button { display: inline-block }`, which out-specifies a
   bare [hidden] selector — hidden buttons would render as empty boxes. */
.authyo-setup-footer [hidden] {
	display: none !important;
}

/* Buttons: restyled to match the modal rather than inherit wp-admin chrome. */
.authyo-setup-modal .button,
.authyo-setup-modal .button-primary {
	min-height: 34px;
	padding: 0 15px;
	border-radius: var( --authyo-radius-sm );
	font-size: 13px;
	font-weight: 500;
	line-height: 32px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.authyo-setup-modal .button-primary {
	background: var( --authyo-accent );
	border-color: var( --authyo-accent );
	color: #fff;
	text-shadow: none;
	box-shadow: none;
}

.authyo-setup-modal .button-primary:hover:not( :disabled ),
.authyo-setup-modal .button-primary:focus:not( :disabled ) {
	background: var( --authyo-accent-deep );
	border-color: var( --authyo-accent-deep );
	color: #fff;
}

/*
 * Skip is a bordered secondary, sized to match Back so the footer trio lines
 * up. WP core underlines .button-link, so `none` has to be explicit — and
 * repeated on :hover/:focus, where core re-asserts it.
 */
.authyo-setup-modal .button-link,
.authyo-setup-modal .button-link:hover,
.authyo-setup-modal .button-link:focus {
	min-height: 34px;
	padding: 0 15px;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-ground );
	text-decoration: none;
	box-shadow: none;
	line-height: 32px;
}

.authyo-setup-modal .button-link {
	color: var( --authyo-muted );
}

.authyo-setup-modal .button-link:hover,
.authyo-setup-modal .button-link:focus {
	color: var( --authyo-accent );
	border-color: var( --authyo-accent );
}

.authyo-setup-modal .button:focus-visible,
.authyo-setup-modal .button-primary:focus-visible,
.authyo-setup-modal .button-link:focus-visible {
	outline: 2px solid var( --authyo-accent );
	outline-offset: 1px;
	border-radius: var( --authyo-radius-sm );
}

/* ── Responsive ──────────────────────────────────────────── */

/* Collapse the rail to a horizontal strip on narrow screens. */
@media screen and ( max-width: 782px ) {
	#authyo-setup-form {
		flex-direction: column;
	}

	.authyo-setup-steps {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 4px;
		padding: 12px 16px;
		border-right: 0;
		border-bottom: 1px solid var( --authyo-hairline );
	}

	.authyo-setup-step-pip {
		flex: 1;
		justify-content: center;
		padding: 6px 4px;
	}

	/* The vertical spine makes no sense in a horizontal strip. */
	.authyo-setup-step-pip::after {
		display: none;
	}

	.authyo-setup-pip-label {
		display: none;
	}

	.authyo-setup-body {
		padding: 18px 18px;
	}

	.authyo-setup-footer {
		padding: 12px 18px;
	}
}

@media screen and ( max-width: 600px ) {
	.authyo-setup-overlay {
		padding: 0;
	}

	.authyo-setup-modal {
		max-width: none;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}

	.authyo-setup-progress {
		flex: 1 0 100%;
	}

	.authyo-setup-footer-spacer {
		display: none;
	}
}

/* Short viewports: trim vertical chrome so the footer stays reachable. */
@media screen and ( max-height: 640px ) {
	.authyo-setup-header {
		padding: 12px 24px;
	}

	.authyo-setup-body {
		padding: 18px 28px;
	}
}