/**
 * Oliver POS onboarding — "Download, Scan, Sell" panel.
 *
 * Rendered inside the normal Oliver POS dashboard chrome (the shared
 * .oliver-pos-wrap + .oliver-pos-header), so this stylesheet only covers
 * the in-page panel itself. No fullscreen positioning, no WP chrome
 * hiding — the admin menu, toolbar, and footer stay visible around it.
 *
 * @package OliverPOS
 * @since   3.0.0
 */

/* ------------------------------------------------------------------
   Tokens + panel root
   ------------------------------------------------------------------ */

.oliver-onboarding {
	--op-bg:          #f7f7f9;
	--op-surface:     #ffffff;
	--op-ink:         #0d0d12;
	--op-ink-2:       #3a3a45;
	--op-ink-3:       #6b6b78;
	--op-line:        #e7e7ee;
	--op-line-2:      #f0f0f5;
	--op-accent:      #111111;
	--op-accent-ink:  #ffffff;
	--op-accent-soft: #f1f1f4;
	--op-success:     #14a44d;
	--op-warn:        #b17000;
	--op-radius-sm:   8px;
	--op-radius:      14px;
	--op-radius-lg:   20px;
	--op-shadow:      0 1px 2px rgba(15, 15, 20, 0.04),
	                  0 8px 24px rgba(15, 15, 20, 0.06);
	--op-shadow-lg:   0 4px 16px rgba(15, 15, 20, 0.06),
	                  0 32px 64px rgba(15, 15, 20, 0.08);
	--op-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, sans-serif;

	max-width: 1180px;
	margin: 0 auto;
	color: var(--op-ink);
	font-family: var(--op-font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.oliver-onboarding__hero {
	padding: 8px 0 28px;
	max-width: 760px;
}

/* Double class to win over .oliver-pos-wrap h1 from admin.css. */
.oliver-onboarding .oliver-onboarding__headline {
	margin: 0 0 10px;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--op-ink);
}

.oliver-onboarding__subhead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--op-ink-3);
}

/* ------------------------------------------------------------------
   "Create your free Oliver POS account" — Step 1 contents
   ------------------------------------------------------------------ */

/* `.oliver-account` is now the inner cluster of fields + CTA + disclosure
   nested inside the Step 1 body. It deliberately carries no card chrome
   of its own — the surrounding `.oliver-onboarding__panel` already
   provides the white surface; this just owns spacing. */
.oliver-account {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 12px;
}

.oliver-account__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 420px;
}

.oliver-account__field-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--op-ink-3);
	font-weight: 600;
}

.oliver-account__email {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius-sm);
	background: var(--op-surface);
	color: var(--op-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.oliver-account__email:hover {
	border-color: var(--op-ink-3);
}

.oliver-account__email:focus,
.oliver-account__email:focus-visible {
	outline: none;
	border-color: var(--op-ink);
	box-shadow: 0 0 0 3px rgba(15, 15, 20, 0.08);
}

.oliver-account__email[aria-invalid="true"] {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.oliver-account__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin-top: 4px;
}

.oliver-account__btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: var(--op-accent);
	color: var(--op-accent-ink);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.005em;
	line-height: 1;
	padding: 14px 22px;
	border-radius: var(--op-radius);
	cursor: pointer;
	transition: transform 80ms ease, box-shadow 120ms ease, opacity 120ms ease;
	box-shadow: 0 1px 2px rgba(15, 15, 20, 0.06),
	            0 6px 18px rgba(15, 15, 20, 0.1);
}

.oliver-account__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 15, 20, 0.08),
	            0 10px 24px rgba(15, 15, 20, 0.14);
}

.oliver-account__btn:focus-visible {
	outline: 2px solid var(--op-ink);
	outline-offset: 3px;
}

.oliver-account__btn:disabled,
.oliver-account__btn.is-busy {
	opacity: 0.7;
	cursor: progress;
	transform: none;
	box-shadow: 0 1px 2px rgba(15, 15, 20, 0.06);
}

