/**
 * OrderSpell storefront styles (spec 6).
 *
 * Sections: 1 tokens · 2 base · 3 type · 4 buttons · 5 feedback · 6 progress · 7 message preview · 8 handoff card · 9 accessibility.
 * Later phases append: 10 product button and sticky bar (P3) · 11 quick-order dialog (P3) · 12 widget and teaser (P4).
 *
 * Doubled classes such as `.orderspell-btn.orderspell-btn` are a deliberate specificity shield: they
 * beat theme rules like `button {}` and `.elementor-kit-7 button {}` without !important.
 */

/* 1. Tokens ------------------------------------------------------------ */

.orderspell {
	--os-accent: #1a7f45;
	--os-on-accent: #fff;
	--os-accent-hover: var(--os-accent);
	--os-accent-soft: #e3f0e8;
	--os-surface: #fff;
	--os-surface-2: #f4f6f3;
	--os-ink: #16211b;
	--os-ink-2: #4d5a52;
	--os-line: #d9e0da;
	--os-line-strong: #8a968e;
	--os-preview: #edf1ec;
	--os-card: #fff;
	--os-focus: #1f5bd6;
	--os-danger: #b3261e;
	--os-danger-soft: #fcebea;
	--os-good: #0a6b2f;
	--os-good-soft: #dcf5e3;
	--os-away: #6f7a73;
	--os-shadow-1: 0 1px 2px rgba(16, 28, 21, 0.08);
	--os-shadow-2: 0 12px 32px rgba(16, 28, 21, 0.18), 0 2px 6px rgba(16, 28, 21, 0.08);
	--os-r-sm: 8px;
	--os-r-md: 12px;
	--os-r-lg: 20px;
	--os-r-pill: 999px;
	--os-fast: 120ms;
	--os-base: 180ms;
	--os-slow: 260ms;
	--os-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	color: var(--os-ink);
	font-family: inherit;
	font-size: max(16px, 1rem);
	line-height: 1.45;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.orderspell {
		--os-accent-hover: color-mix(in srgb, var(--os-accent) 86%, #000);
		--os-accent-soft: color-mix(in srgb, var(--os-accent) 12%, #fff);
	}
}

/* Dark palette only when the theme signals dark (spec 6.2). */
:where(.is-dark-theme, [data-theme="dark"], .dark-mode, .dark) .orderspell,
.orderspell.orderspell-dark {
	--os-surface: #111913;
	--os-surface-2: #18231b;
	--os-ink: #e6eee8;
	--os-ink-2: #a8b6ac;
	--os-line: #2a372e;
	--os-line-strong: #6c7a70;
	--os-preview: #0c130e;
	--os-card: #1b261e;
	--os-focus: #8fb3ff;
	--os-danger: #ff8f86;
	--os-danger-soft: #3a1714;
	--os-good: #7fdc9f;
	--os-good-soft: #12301d;
	--os-away: #8e9a92;
	--os-accent-soft: #1b3325;
	--os-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--os-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:where(.is-dark-theme, [data-theme="dark"], .dark-mode, .dark) .orderspell,
	.orderspell.orderspell-dark {
		--os-accent-hover: color-mix(in srgb, var(--os-accent) 86%, #fff);
		--os-accent-soft: color-mix(in srgb, var(--os-accent) 22%, #111913);
	}
}

@media (prefers-reduced-motion: reduce) {
	.orderspell {
		--os-fast: 1ms;
		--os-base: 1ms;
		--os-slow: 1ms;
	}
}

/* 2. Base --------------------------------------------------------------- */

.orderspell [hidden] {
	display: none !important;
}

:where(.orderspell),
:where(.orderspell) *,
:where(.orderspell) *::before,
:where(.orderspell) *::after {
	box-sizing: border-box;
}

:where(.orderspell) :where(button, input, select, textarea, a, summary) {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
}

:where(.orderspell) :where(h1, h2, h3, p, ol, ul) {
	margin: 0;
	padding: 0;
}

.orderspell-icon {
	display: block;
	flex: none;
}

.orderspell :focus-visible {
	outline: 3px solid var(--os-focus);
	outline-offset: 2px;
}

.orderspell-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 3. Type --------------------------------------------------------------- */

.orderspell-caption.orderspell-caption {
	margin: 0;
	color: var(--os-ink-2);
	font-size: 0.8125em;
	line-height: 1.4;
}

.orderspell-headline.orderspell-headline {
	margin: 0;
	color: var(--os-ink);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
}

.orderspell-lead-text.orderspell-lead-text {
	margin: 0;
	color: var(--os-ink-2);
	font-size: 1em;
	text-wrap: pretty;
}

/* 4. Buttons ------------------------------------------------------------ */

.orderspell-btn.orderspell-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--os-r-md);
	background: var(--os-surface);
	box-shadow: none;
	color: var(--os-ink);
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: background-color var(--os-fast) var(--os-ease), transform var(--os-fast) var(--os-ease);
	-webkit-tap-highlight-color: transparent;
}

.orderspell-btn.orderspell-btn:active {
	transform: translateY(1px);
}

.orderspell-btn--filled.orderspell-btn--filled,
.orderspell-btn--filled.orderspell-btn--filled:visited {
	background: var(--os-accent);
	color: var(--os-on-accent);
}

.orderspell-btn--filled.orderspell-btn--filled:hover,
.orderspell-btn--filled.orderspell-btn--filled:focus-visible {
	background: var(--os-accent-hover);
	color: var(--os-on-accent);
}

.orderspell-btn--outline.orderspell-btn--outline {
	background: var(--os-surface);
	box-shadow: inset 0 0 0 2px var(--os-accent);
	color: var(--os-ink);
}

.orderspell-btn--outline.orderspell-btn--outline:hover {
	background: var(--os-surface-2);
	color: var(--os-ink);
}

.orderspell-btn--outline .orderspell-icon--whatsapp {
	color: var(--os-accent);
}

.orderspell-btn--quiet.orderspell-btn--quiet {
	min-height: 48px;
	background: var(--os-surface);
	box-shadow: inset 0 0 0 1px var(--os-line-strong);
	color: var(--os-ink);
}

.orderspell-btn--quiet.orderspell-btn--quiet:hover {
	background: var(--os-surface-2);
	color: var(--os-ink);
}

.orderspell-btn--xl.orderspell-btn--xl {
	min-height: 56px;
	font-size: 1.0625em;
}

.orderspell-btn--compact.orderspell-btn--compact {
	min-height: 44px;
	padding: 0 14px;
	font-size: 0.9375em;
}

.orderspell-btn--auto.orderspell-btn--auto {
	width: auto;
}

.orderspell-btn.orderspell-btn[aria-disabled="true"],
.orderspell-btn.orderspell-btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.orderspell-link.orderspell-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--os-ink);
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 5. Feedback ----------------------------------------------------------- */

.orderspell-badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--os-accent-soft);
	color: var(--os-accent);
}

