/**
 * PlugUpp Live Freemius Pricing - front-end styles.
 *
 * Deliberately almost nothing: 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.
 */

.pflp-currency {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.pflp-currency-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 {
	opacity: 1;
}

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

/* 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;
}

/* 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;
}

/* 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;
}

/* 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. */
.pflp-align {
	display: block;
}

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

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

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