/**
 * Authyo Setup Modal styles.
 *
 * File location: /assets/css/admin-setup.css
 * Enqueued by includes/class-admin.php on the Authyo settings screen only.
 *
 * Design tokens live in :root under an .authyo- prefix so this file can
 * theme itself without touching WordPress admin globals. Values start from
 * WP admin's palette (#2271b1 primary, #d63638 error) so the modal still
 * reads as native admin UI, just with more current spacing/elevation.
 */

:root {
	--authyo-primary: #2271b1;
	--authyo-primary-dark: #135e96;
	--authyo-primary-light: #f0f6fc;
	--authyo-primary-ring: rgba( 34, 113, 177, 0.16 );
	--authyo-success: #00a32a;
	--authyo-success-light: #edfaef;
	--authyo-danger: #d63638;
	--authyo-danger-light: #fcf0f1;
	--authyo-warning: #dba617;
	--authyo-warning-light: #fcf9e8;

	--authyo-ink: #1d2327;
	--authyo-ink-soft: #50575e;
	--authyo-muted: #646970;
	--authyo-faint: #8c8f94;
	--authyo-border: #e2e4e7;
	--authyo-border-soft: #edeef0;
	--authyo-surface: #ffffff;
	--authyo-surface-tint: #f8f9fb;

	--authyo-radius-sm: 6px;
	--authyo-radius-md: 10px;
	--authyo-radius-lg: 16px;
	--authyo-radius-pill: 999px;

	--authyo-shadow-sm: 0 1px 2px rgba( 16, 24, 40, 0.06 );
	--authyo-shadow-md: 0 4px 12px rgba( 16, 24, 40, 0.08 );
	--authyo-shadow-lg: 0 24px 64px -12px rgba( 16, 24, 40, 0.35 );
	--authyo-shadow-focus: 0 0 0 4px var( --authyo-primary-ring );

	--authyo-ease: cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

/* -------------------------------------------------------------------------
 * Trigger button
 * ---------------------------------------------------------------------- */

.authyo-setup-open-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	cursor: pointer;
}

.authyo-setup-open-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.authyo-setup-open-btn.authyo-setup-pulse {
	background: var( --authyo-primary );
	border-color: var( --authyo-primary );
	color: #fff;
	box-shadow: 0 0 0 0 var( --authyo-primary-ring );
	animation: authyo-pulse 2.2s infinite;
}

.authyo-setup-open-btn.authyo-setup-pulse:hover,
.authyo-setup-open-btn.authyo-setup-pulse:focus {
	background: var( --authyo-primary-dark );
	border-color: var( --authyo-primary-dark );
	color: #fff;
}

@keyframes authyo-pulse {
	0%   { box-shadow: 0 0 0 0 rgba( 34, 113, 177, 0.45 ); }
	70%  { box-shadow: 0 0 0 10px rgba( 34, 113, 177, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 34, 113, 177, 0 ); }
}

/* -------------------------------------------------------------------------
 * Overlay + dialog
 * ---------------------------------------------------------------------- */

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

.authyo-setup-overlay {
	position: fixed;
	inset: 0;
	z-index: 160000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 15, 20, 27, 0.6 );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
}

.authyo-setup-overlay.is-open {
	display: flex;
	animation: authyo-fade-in 0.18s var( --authyo-ease );
}

@keyframes authyo-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.authyo-setup-modal {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 780px;
	max-height: calc( 100vh - 48px );
	background: var( --authyo-surface );
	border-radius: var( --authyo-radius-lg );
	box-shadow: var( --authyo-shadow-lg );
	overflow: hidden;
	animation: authyo-slide-up 0.25s var( --authyo-ease );
}

@keyframes authyo-slide-up {
	from { transform: translateY( 20px ) scale( 0.98 ); opacity: 0; }
	to   { transform: translateY( 0 ) scale( 1 ); opacity: 1; }
}

/* Header ---------------------------------------------------------------- */

.authyo-setup-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 30px 20px;
	background: var( --authyo-surface );
	color: var( --authyo-ink );
	flex: 0 0 auto;
}

