/*
 * Subscription Plans block front-end styles.
 * Registered via block.json "style" and enqueued automatically by
 * WordPress only when the block is present on the page.
 *
 * Colors/spacing reference the `--keepers-*` design tokens declared in the
 * `:root` block of assets/css/style.css.
 */

/* ---------------------------------------------------------------------
 * Heading area
 * ------------------------------------------------------------------ */

/*
 * The design shows the eyebrow as just the green star plus its label, with
 * no pill behind it — the shared badge component defaults to a tinted pill.
 * Scoped to this block so every other block's badge is left alone.
 */
.block-subscription-plans .badge-eyebrow {
	padding: 0;
	background-color: transparent;
}

.block-subscription-plans .section-heading__description {
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------
 * Panel — the gradient-framed container holding the list and the detail
 * card. Positioned (not just for the mascot): the flag on the active
 * detail card overhangs its own top edge the same way the old grid's
 * featured card did, so this needs the matching top headroom too.
 * ------------------------------------------------------------------ */

/*
 * The path is relative to this stylesheet's own location (resolved by the
 * browser against style.css's URL, not the page's), not to KEEPERS_URI —
 * plain CSS has no access to PHP constants.
 */
.block-subscription-plans__panel {
	position: relative;
	margin-top: var(--keepers-space-7);
	padding: var(--keepers-space-8) var(--keepers-space-5) var(--keepers-space-5);
	border-radius: 20px;
	background-color: var(--keepers-color-bg-tint-start);
	background-image: url("../../assets/images/sp-bg.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * Decorative — purely visual, so it's hidden from the accessibility tree
 * (aria-hidden in render.php) and never intercepts clicks on whatever it
 * happens to overlap.
 */
 .block-subscription-plans__list_wrapper{
	position: relative;
	margin-top: 4.5rem;
 }
.block-subscription-plans__mascot {
	position: absolute;
	bottom: calc(100% - 4.75rem);
    right: 0;
	display: block;
	width: 11rem;
	transform: translateY(-70%);
	pointer-events: none;
	z-index: 1;
}

.block-subscription-plans__mascot img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width:992px) {
	
	.block-subscription-plans__mascot {
		bottom: calc(100% - 4.25rem);

	}
}

/* ---------------------------------------------------------------------
 * Plan list — compact, always-visible rows; clicking one swaps which
 * plan's full detail card is shown (see script.js).
 * ------------------------------------------------------------------ */

.block-subscription-plans__list {
	display: flex;
	flex-direction: column;
	gap: var(--keepers-space-3);
}

/*
 * A <button>, not a link — this switches which panel is showing rather
 * than navigating anywhere, so a button is the correct semantic element.
 * Font/border reset since browsers style buttons distinctly from text.
 */
.block-subscription-plans__list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--keepers-space-3);
	width: 100%;
	padding: var(--keepers-space-4);
	border: 1px solid var(--keepers-color-border);
	border-radius: 16px;
	background-color: var(--keepers-color-bg);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 575px) {	
	.block-subscription-plans__list-text {
		display: flex;
		align-items: flex-start;
		gap: var(--keepers-space-3);
	}
}

.block-subscription-plans__list-name {
	flex: 0 0 6.5rem;
	display: block;
	font-size: var(--keepers-font-size-lg);
	font-weight: var(--keepers-font-weight-semibold);
	color: var(--keepers-color-heading);
}

.block-subscription-plans__list-summary {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
	font-size: var(--keepers-font-size-sm);
	line-height: var(--keepers-line-height-base);
	color: var(--keepers-color-body);
}

/*
 * Only the active row carries the icon — the others are plain text, per
 * the design — so it's hidden rather than merely transparent, which would
 * still reserve its space.
 */
.block-subscription-plans__list-icon {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	/* background-color: var(--keepers-color-heading); */
	/* color: var(--keepers-color-inverse); */
	background-color: #FFFFFF;
	color: var(--keepers-color-heading);
}

.block-subscription-plans__list-icon svg {
	width: 40%;
	height: 40%;
}

.block-subscription-plans__list-item.is-active {
	/* border-color: transparent; */
	/* background-image: linear-gradient(180deg, #91DA7B 0%, #3E9735 100%); */
	background-color: var(--keepers-color-heading);
	border-color: var(--keepers-color-heading);
	color: #ffffff;
}

