/**
 * Birthday Gift — front end.
 * Deliberately low-key so it sits inside the Flatsome theme without a fight.
 * The accent colour is injected as --cutpopup-bg-accent from the settings.
 */

.cutpopup-bg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cutpopup-bg-modal[hidden] {
	display: none;
}

.cutpopup-bg-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 17, 17, 17, 0.55 );
}

.cutpopup-bg-panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.28 );
	animation: cutpopup-bg-in 0.28s ease-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.cutpopup-bg-panel {
		animation: none;
	}
}

@keyframes cutpopup-bg-in {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
}

.cutpopup-bg-x {
	position: absolute;
	top: 6px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	margin: 0; /* the theme's own button style likes to add margin-right */
	padding: 0;
	border: 0;
	background: none;
	color: #6b6b6b;
	font-size: 26px;
	font-weight: normal; /* the theme's own button style likes to bold this too */
	line-height: 1;
	cursor: pointer;
}

.cutpopup-bg-x:hover {
	color: #111;
}

.cutpopup-bg-body {
	padding: 30px 28px 26px;
	text-align: center;
}

.cutpopup-bg-inline {
	max-width: 440px;
	margin: 0 auto;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	background: #fff;
}

.cutpopup-bg-logo-wrap {
	margin: 0 0 16px;
}

.cutpopup-bg-logo {
	display: inline-block;
	width: var( --cutpopup-bg-logo-w, 40% );
	height: auto;
}

@media ( max-width: 480px ) {
	.cutpopup-bg-logo {
		width: var( --cutpopup-bg-logo-w-mobile, var( --cutpopup-bg-logo-w, 40% ) );
	}
}

/* Deliberately no font-size/color/line-height here: the heading and intro are
   printed as a real <h2> and <p>, styled by the theme like any other heading
   or paragraph on the site. Only the spacing needed for this layout is ours. */
.cutpopup-bg-title {
	margin: 0 0 8px;
}

.cutpopup-bg-intro {
	margin: 0 0 18px;
}

.cutpopup-bg-fields {
	display: grid;
	grid-template-columns: 0.85fr 1.45fr 1.05fr;
	gap: 10px;
	text-align: left;
}

.cutpopup-bg-fields label {
	display: block;
	margin: 0;
}

/* The caption only. Keeping the uppercase off the label itself stops it
   bleeding into the select, which would shout SEPTEMBER back at the shopper. */
.cutpopup-bg-fields label > span {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #767676;
}

/* Themes love to force a height on selects that is shorter than the text they
   hold. Own the box completely: no native appearance, our own chevron, and a
   height set here rather than inherited. */
.cutpopup-bg-body .cutpopup-bg-fields select,
.cutpopup-bg-inline .cutpopup-bg-fields select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 50px;
	min-height: 50px;
	max-width: none;
	margin: 0;
	padding: 0 32px 0 12px;
	border: 1px solid #d9d9d9;
	border-radius: 10px;
	background-color: #fff;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 8px;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #111;
	cursor: pointer;
}

.cutpopup-bg-body .cutpopup-bg-fields select:hover {
	border-color: #b9b9b9;
}

