/**
 * Front-end styling for product add-ons.
 *
 * Inheritance rule (see the atom design system): colour, typography and spacing
 * are inherited via the theme's design tokens (--color-*, --radius-*,
 * --font-weight-*) with safe fallbacks; what THIS file authors is motion and
 * interaction — custom controls, the panel reveal, the carousel selected-state
 * and the price pulse. Every animation is presentation-only and gated by
 * prefers-reduced-motion; nothing here drives the server-side price/validation
 * authority.
 */
.apa-product-addons {
	/* Motion vocabulary, shared so every element springs the same way. */
	--apa-accent: var(--color-matcha-500, #5dad35);
	--apa-ink: var(--color-black, #050a03);
	--apa-spring: cubic-bezier(.34, 1.56, .64, 1);
	--apa-glide: cubic-bezier(.22, 1, .36, 1);
}

.apa-addon-block {
	margin: 0 0 .75rem;
}

/* (The inline checkbox/title/price + slide-down panel styles were removed: every
   add-on now presents as a trigger → drawer → chip. The .apa-addon-enable checkbox
   is a hidden JS flag, so it needs no custom styling.) */

/* Conditional-logic hides: JS animates height, this is the resting state. */
.apa-field[hidden], .apa-addon-block[hidden] {
	display: none;
}

/* ---- Fields ------------------------------------------------------------- */
.apa-field {
	margin: 0 0 .5rem;
}

.apa-field-label {
	display: block;
	margin-bottom: .25rem;
	font-size: var(--text-sm, .85rem);
	font-weight: var(--font-weight-medium, 700);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.apa-required {
	color: var(--color-red-500, #b32d2e);
}

.apa-control {
	width: 100%;
	padding: .5rem;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: var(--radius-sm, .25rem);
	background: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .03em;
	transition: border-color .15s ease, box-shadow .15s ease;
}

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

/* Characters-remaining counter: shown inside the field, only for inputs with an
   explicit maxlength. The control reserves right padding so typed text never runs
   under the number; the counter ignores pointer events so the field stays clickable. */
.apa-control-wrap {
	position: relative;
}

.apa-control-wrap .apa-control {
	padding-right: 3.25rem;
}

.apa-char-count {
	position: absolute;
	top: 50%;
	right: .75rem;
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	color: var(--apa-ink, #050a03);
	transition: color .15s ease;
}

/* Warn as the limit approaches. */
.apa-char-count.is-low {
	color: var(--color-red-500, #b32d2e);
}

/* Visually hidden but available to assistive tech (the polite live region). */
.apa-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.apa-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.apa-radio {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	cursor: pointer;
}

/* Custom radio dot (field radios — the carousel keeps its card styling). */
.apa-radio .apa-control, .apa-field-radio .apa-control {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--apa-ink);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.apa-radio .apa-control:checked {
	border-color: var(--apa-accent);
	box-shadow: inset 0 0 0 .28rem var(--apa-accent);
	animation: apa-pop .3s var(--apa-spring);
}

.apa-radio .apa-control:active {
	transform: scale(.9);
}

.apa-radio .apa-control:focus-visible {
	outline: 2px solid var(--apa-accent);
	outline-offset: 2px;
}

/* ---- Design cards (shared by the drawer grid) --------------------------- */
.apa-design {
	background: #fff;
	position: relative;
	flex: 0 0 auto;
	scroll-snap-align: center;
	cursor: pointer;
	text-align: center;
	border: 2px solid transparent;
	border-radius: var(--radius-lg, .5rem);
	padding: .25rem;
	transition: transform .25s var(--apa-spring), border-color .15s ease, box-shadow .2s ease;
}

.apa-design:active {
	transform: scale(.97);
}

.apa-design.is-selected {
	border-color: var(--apa-accent);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 4px 4px rgba(0, 0, 0, .12);
	animation: apa-spring-lift .4s var(--apa-spring);
}

.apa-design-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.apa-design-input:focus-visible + .apa-design-media {
	outline: 2px solid var(--apa-accent);
	outline-offset: 2px;
	border-radius: var(--radius-md, .375rem);
}

.apa-design-media {
	position: relative;
	display: block;
}

/* Selected badge — a small checked disc in the corner of the chosen design. */
.apa-design.is-selected .apa-design-media::after {
	content: "";
	position: absolute;
	top: .35rem;
	right: .35rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--apa-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/70% no-repeat;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	animation: apa-pop .3s var(--apa-spring);
}

.apa-design-media img, .apa-design-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md, .375rem);
}

.apa-design-name {
	display: block;
	margin-top: .25rem;
	font-size: var(--text-sm, .85rem);
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 700;
}

/* ---- Variant C: trigger row, drawer (bottom sheet on mobile), chip ------ */

/* Only motion/layout is authored here; colour, type and spacing inherit from
   the atom tokens (--color-*, --radius-*, --font-weight-*). The drawer and chip
   live inside .apa-product-addons in the DOM, so --apa-accent and friends
   inherit even though the drawer is position:fixed (custom properties follow the
   DOM tree, not the layout box). */
.apa-trigger {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .25rem .75rem;
	width: 100%;
	padding: .85rem 1rem;
	border-radius: var(--radius-md, .375rem);
	background: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.apa-trigger:hover {
	border-color: var(--apa-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.apa-trigger:active {
	transform: scale(.995);
}

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

.apa-trigger-plus {
	grid-column: 1;
	grid-row: 1;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--apa-accent);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
}

.apa-trigger-title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.apa-trigger-price {
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	font-weight: var(--font-weight-bold, 700);
	white-space: nowrap;
}

/* Summary chip shown after the drawer adds the card. */
.apa-chip {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .75rem .65rem .65rem;
	border: 2px solid var(--apa-accent);
	border-radius: var(--radius-md, .375rem);
	background: #fff;
}

.apa-chip img {
	width: 2.75rem;
	height: 2.75rem;
	object-fit: cover;
	border-radius: var(--radius-sm, .25rem);
	flex: 0 0 auto;
}

.apa-chip-body {
	flex: 1 1 auto;
	min-width: 0;
}

.apa-chip-title {
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--text-sm, .9rem);
}

.apa-chip-meta {
	font-size: var(--text-base, 1rem);
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: .02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apa-chip-actions {
	display: flex;
	gap: .25rem;
	flex: 0 0 auto;
}

.apa-chip-actions button {
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(0, 0, 0, .15);
	background: #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	/* centre the icon (SVG or glyph) regardless of metrics */
	cursor: pointer;
	font-size: .9rem;
	line-height: 1;
	transition: border-color .15s ease, background-color .15s ease;
}

.apa-chip-actions button:hover {
	border-color: var(--apa-accent);
	background: color-mix(in srgb, var(--apa-accent) 8%, #fff);
}

.apa-chip-actions button:focus-visible {
	outline: 2px solid var(--apa-accent);
	outline-offset: 1px;
}

/* Stack cleanly when several add-ons are configured. */
.apa-chip + .apa-chip {
	margin-top: .5rem;
}

/* Drawer design picker: step 1 is a wrapped row of full cards (the drawer has
   room for all of them at once, unlike the cramped inline carousel). */
.apa-design-grid {
	/* Two cards per row at every width; collapses to a single row when compact. */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
	margin-bottom: 1.25rem;
	/* Pack to the top so the FLIP can animate the container's height without the
     cards stretching to fill the briefly-taller box. */
	align-content: start;
}

/* The card's fixed carousel width gives way to the grid column here. */
.apa-design-grid .apa-design {
	width: auto;
}

/* Step 2: once a motif is chosen the picker compacts to a thumbnail strip —
   the cards stay selectable, names drop, and the selected-lift is dropped (a
   tiny thumbnail shouldn't hop). The shrink itself is FLIP-animated in JS; this
   is just the resting compact state it animates into. */
.apa-design-grid.is-compact {
	/* Collapse the 2-up grid into a single thumbnail row. */
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.apa-design-grid.is-compact::-webkit-scrollbar {
	display: none;
}

.apa-design-grid.is-compact .apa-design {
	width: 3.5rem;
}

.apa-design-grid.is-compact .apa-design-name {
	display: none;
}

.apa-design-grid.is-compact .apa-design.is-selected {
	transform: none;
	box-shadow: none;
	animation: none;
}

/* Keep the selected badge static in compact too, so nothing pops against the
   FLIP shrink. */
.apa-design-grid.is-compact .apa-design.is-selected .apa-design-media::after {
	animation: none;
}

/* The fields block. It is revealed into layout (reserving its space) while the
   picker box pulls its height down, but held invisible via .is-pending until the
   box settles — then JS fades + slides it up. */
.apa-drawer-fields[hidden] {
	display: none;
}

.apa-drawer-fields.is-pending {
	opacity: 0;
}

/* Field-less add-on: the drawer body is just a short confirmation line above the
   footer's "add" button. */
.apa-drawer-empty {
	margin: 0;
	color: rgba(0, 0, 0, .6);
	font-size: var(--text-sm, .9rem);
	line-height: 1.5;
}

/* Scrim + drawer. */
.apa-scrim {
	position: fixed;
	inset: 0;
	background: rgba(5, 10, 3, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	z-index: 9998;
}

.apa-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.apa-scrim[hidden] {
	display: none;
}

.apa-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100dvh;
	width: min(28rem, 92vw);
	background: var(--color-white, #fff9f7);
	box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
	transform: translateX(100%);
	transition: transform .34s var(--apa-glide);
	z-index: 9999;
	display: flex;
	flex-direction: column;
}

.apa-drawer.is-open {
	transform: translateX(0);
}

/* Drag handle: only meaningful as a bottom sheet, hidden on the desktop drawer. */
.apa-drawer-grip {
	display: none;
}

/* Mobile: become a bottom sheet — slides up from the bottom, rounded top,
   capped height, with a grab handle so the thumb reaches the footer CTA. */
@media (max-width: 600px) {
	.apa-drawer {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: auto;
		max-height: 88dvh;
		border-radius: 1rem 1rem 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
		transform: translateY(100%);
	}
	
	.apa-drawer.is-open {
		transform: translateY(0);
	}
	
	.apa-drawer-grip {
		display: block;
		width: 2.5rem;
		height: .3rem;
		margin: .6rem auto 0;
		border-radius: 1rem;
		background: rgba(0, 0, 0, .18);
	}
}

.apa-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.apa-drawer-title {
	font-family: Brandon Grotesque Condensed, -apple-system, BlinkMacSystemFont, sans-serif;
	margin: 0;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.apa-drawer-close {
	border: 0;
	background: none;
	display: grid;
	place-items: center;
	/* centre the icon (SVG or glyph) regardless of metrics */
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.apa-drawer-close:focus-visible {
	outline: 2px solid var(--apa-accent);
	outline-offset: 2px;
}

.apa-drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem;
}

.apa-drawer-foot {
	padding: 1rem 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.apa-drawer-add {
	width: 100%;
	min-height: 3rem;
	border: 0;
	border-radius: var(--radius-md, .375rem);
	background: var(--apa-accent);
	color: #fff;
	font: inherit;
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
}

.apa-drawer-add[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.apa-drawer-add:not([disabled]):active {
	transform: scale(.99);
}

/* ---- Price pulse (added by JS on #dynamic-price when the total changes) -- */
.apa-price-pulse {
	animation: apa-price-pulse .4s var(--apa-spring);
}

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes apa-pop {
	0% {
		transform: scale(.7);
	}
	
	55% {
		transform: scale(1.12);
	}
	
	100% {
		transform: scale(1);
	}
}

@keyframes apa-spring-lift {
	0% {
		transform: translateY(0) scale(1);
	}
	
	50% {
		transform: translateY(-4px) scale(1.05);
	}
	
	100% {
		transform: translateY(-2px) scale(1.02);
	}
}

@keyframes apa-price-pulse {
	0% {
		transform: scale(1);
	}
	
	45% {
		transform: scale(1.08);
	}
	
	100% {
		transform: scale(1);
	}
}

/* ---- Reduced motion: keep state changes, drop the movement ------------- */
@media (prefers-reduced-motion: reduce) {
	.apa-product-addons *, .apa-price-pulse {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}