.storeengine-coupon-ux-free-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
font-weight: 600;
color: #15803d;
}
.storeengine-coupon-ux-free-badge__tag {
display: inline-block;
flex: none;
padding: 2px 8px;
border-radius: 999px;
background: #dcfce7;
color: #15803d;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
} .storeengine-order-summary__item:has(> .storeengine-coupon-ux-free-badge) {
flex-wrap: wrap;
}
.storeengine-order-summary__item > .storeengine-coupon-ux-free-badge {
grid-column: 1 / -1;
flex-basis: 100%;
width: 100%;
margin-top: 4px;
} .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;
} .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);
} .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;
} .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;
}
.storeengine-coupon-card__apply {
white-space: nowrap;
}