.authyo-setup-header h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	padding: 0;
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var( --authyo-ink );
}

/* The shield sits in a soft tinted tile rather than floating bare next to
   the heading text — gives the header a bit more product polish. */
.authyo-setup-header h2 .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	font-size: 18px;
	line-height: 1;
	color: var( --authyo-primary );
	background: var( --authyo-primary-light );
	border-radius: var( --authyo-radius-sm );
}

.authyo-setup-header p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var( --authyo-muted );
}

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

.authyo-setup-close .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
}

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

.authyo-setup-close:active {
	transform: scale( 0.94 );
}

.authyo-setup-close:focus-visible {
	background: var( --authyo-surface-tint );
	color: var( --authyo-ink );
	outline: 2px solid var( --authyo-primary );
	outline-offset: 1px;
}

/* Step progress indicator ----------------------------------------------- */

.authyo-steps {
	display: flex;
	align-items: flex-start;
	flex: 0 0 auto;
	gap: 4px;
	padding: 4px 30px 20px;
	background: var( --authyo-surface );
	border-bottom: 1px solid var( --authyo-border-soft );
}

.authyo-step-pip {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 0;
	text-align: center;
}

/* Connector line between pips. */
.authyo-step-pip::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var( --authyo-border );
	border-radius: 2px;
	transition: background 0.25s var( --authyo-ease );
}

.authyo-step-pip:first-child::before {
	display: none;
}

.authyo-step-pip.is-done::before,
.authyo-step-pip.is-active::before {
	background: var( --authyo-primary );
}

.authyo-step-marker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var( --authyo-surface );
	border: 2px solid var( --authyo-border );
	border-radius: 50%;
	font-size: 12px;
	font-weight: 650;
	color: var( --authyo-faint );
	transition: background 0.2s var( --authyo-ease ), border-color 0.2s var( --authyo-ease ), color 0.2s var( --authyo-ease ), box-shadow 0.2s var( --authyo-ease );
	box-sizing: border-box;
}

.authyo-step-pip.is-active .authyo-step-marker {
	border-color: var( --authyo-primary );
	background: var( --authyo-primary );
	color: #fff;
	box-shadow: var( --authyo-shadow-focus );
}

.authyo-step-pip.is-done .authyo-step-marker {
	border-color: var( --authyo-primary );
	background: var( --authyo-primary-light );
	color: var( --authyo-primary );
}

