/*
 * pricing.css — shared pricing skeleton (.pr-*): the plan cards + the
 * "Compare Plans" <details> grid used by /teo and /onescreen. Extracted from
 * the near-identical teo-plan / teo-compare and os-plan / os-compare blocks
 * (2026-07).
 *
 * Linked via useHead in BOTH pages, BEFORE each page's own stylesheet, so the
 * page sheet can override by source order. This file keeps ONLY declarations
 * the two pages share (values written against the --ft-* tokens); the true
 * per-page deltas stay body-scoped in teo.css / onescreen.css:
 *   - plan-card container (flex basis / mobile peek). The 80% card scale is NOT
 *     a per-page delta — it is baked into .pr-carousel__track > * below, so the
 *     pages never scale the cards themselves.
 *   - card/rule border colors (teo #EEEEEE, onescreen #E6E7E9)
 *   - muted text tone (teo = --ft-muted, onescreen = #788089)
 *   - summary sizing (teo 16px/inline-flex/gap 8, onescreen 20px/flex/gap 12)
 *   - desktop compare columns (teo 180px/gap 48, onescreen 206px/gap 80) —
 *     each page wraps its rule in @media (min-width: 991px) so the shared
 *     ≤990/≤680 column steps below still win the cascade
 *   - check icon size/weight (teo 22px, onescreen 24px/700)
 *
 * The <details> open/close is animated by composables/useAnimatedDetails.ts.
 */

/* ---- Plan card ---- */
/* border-color is themed per page (teo #EEEEEE, onescreen #E6E7E9) */
.pr-plan {
	background: #fff;
	border: 3px solid var(--ft-border);
	border-radius: 24px;
	padding: 37px;
}

.pr-plan__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pr-plan__id {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pr-plan__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	/* background = per-page plan theme */
}

.pr-plan__name {
	font-size: 20px;
	font-weight: 600;
	color: var(--ft-text);
}

.pr-plan__tag {
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	/* background/color = per-page plan theme */
}

.pr-plan__price {
	margin: 28px 0 0;
	font-size: 32px;
	line-height: 46px;
	font-weight: 600;
	color: var(--ft-text);
}

.pr-plan__desc {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

.pr-plan__desc p {
	margin: 0;
}

.pr-plan__desc p + p {
	margin-top: 22px;
}

.pr-plan__cta {
	margin-top: 24px;
	width: 100%;
}

.pr-plan__rule {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--ft-border); /* border-color themed per page */
}

.pr-plan__features-title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ft-muted);
}

.pr-plan__features ul {
	margin: 0;
	padding-left: 22px;
	list-style: disc;
}

.pr-plan__features li {
	margin: 0 0 10px;
	padding-left: 4px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

.pr-plan__features li:last-child {
	margin-bottom: 0;
}

/* ---- Plan carousel ----
 * Wraps the plan cards in a horizontal scroll-snap track so the section holds
 * an arbitrary number of plans (future dynamic source). Driven by
 * composables/useScrollCarousel.ts. The track is position:relative so each
 * item's offsetLeft is measured against it (dot sync). When the cards already
 * fit, `.is-scrolling` is absent and the track stays centered (≈ the old 2-up);
 * once they overflow, JS adds `.is-scrolling` and shows the arrows/dots.
 * Per-page: the item flex-basis lives in teo.css / onescreen.css since the snap
 * item differs (.teo-plan-col vs bare .pr-plan). */
.pr-carousel {
	position: relative;
}

.pr-carousel__track {
	position: relative;
	display: flex;
	justify-content: center; /* few cards: centered like the old fixed pair */
	gap: 36px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pr-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Overflowing: left-align so card 1 sits at the scroll origin */
.pr-carousel__track.is-scrolling {
	justify-content: flex-start;
}

/* Direct snap items align to the track's start edge.
 * zoom:0.8 is the plan-card size: the cards are drawn at their design values
 * above and shrunk to 80% here — content AND footprint — at every width, so the
 * reduced size holds from desktop down to the mobile peek. It lives here, on the
 * snap item, because the item is the sized/flexed box on both pages (teo wraps
 * the card in .teo-plan-col for its note, onescreen snaps the bare .pr-plan);
 * pages must not re-apply their own scale. */
.pr-carousel__track > * {
	scroll-snap-align: start;
	zoom: 0.8;
}

.pr-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--ft-text);
	box-shadow: 0 6px 20px rgba(20, 33, 50, 0.16);
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.pr-carousel__arrow--prev {
	left: -22px;
}

.pr-carousel__arrow--next {
	right: -22px;
}

.pr-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.pr-carousel__arrow:focus-visible {
	outline: 3px solid var(--ft-blue);
	outline-offset: 2px;
}

.pr-carousel__arrow i {
	font-size: 20px;
}

/* Dots — mirrors index.vue's .ft-products__dots */
.pr-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.pr-carousel__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c7d0d8;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.pr-carousel__dots button.is-active {
	width: 80px;
	background: var(--ft-blue);
}

/* Touch/narrow widths: swipe only (repo convention — no arrows) */
@media (max-width: 990px) {
	.pr-carousel__arrow {
		display: none;
	}
}

/* ---- Compare Plans dropdown ---- */
.pr-compare {
	margin-top: 48px;
}

.pr-compare > summary {
	align-items: center; /* display/gap/font-size are per-page */
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--ft-text);
}

.pr-compare > summary::-webkit-details-marker {
	display: none;
}

.pr-compare > summary i {
	color: var(--ft-muted);
	transition: transform 0.2s ease;
}

.pr-compare[open] > summary i {
	transform: rotate(180deg);
}

.pr-compare__table {
	margin-top: 28px;
}

/* Group header row + data rows share one 3-column grid so the inline plan
 * headers sit centered directly above their check columns (the headers live
 * on the first group's row, not a separate header row). Desktop column
 * widths/gaps are per-page (see file header). */
.pr-compare__group,
.pr-compare__row {
	display: grid;
	align-items: center;
}

.pr-compare__group {
	padding: 32px 0 8px;
}

.pr-compare__group:first-child {
	padding-top: 0;
}

.pr-compare__group-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ft-text);
}

.pr-compare__col {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}

.pr-compare__col strong {
	font-weight: 600;
}

.pr-compare__col--navy { color: #022db1; }
.pr-compare__col--green { color: #37ac14; }

.pr-compare__row {
	padding: 8px 0;
	border-bottom: 1px solid var(--ft-border); /* onescreen: #e6e7e9 */
}

.pr-compare__label {
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

.pr-compare__cell {
	text-align: center;
}

/* .pr-check size/weight is per-page; only the colors are shared */
.pr-check--navy { color: #022db1; }
.pr-check--green { color: #37ac14; }

/* ---- Shared responsive: check columns step down (desktop → 110 → 56) so the
 * label column stays readable ---- */
@media (max-width: 990px) {
	.pr-compare__group,
	.pr-compare__row {
		grid-template-columns: minmax(0, 1fr) 110px 110px;
		column-gap: 24px;
	}

	.pr-compare__col {
		font-size: 14px;
	}
}

@media (max-width: 680px) {
	.pr-compare__group,
	.pr-compare__row {
		grid-template-columns: minmax(0, 1fr) 56px 56px;
		column-gap: 12px;
	}

	.pr-compare__col strong {
		display: block;
	}
}