/* The done moment (DN, 17/10/2026). One look for every screen after the visitor sends something: the order
   received page (woocommerce/checkout/thankyou.php), the quote page, the contact page and the lead band.
   Owner rule: subtract, don't add. A small bitten bagel, a warm title, one line of what happens next, a compact
   summary where there is one, one action, and a quiet WhatsApp line. Markup: hb_done_mark() in inc/done.php,
   behaviour: assets/js/polish-done.js (window.hbBite). Last polish layer, so it wins over main.css. */

.hb-done { --hb-done-ink: var(--hb-ink-warm); --hb-done-soft: rgba(53, 43, 36, .62); --hb-done-line: rgba(53, 43, 36, .12);
	display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--hb-done-ink); }
.hb-done.hb-ty { display: flex; gap: 0; max-width: 560px; padding-block: 8px; }
.hb-done[hidden] { display: none; }

/* The mark: the site bagel with the bites cut out of it (an SVG mask over the footer bagel image). */
.hb-done__mark { --hb-done-mark: 84px; position: relative; display: block; flex: none; width: var(--hb-done-mark); height: var(--hb-done-mark); margin: 0 auto 22px; }
.hb-done__mark svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 16px rgba(53, 43, 36, .16)); }
.hb-done__mark.is-chomp svg { animation: hb-done-chomp .24s cubic-bezier(.3, .7, .4, 1); }
@keyframes hb-done-chomp { 0% { transform: none; } 45% { transform: scale(.94) rotate(-5deg); } 100% { transform: none; } }
.hb-done__crumb { position: absolute; left: var(--x); top: var(--y); width: var(--s, 5px); height: var(--s, 5px); border-radius: 45% 55% 40% 60%;
	background: var(--c, #d79a52); pointer-events: none; transform: translate(-50%, -50%); animation: hb-done-crumb .72s cubic-bezier(.25, .6, .45, 1) forwards; }
@keyframes hb-done-crumb { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; } }
.hb-done.is-fail .hb-done__mark { opacity: .55; filter: grayscale(.5); }

/* Type: the same title, meta and next-step line everywhere. */
.hb-done .hb-done__title { margin: 0; font-weight: 700; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.15; color: var(--hb-done-ink); }
.hb-done .hb-done__meta { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--hb-done-soft); }
.hb-done .hb-done__next { margin: 14px 0 0; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--hb-done-ink); }
.hb-done .hb-done__quiet { margin: 20px 0 0; max-width: none; font-size: 15px; line-height: 1.5; color: var(--hb-done-soft); }
.hb-done .hb-done__quiet a, .hb-done .hb-done__cal { color: var(--hb-done-ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(53, 43, 36, .3); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .hb-done .hb-done__quiet a:hover, .hb-done .hb-done__cal:hover { text-decoration-color: currentColor; } }

/* The compact summary: hairline rows, label on the reading side, value on the far side. */
.hb-done .hb-done__sum { box-sizing: border-box; display: block; width: min(100%, 440px); margin: 30px 0 0; padding: 0; border: 0; border-top: 1px solid var(--hb-done-line); border-radius: 0; background: none; box-shadow: none; text-align: start; }
.hb-done__sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 12px 2px; border-bottom: 1px solid var(--hb-done-line); }
.hb-done__sum dt { flex: none; font-weight: 400; font-size: 15px; color: var(--hb-done-soft); }
.hb-done__sum dd { min-width: 0; margin: 0; font-weight: 700; font-size: 16px; text-align: end; overflow-wrap: anywhere; }
.hb-done__sum > div:last-child dd { font-size: 19px; }
.hb-done .hb-done__cal { margin-inline-start: 6px; font-size: 14px; white-space: nowrap; }
/* The quote page's summary is written by main.js as plain dt/dd pairs: the same hairline look as a two-column grid. */
.hb-quote .hb-q__done-sum.hb-done__sum { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; }
.hb-quote .hb-q__done-sum.hb-done__sum:empty { display: none; }
.hb-quote .hb-q__done-sum.hb-done__sum > dt, .hb-quote .hb-q__done-sum.hb-done__sum > dd { padding: 10px 2px; border-bottom: 1px solid var(--hb-done-line); }
.hb-quote .hb-q__done-sum.hb-done__sum > dt { padding-inline-end: 20px; }
.hb-quote .hb-q__done-sum.hb-done__sum > dd { text-align: end; }

/* One action. */
.hb-done .hb-done__go { margin-top: 30px; }
.hb-done.hb-ty .hb-btn--lg { min-width: 260px; }

/* Where each one sits. */
.hb-checkout--done .hb-checkout__box { padding-block: clamp(48px, 6vw, 96px); }
.hb-lb__done.hb-done { padding: clamp(8px, 1.5vw, 20px) 0; }
.hb-lb__done.hb-done .hb-done__mark { --hb-done-mark: 72px; margin-bottom: 18px; }
.hb-contact__done.hb-done, .hb-q__done.hb-done { gap: 0; padding: clamp(18px, 3vw, 40px) 0; }
.hb-quote .hb-q__done.is-in > .hb-done__mark { animation: none; }

@media (max-width: 599px) {
	.hb-done .hb-done__title { font-size: 28px; }
	.hb-done .hb-done__next { font-size: 16px; }
	.hb-done.hb-ty .hb-btn--lg { width: 100%; min-width: 0; }
	.hb-done__sum > div { flex-wrap: wrap; }
}

/* The checkout overlay: the bagel takes its bites while the order goes out (polish-done.js). */
.hb-bite-ov { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(249, 244, 240, .96); opacity: 0; transition: opacity .18s ease; }
.hb-bite-ov.is-in { opacity: 1; }
.hb-bite-ov__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hb-bite-ov .hb-done__mark { --hb-done-mark: 128px; margin-bottom: 18px; }
.hb-bite-ov__in p { margin: 0; font-weight: 700; font-size: 18px; color: var(--hb-ink-warm); }
@media (prefers-reduced-motion: reduce) {
	.hb-done__mark.is-chomp svg, .hb-done__crumb { animation: none; }
	.hb-done__crumb { display: none; }
	.hb-bite-ov { transition: none; }
}
html.hb-a11y-motion .hb-done__crumb { display: none; }