/* AI Shopping Experience — Live Demo customizer.
   Loaded inside the panel's Shadow DOM (see demo.js), so nothing here can leak
   into the store's pages and no theme rule can reach in. */

/* Sever inherited typography from the host page, exactly as the widget does.
   Custom properties are exempt from `all`, so --dm-* still flows through. */
:host {
	all: initial;
}

.dm-root {
	--dm-accent: #4f46e5;
	--dm-accent-2: #6366f1;
	--dm-surface: #0f172a;
	--dm-surface-2: #1e293b;
	--dm-line: rgba( 148, 163, 184, 0.22 );
	--dm-fg: #e2e8f0;
	--dm-muted: #94a3b8;
	--dm-z: 2147483200;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--dm-fg);
	-webkit-font-smoothing: antialiased;
}

.dm-root *,
.dm-root *::before,
.dm-root *::after {
	box-sizing: border-box;
}

/* ---------- Floating opener ---------- */

.dm-fab {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: var(--dm-z);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 12px 18px 12px 15px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient( 135deg, var(--dm-accent), var(--dm-accent-2) );
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.3 );
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.dm-fab:hover {
	transform: translateY( -2px );
	box-shadow: 0 14px 34px rgba( 15, 23, 42, 0.36 );
}

.dm-fab:focus-visible {
	outline: 3px solid rgba( 255, 255, 255, 0.75 );
	outline-offset: 2px;
}

/* The opener steps aside while the panel is on screen. */
.dm-root[data-open="true"] .dm-fab {
	opacity: 0;
	pointer-events: none;
	transform: translateY( 8px ) scale( 0.94 );
}

/* Attention pulse, used while the tour points at the opener. */
.dm-root[data-hint="true"] .dm-fab {
	animation: dm-pulse 1.6s ease-in-out infinite;
}

@keyframes dm-pulse {
	0%, 100% { box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.3 ), 0 0 0 0 rgba( 255, 255, 255, 0.55 ); }
	50%      { box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.3 ), 0 0 0 12px rgba( 255, 255, 255, 0 ); }
}

/* ---------- Panel ---------- */

.dm-panel {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: var(--dm-z);
	width: 336px;
	max-width: calc( 100vw - 40px );
	max-height: min( 78vh, 660px );
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dm-line);
	border-radius: 18px;
	background: var(--dm-surface);
	box-shadow: 0 24px 60px rgba( 2, 6, 23, 0.45 );
	overflow: hidden;
	opacity: 0;
	transform: translateY( 14px ) scale( 0.97 );
	transform-origin: bottom left;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.dm-root[data-open="true"] .dm-panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.dm-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 16px 14px;
	border-bottom: 1px solid var(--dm-line);
	background: linear-gradient( 135deg, rgba( 79, 70, 229, 0.16 ), transparent 70% );
	background-image: linear-gradient( 135deg, color-mix( in srgb, var(--dm-accent) 22%, transparent ), transparent 70% );
}

.dm-head__title {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	color: #f8fafc;
}

.dm-head__sub {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--dm-muted);
}

.dm-x {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 5px;
	border: 0;
	border-radius: 8px;
	color: var(--dm-muted);
	background: transparent;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.dm-x:hover {
	color: #fff;
	background: rgba( 148, 163, 184, 0.16 );
}

.dm-body {
	padding: 4px 16px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dm-field {
	padding: 14px 0;
	border-bottom: 1px solid var(--dm-line);
}

.dm-field:last-child {
	border-bottom: 0;
}

.dm-label {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dm-muted);
}

/* ---------- Segmented radio cards ---------- */

.dm-seg {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 6px;
}

.dm-seg__item {
	position: relative;
	display: block;
	cursor: pointer;
}

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

.dm-seg__item span {
	display: block;
	padding: 9px 6px;
	border: 1px solid var(--dm-line);
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 550;
	text-align: center;
	color: var(--dm-fg);
	background: var(--dm-surface-2);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dm-seg__item:hover span {
	border-color: rgba( 148, 163, 184, 0.5 );
}

.dm-seg__item input:checked + span {
	border-color: var(--dm-accent);
	color: #fff;
	background: color-mix( in srgb, var(--dm-accent) 30%, var(--dm-surface-2) );
}

.dm-seg__item input:focus-visible + span {
	outline: 2px solid var(--dm-accent);
	outline-offset: 2px;
}

/* ---------- Palette swatches ---------- */

.dm-swatches {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
}

.dm-sw {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 9px 4px;
	border: 1px solid var(--dm-line);
	border-radius: 10px;
	background: var(--dm-surface-2);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

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

.dm-sw__chip {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var(--dm-sw1), var(--dm-sw2) );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.18 );
}

/* The "custom" entry shows a spectrum rather than a fixed pair. */
.dm-sw--custom .dm-sw__chip {
	background: conic-gradient( #ef4444, #f59e0b, #10b981, #0ea5e9, #6366f1, #ec4899, #ef4444 );
}

.dm-sw__name {
	font-size: 11.5px;
	color: var(--dm-muted);
}

.dm-sw:hover {
	border-color: rgba( 148, 163, 184, 0.5 );
}

.dm-sw input:checked ~ .dm-sw__name {
	color: #fff;
}

/* `.is-on` is maintained by demo.js; the :has() rule is the progressive
   enhancement for browsers that support it. Either alone is enough. */
.dm-sw.is-on,
.dm-sw:has( input:checked ) {
	border-color: var(--dm-accent);
	background: color-mix( in srgb, var(--dm-accent) 20%, var(--dm-surface-2) );
}

.dm-sw.is-on .dm-sw__name { color: #fff; }

.dm-sw input:focus-visible ~ .dm-sw__chip {
	outline: 2px solid var(--dm-accent);
	outline-offset: 3px;
	border-radius: 50%;
}

/* ---------- Custom colors ---------- */

.dm-colors {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 8px;
	margin-top: 10px;
}

.dm-color {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border: 1px solid var(--dm-line);
	border-radius: 10px;
	font-size: 12px;
	color: var(--dm-muted);
	background: var(--dm-surface-2);
	cursor: pointer;
}

.dm-color input[type="color"] {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--dm-line);
	border-radius: 7px;
	background: none;
	cursor: pointer;
}

.dm-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.dm-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.dm-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

/* ---------- Text input ---------- */

.dm-input {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--dm-line);
	border-radius: 10px;
	font: inherit;
	font-size: 13.5px;
	color: var(--dm-fg);
	background: var(--dm-surface-2);
}

.dm-input::placeholder { color: rgba( 148, 163, 184, 0.7 ); }

.dm-input:focus {
	outline: none;
	border-color: var(--dm-accent);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--dm-accent) 28%, transparent );
}