.orderspell-alert.orderspell-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--os-r-sm);
	background: var(--os-danger-soft);
	color: var(--os-ink);
	font-size: 0.875em;
}

.orderspell-spinner {
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: orderspell-spin 700ms linear infinite;
}

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

/* 6. Progress rail ------------------------------------------------------ */

.orderspell-progress.orderspell-progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.orderspell-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--os-ink-2);
	font-size: 0.75em;
	line-height: 1.3;
	text-align: center;
}

.orderspell-step::before {
	content: "";
	position: absolute;
	top: 9px;
	inset-inline-end: 50%;
	width: 100%;
	height: 2px;
	background: var(--os-line);
}

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

.orderspell-step.is-done::before,
.orderspell-step.is-current::before {
	background: var(--os-accent);
}

.orderspell-step__mark {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--os-surface);
	box-shadow: inset 0 0 0 2px var(--os-line);
}

.orderspell-step:not(.is-done) .orderspell-step__mark .orderspell-icon {
	display: none;
}

.orderspell-step.is-done .orderspell-step__mark {
	background: var(--os-accent);
	box-shadow: none;
	color: var(--os-on-accent);
}

.orderspell-step.is-current {
	color: var(--os-ink);
	font-weight: 600;
}

.orderspell-step.is-current .orderspell-step__mark {
	box-shadow: inset 0 0 0 2px var(--os-accent);
}

.orderspell-step.is-current .orderspell-step__mark::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--os-accent);
}

@media (max-width: 359px) {
	.orderspell-step:not(.is-current) .orderspell-step__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

/* 7. Message preview (original component, spec 6.8) --------------------- */

.orderspell-preview > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--os-ink);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.orderspell-preview > summary::-webkit-details-marker {
	display: none;
}

.orderspell-preview > summary .orderspell-icon {
	transition: transform var(--os-fast) var(--os-ease);
}

.orderspell-preview[open] > summary .orderspell-icon {
	transform: rotate(180deg);
}

