/**
 * Admin CSS for PagePin Setup Wizard
 *
 * Styles for the onboarding wizard after plugin activation.
 *
 * @package   PagePin
 * @author    Patrick Schlesinger
 * @copyright 2026 PagePin Patrick Schlesinger
 * @license   GPL-2.0-or-later
 * @contact   service@pagepin.io
 * @version   1.0.0
 */

/* ===== WIZARD VARIABLES (inherit from admin.css) ===== */
:root {
	--wizard-ember-accent: #ff6800;
	--wizard-ember-accent-hover: #ff8533;
	--wizard-ember-accent-dark: #cc5300;
	--wizard-ember-glow: rgba(255, 104, 0, 0.3);
	--wizard-slate-50: #f8fafc;
	--wizard-slate-100: #f1f5f9;
	--wizard-slate-200: #e2e8f0;
	--wizard-slate-300: #cbd5e1;
	--wizard-slate-400: #94a3b8;
	--wizard-slate-500: #64748b;
	--wizard-slate-600: #475569;
	--wizard-slate-700: #334155;
	--wizard-slate-800: #1e293b;
	--wizard-slate-900: #0f172a;
	--wizard-positive: #22c55e;
}

/* ===== WIZARD WRAPPER ===== */
.pagepin-wizard-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--wizard-slate-900);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

/* Hide WP admin bar and menu during wizard */
.pagepin-wizard-wrap ~ #adminmenuwrap,
.pagepin-wizard-wrap ~ #wpadminbar,
.pagepin-wizard-wrap ~ #wpcontent {
	display: none !important;
}

/* ===== WIZARD CONTAINER ===== */
.pagepin-wizard-container {
	background: var(--wizard-slate-800);
	border: 1px solid var(--wizard-slate-700);
	border-radius: 16px;
	width: 100%;
	max-width: 680px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ===== WIZARD HEADER ===== */
.pagepin-wizard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: var(--wizard-slate-900);
	border-bottom: 1px solid var(--wizard-slate-700);
}

.pagepin-wizard-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pagepin-wizard-logo-svg {
	color: var(--wizard-ember-accent);
	filter: drop-shadow(0 2px 8px var(--wizard-ember-glow));
}

.pagepin-wizard-brand {
	font-size: 20px;
	font-weight: 700;
	color: var(--wizard-slate-50);
	letter-spacing: -0.5px;
}

.pagepin-wizard-skip {
	color: var(--wizard-slate-400);
	text-decoration: none;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.pagepin-wizard-skip:hover {
	color: var(--wizard-slate-200);
	background: var(--wizard-slate-700);
}

/* ===== PROGRESS BAR ===== */
.pagepin-wizard-progress {
	padding: 24px;
	background: var(--wizard-slate-900);
	border-bottom: 1px solid var(--wizard-slate-700);
}

.pagepin-wizard-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.pagepin-wizard-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
}

.pagepin-wizard-step-indicator {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wizard-slate-700);
	border: 2px solid var(--wizard-slate-600);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wizard-slate-400);
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.pagepin-wizard-step-indicator .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.pagepin-wizard-step.active .pagepin-wizard-step-indicator {
	background: var(--wizard-ember-accent);
	border-color: var(--wizard-ember-accent);
	color: #fff;
	box-shadow: 0 0 0 4px var(--wizard-ember-glow);
}

.pagepin-wizard-step.completed .pagepin-wizard-step-indicator {
	background: var(--wizard-positive);
	border-color: var(--wizard-positive);
	color: #fff;
}

.pagepin-wizard-step.is-complete-step .pagepin-wizard-step-indicator {
	background: var(--wizard-slate-700);
	border-color: var(--wizard-slate-600);
}

.pagepin-wizard-step.is-complete-step.active .pagepin-wizard-step-indicator {
	background: var(--wizard-positive);
	border-color: var(--wizard-positive);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
}

.pagepin-wizard-step-label {
	font-size: 12px;
	color: var(--wizard-slate-400);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.3s ease;
}

.pagepin-wizard-step.active .pagepin-wizard-step-label {
	color: var(--wizard-slate-50);
}

.pagepin-wizard-step.completed .pagepin-wizard-step-label {
	color: var(--wizard-positive);
}

.pagepin-wizard-step-connector {
	width: 60px;
	height: 2px;
	background: var(--wizard-slate-700);
	margin: 0 8px;
	margin-bottom: 24px;
	transition: background 0.3s ease;
}

