/* ============================================================
   BFP — "Pray button" (Lutu)
   Fixed bottom bar + inline shortcode variant.
   Reuses the "people of the day" design tokens (cream / blue /
   Fraunces + Inter / 20px radius). Everything scoped to .bfp-pray.
   ============================================================ */

.bfp-pray {
	/* Palette (mirrors public/css/bfp-today.css) */
	--bfp-bg:        #faf8f5;
	--bfp-surface:   #ffffff;
	--bfp-surface-2: #f4f0ea;
	--bfp-text:      #2a2f38;
	--bfp-heading:   #141821;
	--bfp-muted:     #5f6775;
	--bfp-border:    rgba(20, 28, 46, 0.12);

	--bfp-accent:      #1e3a5f;
	--bfp-accent-2:    #3a6ea8;
	--bfp-accent-soft: rgba(30, 58, 95, 0.08);

	--bfp-success:   #2f7d4f;
	--bfp-success-2: #3c9c63;
	--bfp-danger:    #b23b2e;

	--bfp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--bfp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--bfp-radius: 20px;
	--bfp-radius-sm: 14px;

	font-family: var(--bfp-font-body);
	color: var(--bfp-text);
	box-sizing: border-box;
}

.bfp-pray *,
.bfp-pray *::before,
.bfp-pray *::after { box-sizing: border-box; }

/* ----------------------------------------------------------
   Inner layout shared by fixed + inline variants
   ---------------------------------------------------------- */
.bfp-pray__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* Hug the content (button + stats) so there is no empty gap between them. */
	width: max-content;
	max-width: 100%;
	gap: 1.25rem;
	padding: 0.5rem 0.6rem 0.5rem 1.4rem;
	background: var(--bfp-surface);
	border: 1px solid var(--bfp-border);
	border-radius: 999px;
}

/* ----------------------------------------------------------
   Stats (total all-time + today)
   ---------------------------------------------------------- */
.bfp-pray__stats {
	display: flex;
	align-items: stretch;
	gap: clamp(0.75rem, 3vw, 1.75rem);
	min-width: 0;
	padding: 0 50px;
}

.bfp-pray__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.05;
	gap: 0.1rem;
}

.bfp-pray__num {
	/* Default (theme/system) font for the numbers — not the display serif. */
	font-family: inherit;
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--bfp-heading);
	font-variant-numeric: tabular-nums;
}

.bfp-pray__label {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--bfp-muted);
}

/* ----------------------------------------------------------
   Pray button
   ---------------------------------------------------------- */
.bfp-pray__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	flex: 0 0 auto;
	min-height: 52px;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--bfp-accent), var(--bfp-accent-2));
	color: #fff;
	font-family: var(--bfp-font-body);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 8px 22px -12px rgba(30, 58, 95, 0.7);
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.bfp-pray__btn:hover { filter: brightness(1.05); box-shadow: 0 10px 26px -12px rgba(30, 58, 95, 0.8); }
.bfp-pray__btn:active { transform: translateY(1px) scale(0.99); }
.bfp-pray__btn:focus-visible { outline: 3px solid var(--bfp-accent-2); outline-offset: 2px; }
.bfp-pray__btn:disabled { cursor: default; }

.bfp-pray__btn-ic {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Prayed (success) state */
.bfp-pray.is-prayed .bfp-pray__btn {
	background: linear-gradient(135deg, var(--bfp-success), var(--bfp-success-2));
	box-shadow: none;
	cursor: default;
}
.bfp-pray.is-prayed .bfp-pray__btn:hover { filter: none; }

/* ----------------------------------------------------------
   Honeypot — visually hidden, NOT display:none
   ---------------------------------------------------------- */
.bfp-pray__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	height: 0;
	width: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ----------------------------------------------------------
   Fixed bottom bar variant
   ---------------------------------------------------------- */
/* A compact pill that hugs its content (button + stats) and floats centered
   above the bottom edge — no stretched full-width bar, so there is no empty gap
   in the middle. Same friendly look on mobile and desktop. */
.bfp-pray--fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	padding: 0 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
	pointer-events: none; /* let clicks pass except on the bar itself */
}

.bfp-pray--fixed .bfp-pray__inner {
	pointer-events: auto;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 0 2px 6px rgba(20, 28, 46, 0.06), 0 18px 44px -20px rgba(20, 28, 46, 0.45);
}

/* Desktop: nudge up a touch and keep clear of the theme back-to-top button. */
@media ( min-width: 720px ) {
	.bfp-pray--fixed {
		bottom: 8px;
		padding-right: 72px; /* clearance for theme .cd-top */
	}
}

/* ----------------------------------------------------------
   Narrow screens — keep the fixed bar compact
   ---------------------------------------------------------- */
@media ( max-width: 419px ) {
	.bfp-pray--fixed .bfp-pray__inner { padding-left: 0.85rem; padding-right: 0.85rem; gap: 0.75rem; }
	.bfp-pray__stats { gap: 1rem; }
	.bfp-pray__btn { padding: 0.6rem 1.15rem; min-height: 48px; }
}

/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bfp-pray__btn { transition: none; }
	.bfp-pray__btn:active { transform: none; }
}

/* ----------------------------------------------------------
   Compact variant — used inside the people-list cards.
   Smaller pill so button + stats fit in the card footer.
   ---------------------------------------------------------- */
.bfp-pray--compact { display: inline-flex; }
.bfp-pray--compact .bfp-pray__inner {
	gap: 1.1rem;
	padding: 0;
	box-shadow: none;
	border: 0;
	background: none;
	border-radius: 0;
}
.bfp-pray--compact .bfp-pray__btn {
	min-height: 44px;
	padding: .5rem 1.15rem;
	font-size: 1.5rem;
	box-shadow: none;
}
.bfp-pray--compact .bfp-pray__btn-ic { width: 1.1em; height: 1.1em; }
.bfp-pray--compact .bfp-pray__stats { padding: 0 1rem; gap: 1.25rem; }
.bfp-pray--compact .bfp-pray__num { font-size: 1.5rem; }
.bfp-pray--compact .bfp-pray__label { font-size: 1.5rem; }
.bfp-pray--compact .bfp-pray__msg { display: none; }

/* Mobile (list cards only): stack the compact pill — full-width button with the
   stats below it, so a long "prayed" button label can't overflow the card. */
@media (max-width: 768px) {
	.bfp-pray--compact { display: block; width: 100%; }
	.bfp-pray--compact .bfp-pray__inner {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: .75rem;
	}
	.bfp-pray--compact .bfp-pray__btn { width: 100%; }
	.bfp-pray--compact .bfp-pray__stats {
		padding: 0;
		justify-content: center;
		gap: 1.75rem;
	}
}