/* "Shop with AI" button and connect sheet (AtlasMCP Pro, AI-47). Mobile first.
   Every rule is scoped to .awfah-shopper-* so a theme cannot be touched by it, and the
   few properties themes love to override (font, colour, borders on buttons) are set here. */

.awfah-shopper-button,
.awfah-shopper-sheet { --awfah-shopper-accent: #0f766e; }

.awfah-shopper-button {
	position: fixed;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	margin: 0;
	padding: 0 20px 0 16px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--awfah-shopper-accent) !important;
	color: #fff !important;
	font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.awfah-shopper-button:hover,
.awfah-shopper-button:focus { background: var(--awfah-shopper-accent) !important; color: #fff !important; }
.awfah-shopper-button:active { transform: scale(0.97); }
.awfah-shopper-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--awfah-shopper-accent); }
.awfah-shopper-button.is-connected,
.awfah-shopper-button.is-connected:hover,
.awfah-shopper-button.is-connected:focus { background: #14532d !important; }

/* Sparkle normally, a tick once connected: drawn with a mask so it takes the text colour. */
.awfah-shopper-icon {
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18.5 9.4l-4.7 1.8L12 16l-1.8-4.8L5.5 9.4l4.7-1.8z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18.5 9.4l-4.7 1.8L12 16l-1.8-4.8L5.5 9.4l4.7-1.8z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/></svg>') center / contain no-repeat;
}
.awfah-shopper-button.is-connected .awfah-shopper-icon,
.awfah-shopper-ok-dot::after {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
}

.awfah-shopper-pos-bottom-right { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.awfah-shopper-pos-bottom-left { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.awfah-shopper-pos-top-right { right: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); }
.awfah-shopper-pos-top-left { left: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); }
.awfah-shopper-pos-middle-right { right: 16px; top: 50%; transform: translateY(-50%); }
.awfah-shopper-pos-middle-left { left: 16px; top: 50%; transform: translateY(-50%); }
.awfah-shopper-pos-middle-right:active,
.awfah-shopper-pos-middle-left:active { transform: translateY(-50%) scale(0.97); }

/* The admin bar sits over top-positioned buttons. */
.admin-bar .awfah-shopper-pos-top-right,
.admin-bar .awfah-shopper-pos-top-left { top: calc(48px + env(safe-area-inset-top, 0px)); }

.awfah-shopper-open { overflow: hidden; }

.awfah-shopper-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(27, 26, 23, 0.55);
	animation: awfah-shopper-fade 0.15s ease;
}
/* display:flex above would beat the hidden attribute. */
.awfah-shopper-overlay[hidden] { display: none; }

.awfah-shopper-sheet {
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	max-height: 92vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	border-radius: 24px 24px 0 0;
	background: #fff;
	color: #1b1a17;
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-align: left;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
	animation: awfah-shopper-rise 0.2s ease;
}
.awfah-shopper-sheet *,
.awfah-shopper-sheet *::before,
.awfah-shopper-sheet *::after { box-sizing: border-box; }
@media (min-width: 640px) {
	.awfah-shopper-overlay { align-items: center; padding: 16px; }
	.awfah-shopper-sheet { border-radius: 24px; padding-bottom: 20px; }
	.awfah-shopper-handle { display: none; }
}