.authyo-step-tick {
	display: none;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.authyo-step-pip.is-done .authyo-step-tick {
	display: block;
}

.authyo-step-pip.is-done .authyo-step-num {
	display: none;
}

.authyo-step-label {
	font-size: 11.5px;
	font-weight: 550;
	line-height: 1.3;
	color: var( --authyo-muted );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.authyo-step-pip.is-active .authyo-step-label {
	color: var( --authyo-ink );
	font-weight: 650;
}

/* Step panels ----------------------------------------------------------- */

.authyo-step-panel[hidden] {
	display: none;
}

/* Plain guidance text, not a coloured callout: it competed with the real
   alerts and made every step look like it carried a warning. */
.authyo-step-intro {
	margin: 0 0 18px;
	padding: 0 2px;
	font-size: 13px;
	line-height: 1.55;
	color: var( --authyo-muted );
}

.authyo-step-panel.slide-forward {
	animation: authyo-slide-left 0.22s var( --authyo-ease );
}

.authyo-step-panel.slide-back {
	animation: authyo-slide-right 0.22s var( --authyo-ease );
}

@keyframes authyo-slide-left {
	from { opacity: 0; transform: translateX( 14px ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}

@keyframes authyo-slide-right {
	from { opacity: 0; transform: translateX( -14px ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}

/* Review list ----------------------------------------------------------- */

.authyo-review {
	display: grid;
	grid-template-columns: minmax( 150px, 40% ) 1fr;
	gap: 0;
	margin: 0;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	overflow: hidden;
}

.authyo-review dt,
.authyo-review dd {
	margin: 0;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.5;
	border-bottom: 1px solid var( --authyo-border-soft );
	word-break: break-word;
}

.authyo-review dt {
	background: var( --authyo-surface-tint );
	font-weight: 600;
	color: var( --authyo-ink-soft );
}

.authyo-review dd {
	color: var( --authyo-ink );
}

.authyo-review dt:nth-last-of-type(1),
.authyo-review dd:nth-last-of-type(1) {
	border-bottom: 0;
}

/* Body ------------------------------------------------------------------ */

.authyo-setup-body {
	flex: 1 1 auto;
	padding: 24px 30px 28px;
	background: var( --authyo-surface-tint );
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Each section is a card on the tinted body, so groups read as distinct
   blocks instead of one long run of controls separated by hairlines. */
.authyo-setup-section {
	padding: 20px 22px;
	margin: 0 0 14px;
	background: var( --authyo-surface );
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-md );
	box-shadow: var( --authyo-shadow-sm );
}

.authyo-setup-section:last-child {
	margin-bottom: 0;
}

.authyo-setup-section-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	padding: 0;
	font-size: 14px;
	font-weight: 650;
	color: var( --authyo-ink );
}

.authyo-setup-section-help {
	margin: 0 0 16px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --authyo-muted );
}

/* Alerts ---------------------------------------------------------------- */

.authyo-setup-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 16px;
	border: 1px solid transparent;
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-danger-light );
	border-color: rgba( 214, 54, 56, 0.18 );
	font-size: 13px;
	line-height: 1.5;
	color: var( --authyo-ink );
}

/* display:flex above overrides the browser's native [hidden]=display:none rule. */
.authyo-setup-alert[hidden] {
	display: none !important;
}

.authyo-setup-alert .dashicons {
	flex: 0 0 auto;
	display: inline-flex;
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
	color: var( --authyo-danger );
}

.authyo-setup-alert-warning {
	background: var( --authyo-warning-light );
	border-color: rgba( 219, 166, 23, 0.24 );
}

.authyo-setup-alert-warning .dashicons {
	color: var( --authyo-warning );
}

/* Fields ---------------------------------------------------------------- */

.authyo-field {
	margin: 0 0 15px;
}

.authyo-field:last-child {
	margin-bottom: 0;
}

.authyo-field > label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --authyo-ink );
}

.authyo-required {
	color: var( --authyo-danger );
}

.authyo-input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 38px;
	padding: 8px 12px;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-surface );
	font-size: 14px;
	line-height: 1.5;
	color: var( --authyo-ink-soft );
	box-shadow: none;
	transition: border-color 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease );
	box-sizing: border-box;
}

.authyo-input:hover {
	border-color: var( --authyo-faint );
}

.authyo-input:focus {
	border-color: var( --authyo-primary );
	box-shadow: var( --authyo-shadow-focus );
	outline: 2px solid transparent;
}

.authyo-input.has-error {
	border-color: var( --authyo-danger );
}

.authyo-input.has-error:focus {
	box-shadow: 0 0 0 4px rgba( 214, 54, 56, 0.14 );
}

select.authyo-input {
	height: 38px;
	padding-right: 28px;
	cursor: pointer;
}

.authyo-field-hint {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.5;
	color: var( --authyo-muted );
}

.authyo-field-error {
	display: none;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.5;
	color: var( --authyo-danger );
}

.authyo-field-error.is-visible {
	display: block;
}

.authyo-input-group {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.authyo-input-group .authyo-input {
	flex: 1 1 auto;
}

.authyo-reveal {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	padding: 0;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-surface );
	color: var( --authyo-ink-soft );
	cursor: pointer;
	transition: background 0.15s var( --authyo-ease ), border-color 0.15s var( --authyo-ease ), color 0.15s var( --authyo-ease );
}

.authyo-reveal:hover {
	background: var( --authyo-surface-tint );
	border-color: var( --authyo-primary );
	color: var( --authyo-primary );
}

.authyo-reveal:focus-visible {
	outline: 2px solid var( --authyo-primary );
	outline-offset: 1px;
}