.oliver-account__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.oliver-account__pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--op-line);
	border-radius: 999px;
	background: var(--op-accent-soft);
	color: var(--op-ink-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.oliver-account__pill::before {
	content: "✓";
	color: var(--op-success);
	margin-right: 6px;
	font-weight: 700;
}

.oliver-account__message {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: var(--op-radius-sm);
	background: #fdecec;
	color: #8a1a1a;
	font-size: 13px;
	line-height: 1.5;
}

.oliver-account__disclosure {
	margin-top: 22px;
	border-top: 1px solid var(--op-line-2);
	padding-top: 16px;
}

.oliver-account__disclosure-toggle {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 6px 0;
	color: var(--op-ink-2);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	letter-spacing: 0.01em;
}

.oliver-account__disclosure-toggle:hover {
	color: var(--op-ink);
}

.oliver-account__disclosure-toggle:focus-visible {
	outline: 2px solid var(--op-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

.oliver-account__disclosure-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	background: var(--op-accent-soft);
	color: var(--op-ink-2);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

.oliver-account__disclosure-body {
	margin-top: 12px;
	padding: 16px 18px;
	background: var(--op-bg);
	border: 1px solid var(--op-line-2);
	border-radius: var(--op-radius);
	color: var(--op-ink-2);
	font-size: 13px;
	line-height: 1.55;
}

.oliver-account__disclosure-lede {
	margin: 0 0 10px;
}

.oliver-account__disclosure-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.oliver-account__disclosure-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
}

.oliver-account__disclosure-list code {
	background: var(--op-surface);
	border: 1px solid var(--op-line);
	border-radius: 6px;
	padding: 1px 8px;
	font-size: 12px;
	color: var(--op-ink);
	word-break: break-all;
}

.oliver-account__disclosure-note {
	margin: 0;
	color: var(--op-ink-3);
	font-size: 12px;
}

/* ------------------------------------------------------------------
   Panel — steps + live status
   ------------------------------------------------------------------ */

.oliver-onboarding__panel {
	background: var(--op-surface);
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow);
	overflow: hidden;
}

.oliver-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oliver-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 20px;
	padding: 28px 32px;
	border-bottom: 1px solid var(--op-line-2);
}

.oliver-step:last-child {
	border-bottom: 0;
}

.oliver-step__num {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--op-accent);
	color: var(--op-accent-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	margin-top: 2px;
}

/* Done-state badge for a completed step. The Create Account step uses
   this once the merchant has registered — green tile + check glyph,
   visually flagged but still occupying the same Step 1 slot. */
.oliver-step__num--done {
	background: rgba(20, 164, 77, 0.14);
	color: var(--op-success);
}

.oliver-step__num--done svg {
	width: 18px;
	height: 18px;
}

/* Completed steps soften their typography so the visual focus stays on
   the active step(s) below. */
.oliver-step--done .oliver-step__title {
	color: var(--op-ink-2);
}

.oliver-step--done .oliver-step__caption {
	margin-bottom: 0;
}

.oliver-step__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--op-ink);
	letter-spacing: -0.01em;
}

.oliver-step__caption {
	margin: 0 0 16px;
	color: var(--op-ink-3);
	font-size: 14px;
}

/* ------------------------------------------------------------------
   Step 1 — downloads
   ------------------------------------------------------------------ */

.oliver-downloads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.oliver-download {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius);
	background: var(--op-surface);
	color: var(--op-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.oliver-download:hover,
.oliver-download:focus-visible {
	border-color: var(--op-ink-2);
	transform: translateY(-1px);
	box-shadow: var(--op-shadow);
	color: var(--op-ink);
	text-decoration: none;
}

.oliver-download.is-primary {
	background: var(--op-accent);
	border-color: var(--op-accent);
	color: var(--op-accent-ink);
}

.oliver-download.is-primary:hover,
.oliver-download.is-primary:focus-visible {
	color: var(--op-accent-ink);
	background: #000;
	border-color: #000;
}

.oliver-download.is-disabled {
	cursor: default;
	opacity: 0.6;
	pointer-events: none;
}

.oliver-download__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	align-items: center;
	justify-content: center;
}

.oliver-download__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.oliver-download__label {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.oliver-download__pill {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--op-accent-soft);
	color: var(--op-ink-3);
	font-weight: 500;
	flex-shrink: 0;
}

.oliver-download__pill--ready {
	background: #e8f8ef;
	color: var(--op-success);
	font-weight: 600;
}

