/* ── WC Coupon Bar ──────────────────────────────── */

:root {
  --wcb-bg:          #ffffff;
  --wcb-header-bg:   #1f5d59;
  --wcb-header-fg:   #ffffff;
  --wcb-card-fixed:  #f1f7f4;
  --wcb-card-free:   #e6f0fb;
  --wcb-card-pct:    #f2f7ea;
  --wcb-accent:      #1a5c44;
  --wcb-blue:        #1a6aad;
  --wcb-radius:      14px;
  --wcb-shadow:      0 2px 14px rgba(0,0,0,.08);
  --wcb-font:        inherit;
}

/* Wrapper */
.wcb-wrap {
  margin: 0 0 24px 0;
  border-radius: var(--wcb-radius);
  overflow: hidden;
  box-shadow: var(--wcb-shadow);
  background: #ffffff;
  font-family: var(--wcb-font);
}

/* ── Header ────────────────────────────────────── */
.wcb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--wcb-header-bg);
  color: var(--wcb-header-fg);
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}

.wcb-header__icon {
  opacity: .85;
}

.wcb-header__text {
  flex: 1;
  text-align: left;
}

.wcb-header__badge {
  background: rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
}

.wcb-header__chevron {
  transition: transform .25s ease;
}

.wcb-header[aria-expanded="true"] .wcb-header__chevron {
  transform: rotate(180deg);
}

/* ── Panel ──────────────────────────────────────── */
.wcb-panel {
  background: var(--wcb-bg);
  padding: 18px 20px 22px;
}

.wcb-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: #888;
}

/* ── Grid ───────────────────────────────────────── */
.wcb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1200px) {
  .wcb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .wcb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Card ───────────────────────────────────────── */
.wcb-card {
  border-radius: 12px;
  border: 1.5px dashed #cfdad4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .15s;
  background: var(--wcb-card-fixed);
}

.wcb-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

.wcb-card.wcb-type--freeship {
  background: var(--wcb-card-free);
  border-color: #b0cce8;
}

.wcb-card.wcb-type--percent {
  background: var(--wcb-card-pct);
  border-color: #c2d8b0;
}

.wcb-card.is-applied {
  border-style: solid;
  border-color: var(--wcb-accent);
  box-shadow: 0 0 0 2px rgba(26,92,68,.15);
}

/* Top section */
.wcb-card__top {
  padding: 14px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px dashed rgba(0,0,0,.1);
}

.wcb-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.wcb-card__type {
  font-size: 12px;
  font-weight: 600;
  color: var(--wcb-accent);
  letter-spacing: .02em;
}

.wcb-card__code {
  font-size: 11px;
  color: #7a8b84;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wcb-type--freeship .wcb-card__type {
  color: var(--wcb-blue);
}

.wcb-card__amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--wcb-accent);
  line-height: 1.1;
}

.wcb-type--freeship .wcb-card__amount {
  color: var(--wcb-blue);
  font-size: 22px;
}

/* Body */
.wcb-card__body {
  padding: 10px 16px 8px;
  flex: 1;
}

.wcb-card__sub {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: #2a2a2a;
}

.wcb-card__desc {
  margin: 0 0 6px;
  font-size: 12px;
  color: #777;
}


.wcb-card__reason {
  margin: 0 0 6px;
  font-size: 12px;
  color: #9a6a2e;
  font-weight: 600;
}

.wcb-card__expires {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(26,106,173,.12);
  color: var(--wcb-blue);
  font-weight: 600;
}

/* Footer / button */
.wcb-card__footer {
  padding: 0 16px 14px;
}

.wcb-btn {
  width: 100%;
  padding: 8px 0;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, opacity .2s;
}

.wcb-btn--apply {
  background: #dbe9e3;
  color: #155a44;
}

.wcb-btn--apply:hover {
  background: #cde0d7;
}

.wcb-type--freeship .wcb-btn--apply {
  background: #cfe0f5;
  color: #1a6aad;
}

.wcb-type--freeship .wcb-btn--apply:hover {
  background: #c2d7f2;
}

.wcb-btn--remove {
  background: var(--wcb-accent);
  color: #fff;
}

.wcb-btn--remove:hover {
  background: #14472f;
}

.wcb-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.wcb-card.is-disabled {
  opacity: .65;
}

.wcb-card.is-disabled .wcb-btn {
  background: #eef2ef;
  color: #8a9792;
}

/* ── Notice ─────────────────────────────────────── */
.wcb-notice {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.wcb-notice.is-success {
  background: #edfaf3;
  color: #1a5c44;
  border: 1px solid #a8dfc4;
}

.wcb-notice.is-error {
  background: #fdf0f0;
  color: #b33a3a;
  border: 1px solid #f0c0c0;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .wcb-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    padding-right: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .wcb-card {
    min-width: 66%;
    max-width: 360px;
    scroll-snap-align: start;
  }
  .wcb-card__amount {
    font-size: 24px;
  }
}

.wcb-header:focus-visible,
.wcb-btn:focus-visible {
  outline: 2px solid #1f5d59;
  outline-offset: 2px;
}

.wcb-grid::-webkit-scrollbar {
  height: 6px;
}
.wcb-grid::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 10px;
}

.wcb-card__debug {
  margin: 6px 0 0;
  font-size: 11px;
  color: #8a8a8a;
}