/**
 * Public styles for Lifetime Sticky Bar.
 * Uses same classes as editor preview for visual consistency.
 *
 * @package Lifetime_Sticky_Bar
 * @author  Zbigniew Orlowski
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
	--lftmsb-z-index: 999999;
	--lftmsb-transition: 0.3s ease;
	--lftmsb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--lftmsb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--lftmsb-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
	--lftmsb-radius-sm: 6px;
	--lftmsb-radius-md: 12px;
	--lftmsb-slate-50: #f8fafc;
	--lftmsb-slate-100: #f1f5f9;
	--lftmsb-slate-200: #e2e8f0;
	--lftmsb-slate-300: #cbd5e1;
	--lftmsb-slate-400: #94a3b8;
	--lftmsb-slate-600: #475569;
	--lftmsb-slate-700: #334155;
	--lftmsb-slate-800: #1e293b;
	--lftmsb-slate-900: #0f172a;
}

/* ==========================================================================
   Base Bar Styles (matching preview)
   ========================================================================== */
.lftmsb-preview-bar {
	position: fixed;
	z-index: var(--lftmsb-z-index);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.lftmsb-preview-bar *,
.lftmsb-preview-bar *::before,
.lftmsb-preview-bar *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Position Variants
   ========================================================================== */
.lftmsb-preview-bar-top {
	top: 0;
	left: 0;
	right: 0;
}

.lftmsb-preview-bar-bottom {
	bottom: 0;
	left: 0;
	right: 0;
}

.lftmsb-preview-bar-floating {
	bottom: 24px;
	right: 24px;
	left: auto;
	border-radius: var(--lftmsb-radius-md);
	padding: 16px 20px;
}

.lftmsb-preview-bar-left {
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	height: 100%;
	width: auto;
}

.lftmsb-preview-bar-right {
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	height: 100%;
	width: auto;
}

/* ==========================================================================
   WordPress Admin Bar Offset
   The toolbar is 32px (desktop) / 46px (≤782px) tall and position:fixed,
   so top-anchored bars must start below it for logged-in users.
   ========================================================================== */
body.admin-bar .lftmsb-preview-bar-top,
body.admin-bar .lftmsb-preview-bar-left,
body.admin-bar .lftmsb-preview-bar-right {
	top: 32px;
}

/* Vertical bars span top→bottom; with the toolbar offset their height
   must shrink accordingly, or the centered content sits too low. */
body.admin-bar .lftmsb-preview-bar-left,
body.admin-bar .lftmsb-preview-bar-right {
	height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .lftmsb-preview-bar-top,
	body.admin-bar .lftmsb-preview-bar-left,
	body.admin-bar .lftmsb-preview-bar-right {
		top: 46px;
	}

	body.admin-bar .lftmsb-preview-bar-left,
	body.admin-bar .lftmsb-preview-bar-right {
		height: calc(100% - 46px);
	}
}

/* ==========================================================================
   Vertical bars (left / right): the top bar turned on its side
   The content row (message + widget + button) is laid out exactly like a
   top bar, upright and on one line, and the whole row is rotated 90deg to
   run along the screen edge. Nothing inside gets a vertical layout of its
   own: the timer, coupon, progress bar and lead form render as they do in
   a top bar. The bar itself is a fixed column: its width is the configured
   bar height (inline min-width) and its height the viewport.
   Direction: lftmsb-vertical-top_to_bottom reads downward (row rotated
   clockwise), lftmsb-vertical-bottom_to_top reads upward (counter-clockwise).
   Fit: lftmsb-public.js (fitVerticalBar) scales a row longer than the bar
   via --lftmsb-vscale (not below --lftmsb-vscale-min; past that the message
   wraps to two lines) and lifts the fallback max-width below. Without JS
   the max-width applies and only the message truncates with an ellipsis.
   ========================================================================== */
.lftmsb-preview-bar-left,
.lftmsb-preview-bar-right {
	--lftmsb-vrot: 90deg;         /* 90deg: reads top-to-bottom, -90deg: bottom-to-top */
	--lftmsb-vreserve: 16px;      /* space kept free at each end of the bar */
	--lftmsb-vscale-min: 0.75;    /* smallest fit scale; below it the message wraps to 2 lines */
	writing-mode: horizontal-tb;
	width: auto;                  /* inline min-width (bar height setting) is the thickness */
	min-width: 48px;
	padding: 0 !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	overflow: clip;
	container-type: size;         /* 100cqh = bar height for the no-JS max-width */
}

.lftmsb-preview-bar-left.lftmsb-vertical-bottom_to_top,
.lftmsb-preview-bar-right.lftmsb-vertical-bottom_to_top {
	--lftmsb-vrot: -90deg;
}

/* Keep the rotated row clear of the close button pinned at one end. */
.lftmsb-preview-bar-left:has(> .lftmsb-preview-bar-close),
.lftmsb-preview-bar-right:has(> .lftmsb-preview-bar-close) {
	--lftmsb-vreserve: 44px;
}

/* The content row: sized to its content, centred on the bar, then rotated
   around its centre. !important beats the inline width/height/max-height
   the renderer emits for the horizontal layout. */
.lftmsb-preview-bar-left .lftmsb-preview-bar-content,
.lftmsb-preview-bar-right .lftmsb-preview-bar-content {
	flex: none !important;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	width: max-content !important;
	max-width: calc(100cqh - 2 * var(--lftmsb-vreserve));
	height: auto !important;
	max-height: none !important;
	white-space: nowrap;
	transform: rotate(var(--lftmsb-vrot)) scale(var(--lftmsb-vscale, 1));
	transform-origin: center center;
}

/* Message: one upright line; it is the only element allowed to shrink
   (ellipsis) when the row is constrained. */
.lftmsb-preview-bar-left .lftmsb-preview-bar-message,
.lftmsb-preview-bar-right .lftmsb-preview-bar-message {
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Two-line message: fitVerticalBar adds this when one line would have to
   shrink below --lftmsb-vscale-min (a third line is clamped). */
.lftmsb-preview-bar-left .lftmsb-preview-bar-message.lftmsb-vwrap,
.lftmsb-preview-bar-right .lftmsb-preview-bar-message.lftmsb-vwrap {
	white-space: normal;
	text-wrap: balance;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Widgets keep their horizontal size and look, exactly as in a top bar. */
.lftmsb-preview-bar-left .lftmsb-preview-bar-countdown,
.lftmsb-preview-bar-right .lftmsb-preview-bar-countdown,
.lftmsb-preview-bar-left .lftmsb-preview-bar-button,
.lftmsb-preview-bar-right .lftmsb-preview-bar-button,
.lftmsb-preview-bar-left .lftmsb-preview-coupon,
.lftmsb-preview-bar-right .lftmsb-preview-coupon,
.lftmsb-preview-bar-left .lftmsb-scratch-off-container,
.lftmsb-preview-bar-right .lftmsb-scratch-off-container,
.lftmsb-preview-bar-left .lftmsb-shipping-progress,
.lftmsb-preview-bar-right .lftmsb-shipping-progress,
.lftmsb-preview-bar-left .lftmsb-preview-lead-form,
.lftmsb-preview-bar-right .lftmsb-preview-lead-form,
.lftmsb-preview-bar-left .lftmsb-video-bubble,
.lftmsb-preview-bar-right .lftmsb-video-bubble {
	flex: none;
}

/* Lead form stays on one line (the mobile rules wrap it in a top bar). */
.lftmsb-preview-bar-left .lftmsb-preview-lead-form,
.lftmsb-preview-bar-right .lftmsb-preview-lead-form {
	flex-wrap: nowrap;
	width: auto;
}

/* The row is already rotated; the bubble must not rotate again. */
.lftmsb-preview-bar-left .lftmsb-video-bubble-vertical,
.lftmsb-preview-bar-right .lftmsb-video-bubble-vertical {
	transform: none;
}

/* Closing: slide out through the edge the bar sits on. */
.lftmsb-preview-bar.lftmsb-preview-bar-left.lftmsb-closing {
	transform: translateX(-100%);
}

.lftmsb-preview-bar.lftmsb-preview-bar-right.lftmsb-closing {
	transform: translateX(100%);
}

/* ==========================================================================
   Content Elements
   ========================================================================== */
.lftmsb-preview-bar-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.lftmsb-preview-bar-message {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

/* Text Alignment Classes */
.lftmsb-text-left {
	text-align: left !important;
}

.lftmsb-text-center {
	text-align: center !important;
}

.lftmsb-text-right {
	text-align: right !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.lftmsb-preview-bar-button {
	font-size: 14px;
	font-weight: 700;
	height: 36px;
	padding: 0 24px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.lftmsb-preview-bar-button:hover {
	opacity: 0.9;
	transform: scale(1.02);
}

/* ==========================================================================
   Close Button
   ========================================================================== */
.lftmsb-preview-bar-close {
	position: absolute;
	background: transparent;
	border: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 20;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lftmsb-preview-bar-close:hover {
	opacity: 1;
}

.lftmsb-preview-bar-close svg {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Coupon Element
   ========================================================================== */
.lftmsb-preview-coupon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* ==========================================================================
   Countdown Timer
   ========================================================================== */
.lftmsb-preview-countdown,
.lftmsb-preview-bar-countdown {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: ui-monospace, monospace;
	font-weight: 700;
	font-size: 14px;
}

.lftmsb-countdown-unit,
.lftmsb-preview-bar-countdown-unit {
	background: rgba(0, 0, 0, 0.2);
	padding: 4px 8px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
}

.lftmsb-countdown-sep {
	opacity: 0.7;
}

.lftmsb-countdown-value {
	font-family: ui-monospace, monospace;
}

/* ==========================================================================
   Timer Design Variants (matching admin preview)
   ========================================================================== */

/* Plain Timer */
.lftmsb-timer-plain {
	font-family: ui-monospace, monospace;
	font-weight: 700;
	letter-spacing: 0.1em;
}


/* Classic Timer (default) */
.lftmsb-timer-classic .lftmsb-timer-unit {
	background: rgba(0, 0, 0, 0.2);
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
}

/* Solid Timer */
.lftmsb-timer-solid {
	color: #000;
}

.lftmsb-timer-solid .lftmsb-timer-unit {
	background: #fff;
	padding: 4px 6px;
	border-radius: 6px;
	min-width: 28px;
	text-align: center;
	box-shadow: var(--lftmsb-shadow-sm);
}

/* Outline Timer */
.lftmsb-timer-outline .lftmsb-timer-unit {
	border: 1px solid currentColor;
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
}

/* Circle Timer */
.lftmsb-timer-circle {
	gap: 6px;
	font-size: 12px;
}

.lftmsb-timer-circle .lftmsb-timer-unit {
	width: 32px;
	height: 32px;
	border: 2px solid currentColor;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Pill Timer */
.lftmsb-timer-pill {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	padding: 4px 12px;
	letter-spacing: 0.1em;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Split Timer */
.lftmsb-timer-split {
	background: #fff;
	color: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--lftmsb-shadow-sm);
	border: 1px solid var(--lftmsb-slate-200);
}

.lftmsb-timer-split .lftmsb-timer-unit {
	padding: 4px 8px;
	background: var(--lftmsb-slate-50);
}

.lftmsb-timer-split .lftmsb-timer-divider {
	width: 1px;
	height: 16px;
	background: var(--lftmsb-slate-300);
}

/* Digital Timer */
.lftmsb-timer-digital {
	background: rgba(0, 0, 0, 0.8);
	color: #34d399;
	padding: 4px 12px;
	border-radius: 4px;
	border: 1px solid #065f46;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
	text-shadow: 0 0 5px rgba(52, 211, 153, 0.5);
}

/* Cards Timer */
.lftmsb-timer-cards {
	color: var(--lftmsb-slate-800);
}

.lftmsb-timer-cards .lftmsb-timer-unit {
	background: #fff;
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
	box-shadow: var(--lftmsb-shadow-md);
	border-bottom: 2px solid var(--lftmsb-slate-200);
}

/* Neon Timer */
.lftmsb-timer-neon {
	border: 2px solid currentColor;
	border-radius: 8px;
	padding: 2px 12px;
	text-shadow: 0 0 10px currentColor;
	box-shadow: inset 0 0 10px currentColor;
}

/* Bubbles Timer */
.lftmsb-timer-bubbles {
	gap: 6px;
	font-size: 12px;
	color: #fff;
}

.lftmsb-timer-bubbles .lftmsb-timer-unit {
	width: 32px;
	height: 32px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	box-shadow: var(--lftmsb-shadow-sm);
}

/* Blocks Timer */
.lftmsb-timer-blocks {
	gap: 2px;
	color: #fff;
}

.lftmsb-timer-blocks .lftmsb-timer-unit {
	background: var(--lftmsb-slate-900);
	padding: 4px 6px;
	min-width: 28px;
	text-align: center;
}

/* Sketch Timer */
.lftmsb-timer-sketch .lftmsb-timer-unit {
	border: 2px dashed currentColor;
	padding: 4px 6px;
	border-radius: 8px;
	min-width: 28px;
	text-align: center;
}

/* Flip Timer */
.lftmsb-timer-flip {
	color: #fff;
}

.lftmsb-timer-flip .lftmsb-timer-unit {
	background: linear-gradient(to bottom, var(--lftmsb-slate-700), var(--lftmsb-slate-800));
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
	border-bottom: 2px solid rgba(0, 0, 0, 0.2);
	box-shadow: var(--lftmsb-shadow-sm);
}

/* Cyber Timer */
.lftmsb-timer-cyber {
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
	padding: 4px 12px;
	gap: 8px;
}

.lftmsb-timer-cyber .lftmsb-timer-divider {
	opacity: 0.5;
}

/* Elegant Timer */
.lftmsb-timer-elegant {
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 16px;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.lftmsb-timer-elegant .lftmsb-timer-label {
	font-size: 10px;
	font-style: normal;
	opacity: 0.7;
	margin-left: 2px;
}

/* Paper Timer */
.lftmsb-timer-paper {
	gap: 8px;
	color: var(--lftmsb-slate-800);
	transform: rotate(-1deg);
}

.lftmsb-timer-paper .lftmsb-timer-unit {
	background: #fef3c7;
	padding: 4px 6px;
	box-shadow: var(--lftmsb-shadow-sm);
	border: 1px solid #fde68a;
}

.lftmsb-timer-paper .lftmsb-timer-unit:nth-child(1) {
	transform: rotate(2deg);
}

.lftmsb-timer-paper .lftmsb-timer-unit:nth-child(2) {
	transform: rotate(-1deg);
}

.lftmsb-timer-paper .lftmsb-timer-unit:nth-child(3) {
	transform: rotate(1deg);
}

/* Underline Timer */
.lftmsb-timer-underline {
	gap: 8px;
}

.lftmsb-timer-underline .lftmsb-timer-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lftmsb-timer-underline .lftmsb-timer-line {
	width: 100%;
	height: 2px;
	background: currentColor;
	opacity: 0.5;
	margin-top: 2px;
}

/* Thick Timer */
.lftmsb-timer-thick {
	border: 4px solid currentColor;
	padding: 2px 8px;
	font-weight: 900;
	letter-spacing: -0.05em;
}

/* LCD Timer */
.lftmsb-timer-lcd {
	background: #000;
	color: #84cc16;
	padding: 2px 8px;
	border: 2px solid #3f6212;
	border-radius: 2px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lftmsb-timer-lcd .lftmsb-timer-unit {
	opacity: 0.8;
}

@keyframes lftmsb-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.lftmsb-timer-lcd .lftmsb-timer-colon {
	animation: lftmsb-blink 1s ease-in-out infinite;
}

/* ==========================================================================
   Lead Form
   ========================================================================== */
.lftmsb-preview-bar-form,
.lftmsb-preview-lead-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftmsb-preview-bar-input,
.lftmsb-preview-lead-input {
	padding: 8px 16px;
	font-size: 14px;
	border: none;
	border-radius: var(--lftmsb-radius-sm);
	background: rgba(255, 255, 255, 0.9);
	color: var(--lftmsb-slate-900);
	outline: none;
}

.lftmsb-preview-bar-input::placeholder,
.lftmsb-preview-lead-input::placeholder {
	color: var(--lftmsb-slate-400);
}

.lftmsb-preview-bar-input:focus,
.lftmsb-preview-lead-input:focus {
	background: #fff;
}

/* ==========================================================================
   Coupon Styles
   ========================================================================== */
.lftmsb-preview-coupon-dashed {
	border: 2px dashed currentColor;
	background: transparent;
}

.lftmsb-preview-coupon-solid {
	border: none;
}

.lftmsb-preview-coupon-outline {
	border: 2px solid currentColor;
	background: transparent;
}

/* ==========================================================================
   Shipping Progress
   ========================================================================== */
.lftmsb-shipping-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.lftmsb-shipping-progress {
	width: 100%;
	max-width: 200px;
	height: 6px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
	overflow: hidden;
}

.lftmsb-shipping-progress-bar {
	height: 100%;
	border-radius: 3px;
	transition: width 0.5s ease;
}

/* Progress Bar Component */
.lftmsb-progress-bar {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 9999px;
	overflow: hidden;
	position: relative;
}

.lftmsb-progress-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: #fff;
	transition: width 0.5s ease-out;
	border-radius: 9999px;
}

.lftmsb-progress-bar-horizontal {
	height: 12px;
	width: 128px;
}

.lftmsb-progress-bar-vertical {
	width: 12px;
	height: 128px;
}

.lftmsb-progress-bar-vertical .lftmsb-progress-bar-fill {
	width: 100%;
	height: 0;
	bottom: 0;
	top: auto;
	transition: height 0.5s ease-out;
}

/* ==========================================================================
   Button Effects
   ========================================================================== */
@keyframes lftmsb-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

@keyframes lftmsb-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes lftmsb-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
	20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes lftmsb-glow {
	0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
	50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.9); }
}

.lftmsb-effect-pulse {
	animation: lftmsb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.lftmsb-effect-bounce {
	animation: lftmsb-bounce 1s ease-in-out infinite;
}

.lftmsb-effect-shake {
	animation: lftmsb-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
	animation-delay: 2s;
}

.lftmsb-effect-glow {
	animation: lftmsb-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================================================
   Attention Seekers
   ========================================================================== */
@keyframes lftmsb-attention-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes lftmsb-attention-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes lftmsb-attention-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

.lftmsb-attention-pulse {
	animation: lftmsb-attention-pulse 2s ease-in-out infinite;
}

.lftmsb-attention-bounce {
	animation: lftmsb-attention-bounce 1s ease-in-out infinite;
}

.lftmsb-attention-shake {
	animation: lftmsb-attention-shake 0.5s ease-in-out infinite;
}

.lftmsb-attention-jello {
	animation: lftmsbJello 2s infinite;
}

@keyframes lftmsbJello {
	from, 11.1%, to { transform: translate3d(0, 0, 0); }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

.lftmsb-attention-rubberBand {
	animation: lftmsbRubberBand 2s infinite;
}

@keyframes lftmsbRubberBand {
	from { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, 0.75, 1); }
	40% { transform: scale3d(0.75, 1.25, 1); }
	50% { transform: scale3d(1.15, 0.85, 1); }
	65% { transform: scale3d(0.95, 1.05, 1); }
	75% { transform: scale3d(1.05, 0.95, 1); }
	to { transform: scale3d(1, 1, 1); }
}

.lftmsb-attention-tada {
	animation: lftmsbTada 2s infinite;
}

@keyframes lftmsbTada {
	from { transform: scale3d(1, 1, 1); }
	10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	to { transform: scale3d(1, 1, 1); }
}

/* ==========================================================================
   Entrance Animations
   ========================================================================== */

.lftmsb-entrance-slide_down {
	animation: lftmsbSlideDown 0.6s ease-out forwards;
}
@keyframes lftmsbSlideDown {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.lftmsb-entrance-slide_up {
	animation: lftmsbSlideUp 0.6s ease-out forwards;
}
@keyframes lftmsbSlideUp {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.lftmsb-entrance-slide_left {
	animation: lftmsbSlideLeft 0.6s ease-out forwards;
}
@keyframes lftmsbSlideLeft {
	from { transform: translateX(-100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.lftmsb-entrance-slide_right {
	animation: lftmsbSlideRight 0.6s ease-out forwards;
}
@keyframes lftmsbSlideRight {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.lftmsb-entrance-fade_in {
	animation: lftmsbFadeIn 0.8s ease-out forwards;
}
@keyframes lftmsbFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lftmsb-entrance-zoom_in {
	animation: lftmsbZoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes lftmsbZoomIn {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.lftmsb-entrance-bounce_in {
	animation: lftmsbBounceIn 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes lftmsbBounceIn {
	0% { opacity: 0; transform: scale3d(.3, .3, .3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(.9, .9, .9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(.97, .97, .97); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

.lftmsb-entrance-swing {
	transform-origin: top center;
	animation: lftmsbSwing 1s forwards;
}
@keyframes lftmsbSwing {
	20% { transform: rotate3d(0, 0, 1, 15deg); }
	40% { transform: rotate3d(0, 0, 1, -10deg); }
	60% { transform: rotate3d(0, 0, 1, 5deg); }
	80% { transform: rotate3d(0, 0, 1, -5deg); }
	100% { transform: rotate3d(0, 0, 1, 0deg); }
}

.lftmsb-entrance-flip_x {
	backface-visibility: visible !important;
	animation: lftmsbFlipInX 1s forwards;
}
@keyframes lftmsbFlipInX {
	from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
	40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
	60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
	80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
	to { transform: perspective(400px); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.lftmsb-preview-bar-content {
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center !important;
	}

	.lftmsb-preview-bar-message {
		white-space: normal;
		text-align: center;
		flex: 0 1 auto;
		min-width: 0;
	}


	/* Progress bar compact on mobile to share line with button */
	.lftmsb-shipping-progress {
		flex: 1 1 80px !important;
		max-width: 150px !important;
		width: auto !important;
	}

	/* Button stays compact on mobile */
	.lftmsb-preview-bar-button {
		flex: 0 0 auto;
		justify-content: center;
	}

	/* Coupon stays compact on mobile */
	.lftmsb-preview-coupon {
		flex: 0 0 auto;
		justify-content: center;
	}

	/* Countdown stays inline */
	.lftmsb-preview-bar-countdown {
		flex-shrink: 0;
	}

	.lftmsb-preview-lead-form {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.lftmsb-preview-lead-input {
		width: 100%;
		max-width: none;
	}

	.lftmsb-preview-bar-floating {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
}

/* ==========================================================================
   Hidden State (for JS control)
   ========================================================================== */
.lftmsb-preview-bar.lftmsb-hidden {
	display: none !important;
}

.lftmsb-preview-bar.lftmsb-pending {
	display: none !important;
}

.lftmsb-preview-bar.lftmsb-closing {
	opacity: 0;
	transform: translateY(-100%);
	transition: all 0.3s ease;
}

.lftmsb-preview-bar-bottom.lftmsb-closing {
	transform: translateY(100%);
}

/* ==========================================================================
   Attention seekers missing on the frontend (previously admin-only) +
   class alias for the editor value `rubber_band`.
   ========================================================================== */
.lftmsb-attention-wiggle {
	animation: lftmsbWiggle 2s ease-in-out infinite;
}
@keyframes lftmsbWiggle {
	0%, 50%, 100% { transform: rotate(0deg); }
	5%, 15% { transform: rotate(-3deg); }
	10%, 20% { transform: rotate(3deg); }
	25% { transform: rotate(0deg); }
}

.lftmsb-attention-pulse {
	animation: lftmsbPulseScale 2s infinite;
}
@keyframes lftmsbPulseScale {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.lftmsb-attention-shake {
	animation: lftmsbShake 3s cubic-bezier(.36,.07,.19,.97) infinite;
	transform: translate3d(0, 0, 0);
}
@keyframes lftmsbShake {
	0%, 50%, 100% { transform: translate3d(0, 0, 0); }
	5%, 15%, 25%, 35%, 45% { transform: translate3d(-1px, 0, 0); }
	10%, 20%, 30%, 40% { transform: translate3d(1px, 0, 0); }
}

.lftmsb-attention-heartbeat {
	animation: lftmsbHeartbeat 2s ease-in-out infinite;
}
@keyframes lftmsbHeartbeat {
	from { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; }
	10% { transform: scale(0.91); animation-timing-function: ease-in; }
	17% { transform: scale(0.98); animation-timing-function: ease-out; }
	33% { transform: scale(0.87); animation-timing-function: ease-in; }
	45% { transform: scale(1); animation-timing-function: ease-out; }
}

.lftmsb-attention-wobble {
	animation: lftmsbWobble 2s infinite;
}
@keyframes lftmsbWobble {
	0%, 100% { transform: translateX(0%); }
	15% { transform: translateX(-25%) rotate(-5deg); }
	30% { transform: translateX(20%) rotate(3deg); }
	45% { transform: translateX(-15%) rotate(-3deg); }
	60% { transform: translateX(10%) rotate(2deg); }
	75% { transform: translateX(-5%) rotate(-1deg); }
}

.lftmsb-attention-flash {
	animation: lftmsbFlash 3s infinite;
}
@keyframes lftmsbFlash {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
}

.lftmsb-attention-jello {
	animation: lftmsbJello 2s infinite;
	transform-origin: center;
}
@keyframes lftmsbJello {
	from, 11.1%, to { transform: translate3d(0, 0, 0); }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: skewX(-0.1953125deg) skewY(0.1953125deg); }
}

/* Editor stores `rubber_band`; keep the original camelCase class too. */
.lftmsb-attention-rubber_band {
	animation: lftmsbRubberBand 2s infinite;
}

/* ==========================================================================
   Device targeting — enforced with media queries (768px breakpoint).
   ========================================================================== */
@media screen and (max-width: 768px) {
	.lftmsb-preview-bar.lftmsb-devices-desktop {
		display: none !important;
	}
}

@media screen and (min-width: 769px) {
	.lftmsb-preview-bar.lftmsb-devices-mobile {
		display: none !important;
	}
}