/* ═══════════════════════════════════════════════════════════
   Xolid Coupon Wallet  ·  wallet.css  v1.1
   All colours come from CSS variables injected by PHP
   (Settings → Coupon Wallet in WP admin)
═══════════════════════════════════════════════════════════ */

/* ── Fallback tokens (overridden by inline style from PHP) ── */
.xcw {
  --xcw-wrapper-bg:      #f7f5f0;
  --xcw-wrapper-radius:  18px;
  --xcw-header-bg:       #1a4d2e;
  --xcw-header-text:     #ffffff;
  --xcw-card-bg:         #ffffff;
  --xcw-card-border:     #e5e0d5;
  --xcw-card-radius:     14px;
  --xcw-card-shadow:     0 2px 12px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
  --xcw-amount-color:    #1a4d2e;
  --xcw-strip-a:         #d4691e;
  --xcw-strip-b:         #1a4d2e;
  --xcw-strip-c:         #c0392b;
  --xcw-pill-ok-bg:      #d4edda;
  --xcw-pill-ok-t:       #155724;
  --xcw-pill-used-bg:    #fff3cd;
  --xcw-pill-used-t:     #856404;
  --xcw-pill-exp-bg:     #f8d7da;
  --xcw-pill-exp-t:      #842029;
  --xcw-pill-ex2-bg:     #e9ecef;
  --xcw-pill-ex2-t:      #6c757d;
  --xcw-code-bg:         #f3ede3;
  --xcw-code-border:     #d4c9b5;
  --xcw-code-text:       #1a4d2e;
  --xcw-copy-bg:         #d4691e;
  --xcw-copy-text:       #ffffff;
  --xcw-tab-bg:          #eae5da;
  --xcw-tab-text:        #5a5040;
  --xcw-tab-active-bg:   #1a4d2e;
  --xcw-tab-active-text: #ffffff;
  --xcw-tag-bg:          #f0ebe2;
  --xcw-tag-text:        #6b6252;
  --xcw-link-color:      #d4691e;
  --xcw-font:            inherit;
  --xcw-font-size:       15px;
  --xcw-ease:            cubic-bezier(.4,0,.2,1);
}

/* ── Box model ─────────────────────────────────────────── */
.xcw *, .xcw *::before, .xcw *::after { box-sizing: border-box; }

/* ── Root wrapper ──────────────────────────────────────── */
.xcw {
  background:   var(--xcw-wrapper-bg);
  border-radius:var(--xcw-wrapper-radius);
  padding:      28px 28px 20px;
  font-family:  var(--xcw-font);
  font-size:    var(--xcw-font-size);
  max-width:    860px;
  margin:       0 auto;
  color:        #1a1a1a;
}

/* ── Header ────────────────────────────────────────────── */
.xcw__header {
  background:    var(--xcw-header-bg);
  color:         var(--xcw-header-text);
  border-radius: 12px;
  padding:       16px 20px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
  flex-wrap:     wrap;
  margin-bottom: 20px;
}
.xcw__header-left { display: flex; align-items: center; gap: 12px; }
.xcw__avatar-img  { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); }
.xcw__greeting    { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; opacity: .7; }
.xcw__name        { display: block; font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
.xcw__counter     { text-align: right; background: rgba(0,0,0,0.15); border-radius: 10px; padding: 8px 16px; }
.xcw__counter-num { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.xcw__counter-label { display: block; font-size: .65rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* ── Tab bar ───────────────────────────────────────────── */
.xcw__tabs {
  display:       flex;
  gap:           4px;
  background:    var(--xcw-tab-bg);
  border-radius: 10px;
  padding:       4px;
  margin-bottom: 20px;
  width:         fit-content;
}
.xcw__tab {
  padding:     6px 16px;
  border-radius: 7px;
  border:      none;
  background:  transparent;
  color:       var(--xcw-tab-text);
  font-size:   .8rem;
  font-weight: 600;
  cursor:      pointer;
  font-family: inherit;
  transition:  background .18s var(--xcw-ease), color .18s var(--xcw-ease);
}
.xcw__tab--active,
.xcw__tab:hover {
  background: var(--xcw-tab-active-bg);
  color:      var(--xcw-tab-active-text);
}

/* ── Coupon list ───────────────────────────────────────── */
.xcw__list { display: flex; flex-direction: column; gap: 13px; }

/* ── Card ──────────────────────────────────────────────── */
.xcw__card {
  display:        grid;
  grid-template-columns: 48px 1fr 20px;
  background:     var(--xcw-card-bg);
  border:         1.5px solid var(--xcw-card-border);
  border-radius:  var(--xcw-card-radius);
  overflow:       hidden;
  box-shadow:     var(--xcw-card-shadow);
  transition:     transform .22s var(--xcw-ease), box-shadow .22s var(--xcw-ease);
}
.xcw__card--available:hover {
  transform:   translateX(4px);
  box-shadow:  -4px 0 0 0 var(--xcw-strip-a), 0 6px 24px rgba(0,0,0,.1);
}
.xcw__card--available:hover .xcw__strip--a { box-shadow: none; }
.xcw__card--used,
.xcw__card--expired,
.xcw__card--exhausted { opacity: .55; }

/* ── Left colour strip ─────────────────────────────────── */
.xcw__strip {
  display:        flex;
  align-items:    center;
  justify-content:center;
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);
  padding:        12px 0;
  font-size:      .52rem;
  font-weight:    800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.75);
}
.xcw__strip--a { background: var(--xcw-strip-a); }
.xcw__strip--b { background: var(--xcw-strip-b); }
.xcw__strip--c { background: var(--xcw-strip-c); }
.xcw__card--used    .xcw__strip,
.xcw__card--expired .xcw__strip,
.xcw__card--exhausted .xcw__strip { background: #c8c0b4; }

/* ── Card body ─────────────────────────────────────────── */
.xcw__body {
  padding:        16px 18px 14px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  min-width:      0;
}

/* ── Top row ───────────────────────────────────────────── */
.xcw__top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             10px;
  flex-wrap:       wrap;
}
.xcw__amount {
  font-size:   1.7rem;
  font-weight: 900;
  color:       var(--xcw-amount-color);
  line-height: 1;
  letter-spacing: -.03em;
}
.xcw__amount--dim {
  opacity: .45;
  text-decoration: line-through;
}

/* ── Status pill ───────────────────────────────────────── */
.xcw__pill {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 11px;
  border-radius: 999px;
  font-size:     .68rem;
  font-weight:   700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:   nowrap;
  flex-shrink:   0;
}
.xcw__pill--available  { background: var(--xcw-pill-ok-bg);   color: var(--xcw-pill-ok-t); }
.xcw__pill--used       { background: var(--xcw-pill-used-bg);  color: var(--xcw-pill-used-t); }
.xcw__pill--expired    { background: var(--xcw-pill-exp-bg);   color: var(--xcw-pill-exp-t); }
.xcw__pill--exhausted  { background: var(--xcw-pill-ex2-bg);   color: var(--xcw-pill-ex2-t); }

.xcw__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: xcw-pulse 2s infinite;
}
@keyframes xcw-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Description ───────────────────────────────────────── */
.xcw__desc {
  font-size:   .83rem !important;
  color:       #6b6252 !important;
  margin:      0 !important;
  line-height: 1.5 !important;
}

