/* sst-cancel-followup r4 (2026-11-13).
   Colours come from the page (inherit / currentColor) so both parts follow the store's light and
   dark themes without naming either.
   The reason chooser does NOT depend on this file to be usable: cf-r4.js sets the few properties
   that put it on the screen itself. This file is the finish.
   r2: on a narrow screen the box keeps 100px free below itself (corner badges live there) and
   is a card, not a sheet glued to the bottom edge; a box whose answer has been taken is dimmed.
   r3: no rule changed. The script may seat the box somewhere else than this file says (so that no
   reason lies where the finger that opened it was); it does that with inline "important"
   properties, which win over the "important" seat below.
   r4: (1) the strip with the two ways out reaches the bottom edge of the box: the room below the
   two buttons is the strip's own padding now (it was the box's, and the list showed through there
   and could be pressed); cf-r4.js moves that padding from the box to the strip. Two covers that
   are drawn only (no room, no press) close the last px: one beside the strip, one in front of the
   box's last 2px.
   (2) while reasons are hidden below the part of the list that shows, the bottom edge of the list
   is faded: cf-r4.js marks the box with data-sst-cf-more and hands over the box's colour. */

/* ---- A. "Why are you cancelling? Tapping a reason cancels this order." ---- */

.sst-cf-reason[hidden] { display: none !important; }

.sst-cf-reason__box {
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
	outline: none;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.sst-cf-reason__title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.sst-cf-reason__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* r4: the list is cut off by the box exactly as the strip in front of it is. Without this, a
	   press exactly on the line where the box cuts its content off (the inside of its bottom
	   border) went to the reason behind the strip for as long as the box had not been drawn. */
	position: relative;
}
.sst-cf-reason__list li {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
.sst-cf-reason__list li::before,
.sst-cf-reason__list li::marker { content: none; }

.sst-cf-reason__opt,
.sst-cf-reason__skip,
.sst-cf-reason__keep {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 38%, transparent);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sst-cf-reason__opt:hover,
.sst-cf-reason__skip:hover,
.sst-cf-reason__keep:hover {
	color: inherit;
	text-decoration: none;
}
/* Only where there is a real pointer: on a phone the box opens under the finger that pressed
   "Cancel order", and a hover left behind there would make one reason look already chosen. */
@media (hover: hover) and (pointer: fine) {
	.sst-cf-reason__opt:hover,
	.sst-cf-reason__skip:hover,
	.sst-cf-reason__keep:hover {
		background: rgba(127, 127, 127, 0.14);
		border-color: currentColor;
	}
}
.sst-cf-reason__opt:active,
.sst-cf-reason__skip:active,
.sst-cf-reason__keep:active { background: rgba(127, 127, 127, 0.22); }
.sst-cf-reason__opt:focus-visible,
.sst-cf-reason__skip:focus-visible,
.sst-cf-reason__keep:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The two ways out sit side by side and weigh the same: neither is the "right" answer. */
.sst-cf-reason__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	/* r4: the room below the two buttons belongs to this strip: cf-r4.js gives it its bottom
	   padding (16px on a phone, 20px wider) and takes that room off the box. The strip lies in
	   front of the list and has the box's background, so below, beside and between the two
	   buttons nothing of the list shows or can be pressed. */
	padding: 12px 0 0;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 22%, transparent);
	/* When the reasons do not fit they scroll and these two stay where they are: "cancel without
	   answering" and "keep this order" must never be something the shopper has to look for.
	   (r4: nothing of this strip may reach past the edge the box cuts its content at - not the
	   strip itself with a negative "bottom", not a shadow below it: a browser then lets a press
	   that lands exactly on that edge through to the list behind the strip.) */
	position: sticky;
	bottom: 0;
	z-index: 1;
	background: inherit;
}
/* r4: the same cover 6px into the box's side padding: the focus ring of a reason that has
   scrolled behind the strip is 4px wider than the strip and must not show beside it.
   Behind the two buttons, in front of the list, below the strip's top line; it is drawn only -
   it takes no press and no room. */
.sst-cf-reason__foot::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: -6px;
	right: -6px;
	background: inherit;
	pointer-events: none;
}
/* r4: the last 2px inside the box's bottom edge, between its rounded corners, in the box's colour,
   drawn by the dimmed backdrop IN FRONT of the box (cf-r4.js places it and hands over the colour).
   The strip inside the box is drawn where the list's scrolling puts it, which on a screen whose
   pixel ratio is not a whole number can be a device pixel off its place: one row of the list
   would then show between the strip and the box's border. This cover does not scroll. It lies
   over the strip's own padding, takes no room and no press, and is not drawn on a box whose
   answer has been taken (that box is dimmed; an opaque line would show on it). */