.orderspell-preview__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	margin-top: 8px;
	padding: 14px;
	border-radius: var(--os-r-md);
	background: var(--os-preview);
}

.orderspell-msg {
	max-width: 92%;
	padding: 12px 14px;
	border-radius: 16px;
	border-end-end-radius: 4px;
	background: var(--os-card);
	box-shadow: inset 0 0 0 1px var(--os-line), var(--os-shadow-1);
	color: var(--os-ink);
	font-size: 0.875em;
	line-height: 1.5;
	overflow-wrap: anywhere;
	text-align: start;
	white-space: pre-wrap;
}

.orderspell-msg--in {
	align-self: flex-start;
	border-end-end-radius: 16px;
	border-end-start-radius: 4px;
	background: var(--os-surface-2);
	box-shadow: none;
}

.orderspell-msg strong {
	font-weight: 700;
}

.orderspell-msg__url {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 8. Handoff card ------------------------------------------------------- */

.orderspell-handoff {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.orderspell-handoff--page {
	max-width: 640px;
	margin-block-end: 32px;
	padding: 24px;
	border-radius: var(--os-r-md);
	background: var(--os-surface);
	box-shadow: inset 0 0 0 1px var(--os-line);
}

.orderspell-handoff__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.orderspell-handoff__view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.orderspell-handoff__view > .orderspell-headline:focus {
	outline: none;
}

.orderspell-handoff__primary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.orderspell-handoff__buttons {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.orderspell-qr {
	display: flex;
	align-items: center;
	gap: 14px;
}

.orderspell-qr__code {
	flex: none;
	width: 168px;
	height: 168px;
	padding: 10px;
	border-radius: var(--os-r-md);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--os-line);
}

.orderspell-qr__code svg {
	display: block;
	width: 100%;
	height: 100%;
}

.orderspell-qr .orderspell-caption {
	max-width: 14em;
}

.orderspell-handoff__instructions {
	color: var(--os-ink-2);
	font-size: 0.875em;
}

.orderspell-handoff__instructions > * + * {
	margin-top: 8px;
}

@media (max-width: 767px) {
	.orderspell-handoff--page {
		padding: 16px;
	}
}

@media (min-width: 1024px) and (hover: hover) {
	.orderspell-handoff__primary {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}
}

/* 10. Order buttons and sticky bar (P3) --------------------------------- */

/* Root elements the script hides (sticky bar, emptied cart button) must stay hidden despite display: flex. */
.orderspell.orderspell[hidden] {
	display: none !important;
}

.orderspell-button {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-block: 12px;
}

.orderspell-button--shop {
	margin-block: 8px 0;
}

.orderspell-button__help.orderspell-button__help {
	margin: 0;
}

.orderspell-cue.orderspell-cue {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--os-ink-2);
	font-size: 0.8125em;
}

.orderspell-cue__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--os-good);
}

.orderspell-cue__dot.is-away {
	background: var(--os-away);
}

.orderspell-divider.orderspell-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
	color: var(--os-ink-2);
	font-size: 0.8125em;
}

.orderspell-divider::before,
.orderspell-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--os-line);
}

.orderspell-button--block-cart:not(.is-placed) {
	display: none;
}

.orderspell-attention.orderspell-attention {
	outline: 3px solid var(--os-focus);
	outline-offset: 2px;
}

.orderspell-sticky {
	position: fixed;
	z-index: 99990;
	bottom: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--os-line);
	background: var(--os-surface);
	box-shadow: 0 -10px 28px rgba(16, 28, 21, 0.12);
	animation: orderspell-rise var(--os-base) var(--os-ease);
}

.orderspell-sticky__thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--os-r-sm);
	object-fit: cover;
}

.orderspell-sticky__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-size: 0.875em;
}

.orderspell-sticky__name {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html {
	scroll-padding-bottom: var(--os-sticky-offset, 0px);
}

/* While the bar shows, a spacer after the page content keeps the footer from hiding under it. */
html.orderspell-has-sticky body::after {
	content: "";
	display: block;
	height: var(--os-sticky-offset, 0px);
}

@keyframes orderspell-rise {
	from {
		transform: translateY(100%);
	}

	to {
		transform: none;
	}
}

@media (max-width: 767px) {
	.orderspell.orderspell-only-desktop {
		display: none;
	}
}

@media (min-width: 768px) {
	.orderspell.orderspell-only-mobile,
	.orderspell.orderspell-sticky {
		display: none;
	}

	.orderspell-button--product .orderspell-btn,
	.orderspell-button--shortcode .orderspell-btn,
	.orderspell-button--block .orderspell-btn {
		width: auto;
		min-width: 280px;
	}
}

/* 11. Quick-order dialog (P3) -------------------------------------------- */

.orderspell-dialog.orderspell-dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: var(--os-ink);
}