/* ── Code block ────────────────────────────────────────── */
.xcw__code-wrap {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  background:      var(--xcw-code-bg);
  border:          1.5px dashed var(--xcw-code-border);
  border-radius:   8px;
  padding:         9px 13px;
}
.xcw__code {
  font-family:    'Courier New', Courier, monospace;
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: .1em;
  color:          var(--xcw-code-text);
  word-break:     break-all;
}
.xcw__copy-btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     5px 12px;
  background:  var(--xcw-copy-bg);
  color:       var(--xcw-copy-text);
  border:      none;
  border-radius: 6px;
  font-size:   .74rem;
  font-weight: 700;
  cursor:      pointer;
  font-family: inherit;
  transition:  opacity .18s, transform .14s;
  flex-shrink: 0;
}
.xcw__copy-btn:hover { opacity: .85; transform: scale(1.04); }
.xcw__copy-btn.xcw--copied { background: #2d6a4f; color: #fff; }
.xcw__locked { font-size: 1rem; opacity: .4; }

/* ── Meta tags ─────────────────────────────────────────── */
.xcw__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xcw__tag {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  font-size:     .71rem;
  padding:       3px 9px;
  border-radius: 999px;
  background:    var(--xcw-tag-bg);
  color:         var(--xcw-tag-text);
}
.xcw__tag--urgent { background: #fde8e8; color: #9b1c1c; }
.xcw__tag--soon   { background: #fef3c7; color: #92400e; }
.xcw__tag--expired{ background: #fde8e8; color: #9b1c1c; }
.xcw__tag--ship   { background: #d1fae5; color: #065f46; }

/* ── Use link ──────────────────────────────────────────── */
.xcw__use-link {
  display:         inline-block;
  color:           var(--xcw-link-color) !important;
  font-size:       .78rem !important;
  font-weight:     700 !important;
  text-decoration: none !important;
  transition:      letter-spacing .18s;
  align-self:      flex-start;
}
.xcw__use-link:hover { letter-spacing: .03em; }

/* ── Perforated edge ───────────────────────────────────── */
.xcw__perf {
  display:         flex;
  flex-direction:  column;
  justify-content: space-evenly;
  align-items:     center;
  padding:         8px 0;
}
.xcw__perf span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ddd7cc;
  flex-shrink: 0;
}

/* ── Tab hidden ────────────────────────────────────────── */
.xcw__card--tab-hidden { display: none; }

/* ── Empty state ───────────────────────────────────────── */
.xcw__empty {
  text-align: center;
  padding:    52px 24px;
  color:      #9a8f82;
}
.xcw__empty-icon { font-size: 2.8rem; display: block; margin-bottom: 14px; }
.xcw__empty p    { font-size: .9rem !important; color: #9a8f82 !important; margin: 0 0 20px !important; }

/* ── Guest ─────────────────────────────────────────────── */
.xcw__guest { text-align: center; padding: 52px 24px; }
.xcw__guest h3 { font-size: 1.2rem !important; margin: 0 0 10px !important; }
.xcw__guest p  { font-size: .9rem !important; color: #9a8f82 !important; margin: 0 0 22px !important; }

/* ── CTA button ────────────────────────────────────────── */
.xcw__cta-btn {
  display:         inline-block;
  padding:         11px 26px;
  background:      var(--xcw-header-bg);
  color:           var(--xcw-header-text) !important;
  border-radius:   8px;
  font-weight:     700 !important;
  text-decoration: none !important;
  font-size:       .9rem !important;
  transition:      opacity .18s;
}
.xcw__cta-btn:hover { opacity: .85; }

/* ── Footnote ──────────────────────────────────────────── */
.xcw__footnote {
  font-size:  .72rem !important;
  color:      #aaa49a !important;
  text-align: center !important;
  margin:     18px 0 0 !important;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 540px) {
  .xcw { padding: 18px 14px 16px; }
  .xcw__strip { display: none; }
  .xcw__card  { grid-template-columns: 1fr 20px; }
  .xcw__amount { font-size: 1.4rem; }
}