/*
 * potensic-core/assets/css/loyalty.css
 *
 * Credits programme: the /earn-potensic-credits/ landing page (a 1:1 rebuild of
 * the Joy Loyalty blocks — class names kept so the two can be diffed) and the
 * floating launcher + panel.
 *
 * Measurements come from absorb/pages/_pages_joy-loyalty-page/screenshots and
 * the block settings captured in the page HTML:
 *   hero 450px · heading 5.2rem (How it Works) / 4rem (other sections)
 *   cards radius 12px · earn grid 4 cols / redeem grid 3 cols, max-width 100rem
 *   earn背景 linear-gradient(46deg,#d4e7ff 13%,#f1fef9 86%) · redeem card #f6f6f6
 * The theme sets html{font-size:62.5%}, so 1rem = 10px here as well.
 */

/*
 * Tokens live on :root because the programme renders in three places — the
 * landing page (.Joy-Page), the member strip injected into the landing recipe
 * (.ls-loyalty-status) and the floating panel — and none of them nests inside
 * the others.
 */
:root {
	--joy-blue: #00adef;
	--joy-ink: #000;
	--joy-muted: #303030;
	--joy-points: #4a4a4a;
	--joy-card-radius: 12px;
	--joy-max: 100rem;
}

.Joy-Page {
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--joy-ink);
}

.Joy-Page * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ hero */

.Joy-Hero-Banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 450px;
	padding: 0 var(--gutter, 20px);
	background-color: #f6f6f6;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

.Joy-Hero-Banner_Overlay {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
}

.Joy-Hero-Banner_Content {
	position: relative;
	max-width: 90rem;
}

.Joy-Hero-Banner_Title {
	margin: 0;
	color: #fff;
	font-size: 5.2rem;
	font-weight: 700;
	line-height: 1.5;
}

.Joy-Hero-Banner_Descriptions {
	margin: 16px 0;
	color: #fff;
	font-size: 1.6rem;
}

.Joy-Hero-Banner_ActionGroup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 24px;
}

.Joy-Hero-Banner_ActionGroup--item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: 11px 32px;
	border: 0;
	border-radius: 12px;
	background: var(--joy-blue);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 400;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.Joy-Hero-Banner_ActionGroup--item:hover {
	opacity: 0.9;
	color: #fff;
}

.Joy-Hero-Banner_ActionGroup--item.signup {
	background: #fff;
	color: #000;
}

.Joy-Hero-Banner_ActionGroup--item.signup:hover {
	color: #000;
}

/* --------------------------------------------------------- shared blocks */

.Avada-Joy__Block {
	padding: 64px var(--gutter, 20px);
}

.Joy-Blocks__Heading {
	max-width: var(--joy-max);
	margin: 0 auto;
	color: var(--joy-ink);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.Joy-Blocks__Heading--lg {
	font-size: 5.2rem;
}

.Joy-Blocks__SubTitle {
	max-width: 70rem;
	margin: 16px auto 0;
	color: var(--joy-ink);
	font-size: 1.4rem;
	text-align: center;
}

/* ---------------------------------------------------------- how it works */

.Joy-Work {
	background: #f6f6f6;
}

.Joy-Work__Container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: var(--joy-max);
	margin: 20px auto 0;
	padding: 0 3.6rem;
}

.Joy-Work__Item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 20px;
	text-align: center;
}

.Joy-Work__Item-Icon svg {
	width: 52px;
	height: 52px;
}

