/**
 * YV Banners — CORE styles, shared by every banner.
 *
 * This file only holds the machinery that makes a banner a floating,
 * minimizable card: positioning, the card shell, the controls, and the
 * minimize/reveal mechanics. Each banner's *look* (header, title, headline,
 * benefits, CTA…) lives in its own "Custom CSS" field so it can be edited per
 * banner — see the shipped default in yvb_default_css() (yv-banners.php).
 */

.yvb-banner {
	--yvb-accent: #003C77;
	--yvb-ink: #1E293B;
	--yvb-muted: #64748B;

	position: fixed;
	bottom: 24px;
	width: 360px;
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid rgba(2, 32, 71, 0.08);
	border-radius: 0;
	box-shadow: 0 6px 18px rgba(2, 32, 71, 0.14);
	overflow: hidden;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--yvb-ink);
	line-height: 1.5;

	/* Enter animation / FOUC guard — revealed by JS adding .yvb-ready. */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.yvb-banner.yvb-ready { opacity: 1; transform: none; }
.yvb-banner.yvb-hidden { display: none !important; }

.yvb--bottom-right { right: 24px; }
.yvb--bottom-left  { left: 24px; }

.yvb-banner *,
.yvb-banner *::before,
.yvb-banner *::after { box-sizing: border-box; }

.yvb-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Controls */
.yvb-controls {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 4px;
	z-index: 2;
}

.yvb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.06);
	color: var(--yvb-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.yvb-btn:hover,
.yvb-btn:focus-visible {
	background: rgba(15, 23, 42, 0.12);
	color: var(--yvb-ink);
	outline: none;
}

.yvb-ico-max { display: none; }

/* ---------------------------------------------------- Body: minimize mechanic */
/* Pure-CSS collapse via grid rows 1fr<->0fr — animates the REAL content height,
   so it works for a banner of any size (no max-height cap to clip tall content).
   Clipping is handled by .yvb-banner's own overflow:hidden — a single clip tied
   to the card height. (An overflow:hidden on .yvb-body-inner clipped on its own
   timeline, which made the height and content appear to animate at different
   speeds — so it is intentionally NOT set here.) */
.yvb-body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.5s ease;
}

.yvb-body-inner {
	min-height: 0; /* lets the grid track collapse all the way to 0 */
}

.yvb-body-pad { padding: 18px; transition: opacity 1s ease; } /* on open */

/* --------------------------------------------------------------- Minimized */
.yvb--min .yvb-body { grid-template-rows: 0fr; }
.yvb--min .yvb-body-pad { opacity: 0; transition: opacity 0.3s ease; } /* 0.3s on minimize */
.yvb--min .yvb-head { cursor: pointer; } /* click header to expand */
.yvb--min .yvb-close { display: none; }
.yvb--min .yvb-ico-min { display: none; }
.yvb--min .yvb-ico-max { display: inline; }

/* ------------------------------------------------------------- Small screen */
@media (max-width: 480px) {
	.yvb-banner {
		width: calc(100vw - 24px);
		bottom: 12px;
	}
	.yvb--bottom-right { right: 12px; }
	.yvb--bottom-left  { left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.yvb-banner { transition: opacity 0.2s ease; transform: none; }
	.yvb-banner.yvb-ready { transform: none; }
	.yvb-body { transition: none; }
	.yvb-body-pad { transition: none; }
}