/* Conversion Pro — Coupons & Offers drawer (module 3)
   Re-skinned to match www.buy.stickme.in's "Apply Offers" panel exactly —
   tokens captured via getComputedStyle() on the live reference (cart/address
   step, offers drawer opened via "View all"): drawer width 390px, offer
   title/savings green #20994C, outlined red #C4080E apply buttons (white
   fill, not solid red), amber #C9941A "Best Deal" corner ribbon, Amazon
   Ember type, 6px/8px radii throughout. */

.cvp-open-offers-btn {
	background: #fff;
	border: 2px solid #C4080E;
	color: #000;
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 400;
	font-size: 16px;
	font-family: "Amazon Ember", Inter, sans-serif;
	cursor: pointer;
}

/* wp_footer fallback variant (Blocks-based Cart page — see
   class-cvp-coupons-drawer.php's maybe_render_on_blocks_cart()): the
   button lands at the very end of the document body instead of inline
   above the cart table, so it needs its own fixed position to actually
   be reachable rather than sitting invisibly below the page footer. */
.cvp-open-offers-btn--floating {
	/* The reference site has no floating "Apply Offers" trigger — its
	   drawer only opens from the inline "Offers & Discounts / View all"
	   summary row (see .cvp-offers-summary below), which the Blocks cart
	   page now always gets via initOffersSummaryRow(). The wp_footer
	   fallback in CVP_Coupons_Drawer::maybe_render_on_blocks_cart() still
	   needs to render this button+drawer pair so #cvp-offers-drawer exists
	   in the DOM for that row to open, but the button itself would be a
	   redundant second entry point, so it's hidden rather than removed. */
	display: none !important;
}

.cvp-offers-drawer {
	position: fixed;
	top: 0;
	right: -390px;
	width: 390px;
	max-width: 90vw;
	height: 100vh;
	background: #fff;
	box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
	z-index: 100000;
	transition: right 0.25s ease;
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
	overflow-y: auto;
	font-family: "Amazon Ember", Inter, sans-serif;
}

.cvp-offers-drawer.is-open {
	right: 0;
}

.cvp-offers-drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 400;
	color: #000;
}
.cvp-offers-drawer__header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
}

/* Reset the theme's default button chrome (Motta renders bare <button>s as
   big rounded/filled pills) — this is just a plain "×" close glyph on the
   reference site, not a call-to-action. */
#cvp-close-offers {
	background: none;
	border: none;
	border-radius: 0;
	width: auto;
	height: auto;
	min-width: 0;
	padding: 0 4px;
	margin: 0;
	font-size: 26px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}
#cvp-close-offers:hover {
	opacity: 0.6;
}

.cvp-offers-drawer__manual {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.cvp-offers-drawer__manual input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #6B7280;
	border-radius: 6px;
	font-size: 16px;
}

/* height/line-height forced explicitly: Motta's generic button chrome
   otherwise gives these a tall default min-height, same class of
   specificity issue documented throughout this build (quantity stepper,
   qty buttons on the Order Items card, etc.) — height:auto alone wasn't
   enough here, the line-height needed pinning too. */
.cvp-offers-drawer__manual button,
.cvp-offer-apply-btn {
	background: #fff;
	color: #000;
	border: 1.5px solid #C4080E;
	padding: 6px 14px !important;
	height: auto !important;
	line-height: 1.3 !important;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	white-space: nowrap;
}

.cvp-offers-drawer__manual button:hover,
.cvp-offer-apply-btn:hover {
	opacity: 0.7;
}

.cvp-offers-drawer__note {
	font-size: 13px;
	color: #444;
	margin-bottom: 8px;
}

.cvp-offer-card {
	border: 0;
	border-bottom: 1px solid #eee;
	border-radius: 0;
	padding: 24px 0;
	margin-bottom: 0;
	position: relative;
}

.cvp-offer-card:last-child {
	border-bottom: 0;
}

.cvp-offer-card__headline {
	color: #20994C;
	font-size: 16px;
	font-weight: 600;
	padding-right: 90px; /* keep clear of the absolutely-positioned Best Deal ribbon */
}

.cvp-offer-card__code {
	display: inline-block;
	background: #F0F0F0;
	color: #000;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	margin: 6px 0;
}

.cvp-offer-card__desc {
	font-size: 14px;
	color: #444;
	margin-bottom: 4px;
}

.cvp-offer-card__best-deal {
	position: absolute;
	top: 0;
	right: 0;
	background: #C9941A;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 8px;
	border-radius: 0 8px;
}

.cvp-offer-card__saving {
	color: #20994C;
	font-size: 14px;
	font-weight: 400;
	margin-top: 4px;
	display: block;
}

.cvp-offer-card .cvp-offer-apply-btn {
	margin-top: 12px;
	display: block;
}

/* Currently-applied coupon card + its Remove action, and the Tiered
   Offer/Buy X Get Y "auto-applied" label — added alongside the
   coupon/BXGY exclusivity + remove-to-switch feature. */
.cvp-offer-card--applied {
	background: #F6FBF7;
}

.cvp-offer-card__applied-badge {
	display: inline-block;
	background: #20994C;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 2px 8px;
	border-radius: 4px;
	margin-bottom: 6px;
}

.cvp-offer-remove-btn {
	border-color: #999 !important;
	color: #666 !important;
}

.cvp-offer-card__code--auto {
	background: #FFF6F6;
	color: #C4080E;
}

.cvp-offers-drawer__login-nudge {
	margin-top: auto;
	text-align: center;
	font-size: 13px;
	color: #C4080E;
}

/* Reference site's sidebar has no generic "Add coupons" field — coupons
   only come from picking an offer, matching the drawer's own gate — so the
   native WooCommerce coupon accordion (classic + Blocks) is hidden in
   favor of the "Offers & Discounts" summary row below, which opens the
   same drawer. */
.wc-block-components-totals-coupon,
.woocommerce-form-coupon,
.woocommerce-cart-form .coupon,
.cart_totals .woocommerce-remove-coupon {
	display: none !important;
}

.cvp-offers-summary {
	border-bottom: 1px solid #eee;
	padding: 16px 0;
	margin-bottom: 8px;
	font-family: "Amazon Ember", Inter, sans-serif;
}

.cvp-offers-summary__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: #000;
}

.cvp-offers-summary__viewall {
	font-size: 14px;
	font-weight: 400;
	color: #000;
}

.cvp-offers-summary__preview {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: #20994C;
}

.cvp-offers-summary__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #20994C;
	color: #fff;
	font-size: 10px;
	flex: 0 0 16px;
	margin-right: 4px;
}

.cvp-offers-summary__save {
	font-weight: 600;
	display: flex;
	align-items: center;
}

/* width/height/padding forced !important: Motta's own generic button
   styling (a ~160px default pill width) otherwise wins over this on some
   pages/contexts — confirmed via getComputedStyle() on the checkout Payment
   step, where this button lives inside a different Blocks wrapper than the
   Cart page's own copy of this row and was measuring 160px wide before this
   fix, squeezing the whole "Offers & Discounts" preview row. */
.cvp-offers-summary__apply {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	background: #fff !important;
	color: #000;
	border: 1.5px solid #C4080E !important;
	border-radius: 6px !important;
	padding: 5px 14px !important;
	margin: 0 !important;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.3 !important;
	flex: 0 0 auto;
}
.cvp-offers-summary__apply:hover {
	opacity: 0.7;
}