/* ==================================================================
   CELLUGENIX ELITE - funnel layer
   Place at: wp-content/themes/hello-elementor-child/assets/css/cgx-elite.css

   Covers the four things cgx-elite.php prints:
     .cgx-elite-teaser   the Elite price under a guest price
     .cgx-elite-bar      the cart/checkout banner, two variants
     .cgx-elite-meter    the free-shipping progress bar
     .cgx-elite-terms    the checkout tick

   NO !important. Every selector here is a cgx- class that exists nowhere
   else, so nothing in Hello Elementor, Elementor or WooCommerce is
   competing for it. The membership page keeps its own inline styles.

   Colours are custom properties on :root so a rebrand is one block.
   ================================================================== */

:root {
	--cgx-elite-ink:    #0E1116;
	--cgx-elite-muted:  #5A6472;
	--cgx-elite-line:   #E3E7EC;
	--cgx-elite-gold:   #B8892B;
	--cgx-elite-gold-l: #FBF5E8;
	--cgx-elite-go:     #1E7F52;
	--cgx-elite-go-l:   #ECF7F1;
	--cgx-elite-radius: 12px;
}

/* ------------------------------------------------------------------
   1 - THE PRICE A GUEST IS NOT PAYING

   Appended AFTER the normal price node, never replacing it. The real
   price must stay the biggest number on the card: a shop grid where the
   member price is visually dominant reads as the price everyone pays,
   and every guest then feels overcharged at checkout.
   ------------------------------------------------------------------ */

.cgx-elite-teaser {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--cgx-elite-line);
	font-size: 13px;
	line-height: 1.45;
}

.cgx-elite-teaser__price {
	color: var(--cgx-elite-gold);
	font-weight: 700;
}

/* Woo wraps prices in .amount and often <bdi>; both inherit rather than
   carrying the theme's own price colour in here. */
.cgx-elite-teaser__price .amount,
.cgx-elite-teaser__price bdi {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.cgx-elite-teaser__lbl {
	color: var(--cgx-elite-muted);
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cgx-elite-teaser__save {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cgx-elite-gold-l);
	color: var(--cgx-elite-gold);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

/* A variable product gets the badge alone - see the comment in
   cgx_elite_price_teaser(), a saving quoted off the bottom of a price
   range is a number the shopper cannot verify. */
.cgx-elite-teaser--range .cgx-elite-teaser__tag {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cgx-elite-gold-l);
	color: var(--cgx-elite-gold);
	font-size: 11.5px;
	font-weight: 700;
}

/* On a single product page the buy box has room for a larger figure. */
.single-product .cgx-elite-teaser {
	font-size: 15px;
	gap: 8px;
}

.single-product .cgx-elite-teaser__save {
	font-size: 12.5px;
}

/* ------------------------------------------------------------------
   2 - CART / CHECKOUT BANNER
   ------------------------------------------------------------------ */

/* The block-cart slot. Empty for a cart the banner has nothing to say
   about, and it must not leave a gap when it is. */
.cgx-elite-slot:empty { display: none; }

.cgx-elite-slot {
	max-width: 100%;
	margin: 0 0 6px;
}

.cgx-elite-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 22px;
	padding: 16px 20px;
	border: 1px solid var(--cgx-elite-line);
	border-radius: var(--cgx-elite-radius);
	background: #fff;
	box-sizing: border-box;
}

.cgx-elite-bar * {
	box-sizing: border-box;
}

.cgx-elite-bar__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cgx-elite-bar__lead {
	margin: 0;
	color: var(--cgx-elite-ink);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
}

.cgx-elite-bar__lead b {
	font-weight: 800;
}