.pagepin-wizard-step.completed + .pagepin-wizard-step-connector {
	background: var(--wizard-positive);
}

/* ===== WIZARD CONTENT ===== */
.pagepin-wizard-content {
	flex: 1;
	overflow-y: auto;
	padding: 32px;
}

.pagepin-wizard-step-content {
	display: none;
}

.pagepin-wizard-step-content.active {
	display: block;
	animation: wizardFadeIn 0.3s ease;
}

@keyframes wizardFadeIn {

	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pagepin-wizard-step-inner h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--wizard-slate-50);
	margin: 0 0 12px 0;
}

.pagepin-wizard-description {
	font-size: 15px;
	color: var(--wizard-slate-300);
	margin: 0 0 24px 0;
	line-height: 1.6;
}

/* ===== WELCOME STEP ===== */
.pagepin-wizard-welcome {
	text-align: center;
	padding: 20px 0;
}

.pagepin-wizard-welcome-icon {
	margin-bottom: 24px;
}

.pagepin-wizard-welcome-icon .pagepin-wizard-logo-svg {
	animation: wizardLogoPulse 2s ease-in-out infinite;
}

@keyframes wizardLogoPulse {

	0%, 100% {
		filter: drop-shadow(0 2px 8px var(--wizard-ember-glow));
		transform: scale(1);
	}

	50% {
		filter: drop-shadow(0 4px 20px var(--wizard-ember-glow));
		transform: scale(1.05);
	}
}

.pagepin-wizard-welcome h2 {
	font-size: 28px;
	margin-bottom: 16px;
	color: var(--wizard-ember-accent);
}

.pagepin-wizard-intro {
	font-size: 16px;
	color: var(--wizard-slate-300);
	max-width: 480px;
	margin: 0 auto 32px auto;
	line-height: 1.7;
}

.pagepin-wizard-features {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.pagepin-wizard-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--wizard-slate-700);
	border-radius: 8px;
	color: var(--wizard-slate-100);
	font-size: 14px;
	font-weight: 500;
}

.pagepin-wizard-feature .dashicons {
	color: var(--wizard-ember-accent);
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.pagepin-wizard-setup-hint {
	font-size: 14px;
	color: var(--wizard-slate-400);
}

/* ===== FORM FIELDS ===== */
.pagepin-wizard-field {
	margin-bottom: 24px;
}

.pagepin-wizard-input {
	width: 100%;
	padding: 12px 16px;
	background: var(--wizard-slate-900);
	border: 1px solid var(--wizard-slate-600);
	border-radius: 8px;
	color: var(--wizard-slate-50);
	font-size: 15px;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.pagepin-wizard-input:focus {
	outline: none;
	border-color: var(--wizard-ember-accent);
	box-shadow: 0 0 0 3px var(--wizard-ember-glow);
}

.pagepin-wizard-input::placeholder {
	color: var(--wizard-slate-500);
}

/* Recipients Field */
#pagepin-wizard-recipients {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.pagepin-wizard-recipient-row {
	display: flex;
	gap: 12px;
	align-items: center;
}

.pagepin-wizard-input-name {
	flex: 0 0 160px;
}

.pagepin-wizard-input-email {
	flex: 1;
}

.pagepin-wizard-btn-remove {
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wizard-slate-600);
	border-radius: 6px;
	color: var(--wizard-slate-400);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.pagepin-wizard-btn-remove:hover {
	background: #ef4444;
	border-color: #ef4444;
	color: #fff;
}

.pagepin-wizard-btn-remove .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.pagepin-wizard-btn-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: transparent;
	border: 1px dashed var(--wizard-slate-600);
	border-radius: 8px;
	color: var(--wizard-slate-300);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.pagepin-wizard-btn-add:hover {
	border-color: var(--wizard-ember-accent);
	color: var(--wizard-ember-accent);
	background: var(--wizard-slate-900);
}

.pagepin-wizard-btn-add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagepin-wizard-btn-add .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Hint Text */
.pagepin-wizard-hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--wizard-slate-400);
	background: var(--wizard-slate-900);
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid var(--wizard-slate-700);
}

