/* ==========================================================================
   pricing.css — "Simple, transparent Pricing" (Figma-matched)
   ========================================================================== */

.ada-pricing {
	background: var(--ada-bg);
	padding: clamp( 48px, 8vw, 96px ) clamp( 16px, 8vw, 108px );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.ada-pricing__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-width: 808px;
}

.ada-pricing__title {
	margin: 0;
	font-family: var(--ada-font-display);
	font-weight: 550;
	font-size: clamp( 30px, 4.4vw, 48px );
	line-height: 1.17;
	letter-spacing: -0.01em;
	background: linear-gradient( 90deg, var(--ada-announce-from) 0%, var(--ada-announce-to) 50% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ada-pricing__sub {
	margin: 0;
	max-width: 530px;
	font-family: var(--ada-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-footer-ink);
}

/* ---- Billing toggle ----------------------------------------------------- */
.ada-pricing__toggle-row { display: flex; align-items: center; gap: 12px; }

.ada-billing {
	display: inline-flex;
	padding: 2px;
	gap: 2px;
	background: var(--ada-card-bg);
	border-radius: 10px;
}

.ada-billing__opt {
	padding: 4px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-ink-muted);
	cursor: pointer;
}

.ada-billing__opt.is-active {
	background: var(--ada-panel);
	color: var(--ada-footer-ink);
	box-shadow: 0 6px 10px rgba( 14, 18, 27, 0.06 ), 0 2px 4px rgba( 14, 18, 27, 0.03 );
}

.ada-pricing__save {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--ada-link);
}
.ada-pricing__save-arrow {
	flex: none;
	width: 21px;
	height: 15px;
}

/* ---- Cards (Splide slider) ---------------------------------------------- */
.ada-pricing__cards {
	width: 100%;
	max-width: 1224px;
}
/* Vertical breathing room so the featured card's glow/border isn't clipped. */
.ada-pricing__cards .splide__track { padding: 10px 0; }
.ada-pricing__cards .splide__list { align-items: stretch; }
.ada-pricing__cards .splide__slide { height: auto; }

.ada-plan {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 32px 36px 36px;
	background: var(--ada-panel);
	/* Every card is the same size with the design's subtle 1px border
	   (#EBEBEB); the centered card upgrades to the 3px gradient border below. */
	border: 1px solid var(--ada-divider);
	border-radius: 24px;
}

/* Slider controls — brand green. */
.ada-pricing__cards .splide__arrow {
	background: var(--ada-primary);
	opacity: 1;
	width: 40px;
	height: 40px;
}
.ada-pricing__cards .splide__arrow:disabled { opacity: 0.35; }
.ada-pricing__cards .splide__arrow svg { fill: var(--ada-primary-fg, #fff); width: 18px; height: 18px; }
.ada-pricing__cards .splide__arrow--prev { left: -8px; }
.ada-pricing__cards .splide__arrow--next { right: -8px; }
.ada-pricing__cards .splide__pagination { bottom: -8px; }
.ada-pricing__cards .splide__pagination__page { background: var(--ada-divider); opacity: 1; }
.ada-pricing__cards .splide__pagination__page.is-active {
	background: var(--ada-primary);
	transform: scale( 1.2 );
}

/* The centered (active) slide is the highlighted plan — it's full-size, gets
   the blue→green gradient border + glow, and follows the center as you slide. */
.ada-plan--featured,
.ada-pricing__cards .splide__slide.is-active .ada-plan {
	border: 3px solid transparent;
	background:
		linear-gradient( var(--ada-card-bg), var(--ada-card-bg) ) padding-box,
		linear-gradient( 135deg, #16A9FF 0%, #4FDF82 100% ) border-box;
}
.ada-pricing__cards .splide__track { padding: 10px 0; }

/* Prevent the flash of un-sliced cards before Splide mounts (the "delay"):
   hide the track until Splide adds .is-initialized, so it appears already
   arranged with the centre card highlighted. Reserve height to avoid a jump. */
.ada-pricing__cards.splide:not( .is-initialized ) .splide__track {
	visibility: hidden;
	min-height: 560px;
}

.ada-plan__head { display: flex; flex-direction: column; gap: 8px; }

.ada-plan__name {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-hero-title);
}

.ada-plan__desc {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-footer-ink);
}

.ada-plan__price { display: flex; align-items: center; gap: 10px; }

.ada-plan__amt {
	font-family: var(--ada-font);
	font-weight: 600;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.01em;
	color: var(--ada-hero-title);
	font-variant-numeric: tabular-nums;
}

.ada-plan__per {
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-footer-ink);
}

.ada-plan__divider { height: 1px; background: var(--ada-divider); }

.ada-plan__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
}

.ada-plan__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-footer-ink);
}

.ada-plan__features img { flex: none; width: 14px; height: 14px; }

.ada-cta--block { width: 100%; justify-content: center; height: 40px; }

/* ---- Trusted-by --------------------------------------------------------- */
.ada-pricing__trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
.ada-pricing__trust .ada-hero__trust { color: var(--ada-ink-muted); }

/* ---- Responsive --------------------------------------------------------- */
/* Splide handles per-view counts (perPage breakpoints in theme-toggle.js);
   the cards no longer need a manual column reflow. */