/* ---------- Footer / buttons ---------- */

.dm-foot {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--dm-line);
	background: rgba( 30, 41, 59, 0.55 );
}

.dm-btn {
	flex: 1 1 auto;
	padding: 9px 12px;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient( 135deg, var(--dm-accent), var(--dm-accent-2) );
	cursor: pointer;
	transition: filter 0.15s ease;
}

.dm-btn:hover { filter: brightness( 1.08 ); }

.dm-btn:focus-visible {
	outline: 2px solid var(--dm-accent);
	outline-offset: 2px;
}

.dm-btn--ghost {
	color: var(--dm-fg);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--dm-line);
}

.dm-btn--ghost:hover {
	background: rgba( 148, 163, 184, 0.14 );
	filter: none;
}

/* ---------- Onboarding tour ----------
   The whole overlay is click-through: the dimmer is only a box-shadow on the
   spotlight rectangle, and the spotlight itself never takes pointer events. That
   way the highlighted control stays usable (it lives in another shadow tree, so
   we cannot "lift" it above an overlay the usual way). Only the bubble's buttons
   opt back in. */

.dm-tour {
	position: fixed;
	inset: 0;
	z-index: calc( var(--dm-z) + 100 );
	pointer-events: none;
}

.dm-tour[hidden] { display: none; }

.dm-spot {
	position: absolute;
	border-radius: 16px;
	box-shadow: 0 0 0 9999px rgba( 2, 6, 23, 0.62 );
	outline: 2px solid rgba( 255, 255, 255, 0.92 );
	outline-offset: 2px;
	transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
}

.dm-arrow {
	position: absolute;
	color: #fff;
	filter: drop-shadow( 0 4px 10px rgba( 2, 6, 23, 0.5 ) );
	animation: dm-bob 1.25s ease-in-out infinite;
}

/* Pointing up instead of down (target sits above the bubble). */
.dm-arrow[data-dir="up"] { transform: rotate( 180deg ); }

@keyframes dm-bob {
	0%, 100% { translate: 0 -5px; }
	50%      { translate: 0 5px; }
}

.dm-bubble {
	position: absolute;
	width: 300px;
	max-width: calc( 100vw - 32px );
	padding: 16px 16px 13px;
	border-radius: 16px;
	color: #0f172a;
	background: #fff;
	box-shadow: 0 20px 50px rgba( 2, 6, 23, 0.4 );
	pointer-events: auto;
}

.dm-bubble__step {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dm-accent);
}

.dm-bubble__title {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 650;
}

.dm-bubble__text {
	margin: 0 0 13px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #475569;
}

.dm-bubble__actions {
	display: flex;
	gap: 8px;
}

.dm-bubble .dm-btn--ghost {
	flex: 0 0 auto;
	color: #475569;
	box-shadow: inset 0 0 0 1px rgba( 15, 23, 42, 0.14 );
}

.dm-bubble .dm-btn--ghost:hover { background: rgba( 15, 23, 42, 0.06 ); }

/* ---------- Small screens ---------- */

@media ( max-width: 600px ) {
	.dm-fab { left: 16px; bottom: 16px; padding: 11px 15px 11px 13px; }
	.dm-fab__label { display: none; }

	.dm-panel {
		left: 8px;
		right: 8px;
		bottom: 8px;
		width: auto;
		max-width: none;
		max-height: 72vh;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dm-fab,
	.dm-panel,
	.dm-spot {
		transition: none;
	}
	.dm-arrow,
	.dm-root[data-hint="true"] .dm-fab {
		animation: none;
	}
}