.pagepin-wizard-hint .dashicons {
	color: var(--wizard-ember-accent);
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ===== ROLES GRID ===== */
.pagepin-wizard-roles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.pagepin-wizard-role-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--wizard-slate-900);
	border: 1px solid var(--wizard-slate-700);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.pagepin-wizard-role-item:hover {
	border-color: var(--wizard-slate-600);
	background: var(--wizard-slate-800);
}

.pagepin-wizard-role-item.checked {
	border-color: var(--wizard-ember-accent);
	background: rgba(255, 104, 0, 0.1);
}

.pagepin-wizard-role-item input {
	display: none;
}

.pagepin-wizard-role-checkbox {
	width: 22px;
	height: 22px;
	border: 2px solid var(--wizard-slate-600);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.pagepin-wizard-role-checkbox .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: transparent;
	transition: color 0.2s ease;
}

.pagepin-wizard-role-item.checked .pagepin-wizard-role-checkbox {
	background: var(--wizard-ember-accent);
	border-color: var(--wizard-ember-accent);
}

.pagepin-wizard-role-item.checked .pagepin-wizard-role-checkbox .dashicons {
	color: #fff;
}

.pagepin-wizard-role-name {
	font-size: 14px;
	color: var(--wizard-slate-200);
	font-weight: 500;
}

/* ===== TOGGLE SWITCH ===== */
.pagepin-wizard-toggle-group {
	margin-bottom: 20px;
}

.pagepin-wizard-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.pagepin-wizard-toggle input {
	display: none;
}

.pagepin-wizard-toggle-slider {
	width: 48px;
	height: 26px;
	background: var(--wizard-slate-700);
	border-radius: 13px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.pagepin-wizard-toggle-slider::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: var(--wizard-slate-400);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.pagepin-wizard-toggle input:checked + .pagepin-wizard-toggle-slider {
	background: var(--wizard-ember-accent);
}

.pagepin-wizard-toggle input:checked + .pagepin-wizard-toggle-slider::after {
	transform: translateX(22px);
	background: #fff;
}

.pagepin-wizard-toggle-label {
	font-size: 15px;
	color: var(--wizard-slate-100);
	font-weight: 500;
}

.pagepin-wizard-toggle-description {
	font-size: 13px;
	color: var(--wizard-slate-400);
	margin: 8px 0 0 60px;
	line-height: 1.5;
}

.pagepin-wizard-conditional {
	margin-top: 20px;
	padding: 20px;
	background: var(--wizard-slate-900);
	border-radius: 8px;
	border: 1px solid var(--wizard-slate-700);
}

.pagepin-wizard-conditional h3 {
	color: var(--wizard-slate-50);
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
}

.pagepin-wizard-conditional h3:first-child {
	margin-top: 0;
}

.pagepin-wizard-conditional .pagepin-wizard-roles-grid {
	margin-bottom: 15px;
}

.pagepin-wizard-conditional-field {
	margin-top: 15px;
}

.pagepin-wizard-conditional-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 13px;
	color: var(--wizard-slate-200);
}

.pagepin-wizard-conditional-select {
	width: 100%;
	max-width: 300px;
}

.pagepin-wizard-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.pagepin-wizard-tag-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

/* ===== COMPLETE STEP ===== */
.pagepin-wizard-complete {
	text-align: center;
	padding: 10px 0;
}

.pagepin-wizard-complete-icon {
	margin-bottom: 20px;
}

.pagepin-wizard-complete-icon .dashicons {
	font-size: 64px;
	width: 64px;
	height: 64px;
	color: var(--wizard-positive);
	animation: wizardCheckBounce 0.5s ease;
}

@keyframes wizardCheckBounce {

	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.pagepin-wizard-complete h2 {
	font-size: 28px;
	margin-bottom: 12px;
	color: var(--wizard-ember-accent);
}

.pagepin-wizard-summary {
	background: var(--wizard-slate-900);
	border: 1px solid var(--wizard-slate-700);
	border-radius: 12px;
	padding: 20px;
	margin: 24px auto;
	max-width: 400px;
	text-align: left;
}

.pagepin-wizard-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--wizard-slate-700);
}

.pagepin-wizard-summary-item:last-child {
	border-bottom: none;
}