.orderspell-dialog[open] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.orderspell-dialog::backdrop {
	background: rgba(10, 18, 13, 0.5);
}

.orderspell-dialog__sheet {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 92vh;
	max-height: 92dvh;
	overflow: hidden;
	border-radius: var(--os-r-lg) var(--os-r-lg) 0 0;
	background: var(--os-surface);
	box-shadow: var(--os-shadow-2);
	animation: orderspell-rise var(--os-slow) var(--os-ease);
}

.orderspell-dialog__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 60px;
	padding: 8px 8px 8px 20px;
}

.orderspell-title.orderspell-title {
	margin: 0;
	color: var(--os-ink);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.25;
}

.orderspell-title:focus {
	outline: none;
}

.orderspell-iconbtn.orderspell-iconbtn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--os-ink-2);
	cursor: pointer;
}

.orderspell-iconbtn.orderspell-iconbtn:hover {
	background: var(--os-surface-2);
}

.orderspell-iconbtn.orderspell-iconbtn:disabled {
	color: var(--os-line-strong);
	cursor: not-allowed;
}

.orderspell-banner {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 20px 12px;
	padding: 12px 14px;
	border-radius: var(--os-r-sm);
	background: var(--os-accent-soft);
	font-size: 0.875em;
}

.orderspell-banner__text.orderspell-banner__text {
	margin: 0;
	font-weight: 600;
}

.orderspell-dialog__form {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	margin: 0;
}

.orderspell-dialog__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.orderspell-summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 20px;
	background: var(--os-surface-2);
}

.orderspell-summary__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.orderspell-summary__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--os-r-sm);
	background: var(--os-line);
	object-fit: cover;
}

.orderspell-summary__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.orderspell-summary__name {
	font-weight: 600;
}

.orderspell-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.orderspell-summary__line {
	font-size: 0.875em;
}

.orderspell-summary__total {
	font-size: 1.125em;
	font-weight: 600;
}

.orderspell-summary__rule {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--os-line);
}

.orderspell-stepper {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border-radius: var(--os-r-pill);
	background: var(--os-surface);
	box-shadow: inset 0 0 0 1px var(--os-line-strong);
}

.orderspell-stepper .orderspell-iconbtn.orderspell-iconbtn {
	color: var(--os-ink);
}

.orderspell-stepper__value {
	min-width: 28px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: center;
}

.orderspell-dialog__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 20px;
}

.orderspell-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.orderspell-label.orderspell-label {
	margin: 0;
	color: var(--os-ink);
	font-size: 0.875em;
	font-weight: 600;
}

.orderspell-optional {
	color: var(--os-ink-2);
	font-weight: 400;
}

.orderspell-input.orderspell-input {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: var(--os-r-sm);
	background: var(--os-surface);
	box-shadow: inset 0 0 0 1px var(--os-line-strong);
	color: var(--os-ink);
	font-size: max(16px, 1em);
	line-height: 1.4;
}

.orderspell-input--area.orderspell-input--area {
	min-height: 76px;
	padding: 12px 14px;
	resize: vertical;
}

.orderspell-input.orderspell-input:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--os-focus), 0 0 0 3px rgba(31, 91, 214, 0.2);
}

.orderspell-input.orderspell-input[aria-invalid="true"] {
	box-shadow: inset 0 0 0 2px var(--os-danger);
}

.orderspell-phone {
	display: flex;
	align-items: stretch;
	border-radius: var(--os-r-sm);
	background: var(--os-surface);
	box-shadow: inset 0 0 0 1px var(--os-line-strong);
}

.orderspell-phone:focus-within {
	box-shadow: inset 0 0 0 2px var(--os-focus), 0 0 0 3px rgba(31, 91, 214, 0.2);
}

.orderspell-phone.is-invalid {
	box-shadow: inset 0 0 0 2px var(--os-danger);
}

.orderspell-phone__cc {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
	padding: 0 10px 0 14px;
	border-inline-end: 1px solid var(--os-line);
	font-weight: 600;
}

.orderspell-phone__select.orderspell-phone__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	font-size: 16px;
	opacity: 0;
}