.authyo-reveal .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
}

/* Checkbox rows --------------------------------------------------------- */

.authyo-check-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 12px 14px;
	background: var( --authyo-surface-tint );
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	cursor: pointer;
	transition: border-color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease );
}

.authyo-check-row:last-child {
	margin-bottom: 0;
}

.authyo-check-row:hover {
	border-color: var( --authyo-faint );
	background: var( --authyo-surface );
}

.authyo-check-row input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
	accent-color: var( --authyo-primary );
}

.authyo-check-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.authyo-check-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --authyo-ink );
}

.authyo-check-desc {
	font-size: 12px;
	line-height: 1.5;
	color: var( --authyo-muted );
}

/* Security-sensitive section -------------------------------------------- */

.authyo-danger-section {
	padding: 16px 18px;
	background: var( --authyo-warning-light );
	border: 1px solid rgba( 219, 166, 23, 0.3 );
}

.authyo-danger-section .authyo-setup-section-title {
	color: #8a6116;
}

.authyo-danger-section .authyo-setup-section-title .dashicons {
	display: inline-flex;
	font-size: 17px;
	width: 17px;
	height: 17px;
	line-height: 1;
}

.authyo-danger-section .authyo-check-row {
	background: var( --authyo-surface );
	border-color: rgba( 219, 166, 23, 0.35 );
}

.authyo-danger-section .authyo-check-row:last-child {
	margin-bottom: 0;
}

/* Field rows ------------------------------------------------------------ */

.authyo-field-row {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
	margin: 0 0 15px;
}

.authyo-field-row-4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.authyo-field-row .authyo-field {
	margin: 0;
}

/* Master toggle --------------------------------------------------------- */

.authyo-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 2px;
	background: transparent;
	border: 0;
	border-radius: var( --authyo-radius-sm );
	cursor: pointer;
}

.authyo-toggle-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.authyo-toggle-title {
	font-size: 14px;
	font-weight: 650;
	color: var( --authyo-ink );
}

.authyo-toggle-desc {
	font-size: 12.5px;
	color: var( --authyo-muted );
}

.authyo-toggle {
	position: relative;
	flex: 0 0 auto;
}

.authyo-toggle input {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.authyo-toggle-track {
	display: block;
	width: 44px;
	height: 24px;
	padding: 2px;
	background: var( --authyo-faint );
	border-radius: var( --authyo-radius-pill );
	transition: background 0.18s var( --authyo-ease );
	box-sizing: border-box;
}

.authyo-toggle-thumb {
	display: block;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.18s var( --authyo-ease );
}

.authyo-toggle input:checked + .authyo-toggle-track {
	background: var( --authyo-primary );
}

.authyo-toggle input:checked + .authyo-toggle-track .authyo-toggle-thumb {
	transform: translateX( 20px );
}

.authyo-toggle input:focus-visible + .authyo-toggle-track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --authyo-primary );
}

/* Channel cards --------------------------------------------------------- */

.authyo-channel-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
}

.authyo-channel-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-surface );
	cursor: pointer;
	transition: border-color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease ), transform 0.1s var( --authyo-ease );
}

.authyo-channel-card:hover {
	border-color: var( --authyo-faint );
	background: var( --authyo-surface-tint );
}

.authyo-channel-card:active {
	transform: scale( 0.99 );
}

.authyo-channel-card.is-checked {
	border-color: var( --authyo-primary );
	background: var( --authyo-primary-light );
	box-shadow: 0 0 0 1px var( --authyo-primary ) inset;
}

.authyo-channel-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.authyo-channel-input:focus-visible + .authyo-channel-icon {
	outline: 2px solid var( --authyo-primary );
	outline-offset: 2px;
}

.authyo-channel-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 17px;
	line-height: 1;
	color: var( --authyo-ink-soft );
	background: var( --authyo-surface-tint );
	border-radius: var( --authyo-radius-sm );
	transition: color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease );
}

.authyo-channel-card.is-checked .authyo-channel-icon {
	color: var( --authyo-primary );
	background: #fff;
}

