﻿/**
 * "Get it into Google Sheets" guide: thank-you page and My Account.
 * Tokens only (design-system.md). No icons, no emoji, no motion, no shadow.
 * Peach is reserved for the paid tier, so the card is white.
 */
.bb-delivery {
	max-width: 65ch;
	margin-block: var(--bb-space-6);
	padding: var(--bb-space-6);
	background: var(--bb-white);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-md);
	color: var(--bb-ink);
}
.bb-delivery h3 {
	margin: var(--bb-space-6) 0 var(--bb-space-3);
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: var(--bb-h3-size);
	line-height: 1.3;
	color: var(--bb-olive-900);
	text-wrap: balance;
}
.bb-delivery > h3:first-child,
.bb-delivery__google > h3:first-child { margin-top: 0; }
.bb-delivery__google {
	margin-bottom: var(--bb-space-6);
	padding-bottom: var(--bb-space-6);
	border-bottom: 1px solid var(--bb-line);
}
.bb-delivery p {
	margin: 0 0 var(--bb-space-3);
	font-family: var(--bb-font-body);
	font-size: var(--bb-body-size);
	line-height: 1.65;
	text-wrap: pretty;
}
.bb-delivery__steps {
	counter-reset: bb-step;
	margin: 0 0 var(--bb-space-5);
	padding: 0;
	list-style: none;
}
.bb-delivery__steps li {
	counter-increment: bb-step;
	position: relative;
	padding-left: calc(2ch + var(--bb-space-3));
	margin: 0 0 var(--bb-space-3);
	font-family: var(--bb-font-body);
	font-size: var(--bb-body-size);
	line-height: 1.65;
	text-wrap: pretty;
}
.bb-delivery__steps li::before {
	content: counter(bb-step);
	position: absolute;
	left: 0;
	font-family: var(--bb-font-display);
	font-weight: 600;
	color: var(--bb-olive-700);
	font-variant-numeric: tabular-nums;
}
.bb-delivery p.bb-delivery__note {
	font-size: var(--bb-small-size);
	line-height: 1.5;
	color: var(--bb-muted);
}
/* bb-base underlines `.woocommerce-page .site-main p a:not(.button)` (0,3,2); keep it off the button. */
.bb-delivery .bb-btn,
.woocommerce-page .site-main .bb-delivery a.bb-btn { text-decoration: none; }
.bb-delivery .bb-btn:focus-visible {
	outline: 3px solid var(--bb-under);
	outline-offset: 3px;
}
/* Thank-you intro (inc/offer.php): reading measure, and no empty Woo notice left behind. */
.bb-ty-intro { max-width: 65ch; }
.bb-ty-intro h2 { text-wrap: balance; }
.bb-ty-intro p { text-wrap: pretty; }
.woocommerce-thankyou-order-received:empty { display: none; }
@media (max-width: 767px) {
	.bb-delivery { padding: var(--bb-space-5); }
	.bb-delivery .bb-btn { width: 100%; }
}
