/* .ap-coupon — the core revenue component. Discount value must stay the most prominent element in the block. */

.ap-coupon {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-sm);
  height: 100%;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  padding: var(--ap-space-lg);
  box-shadow: var(--ap-shadow-sm);
}

/* Grid rows stretch cards to equal height by default — pin the CTA row
   (the card's last child, "Get Code"/"View Store") to the bottom so cards
   with a longer deal title don't shift their buttons out of alignment
   with shorter neighbors. */
.ap-coupon > :last-child {
  margin-top: auto;
}

.ap-coupon__discount {
  font-family: var(--ap-font-heading);
  font-size: var(--ap-fs-h3);
  font-weight: 700;
  color: var(--ap-primary);
}

.ap-coupon__title {
  font-weight: 600;
  color: var(--ap-text);
}

/* The deal headline (an <h3>) would otherwise inherit the browser/base h3
   size — too large here, and it made card heights vary a lot depending on
   how many words wrapped. Capped at 2 lines so every card's title block
   takes the same amount of space regardless of length. */
h3.ap-coupon__title {
  font-size: var(--ap-fs-body);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ap-coupon__badges {
  display: flex;
  gap: var(--ap-space-xs);
  flex-wrap: wrap;
}

.ap-coupon__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-xs);
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  padding: 2px var(--ap-space-sm);
  border-radius: var(--ap-radius-sm);
}

.ap-coupon__badge--verified {
  background: color-mix(in srgb, var(--ap-success) 15%, transparent);
  color: var(--ap-success);
}

.ap-coupon__badge--exclusive {
  background: color-mix(in srgb, var(--ap-accent) 15%, transparent);
  color: var(--ap-accent);
}

.ap-coupon__meta {
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

.ap-coupon__cta {
  display: flex;
  align-items: stretch;
  border: 1px dashed var(--ap-primary);
  border-radius: var(--ap-radius-md);
  overflow: hidden;
}

.ap-coupon__code {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ap-space-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--ap-surface-alt);
}

.ap-coupon__reveal {
  padding: var(--ap-space-sm) var(--ap-space-md);
  background: var(--ap-primary);
  color: var(--ap-text-inverse);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ap-transition);
}

.ap-coupon__reveal:hover { background: var(--ap-primary-hover); }
.ap-coupon__reveal:active { background: var(--ap-primary-active); }
.ap-coupon__reveal:focus-visible { box-shadow: var(--ap-focus-ring); outline: none; }

.ap-coupon--expired {
  opacity: 0.7;
}