/**
 * Pricing Table block – front-end styles.
 *
 * @package wuppi-blocks
 */

.wuppi-pricing-table {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--wp--preset--color--base-2, #f8f8f6);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--muted, #e8e8e4);
	position: relative;
	/* text-align default: center (can be overridden via .has-text-align-* classes) */
	text-align: center;
}

.wuppi-pricing-table.is-featured {
	border-color: var(--wp--preset--color--primary, #4a90e2);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Text align overrides ─────────────────────────────────────────────────── */

.wuppi-pricing-table.has-text-align-left  { text-align: left; }
.wuppi-pricing-table.has-text-align-right { text-align: right; }

.wuppi-pricing-table.has-text-align-left .wuppi-pricing-table__price,
.wuppi-pricing-table.has-text-align-left .wuppi-pricing-table__toggle,
.wuppi-pricing-table.has-text-align-left .wuppi-pricing-table__feature {
	justify-content: flex-start;
}

.wuppi-pricing-table.has-text-align-right .wuppi-pricing-table__price,
.wuppi-pricing-table.has-text-align-right .wuppi-pricing-table__toggle,
.wuppi-pricing-table.has-text-align-right .wuppi-pricing-table__feature {
	justify-content: flex-end;
}

/* ── Corner ribbon badge ──────────────────────────────────────────────────── */
/*
 * The badge element is positioned absolutely in the top-right corner as a
 * diagonal ribbon (like a "PLANNED" or "Most popular" stamp).
 * The parent already has overflow: hidden, so the rotated ribbon clips cleanly.
 */

.wuppi-pricing-table__badge {
	position: absolute;
	top:         20px;
	right:       -34px;
	width:       140px;
	padding:     0.28em 0;
	text-align:  center;
	background:  var(--wp--preset--color--primary, #4a90e2);
	color:       var(--wp--preset--color--base, #fff);
	font-size:   0.65rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;       /* never wrap — single-line ribbon */
	overflow:    hidden;       /* clip text that exceeds width */
	text-overflow: ellipsis;
	transform:      rotate( 45deg );
	transform-origin: center;
	line-height: 1.9;
	z-index: 1;
	pointer-events: none;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.wuppi-pricing-table__header {
	padding: 1.75rem 2rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.wuppi-pricing-table__plan {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: inherit;
}

.wuppi-pricing-table__description {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	color: var(--wp--preset--color--muted-foreground, inherit);
	line-height: 1.5;
}

/* ── Price ────────────────────────────────────────────────────────────────── */

.wuppi-pricing-table__price {
	padding: 0.5rem 2rem 1.5rem;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.15em;
}

.wuppi-pricing-table__currency {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	align-self: flex-start;
	padding-top: 0.35em;
}

.wuppi-pricing-table__amount {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.wuppi-pricing-table__period {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	color: var(--wp--preset--color--muted-foreground, inherit);
	margin-left: 0.1em;
}

/* ── Billing toggle ───────────────────────────────────────────────────────── */

.wuppi-pricing-table__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0 2rem 1rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	color: var(--wp--preset--color--muted-foreground, inherit);
}

.wuppi-pricing-table__toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}

.wuppi-pricing-table__toggle-input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.wuppi-pricing-table__toggle-slider {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--muted, #d1d5db);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s;
}

.wuppi-pricing-table__toggle-slider::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
}

.wuppi-pricing-table__toggle-input:checked + .wuppi-pricing-table__toggle-slider {
	background: var(--wp--preset--color--primary, #4a90e2);
}

.wuppi-pricing-table__toggle-input:checked + .wuppi-pricing-table__toggle-slider::before {
	transform: translateX( 18px );
}

/* ── Divider ──────────────────────────────────────────────────────────────── */

.wuppi-pricing-table__divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--muted, #e8e8e4);
	margin: 0;
}

/* ── Features: base ───────────────────────────────────────────────────────── */

.wuppi-pricing-table__features {
	list-style: none;
	padding: 1.5rem 2rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wuppi-pricing-table__feature {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.5;
	padding: 0.55em 0;
}

.wuppi-pricing-table__feature.is-unavailable {
	opacity: 0.45;
}

.wuppi-pricing-table__feature.is-unavailable .wuppi-pricing-table__feature-icon {
	color: var(--wp--preset--color--muted-foreground, #999);
}

.wuppi-pricing-table__feature-icon {
	flex-shrink: 0;
	margin-top: 0.1em;
	color: var(--wp--preset--color--primary, currentColor);
}

/* ── Feature list style: striped ─────────────────────────────────────────── */

.wuppi-pricing-table.is-style-striped .wuppi-pricing-table__feature:nth-child( odd ) {
	background: var(--wp--preset--color--base, rgba(0, 0, 0, 0.03));
}

.wuppi-pricing-table.is-style-striped .wuppi-pricing-table__features {
	padding-left: 0;
	padding-right: 0;
}

.wuppi-pricing-table.is-style-striped .wuppi-pricing-table__feature {
	padding-left: 2rem;
	padding-right: 2rem;
}

/* ── Feature list style: bordered ────────────────────────────────────────── */

.wuppi-pricing-table.is-style-bordered .wuppi-pricing-table__feature {
	border-bottom: 1px solid var(--wp--preset--color--muted, #e8e8e4);
}

.wuppi-pricing-table.is-style-bordered .wuppi-pricing-table__feature:last-child {
	border-bottom: none;
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */

.wuppi-pricing-table__cta {
	padding: 0 2rem 2rem;
	margin-top: auto;
}

.wuppi-pricing-table__cta-link {
	display: block;
	text-align: center;
	padding: 0.75em 1.5em;
	border-radius: 6px;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	text-decoration: none;
	background: var(--wp--preset--color--primary, #4a90e2);
	color: var(--wp--preset--color--base, #fff);
	transition: opacity 0.15s;
}

.wuppi-pricing-table__cta-link:hover,
.wuppi-pricing-table__cta-link:focus {
	opacity: 0.88;
	color: var(--wp--preset--color--base, #fff);
}