.awfah-shopper-handle { width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: #d9d3c5; }
.awfah-shopper-sheet .awfah-shopper-title { margin: 0 0 6px; padding: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: #1b1a17; }
.awfah-shopper-sheet .awfah-shopper-subtitle { margin: 0; padding: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: #1b1a17; }
.awfah-shopper-sheet p { margin: 0; }
.awfah-shopper-intro { margin: 0 0 14px !important; color: #4a463f; }
.awfah-shopper-text { color: #4a463f; }
.awfah-shopper-small { font-size: 13px; color: #5b574f; }
.awfah-shopper-question { font-weight: 700; color: #1b1a17; }

.awfah-shopper-body { display: flex; flex-direction: column; gap: 12px; }
.awfah-shopper-stack { display: flex; flex-direction: column; gap: 10px; }

.awfah-shopper-who { padding: 10px 12px; border-radius: 12px; background: #f6f4ef; font-size: 14px; color: #4a463f; }
.awfah-shopper-who strong { color: #1b1a17; }
.awfah-shopper-sheet a { color: var(--awfah-shopper-accent); font-weight: 600; text-decoration: underline; }

.awfah-shopper-sheet .awfah-shopper-primary,
.awfah-shopper-sheet .awfah-shopper-dark,
.awfah-shopper-sheet .awfah-shopper-secondary,
.awfah-shopper-sheet .awfah-shopper-dismiss {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 14px !important;
	font: 700 16px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.awfah-shopper-sheet .awfah-shopper-primary { border: 0 !important; background: var(--awfah-shopper-accent) !important; color: #fff !important; }
.awfah-shopper-sheet .awfah-shopper-dark { border: 0 !important; background: #1b1a17 !important; color: #fff !important; }
.awfah-shopper-sheet .awfah-shopper-secondary { border: 1.5px solid #1b1a17 !important; background: #fff !important; color: #1b1a17 !important; }
.awfah-shopper-sheet .awfah-shopper-secondary:hover { background: #f6f4ef !important; }
.awfah-shopper-sheet .awfah-shopper-primary.is-done,
.awfah-shopper-sheet .awfah-shopper-dark.is-done,
.awfah-shopper-sheet .awfah-shopper-secondary.is-done,
.awfah-shopper-sheet .awfah-shopper-mini-btn.is-done { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }
.awfah-shopper-sheet .awfah-shopper-dismiss { min-height: 44px; margin-top: 10px; border: 0 !important; background: transparent !important; color: #5b574f !important; font-weight: 600; }

.awfah-shopper-sheet .awfah-shopper-text-btn {
	align-self: center;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0 !important;
	background: transparent !important;
	color: #5b574f !important;
	font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.awfah-shopper-sheet .awfah-shopper-danger { color: #9b1c1c !important; }

.awfah-shopper-sheet button:focus-visible,
.awfah-shopper-sheet a:focus-visible,
.awfah-shopper-sheet input:focus-visible,
.awfah-shopper-sheet summary:focus-visible { outline: 3px solid var(--awfah-shopper-accent); outline-offset: 2px; }

/* Three numbered steps in a row; they wrap on very narrow screens. */
.awfah-shopper-sheet .awfah-shopper-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: awfah; }
.awfah-shopper-sheet .awfah-shopper-mini li { counter-increment: awfah; margin: 0; padding: 10px; border-radius: 10px; background: #f6f4ef; font-size: 13px; color: #4a463f; }
.awfah-shopper-sheet .awfah-shopper-mini li::before { content: counter(awfah); display: block; font-size: 18px; font-weight: 700; color: var(--awfah-shopper-accent); }
@media (max-width: 340px) { .awfah-shopper-sheet .awfah-shopper-mini { grid-template-columns: 1fr; } }

.awfah-shopper-sheet .awfah-shopper-steps { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #4a463f; }
.awfah-shopper-sheet .awfah-shopper-steps li { margin: 0; padding: 0; list-style: decimal; }

.awfah-shopper-note { position: relative; padding-left: 24px; font-size: 13.5px; color: #4a463f; }
.awfah-shopper-note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	background: var(--awfah-shopper-accent);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
}
.awfah-shopper-warn { padding: 10px 12px; border-radius: 12px; background: #fdf1de; color: #6b3a05; font-size: 14px; }

.awfah-shopper-sheet .awfah-shopper-link {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #e6e2d8;
	border-radius: 12px;
	background: #f6f4ef;
	color: #4a463f;
	font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.awfah-shopper-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #e6e2d8; border-radius: 12px; }
.awfah-shopper-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; }
.awfah-shopper-row-text small { font-size: 13px; color: #5b574f; }
.awfah-shopper-sheet .awfah-shopper-mini-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1.5px solid #1b1a17 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #1b1a17 !important;
	font: 700 13.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.awfah-shopper-dev,
.awfah-shopper-fallback { border: 1px solid #e6e2d8; border-radius: 12px; padding: 4px 12px; }
.awfah-shopper-sheet summary { display: flex; align-items: center; min-height: 40px; font-weight: 700; font-size: 14px; color: #1b1a17; cursor: pointer; }
.awfah-shopper-dev[open],
.awfah-shopper-fallback[open] { padding-bottom: 12px; }
.awfah-shopper-dev .awfah-shopper-row { margin-top: 8px; }
.awfah-shopper-fallback-body { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #4a463f; }

.awfah-shopper-waiting { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #5b574f; }
.awfah-shopper-waiting::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--awfah-shopper-accent); animation: awfah-shopper-pulse 1.4s ease-in-out infinite; }

.awfah-shopper-ok { display: flex; align-items: center; gap: 12px; }
.awfah-shopper-ok-dot { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: #dcfce7; }
.awfah-shopper-ok-dot::after { content: ""; position: absolute; inset: 10px; background: #15803d; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.awfah-shopper-say { display: flex; flex-direction: column; gap: 8px; }
.awfah-shopper-say span { padding: 9px 12px; border-radius: 12px; background: #f6f4ef; font-size: 14.5px; color: #1b1a17; }

.awfah-shopper-privacy { margin-top: 14px; padding: 12px 14px; border: 1px solid #e6e2d8; border-radius: 12px; font-size: 13px; color: #4a463f; }
.awfah-shopper-privacy-links { display: flex; gap: 16px; margin-top: 8px !important; }
.awfah-shopper-privacy-links a { display: inline-flex; align-items: center; min-height: 32px; }
.awfah-shopper-agree { margin: 8px 0 0 !important; font-size: 12px; color: #6b6660; }
.awfah-shopper-terms { margin-top: 6px; }
.awfah-shopper-terms-text { max-height: 40vh; overflow-y: auto; margin-top: 6px; white-space: pre-wrap; }

@keyframes awfah-shopper-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes awfah-shopper-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes awfah-shopper-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.awfah-shopper-overlay, .awfah-shopper-sheet, .awfah-shopper-button, .awfah-shopper-waiting::before { animation: none; transition: none; }
}

.awfah-shopper-sheet:focus { outline: none; }