/* BW 2Checkout Pricing — designed card. Matches Copernic's brand (square edges, orange accent).
   Accent driven by --bw2cp-accent (per-block). Layout mirrors their bw-desktop-pricing block. */
.bw2cp-card {
	--bw2cp-accent: #f36923;
	--bw2cp-ratio: 0.72;
	position: relative;
	display: flex;
	flex-direction: column;
	/* Fill the container (a column, usually) so the row's outer edges line up with the controls
	   bar above it, and so sibling cards match height with their Buy buttons aligned. */
	width: 100%;
	max-width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #eceae7;
	border-radius: 7px;
	/* Deliberately NOT overflow:hidden — the "New extension!" flag has to overhang the right edge
	   to read as wrapping around the card. Corners are rounded on the top/bottom children instead. */
	font-family: inherit;
	color: #1d2327;
}

/* When a standalone controller drives the group, cards drop their own controls. */
.bw2cp-controls-hidden .bw2cp-controls-row {
	display: none;
}

/* Standalone controller (sits on the page, not on the orange header).
   Sticks to the top of the viewport while the cards scroll past. Override --bw2cp-sticky-top
   if the theme has its own fixed header to clear. */
.bw2cp-controller {
	--bw2cp-accent: #f36923;
	--bw2cp-sticky-top: 12px;
	position: sticky;
	top: var( --bw2cp-sticky-top );
	/* Deliberately low: the bar must slide *under* the theme's sticky header when the two meet
	   (e.g. as it exits at the end of the content), never cover the site nav. Still paints above
	   the pricing cards, which are static. */
	z-index: 5;
	transition: top 0.18s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	padding: 14px 22px;
	margin: 0 auto 28px;
	background: #fff;
	border: 1px solid #eceae7;
	border-radius: 10px;
	/* Full width so the bar lines up with the row of cards below it. */
	width: 100%;
	box-sizing: border-box;
}
.bw2cp-controller .bw2cp-controls-row {
	gap: 18px;
}
/* Divider between the term group and the users stepper, as in the approved layout. */
.bw2cp-controller .bw2cp-users {
	padding-left: 18px;
	border-left: 1px solid #eceae7;
}
/* Clear the WordPress admin bar when it's showing. */
.admin-bar .bw2cp-controller {
	top: calc( var( --bw2cp-sticky-top ) + 32px );
}
@media ( max-width: 782px ) {
	.admin-bar .bw2cp-controller {
		top: calc( var( --bw2cp-sticky-top ) + 46px );
	}
}
.bw2cp-controller .bw2cp-controls-row {
	margin: 0;
}
.bw2cp-controller-label {
	font-size: 13px;
	font-weight: 700;
	color: #4a4440;
}
/* Controller controls invert: dark on light instead of white on orange. */
.bw2cp-controller .bw2cp-dd-toggle,
.bw2cp-controller .bw2cp-num {
	background: #fff;
	border-color: #dcd0c8;
	color: #2b2b2b;
}
.bw2cp-controller .bw2cp-dd-toggle:hover,
.bw2cp-controller .bw2cp-num .bw2cp-step:hover {
	background: #fff4ee;
}
.bw2cp-controller .bw2cp-dd-caret {
	background: var( --bw2cp-accent );
	color: #fff;
}
.bw2cp-controller .bw2cp-users-label {
	color: #4a4440;
}
.bw2cp-controller .bw2cp-num {
	border-radius: 10px;
}
.bw2cp-controller .bw2cp-num .bw2cp-users-input {
	color: #2b2b2b !important;
}
.bw2cp-controller .bw2cp-num .bw2cp-step {
	color: var( --bw2cp-accent );
}

/* Header (clickable) */
.bw2cp-header {
	position: relative;
	border-bottom: 5px solid #4b4b4b;
	border-radius: 6px 6px 0 0;
	background: var( --bw2cp-accent );
	color: #fff;
	/* Top padding clears the savings badge and the flag, which both sit at the top of the header —
	   without it the title is squeezed between them once every card carries a flag. */
	padding: 48px 20px 24px;
	text-align: center;
}
.bw2cp-title-link {
	display: block;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	text-decoration: none;
}
.bw2cp-title-link:hover {
	color: #fff;
	opacity: 0.92;
}
/* "Save X%" badge — per card, since the discount differs by product. */
.bw2cp-save {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #e6f6ec;
	color: #1a7f47;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.3px;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}
.bw2cp-save[hidden] {
	display: none;
}
/* Flag that wraps around the card's right edge: the banner runs flush to the edge and the
   darker fold below it reads as the tail folding around the side. */
/* Specificity is deliberate: themes commonly ship a global border reset (border-width: 0) that
   would otherwise wipe this out, since it loads after the plugin's stylesheet. */
.bw2cp-widget.bw2cp-card .bw2cp-ribbon {
	position: absolute;
	top: 10px;
	right: -10px;
	color: var( --bw2cp-accent );
	background: #fff;
	font-size: 13px;
	line-height: 14px;
	padding: 6px 12px;
	font-weight: 700;
	border: 1px solid var( --bw2cp-accent );
	border-left: none;
}
.bw2cp-ribbon:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -8px;
	border-style: solid;
	border-color: #fff;
	border-top-width: 13px;
	border-bottom-width: 13px;
	border-left-width: 8px;
	border-right-width: 0;
	border-left-color: transparent;
}
.bw2cp-ribbon:after {
	content: "";
	position: absolute;
	bottom: -11px;
	right: 0;
	border-style: solid;
	border-color: #c22a1a transparent transparent transparent;
	border-width: 11px 11px 0 0;
}

