/*
 * Wallex Coin Chart Cards – frontend styles
 *
 * Horizontal slider of flip cards (RTL). The front shows price + chart + stats;
 * clicking flips to a back face with copy and a CTA. Colors resolve from the
 * Wallex theme CSS variables where present, and fall back to a self-contained
 * dark palette so the widget looks correct outside the theme too.
 */

.wallex-ccc-wrap {
	box-sizing: border-box;
	width: 100%;
	direction: rtl;
}

.wallex-ccc-wrap *,
.wallex-ccc-wrap *::before,
.wallex-ccc-wrap *::after {
	box-sizing: border-box;
}

.wallex-ccc {
	--wallex-ccc-up: #22c493;
	--wallex-ccc-down: #e5484d;
	--wallex-ccc-gap: 18px;
	--wallex-ccc-card-min: 272px;
	--wallex-ccc-peek: 34px;

	/*
	 * The template sets the three per-device counts inline. The resolved
	 * --wallex-ccc-per-view is computed here (not inline) so the media queries
	 * below can override it — an inline value would outrank them and pin the
	 * slider to the desktop count at every breakpoint.
	 */
	--wallex-ccc-per-view-desktop: 3;
	--wallex-ccc-per-view-tablet: 2;
	--wallex-ccc-per-view-mobile: 1;
	--wallex-ccc-per-view: var(--wallex-ccc-per-view-desktop);

	/*
	 * Viewport width used by the slide sizing math. The JS measures the real
	 * viewport element and sets --wallex-ccc-vpw in pixels; 100cqw is only the
	 * pre-JS fallback, because container-query units can resolve against the
	 * wrong box inside Elementor's nested flex layouts.
	 */
	--wallex-ccc-vp: var(--wallex-ccc-vpw, 100cqw);

	position: relative;
	width: 100%;
}

