/* VerbNow Print — printable grid
 *
 * The first block is carried over verbatim from the theme's inline <style>. It has to stay
 * byte-for-byte equivalent: ~30KB of hand-written Additional CSS on the live site targets
 * these class names, and the grid is what 865 gallery URLs render.
 * New selectors are namespaced .vbp-* so there is no chance of collision.
 */

/* ---------- carried over from trellis-child ---------- */
.coloring-post-image {
	position: relative;
	display: block;
	overflow: visible;
	border-radius: 8px;
	cursor: pointer;
}
.coloring-post-image img {
	display: block;
	width: 100%;
	border-radius: 8px;
}
.cp-hover-hint {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	white-space: nowrap;
	z-index: 10;
	display: flex;
	gap: 8px;
}
.cp-hover-hint .cp-btn {
	display: inline-block;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 50px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	border: none;
	text-decoration: none;
}
.cp-btn-pdf { background: #f10202ff; }
.cp-btn-print { background: #f10202ff; }
.coloring-post-image:hover .cp-hover-hint { opacity: 1; pointer-events: auto; }
.cp-trigger.cp-loading .cp-hover-hint { opacity: 1; pointer-events: none; }
.cp-trigger.cp-loading .cp-btn-pdf { background: #aaa; }

/* ---------- new: per-page selection ---------- */
.vbp-pick {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 11;
	margin: 0;
	cursor: pointer;
	line-height: 0;
}
.vbp-pick__box {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}
.vbp-pick__mark {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.94);
	border: 2px solid rgba(0, 0, 0, 0.28);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.vbp-pick__mark::after {
	content: "";
	display: block;
	width: 6px;
	height: 12px;
	margin: 3px auto 0;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.15s ease;
}
.vbp-pick__box:checked + .vbp-pick__mark {
	background: #f10202;
	border-color: #f10202;
}
.vbp-pick__box:checked + .vbp-pick__mark::after { opacity: 1; }
/* Keyboard users must be able to see focus; the native box is visually hidden. */
.vbp-pick__box:focus-visible + .vbp-pick__mark {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}
.coloring-post-image.vbp-selected img {
	outline: 3px solid #f10202;
	outline-offset: -3px;
}

/* The whole tile is the selection target once the toolbar is present, so say so on hover.
   Touch devices get no hover, which is exactly why the tile — not a 26px box — is the target. */
[data-vbp-grid] .coloring-post-image { cursor: pointer; }
[data-vbp-grid] .coloring-post-image:hover .vbp-pick__mark { border-color: #f10202; }

/* ---------- new: batch toolbar (mobile-first, one short row at rest) ---------- */
.vbp-toolbar {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 0 0 12px;
	padding: 7px 9px;
	background: #fdf6ec;
	border: 1px solid #e6dbc8;
	border-radius: 10px;
	/* Sticky at the TOP on purpose — Mediavine owns the bottom of the viewport. */
}
.vbp-tb-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
/* Trellis styles bare <button> as display:block; width:100%, which turned every control into
 * its own full-width row — the toolbar ate 225px of an 812px phone screen. Scoping to
 * .vbp-toolbar wins on specificity without touching any other button on the site. */
.vbp-toolbar .vbp-tb-btn {
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.15;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 7px 12px;
	border-radius: 50px;
	border: 1.5px solid #1a1410;
	background: transparent;
	color: #1a1410;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.vbp-toolbar .vbp-tb-btn:hover { background: #1a1410; color: #fff; }
.vbp-toolbar .vbp-tb-btn[hidden] { display: none; }
.vbp-toolbar .vbp-tb-icon { padding: 7px 10px; font-size: 0.9rem; }
.vbp-toolbar .vbp-tb-opts[aria-expanded="true"] { background: #1a1410; color: #fff; }

/* The two actions carry the brand red; everything else stays quiet so they read first. */
.vbp-toolbar .vbp-tb-go { background: #f10202; border-color: #f10202; color: #fff; }
.vbp-toolbar .vbp-tb-go:hover { background: #c50101; border-color: #c50101; color: #fff; }

/* No margin-right:auto here — combined with flex-wrap it claimed the whole remaining row
 * (measured 186px) and pushed every following button onto its own line. */
.vbp-tb-count {
	font-size: 0.78rem;
	font-weight: 700;
	color: #6b4f3a;
	flex: 0 1 auto;
	min-width: 0;
}

/* Once something is selected there are five controls, which cannot share a row with the
 * status text on a 375px screen. Dropping the text to its own line keeps the buttons on a
 * single stable row instead of letting them reshuffle every time the count changes. */
.vbp-toolbar.is-active .vbp-tb-count {
	flex: 1 1 100%;
	order: 99;
	font-size: 0.72rem;
	line-height: 1;
}
@media (min-width: 560px) {
	.vbp-toolbar.is-active .vbp-tb-count { flex: 0 1 auto; order: 0; font-size: 0.78rem; }
}

/* ---------- options panel (collapsed by default) ---------- */
.vbp-tb-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #e6dbc8;
}
.vbp-tb-panel[hidden] { display: none; }
.vbp-opt { display: flex; align-items: center; gap: 8px; }
.vbp-opt__label { font-size: 0.75rem; font-weight: 700; color: #6b4f3a; }
.vbp-opt--check { cursor: pointer; font-size: 0.75rem; color: #6b4f3a; font-weight: 700; }
.vbp-opt--check input { width: 16px; height: 16px; accent-color: #f10202; }
.vbp-ink-note { font-weight: 400; font-style: normal; opacity: 0.75; }

.vbp-seg { display: inline-flex; border: 1.5px solid #1a1410; border-radius: 50px; overflow: hidden; }
.vbp-toolbar .vbp-seg button { /* same Trellis display:block override as above */
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: 5px 13px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #1a1410;
	cursor: pointer;
	min-width: 34px;
}
.vbp-toolbar .vbp-seg button + button { border-left: 1.5px solid #1a1410; }
.vbp-toolbar .vbp-seg button.is-on { background: #1a1410; color: #fff; }

@media (min-width: 720px) {
	.vbp-toolbar { padding: 9px 13px; }
	.vbp-tb-btn { font-size: 0.84rem; padding: 8px 15px; }
	.vbp-tb-count { font-size: 0.84rem; }
}

/* The toolbar is a screen control; it must never reach paper. */
@media print {
	.vbp-toolbar, .vbp-pick, .cp-hover-hint { display: none !important; }
}