.orderspell-phone__input.orderspell-phone__input,
.orderspell-phone__input.orderspell-phone__input:focus,
.orderspell-phone__input.orderspell-phone__input[aria-invalid="true"] {
	border-radius: 0 var(--os-r-sm) var(--os-r-sm) 0;
	background: transparent;
	box-shadow: none;
}

.orderspell-error.orderspell-error,
.orderspell-help.orderspell-help {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	font-size: 0.8125em;
}

.orderspell-error.orderspell-error {
	color: var(--os-danger);
}

.orderspell-help.orderspell-help {
	color: var(--os-ink-2);
}

.orderspell-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding-top: 10px;
	cursor: pointer;
	font-size: 0.9375em;
}

.orderspell-check input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--os-accent);
}

.orderspell-welcome.orderspell-welcome {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.875em;
}

.orderspell-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.orderspell-dialog__foot {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--os-line);
	background: var(--os-surface);
}

.orderspell-center.orderspell-center {
	text-align: center;
}

.orderspell-dialog__handoff {
	flex: 1;
	min-height: 0;
	padding: 4px 20px calc(24px + env(safe-area-inset-bottom));
	overflow-y: auto;
}

@media (min-width: 768px) {
	.orderspell-dialog[open] {
		align-items: center;
	}

	.orderspell-dialog__sheet {
		width: min(440px, calc(100vw - 32px));
		max-height: min(720px, 90vh);
		border-radius: var(--os-r-lg);
		animation: orderspell-pop var(--os-base) var(--os-ease);
	}
}

@keyframes orderspell-pop {
	from {
		opacity: 0;
		transform: scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* 12. Chat widget (P4) ---------------------------------------------------- */

.orderspell-widget {
	position: fixed;
	z-index: 99995;
	bottom: calc(16px + var(--os-sticky-offset, 0px) + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
}

.orderspell-widget--right {
	right: 16px;
}

.orderspell-widget--left {
	left: 16px;
	align-items: flex-start;
}

.orderspell-widget > * {
	pointer-events: auto;
}

/* shield: beats theme element styles */
.orderspell-fab.orderspell-fab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--os-r-pill);
	background: var(--os-accent);
	box-shadow: var(--os-shadow-2);
	color: var(--os-on-accent);
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color var(--os-fast) var(--os-ease);
}

.orderspell-fab.orderspell-fab:hover {
	background: var(--os-accent-hover);
}

.orderspell-fab__label {
	display: none;
}

.orderspell-fab__dot {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--os-good);
	box-shadow: 0 0 0 2px var(--os-surface);
}

.orderspell-fab__dot.is-away {
	background: var(--os-away);
}

.orderspell-fab.is-pulsing {
	animation: orderspell-pulse 600ms var(--os-ease) 1;
}

@keyframes orderspell-pulse {
	50% {
		transform: scale(1.06);
	}
}

.orderspell-teaser {
	display: flex;
	align-items: flex-start;
	max-width: 260px;
	border-radius: var(--os-r-md);
	background: var(--os-surface-2);
	box-shadow: var(--os-shadow-2);
	color: var(--os-ink);
	animation: orderspell-teaser-in var(--os-base) var(--os-ease);
}

/* shield: beats theme element styles */
.orderspell-teaser__text.orderspell-teaser__text {
	flex: 1;
	margin: 0;
	padding: 12px 0 12px 14px;
	border: 0;
	background: transparent;
	color: var(--os-ink);
	cursor: pointer;
	font-size: 0.875em;
	line-height: 1.45;
	text-align: start;
}

.orderspell-teaser__close.orderspell-teaser__close {
	flex: none;
}

@keyframes orderspell-teaser-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.orderspell-panel.orderspell-panel {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: none;
	max-height: 92vh;
	max-height: 92dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--os-r-lg) var(--os-r-lg) 0 0;
	background: var(--os-surface);
	box-shadow: var(--os-shadow-2);
	color: var(--os-ink);
}

.orderspell-panel[open] {
	display: flex;
	flex-direction: column;
	animation: orderspell-rise var(--os-slow) var(--os-ease);
}

.orderspell-panel::backdrop {
	background: rgba(10, 18, 13, 0.5);
}

.orderspell-panel__head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	padding: 12px 8px 12px 16px;
	border-bottom: 1px solid var(--os-line);
}

.orderspell-panel__who {
	flex: 1;
	min-width: 0;
}

.orderspell-panel__title.orderspell-panel__title {
	margin: 0;
	color: var(--os-ink);
	font-size: 1.0625em;
	font-weight: 600;
	line-height: 1.25;
}