/* Price panel */
.bw2cp-price {
	background: linear-gradient( #ffeee6, #ffffff, #ffeee6 );
	padding: 28px 18px 26px;
	text-align: center;
}
/* Controls row: term dropdown + users, on one line, sitting under the title in the header */
.bw2cp-controls-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: nowrap;
	margin: 16px 0 0;
}

/* Segmented control — all options visible (used in the shared controls bar) */
.bw2cp-segment {
	display: inline-flex;
	align-items: stretch;
	background: #f2f0ee;
	border-radius: 10px;
	padding: 4px;
	gap: 2px;
}
.bw2cp-seg-btn {
	border: 0;
	background: transparent;
	color: #5c5651;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}
.bw2cp-seg-btn:hover {
	color: #23272c;
}
.bw2cp-seg-btn.is-active {
	background: var( --bw2cp-accent );
	color: #fff;
}

/* Custom term dropdown (white on the orange header) */
.bw2cp-dropdown {
	position: relative;
}
.bw2cp-dd-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	background: rgba( 255, 255, 255, 0.16 );
	border: 1.5px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 999px;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 0 8px 0 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}
.bw2cp-dd-toggle:hover {
	background: rgba( 255, 255, 255, 0.28 );
}
.bw2cp-dd-caret {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: var( --bw2cp-accent );
	font-size: 13px;
	line-height: 1;
}
.bw2cp-dd-menu {
	position: absolute;
	top: calc( 100% + 6px );
	left: 50%;
	transform: translateX( -50% );
	z-index: 30;
	min-width: 100%;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba( 20, 23, 28, 0.2 );
}
.bw2cp-dd-option {
	padding: 9px 20px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	color: #33373c;
}
.bw2cp-dd-option:hover {
	background: #ffeee6;
}
.bw2cp-dd-option.is-active {
	color: var( --bw2cp-accent );
	font-weight: 700;
}

/* Everything sizes relative to .bw2cp-per-month's font-size (the "base"), which JS auto-fits to
   the card width so any currency/amount stays on one line. Change the base -> the whole price
   scales proportionally. */
.bw2cp-per-month {
	display: inline-flex;
	justify-content: center;
	align-items: flex-start;
	font-weight: 800;
	white-space: nowrap;
	line-height: var( --bw2cp-ratio );
	font-size: 84px; /* base; overridden inline on load and refined to fit by JS (fitPrice) */
}
.bw2cp-per-month.bw2cp-loading {
	opacity: 0.45;
}
.bw2cp-int {
	font-size: 1em;
	line-height: var( --bw2cp-ratio );
}
.bw2cp-sign {
	font-size: 0.47em;
	line-height: var( --bw2cp-ratio );
	margin-top: 0.06em;
}
.bw2cp-frac-month {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 0.06em;
}
.bw2cp-frac {
	font-size: 0.36em;
	line-height: var( --bw2cp-ratio );
	padding-bottom: 0.05em;
	border-bottom: 0.16em solid var( --bw2cp-accent );
}
.bw2cp-per {
	font-size: 0.2em;
	line-height: 1;
	padding-top: 0.35em;
}

/* Compact users box (white, matching the dropdown height) with stacked up/down on the right */
.bw2cp-users {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bw2cp-users-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.92;
}
.bw2cp-num {
	display: inline-flex;
	align-items: center;
	height: 40px;
	background: rgba( 255, 255, 255, 0.16 );
	border: 1.5px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 999px;
	overflow: hidden;
}
.bw2cp-num .bw2cp-users-input {
	min-width: 34px;
	width: 34px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center;
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	color: #fff !important;
	-moz-appearance: textfield;
}
.bw2cp-num .bw2cp-users-input:focus {
	outline: none;
	background: rgba( 255, 255, 255, 0.14 ) !important;
}
.bw2cp-num .bw2cp-users-input::-webkit-outer-spin-button,
.bw2cp-num .bw2cp-users-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bw2cp-num .bw2cp-step {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	width: 34px;
	height: 100%;
	padding: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s;
}
.bw2cp-num .bw2cp-step:hover {
	background: rgba( 255, 255, 255, 0.22 );
}
.bw2cp-per-year {
	margin: 10px 0 0;
	font-size: 14px;
	color: #3c434a;
	min-height: 18px;
}

