/**
 * PlugUpp Live Pricing for Freemius - front-end styles.
 *
 * Deliberately almost nothing by default: the toggle buttons are stripped of
 * the browser's button chrome so the site's own CSS can style them, and the
 * active state is a class the theme can restyle or replace.
 *
 * The five named styles below (1.1.0) are the opposite case and carry ordinary
 * specificity, because a style is opted into by name: an author who wrote
 * style="pills" asked for a look, and a rule that loses to the theme's own
 * button rule would not have given them one. A toggle that names no style
 * keeps exactly the plain look it has had since 1.0.0, so no published page
 * changes because this attribute now exists.
 *
 * Three custom properties are the whole styling contract, each with a fallback
 * that works on a light ground and a dark one: --pflp-active-color,
 * --pflp-active-background and --pflp-gap. A theme can set them on any
 * ancestor without this stylesheet knowing about it.
 */

.pflp-currency,
.pflp-cycle {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--pflp-gap, 4px);
	max-width: 100%;
}

/* An inline-flex row is as wide as its content, so three cycles with a saving
   badge overflowed a narrow pricing card (measured 2026-09-18: 430px of
   toggle in a 320px card). Bounded to the container and allowed to wrap. */

.pflp-currency-button,
.pflp-cycle-button {
	background: none;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	line-height: 1.4;
	opacity: 0.6;
	padding: 2px 8px;
}

.pflp-currency-button:hover,
.pflp-currency-button:focus,
.pflp-cycle-button:hover,
.pflp-cycle-button:focus {
	opacity: 1;
}

.pflp-currency-button.is-active,
.pflp-cycle-button.is-active {
	font-weight: 600;
	opacity: 1;
}

/* The saving, computed from the rows and never typed. Inside the button it
   belongs to, so it moves with the label at every size. */