.authyo-channel-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.authyo-channel-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var( --authyo-ink );
}

.authyo-channel-desc {
	font-size: 12px;
	color: var( --authyo-muted );
}

.authyo-channel-check {
	position: absolute;
	top: 9px;
	right: 9px;
	display: inline-flex;
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
	color: var( --authyo-primary );
	opacity: 0;
	transform: scale( 0.6 );
	transition: opacity 0.15s var( --authyo-ease ), transform 0.15s var( --authyo-ease );
}

.authyo-channel-card.is-checked .authyo-channel-check {
	opacity: 1;
	transform: scale( 1 );
}

/* Step 5: form mode cards ------------------------------------------------ */

.authyo-formmode {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
	margin: 0 0 16px;
}

.authyo-formmode-card {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 14px;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-surface );
	cursor: pointer;
	transition: border-color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease );
}

.authyo-formmode-card:hover {
	border-color: var( --authyo-faint );
	background: var( --authyo-surface-tint );
}

.authyo-formmode-card.is-checked {
	border-color: var( --authyo-primary );
	background: var( --authyo-primary-light );
	box-shadow: 0 0 0 1px var( --authyo-primary ) inset;
}

.authyo-formmode-card input[type="radio"] {
	margin: 2px 0 0;
	accent-color: var( --authyo-primary );
}

.authyo-formmode-card input[type="radio"]:disabled {
	opacity: 0.5;
}

/* A disabled radio means the option is unavailable, not merely unselected. */
.authyo-formmode-card:has( input:disabled ) {
	opacity: 0.6;
	cursor: not-allowed;
}

.authyo-formmode-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var( --authyo-muted );
	flex: 0 0 auto;
}

.authyo-formmode-card.is-checked .authyo-formmode-icon {
	color: var( --authyo-primary );
}

.authyo-formmode-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.authyo-formmode-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var( --authyo-ink );
}

.authyo-formmode-desc {
	font-size: 12px;
	line-height: 1.45;
	color: var( --authyo-muted );
}

/* Step 5: panes ----------------------------------------------------------- */

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

/* Shortcode list -------------------------------------------------------- */

.authyo-sc-list {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.authyo-sc-row + .authyo-sc-row {
	margin-top: 12px;
}

.authyo-sc-label {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var( --authyo-ink-soft );
}

.authyo-sc-label .dashicons {
	display: inline-flex;
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
	color: var( --authyo-primary );
}

.authyo-sc-copy {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.authyo-sc-code {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 9px 12px;
	background: var( --authyo-surface-tint );
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	font-family: Consolas, Monaco, monospace;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --authyo-primary );
	overflow-x: auto;
	white-space: nowrap;
}

.authyo-sc-copy-btn {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 10px !important;
}

.authyo-sc-copy-btn .dashicons {
	display: inline-flex;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

/* Step 5: result banner --------------------------------------------------- */

.authyo-form-result {
	margin: 12px 0 0;
	padding: 11px 13px;
	border: 1px solid var( --authyo-border );
	border-left: 3px solid var( --authyo-faint );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-surface-tint );
	font-size: 13px;
	line-height: 1.5;
}

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

.authyo-form-result.is-success {
	border-left-color: var( --authyo-success );
	background: var( --authyo-success-light );
}

.authyo-form-result.is-error {
	border-left-color: var( --authyo-danger );
	background: var( --authyo-danger-light );
}

.authyo-form-result a {
	white-space: nowrap;
}

/* The step-5 buttons reuse the submit spinner. */
.button.is-saving .authyo-spinner {
	display: inline-block;
	border-color: rgba( 0, 0, 0, 0.2 );
	border-top-color: var( --authyo-primary );
	margin-right: 6px;
}

/* Footer ------------------------------------------------------------------
 * Buttons here set their own height/line-height/icon box explicitly rather
 * than trusting the inherited WP .button metrics — that's what threw the
 * Back/Next arrows and label out of vertical alignment before.
 * ------------------------------------------------------------------------ */

.authyo-setup-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 16px 30px;
	background: var( --authyo-surface );
	border-top: 1px solid var( --authyo-border-soft );
}