.cgx-elite-bar__sub {
	margin: 4px 0 0;
	color: var(--cgx-elite-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.cgx-elite-bar__lead .amount,
.cgx-elite-bar__sub .amount,
.cgx-elite-bar__lead bdi,
.cgx-elite-bar__sub bdi {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* --- guest variant --- */

.cgx-elite-bar--upsell {
	border-color: rgba(184, 137, 43, .38);
	background: var(--cgx-elite-gold-l);
}

.cgx-elite-bar--upsell .cgx-elite-bar__lead b {
	color: var(--cgx-elite-gold);
}

.cgx-elite-bar__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	border-radius: 8px;
	background: var(--cgx-elite-ink);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.cgx-elite-bar__cta:hover,
.cgx-elite-bar__cta:focus {
	background: var(--cgx-elite-gold);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.cgx-elite-bar__cta:focus-visible {
	outline: 2px solid var(--cgx-elite-gold);
	outline-offset: 3px;
}

/* --- member variant --- */

.cgx-elite-bar--ship {
	display: block;
	border-color: rgba(30, 127, 82, .30);
	background: var(--cgx-elite-go-l);
}

.cgx-elite-bar--ship.is-complete .cgx-elite-bar__lead {
	color: var(--cgx-elite-go);
}

/* ------------------------------------------------------------------
   3 - PROGRESS METER

   A real element with an inline width, not a background-position trick,
   so the bar is readable by a screen reader through role="progressbar"
   on the parent and degrades to a plain filled box with CSS off.
   ------------------------------------------------------------------ */

.cgx-elite-meter {
	position: relative;
	height: 8px;
	margin-top: 12px;
	border-radius: 999px;
	background: rgba(30, 127, 82, .14);
	overflow: hidden;
}

.cgx-elite-meter > span {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 999px;
	background: var(--cgx-elite-go);
	transition: width .4s ease;
}

/* $now on the left, the threshold on the right: a bar with no scale
   shows progress but not distance, and the distance is the message. */
.cgx-elite-meter__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--cgx-elite-muted);
	font-size: 12px;
	font-weight: 600;
}

.cgx-elite-meter__scale .amount,
.cgx-elite-meter__scale bdi {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.cgx-elite-bar--ship.is-complete .cgx-elite-meter__scale { color: var(--cgx-elite-go); }

/* ------------------------------------------------------------------
   4 - CHECKOUT TERMS TICK

   Deliberately plain and deliberately not pre-ticked. This block is the
   evidence in a chargeback, and a consent control styled to be easy to
   miss is worth less than no control at all.
   ------------------------------------------------------------------ */

.cgx-elite-terms {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--cgx-elite-line);
	border-radius: 10px;
	background: #FAFBFC;
}

.cgx-elite-terms label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--cgx-elite-ink);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.65;
	cursor: pointer;
}

.cgx-elite-terms input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--cgx-elite-gold);
	cursor: pointer;
}

.cgx-elite-terms a {
	color: var(--cgx-elite-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   4b - ELITE BUNDLE LOCK

   Sits where the add-to-cart form would be on a bundle page that the
   visitor cannot buy. Framed, not greyed out: this is an invitation, and
   a disabled-looking block reads as "sold out".
   ------------------------------------------------------------------ */

.cgx-elite-lock {
	margin: 18px 0 22px;
	padding: 20px 22px;
	border: 1px solid rgba(184, 137, 43, .40);
	border-radius: var(--cgx-elite-radius);
	background: var(--cgx-elite-gold-l);
}

.cgx-elite-lock__h {
	margin: 0 0 6px;
	color: var(--cgx-elite-gold);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cgx-elite-lock__p {
	margin: 0 0 16px;
	color: var(--cgx-elite-ink);
	font-size: 15px;
	line-height: 1.55;
}

.cgx-elite-lock__p .amount,
.cgx-elite-lock__p bdi { color: inherit; font-size: inherit; font-weight: inherit; }

.cgx-elite-lock__cta {
	display: inline-flex;
	align-items: center;
	padding: 13px 24px;
	border-radius: 9px;
	background: var(--cgx-elite-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease;
}

.cgx-elite-lock__cta:hover,
.cgx-elite-lock__cta:focus {
	background: var(--cgx-elite-gold);
	color: #fff;
	text-decoration: none;
}

/* Member version: one quiet confirmation line, the buy form does the rest. */
.cgx-elite-lock--open {
	padding: 11px 16px;
	border-color: rgba(30, 127, 82, .28);
	background: var(--cgx-elite-go-l);
	color: var(--cgx-elite-go);
	font-size: 13.5px;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   5 - RESPONSIVE
   ------------------------------------------------------------------ */

@media (max-width: 720px) {

	.cgx-elite-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 14px 16px;
	}

	.cgx-elite-bar__lead  { font-size: 14.5px; }
	.cgx-elite-bar__sub   { font-size: 12.5px; }

	.cgx-elite-bar__cta,
	.cgx-elite-lock__cta {
		justify-content: center;
		width: 100%;
	}

	.cgx-elite-teaser {
		font-size: 12.5px;
		gap: 5px;
	}

	.single-product .cgx-elite-teaser { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {

	.cgx-elite-bar__cta,
	.cgx-elite-meter > span { transition: none; }

	.cgx-elite-bar__cta:hover { transform: none; }
}

/* ------------------------------------------------------------------
   6 - DARK MODE

   Only if the theme actually declares support. Left narrow on purpose:
   guessing at a dark palette the rest of the site does not have
   produces one banner that does not match anything around it.
   ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {

	.cgx-elite-bar[data-cgx-dark="1"] {
		background: #151A21;
		border-color: rgba(255, 255, 255, .12);
	}

	.cgx-elite-bar[data-cgx-dark="1"] .cgx-elite-bar__lead { color: #fff; }
	.cgx-elite-bar[data-cgx-dark="1"] .cgx-elite-bar__sub  { color: rgba(255, 255, 255, .66); }
}