.pagepin-wizard-summary-label {
	font-size: 13px;
	color: var(--wizard-slate-400);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pagepin-wizard-summary-value {
	font-size: 14px;
	color: var(--wizard-slate-100);
	font-weight: 500;
}

.pagepin-wizard-shortcut-box {
	background: var(--wizard-slate-900);
	border: 1px solid var(--wizard-ember-accent);
	border-radius: 12px;
	padding: 24px;
	margin: 24px auto;
	max-width: 320px;
}

.pagepin-wizard-shortcut-label {
	font-size: 12px;
	color: var(--wizard-ember-accent);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
	font-weight: 600;
}

.pagepin-wizard-shortcut-keys {
	font-size: 20px;
	color: var(--wizard-slate-50);
	font-weight: 600;
}

.pagepin-wizard-shortcut-keys kbd {
	display: inline-block;
	padding: 8px 14px;
	background: var(--wizard-slate-800);
	border: 1px solid var(--wizard-slate-600);
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	margin: 0 4px;
	box-shadow: 0 2px 0 var(--wizard-slate-700);
}

.pagepin-wizard-shortcut-hint {
	font-size: 13px;
	color: var(--wizard-slate-400);
	margin-top: 16px;
}

.pagepin-wizard-next-steps {
	text-align: left;
	max-width: 400px;
	margin: 0 auto;
}

.pagepin-wizard-next-steps h3 {
	font-size: 14px;
	color: var(--wizard-slate-300);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 16px 0;
}

.pagepin-wizard-next-steps ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pagepin-wizard-next-steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	color: var(--wizard-slate-200);
	font-size: 14px;
	line-height: 1.5;
}

.pagepin-wizard-next-steps li .dashicons {
	color: var(--wizard-positive);
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ===== WIZARD FOOTER ===== */
.pagepin-wizard-footer {
	display: flex;
	justify-content: space-between;
	padding: 20px 24px;
	background: var(--wizard-slate-900);
	border-top: 1px solid var(--wizard-slate-700);
}

.pagepin-wizard-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
}

.pagepin-wizard-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.pagepin-wizard-btn-primary {
	background: var(--wizard-ember-accent);
	color: #fff;
	margin-left: auto;
}

.pagepin-wizard-btn-primary:hover {
	background: var(--wizard-ember-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--wizard-ember-glow);
}

.pagepin-wizard-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.pagepin-wizard-btn-secondary {
	background: transparent;
	color: var(--wizard-slate-300);
	border: 1px solid var(--wizard-slate-600);
}

.pagepin-wizard-btn-secondary:hover {
	background: var(--wizard-slate-800);
	color: var(--wizard-slate-100);
}

.pagepin-wizard-btn-success {
	background: var(--wizard-positive);
	color: #fff;
}

.pagepin-wizard-btn-success:hover {
	background: #1db954;
}

/* Loading State */
.pagepin-wizard-btn.loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.pagepin-wizard-btn.loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wizardSpinner 0.8s linear infinite;
}

@keyframes wizardSpinner {

	to {
		transform: rotate(360deg);
	}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {

	.pagepin-wizard-wrap {
		padding: 10px;
	}

	.pagepin-wizard-container {
		max-height: 100vh;
		border-radius: 12px;
	}

	.pagepin-wizard-header {
		padding: 16px 20px;
	}

	.pagepin-wizard-brand {
		font-size: 18px;
	}

	.pagepin-wizard-progress {
		padding: 16px;
	}

	.pagepin-wizard-steps {
		flex-wrap: wrap;
		gap: 8px;
	}

	.pagepin-wizard-step-connector {
		display: none;
	}

	.pagepin-wizard-step-label {
		display: none;
	}

	.pagepin-wizard-content {
		padding: 24px 20px;
	}

	.pagepin-wizard-step-inner h2,
	.pagepin-wizard-welcome h2,
	.pagepin-wizard-complete h2 {
		font-size: 22px;
	}

	.pagepin-wizard-features {
		flex-direction: column;
		gap: 12px;
	}

	.pagepin-wizard-recipient-row {
		flex-wrap: wrap;
	}

	.pagepin-wizard-input-name {
		flex: 1 1 100%;
	}

	.pagepin-wizard-input-email {
		flex: 1 1 calc(100% - 48px);
	}

	.pagepin-wizard-roles-grid {
		grid-template-columns: 1fr;
	}

	.pagepin-wizard-footer {
		padding: 16px 20px;
	}

	.pagepin-wizard-btn {
		padding: 10px 18px;
		font-size: 14px;
	}
}