.cutpopup-bg-body .cutpopup-bg-fields select:focus,
.cutpopup-bg-inline .cutpopup-bg-fields select:focus {
	border-color: var( --cutpopup-bg-accent, #c2185b );
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 3px rgba( 194, 24, 91, 0.18 ); /* fallback for older browsers */
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --cutpopup-bg-accent, #c2185b ) 20%, transparent );
}

/* Placeholder rows read as hints, not as a chosen value. */
.cutpopup-bg-fields select:invalid,
.cutpopup-bg-fields select option[value=""] {
	color: #9a9a9a;
}

.cutpopup-bg-error {
	margin: 12px 0 0;
	color: #b3261e;
	font-size: 14px;
}

.cutpopup-bg-error[hidden] {
	display: none;
}

.cutpopup-bg-submit,
.cutpopup-bg-cta {
	display: inline-block;
	width: 100%;
	margin-top: 16px;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/* The CTA ("Start shopping" etc.) keeps the general accent colour. */
.cutpopup-bg-cta {
	border: 0;
	border-radius: 9px;
	background: var( --cutpopup-bg-accent, #c2185b );
	color: #fff;
}

/* The submit button gets its own settings — background, text, border, radius. */
.cutpopup-bg-submit {
	border-style: solid;
	border-width: var( --cutpopup-bg-btn-border-width, 0 );
	border-color: var( --cutpopup-bg-btn-border-color, transparent );
	border-radius: var( --cutpopup-bg-btn-radius, 9px );
	background: var( --cutpopup-bg-btn-bg, var( --cutpopup-bg-accent, #c2185b ) );
	color: var( --cutpopup-bg-btn-text, #fff );
}

.cutpopup-bg-submit:hover,
.cutpopup-bg-cta:hover {
	filter: brightness( 0.92 );
}

.cutpopup-bg-submit[disabled] {
	opacity: 0.65;
	cursor: default;
}

.cutpopup-bg-note {
	margin: 12px 0 0;
	color: #8a8a8a;
	font-size: 12px;
	line-height: 1.45;
}

.cutpopup-bg-note a {
	color: inherit;
	text-decoration: underline;
}

/* ---- gift price badge — shown wherever WooCommerce prints a gifted price, not just in the pop-up ----
   A block of its own, on the line below the price, rather than run on beside
   it — the icon and label sit next to each other, but the badge as a whole
   always starts a fresh line. Because it owns its own line, it needs none of
   the line-height tricks an inline badge would (tried and dropped: see the
   1.7.x changelog entries for why position: absolute and flex centring both
   caused problems here). */

.cutpopup-bg-price-badge {
	display: block;
	margin-top: 8px; /* gap between the price and the badge, now that it is its own line */
	white-space: nowrap;
	/* Deliberately inherited, not set — the label reads as part of the price
	   itself, in the theme's own price typography, not a size of our choosing. */
	font: inherit;
	color: inherit;
}

.cutpopup-bg-price-badge-icon {
	display: inline-block;
	font-size: 1.15em; /* relative to the inherited price font-size, so it scales with the theme too */
	line-height: 1;
	vertical-align: middle;
}

/* Specificity bumped on purpose: inside the claimed-gift reward panel, this
   icon sits inside a .cutpopup-bg-product card (a preview thumbnail there is
   meant to fill its box), and ".cutpopup-bg-product img" would otherwise win
   over a single-class rule and stretch the icon to fill its own container. */
.cutpopup-bg-price-badge .cutpopup-bg-price-badge-img {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	object-fit: contain;
	vertical-align: middle;
}

/* The 8px gap between the icon and the label, on whichever side the icon is
   set to — a plain margin on the icon itself would apply on both sides, not
   just the side facing the label. */
.cutpopup-bg-price-badge-icon + .cutpopup-bg-price-badge-label,
.cutpopup-bg-price-badge-label + .cutpopup-bg-price-badge-icon,
.cutpopup-bg-price-badge-label + .cutpopup-bg-price-badge-img {
	margin-left: 8px;
}

/* Because the badge now takes up its own line, a gifted product's card is
   taller than an ordinary one right where the badge sits. This is a shop-wide
   grid fix, not a gift-only one: it stretches every product card to the row's
   full height and pins its "Add to cart" button to the bottom, so every
   button lines up regardless of what pushed one card taller — the badge here,
   but just as much a two-line title or any other length difference.

   Flatsome's own content-product.php, not WooCommerce's default markup (no
   <li class="product"> here). The button (in "button" add-to-cart mode) is
   added by Flatsome's own flatsome_product_box_after hook, which fires
   *inside* .box-text, right after the price — so it is nested three levels
   below the column that actually stretches to the row's height, and every
   level in between needs to pass that height on down for the last margin:
   auto to have anything to push against:
     .col-inner        (already stretches — flex: 1 0 auto, from Flatsome)
       .product-small.box   (a plain block by default — needs to fill it)
         .box-text           (a plain block by default — needs to fill it)
           .button             (margin-top: auto pushes it to the bottom)
   Scoped to ".type-product" (a standard WooCommerce class on every product,
   from wc_get_product_class()) so none of this touches Flatsome's many other,
   unrelated uses of ".col-inner" / ".box-text" elsewhere on the site. */
.type-product .col-inner {
	display: flex;
	flex-direction: column;
}

.type-product .product-small.box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.type-product .box-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.type-product .box-text > .button {
	margin-top: auto;
}

/* The gifted (discounted) price's own colour — only ever present when the
   "Price colour" field is set, so the rule only has a chance to run then; the
   theme's own sale-price colour is untouched otherwise. Targets WooCommerce's
   price-amount markup too, since a theme styling that more specifically would
   otherwise win over a plain "ins" rule. */
.cutpopup-bg-gifted-price ins,
.cutpopup-bg-gifted-price ins .woocommerce-Price-amount {
	color: var( --cutpopup-bg-gifted-price-color );
}

/* ---- split layout ("Image" setting on the Pop-up tab) ---- */

.cutpopup-bg-panel--split {
	max-width: 880px;
	padding: 0;
	overflow: hidden; /* the image bleeds to the panel's own rounded corners */
}

.cutpopup-bg-columns {
	display: flex;
	max-height: inherit; /* the panel's own cap, so a tall column can scroll instead of being clipped */
}

.cutpopup-bg-col-image {
	position: relative;
	flex: 1 1 50%;
	order: 2; /* image on the right by default */
	min-height: 320px;
	background: #f0f0f0; /* shows while the image loads, and if it can't */
}

.cutpopup-bg-col-content {
	flex: 1 1 50%;
	order: 1;
	max-height: inherit;
	overflow-y: auto; /* a form taller than the panel scrolls here rather than being cut off */
}

/* Once the shopper has already given their date of birth (the result or the
   gift-already-held view), the image column drops out and content takes the
   full width — toggled by JS alongside which step is showing. */
.cutpopup-bg-columns--no-image .cutpopup-bg-col-image {
	display: none;
}

.cutpopup-bg-columns--no-image .cutpopup-bg-col-content {
	flex: 1 1 100%;
}

.cutpopup-bg-panel--img-left .cutpopup-bg-col-image {
	order: 1;
}

.cutpopup-bg-panel--img-left .cutpopup-bg-col-content {
	order: 2;
}

.cutpopup-bg-side-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cutpopup-bg-panel--split .cutpopup-bg-body {
	width: 100%;
	padding: 40px 36px;
}

.cutpopup-bg-x--split {
	top: 0;
	width: 40px;
	height: 40px;
	color: #111;
	font-size: 30px;
}

@media ( max-width: 480px ) {
	/* Full screen: the image always on top, the form below, regardless of the
	   desktop position setting. */
	.cutpopup-bg-modal--split {
		padding: 0;
	}

	.cutpopup-bg-panel--split {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		border-radius: 0;
	}

	.cutpopup-bg-columns {
		flex-direction: column;
		height: 100%;
		overflow-y: auto;
	}

	.cutpopup-bg-col-image,
	.cutpopup-bg-panel--img-left .cutpopup-bg-col-image {
		order: 0;
		flex: 0 0 auto;
		min-height: 0;
		height: 38vh;
	}

	.cutpopup-bg-col-content,
	.cutpopup-bg-panel--img-left .cutpopup-bg-col-content {
		order: 1;
		flex: 1 1 auto;
	}

	.cutpopup-bg-panel--split .cutpopup-bg-body {
		padding: 26px 20px 22px;
	}
}

/* ---- result ---- */

.cutpopup-bg-badge {
	font-size: 40px;
	line-height: 1;
	margin-bottom: 10px;
}

.cutpopup-bg-badge-img {
	display: inline-block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.cutpopup-bg-deal {
	margin: 0 0 12px;
	color: var( --cutpopup-bg-accent, #c2185b );
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}

.cutpopup-bg-products {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	margin: 18px 0 4px;
}

/* Three per row once there is room — the split layout's wide panel only (see
   the media query below); the narrow classic panel stays at two, where a
   third column would be too cramped to hold an image, a name and a button. */
@media ( min-width: 481px ) {
	.cutpopup-bg-panel--split .cutpopup-bg-products {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* A CSS Grid row already stretches every item in it to the tallest one's
   height (the default align-items: stretch) — turning each card into a flex
   column just gives the button somewhere to land: margin-top: auto pushes it
   to that shared bottom edge regardless of how many lines the name above it
   wrapped to. */
.cutpopup-bg-product {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 1.35;
}

.cutpopup-bg-product-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* The reward panel's own "Add to cart" button — every visual detail comes
   from the Pop-up tab's own settings (the --cutpopup-bg-atc-* variables),
   not the theme's button styles. */
.cutpopup-bg-add-to-cart {
	display: inline-block;
	margin-top: auto;
	padding: 8px 14px;
	border-style: solid;
	border-width: var( --cutpopup-bg-atc-border-width, 0 );
	border-color: var( --cutpopup-bg-atc-border-color, transparent );
	border-radius: var( --cutpopup-bg-atc-radius, 7px );
	background: var( --cutpopup-bg-atc-bg, #c2185b );
	color: var( --cutpopup-bg-atc-text, #fff );
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s;
}

.cutpopup-bg-add-to-cart:hover {
	filter: brightness( 0.92 );
	color: var( --cutpopup-bg-atc-text, #fff );
}

.cutpopup-bg-add-to-cart--full {
	display: block;
	width: 100%;
}

.cutpopup-bg-add-to-cart.loading {
	opacity: 0.6;
	pointer-events: none;
}

.cutpopup-bg-add-to-cart.added::after {
	content: ' ✓';
}

/* The "View cart" link wc-add-to-cart.js inserts right after the button once
   the item is in the cart. */
.cutpopup-bg-product .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	text-align: center;
	color: var( --cutpopup-bg-accent, #c2185b );
	text-decoration: underline;
}

.cutpopup-bg-product img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 6px;
}

.cutpopup-bg-name {
	display: block;
	margin-bottom: 2px;
}

.cutpopup-bg-price {
	display: block;
	font-weight: 600;
}

.cutpopup-bg-price del {
	opacity: 0.55;
	font-weight: 400;
	margin-right: 4px;
}

.cutpopup-bg-expiry {
	margin: 14px 0 0;
	color: #8a8a8a;
	font-size: 12px;
}

/* ---- reminder bar ---- */

.cutpopup-bg-bar {
	position: fixed;
	bottom: 16px;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc( 100vw - 24px );
	padding: 10px 12px 10px 14px;
	border-radius: 999px;
	background: var( --cutpopup-bg-bar-bg, #111 );
	color: var( --cutpopup-bg-bar-text, #fff );
	font-size: 13px;
	line-height: 1.3;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
	cursor: pointer; /* clicking the bar opens the pop-up, same as the floating button would */
}

.cutpopup-bg-bar--center {
	left: 50%;
	transform: translateX( -50% );
}

.cutpopup-bg-bar--left {
	left: 16px;
}

.cutpopup-bg-bar--right {
	right: 16px;
}

.cutpopup-bg-bar-gift {
	font-size: 16px;
}

.cutpopup-bg-bar-icon-img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.cutpopup-bg-bar-text strong {
	margin-right: 6px;
}

.cutpopup-bg-bar-time {
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.14 ); /* fallback for browsers without color-mix() */
	background: color-mix( in srgb, currentColor 14%, transparent );
	font-variant-numeric: tabular-nums;
}

.cutpopup-bg-bar-time[hidden] {
	display: none;
}

/* Same pill, reused on the reward panel's CTA — the bar's flex `gap` doesn't reach here. */
.cutpopup-bg-cta .cutpopup-bg-bar-time {
	margin-left: 8px;
}

.cutpopup-bg-bar-x {
	border: 0;
	background: none;
	color: currentColor;
	opacity: 0.65;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

.cutpopup-bg-bar-x:hover {
	opacity: 1;
}

body.cutpopup-bg-open {
	overflow: hidden;
}

/* ---- product-page countdown bar — under the price, single product page only ---- */

.cutpopup-bg-product-bar {
	margin: 14px 0;
	width: 100%;
}

.cutpopup-bg-product-bar-text {
	margin: 0 0 6px;
	color: var( --cutpopup-bg-countdown-color, #c2185b );
	font-size: 14px;
	font-weight: 600;
}

.cutpopup-bg-product-bar-track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #e4e4e4;
	overflow: hidden;
}

/* Tall enough to hold the timer pill when it sits inside the track. */
.cutpopup-bg-product-bar-track--tall {
	height: 34px;
}

.cutpopup-bg-product-bar-fill {
	height: 100%;
	width: 0; /* JS grows this, left-to-right, as time passes */
	border-radius: inherit;
	background: var( --cutpopup-bg-countdown-color, #c2185b );
	transition: width 1s linear;
}

/* A real <p>, so it reads in the theme's own paragraph typography rather than
   a size/colour of our choosing — only the spacing and the digit alignment
   (so "1" isn't narrower than "8" and the numbers don't jitter) are ours. */
.cutpopup-bg-product-bar-timer {
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}

.cutpopup-bg-product-bar-timer[hidden] {
	display: none;
}

/* Inside the track: a pill on its right edge, readable over the fill or the
   bare track behind it either way. */
.cutpopup-bg-product-bar-timer--inside {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY( -50% );
	margin-top: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.6 ); /* fallback for browsers without color-mix() */
	background: color-mix( in srgb, #fff 60%, transparent );
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
}

/* Replaces the track entirely when its "Progress track" switch is off. */
.cutpopup-bg-product-bar-end {
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: var( --cutpopup-bg-product-bar-end-bg, #e8491c );
	color: var( --cutpopup-bg-product-bar-end-text, #fff );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- floating button ---- */

.cutpopup-bg-fab {
	position: fixed;
	bottom: 20px;
	overflow: visible; /* the has-gift marker sits just outside the button's own edge */
	z-index: 99980;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.cutpopup-bg-fab--right {
	right: 20px;
}

.cutpopup-bg-fab--left {
	left: 20px;
}

.cutpopup-bg-fab-icon {
	line-height: 1;
}

/* A shopper already holding a gift gets a small marker on the button itself. */
.cutpopup-bg-fab--has-gift::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #2e9e4c;
}

/* "Button" style: icon and/or label, coloured from the settings. */
.cutpopup-bg-fab--button {
	gap: 8px;
	padding: 12px 18px;
	border-width: var( --cutpopup-bg-fab-border-width, 0 );
	border-radius: var( --cutpopup-bg-fab-radius, 999px );
	border-color: var( --cutpopup-bg-fab-border-color, transparent );
	background: var( --cutpopup-bg-fab-bg, var( --cutpopup-bg-accent, #c2185b ) );
	color: var( --cutpopup-bg-fab-label-color, #fff );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.22 );
}

.cutpopup-bg-fab--button .cutpopup-bg-fab-label {
	color: var( --cutpopup-bg-fab-label-color, inherit );
}

.cutpopup-bg-fab--button .cutpopup-bg-fab-icon {
	font-size: 18px;
}

.cutpopup-bg-fab--button .cutpopup-bg-fab-image {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: 4px;
}

/* "Icon only" style: just the icon or image floating on the page, no container. */
.cutpopup-bg-fab--icon-only {
	width: var( --cutpopup-bg-fab-size, 56px );
	height: var( --cutpopup-bg-fab-size, 56px );
	padding: 0;
	border-width: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.cutpopup-bg-fab--icon-only .cutpopup-bg-fab-icon {
	font-size: calc( var( --cutpopup-bg-fab-size, 56px ) * 0.5 );
}

.cutpopup-bg-fab-image {
	display: block;
	width: 60%;
	height: 60%;
	margin: auto;
	object-fit: contain;
	border-radius: 0; /* a rounded <img> clips its own content — never crop the upload */
}

/* ---- hover effects (chosen in the settings; default is none) ---- */

.cutpopup-bg-fab--hover-scale:hover {
	transform: scale( 1.06 );
}

.cutpopup-bg-fab--hover-lift:hover {
	transform: translateY( -3px );
	box-shadow: 0 16px 36px rgba( 0, 0, 0, 0.3 );
}

/* No container to cast a shadow from once the background is transparent. */
.cutpopup-bg-fab--icon-only.cutpopup-bg-fab--hover-lift:hover {
	box-shadow: none;
}

.cutpopup-bg-fab--hover-brightness:hover {
	filter: brightness( 0.92 );
}

/* ---- attention animations (chosen in the settings; default is none) ----
   Each keyframe set spends most of its cycle standing still, so the button
   only "nudges" for a moment every few seconds instead of looping constantly. */

.cutpopup-bg-fab--attn-pulse {
	animation: cutpopup-bg-fab-pulse 3.2s ease-in-out infinite;
}

@keyframes cutpopup-bg-fab-pulse {
	0%, 74%, 100% {
		transform: scale( 1 );
	}
	84% {
		transform: scale( 1.09 );
	}
}

.cutpopup-bg-fab--attn-shake {
	animation: cutpopup-bg-fab-shake 4s ease-in-out infinite;
}

@keyframes cutpopup-bg-fab-shake {
	0%, 70%, 100% {
		transform: rotate( 0deg );
	}
	73% {
		transform: rotate( -6deg );
	}
	76% {
		transform: rotate( 6deg );
	}
	79% {
		transform: rotate( -4deg );
	}
	82% {
		transform: rotate( 4deg );
	}
	85% {
		transform: rotate( 0deg );
	}
}

.cutpopup-bg-fab--attn-bounce {
	animation: cutpopup-bg-fab-bounce 3.6s ease-in-out infinite;
}

@keyframes cutpopup-bg-fab-bounce {
	0%, 68%, 100% {
		transform: translateY( 0 );
	}
	76% {
		transform: translateY( -10px );
	}
	84% {
		transform: translateY( 0 );
	}
	90% {
		transform: translateY( -4px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cutpopup-bg-fab {
		animation: none !important;
	}
}

@media ( max-width: 480px ) {
	/* Collapse to an icon-only circle — unless there is no icon to fall back to. */
	.cutpopup-bg-fab--button:not( .cutpopup-bg-fab--no-icon ) .cutpopup-bg-fab-label {
		display: none;
	}

	.cutpopup-bg-fab--button:not( .cutpopup-bg-fab--no-icon ) {
		padding: 14px;
		border-radius: 50%;
	}

	.cutpopup-bg-fab {
		bottom: 16px;
	}

	.cutpopup-bg-fab--right {
		right: 16px;
	}

	.cutpopup-bg-fab--left {
		left: 16px;
	}
}

@media ( max-width: 480px ) {
	.cutpopup-bg-body {
		padding: 26px 18px 22px;
	}

	.cutpopup-bg-title {
		font-size: 21px;
	}

	/* Narrow screens: give the month column the room it needs for "September"
	   and claw back a few pixels from the padding around the chevron. */
	.cutpopup-bg-fields {
		grid-template-columns: 0.8fr 1.55fr 1fr;
		gap: 8px;
	}

	.cutpopup-bg-body .cutpopup-bg-fields select,
	.cutpopup-bg-inline .cutpopup-bg-fields select {
		padding: 0 28px 0 10px;
		background-position: right 10px center;
	}

	.cutpopup-bg-deal {
		font-size: 26px;
	}

	.cutpopup-bg-bar {
		font-size: 12px;
	}
}