/**
 * CW PWA front-end styles.
 *
 * One bar component, four tones. Deliberately small and self-contained so it
 * can be cached by the worker as part of the shell without dragging in theme
 * dependencies.
 *
 * Colours alias the approved tokens in `cw-bricks-child/assets/css/cw-tokens.css`
 * with the literal as the var() fallback, which is that file's own convention:
 * the token set is the source of truth without being a hard runtime dependency.
 *
 * Two rules from that file are load-bearing here:
 *   - Text on lime is --cw-olive, NEVER white. White on lime measures 2.3:1.
 *   - Dark theme is deliberately undefined system-wide, so this file defines none.
 */

:root {
	--cw-pwa-lime: var( --cw-lime, #80bc00 );
	--cw-pwa-lime-deep: var( --cw-lime-deep, #5f8c00 );
	--cw-pwa-lime-dark: var( --cw-lime-dark, #4c7000 );
	--cw-pwa-olive: var( --cw-olive, #16210a );
	--cw-pwa-grey: var( --cw-ink-2, #52575a );
	--cw-pwa-ink: var( --cw-ink, #263238 );
	--cw-pwa-paper: var( --cw-card, #ffffff );
	--cw-pwa-warn: var( --cw-amber, #9a6414 );
	--cw-pwa-warn-bg: var( --cw-amber-tint, #fdf4e6 );
	--cw-pwa-warn-line: var( --cw-amber-line, #ecdcc0 );
	--cw-pwa-ok-bg: var( --cw-lime-wash, #f3f9e4 );
	--cw-pwa-on-olive: var( --cw-on-olive, #eef3e2 );
	--cw-pwa-radius: 10px;
	--cw-pwa-shadow: 0 6px 24px rgba( 38, 50, 56, 0.18 );
	--cw-pwa-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

.cw-pwa-bar {
	position: fixed;
	z-index: 99990;
	left: 50%;
	bottom: max( 1rem, env( safe-area-inset-bottom ) );
	transform: translateX( -50% );
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: calc( 100% - 2rem );
	max-width: 32rem;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	border-radius: var( --cw-pwa-radius );
	background: var( --cw-pwa-paper );
	color: var( --cw-pwa-ink );
	box-shadow: var( --cw-pwa-shadow );
	font-family: var( --cw-pwa-font );
	font-size: 0.9375rem;
	line-height: 1.4;
	animation: cw-pwa-rise 0.22s ease-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.cw-pwa-bar {
		animation: none;
	}
}

@keyframes cw-pwa-rise {
	from {
		opacity: 0;
		transform: translate( -50%, 0.5rem );
	}

	to {
		opacity: 1;
		transform: translate( -50%, 0 );
	}
}

.cw-pwa-bar__text {
	margin: 0;
	flex: 1 1 auto;
}

.cw-pwa-bar__action {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 0.45rem 0.85rem;
	border-radius: 6px;
	background: var( --cw-pwa-lime );
	color: var( --cw-pwa-olive );
	font: inherit;
	font-weight: 700;
	white-space: nowrap;
}

.cw-pwa-bar__action:hover,
.cw-pwa-bar__action:focus-visible {
	background: var( --cw-pwa-lime-deep );
}

.cw-pwa-bar__close {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0 0.15rem;
	font-size: 1.35rem;
	line-height: 1;
	color: var( --cw-pwa-grey );
}

.cw-pwa-bar__close:hover,
.cw-pwa-bar__close:focus-visible {
	color: var( --cw-pwa-ink );
}

/* Stale prices and offline state. Amber, not red: nothing is broken, but the
   customer needs to know the number on screen may have moved. */
.cw-pwa-bar--warn {
	background: var( --cw-pwa-warn-bg );
	border: 1px solid var( --cw-pwa-warn-line );
	color: var( --cw-pwa-warn );
}

.cw-pwa-bar--warn .cw-pwa-bar__action {
	background: var( --cw-pwa-warn );
	color: #fff;
}

.cw-pwa-bar--ok {
	background: var( --cw-pwa-ok-bg );
	color: var( --cw-pwa-lime-dark );
}

.cw-pwa-bar--brand {
	background: var( --cw-olive, #16210a );
	color: var( --cw-pwa-on-olive );
}

.cw-pwa-bar--brand .cw-pwa-bar__close {
	color: rgba( 255, 255, 255, 0.75 );
}

.cw-pwa-bar--brand .cw-pwa-bar__close:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Install banner.
 *
 * A separate component from .cw-pwa-bar on purpose. The toast is a transient
 * message that floats over the page; this is a notification bar that belongs in
 * the document flow at the very top, above the site header — so it pushes the
 * page down instead of covering a sticky header, and scrolls away like any other
 * top bar rather than following the customer around.
 *
 * Ground is lime wash rather than a dark alert bar: this is an invitation, not a
 * warning, and it matches the entrance card's own header band.
 * ------------------------------------------------------------------------- */

.cw-pwa-install {
	position: relative;
	z-index: 99991;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem clamp( 0.75rem, 3vw, 1.25rem );
	padding-top: max( 0.625rem, env( safe-area-inset-top ) );
	background: var( --cw-pwa-ok-bg );
	border-bottom: 1px solid var( --cw-lime-line, #dcecb8 );
	color: var( --cw-pwa-ink );
	font-family: var( --cw-pwa-font );
	line-height: 1.35;
}

/* Bottom placement keeps the same component but pins it, since there is no
   natural bottom of the document to sit above. */
.cw-pwa-install--bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 0.625rem;
	padding-bottom: max( 0.625rem, env( safe-area-inset-bottom ) );
	border-bottom: 0;
	border-top: 1px solid var( --cw-lime-line, #dcecb8 );
	box-shadow: 0 -4px 20px rgba( 38, 50, 56, 0.10 );
}

.cw-pwa-install__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var( --cw-pwa-paper );
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	padding: 4px;
	box-sizing: border-box;
}

.cw-pwa-install__text {
	flex: 1 1 auto;
	min-width: 0;
}

.cw-pwa-install__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.cw-pwa-install__blurb {
	margin: 0;
	font-size: 0.8125rem;
	color: var( --cw-pwa-grey );
}

.cw-pwa-install__action {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 0.5rem 0.95rem;
	border-radius: 8px;
	/* Olive on lime — the design system bans white here. */
	background: var( --cw-pwa-lime );
	color: var( --cw-pwa-olive );
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.cw-pwa-install__action:hover,
.cw-pwa-install__action:focus-visible {
	background: var( --cw-pwa-lime-deep );
}

.cw-pwa-install__close {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0.25rem 0.4rem;
	font-size: 1.35rem;
	line-height: 1;
	color: var( --cw-pwa-grey );
	border-radius: 6px;
}

.cw-pwa-install__close:hover,
.cw-pwa-install__close:focus-visible {
	color: var( --cw-pwa-ink );
	background: rgba( 38, 50, 56, 0.06 );
}

/* iOS and other browsers with no programmatic install get a hint instead of a
   button, so the bar never offers an action it cannot perform. */
.cw-pwa-install__hint {
	flex: 0 0 auto;
	max-width: 11rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var( --cw-pwa-lime-dark );
}

/* The desktop-to-phone handoff.
   ---------------------------------------------------------------------------
   The bar is a flex ROW, and the QR panel needs a row of its own beneath it,
   so the bar wraps. Safe to add: the panel is the only full-width child and it
   only ever renders at >= 900px (see isDesktop() in pwa-runtime.js), where
   there is room enough that nothing else wraps. Narrow layouts are untouched. */
.cw-pwa-install {
	flex-wrap: wrap;
}

/* A quieter sibling to __action: on desktop the primary offer may still be
   "install here", and this must not compete with it. */
.cw-pwa-install__secondary {
	flex: 0 0 auto;
	appearance: none;
	cursor: pointer;
	padding: 0.5rem 0.85rem;
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	border-radius: 8px;
	background: var( --cw-pwa-paper );
	color: var( --cw-pwa-olive );
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

.cw-pwa-install__secondary:hover,
.cw-pwa-install__secondary:focus-visible {
	background: var( --cw-pwa-lime );
}

.cw-pwa-install__qr {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --cw-lime-line, #dcecb8 );
}

.cw-pwa-install__qrbox {
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	border-radius: 10px;
	padding: 6px;
	box-sizing: content-box;
}

/* qrcodejs draws either a canvas or a stacked-table fallback; both should sit
   flush inside the frame. */
.cw-pwa-install__qrbox canvas,
.cw-pwa-install__qrbox img,
.cw-pwa-install__qrbox table {
	display: block;
}

.cw-pwa-install__qrtext {
	flex: 1 1 auto;
	min-width: 0;
}

.cw-pwa-install__qrtitle {
	margin: 0 0 0.15rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.cw-pwa-install__qrblurb {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	color: var( --cw-pwa-grey );
	max-width: 26rem;
}

.cw-pwa-install__copy {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --cw-pwa-lime-dark );
	text-decoration: underline;
}

/* Clipboard refused, so the link is shown selected for a manual copy. */
.cw-pwa-install__link {
	width: 100%;
	max-width: 22rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	border-radius: 6px;
	background: var( --cw-pwa-paper );
	color: var( --cw-pwa-ink );
	font: inherit;
	font-size: 0.8125rem;
}

/* The library failed to load — the URL itself is still the whole point. */
.cw-pwa-install__qrfail {
	margin: 0;
	padding: 0.4rem;
	font-size: 0.6875rem;
	line-height: 1.35;
	word-break: break-all;
	color: var( --cw-pwa-grey );
}

@media ( max-width: 30rem ) {
	.cw-pwa-install__blurb { display: none; }
	.cw-pwa-install__hint { max-width: 8.5rem; }
}