.authyo-setup-footer-left,
.authyo-setup-footer-right {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.authyo-setup-footer-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	line-height: 1;
	color: var( --authyo-muted );
}

.authyo-setup-footer-note .dashicons {
	display: inline-flex;
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
}

/* Wizard navigation buttons ----------------------------------------------- */

.authyo-nav-back,
.authyo-nav-next {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	line-height: 1 !important;
	border-radius: var( --authyo-radius-sm ) !important;
	box-sizing: border-box;
	transition: background 0.15s var( --authyo-ease ), border-color 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease ), transform 0.1s var( --authyo-ease );
}

.authyo-nav-back .dashicons,
.authyo-nav-next .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.authyo-nav-back {
	border-color: var( --authyo-border ) !important;
	color: var( --authyo-ink-soft ) !important;
}

.authyo-nav-back:hover {
	background: var( --authyo-surface-tint ) !important;
	border-color: var( --authyo-faint ) !important;
}

.authyo-nav-next {
	box-shadow: var( --authyo-shadow-sm ) !important;
}

.authyo-nav-next:hover {
	box-shadow: var( --authyo-shadow-md ) !important;
}

.authyo-nav-back:active,
.authyo-nav-next:active {
	transform: translateY( 1px );
}

.authyo-nav-back[hidden],
.authyo-nav-next[hidden],
.authyo-nav-skip[hidden],
.authyo-setup-submit[hidden] {
	display: none !important;
}

.authyo-nav-skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 16px;
	background: none;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	font-size: 13px;
	font-weight: 500;
	color: var( --authyo-muted );
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s var( --authyo-ease ), border-color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease );
}

.authyo-nav-skip:hover,
.authyo-nav-skip:focus {
	color: var( --authyo-primary );
	border-color: var( --authyo-primary );
	background: var( --authyo-primary-light );
	text-decoration: none;
}

.authyo-setup-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border-radius: var( --authyo-radius-sm ) !important;
	box-sizing: border-box;
	box-shadow: var( --authyo-shadow-sm ) !important;
	transition: background 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease ), transform 0.1s var( --authyo-ease );
}

.authyo-setup-submit:hover:not( :disabled ) {
	box-shadow: var( --authyo-shadow-md ) !important;
}

.authyo-setup-submit:active:not( :disabled ) {
	transform: translateY( 1px );
}

.authyo-setup-submit:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}

.authyo-setup-submit.is-done {
	background: var( --authyo-success ) !important;
	border-color: var( --authyo-success ) !important;
}

/* Spinner --------------------------------------------------------------- */

.authyo-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: authyo-spin 0.7s linear infinite;
}

.authyo-setup-submit.is-saving .authyo-spinner {
	display: inline-block;
}

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

/* Step 4: country dropdown configuration --------------------------------- */

.authyo-mode-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
	margin: 0 0 4px;
}

.authyo-mode-card {
	position: relative;
	display: block;
	cursor: pointer;
}

.authyo-mode-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.authyo-mode-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 18px 12px;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	background: var( --authyo-surface );
	transition: border-color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease );
}

.authyo-mode-card:hover .authyo-mode-card-inner {
	border-color: var( --authyo-faint );
	background: var( --authyo-surface-tint );
}

.authyo-mode-card.authyo-mode-active .authyo-mode-card-inner {
	border-color: var( --authyo-primary );
	background: var( --authyo-primary-light );
	box-shadow: 0 0 0 1px var( --authyo-primary ) inset;
}

.authyo-mode-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 18px;
	line-height: 1;
	color: var( --authyo-ink-soft );
	background: var( --authyo-surface-tint );
	border-radius: var( --authyo-radius-sm );
	margin-bottom: 9px;
	transition: color 0.15s var( --authyo-ease ), background 0.15s var( --authyo-ease );
}

.authyo-mode-card.authyo-mode-active .authyo-mode-icon {
	color: var( --authyo-primary );
	background: #fff;
}