.sst-cf-reason::after {
	content: "";
	position: absolute;
	top: var(--sst-cf-edge-top, -10px);
	left: var(--sst-cf-edge-left, 0);
	width: var(--sst-cf-edge-width, 0);
	height: 2px;
	z-index: 1;
	background: var(--sst-cf-back, transparent);
	pointer-events: none;
}
.sst-cf-reason[data-sst-cf-taken]::after { display: none; }
/* r4: the list goes on. Shown only while cf-r4.js says that reasons are hidden below the part of
   the list that shows (data-sst-cf-more): the last 16px of that part fade into the box's own
   colour (--sst-cf-back, the same colour without its opacity in --sst-cf-back0; both set by the
   script, so the fade matches a light and a dark box alike). It ends on the strip's top line.
   It is a picture only: it takes no press (the reason under it is pressed as if it were not
   there), it never moves, and nothing is animated. */
.sst-cf-reason[data-sst-cf-more] .sst-cf-reason__foot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 1px);
	height: 16px;
	background: linear-gradient(to bottom, var(--sst-cf-back0, transparent), var(--sst-cf-back, transparent));
	pointer-events: none;
}
.sst-cf-reason__skip,
.sst-cf-reason__keep {
	flex: 1 1 180px;
	width: auto;
	justify-content: center;
	text-align: center;
	font-weight: 600;
}

/* One answer has been taken (cf-r4.js): the cancellation is on its way and nothing in the box
   does anything any more. Dimmed so that it also looks that way; no text is added. */
.sst-cf-reason[data-sst-cf-taken] .sst-cf-reason__box { opacity: 0.55; }
.sst-cf-reason[data-sst-cf-taken],
.sst-cf-reason[data-sst-cf-taken] .sst-cf-reason__opt,
.sst-cf-reason[data-sst-cf-taken] .sst-cf-reason__skip,
.sst-cf-reason[data-sst-cf-taken] .sst-cf-reason__keep { cursor: progress; }

@media (max-width: 600px) {
	/* Low on a phone, where the thumb is - but 100px above the bottom edge: that strip belongs to
	   whatever the store pins into the corners. The same numbers are set by cf-r4.js; here the
	   notch / home-bar inset is added where the browser knows it. */
	.sst-cf-reason {
		align-items: flex-end !important;
		padding: 12px 12px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.sst-cf-reason__box { font-size: 14.5px; }
	.sst-cf-reason__title { margin-bottom: 10px; font-size: 16px; }
	.sst-cf-reason__list li { margin-bottom: 6px; }
	.sst-cf-reason__opt,
	.sst-cf-reason__skip,
	.sst-cf-reason__keep { min-height: 44px; padding: 8px 12px; }
	.sst-cf-reason__skip,
	.sst-cf-reason__keep { flex: 1 1 120px; }
}

/* Fades in where it will stay. It does not slide: sliding up from below would put it, for a
   moment, into the strip it is meant to keep free, and would move what cf-r4.js has just
   measured. */
@media (prefers-reduced-motion: no-preference) {
	.sst-cf-reason__box { animation: sst-cf-in 0.16s ease-out 1; }
	/* r4: the cover in front of the box's last 2px comes when the box has faded in (it is opaque;
	   in front of a box that is still half transparent it would show as a line). */
	.sst-cf-reason::after { animation: sst-cf-late 0.16s step-end 1; }
	@keyframes sst-cf-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@keyframes sst-cf-late {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

/* ---- B. panel on the order page ---- */

.sst-cf-reorder {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 12px;
}
.sst-cf-reorder__text { margin: 0 0 10px; line-height: 1.55; }
.sst-cf-reorder__action { margin: 0; }

/* ---- B. confirmation screen ---- */

.sst-cf-ro { max-width: 680px; }
.sst-cf-ro__title { margin: 0 0 14px; }
.sst-cf-ro__items {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
.sst-cf-ro__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	list-style: none;
	border-bottom: 1px solid currentColor;
	border-bottom-color: color-mix(in srgb, currentColor 22%, transparent);
}
.sst-cf-ro__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sst-cf-ro__qty,
.sst-cf-ro__price { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sst-cf-ro__price { font-weight: 600; }
.sst-cf-ro__line { margin: 0 0 8px; line-height: 1.55; overflow-wrap: anywhere; }
.sst-cf-ro__note { margin: 14px 0 16px; font-size: 0.93em; line-height: 1.55; opacity: 0.78; }
.sst-cf-ro__form { margin: 0; }
.sst-cf-ro__button { min-height: 46px; }
.sst-cf-ro__closed { margin: 0; }

@media (max-width: 600px) {
	.sst-cf-reorder__button,
	.sst-cf-ro__button { display: block; width: 100%; box-sizing: border-box; text-align: center; }
}