.Joy-Work__Item-Title {
	margin: 4px 0 0;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.Joy-Work__Item-SubTitle {
	max-width: 24rem;
	margin: 0;
	color: var(--joy-ink);
	font-size: 1.3rem;
}

/* ------------------------------------------------------------ ways to earn */

.Joy__Way-To-Earn {
	background: linear-gradient(46deg, #d4e7ff 13%, #f1fef9 86%);
}

.Joy__Way-To-Earn--Summary {
	margin-top: 32px;
}

.Joy__Way-To-Earn--Summary .Joy-Blocks__SubTitle {
	color: var(--joy-muted);
}

.Joy-WayEarn__List {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: var(--joy-max);
	margin: 24px auto 0;
}

.Joy-WayEarn__Item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: var(--joy-card-radius);
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.Joy-WayEarn__Item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.Joy-WayEarn__Item.is-hidden,
.Joy-Redeem__Item.is-hidden {
	display: none;
}

.Joy-Earn__Item-Icon svg {
	width: 40px;
	height: 40px;
}

.Joy-Earn__Item-Text {
	margin-top: auto;
}

.Joy-Earn__Item-Title {
	margin: 0 0 4px;
	color: var(--joy-ink);
	font-size: 1.4rem;
	font-weight: 700;
}

.Joy-Earn__Item-SubTitle {
	margin: 0;
	color: var(--joy-points);
	font-size: 1.3rem;
}

.Joy-Earn__Item-Action,
.Joy-Redeem__DirectButton {
	margin-top: 10px;
	padding: 6px 16px;
	border: 1px solid var(--joy-blue);
	border-radius: 999px;
	background: none;
	color: var(--joy-blue);
	font-size: 1.3rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.Joy-Earn__Item-Action:hover:not([disabled]),
.Joy-Redeem__DirectButton:hover:not([disabled]) {
	background: var(--joy-blue);
	color: #fff;
}

.Joy-Earn__Item-Action[disabled],
.Joy-Redeem__DirectButton[disabled] {
	opacity: 0.4;
	cursor: default;
}

.Joy-Earn__Item-Done {
	display: inline-block;
	margin-top: 10px;
	color: #0da44a;
	font-size: 1.3rem;
}

/* ---------------------------------------------------------- ways to redeem */

.Joy__Way-To-Redeem {
	background: #fff;
}

.Joy-WayRedeem__List {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: var(--joy-max);
	margin: 32px auto 0;
}

.Joy-Redeem__Item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px;
	border-radius: var(--joy-card-radius);
	background: #f6f6f6;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.Joy-Redeem__Item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.Joy-Redeem__Item-Icon svg {
	width: 40px;
	height: 40px;
}

.Joy-Redeem__Item-Title {
	margin: 0;
	color: var(--joy-ink);
	font-size: 1.4rem;
	font-weight: 700;
}

.Joy-Way-To-Redeem__Item-SubTitle {
	margin: 4px 0 0;
	color: var(--joy-muted);
	font-size: 1.3rem;
}

/* ------------------------------------------------------------- show more */

.Joy-WayEarn__ShowMore,
.Joy-WayRedeem__ShowMore {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.Joy-ShowMore {
	padding: 8px 24px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	background: #fff;
	font-size: 1.4rem;
	cursor: pointer;
}

.Joy-ShowMore:hover {
	border-color: var(--joy-blue);
	color: var(--joy-blue);
}

/* ------------------------------------------------------------------- FAQ */

.Joy-FAQ {
	background: #f6f6f6;
}

.Joy__Question-List {
	max-width: var(--joy-max);
	margin: 0 auto;
	padding: 0 3.6rem;
}

.Joy-FAQ__Container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 32px;
}

.Joy-FAQ__Row {
	border-radius: var(--joy-card-radius);
	background: #fff;
}

.Joy-FAQ__Question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-radius: var(--joy-card-radius);
	color: var(--joy-ink);
	font-size: 1.6rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.Joy-FAQ__Question::-webkit-details-marker {
	display: none;
}

.Joy-FAQ__Plus {
	display: flex;
	flex: 0 0 auto;
	color: rgba(0, 0, 0, 0.6);
	transition: transform 0.2s ease;
}

.Joy-FAQ__Row[open] .Joy-FAQ__Plus {
	transform: rotate(90deg);
}

.Joy-FAQ__Answers {
	padding: 0 20px 20px;
	color: var(--joy-muted);
	font-size: 1.4rem;
}

.Joy-FAQ__Answers p {
	margin: 0;
}

/* ----------------------------------------------------------------- toast */

.Joy-Page__toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	z-index: 1000;
	min-width: 280px;
	max-width: 300px;
	margin: 0;
	padding: 8px 12px;
	border-radius: 4px;
	background: #333;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	transform: translate(-50%, 30px);
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.Joy-Page__toast.show {
	transform: translate(-50%, 0);
	opacity: 1;
}

/* ------------------------------------------------------- responsive page */

@media (max-width: 1023.98px) {
	.Joy-WayEarn__List {
		grid-template-columns: repeat(2, 1fr);
	}

	.Joy-WayRedeem__List {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767.98px) {
	.Joy-Hero-Banner {
		height: 360px;
	}

	.Joy-Hero-Banner_Title {
		font-size: 3.2rem;
	}

	.Joy-Hero-Banner_ActionGroup {
		gap: 12px;
	}

	.Joy-Hero-Banner_ActionGroup--item {
		min-width: 150px;
	}

	.Avada-Joy__Block {
		padding: 40px var(--gutter, 20px);
	}

	.Joy-Blocks__Heading {
		font-size: 3.2rem;
	}

	.Joy-Blocks__Heading--lg {
		font-size: 3.6rem;
	}

	.Joy-Work__Container {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.Joy-WayEarn__List,
	.Joy-WayRedeem__List {
		grid-template-columns: 1fr;
	}

	.Joy__Question-List {
		padding: 0;
	}
}

/* ============================================================== launcher */

.Avada-Joy_ButtonWidget {
	position: fixed;
	/* compare.js publishes --compare-bar-height while the floating compare bar
	   is on screen, so the launcher steps out of its way. */
	bottom: calc(24px + var(--compare-bar-height, 0px));
	left: 24px;
	transition: bottom 0.3s ease;
	/* Matches the source widget (.Avada-Joy_ButtonWidget:not(.admin){z-index:9999999}). */
	z-index: 9999999;
	font-size: 1.4rem;
}

.Avada-Joy_ButtonWidget.right {
	right: 24px;
	left: auto;
}

/* The source widget keeps the launcher above everything, which would leave it
   sitting on top of the filter/cart/search drawers. Step it out of the way
   while one of those overlays owns the screen — no change to the static page. */
body.overlay-drawer .Avada-Joy_ButtonWidget,
body.overlay-cart-drawer .Avada-Joy_ButtonWidget,
body.overlay-predictive-search .Avada-Joy_ButtonWidget,
body.fixed .Avada-Joy_ButtonWidget {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Geometry ported from the source launcher (Avada Joy):
   .AvadaJoy-Launcher__Button--icon_and_label{padding:16px;height:48px;
   border-radius:24px;min-width:48px}, and
   .AvadaJoy-Launcher__Button{box-shadow:0 6px 12px 0 rgba(0,0,0,.251)}.

   The source ships with the label collapsed — `.launcher-label-wrapper`
   is `max-width:0;opacity:0;visibility:hidden` in the resting
   (`launcher-open`) state — so what is actually on screen is a plain
   icon-only circle. Measured on every absorbed capture (_home,
   _collections_drones, _products_atom-2, _blogs_news computed.json and a
   pixel scan of absorb-viewports/pages/_home/screenshots/full-1440.png):
   48 x 48 at left:24 / bottom:24, border-radius 24px, background #009BDF,
   icon box 20 x 22. The 118 x 40 "Rewards" pill we used to draw was wider
   than the source and overlapped the collection price slider and the blog
   cards, so the label is gone from the markup — the button keeps its
   accessible name through aria-label/title. */
.Avada-Joy_FloatingButtonTrigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 48px;
	max-width: 48px;
	padding: 16px;
	border: 0;
	border-radius: 24px;
	background: var(--joy-launcher-color, #009bdf);
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2509803922);
	color: #fff;
	font-family: inherit;
	font-size: 1.4rem;
	line-height: normal;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
}

.Avada-Joy_FloatingButtonTrigger__icon {
	display: flex;
	flex: none;
}

/* The source SVG carries style="margin:-4px 0 0 -2px", which is what makes the
   icon column 20px wide instead of 22px. */
.Avada-Joy_FloatingButtonTrigger__icon svg {
	display: block;
	margin: -4px 0 0 -2px;
}

.Avada-Preview_Popup {
	position: fixed;
	bottom: calc(24px + var(--compare-bar-height, 0px));
	left: 24px;
	z-index: 851;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 80vh;
	max-height: 640px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
	overflow: hidden;
}

.Avada-Preview_Popup[hidden] {
	display: none;
}

.Avada-Preview_Popup__header {
	position: relative;
	padding: 24px 20px;
	background: linear-gradient(135deg, #00a0e9 0%, #5bc5f2 100%);
	color: #fff;
}

.Avada-Preview_Popup__eyebrow {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 700;
}

.Avada-Preview_Popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.Avada-Preview_Popup__balance {
	margin-top: 12px;
	font-size: 1.4rem;
}

.Avada-Preview_Popup__balance-value {
	font-size: 2.8rem;
	font-weight: 700;
}

.Avada-Preview_Popup__body {
	flex: 1 1 auto;
	padding: 16px 20px;
	overflow-y: auto;
}

.Avada-Preview_Popup__footer {
	padding: 12px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 1.3rem;
	text-align: center;
}

.Joy-Card {
	padding: 20px;
	border-radius: 12px;
	background: #f6f6f6;
	text-align: center;
}

.Joy-Card__title {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 700;
}

.Joy-Card__text {
	margin: 0 0 12px;
	color: #4a4a4a;
	font-size: 1.3rem;
}

.Joy-Card__signin {
	margin: 12px 0 0;
	font-size: 1.3rem;
}

.Joy-Member {
	padding: 12px 0;
	text-align: center;
}

.Joy-Member__message,
.Joy-Account__message {
	margin: 8px 0 0;
	color: #1a66d2;
	font-size: 1.3rem;
}

.Joy-Section {
	margin-top: 20px;
}

.Joy-Section__title {
	margin: 0 0 8px;
	color: #4a4a4a;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.Joy-Section__count {
	color: rgba(0, 0, 0, 0.4);
	font-weight: 400;
}

.Joy-Section__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.Joy-Section__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 1.3rem;
}

.Joy-Section__list li:last-child {
	border-bottom: 0;
}

.Joy-Section__list .Joy-Section__item-title {
	font-weight: 700;
}

.Joy-Section__list .Joy-Section__item-sub {
	display: block;
	color: #4a4a4a;
	font-weight: 400;
}

.Joy-Section__list button {
	flex: 0 0 auto;
	padding: 5px 14px;
	border: 1px solid var(--joy-launcher-color, #009bdf);
	border-radius: 999px;
	background: none;
	color: var(--joy-launcher-color, #009bdf);
	font-size: 1.2rem;
	cursor: pointer;
}

.Joy-Section__list button[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* -------------------------------------------------------- account screen */

.Joy-Account {
	display: grid;
	gap: 28px;
	max-width: 42rem;
}

.Joy-Account__balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.Joy-Account__balance-value {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
}

.Joy-Account__balance-label {
	font-size: 1.6rem;
	color: var(--joy-points, #4a4a4a);
}

.Joy-Account h3 {
	margin: 0 0 12px;
	font-size: 1.8rem;
	font-weight: 700;
}

.Joy-Account > p {
	margin: 0;
}

.Joy-Referral {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.Joy-Referral__input {
	flex: 1 1 220px;
	min-width: 0;
	width: auto;
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	font-size: 1.4rem;
	background: #fafafa;
}

.Joy-Account__table {
	width: 100%;
	border-collapse: collapse;
}

.Joy-Account__table th,
.Joy-Account__table td {
	padding: 12px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	text-align: start;
	font-size: 1.4rem;
}

.Joy-Account__table td.is-negative {
	color: #b40c1c;
}

.Joy-Account__table td.is-positive {
	color: #2c7e3f;
}

@media (max-width: 599.98px) {
	.Avada-Preview_Popup {
		right: 8px;
		left: 8px;
		width: auto;
		height: 80vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.Joy-WayEarn__Item,
	.Joy-Redeem__Item,
	.Joy-Page__toast {
		transition: none;
	}
}

/* ------------------------------------------- member strip (landing pages) */
/*
 * Injected into the landing recipe of /earn-potensic-credits/ by
 * includes/loyalty.php as the "loyalty-status" section type. It only renders
 * for signed-in members, so the anonymous page stays 1:1 with the capture.
 * `.ls`/`.ls__inner` come from the theme's pages.css (landing sections).
 */

.ls-loyalty-status .Joy-Status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 20px 24px;
	border-radius: 12px;
	background: #f6f6f6;
}

.ls-loyalty-status .Joy-Status__balance {
	margin: 0;
	line-height: 1.1;
}

.ls-loyalty-status .Joy-Status__value {
	font-size: 3.2rem;
	font-weight: 700;
}

.ls-loyalty-status .Joy-Status__label {
	margin-inline-start: 6px;
	color: #4a4a4a;
	font-size: 1.4rem;
}

.ls-loyalty-status .Joy-Status__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-inline-start: auto;
}

.ls-loyalty-status .Joy-Status__link {
	color: #00adef;
	font-size: 1.4rem;
}

.ls-loyalty-status .Joy-Status__message {
	flex: 1 0 100%;
	margin: 0;
	color: #1a66d2;
	font-size: 1.3rem;
}

.ls-loyalty-status .Joy-Status__message:empty {
	display: none;
}

.ls-loyalty-status .Joy-Status__group {
	margin-top: 24px;
}

.ls-loyalty-status .Joy-Status__group-title {
	margin: 0 0 12px;
	font-size: 1.4rem;
	font-weight: 700;
}

.ls-loyalty-status .Joy-Status__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-loyalty-status .Joy-Status__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background: #fff;
	font-size: 1.3rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ls-loyalty-status .Joy-Status__chip span {
	color: #4a4a4a;
}

.ls-loyalty-status .Joy-Status__chip:hover:not([disabled]) {
	border-color: #00adef;
	color: #00adef;
}

.ls-loyalty-status .Joy-Status__chip[disabled] {
	opacity: 0.4;
	cursor: default;
}

@media (max-width: 599.98px) {
	.ls-loyalty-status .Joy-Status__actions {
		width: 100%;
		margin-inline-start: 0;
	}
}