/* -------------------------------- Switcher -------------------------------- */
.wallex-ccc__switcher {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: var(--color-bg-2, #1c1f2a);
	border-radius: var(--cornerRadiusFull, 999px);
}

.wallex-ccc__quote {
	padding: 6px 20px;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--color-text-3, rgba(255, 255, 255, 0.45));
	background: transparent;
	border: 0;
	border-radius: var(--cornerRadiusFull, 999px);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.wallex-ccc__quote:hover {
	color: var(--color-text-1, #ffffff);
}

.wallex-ccc__quote.is-active {
	color: var(--color-text-1, #ffffff);
	background: var(--color-bg-3, #333846);
}

/* --------------------------------- Badge ---------------------------------- */
.wallex-ccc__badge-row {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.wallex-ccc__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--color-text-1, #ffffff);
	background: var(--color-bg-2, #1c1f2a);
	border-radius: var(--cornerRadiusFull, 999px);
}

/* -------------------------------- Slider ---------------------------------- */

/*
 * The active card sits in the middle of the viewport with its neighbours
 * peeking in on both sides. Slide width is derived from the per-view count,
 * minus a peek allowance on each edge so neighbours stay visible even at
 * per-view 1. The width is clamped between the card minimum and the space the
 * viewport actually has: on a viewport narrower than the 272px minimum the
 * available space wins, so the card shrinks with the screen instead of
 * overflowing or collapsing.
 */
.wallex-ccc__viewport {
	overflow: hidden;
	width: 100%;

	/*
	 * Establishes the sizing context for the slides. The track is max-content
	 * (so it can overflow and be translated), which makes a percentage width on
	 * a slide resolve circularly — cqw measures the viewport element instead,
	 * which is the box we actually want to divide into cards. The JS replaces
	 * cqw with a measured pixel value (--wallex-ccc-vpw) as soon as it runs.
	 */
	container-type: inline-size;
	container-name: wallex-ccc-viewport;

	/* Horizontal drags belong to the slider; vertical swipes keep scrolling the page. */
	touch-action: pan-y;
	cursor: grab;
}

.wallex-ccc.is-dragging .wallex-ccc__viewport {
	cursor: grabbing;
}

/* While a drag is live the track must follow the finger 1:1, not animate. */
.wallex-ccc.is-dragging {
	user-select: none;
	-webkit-user-select: none;
}

.wallex-ccc.is-dragging .wallex-ccc__track {
	transition: none;
}

/* A native image ghost-drag would hijack the pointer gesture on desktop. */
.wallex-ccc__viewport img {
	-webkit-user-drag: none;
	user-drag: none;
}

.wallex-ccc__track {
	display: flex;

	/*
	 * max-content keeps the track as wide as its slides combined. Without it the
	 * flex container is capped at the viewport width and squeezes the slides to
	 * fit, which both breaks the 272px minimum and leaves nothing to scroll —
	 * the centring translate then has no room to move anything.
	 */
	width: max-content;
	gap: var(--wallex-ccc-gap);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/*
 * Applied for a single frame while the loop jumps from a clone to the real card
 * it duplicates. Killing the transition is what makes the seam invisible: the
 * translation changes but nothing animates, so the card under the cursor
 * appears not to move at all.
 */
.wallex-ccc.is-snapping .wallex-ccc__track {
	transition: none;
}

.wallex-ccc.is-snapping .wallex-ccc__slide {
	transition: none;
}

/*
 * The centred card is fully opaque; the previous/next cards are faded and
 * scaled back slightly so the active one reads as the focus. Anything further
 * out fades harder — it is only ever partially in view.
 */
.wallex-ccc__slide {
	/*
	 * flex-shrink must be 0: `flex: 0 0 auto` alone still lets a flex item
	 * shrink below its width when the line overflows.
	 */
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;

	/*
	 * Ideal width divides the viewport into per-view cards; the card minimum
	 * raises it back up when that comes out cramped; the outer min() caps the
	 * result at the space the viewport actually has, so on screens narrower
	 * than the minimum the card tracks the screen instead of overflowing.
	 */
	width: min(calc(var(--wallex-ccc-vp) - 2 * var(--wallex-ccc-peek)),
			max(var(--wallex-ccc-card-min),
				calc((var(--wallex-ccc-vp) - 2 * var(--wallex-ccc-peek) - (var(--wallex-ccc-per-view) - 1) * var(--wallex-ccc-gap)) / var(--wallex-ccc-per-view))));
	opacity: 0.28;
	transform: scale(0.94);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.wallex-ccc__slide.is-adjacent {
	opacity: 0.15;
	transform: scale(0.96);
}

.wallex-ccc__slide.is-active {
	opacity: 1;
	transform: scale(1);
}

/* ---------------------------------- Card ---------------------------------- */
.wallex-ccc__card {
	position: relative;
	height: 420px;
	perspective: 1600px;
}

.wallex-ccc__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	transform-style: preserve-3d;
}

.wallex-ccc__card.is-flipped .wallex-ccc__inner {
	transform: rotateY(180deg);
}

.wallex-ccc__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 22px 20px;
	background: var(--color-bg, #12141c);
	border: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.06));
	border-radius: var(--cornerRadiusXL, 20px);
	overflow: hidden;

	/* Safari needs the prefixed property to hide the reverse face. */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wallex-ccc__face--back {
	transform: rotateY(180deg);
	align-items: center;
	text-align: center;
}

/* ------------------------------- Card head -------------------------------- */
.wallex-ccc__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
}

.wallex-ccc__head-start {
	min-width: 0;
	display: flex;
	flex-direction: row;
	gap: 8px;

}

.wallex-ccc__price {
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	color: var(--color-text-1, #ffffff);
	direction: ltr;
	text-align: start;
	unicode-bidi: plaintext;
}

.wallex-ccc__change {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	direction: ltr;
	text-align: start;
	unicode-bidi: plaintext;
}

.wallex-ccc__card.is-up .wallex-ccc__change {
	color: var(--wallex-ccc-up);
}

.wallex-ccc__card.is-down .wallex-ccc__change {
	color: var(--wallex-ccc-down);
}

.wallex-ccc__head-end {
	display: flex;
	align-items: flex-end;
	min-width: 0;
	flex-direction: column;
}

.wallex-ccc__coin-text {
	min-width: 0;
	text-align: end;
}

.wallex-ccc__coin-name {
	text-align: right;
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	color: var(--color-text-1, #ffffff);
	overflow-wrap: anywhere;
}

.wallex-ccc__coin-symbol {
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text-3, rgba(255, 255, 255, 0.45));
	direction: ltr;
	unicode-bidi: plaintext;
}

.wallex-ccc__coin-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	object-fit: contain;
	border-radius: 50%;
}

.wallex-ccc__coin-icon--empty {
	display: inline-block;
	background: var(--color-stroke-2, rgba(255, 255, 255, 0.06));
}

/* --------------------------------- Chart ---------------------------------- */
.wallex-ccc__chart {
	position: relative;
	flex: 1 1 auto;
	min-height: 120px;
	margin: 14px -20px 0;
}

/*
 * Recharts renders into this container. Until it mounts (or if JS fails) the
 * fallback keeps the card's vertical rhythm instead of collapsing.
 */
.wallex-ccc__chart-fallback {
	position: absolute;
	inset: 0;
}

.wallex-ccc__chart .recharts-wrapper {
	direction: ltr;
}

.wallex-ccc__chart.is-loading {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

/* --------------------------------- Stats ---------------------------------- */
.wallex-ccc__stats {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding-top: 16px;
}

.wallex-ccc__stat {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

/* Divider between the two stats. */
.wallex-ccc__stat+.wallex-ccc__stat {
	border-inline-end: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.08));
	order: -1;
	padding-inline-end: 12px;
}

.wallex-ccc__stat-label {
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--color-text-3, rgba(255, 255, 255, 0.45));
}

.wallex-ccc__stat-value {
	margin-top: 6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-text-1, #ffffff);
	unicode-bidi: plaintext;
}

.wallex-ccc__stat-unit {
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--color-text-3, rgba(255, 255, 255, 0.45));
}

/* ------------------------------- Timeframes ------------------------------- */
.wallex-ccc__timeframes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	padding-top: 16px;
}

.wallex-ccc__tf {
	padding: 7px 16px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-text-3, rgba(255, 255, 255, 0.45));
	background: transparent;
	border: 0;
	border-radius: var(--cornerRadiusFull, 999px);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.wallex-ccc__tf:hover {
	color: var(--color-text-1, #ffffff);
}

.wallex-ccc__tf.is-active {
	color: var(--color-text-1, #ffffff);
	background: var(--color-bg-2, #262a36);
}

/* ------------------------------ Flip buttons ------------------------------ */
.wallex-ccc__flip-btn,
.wallex-ccc__flip-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	font-size: 1rem;
	color: var(--color-text-2, rgba(255, 255, 255, 0.7));
	background: transparent;
	border: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.12));
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.wallex-ccc__flip-btn {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 20px;
	opacity: 0;
	pointer-events: none;
}

.wallex-ccc__flip-btn:hover,
.wallex-ccc__flip-back:hover {
	color: var(--color-text-1, #ffffff);
	background: var(--color-bg-2, rgba(255, 255, 255, 0.08));
}

/* --------------------------------- Back ----------------------------------- */
.wallex-ccc__back-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.wallex-ccc__back-icon {
	width: 54px;
	height: 54px;
	object-fit: contain;
	border-radius: 50%;
}

.wallex-ccc__back-name {
	margin-top: 8px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text-1, #ffffff);
}

.wallex-ccc__back-symbol {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--color-text-3, rgba(255, 255, 255, 0.45));
	direction: ltr;
	unicode-bidi: plaintext;
}

.wallex-ccc__back-title {
	width: 100%;
	text-align: right;
	margin-top: 18px;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-text-1, #ffffff);
	flex: 0 0 auto;
}

.wallex-ccc__back-text {
	margin: 12px 0 0;
	font-size: 0.84rem;
	font-weight: 400;
	line-height: 2;
	color: var(--color-text-3, rgba(255, 255, 255, 0.55));
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-wrap: anywhere;
	text-align: justify;
	padding-left: 10px;
}

.wallex-ccc__back-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	flex: 0 0 auto;
	padding-top: 16px;
	justify-content: space-between;
}

.wallex-ccc__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text-inverse, #ffffff);
	text-decoration: none;
	background: var(--color-primary, #1273ea);
	border-radius: var(--cornerRadiusFull, 999px);
	transition: filter 0.2s ease;
	max-height: 40px;
	overflow: hidden;
}

.wallex-ccc__btn:hover,
.wallex-ccc__btn:focus-visible {
	filter: brightness(1.08);
	color: var(--color-text-inverse, #ffffff);
}

.wallex-ccc__btn-label {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Marquee mode — applied by JS when the label is wider than the button.
 * The shift distance and duration are measured per button and published as
 * custom properties; the button's own overflow:hidden does the clipping.
 */
.wallex-ccc__btn.is-marquee {
	justify-content: flex-start;
}

.wallex-ccc__btn.is-marquee .wallex-ccc__btn-label {
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	animation: wallex-ccc-btn-marquee var(--wallex-ccc-marquee-duration, 6s) ease-in-out infinite alternate;
}

.wallex-ccc__btn.is-marquee:hover .wallex-ccc__btn-label {
	animation-play-state: paused;
}

@keyframes wallex-ccc-btn-marquee {

	0%,
	15% {
		transform: translateX(0);
	}

	85%,
	100% {
		transform: translateX(var(--wallex-ccc-marquee-shift, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wallex-ccc__btn.is-marquee .wallex-ccc__btn-label {
		animation: none;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---------------------------------- Dots ---------------------------------- */
.wallex-ccc__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 18px;
}

.wallex-ccc__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	background: var(--color-stroke-2, rgba(255, 255, 255, 0.2));
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.wallex-ccc__dot.is-active {
	width: 20px;
	border-radius: var(--cornerRadiusFull, 999px);
	background: var(--color-text-1, #ffffff);
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 1024px) {
	.wallex-ccc {
		--wallex-ccc-per-view: var(--wallex-ccc-per-view-tablet);
	}
}

@media (max-width: 767px) {
	.wallex-ccc {
		--wallex-ccc-per-view: var(--wallex-ccc-per-view-mobile);
		--wallex-ccc-gap: 12px;
		--wallex-ccc-peek: 26px;
	}

	.wallex-ccc__face {
		padding: 18px 16px;
	}

	.wallex-ccc__chart {
		margin-inline: -16px;
	}

	.wallex-ccc__price {
		font-size: 1.15rem;
	}
}

/* ------------------------------ Accessibility ----------------------------- */
@media (prefers-reduced-motion: reduce) {

	.wallex-ccc__track,
	.wallex-ccc__inner {
		transition: none;
	}
}