/* Love and Save buttons, and the Most Loved list: for any page (btown-map). */
.btown-actions { --btown-accent: var(--bo-dir-accent, #990000); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.btown-actions button {
	display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.45rem 0.95rem;
	border: 1px solid #ded9d2; border-radius: 999px; background: #fff; color: #252525;
	font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.btown-actions button:hover { border-color: var(--btown-accent); color: var(--btown-accent); }
.btown-actions button:focus-visible { outline: 3px solid rgba(158, 27, 31, 0.3); outline-offset: 2px; }
.btown-actions button[aria-pressed="true"] { border-color: var(--btown-accent); background: #f6f2ec; color: var(--bo-dir-accent-dark, #7a0000); }
.btown-love__icon { color: var(--btown-accent); }
.btown-love[aria-pressed="false"] .btown-love__icon { color: #625f5a; }
.btown-love__count { font-variant-numeric: tabular-nums; }
.btown-actions__note { flex-basis: 100%; margin: 0; color: #625f5a; font-size: 0.85rem; }
.btown-actions__note:empty { display: none; }
.btown-actions__note a { color: var(--btown-accent); }

/* in a list: the heart and the star only, side by side */
.btown-actions--mini { margin: 0; flex-wrap: nowrap; gap: 0.35rem; }
.btown-actions--mini button { min-height: 44px; min-width: 44px; justify-content: center; padding: 0.35rem 0.7rem; }
.btown-actions--mini .btown-love__label, .btown-actions--mini .btown-save__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btown-actions--mini .btown-actions__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Cloudflare's check appears here, only when it needs a tap */
.btown-turnstile { position: fixed; z-index: 99999; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
.btown-turnstile[hidden] { display: none; }

/* the Most Loved list */
.btown-loved { margin: 1.5rem 0; color: #252525; }
.btown-loved__title { margin: 0 0 0.75rem; }
.btown-loved__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.btown-loved__item {
	display: grid; grid-template-columns: 1.6rem 56px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
	padding: 0.6rem 0.75rem; border: 1px solid #ded9d2; border-radius: 14px; background: #fff;
}
.btown-loved__rank { font-weight: 700; font-variant-numeric: tabular-nums; color: #625f5a; text-align: center; }
.btown-loved__photo { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #f6f2ec; }
.btown-loved__img { display: block; width: 56px; height: 56px; object-fit: cover; }
.btown-loved__noimg { display: block; width: 56px; height: 56px; }
.btown-loved__body { min-width: 0; display: grid; gap: 0.1rem; }
.btown-loved__name { font-weight: 700; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.btown-loved__name:hover { color: var(--bo-dir-accent, #990000); text-decoration: underline; }
.btown-loved__cat { font-size: 0.82rem; color: #625f5a; }
.btown-loved__map { font-size: 0.82rem; color: var(--bo-dir-accent, #990000); }
.btown-loved__empty, .btown-loved__more { margin: 0.75rem 0 0; font-size: 0.95rem; }
.btown-loved__more a { color: var(--bo-dir-accent, #990000); }
@media (max-width: 520px) {
	.btown-loved__item { grid-template-columns: 1.2rem 48px minmax(0, 1fr); }
	.btown-loved__photo, .btown-loved__img, .btown-loved__noimg { width: 48px; height: 48px; }
	.btown-loved__item .btown-actions { grid-column: 3; justify-self: start; }
}

/* on a directory card: its own row under the buttons, heart and star side by side */
.bo-listing-card__actions .btown-actions--mini { grid-column: 1 / -1; flex-basis: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; width: auto; margin: 0.15rem 0 0; }
.bo-listing-card__actions .btown-actions--mini button { width: auto; flex: 0 0 auto; }

/* v6: lettered tile when a business has no photo, pin on the map link, heart before the page title */
.btown-loved__noimg { display: grid; place-items: center; background: #f1ece3; border-radius: 10px; color: #8a1c1c; font-weight: 700; font-size: 1.15rem; }
.btown-loved__pin { vertical-align: -2px; margin-right: 0.3rem; }
.btown-title-icon { display: inline-block; margin-right: 0.4rem; color: var(--bo-dir-accent, #990000); vertical-align: -0.1em; line-height: 1; }
.btown-title-icon svg { display: block; width: 0.8em; height: 0.8em; }

/* v7: a logo that is not square (a wide wordmark or a tall mark) is shown whole, with padding, not cropped by the square thumbnail.
   The class is set in PHP (btown_map_image_is_contain); photos and square logos keep filling the box. */
.btown-loved__img.is-contain { box-sizing: border-box; padding: 5px; object-fit: contain; background: #fff; }
.btown-loved__photo:has(.is-contain) { background: #fff; box-shadow: inset 0 0 0 1px #e6dfd3; }

/* v8: Bloom, the second reaction: a flower bud that opens when pressed ("Make it bloom") */
.btown-actions { --btown-bloom: #c2336f; --btown-bloom-core: #f6b93b; }
.btown-bloom { position: relative; }
.btown-bloom__svg { width: 22px; height: 22px; overflow: visible; flex: none; color: #625f5a; }
.btown-petal { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transform-origin: 16px 16px; transform: scale(.62); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), fill .25s ease; }
.btown-core { fill: currentColor; transform-origin: 16px 16px; }
.btown-actions button.btown-bloom:hover { border-color: var(--btown-bloom); color: var(--btown-bloom); }
.btown-bloom:hover .btown-bloom__svg, .btown-bloom:focus-visible .btown-bloom__svg { color: var(--btown-bloom); }
.btown-bloom:hover .btown-petal, .btown-bloom:focus-visible .btown-petal { transform: scale(.86); }
.btown-actions button.btown-bloom[aria-pressed="true"] { border-color: var(--btown-bloom); color: #a52a5c; }
.btown-bloom[aria-pressed="true"] .btown-bloom__svg { color: var(--btown-bloom); }
.btown-bloom[aria-pressed="true"] .btown-petal { transform: scale(1); fill: currentColor; fill-opacity: .9; }
.btown-bloom[aria-pressed="true"] .btown-core { fill: var(--btown-bloom-core); }
.btown-bloom__count { font-variant-numeric: tabular-nums; }
.btown-actions--mini .btown-bloom__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.btown-bloom.is-blooming .btown-petal { animation: btown-unfurl .8s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 50ms); }
	.btown-bloom.is-blooming .btown-core { animation: btown-core-pop .65s cubic-bezier(.3, 1.4, .5, 1) .25s both; }
	.btown-bloom.is-blooming::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: btown-ring .85s ease-out both; }
	.btown-spore { position: absolute; left: 20px; top: 50%; width: 7px; height: 9px; margin: -4px 0 0 -3px; border-radius: 60% 40% 60% 40% / 70% 70% 30% 30%; background: var(--c); pointer-events: none; animation: btown-spore .95s cubic-bezier(.2, .7, .3, 1) forwards; }
}
@media (prefers-reduced-motion: reduce) { .btown-spore { display: none; } }
@keyframes btown-unfurl { 0% { transform: scale(.15) rotate(-45deg); opacity: .2; } 55% { transform: scale(1.22) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes btown-core-pop { 0% { transform: scale(0); } 60% { transform: scale(1.8); } 100% { transform: scale(1); } }
@keyframes btown-ring { 0% { opacity: .9; box-shadow: 0 0 0 0 rgba(214, 63, 124, .5); } 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(214, 63, 124, 0); } }
@keyframes btown-spore { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; } }