.pflp-cycle-badge {
	background: var(--pflp-active-background, rgba(127, 127, 127, 0.2));
	border-radius: 999px;
	color: var(--pflp-active-color, inherit);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.2;
	margin-inline-start: 0.5em;
	padding: 0.1em 0.5em;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Toggle styles. Both toggles take the same five, so a pricing page cannot end
   up with a currency control and a billing control that look like two
   different products.
   --------------------------------------------------------------------------- */

/* The five named styles below carry MORE than ordinary specificity on their
   button rules, on purpose (2026-09-20, staging.bucketree.app): the
   NectarBlocks theme styles every <button> on a site from its Customizer
   setting with `body[data-button-style] button`, which is (0,2,1) and beat
   `.is-style-pills .pflp-cycle-button` at (0,2,0). On plugupp.com the theme's
   14px happened to look like a pill; on Bucketree its 4px showed rectangles
   inside the track. A style opted into by name must win over a theme's global
   button rule, and the radius is important as well, because the theme's is:
   measured on Bucketree, its rule forces the four corner radii with
   !important and nothing else. The plain toggle keeps ordinary specificity:
   there the theme is meant to decide.

   Each style's OWN button rule goes one step further and names
   `[aria-pressed]`, (0,4,1) (2026-09-20, the ten-theme audit,
   docs/THEME-AUDIT-2026-09-20.md). Twenty Twenty-One paints every button on
   the page from `button:not(:hover):not(:active):not(.has-background)`, which
   is (0,3,1) - a TIE with the (0,3,1) these rules carried, decided only by
   which stylesheet loads last, which is the kind of accident this file does
   not rely on anywhere else. `[aria-pressed]` is the attribute the renderer
   already writes on every toggle button and is what makes it a toggle, so it
   names what the element is rather than padding the selector out. Nothing
   here is !important on Twenty Twenty-One's account: it forces nothing.

   The same rules also state a `background` and a `color`, which they never
   did. A style that says "one track, the active button filled" has to say
   that the OTHER buttons are not filled; until it did, Twenty Twenty-One's
   rule painted every idle option in the theme's button colours (measured:
   background rgb(40,48,61), colour rgb(209,228,221), on all five styles).
   The active option keeps saying it in its own rule below, which carries
   `.is-active` where this one carries `[aria-pressed]` - the same count, and
   it wins by coming after it in this one file, which is ordinary authoring
   rather than a race between two stylesheets. */
/* Pills: one track, the active button filled. The fill is a ::before rather
   than a background so it can sit behind the label and animate on its own,
   which is what makes the change read as movement instead of a repaint. */
.pflp-currency.is-style-pills,
.pflp-cycle.is-style-pills {
	background: rgba(127, 127, 127, 0.14);
	border-radius: 999px !important;
	gap: var(--pflp-gap, 2px);
	padding: 3px;
}

.pflp-currency.is-style-pills button.pflp-currency-button[aria-pressed],
.pflp-cycle.is-style-pills button.pflp-cycle-button[aria-pressed] {
	background: none;
	border: 0;
	border-radius: 999px !important;
	color: inherit;
	isolation: isolate;
	opacity: 1;
	padding: 0.35em 0.9em;
	position: relative;
}

.pflp-currency.is-style-pills button.pflp-currency-button::before,
.pflp-cycle.is-style-pills button.pflp-cycle-button::before {
	background: var(--pflp-active-background, rgba(255, 255, 255, 0.95));
	border-radius: inherit !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	transform: scale(0.82);
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: -1;
}

.pflp-currency.is-style-pills button.pflp-currency-button.is-active::before,
.pflp-cycle.is-style-pills button.pflp-cycle-button.is-active::before {
	opacity: 1;
	transform: scale(1);
}

.pflp-currency.is-style-pills button.pflp-currency-button.is-active,
.pflp-cycle.is-style-pills button.pflp-cycle-button.is-active {
	color: var(--pflp-active-color, #111);
}

/* Buttons: separate controls, the active one filled. */
.pflp-currency.is-style-buttons button.pflp-currency-button[aria-pressed],
.pflp-cycle.is-style-buttons button.pflp-cycle-button[aria-pressed] {
	background: none;
	border-radius: 4px !important;
	color: inherit;
	opacity: 1;
	padding: 0.35em 0.9em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pflp-currency.is-style-buttons button.pflp-currency-button.is-active,
.pflp-cycle.is-style-buttons button.pflp-cycle-button.is-active {
	background: var(--pflp-active-background, rgba(127, 127, 127, 0.22));
	color: var(--pflp-active-color, inherit);
}

/* Tabs: a rule under the row, and the active one carrying its own. */
.pflp-currency.is-style-tabs,
.pflp-cycle.is-style-tabs {
	border-bottom: 1px solid rgba(127, 127, 127, 0.35);
	gap: var(--pflp-gap, 16px);
}

.pflp-currency.is-style-tabs button.pflp-currency-button[aria-pressed],
.pflp-cycle.is-style-tabs button.pflp-cycle-button[aria-pressed] {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0 !important;
	color: inherit;
	margin-bottom: -1px;
	opacity: 1;
	padding: 0.35em 0.2em;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.pflp-currency.is-style-tabs button.pflp-currency-button.is-active,
.pflp-cycle.is-style-tabs button.pflp-cycle-button.is-active {
	border-bottom-color: var(--pflp-active-background, currentColor);
	color: var(--pflp-active-color, inherit);
}

/* Text: words, not controls, for a line of prose. */
.pflp-currency.is-style-text button.pflp-currency-button[aria-pressed],
.pflp-cycle.is-style-text button.pflp-cycle-button[aria-pressed] {
	background: none;
	border: 0;
	color: inherit;
	padding: 0 0.2em;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pflp-currency.is-style-text button.pflp-currency-button.is-active,
.pflp-cycle.is-style-text button.pflp-cycle-button.is-active {
	color: var(--pflp-active-color, inherit);
	text-decoration: none;
}

/* Switch: the two-option shape, a knob inside a track. The editor offers this
   one only where the product sells exactly two, and the CSS holds no more than
   two either: a third option would simply sit beside the others. */
.pflp-currency.is-style-switch,
.pflp-cycle.is-style-switch {
	background: rgba(127, 127, 127, 0.18);
	border-radius: 999px;
	gap: var(--pflp-gap, 0px);
	padding: 2px;
}

.pflp-currency.is-style-switch button.pflp-currency-button[aria-pressed],
.pflp-cycle.is-style-switch button.pflp-cycle-button[aria-pressed] {
	background: none;
	border: 0;
	border-radius: 999px !important;
	color: inherit;
	opacity: 0.75;
	padding: 0.3em 1em;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.pflp-currency.is-style-switch button.pflp-currency-button.is-active,
.pflp-cycle.is-style-switch button.pflp-cycle-button.is-active {
	background: var(--pflp-active-background, rgba(255, 255, 255, 0.95));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	color: var(--pflp-active-color, #111);
	opacity: 1;
}

/* Sizes. The font size carries the padding with it, because every style above
   is padded in em. */
.pflp-currency.is-size-small,
.pflp-cycle.is-size-small {
	font-size: 0.8125em;
}

.pflp-currency.is-size-regular,
.pflp-cycle.is-size-regular {
	font-size: 1em;
}

.pflp-currency.is-size-large,
.pflp-cycle.is-size-large {
	font-size: 1.125em;
}

/* A visitor who asked for less movement gets none. */
@media (prefers-reduced-motion: reduce) {

	.pflp-currency-button,
	.pflp-cycle-button,
	.pflp-currency-button::before,
	.pflp-cycle-button::before,
	.pflp-card {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Prices, plan text and features.
   --------------------------------------------------------------------------- */

/* The text after a figure. Its own element so a theme can size or hide it
   without touching the figure, and so the script can replace one without the
   other. */
.pflp-price-suffix {
	font-size: 0.7em;
	opacity: 0.75;
}

/* A cycle the tier does not sell reads as the reason rather than as a price,
   so it must not inherit a price's weight or a button's promise. */
.pflp-price.is-unavailable {
	font-size: 0.9em;
	font-weight: 400;
	opacity: 0.7;
}

.pflp-button.is-unavailable {
	cursor: default;
	opacity: 0.6;
}

.pflp-features {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The same two declarations again, scoped to a card, at (0,2,0).
   A features list has no bullets, so it must have no bullet indent either,
   and the rule above is (0,1,0) and loses to a theme's own content-list
   rule: measured 2026-09-20, Astra's `.entry-content ul { padding-left:
   20px }` and Kadence's `.single-content ul { padding-left: 2em }`, both
   (0,1,1), indented the features of every card by 20px and 34px while the
   bullets they were making room for stayed switched off.

   Inside a card the list is a row of the card, which is the same promise
   ".pflp-card > .pflp-plan" keeps for the plan name, so a card's list wins.
   Outside a card the list is in the page's prose and the weak rule still
   applies, which leaves the theme its say. The descendant combinator, not
   the child one, because an unaligned block sits in PFLP_Blocks::block_wrap()'s
   .pflp-block. Specificity only: neither theme uses !important. */
.pflp-card .pflp-features {
	margin: 0;
	padding: 0;
}

.pflp-features .pflp-feature {
	margin: 0 0 0.35em;
}

.pflp-feature-description {
	display: block;
	font-size: 0.875em;
	opacity: 0.75;
}

/* Plan text is a span so it can sit in a sentence; the hook is here for a card
   that wants it to be a line of its own. */
.pflp-plan {
	display: inline;
}

/* A row that could not be resolved renders empty rather than as a wrong
   figure. Nothing to style, but the hook is here for a site that wants one. */
.pflp-price-missing {
	display: inline;
}

/* ---------------------------------------------------------------------------
   The pricing card: the box the rest of it sits in.

   Deliberately almost nothing by default, the same contract the toggles have.
   A card with no styling is a transparent box with no border and no padding,
   so a card dropped on a page changes nothing about the page until somebody
   asks it to.

   The seven custom properties are the whole styling contract for the
   shortcode, each written only when the value survived validation, so a theme
   can set any of them on any ancestor and win. A block says the same things
   through its own border, colour, spacing and shadow panels, which write
   inline styles onto this same div and therefore beat every fallback below.
   --------------------------------------------------------------------------- */

/* The two named shadows, defined once and used four ways: the shortcode's
   shadow="soft" class, the featured card's soft and strong, the site-wide
   button hover, and anybody's own rule. On :root rather than on .pflp-card
   because from 1.2.0 the button hover names them too and a [pflp_button]
   need not be inside a card at all - one definition that every element can
   reach, rather than a second copy for the elements outside one. */
:root {
	--pflp-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px -12px rgba(0, 0, 0, 0.35);
	--pflp-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.08), 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}

.pflp-card {
	align-items: stretch;
	background: var(--pflp-card-background, transparent);
	border-color: var(--pflp-card-border-color, currentColor);
	border-radius: var(--pflp-card-radius, 0);
	border-width: var(--pflp-card-border-width, 0);
	box-sizing: border-box;
	color: var(--pflp-card-color, inherit);
	display: flex;
	flex-direction: column;
	/* The hook for a theme or a site that sets --pflp-card-width on the card
	   or on an ancestor. A width the AUTHOR typed is not delivered here: this
	   rule is (0,1,0) and loses to a theme's own content width (Twenty
	   Twenty-One (0,6,0), Astra (0,2,0), measured 2026-09-20), so
	   PFLP_Shortcodes::render_card() writes max-width:var(--pflp-card-width)
	   inline beside the property, the way core writes every other thing the
	   author chose. */
	max-width: var(--pflp-card-width, none);
	min-height: 100%;
	padding: var(--pflp-card-padding, 0);
}

/* A row of cards (Steve, 2026-09-19, on the LIHA comparison): the buttons sit
   on one line whatever the copy above them. Two facts do it with no setting.
   min-height: 100% fills a stretched column (a core Columns row stretches its
   columns, not what is inside them) and resolves to nothing in ordinary flow,
   so a lone card is untouched. And the card is a flex column whose LAST block
   takes an automatic top margin, which pushes it to the bottom edge whenever
   the card is taller than its content and does nothing when it is not. The
   block gap before it is kept as the previous block's bottom margin, because
   an auto margin resolves to zero when there is no spare height. Position
   rather than type: whatever block is last sits at the bottom. The card's
   layout is flow, not constrained, because core's constrained layout writes
   auto side margins on every child, and in a flex column those shrink-wrap
   and centre a paragraph (measured 2026-09-19). */
.pflp-card > :last-child {
	margin-block-start: auto;
}

/* The two properties the site-wide card hover animates, declared here for the
   reason the button's transition is declared once: the hover rule itself is
   built from two settings and printed inline, and a transition written there
   as well would be a second declaration on the same element for the same
   properties. Inside :where() so it carries no specificity and a theme's own
   transition still wins, and harmless where nothing changes - a transition
   animates nothing until something moves. */
:where(.pflp-card) {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* A border needs a border style, and a div has none until something sets one
   while the style engine writes only a width and a colour - the same gap the
   price and the button have (measured on staging 2026-09-18). has-border-color
   is core's own class for "a border was asked for", written by the border
   support on a block and by the renderer on a shortcode that named a border
   colour or width, so one rule serves both. A style chosen in the panel
   arrives inline and beats this. */
.pflp-card.has-border-color {
	border-style: solid;
}

/* The space between the things in a card.

   Core's layout support writes exactly these two rules for a block with a
   blockGap - but only when the THEME has switched WordPress's appearance tools
   on, because wp_render_layout_support_flag() reads the root setting while the
   editor offers the control from the block-level one this plugin opts into.
   Measured 2026-09-18: on Twenty Twenty-Five a card set to 3rem got core's rule
   and rendered 48px; on NectarBlocks the same block got no rule and no gap. So
   the renderer writes the gap it was given and these two rules apply it, in
   core's own shape, keyed on a class of ours. Where core writes its rule as
   well, both say the same number. */
.pflp-card.has-block-gap > * {
	margin-block-end: 0;
	margin-block-start: 0;
}

.pflp-card.has-block-gap > * + * {
	margin-block-start: var(--pflp-card-gap, 0);
}

/* The last block's top margin is auto (see .pflp-card), so its gap lives on
   the block before it. Written after the rules above so it wins the tie. */
.pflp-card.has-block-gap > :nth-last-child(2) {
	margin-block-end: var(--pflp-card-gap, 0);
}

.pflp-card.has-block-gap > :last-child {
	margin-block-start: auto;
}

/* The shortcode's shadow="soft". A block asks through core's shadow panel
   instead, which writes its own box-shadow inline. Two layers so it reads as
   depth on a light ground without becoming a grey smear on a dark one. */
.pflp-card.is-shadow-soft {
	box-shadow: var(--pflp-shadow-soft);
}

.pflp-card.is-shadow-strong {
	box-shadow: var(--pflp-shadow-strong);
}

/* ---------------------------------------------------------------------------
   The featured card (1.2.0).

   A card is featured because the plan inside it is the one Freemius marks
   featured, or because the author said so. Everything visible about it beyond
   the badge - the border, the background, the shadow - is written inline by
   the renderer from the one featured style, marked important because the three
   it replaces arrive as core's own inline panel styles and as preset classes
   core marks important itself. What is left here is what cannot be an inline
   value: the positioning the badge needs, the lift, and the badge's own look.
   --------------------------------------------------------------------------- */

/* A badge that straddles the top edge or sits in a corner is positioned
   against the card, so the card has to be the containing block. That is the
   whole of what being featured does on its own: every other property is
   behind a class, so a fieldset left empty repaints nothing. */
.pflp-card.is-featured {
	position: relative;
}

/* The things a featured card takes over from the card's own panels.

   Important, and only here. A card's own border colour, background and shadow
   arrive two ways - a custom value as an inline style, a theme preset as a
   class WordPress's own stylesheet marks important - and the ruling is that
   the featured style wins over both. An important rule keyed on two or three
   class names beats the inline one outright and the preset one on specificity,
   whichever order the two stylesheets load in.

   Every one of them fires only where the renderer wrote the matching class,
   which is what "empty means unchanged" is (Steve, 2026-09-19): a field left
   empty writes no class, no rule fires, and the card keeps the border, the
   background and the button colours it already had. The border colour is one
   of these again from that ruling - it spent one day as a rule on
   .is-featured itself, falling back to currentColor, which repainted the
   border of a card whose author had chosen one. */
.pflp-card.is-featured.has-featured-border {
	border-color: var(--pflp-featured-border-color) !important;
	border-style: solid !important;
}

.pflp-card.is-featured.has-featured-border-width {
	border-style: solid !important;
	border-width: var(--pflp-featured-border-width) !important;
}

.pflp-card.is-featured.has-featured-background {
	background-color: var(--pflp-featured-background) !important;
}

.pflp-card.is-featured.is-featured-shadow-none {
	box-shadow: none !important;
}

.pflp-card.is-featured.is-featured-shadow-soft {
	box-shadow: var(--pflp-shadow-soft) !important;
}

.pflp-card.is-featured.is-featured-shadow-strong {
	box-shadow: var(--pflp-shadow-strong) !important;
}

/* The small raise. A transform rather than a margin, so nothing around the
   card moves and a row of cards keeps its baseline.

   The distance is a custom property because the site-wide card hover has to
   add to it: a hover rule that simply wrote its own transform would move a
   lifted card DOWN to the hover distance, which is the opposite of what a
   hover means. PFLP_Shortcodes::card_hover_css() reads this name, so the
   number is written here and nowhere else. */
.pflp-card.is-lifted {
	transform: translateY(var(--pflp-card-lift, -8px));
}

/* The button inside a featured card (1.2.0).

   Three properties, each at rest and under the pointer, each behind its own
   class so an empty field leaves the theme's own value exactly where it is.
   Important for the reason the card's three are: a button's colours arrive as
   core's inline panel styles and as preset classes core marks important
   itself, and the featured style wins over both.

   The colour on hover is NOT gated at 1025px, where the site-wide lift and
   shadow are. A colour cannot strand a touch screen the way a lift can: a
   tapped button that keeps a hover colour looks pressed, where one that keeps
   a lift looks broken (Steve, 2026-09-19). */
.pflp-card.is-featured.has-featured-button-color .pflp-button {
	color: var(--pflp-featured-button-color) !important;
}

.pflp-card.is-featured.has-featured-button-color-hover .pflp-button:hover {
	color: var(--pflp-featured-button-color-hover) !important;
}

/* A border colour needs a style, and core's global button rule sets
   border-width: 0 on .wp-element-button, so a colour on its own would draw
   nothing (the same gap .pflp-button.has-border-color closes for the block's
   own panel). The width here is deliberately NOT important: it is the floor
   that makes a chosen colour visible, and a width the author set in the
   border panel arrives inline and beats it. */
.pflp-card.is-featured.has-featured-button-border .pflp-button {
	border-color: var(--pflp-featured-button-border) !important;
	border-style: solid !important;
	border-width: 1px;
}

.pflp-card.is-featured.has-featured-button-border-hover .pflp-button:hover {
	border-color: var(--pflp-featured-button-border-hover) !important;
	border-style: solid !important;
	border-width: 1px;
}

.pflp-card.is-featured.has-featured-button-background .pflp-button {
	background-color: var(--pflp-featured-button-background) !important;
}

.pflp-card.is-featured.has-featured-button-background-hover .pflp-button:hover {
	background-color: var(--pflp-featured-button-background-hover) !important;
}


/* The badge itself: small, upper case, weight 600, which is how Freemius's own
   pricing app and every pricing page in the 2026-09-19 survey that marks a
   plan sets it. The two colours are custom properties, so the fieldset's
   values arrive inline and anything left blank keeps these. */
.pflp-card-badge {
	background: var(--pflp-badge-background, currentColor);
	border-radius: 999px;
	display: inline-block;
}

/* Our own display rule above outranks the browser's [hidden] { display: none },
   so a badge told to hide by the attribute stayed on screen (the Settings
   preview with "No badge at all", 2026-09-19). The attribute has to win. */
.pflp-card-badge[hidden] {
	display: none;
}

.pflp-card-badge {
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The three sizes (1.2.0). The size and the padding are here and only here,
   one rule each, keyed on the class the renderer writes beside the position:
   there is no unkeyed default, because a badge is always rendered with a size
   class and a badge without one should look wrong rather than look like
   medium. Medium is what every featured card had before the field existed.

   Everything about the badge that has a radius is already in em - the pill is
   a 999px cap that cannot scale and the tab's corners are 0.6em - so the
   corners follow the size with nothing said here. Large is about 13px on a
   16px card, which is plugupp.com's own badge (measured 2026-09-19). */
.pflp-card.is-badge-size-small > .pflp-card-badge {
	font-size: 0.625em;
	padding: 0.2em 0.75em;
}

.pflp-card.is-badge-size-medium > .pflp-card-badge {
	font-size: 0.6875em;
	padding: 0.25em 0.9em;
}

.pflp-card.is-badge-size-large > .pflp-card-badge {
	font-size: 0.8125em;
	padding: 0.35em 1em;
}

/* The optional glyph, before the words and inside their span, so the
   currentColor it is stroked with is the badge's text colour rather than the
   fill's. One em square, so it is the size the words are at every badge size
   without a rule per size. */
.pflp-card-badge-icon {
	display: inline-block;
	height: 1em;
	margin-inline-end: 0.4em;
	vertical-align: -0.15em;
	width: 1em;
}

/* The words, on the inner span. They are a second element because
   `currentColor` resolves against whichever element uses it: colouring the
   words on the same span that carries the fill would change what the fill's
   own currentColor means, and an uncoloured badge would come out one flat
   colour with nothing readable on it.

   Left blank, the words take the card's background, so the badge reads as
   inverted text. The chain is the featured background first, because a
   featured card that was given one is the ground the badge actually sits on,
   then the card's own, then Canvas - the browser's page background for the
   colour scheme in force, which is the nearest thing to "the theme" that
   needs no palette slug. */
.pflp-card-badge-text {
	color: var(--pflp-badge-color, var(--pflp-featured-background, var(--pflp-card-background, Canvas)));
}

/* Straddling the card's top edge, centred: the strip Slack, Dropbox and
   Freemius's own pricing app use. */
.pflp-card.is-badge-top > .pflp-card-badge {
	inset-inline-start: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
}

/* A tab hanging from the inside of the top border, centred: square where it
   meets the border, rounded below, the way plugupp.com's own cards carry
   "Recommended" (Steve, 2026-09-19). Sits in the card's top padding. */
.pflp-card.is-badge-tab > .pflp-card-badge {
	border-radius: 0 0 0.6em 0.6em;
	inset-inline-start: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
}

/* The top right corner. */
.pflp-card.is-badge-corner > .pflp-card-badge {
	inset-inline-end: 0;
	position: absolute;
	top: 0;
	transform: translate(25%, -50%);
}

/* In the flow, above the plan name: Rank Math's and Gravity Forms' placement.
   Centred in a card whose contents are centred and left in one whose are not,
   which is what text-align inheritance already does for an inline-block. */
.pflp-card.is-badge-inside > .pflp-card-badge {
	margin-block-end: 0.5em;
}

/* A positioned badge is out of the flow, so the block gap must not treat the
   block after it as a second child. Without this, the plan name in a card with
   a block gap gained one gap of top margin the moment the badge appeared. */
.pflp-card.is-badge-top.has-block-gap > .pflp-card-badge + *,
.pflp-card.is-badge-tab.has-block-gap > .pflp-card-badge + *,
.pflp-card.is-badge-corner.has-block-gap > .pflp-card-badge + * {
	margin-block-start: 0;
}

/* Where a card narrower than the space around it sits. A card is a block-level
   box, so this is margins: the text-align wrapper the price and the toggles
   use moves an inline element across its line and would do nothing to a box
   with a max-width, while centring the words inside it as a side effect. */
.pflp-card.is-align-left {
	margin-inline-end: auto;
	margin-inline-start: 0;
}

.pflp-card.is-align-center {
	margin-inline-end: auto;
	margin-inline-start: auto;
}

.pflp-card.is-align-right {
	margin-inline-end: 0;
	margin-inline-start: auto;
}

/* What a card's own children do with the line they are on (1.2.0).

   A price, a plan name and a toggle are inline, because outside a card they
   belong in a sentence: "from $49 a year". Inside a card they are the rows of
   the card, and an author who dropped a plan name above a price had to set
   Left on both to stop them sharing a line - five blocks, five alignments,
   for the layout every pricing card in the world has (measured while
   rebuilding plugupp.com's cards from the plugin, 2026-09-19).

   So a card's own children stack. Only its own: the child combinator is what
   keeps the promise the docs make outside a card, and an element that WAS
   given an alignment is inside a .pflp-align wrapper and therefore not a
   child of the card at all, so the author's choice still decides. A price
   inside a paragraph inside a card is likewise untouched, because the
   paragraph is the child. */
.pflp-card > .pflp-plan,
.pflp-card > .pflp-price,
.pflp-card > .pflp-features {
	display: block;
}

/* The toggles are flex rows rather than spans, so block-level for them is the
   flex box filling the line rather than shrinking to its buttons. */
.pflp-card > .pflp-currency,
.pflp-card > .pflp-cycle {
	display: flex;
}

/* Buy button fallback styling.
   One class selector, wrapped in :where() so it carries no specificity at all.
   A bare .pflp-button would tie with the theme's own .wp-element-button rule
   and then win on source order, because this stylesheet is enqueued from
   inside a shortcode and therefore prints after the theme's global styles.
   A tie our way is the opposite of what is wanted: this is the fallback for a
   theme that styles nothing, not a look to defend. :where() is how core's own
   block styles solve the same problem, so it is safe on every browser a
   supported WordPress runs on.

   currentColor on a neutral ground keeps it legible in a dark palette as well
   as a light one, and there is no hover rule at all, because a :hover would
   carry specificity again. */
:where(.pflp-button) {
	background: rgba(127, 127, 127, 0.15);
	border-radius: 4px;
	color: currentColor;
	cursor: pointer;
	display: inline-block;
	line-height: 1.4;
	padding: 0.6em 1.2em;
	text-decoration: none;
	/* The five properties anything in this plugin animates on a button: the
	   site-wide hover's lift and shadow, and a featured card's three colours.
	   Written once, here, rather than once in the inline hover rule and again
	   under .is-featured - two transition declarations on one element is one
	   winning and the other doing nothing, and which one wins is a specificity
	   accident. Inside :where(), so a theme's own transition still wins, and
	   harmless where nothing changes: a transition animates nothing until
	   something moves. */
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* A border needs a border style.
   The block's border panel writes a width and a colour inline, but core's
   global button rule sets border-width: 0 on .wp-element-button and an
   anchor has no border style of its own, so the style engine's width and
   colour drew nothing (measured on plugupp.com 2026-09-14: inline
   border-width:1.5px;border-color:#9CA3AF, computed 0px none). Core's own
   button block ships the equivalent rule for itself; has-border-color is the
   class the border support adds when a colour is set, and the panel never
   produces a width without one. */
.pflp-button.has-border-color {
	border-style: solid;
}

/* The same gap on everything else the border panel now reaches (1.1.0).
   The cause here is not core's button rule, it is CSS itself: a span's
   border-style is none until something sets it, and the style engine writes a
   width and a colour and never a style. Measured on staging 2026-09-18: a
   price with inline border-color:#cc2222;border-width:2px computed
   border-style none and border-width 0px. An author who picks a style in the
   panel gets it inline, which beats this rule, so this is the default and not
   a decision taken away from them. */
.pflp-price.has-border-color,
.pflp-plan.has-border-color,
.pflp-currency.has-border-color,
.pflp-cycle.has-border-color {
	border-style: solid;
}

/* Width.
   The four widths core's button block offers, as classes so the shortcode
   and the block render the same thing. Percent of the containing block, so
   inside a pricing card 100 spans the card; the alignment wrapper, when
   there is one, is that block. An anchor is inline, so it has to become a
   box to take a width at all. */
.pflp-button.has-custom-width {
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
}

.pflp-button.wp-block-pflp-button__width-25 {
	width: 25%;
}

.pflp-button.wp-block-pflp-button__width-50 {
	width: 50%;
}

.pflp-button.wp-block-pflp-button__width-75 {
	width: 75%;
}

.pflp-button.wp-block-pflp-button__width-100 {
	width: 100%;
}

/* Horizontal alignment.
   A price span, a buy button and a currency toggle are all inline, so nothing
   on the element itself can align it: text-align belongs to the block box
   around it. The align attribute on the button and the toggle adds that box,
   and the element keeps its own class list and inline styles untouched. */
/* An unaligned BLOCK's wrapper (PFLP_Blocks::block_wrap(), 2026-09-20): a
   block is a block wherever it lands, and this is what a theme that sizes its
   block-level children has to size. No text-align of its own: the words
   inside follow the alignment around them. A shortcode never gets it. */
.pflp-block {
	display: block;
	width: 100%;
}

.pflp-align {
	display: block;
	/* Span the container. A block in ordinary flow already does; a block that
	   is a flex or grid ITEM does not when its container aligns items to the
	   start, and then "centred" means centred within a wrapper the width of
	   its own content (measured 2026-09-19: a centred cycle toggle inside a
	   NectarBlocks flex-box sat hard left in a 250px wrapper). */
	width: 100%;
}

.pflp-align-left {
	text-align: left;
}

.pflp-align-center {
	text-align: center;
}

.pflp-align-right {
	text-align: right;
}