/* =============================================================================
   asc-cart-coupon.css: applied-coupon chips in the drawer, plus the gold-button
   glyph fix.

   Printed at wp_head 112, after asc-ui.css (110), because both rules below have
   to beat !important declarations already in that file. asc-ui.css is owned by
   another session and is not edited here.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Outline glyphs inside gold buttons must stay outlines

   asc-ui.css section 24 forces the ink onto every child of a gold button:

     .asc-ui .ascd-checkout:hover * { color/fill/stroke: var(--asc-gold-ink) !important }

   That is right for the label and for solid glyphs, and wrong for a stroke icon:
   `fill` turns the checkout cart into a solid black blob the moment the button
   is hovered. Stroke and colour are left exactly as that rule sets them, only
   the fill is put back.
   -------------------------------------------------------------------------- */
.asc-ui .ascd-checkout:hover svg,
.asc-ui .ascd-checkout:hover svg *,
.asc-ui .ascd-checkout:focus svg,
.asc-ui .ascd-checkout:focus svg * {
	fill: none !important;
	stroke: var(--asc-gold-ink) !important;
}

/* -----------------------------------------------------------------------------
   2. Applied-coupon chips

   The drawer already rendered an applied coupon as a row up in the totals, but
   that sits far from the promo field, so from the customer's point of view
   applying a code did nothing and there was no way back. These chips sit
   directly under the input, where the code was typed.
   -------------------------------------------------------------------------- */
.asc-ui .ascd-promo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.asc-ui .ascd-promo-chips:empty {
	display: none;
	margin-top: 0;
}

.asc-ui .ascd-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 6px 6px 6px 10px;
	border: 1px solid var(--asc-gold-edge);
	border-radius: var(--asc-r-pill);
	background: var(--asc-gold-soft);
	color: var(--asc-gold-lite);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
}

.asc-ui .ascd-chip-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asc-ui .ascd-chip-x {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	color: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.asc-ui .ascd-chip-x:hover {
	background: var(--asc-gold);
	color: var(--asc-gold-ink);
}

/* The promo message. It already existed but only ever carried errors, because
   the endpoint returned an empty string on success. */
.asc-ui .ascd-promo-msg {
	color: var(--asc-ok);
	font-size: 12px;
	line-height: 1.45;
}

.asc-ui .ascd-promo-msg.is-error {
	color: #ff9d9d;
}