/* StoreEngine Coupon UX — BOGO badges, cart nudges, dashboard coupon cards. */

/* ---- BOGO "Free" chip, rendered inline beside the product name ---- */
.storeengine-coupon-ux-free-badge {
	display: inline-block;
	vertical-align: middle;
	/* Sits next to a heading, so pin the type rather than inheriting the
	   heading's size/weight/line-height. */
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.6;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}


/* ---- Cart-goal / suggestion nudge ---- */
.storeengine-coupon-ux-nudge {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #fcd34d;
	border-radius: 10px;
	background: #fffbeb;
}
.storeengine-coupon-ux-nudge__bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #fde68a;
	overflow: hidden;
	margin-bottom: 10px;
}
.storeengine-coupon-ux-nudge__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	border-radius: 999px;
	background: #f59e0b;
	transition: width .3s ease;
}
.storeengine-coupon-ux-nudge__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.storeengine-coupon-ux-nudge__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #92400e;
}
.storeengine-coupon-ux-nudge__item--eligible {
	color: #15803d;
}
.storeengine-coupon-ux-nudge__apply {
	font-weight: 600;
	text-decoration: underline;
}

/* ---- Dashboard available-coupons notice ---- */
.storeengine-coupon-notice {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid #c7d2fe;
	border-radius: 12px;
	background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
}
.storeengine-coupon-notice__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}
.storeengine-coupon-notice__icon {
	font-size: 18px;
}
.storeengine-coupon-notice__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--storeengine-heading-color, #1e293b);
}

/* ---- Dashboard coupon cards ---- */
.storeengine-coupon-cards-wrap {
	margin-top: 8px;
}
.storeengine-coupon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 16px;
}
.storeengine-coupon-cards-empty {
	margin-top: 16px;
	color: var(--storeengine-text-light, #6b7280);
}
.storeengine-coupon-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid var(--storeengine-border-color, #e5e7eb);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.storeengine-coupon-card--eligible {
	border-color: #86efac;
}
.storeengine-coupon-card__body {
	padding: 18px 18px 12px;
}
.storeengine-coupon-card__headline {
	font-size: 18px;
	font-weight: 700;
	color: var(--storeengine-heading-color, #111827);
}
.storeengine-coupon-card__state {
	display: inline-block;
	margin-top: 8px;
}
.storeengine-coupon-card__desc {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--storeengine-text-light, #6b7280);
}
.storeengine-coupon-card__meta {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--storeengine-text-light, #6b7280);
}
.storeengine-coupon-card__meta i {
	margin-right: 4px;
}

/* perforated ticket footer */
.storeengine-coupon-card__action {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-top: 2px dashed var(--storeengine-border-color, #e5e7eb);
	background: var(--storeengine-bg-light, #f9fafb);
}
.storeengine-coupon-card__code {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border: 1px dashed #9ca3af;
	border-radius: 8px;
	background: #fff;
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
}
.storeengine-coupon-card__code-copy {
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--storeengine-primary-color, #2563eb);
	text-transform: uppercase;
}
.storeengine-coupon-card__code.is-copied .storeengine-coupon-card__code-copy {
	color: #15803d;
}
/* Self-contained button styling. The Apply control carries `.storeengine-btn`,
   whose storefront rules (frontend.css) ARE loaded on the customer dashboard, so
   this must override them rather than assume a clean slate. Every box-affecting
   property is declared identically for all interactive states (and the text
   colour forced to white in each) so neither the shared button rules nor the
   theme's own link hover styles can recolour the label or shift the layout on
   hover. Scoped under `__action` for specificity, and the label colour is forced
   with `!important` so no theme link/button hover rule can recolour it. */
.storeengine-coupon-card__action .storeengine-coupon-card__apply,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:link,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:visited,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:hover,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:focus,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:active {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border: 1px solid var(--storeengine-primary-color, #2563eb);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	white-space: nowrap;
	color: #fff !important;
	box-shadow: none;
	transform: none;
	cursor: pointer;
}
.storeengine-coupon-card__action .storeengine-coupon-card__apply {
	background: var(--storeengine-primary-color, #2563eb);
	transition: background-color .15s ease, border-color .15s ease;
}
.storeengine-coupon-card__action .storeengine-coupon-card__apply:hover,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:focus,
.storeengine-coupon-card__action .storeengine-coupon-card__apply:active {
	background: var(--storeengine-primary-hover-color, #1d4ed8);
	border-color: var(--storeengine-primary-hover-color, #1d4ed8);
	color: #fff !important;
}
/* The storefront `.storeengine-btn` (frontend.css) IS loaded on the customer
   dashboard and adds a sliding `::after` sheen (rgba(0,0,0,.1)) that, on hover,
   slides a dark film OVER the label — dimming the white "Apply" text. This
   button defines its own hover background, so neutralise the inherited overlay
   to keep the label crisp on hover. */
.storeengine-coupon-card__action .storeengine-coupon-card__apply::after {
	content: none;
	display: none;
}

/* ---------------------------------------------------------------------------
   Buy X Get Y — auto-added gift lines
   ------------------------------------------------------------------------ */

/* An auto-added gift reads differently from a discount on something the
   customer chose, so it gets a warmer tone than the plain FREE badge. */
/* The quantity field on a gift line renders as type="hidden", leaving the
   stepper container empty — keep the row aligned with its neighbours. */
.storeengine-cart-product-quantity-wrap:has(> input[type="hidden"].storeengine-quantity-input__input) {
	gap: 12px;
}

/* ---------------------------------------------------------------------------
   Buy X Get Y — unclaimed reward offers
   ------------------------------------------------------------------------ */

.storeengine-coupon-ux-gift-offers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.storeengine-coupon-ux-gift-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	background: #fffbeb;
	font-size: 13px;
	line-height: 1.5;
}

.storeengine-coupon-ux-gift-offer__msg {
	color: #92400e;
	font-weight: 600;
}

.storeengine-coupon-ux-gift-offer__claim {
	flex: none;
	padding: 4px 12px;
	border-radius: 999px;
	background: #b45309;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.storeengine-coupon-ux-gift-offer__claim:hover,
.storeengine-coupon-ux-gift-offer__claim:focus {
	background: #92400e;
	color: #fff;
	text-decoration: none;
}