/**
 * De balk "Mijn afspraken als app" op de website (V-026, App/Offer.php):
 * een donkere kaart onderin, boven de actiebalk van het thema.
 */
.chop-offer {
	position: fixed;
	inset-inline: 10px;
	inset-block-end: calc(var(--chop-offer-bottom, 0px) + 10px + env(safe-area-inset-bottom));
	z-index: 45;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	max-inline-size: 520px;
	margin-inline: auto;
	padding: 10px 12px 10px 10px;
	color: #e8f2f1;
	background: #080d0f;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
	animation: chop-offer-in 0.35s ease-out;
}
.chop-offer[hidden] { display: none; }
.chop-offer img { inline-size: 44px; block-size: 44px; border-radius: 11px; }
.chop-offer p { display: grid; margin: 0; font-size: 13px; line-height: 1.3; }
.chop-offer p strong { font-size: 14.5px; font-weight: 700; color: #fff; }
.chop-offer p span { color: #a9bdbb; }
.chop-offer__go {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: #080d0f;
	text-decoration: none;
	background: #42c7c6;
	border-radius: 20px;
}
.chop-offer__go:hover, .chop-offer__go:focus-visible { color: #080d0f; background: #6fd8d7; }
/* Het kruisje als rondje op de hoek: zo blijft er ruimte voor de tekst. Het
   onzichtbare vlak eromheen maakt het tikvlak 44px. */
.chop-offer__x {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-end: -6px;
	display: inline-grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	padding: 0;
	color: #e8f2f1;
	background: #2a3436;
	border: 2px solid #080d0f;
	border-radius: 50%;
	cursor: pointer;
}
.chop-offer__x::after { content: ""; position: absolute; inset: -8px; }
.chop-offer__x svg { inline-size: 14px; block-size: 14px; }
.chop-offer__x:hover, .chop-offer__x:focus-visible { color: #fff; background: #3c4a4c; }
.chop-offer a:focus-visible, .chop-offer button:focus-visible { outline: 2px solid #42c7c6; outline-offset: 2px; }
@keyframes chop-offer-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chop-offer { animation: none; } }
@media print { .chop-offer { display: none !important; } }