.orderspell-panel__title:focus {
	outline: none;
}

.orderspell-panel__status.orderspell-panel__status {
	margin-top: 2px;
}

.orderspell-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--os-accent);
	color: var(--os-on-accent);
	font-size: 0.875em;
	font-weight: 600;
}

.orderspell-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.orderspell-avatar--small {
	width: 36px;
	height: 36px;
	font-size: 0.8125em;
}

.orderspell-panel__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.orderspell-panel__body .orderspell-caption {
	margin: 6px 0 0;
}

.orderspell-incoming.orderspell-incoming {
	align-self: flex-start;
	max-width: 92%;
	margin: 0;
	padding: 12px 14px;
	border-radius: 16px;
	border-end-start-radius: 4px;
	background: var(--os-surface-2);
	color: var(--os-ink);
	font-size: 0.9375em;
	line-height: 1.45;
}

.orderspell-chips,
.orderspell-agents {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.orderspell-agents {
	flex-direction: column;
	gap: 4px;
}

/* shield: beats theme element styles */
.orderspell-chip.orderspell-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--os-line-strong);
	border-radius: var(--os-r-pill);
	background: var(--os-surface);
	color: var(--os-ink);
	font-size: 0.875em;
	font-weight: 600;
	text-decoration: none;
}

.orderspell-chip.orderspell-chip:hover {
	border-color: var(--os-accent);
	background: var(--os-accent-soft);
}

.orderspell-agent.orderspell-agent {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 8px;
	border-radius: var(--os-r-md);
	color: var(--os-ink);
	text-decoration: none;
}

.orderspell-agent.orderspell-agent:hover {
	background: var(--os-surface-2);
}

.orderspell-agent__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.orderspell-agent__name {
	font-weight: 600;
}

.orderspell-agent .orderspell-caption {
	margin: 0;
}

.orderspell-composer {
	display: flex;
	flex: none;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--os-line);
}

/* shield: beats theme element styles */
.orderspell-composer__input.orderspell-composer__input {
	flex: 1;
	min-height: 44px;
	max-height: 128px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 22px;
	background: var(--os-surface-2);
	box-shadow: inset 0 0 0 1px var(--os-line-strong);
	color: var(--os-ink);
	font-size: max(16px, 1em);
	line-height: 1.45;
	resize: none;
}

.orderspell-composer__input.orderspell-composer__input:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--os-focus);
}

.orderspell-send.orderspell-send {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--os-accent);
	color: var(--os-on-accent);
	text-decoration: none;
}

.orderspell-send.orderspell-send[aria-disabled="true"] {
	background: var(--os-line);
	color: var(--os-ink-2);
}

@media (min-width: 768px) {
	.orderspell-widget {
		bottom: calc(20px + env(safe-area-inset-bottom));
	}

	.orderspell-widget--right {
		right: 20px;
	}

	.orderspell-widget--left {
		left: 20px;
	}

	.orderspell-fab.orderspell-fab {
		width: auto;
		height: 56px;
		padding: 0 22px 0 18px;
	}

	.orderspell-fab__label {
		display: inline;
	}

	.orderspell-fab .orderspell-icon {
		width: 26px;
		height: 26px;
	}

	.orderspell-panel.orderspell-panel {
		inset: auto 20px 88px auto;
		width: 380px;
		max-height: min(640px, 80vh);
		border-radius: var(--os-r-lg);
		animation: orderspell-pop var(--os-base) var(--os-ease);
	}

	.orderspell-widget--left .orderspell-panel.orderspell-panel {
		inset: auto auto 88px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orderspell-fab.is-pulsing {
		animation: none;
	}
}

@media (forced-colors: active) {
	.orderspell-fab.orderspell-fab,
	.orderspell-send.orderspell-send,
	.orderspell-chip.orderspell-chip,
	.orderspell-teaser,
	.orderspell-panel.orderspell-panel {
		border: 1px solid ButtonText !important;
	}
}

/* 9. Accessibility modes ------------------------------------------------ */

@media (forced-colors: active) {
	.orderspell-btn.orderspell-btn {
		border: 1px solid ButtonText !important;
	}

	.orderspell-btn--filled.orderspell-btn--filled {
		background: ButtonText !important;
		color: ButtonFace !important;
	}

	.orderspell-handoff--page,
	.orderspell-msg,
	.orderspell-qr__code,
	.orderspell-step__mark {
		border: 1px solid CanvasText !important;
	}
}