.block-subscription-plans__list-item.is-active .block-subscription-plans__list-name,
.block-subscription-plans__list-item.is-active .block-subscription-plans__list-summary {
	color: var(--keepers-color-inverse);
}

/*
 * Only the active row stacks: name on its own line (sharing it with the
 * arrow icon), description in full width below. Inactive rows stay side
 * by side — the active one needs the room since it also carries the icon.
 */
.block-subscription-plans__list-item.is-active .block-subscription-plans__list-text {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--keepers-space-1);
}

.block-subscription-plans__list-item.is-active .block-subscription-plans__list-name,
.block-subscription-plans__list-item.is-active .block-subscription-plans__list-summary {
	flex: 0 0 auto;
	width: 100%;
}

.block-subscription-plans__list-item.is-active .block-subscription-plans__list-icon {
	display: inline-flex;
}

.block-subscription-plans__list-cta {
	margin-top: var(--keepers-space-4);
}

.block-subscription-plans__list-cta .btn-cta {
	display: flex;
	width: fit-content;
	max-width: 100%;
}

/*
 * The base .btn-cta__label is `white-space: nowrap`, sized for short
 * button labels — fine at the widths this button normally has room at,
 * but "See Full Pricing and add-ons" doesn't fit the list column's width
 * on narrow phones, and a flex item can't shrink below that below its
 * text's unwrapped width by default. Letting it wrap (and grow to fill
 * the row, like the card's own .action button already does) keeps the
 * pill's width matching the list items above it at every breakpoint
 * instead of overflowing the section.
 */
.block-subscription-plans__list-cta .btn-cta__label {
	flex: 1 1 auto;
	justify-content: center;
	white-space: normal;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Detail card — the active plan's full price/features. Every plan's card
 * is in the markup; script.js toggles the `hidden` attribute rather than
 * swapping content, so this is unstyled beyond what a single static card
 * already needed.
 * ------------------------------------------------------------------ */

.block-subscription-plans__detail {
	margin-top: var(--keepers-space-6);
}

.block-subscription-plans__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--keepers-space-5);
	border: 1px solid var(--keepers-color-border-light);
	border-radius: 16px;
	background-color: var(--keepers-color-bg);
}

.block-subscription-plans__flag {
	position: absolute;
	top: 0;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background-image: linear-gradient(
		180deg,
		var(--keepers-color-accent-gradient-start),
		var(--keepers-color-accent-gradient-end)
	);
	font-size: var(--keepers-font-size-sm);
	font-weight: var(--keepers-font-weight-medium);
	line-height: 1;
	white-space: nowrap;
	color: var(--keepers-color-inverse);
	/* Centred on the card's top edge, half of it above. */
	transform: translate(-50%, -50%);
}

.block-subscription-plans__name {
	margin: 0 0 var(--keepers-space-2);
	font-size: var(--keepers-font-size-h4);
	font-weight: var(--keepers-font-weight-semibold);
	line-height: var(--keepers-line-height-tight);
	color: var(--keepers-color-heading);
}

.block-subscription-plans__price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0 0 var(--keepers-space-1);
}

.block-subscription-plans__price-value {
	font-family: var(--keepers-font-family-heading);
	font-size: var(--keepers-font-size-h3);
	font-weight: var(--keepers-font-weight-semibold);
	line-height: 1;
	color: var(--keepers-color-heading);
}

.block-subscription-plans__price-suffix {
	font-size: var(--keepers-font-size-base);
	color: var(--keepers-color-body);
}

.block-subscription-plans__price-note {
	margin: 0 0 var(--keepers-space-4);
	font-size: var(--keepers-font-size-sm);
	/* color: var(--keepers-color-muted); */
}

/* ---------------------------------------------------------------------
 * Card CTA — the shared button component, stretched to the card
 * ------------------------------------------------------------------ */

.block-subscription-plans__action {
	margin-bottom: var(--keepers-space-5);
	padding-bottom: var(--keepers-space-5);
	border-bottom: 1px solid var(--keepers-color-border-light);
}

/*
 * The design's plan buttons run the full width of the card. Rather than a
 * second button style, the shared .btn-cta is stretched here: the component
 * is inline-flex with a pill label, so the wrapper goes full width and the
 * label fills and centres within it.
 */
.block-subscription-plans__action .btn-cta {
	display: flex;
	width: 100%;
}