/* Extensions area — also carries the card's bottom corners, since the card itself can't clip. */
.bw2cp-extensions {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	border-radius: 0 0 6px 6px;
	overflow: hidden;
}
.bw2cp-icon-list {
	display: flex;
	flex-wrap: wrap;
	padding: 12px;
	justify-content: center;
}
.bw2cp-icon-list img {
	width: 20%;
	padding: 12px;
	box-sizing: border-box;
}
.bw2cp-gmail img {
	width: 100%;
	height: auto;
	display: block;
}
.bw2cp-footer {
	padding: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: #ffeee6;
	/* Panels are equalised across each row at runtime (see equalizeFooters in widget.js), which
	   adapts to any language or number of extensions. This floor is only a no-JS fallback — it
	   deliberately isn't relied on for alignment, since a fixed number can't track content. */
	min-height: var( --bw2cp-footer-min-height, 0 );
	box-sizing: border-box;
}
.bw2cp-footer-info {
	padding: 12px;
	text-align: left;
	/* Sized so the extension names stay on one line each. */
	font-size: 13px;
	line-height: 1.5;
	flex: 1 1 auto;
	min-width: 0;
}
.bw2cp-footer-info .bw2cp-footer-title {
	font-weight: 700;
	margin-bottom: 2px;
}
.bw2cp-footer-info p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bw2cp-footer img {
	max-width: 100px;
	height: auto;
	margin: auto;
}
/* Cluster of extension icons beside the list */
.bw2cp-footer-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	max-width: 44%;
	padding-right: 4px;
}
.bw2cp-footer-icons img {
	width: 32px;
	height: 32px;
	max-width: none;
	margin: 0;
	object-fit: contain;
}

/* Buy button (sits under the currency row, above the icon section) */
.bw2cp-buy {
	color: #fff;
	background: var( --bw2cp-accent );
	border: 1px solid var( --bw2cp-accent );
	text-align: center;
	padding: 11px 22px;
	margin-top: 16px;
	border-radius: 7px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	display: block;
	transition: 0.25s;
}
.bw2cp-buy:hover {
	background: #fff;
	color: var( --bw2cp-accent );
}
.bw2cp-currency-row {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.bw2cp-currency {
	padding: 3px 6px;
	border: 1px solid #d7c3b8;
	font: inherit;
	font-size: 12px;
}
.bw2cp-currency-note {
	font-size: 11px;
	color: #a08a7e;
	font-style: italic;
}
.bw2cp-mock-note {
	margin: 10px 12px 0;
	padding: 6px 10px;
	background: #fff8e1;
	border: 1px solid #f0e0a0;
	font-size: 11px;
}
.bw2cp-tax-note {
	margin: 8px 12px 4px;
	font-size: 11px;
	color: #a08a7e;
	text-align: center;
}
.bw2cp-error {
	color: #b32d2e;
}

@media ( max-width: 1024px ) {
	.bw2cp-footer {
		flex-direction: column;
	}
	.bw2cp-icon-list img {
		width: 25%;
	}
}

/* Mobile: cards go full width once the columns stack (WP core stacks at 781px). */
@media ( max-width: 781px ) {
	.bw2cp-card {
		margin-bottom: 24px;
	}
	.bw2cp-footer {
		flex-direction: row;
	}
	.bw2cp-icon-list img {
		width: 20%;
	}

	/* Stack the shared controls so nothing runs off a narrow screen. */
	.bw2cp-controller {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 14px;
	}
	.bw2cp-controller .bw2cp-controls-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.bw2cp-controller-label {
		text-align: center;
	}
	.bw2cp-controller .bw2cp-segment {
		width: 100%;
	}
	.bw2cp-controller .bw2cp-seg-btn {
		flex: 1 1 0;
		padding: 9px 6px;
	}
	/* Divider moves from the side to above the users row once stacked. */
	.bw2cp-controller .bw2cp-users {
		justify-content: center;
		padding-left: 0;
		padding-top: 12px;
		border-left: 0;
		border-top: 1px solid #eceae7;
	}
}

/* --- Block editor previews -------------------------------------------------
   The editor renders each block through ServerSideRender in isolation, so the
   card has no column to size against and the controls bar has nothing to stick
   to. Keep previews contained and un-stuck so they're workable in the canvas. */
.block-editor-block-list__layout .bw2cp-card {
	max-width: 340px;
	height: auto;
}
.block-editor-block-list__layout .bw2cp-controller {
	position: static;
	box-shadow: none;
}
.block-editor-block-list__layout .bw2cp-per-month {
	font-size: 52px;
}

/* --- Theme paragraph margins ----------------------------------------------
   Themes commonly set a large bottom margin on <p> inside post content
   (Kadence uses 32px). Our own class selectors tie on specificity and lose on
   source order, so these are deliberately written to outrank them. */
.bw2cp-widget.bw2cp-card p,
div.bw2cp-controller p {
	margin: 0;
}
.bw2cp-widget.bw2cp-card p.bw2cp-per-year {
	margin: 10px 0 0;
}
.bw2cp-widget.bw2cp-card p.bw2cp-mock-note {
	margin: 10px 12px 0;
}
.bw2cp-widget.bw2cp-card p.bw2cp-tax-note {
	margin: 8px 12px 4px;
}