.authyo-mode-title {
	font-size: 13px;
	font-weight: 650;
	color: var( --authyo-ink );
	margin-bottom: 3px;
}

.authyo-mode-desc {
	font-size: 11.5px;
	color: var( --authyo-muted );
	line-height: 1.4;
}

.authyo-country-panel {
	margin-top: 14px;
	border: 1px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	overflow: hidden;
}

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

.authyo-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 14px;
	background: var( --authyo-surface-tint );
	border-bottom: 1px solid var( --authyo-border-soft );
}

.authyo-panel-title {
	font-size: 12.5px;
	font-weight: 650;
	color: var( --authyo-ink );
}

.authyo-panel-count {
	font-size: 11.5px;
	background: var( --authyo-primary );
	color: #fff;
	padding: 3px 10px;
	border-radius: var( --authyo-radius-pill );
	font-weight: 600;
}

.authyo-country-search-wrap {
	position: relative;
	padding: 11px 14px;
	border-bottom: 1px solid var( --authyo-border-soft );
}

.authyo-search-icon {
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	color: var( --authyo-faint );
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
}

.authyo-country-search-input {
	width: 100%;
	padding: 9px 30px 9px 34px;
	border: 1.5px solid var( --authyo-border );
	border-radius: var( --authyo-radius-sm );
	font-size: 13px;
	background: var( --authyo-surface );
	box-sizing: border-box;
	transition: border-color 0.15s var( --authyo-ease ), box-shadow 0.15s var( --authyo-ease );
}

.authyo-country-search-input:focus {
	border-color: var( --authyo-primary );
	outline: 2px solid transparent;
	box-shadow: var( --authyo-shadow-focus );
}

.authyo-search-clear {
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --authyo-faint );
	border: none;
	color: #fff;
	width: 16px;
	height: 16px;
	line-height: 1;
	border-radius: 50%;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s var( --authyo-ease );
}

.authyo-search-clear[hidden] {
	display: none;
}

.authyo-search-clear:hover {
	background: var( --authyo-danger );
}

.authyo-selected-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 11px 14px;
	min-height: 16px;
	border-bottom: 1px solid var( --authyo-border-soft );
}

.authyo-selected-tags:empty {
	padding: 6px 14px;
}

.authyo-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px 4px 10px;
	background: var( --authyo-primary-light );
	border: 1px solid rgba( 34, 113, 177, 0.22 );
	border-radius: var( --authyo-radius-pill );
	font-size: 11.5px;
	color: var( --authyo-primary-dark );
	font-weight: 550;
}

.authyo-tag-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border: none;
	background: rgba( 34, 113, 177, 0.15 );
	border-radius: 50%;
	color: var( --authyo-primary );
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s var( --authyo-ease ), color 0.15s var( --authyo-ease );
}

.authyo-tag-remove:hover {
	background: var( --authyo-danger );
	color: #fff;
}

.authyo-country-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 0;
	max-height: 260px;
	overflow-y: auto;
	padding: 8px 10px;
}

.authyo-country-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 9px;
	border-radius: var( --authyo-radius-sm );
	cursor: pointer;
	user-select: none;
	transition: background 0.12s var( --authyo-ease );
}

.authyo-country-checkbox:hover {
	background: var( --authyo-surface-tint );
}

.authyo-country-checkbox.authyo-country-checked {
	background: var( --authyo-primary-light );
}

.authyo-country-checkbox input[type="checkbox"] {
	margin: 0;
	width: 15px;
	height: 15px;
	accent-color: var( --authyo-primary );
	cursor: pointer;
}