.block-subscription-plans__action .btn-cta__label {
	flex: 1 1 auto;
	justify-content: center;
	font-size: var(--keepers-font-size-base);
	background-image: none !important;
	background-color: var(--keepers-color-heading);
}

/* ---------------------------------------------------------------------
 * Feature list
 * ------------------------------------------------------------------ */

/*
 * Grows to fill whatever height is left, which is what keeps every card's
 * bottom edge level once the columns have stretched them to equal height.
 */
.block-subscription-plans__features {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--keepers-space-2);
	margin: 0;
}

/*
 * Icon and text as separate flex items, so wrapped text stays aligned with
 * the first line instead of running back under the icon.
 */
.block-subscription-plans__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--keepers-space-2);
	font-size: var(--keepers-font-size-sm);
	line-height: var(--keepers-line-height-base);
	color: var(--keepers-color-body);
}

.block-subscription-plans__feature-icon {
	display: inline-flex;
	flex-shrink: 0;
	/* Nudged down so the circle sits on the text's first line, not its top. */
	margin-top: 0.125em;
	color: var(--keepers-color-accent);
}

.block-subscription-plans__feature-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

/*
 * Weight and colour pinned explicitly so every row reads identically. The
 * markup is uniform, so nothing here should be needed — but it stops anything
 * inherited from the theme, a plugin, or the browser's own list styling from
 * rendering one row (in practice the first) heavier or darker than the rest.
 */
.block-subscription-plans__feature-text {
	font-weight: var(--keepers-font-weight-regular);
	color: var(--keepers-color-body);
}

.block-subscription-plans__best-for {
	margin: var(--keepers-space-4) 0 0;
	font-size: var(--keepers-font-size-sm);
	line-height: var(--keepers-line-height-base);
	color: var(--keepers-color-muted);
}

/* ---------------------------------------------------------------------
 * Notes below the panel
 * ------------------------------------------------------------------ */

.block-subscription-plans__included {
	margin: var(--keepers-space-7) 0 0;
	padding: var(--keepers-space-5);
	border-radius: 16px;
	background-color: var(--keepers-color-heading);
	/* font-size: var(--keepers-font-size-sm); */
	line-height: var(--keepers-line-height-base);
	text-align: center;
	/* color: var(--keepers-color-inverse); */
	color: #F6F6F6;
    background: linear-gradient(201.4deg, rgba(145, 218, 123, 0.9) 5.31%, rgba(62, 151, 53, 0.9) 85.92%);
}
.block-subscription-plans__included p{
	max-width: 50rem;
	margin-bottom: 0;
	margin-inline: auto;
}

.block-subscription-plans__disclaimer {
	margin: var(--keepers-space-4) 0 0;
	font-size: var(--keepers-font-size-sm);
	text-align: center;
	color: var(--keepers-color-muted);
}

/* ---------------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {
	.block-subscription-plans__panel {
		display: grid;
		grid-template-columns: minmax(280px, 512px) 1fr;
		/* align-items: start; */
		gap: 0 var(--keepers-space-7);
		padding: var(--keepers-space-7);
	}
	
	.block-subscription-plans__mascot {
		width: 12rem;
	}

	.block-subscription-plans__list-cta {
		margin-top: var(--keepers-space-7);
	}
	
	.block-subscription-plans__detail {
		margin-top: 0;
	}
	
	.block-subscription-plans__card {
		height: 100%;
		padding: var(--keepers-space-5) var(--keepers-space-5) var(--keepers-space-6);
	}
	
	.block-subscription-plans__price-value {
		font-size: var(--keepers-font-size-h2);
	}
}
@media (min-width: 1440px) {
	.block-subscription-plans__panel {
		--sp-grid-gutter: calc(var(--keepers-space-7) * 2);
		display: grid;
		grid-template-columns: minmax(280px, 618px) 1fr;
		gap: 0 var(--sp-grid-gutter);
		padding: var(--keepers-space-7) calc(var(--keepers-space-8) + 6px);
	}
}


/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

/*
 * Cards are visible by default and only ever animated *from* a hidden state
 * at runtime by GSAP (gsap.from), so where script.js bails out nothing is
 * left invisible. This guards against a half-applied transform surviving.
 */
@media (prefers-reduced-motion: reduce) {
	.block-subscription-plans__list-item {
		opacity: 1 !important;
		transform: none !important;
	}
}