/* Conversion Pro — popup engine (module 2): two display styles for v1 */

.cvp-popup {
	position: fixed;
	z-index: 100020;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cvp-popup.is-open {
	opacity: 1;
}

/* Center modal */
.cvp-popup--modal {
	top: 50%;
	left: 50%;
	transform: translate( -50%, -40% );
	width: 380px;
	max-width: 90vw;
}
.cvp-popup--modal.is-open {
	transform: translate( -50%, -50% );
}

/* Slide-in corner toast.
   bottom: 90px (not 20px) is deliberate -- the Coupons & Offers module's
   floating "Apply Offers" button (.cvp-open-offers-btn--floating, see
   coupons-drawer.css) sits at the same bottom-right corner (bottom: 20px;
   right: 20px) on any page it renders via the wp_footer fallback, e.g. the
   Blocks-based Cart page. Both are independent modules with no shared
   layout coordination, so without this offset the FOMO toast (z-index
   100020) fully covers and blocks clicks on the offers button (z-index
   99999) whenever both are visible at once. Stacking the toast above
   instead of on top of it keeps both reachable regardless of which one
   fires first. */
.cvp-popup--toast {
	bottom: 90px;
	right: -320px;
	width: 300px;
}
.cvp-popup--toast.is-open {
	right: 20px;
}

/* v0.19.72 — reported live as only really noticeable on hover: a plain
   borderless "x" at font-size 18px sits close enough to invisible against a
   white card that a customer can miss it's there at all until the cursor
   happens to land on it. Given an explicit filled circle + fixed opacity so
   it reads as an obviously-clickable close control at rest, not just on
   hover — !important on the base rule defends against any theme button
   reset (many themes zero out plain <button> opacity/background by
   default, which is the most likely explanation for the hover-only
   symptom actually reported). */
.cvp-popup__close {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	flex: 0 0 28px !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #f1f1f1 !important;
	border: none !important;
	border-radius: 50% !important;
	color: #333 !important;
	font-size: 18px !important;
	line-height: 28px !important;
	opacity: 1 !important;
	cursor: pointer;
	z-index: 2;
	white-space: nowrap;
	text-indent: 0;
	overflow: hidden;
}

.cvp-popup__close:hover {
	background: #e2e2e2 !important;
	color: #000 !important;
}

/* v0.19.75 — a heading (plain popup copy, unstyled) followed by the
   homepage offers-strip's own ticket-card design, reused verbatim
   (same .cvp-offer-card/__top/__icon/__headline/__detail/__footer/
   __code/__copy markup a popup author can paste straight from the
   homepage's own card generator) for visual consistency between the
   exit-intent popup and the on-site coupon cards — direct request after
   the first plain-text version. Defined here rather than relying on
   homepage.css, since homepage.css/homepage.js are only enqueued on the
   homepage/Sale/category pages (see CVP_Homepage::enqueue_assets()), not
   on every page a popup can target (this one's on Checkout). Values
   copied from homepage.css's own rules, scoped under .cvp-popup so they
   only apply inside a popup and can't leak into/be overridden by any
   other .cvp-offer-card instance on the same page. */
.cvp-popup__content h3 {
	margin: 0 0 8px;
	padding-right: 30px;
	font-size: 20px;
	line-height: 1.3;
}

.cvp-popup__content p {
	margin: 0 0 14px;
	font-size: 14px;
	color: var( --text-secondary, #666 );
}

.cvp-popup .cvp-offer-card {
	background: #FFF6F6;
	border: 1.5px dashed #C4080E;
	border-radius: 10px;
	padding: 14px 18px;
	box-sizing: border-box;
}

.cvp-popup .cvp-offer-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.cvp-popup .cvp-offer-card__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-flex;
}
.cvp-popup .cvp-offer-card__icon svg {
	width: 100%;
	height: 100%;
}

.cvp-popup .cvp-offer-card__headline {
	font-weight: 700;
	font-size: 15px;
	color: #C4080E;
}

.cvp-popup .cvp-offer-card__detail {
	font-size: 13px;
	color: var( --text-secondary, #666 );
	margin-bottom: 10px;
}

.cvp-popup .cvp-offer-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px dashed #C4080E;
	padding-top: 8px;
}

.cvp-popup .cvp-offer-card__code {
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	color: #C4080E;
	letter-spacing: 0.02em;
}

.cvp-popup .cvp-offer-card__copy {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	color: #C4080E;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.cvp-popup .cvp-offer-card__copy svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.cvp-popup .cvp-offer-card__copy.is-copied {
	color: #0F6E56;
}