// ==========================================================================
// Quick Setup wizard (`containers/QuickSetup/*`) — `bl-qs-*` design system.
// Matches the redesigned admin (tokens mirror `_settings.scss`). The legacy
// `_quick-setup.scss` styles the old markup and is no longer used by these
// components.
// ==========================================================================
$qs-border: #e6e8ee;
$qs-text: #1a2233;
$qs-muted: #6b7280;
$qs-blue: #2f6bff;
$qs-blue-dark: #1f57e6;
$qs-surface: #f7f8fa;
$qs-white: #fff;
$qs-green: #16a34a;
$qs-utm-applied: #28a745;
$qs-danger: #ef4444;

.bl-qs {
	max-width: 920px;
	margin: 0 auto;
	color: $qs-text;
	font-size: 14px;
	line-height: 1.5;

	* {
		box-sizing: border-box;
	}

	// ---- Page heading ----------------------------------------------------
	&__masthead {
		margin-bottom: 26px;
		text-align: center;
	}
	&__title {
		margin: 0 0 6px;
		padding: 0;
		font-size: 28px;
		font-weight: 800;
		line-height: 1.2;
		color: $qs-text;
	}
	&__subtitle {
		margin: 0;
		color: $qs-muted;
		font-size: 14.5px;
	}

	// ---- Stepper ---------------------------------------------------------
	&__steps {
		display: flex;
		align-items: center;
		margin-bottom: 24px;
		padding: 18px 20px;
		border: 1px solid $qs-border;
		border-radius: 14px;
		background: $qs-white;
	}
	&__step {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: none;
	}
	&__step-dot {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border: 2px solid $qs-border;
		border-radius: 50%;
		background: $qs-white;
		color: #9aa2b1;
		font-size: 13px;
		font-weight: 700;
		transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	}
	&__step-label {
		color: $qs-muted;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
	}
	&__step-line {
		flex: 1 1 auto;
		height: 2px;
		min-width: 16px;
		margin: 0 12px;
		background: $qs-border;
		transition: background-color 0.18s ease;
	}

	&__step.is-active {
		.bl-qs__step-dot {
			border-color: $qs-blue;
			color: $qs-blue;
		}
		.bl-qs__step-label {
			color: $qs-text;
		}
	}
	&__step.is-done {
		.bl-qs__step-dot {
			border-color: $qs-blue;
			background: $qs-blue;
			color: #fff;
		}
	}
	&__step-line.is-done {
		background: $qs-blue;
	}

	// ---- Panel -----------------------------------------------------------
	&__panel {
		padding: 32px;
		border: 1px solid $qs-border;
		border-radius: 16px;
		background: $qs-white;
	}
	&__head {
		margin-bottom: 24px;
	}
	&__head-title {
		margin: 0 0 6px;
		padding: 0;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;
		color: $qs-text;
	}
	&__head-desc {
		margin: 0;
		max-width: 640px;
		color: $qs-muted;
		font-size: 13.5px;
	}
	&__head--center {
		text-align: center;

		.bl-qs__head-desc {
			margin: 0 auto;
		}
	}

	// ---- Footer nav ------------------------------------------------------
	&__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: 20px;
	}
	&__actions {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-left: auto;
	}
	&__skip {
		border: 0;
		background: none;
		padding: 0;
		color: $qs-muted;
		font-size: 13.5px;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;

		&:hover {
			color: $qs-text;
		}
	}
	&__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 44px;
		padding: 0 22px;
		border: 1px solid transparent;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

		svg {
			flex: none;
		}
		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
		&--primary {
			background: $qs-blue;
			color: #fff;

			&:hover:not(:disabled) {
				background: $qs-blue-dark;
				color: #fff;
			}
		}
		&--ghost {
			border-color: $qs-border;
			background: $qs-white;
			color: $qs-text;

			&:hover:not(:disabled) {
				border-color: $qs-blue;
				color: $qs-blue;
			}
		}
	}

	// ---- Getting started -------------------------------------------------
	&__video {
		position: relative;
		width: 100%;
		max-width: 560px;
		margin: 0 auto 24px;
		aspect-ratio: 16 / 9;
		border-radius: 14px;
		overflow: hidden;
		background: #0f1626;

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}
	// Usage-data opt-in card: Allow & Continue / Skip.
	&__consent {
		padding: 20px 24px 24px;
		border: 1px solid $qs-border;
		border-radius: 14px;
		background: $qs-white;
		color: $qs-muted;
		font-size: 14px;
		line-height: 1.6;
	}
	&__consent-head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}
	&__consent-icon {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 8px;
		background: $qs-surface;
		color: $qs-text;
	}
	&__consent-title {
		margin: 0;
		padding: 0;
		color: $qs-text;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
	}
	&__consent-text {
		margin: 0;
		color: $qs-muted;
		font-size: 14px;
		line-height: 1.6;
	}
	&__consent-actions {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
		margin-top: 22px;

		.bl-qs__btn {
			min-width: 200px;
		}
	}
	&__consent-skip {
		border: 0;
		background: none;
		padding: 8px 4px;
		color: $qs-text;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;

		&:hover,
		&:focus-visible {
			color: $qs-blue;
		}
	}
	&__consent-check {
		display: inline-flex;
		align-items: flex-start;
		gap: 8px;
		cursor: pointer;

		input[type='checkbox'] {
			flex: none;
			margin: 2px 0 0;
		}
	}
	&__consent-link {
		border: 0;
		background: none;
		padding: 0;
		color: $qs-text;
		font-size: inherit;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
	}
	&__consent-more {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px dashed $qs-border;
		font-size: 13px;

		ul {
			margin: 0 0 8px 18px;
			padding: 0;
			list-style: disc;
		}
		li {
			margin: 0 0 4px;
		}
		p {
			margin: 0;
		}
		a {
			color: $qs-blue;
		}
	}

	// ---- Migration plugin cards -----------------------------------------
	&__plugins {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	&__plugin {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 14px 16px;
		border: 1px solid $qs-border;
		border-radius: 12px;
		background: $qs-white;
		cursor: pointer;
		transition: border-color 0.15s ease, background-color 0.15s ease;

		&:hover {
			border-color: #cfd6e4;
		}
		&.is-on {
			border-color: rgba($qs-blue, 0.5);
			background: rgba($qs-blue, 0.04);
		}
	}
	&__plugin-main {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}
	&__plugin-name {
		font-size: 14px;
		font-weight: 600;
		color: $qs-text;
	}
	&__badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 4px 10px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;

		&--complete {
			background: rgba($qs-green, 0.12);
			color: $qs-green;
		}
		&--in-progress {
			background: rgba($qs-blue, 0.12);
			color: $qs-blue;
		}
		&--failed {
			background: rgba($qs-danger, 0.12);
			color: $qs-danger;
		}
	}
	&__retry {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 32px;
		padding: 0 14px;
		border: 1px solid $qs-border;
		border-radius: 8px;
		background: $qs-white;
		color: $qs-danger;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
	}

	// ---- Inline hint / notice -------------------------------------------
	// e.g. the Pro "Force HTTPS" note injected via `BetterLinksQuickSetupConfig`
	// (`.short-description` with a dashicons info icon).
	.short-description,
	.btl-note {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin: 10px 0 0;
		padding: 10px 12px;
		border: 1px solid $qs-border;
		border-radius: 8px;
		background: $qs-surface;
		color: $qs-muted;
		font-size: 12.5px;
		line-height: 1.55;

		.dashicons {
			flex: none;
			width: 16px;
			height: 16px;
			margin-top: 1px;
			font-size: 16px;
			line-height: 1;
			color: #9aa2b1;
		}
		b,
		strong {
			color: $qs-text;
			font-weight: 700;
		}
		a {
			color: $qs-blue;
			font-weight: 600;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	// ---- Checkbox → toggle ----------------------------------------------
	// Same treatment as Settings: BetterLinks hides the native `.btl-check` and
	// paints the box as an icon-font glyph on `.text::before`, so the switch is
	// built there (::before = track, ::after = thumb).
	.btl-checkbox-field {
		display: inline-flex;
		align-items: center;
		margin: 0;
		cursor: pointer;

		.btl-check {
			display: none;
		}

		.text {
			position: relative;
			display: inline-flex;
			align-items: center;
			min-height: 24px;
			padding-left: 52px;
			font-size: 14px;
			font-weight: 500;
			color: $qs-text;

			&::before {
				content: '' !important;
				font-family: inherit !important;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 42px !important;
				height: 24px !important;
				padding: 0 !important;
				border-radius: 999px !important;
				background: #cbd2dd !important;
				color: transparent !important;
				box-shadow: none !important;
				transition: background-color 0.18s ease;
			}
			&::after {
				content: '';
				position: absolute;
				left: 3px;
				top: 50%;
				transform: translateY(-50%);
				width: 18px;
				height: 18px;
				border-radius: 50%;
				background: #fff;
				box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
				transition: transform 0.18s ease;
			}
			&:empty {
				padding-left: 42px;
			}
		}

		.btl-check:checked + .text::before {
			content: '' !important;
			background: $qs-blue !important;
		}
		.btl-check:checked + .text::after {
			transform: translateY(-50%) translateX(18px);
		}
		.btl-check:disabled + .text {
			opacity: 0.55;
			cursor: not-allowed;
		}
	}

	// ---- Create Link step -----------------------------------------------
	// This step reuses the `btl-modal-form-*` markup, but those base styles are
	// scoped to `.bl-drawer` in `_link-drawer.scss` and never applied here (the
	// legacy quick-setup block only added size tweaks on top). Port the field
	// styling so the step matches the redesigned link drawer.
	.create-links {
		.option > .ReactModal__Content {
			position: static !important;
			inset: auto !important;
			width: 100%;
			padding: 0 !important;
			border: 0;
			background: none;
			overflow: visible;
		}
		.btl-entry-content,
		.btl-entry-content-left {
			width: 100%;
		}

		// Fields
		.btl-modal-form-group {
			display: block;
			margin: 0 0 16px;
		}
		.btl-modal-form-label {
			display: block;
			width: auto;
			margin-bottom: 8px;
			padding: 0;
			font-size: 14px;
			font-weight: 600;
			color: $qs-text;

			&.btl-required::after {
				content: ' *';
				color: $qs-danger;
			}
		}
		.btl-modal-form-control {
			width: 100%;
			min-height: 46px;
			padding: 12px 14px;
			border: 1px solid $qs-border;
			border-radius: 10px;
			background: $qs-white;
			color: $qs-text;
			font-size: 14px;
			outline: none;
			box-shadow: none;
			transition: border-color 0.15s ease, box-shadow 0.15s ease;

			&:focus {
				border-color: $qs-blue;
				box-shadow: 0 0 0 3px rgba($qs-blue, 0.12);
			}
			&::placeholder {
				color: #9aa3b2;
			}
		}
		textarea.btl-modal-form-control {
			min-height: 84px;
			resize: vertical;
		}
		.btl-react-select__control {
			min-height: 46px;
			border-radius: 10px;
			border-color: $qs-border;
			box-shadow: none;

			&--is-focused {
				border-color: $qs-blue;
				box-shadow: 0 0 0 3px rgba($qs-blue, 0.12);
			}
		}

		// The UTM button sits INSIDE the Target URL field (right-aligned).
		.btl-has-utm-button {
			position: relative;

			.btl-modal-form-control {
				padding-right: 74px;
			}
			.btl-utm-button-group {
				position: absolute;
				right: 8px;
				bottom: 7px;
				display: flex;
				align-items: center;
				gap: 6px;
			}
			.btl-utm-button {
				position: relative; // anchors the "applied" badge
				display: inline-flex;
				align-items: center;
				gap: 4px;
				height: 32px;
				padding: 0 12px;
				border: 1px solid rgba($qs-blue, 0.4);
				border-radius: 8px;
				background: rgba($qs-blue, 0.08);
				color: $qs-blue;
				font-size: 12px;
				font-weight: 700;
				cursor: pointer;

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

				// Mirrors the link drawer's applied state (_link-drawer.scss).
				&--applied {
					border-color: rgba($qs-utm-applied, 0.45);
					background: rgba($qs-utm-applied, 0.1);
					color: $qs-utm-applied;
				}
			}
			.btl-utm-badge {
				position: absolute;
				top: -7px;
				right: -7px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 18px;
				height: 18px;
				border: 2px solid #fff;
				border-radius: 50%;
				background: $qs-utm-applied;
				line-height: 0;

				svg {
					width: 11px;
					height: 11px;
					display: block;

					path {
						fill: #fff;
					}
				}
			}
		}

		// Shortened URL (prefix + slug + copy)
		.btl-link-field-copyable {
			display: flex;
			align-items: stretch;
			border: 1px solid $qs-border;
			border-radius: 10px;
			background: $qs-white;
			overflow: hidden;

			&.is-invalid {
				border-color: $qs-danger;
			}
			.btl-static-link {
				display: flex;
				align-items: center;
				padding: 0 12px;
				border-right: 1px solid $qs-border;
				background: $qs-surface;
				color: $qs-muted;
				font-size: 13px;
				white-space: nowrap;
			}
			.btl-dynamic-link {
				flex: 1 1 auto;
				min-width: 0;
				min-height: 46px;
				padding: 12px;
				border: 0 !important;
				background: transparent;
				font-size: 14px;
				outline: none;
				box-shadow: none !important;
			}

			// Copy + social-share sit INSIDE the field, on the right.
			.btl-link-copy-button,
			.btl-link-share-button {
				flex: none;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 46px;
				min-height: 46px;
				border: 0;
				border-left: 1px solid $qs-border;
				background: $qs-white;
				color: $qs-muted;
				cursor: pointer;
				transition: color 0.15s ease;

				i,
				.dashicons {
					font-size: 15px;
				}
				&:hover:not(:disabled) {
					color: $qs-blue;
				}
				&:disabled {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}
			.btl-link-share-button {
				position: relative;

				.locked {
					position: absolute;
					right: 4px;
					top: 6px;
					width: 13px;
				}
			}
		}
		.errorlog {
			margin-top: 6px;
			color: $qs-danger;
			font-size: 13px;
		}

		.btl-entry-content-right {
			width: 100%;
		}

		// Link options block — the head is a <button> wrapping an <h4>.
		.link-options__head {
			display: block;
			width: auto;
			margin: 24px 0 14px;
			padding: 0;
			border: 0;
			background: none;
			box-shadow: none;
			text-align: left;
			cursor: default;

			.link-options__head--title {
				margin: 0;
				padding: 0;
				font-size: 15px;
				font-weight: 700;
				line-height: 1.4;
				color: $qs-text;
			}
		}
		.link-options__body {
			display: flex;
			flex-direction: column;
			gap: 14px;
			align-items: flex-start;
		}

		// Nested modals (UTM / duplicate link) keep their own portal sizing.
		.ReactModalPortal .ReactModal__Content {
			position: absolute !important;
			width: 500px;
			padding: 30px !important;
			background: $qs-white;
		}
	}

	// ---- Finish ----------------------------------------------------------
	&__finish {
		text-align: center;
		padding: 8px 0 4px;
	}
	&__finish-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 72px;
		height: 72px;
		margin-bottom: 18px;
		border-radius: 50%;
		background: rgba($qs-green, 0.12);
		color: $qs-green;
	}
	&__finish-title {
		margin: 0 0 8px;
		padding: 0;
		font-size: 24px;
		font-weight: 800;
		color: $qs-text;
	}
	&__finish-desc {
		max-width: 540px;
		margin: 0 auto 22px;
		color: $qs-muted;
		font-size: 14.5px;
	}
	&__shorturl {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		max-width: 100%;
		padding: 10px 10px 10px 16px;
		border: 1px solid $qs-border;
		border-radius: 12px;
		background: $qs-surface;

		code {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			background: none;
			padding: 0;
			color: $qs-text;
			font-size: 14px;
			font-weight: 600;
		}
	}
	&__shorturl-btn {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 1px solid $qs-border;
		border-radius: 8px;
		background: $qs-white;
		color: $qs-muted;
		cursor: pointer;

		&:hover {
			border-color: $qs-blue;
			color: $qs-blue;
		}
		&.is-copied {
			border-color: $qs-green;
			color: $qs-green;
		}
	}
}

// ==========================================================================
// Responsive
// ==========================================================================
@media screen and (max-width: 782px) {
	.bl-qs {
		padding: 16px 0 40px;

		&__title {
			font-size: 22px;
		}
		&__panel {
			padding: 20px;
		}
		// Collapse the stepper to just the dots + the active label.
		&__steps {
			padding: 14px;
		}
		&__step-label {
			display: none;
		}
		&__step.is-active .bl-qs__step-label {
			display: inline;
		}
		&__step-line {
			margin: 0 8px;
			min-width: 10px;
		}
		&__footer {
			flex-direction: column-reverse;
			align-items: stretch;
		}
		&__actions {
			margin-left: 0;

			.bl-qs__btn {
				flex: 1 1 0;
			}
		}
		&__skip {
			text-align: center;
		}
		&__consent {
			padding: 16px;
		}
		&__consent-actions {
			flex-direction: column;
			gap: 8px;

			.bl-qs__btn {
				width: 100%;
				min-width: 0;
			}
		}
	}
}

// ==========================================================================
// Dark mode
// ==========================================================================
// NOTE: this partial is @imported INSIDE `.betterlinks-body { … }`, so a bare
// `body.betterlinks-dark-mode { … }` would compile to
// `.betterlinks-body body.betterlinks-dark-mode …` — a <body> nested inside
// `.betterlinks-body`, which never matches. Appending `&` puts the parent
// AFTER the body selector: `body.betterlinks-dark-mode .betterlinks-body …`.
body.betterlinks-dark-mode & {
	.bl-qs {
		color: #e5e9f2;

		&__title,
		&__head-title,
		&__finish-title,
		&__plugin-name,
		&__consent-title,
		&__consent-link,
		&__consent-skip {
			color: #e5e9f2;
		}
		&__consent-text {
			color: #9aa5bd;
		}
		&__consent-icon {
			background: #1f283d;
			color: #e5e9f2;
		}
		&__subtitle,
		&__head-desc,
		&__finish-desc,
		&__consent,
		&__step-label {
			color: #9aa5bd;
		}
		&__steps,
		&__panel,
		&__plugin,
		&__shorturl-btn {
			border-color: #36405a;
			background: #1f283d;
		}
		&__step-dot {
			border-color: #36405a;
			background: #1f283d;
			color: #9aa5bd;
		}
		&__step.is-active .bl-qs__step-dot {
			border-color: #6f97ff;
			color: #6f97ff;
		}
		&__step.is-done .bl-qs__step-dot {
			border-color: #6f97ff;
			background: #6f97ff;
			color: #16203a;
		}
		&__step-line {
			background: #36405a;

			&.is-done {
				background: #6f97ff;
			}
		}
		&__step.is-active .bl-qs__step-label {
			color: #e5e9f2;
		}
		&__consent,
		&__shorturl {
			border-color: #36405a;
			background: #252f47;
		}
		&__btn--ghost {
			border-color: #36405a;
			background: #252f47;
			color: #e5e9f2;
		}
		&__plugin.is-on {
			border-color: rgba(111, 151, 255, 0.5);
			background: rgba(111, 151, 255, 0.08);
		}
		&__shorturl code {
			color: #e5e9f2;
		}

		// Inline hint / notice
		.short-description,
		.btl-note {
			border-color: #36405a;
			background: #252f47;
			color: #9aa5bd;

			b,
			strong {
				color: #e5e9f2;
			}
		}

		// Checkbox toggles
		.btl-checkbox-field .text {
			color: #e5e9f2;

			&::before {
				background: #4a5570 !important;
			}
		}
		.btl-checkbox-field .btl-check:checked + .text::before {
			background: #6f97ff !important;
		}

		// Create Link step fields
		.create-links {
			.btl-entry-content{
			background-color: #1f283d;
		}
			.btl-modal-form-label,
			.link-options__head .link-options__head--title {
				color: #e5e9f2;
			}
			.btl-modal-form-control,
			.btl-react-select__control,
			.btl-link-field-copyable,
			.ReactModalPortal .ReactModal__Content {
				border-color: #36405a;
				background: #252f47;
				color: #e5e9f2;
			}
			.btl-link-field-copyable .btl-link-copy-button,
			.btl-link-field-copyable .btl-link-share-button {
				border-color: #36405a;
				background: #252f47;
				color: #9aa5bd;
			}
			.btl-has-utm-button .btl-utm-button {
				border-color: rgba(111, 151, 255, 0.5);
				background: rgba(111, 151, 255, 0.14);
				color: #6f97ff;
			}
			.btl-link-field-copyable .btl-static-link {
				border-color: #36405a;
				background: #1f283d;
				color: #9aa5bd;
			}
			.btl-link-field-copyable .btl-dynamic-link {
				background: transparent;
				color: #e5e9f2;
			}
		}
	}
}