/**
 * Zen Addons Pro — Pricing Table Pro front-end styles.
 * Loaded only when the license is valid. Scoped to .zaso-pricing-* so it is
 * inert on pages without the widget.
 */

/* Card must contain the absolutely-positioned corner ribbon. overflow:hidden
   clips the band ends to the corner; it does NOT clip the card's own box-shadow
   (painted outside the border box), so the elevated / featured shadows survive. */
.zaso-pricing-table__card {
	position: relative;
	overflow: hidden;
}

/* Diagonal corner ribbon: a fixed-width band, text centered, rotated 45deg and
   pushed past the top-right corner so both ends are clipped by the card. The
   width is fixed and the text is centered, so the full label stays centered on
   the band regardless of length and is never cut off. */
.zaso-pp-ribbon {
	position: absolute;
	top: 26px;
	right: -54px;
	z-index: 2;
	width: 200px;
	padding: 7px 0;
	transform: rotate(45deg);
	transform-origin: center;
	background: var(--zaso-pp-ribbon-bg, #4f46e5);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* === Billing toggle - shared base (DEFAULT look) ======================== */
/* Default (no variant class, or .zaso-pp-toggle--default): a rounded track
   with two pill buttons; the active period is filled indigo, the inactive is
   transparent with muted text so the selected period is unmistakable. */
/* Billing row: the toggle track + an optional green savings tag, centred as a
   pair above the plan grid (matches the design mockup). */
.zaso-pp-billing {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 auto 24px;
}

.zaso-pp-save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid #a7f3d0;
	border-radius: 999px;
	background: #ecfdf5;
	color: #059669;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
}

.zaso-pp-save__icon::before {
	font-family: "ZASO Material Symbols Rounded";
	font-variation-settings: 'FILL' 1;
	content: "\e2eb";
	font-size: 16px;
	line-height: 1;
}

.zaso-pp-toggle {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 5px;
	gap: 4px;
	border: 1px solid #e0e7ff;
	border-radius: 999px;
	background: #eef2ff;
}

.zaso-pp-toggle__btn {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 1;
	border: 0;
	margin: 0;
	padding: 8px 18px;
	border-radius: 999px;
	background: transparent;
	color: #6b7280;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	outline: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Mouse / programmatic focus: no ring. */
.zaso-pp-toggle__btn:focus {
	outline: none;
}

/* Keyboard navigation only: a clean, solid accent ring (no dotted default). */
.zaso-pp-toggle__btn:focus-visible {
	outline: 2px solid #4f46e5;
	outline-offset: 2px;
}

/* Theme button rules outrank a plain .is-active class and repaint every segment.
   Twenty Twenty-One ships
   `button:not(:hover):not(:active):not(.has-background) { background-color: var(--global--color-primary); color: ... }`
   at specificity 0,3,1, which beats both `.zaso-pp-toggle__btn` (0,1,0) and
   `.zaso-pp-toggle__btn.is-active` (0,2,0) — so active AND inactive segments
   render as the same dark fill. Re-assert background + colour scoped under the
   wrapper's [role="group"] attribute so each rule reaches 0,4,0 and wins on
   specificity (no !important; the theme rule carries none). */
.zaso-pp-toggle[role="group"] .zaso-pp-toggle__btn:not( .is-active ) {
	background: transparent;
	color: #64748b;
}

.zaso-pp-toggle[role="group"] .zaso-pp-toggle__btn.is-active {
	background: #ffffff;
	color: #4f46e5;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.12 );
}

/* === Variant: Pill (sliding knob) ====================================== */
/* Buttons are transparent; a single accent knob slides under the active one.
   The knob position is driven purely by which button carries .is-active. */
.zaso-pp-toggle--pill {
	position: relative;
	background: #eef2ff;
	border-color: #e0e7ff;
	box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.06 );
}

.zaso-pp-toggle--pill::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 0;
	width: calc( 50% - 4px );
	height: calc( 100% - 8px );
	border-radius: 999px;
	background: #4f46e5;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.25s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.zaso-pp-toggle--pill:has( .zaso-pp-toggle__btn:nth-child( 2 ).is-active )::before {
	transform: translateX( 100% );
}

.zaso-pp-toggle--pill .zaso-pp-toggle__btn {
	flex: 1 1 0;
	text-align: center;
}

.zaso-pp-toggle--pill[role="group"] .zaso-pp-toggle__btn.is-active {
	background: transparent;
	color: #fff;
}

/* === Variant: Segmented (flat buttons, hard divider) =================== */
.zaso-pp-toggle--segmented {
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d1d5db;
}

.zaso-pp-toggle--segmented .zaso-pp-toggle__btn {
	border-radius: 0;
	padding: 9px 20px;
}

.zaso-pp-toggle--segmented .zaso-pp-toggle__btn + .zaso-pp-toggle__btn {
	border-left: 1px solid #d1d5db;
}

.zaso-pp-toggle--segmented[role="group"] .zaso-pp-toggle__btn.is-active {
	background: #4f46e5;
	color: #fff;
}

/* === Variant: Outline (ghost buttons) ================================== */
.zaso-pp-toggle--outline {
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
}

.zaso-pp-toggle--outline .zaso-pp-toggle__btn {
	border: 1.5px solid #d1d5db;
	border-radius: 999px;
	background: transparent;
	color: #6b7280;
}

.zaso-pp-toggle--outline[role="group"] .zaso-pp-toggle__btn.is-active {
	background: rgba( 79, 70, 229, 0.08 );
	border-color: #4f46e5;
	color: #4f46e5;
}

.zaso-pp-compare li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.zaso-pp-feature--no {
	opacity: 0.55;
}

.zaso-pp-feature--no svg {
	color: #9ca3af;
}

@media (prefers-reduced-motion: reduce) {
	.zaso-pp-toggle__btn {
		transition: none;
	}
}