/*
 * Client Book Ring mockup (template-parts/mockups/client-book-ring.php).
 * NEW in design round 6, Sep 2026.
 *
 * Not a 1360x855 app frame, so none of the stage-panel scaler applies. The
 * ring is a square SVG that fills its column, with four absolutely positioned
 * labels: two "before" and two "after", crossfaded by --cbr-m (0 = before,
 * 1 = after), which the script animates on hover, tap or focus.
 */

.cbr {
	--cbr-m: 0;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	font-family: 'Roboto', system-ui, sans-serif;
}

.cbr-ring {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	cursor: pointer;
}
.cbr-ring:focus-visible { outline: 2px solid #6D5DF3; outline-offset: 10px; border-radius: 24px; }
.cbr-ring > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cbr-lit { filter: drop-shadow(0 12px 22px rgba(62, 214, 150, 0.30)); }

/* Before and after share a slot; --cbr-m crossfades them. */
.cbr-before { opacity: calc(1 - var(--cbr-m)); }
.cbr-after { opacity: var(--cbr-m); pointer-events: none; }

.cbr-centre {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -52%);
	width: 60%;
	display: flex; flex-direction: column; align-items: center;
	text-align: center; gap: 7px;
	pointer-events: none;
}
.cbr-head {
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: clamp(26px, 6.5vw, 38px); line-height: 1.08;
	font-weight: 600; letter-spacing: -0.01em; color: #16042E;
	text-wrap: balance;
}
.cbr-head span { color: #2FBE83; }
.cbr-sub { font-size: 13.5px; line-height: 1.5; color: #574a6e; }

.cbr-pill {
	position: absolute; top: calc(-3% + 20px); left: calc(57% + 40px);
	display: flex; align-items: center; gap: 9px;
	background: #fff; border: 1px solid rgba(26, 8, 48, 0.08);
	border-radius: 18px; padding: 10px 17px;
	box-shadow: 0 18px 40px -16px rgba(22, 4, 46, 0.25);
	font-size: 13.5px; font-weight: 700; color: #16042E; white-space: nowrap;
}

.cbr-note {
	position: absolute; left: -3%; bottom: 7%;
	max-width: 250px;
	display: flex; flex-direction: column; gap: 6px;
	background: #fff; border: 1px solid rgba(26, 8, 48, 0.08);
	border-radius: 22px; padding: 14px 18px;
	box-shadow: 0 22px 48px -18px rgba(22, 4, 46, 0.28);
}
.cbr-note-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #16042E; }
.cbr-note-body { font-size: 12.5px; line-height: 1.55; color: #574a6e; }

.cbr-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.cbr-dot-mint { background: #3ED696; }
.cbr-dot-pink { background: linear-gradient(135deg, #E72D67, #F2477E); }
.cbr-dot-violet { width: 7px; height: 7px; background: #6D5DF3; }

.cbr-hint-row { display: flex; justify-content: center; margin-top: 16px; }
.cbr-hint {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 500; color: #8a7ea3;
	background: #fff; border: 1px solid rgba(26, 8, 48, 0.08);
	border-radius: 999px; padding: 7px 15px;
	opacity: calc(1 - var(--cbr-m));
}

/* The ring is drawn segment by segment on reveal; the script sets --cbr-t.
 * Without JS every segment is already drawn, which is the correct still. */
.cbr[data-cbr-drawn] .cbr-dim { transition: opacity .25s ease; }
.cbr .cbr-lit { transition: opacity .35s ease; }

@media (max-width: 767px) {
	/* The two floating labels overhang the square; pull them inside so they
	 * do not push the page sideways at phone width. */
	.cbr-pill { top: 0; left: auto; right: 0; }
	.cbr-note { left: 0; bottom: 0; max-width: 78%; }
	.cbr-note-body { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.cbr .cbr-dim, .cbr .cbr-lit { transition: none !important; }
}