.oliver-download.is-primary .oliver-download__pill--ready {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

/* ------------------------------------------------------------------
   Step 2 — QR + key
   ------------------------------------------------------------------ */

.oliver-pair {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	padding: 18px;
	background: var(--op-accent-soft);
	border-radius: var(--op-radius);
	margin-top: 8px;
	align-items: center;
}

.oliver-pair__qr {
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: var(--op-radius-sm);
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--op-line);
}

.oliver-pair__qr svg {
	width: 100%;
	height: auto;
	display: block;
}

.oliver-pair__qr-error {
	margin: 0;
	padding: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--op-ink-3);
	text-align: center;
}

.oliver-pair__key {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.oliver-pair__key-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--op-ink-3);
	font-weight: 600;
}

.oliver-pair__key-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 13px;
	color: var(--op-ink-2);
	overflow: hidden;
}

.oliver-pair__key-row code {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: none;
	padding: 0;
	font-size: 13px;
	color: var(--op-ink-2);
}

.oliver-chip {
	appearance: none;
	border: 1px solid var(--op-line);
	background: var(--op-surface);
	color: var(--op-ink);
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
}

.oliver-chip:hover,
.oliver-chip:focus-visible {
	border-color: var(--op-ink);
	background: var(--op-accent);
	color: var(--op-accent-ink);
}

.oliver-chip.is-copied {
	border-color: var(--op-success);
	color: var(--op-success);
	background: #e8f8ef;
}

.oliver-pair__trust {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--op-ink-3);
}

.oliver-pair__trust svg {
	flex-shrink: 0;
	color: var(--op-ink-3);
}

/* ------------------------------------------------------------------
   Live status strip
   ------------------------------------------------------------------ */

.oliver-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 32px;
	background: #fafafc;
	border-top: 1px solid var(--op-line-2);
}

.oliver-status__indicator {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--op-ink-2);
}

.oliver-status__dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--op-warn);
	animation: oliver-pulse 1.4s infinite;
	flex-shrink: 0;
}

.oliver-status[data-state="paired"] {
	background: #e8f8ef;
	border-top-color: rgba(20, 164, 77, 0.25);
}

.oliver-status[data-state="paired"] .oliver-status__dot {
	background: var(--op-success);
	animation: none;
}

.oliver-status[data-state="paired"] .oliver-status__indicator {
	color: var(--op-success);
	font-weight: 600;
}

@keyframes oliver-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(177, 112, 0, 0.45);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(177, 112, 0, 0);
	}
}

/* ------------------------------------------------------------------
   Feature grid
   ------------------------------------------------------------------ */

.oliver-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 28px;
}

.oliver-features__col-title {
	margin: 0 0 14px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--op-ink-3);
}

.oliver-feature {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--op-line-2);
}

.oliver-feature:first-of-type {
	border-top: 0;
	padding-top: 4px;
}

.oliver-feature__icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--op-accent-soft);
	color: var(--op-ink);
	flex-shrink: 0;
	margin-top: 2px;
}

.oliver-feature__icon svg {
	display: block;
}

.oliver-feature__body {
	min-width: 0;
}

.oliver-feature h5 {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--op-ink);
	letter-spacing: -0.005em;
}

.oliver-feature p {
	margin: 0;
	font-size: 13px;
	color: var(--op-ink-3);
	line-height: 1.55;
}

/* ------------------------------------------------------------------
   Trust footer
   ------------------------------------------------------------------ */

.oliver-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 8px;
	padding-top: 20px;
	border-top: 1px solid var(--op-line-2);
	font-size: 12px;
	color: var(--op-ink-3);
}

.oliver-trust__sep {
	color: var(--op-line);
}

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

@media (max-width: 960px) {
	.oliver-features {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.oliver-pair {
		grid-template-columns: 1fr;
	}

	.oliver-pair__qr {
		max-width: 200px;
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.oliver-onboarding__headline {
		font-size: 26px;
	}

	.oliver-step {
		grid-template-columns: 36px 1fr;
		gap: 14px;
		padding: 22px 20px;
	}

	.oliver-step__num {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	.oliver-status {
		padding: 14px 20px;
	}

	.oliver-downloads {
		grid-template-columns: 1fr 1fr;
	}

	.oliver-account__btn {
		width: 100%;
		text-align: center;
	}

	.oliver-account__field {
		max-width: 100%;
	}
}