.authyo-country-checkbox-name {
	font-size: 12.5px;
	color: var( --authyo-ink );
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.authyo-country-checkbox-dial {
	font-size: 11px;
	color: var( --authyo-muted );
	flex-shrink: 0;
}

.authyo-country-checkbox.authyo-country-hidden {
	display: none;
}

.authyo-country-no-results {
	padding: 22px 14px;
	text-align: center;
	color: var( --authyo-muted );
	font-size: 12.5px;
	font-style: italic;
}

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

.authyo-single-select-wrap {
	padding: 14px;
}

.authyo-single-select {
	cursor: pointer;
}

@media screen and ( max-width: 782px ) {
	.authyo-mode-cards {
		grid-template-columns: 1fr;
	}
}

/* Test-connection (Step 1) ----------------------------------------------- */

/* The OTP input box: wider, monospaced, centred digits. */
.authyo-test-otp-input {
	font-family: Consolas, Monaco, monospace;
	font-size: 18px !important;
	letter-spacing: 0.25em;
	text-align: center;
	max-width: 160px;
}

/* Shared busy styles for Send / Verify buttons. */
.authyo-test-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex: 0 0 auto;
}

.authyo-test-btn .authyo-spinner {
	display: none;
	border-color: rgba( 0, 0, 0, 0.15 );
	border-top-color: currentColor;
}

.authyo-test-btn.is-saving .authyo-spinner {
	display: inline-block;
}

/* Step 5 hint text */
.authyo-step5-hint {
	margin: 0 0 14px !important;
}

/* Success notice -------------------------------------------------------- */

.authyo-setup-notice-warnings {
	margin: 4px 0 8px 20px;
	list-style: disc;
	font-size: 12.5px;
	color: var( --authyo-muted );
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media screen and ( max-width: 782px ) {
	.authyo-setup-overlay {
		padding: 0;
		align-items: flex-end;
	}

	.authyo-setup-modal {
		max-width: 100%;
		max-height: 96vh;
		border-radius: var( --authyo-radius-md ) var( --authyo-radius-md ) 0 0;
	}

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

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

	.authyo-channel-grid,
	.authyo-field-row,
	.authyo-field-row-4,
	.authyo-formmode {
		grid-template-columns: 1fr;
	}

	.authyo-setup-footer {
		align-items: center;
		padding: 12px 18px;
		gap: 10px;
	}

	/* The lock note costs too much width next to the nav buttons. */
	.authyo-setup-footer-note {
		display: none;
	}

	.authyo-setup-footer-left,
	.authyo-setup-footer-right {
		flex: 0 0 auto;
	}

	.authyo-setup-footer-right {
		margin-left: auto;
	}

	.authyo-setup-submit,
	.authyo-nav-next {
		justify-content: center;
	}

	/* Step pips: keep the numbers, drop the labels. */
	.authyo-steps {
		padding: 4px 18px 14px;
	}

	.authyo-step-label {
		display: none;
	}

	/* WP bumps admin font sizes on mobile; keep inputs from zooming on iOS. */
	.authyo-input {
		font-size: 16px;
	}
}

@media screen and ( max-width: 480px ) {
	.authyo-setup-header h2 {
		font-size: 17px;
	}
}

/* Save API Keys button -------------------------------------------------- */

.authyo-save-creds-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 4px 0 20px;
	border-bottom: 1px solid #e0e4e8;
	margin-bottom: 4px;
}

.authyo-save-creds-wrap .button-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#authyo-save-creds-result {
	flex: 1;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 4px;
	font-weight: 500;
}

#authyo-save-creds-result.is-success {
	background: #edfaef;
	color: #00a32a;
	border: 1px solid #86efac;
}

#authyo-save-creds-result.is-error {
	background: #fef2f2;
	color: #b32d2e;
	border: 1px solid #fca5a5;
}

/* Reduced motion -------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.authyo-setup-overlay.is-open,
	.authyo-setup-modal,
	.authyo-setup-open-btn.authyo-setup-pulse,
	.authyo-spinner,
	.authyo-step-panel.slide-forward,
	.authyo-step-panel.slide-back {
		animation: none;
	}

	.authyo-step-marker,
	.authyo-step-pip::before {
		transition: none;
	}

	.authyo-toggle-thumb,
	.authyo-toggle-track,
	.authyo-channel-card,
	.authyo-channel-check,
	.authyo-nav-back,
	.authyo-nav-next,
	.authyo-setup-submit {
		transition: none;
	}
}