/* ==========================================================================
   Cart -> checkout -> confirmation flow (inc/flow.php)
   Shared tokens, step bar, compact page head, page transitions.
   Loaded on the cart, checkout and order-received pages (body.rc-flow).
   ========================================================================== */

body.rc-flow {
	--rc-yellow: #fdc300;
	--rc-green: #1db410;
	--rc-green-dark: #178c0d;
	--rc-green-bg: #eefbea;
	--rc-grey-bg: #f4f4f3;
	--rc-grey-line: #e3e3e1;
	--rc-grey-dark: #464f52;
	--rc-grey-text: #5b6367;
	--rc-ink: #171717;
	--rc-red: #d33a2c;
}

/* ---------- Step bar ---------- */
.rc-steps { box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; padding: 18px 20px 0; }
.rc-steps ol { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rc-step { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--rc-grey-text); white-space: nowrap; }
/* Each later step grows and draws the connecting line before itself */
.rc-step + .rc-step { flex: 1 1 auto; }
.rc-step + .rc-step::before { content: ""; flex: 1 1 auto; min-width: 12px; height: 1px; background: var(--rc-grey-line); margin-right: 4px; }
.rc-step a { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.rc-step a:hover .rc-step-label { text-decoration: underline; }
.rc-step a:focus-visible { outline: 2px solid var(--rc-yellow); outline-offset: 2px; }
.rc-step-dot {
	width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--rc-grey-line); color: #fff; font-size: 12px; line-height: 1;
}
.rc-step.is-active { color: var(--rc-ink); }
.rc-step.is-active .rc-step-dot { background: var(--rc-green); }
.rc-step.is-done { color: var(--rc-ink); }
.rc-step.is-done .rc-step-dot { background: var(--rc-ink); }
/* Narrow phones: the three labels don't fit next to each other (the bar made the page wider than the screen).
   Only the current step keeps its visible label; the others are dots, their label still read by screen readers. */
@media (max-width: 400px) {
	.rc-step:not(.is-active) .rc-step-label {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
}

/* ---------- Compact page head ---------- */
/* The yellow "Pagina intro" banner (Bricks component, class rc-page-intro set on its root section) becomes a
   plain title under the step bar, as in the mockups. !important: the component styles itself by class with
   higher specificity. */
body.rc-flow .rc-page-intro {
	background: none !important;
	max-width: 640px; margin-inline: auto;
	padding: 18px 20px 0 !important;
	min-height: 0 !important;
}
body.rc-flow .rc-page-intro > .brxe-container {
	max-width: none !important; width: 100%; margin: 0 !important; padding: 0 !important;
}
body.rc-flow .rc-page-intro h1 {
	font-size: 26px !important; line-height: 1.2; margin: 0 !important; padding: 0 !important; color: var(--rc-ink);
}
@media (min-width: 992px) {
	/* Same width as the two-column content below it */
	body.rc-flow .rc-page-intro { max-width: 1160px; }
	body.rc-flow .rc-page-intro h1 { font-size: 30px !important; }
}

/* Pages without a Bricks template (empty cart, order received) get Bricks' plain page title instead.
   Empty cart: hidden, inc/cart.php renders its own (it must survive cart.js swapping in the empty state). */
body.rc-flow #brx-content > h1 {
	max-width: 640px; margin: 0 auto !important; padding: 18px 20px 0;
	font-size: 26px; line-height: 1.2; color: var(--rc-ink);
}
body.rc-flow-step-1 #brx-content > h1 { display: none; }
@media (min-width: 992px) {
	body.rc-flow #brx-content > h1 { max-width: 1160px; font-size: 30px; }
}

/* ---------- Floating mascot button (global Bricks block): hidden on cart and checkout ---------- */
/* Decision 2026-10-06. Kept on the confirmation page. Class set on the block in Bricks template "Whatsapp". */
body.rc-flow-step-1 .rc-floating-helper,
body.rc-flow-step-2 .rc-floating-helper { display: none !important; }

/* ---------- Page transitions (cross-document view transitions) ---------- */
/* Both pages must opt in, so only cart <-> checkout -> order-received animate. Header and step bar keep
   their place (own snapshot) while the content slides. Browsers without support navigate normally. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
/* A view-transition-name makes the header its own stacking context, so its dropdown menus (z-index 998) only
   count inside it: without a z-index on the header itself, later content (step bar, form) paints over them. */
body.rc-flow #brx-header { view-transition-name: rc-header; z-index: 999; }
body.rc-flow .rc-steps { view-transition-name: rc-steps; }

::view-transition-old(root) { animation: rc-vt-out .16s ease-in both; }
::view-transition-new(root) { animation: rc-vt-in .28s ease-out both; }
html:active-view-transition-type(rc-back)::view-transition-old(root) { animation-name: rc-vt-out-back; }
html:active-view-transition-type(rc-back)::view-transition-new(root) { animation-name: rc-vt-in-back; }
::view-transition-group(rc-steps) { animation-duration: .28s; }

@keyframes rc-vt-out      { to   { opacity: 0; transform: translateX(-32px); } }
@keyframes rc-vt-in       { from { opacity: 0; transform: translateX(32px); } }
@keyframes rc-vt-out-back { to   { opacity: 0; transform: translateX(32px); } }
@keyframes rc-vt-in-back  { from { opacity: 0; transform: translateX(-32px); } }

/* Order-received page, phones: WooCommerce's billing and shipping address columns sit side by side in a flex row
   that doesn't wrap, so the shipping column stuck out ~60px and the page scrolled sideways. Stacked below 768px. */
@media (max-width: 767px) {
	body.woocommerce-order-received .woocommerce-columns--addresses { flex-direction: column; gap: 24px; }
	body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column { width: auto; max-width: none; margin: 0; }
}