/* WC Coupon Voucher — exact 300x110 ticket replica of voucher.png
   Typography is LOCKED in px so the design stays identical at every scale.
   Do not change font-size on .wccv-special-text, .wccv-ribbon, .wccv-vlabel,
   .wccv-gift, .wccv-code-label, .wccv-code — these mirror voucher.png. */

.wccv-wrap{
  --wccv-w:260px;
  --wccv-h:100px;
  --wccv-bg:#d8242a;
  --wccv-text:#ffffff;
  --wccv-stub-bg:#ffffff;
  --wccv-stub-text:#d8242a;
  --wccv-border:#d8242a;
  --wccv-btn-bg:#f3f3f3;
  --wccv-btn-text:#222;
  --wccv-scale:1;
  --wccv-pad:8px;
  display:block;
  margin:14px 0;
  max-width:100%;
  box-sizing:border-box;
  contain:layout;
}
.wccv-template-dark{ --wccv-bg:#1a1a1a; --wccv-stub-bg:#222; --wccv-stub-text:#ffcc00; --wccv-border:#ffcc00; }

.wccv-track-viewport{ overflow:hidden; width:100%; max-width:100%; padding:var(--wccv-pad) 0; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
.wccv-track-viewport:active{ cursor:grabbing; }
.wccv-track{ display:flex; gap:12px; will-change:transform; padding-bottom:4px; }
.wccv-mode-stacked .wccv-track{ flex-direction:column; align-items:flex-start; }
.wccv-mode-dropdown .wccv-track{ display:block; }
.wccv-mode-dropdown .wccv-card{ display:none; }
.wccv-mode-dropdown .wccv-card.wccv-active{ display:flex; }
.wccv-dropdown{ display:block; margin:0 0 10px; padding:6px 10px; max-width:260px; }

/* ===== EXACT TICKET CARD: 260 x 100 (matches voucher.png ~2.6:1 ratio) ===== */
.wccv-card{
  flex:0 0 auto;
  position:relative;
  width:260px;
  height:100px;
  display:flex;
  transform:scale(var(--wccv-scale));
  transform-origin:top left;
  cursor:pointer;
}

/* LEFT — red ticket */
.wccv-left{
  width:175px; height:100px;
  background:var(--wccv-bg);
  color:var(--wccv-text);
  padding:6px 8px 8px;
  box-sizing:border-box;
  border:1px solid var(--wccv-border);
  border-right:none;
  border-radius:6px 0 0 6px;
  display:flex; flex-direction:column;
  position:relative;
}
.wccv-special{ display:flex; align-items:center; justify-content:center; gap:5px; }
.wccv-special::before, .wccv-special::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.85); }
.wccv-special-text{ font-size:8px; font-weight:800; letter-spacing:.8px; }
.wccv-star{ font-size:8px; }
.wccv-upto{ margin-top:3px; font-size:9px; font-weight:800; letter-spacing:1px; text-align:center; line-height:1; }
.wccv-big{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:900; letter-spacing:-0.5px;
  text-align:center;
  text-shadow:1px 1px 0 rgba(0,0,0,.12);
  line-height:1;
  padding:2px 0;
}
.wccv-ribbon{
  align-self:center;
  background:#fff;
  color:var(--wccv-stub-text);
  padding:2px 14px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;
  border-radius:1px;
  position:relative;
  margin-bottom:4px;
  line-height:1.2;
  white-space:nowrap;
}
.wccv-ribbon::before,.wccv-ribbon::after{
  content:""; position:absolute; top:0; width:6px; height:100%;
  background:#fff;
}
.wccv-ribbon::before{ left:-5px;  clip-path:polygon(100% 0,0 50%,100% 100%); }
.wccv-ribbon::after { right:-5px; clip-path:polygon(0 0,100% 50%,0 100%); }

/* PERFORATED SCALLOPED DIVIDER — red side has semicircle bites,
   white side mirrors with red bites. Sits between left & stub. */
.wccv-perf{
  width:8px; height:100%;
  flex:0 0 8px;
  position:relative;
  align-self:stretch;
  background:transparent;
}
/* Red semicircles biting INTO white side (left half) */
.wccv-perf::before{
  content:""; position:absolute; inset:0 50% 0 0;
  background:
    radial-gradient(circle at 100% 4px, var(--wccv-bg) 3.2px, transparent 3.6px) 0 0/8px 8px repeat-y;
  background-color:var(--wccv-bg);
  -webkit-mask:radial-gradient(circle at 100% 4px, transparent 3.2px, #000 3.6px) 0 0/8px 8px repeat-y;
          mask:radial-gradient(circle at 100% 4px, transparent 3.2px, #000 3.6px) 0 0/8px 8px repeat-y;
}
/* White side with red semicircle bites (right half) */
.wccv-perf::after{
  content:""; position:absolute; inset:0 0 0 50%;
  background:var(--wccv-stub-bg);
  -webkit-mask:radial-gradient(circle at 0 4px, transparent 3.2px, #000 3.6px) 0 0/8px 8px repeat-y;
          mask:radial-gradient(circle at 0 4px, transparent 3.2px, #000 3.6px) 0 0/8px 8px repeat-y;
}

/* RIGHT — white stub */
.wccv-stub{
  width:77px; height:100px;
  background:var(--wccv-stub-bg);
  color:var(--wccv-stub-text);
  border:1px solid var(--wccv-border);
  border-left:none;
  border-radius:0 6px 6px 0;
  padding:4px 5px;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
  overflow:hidden;
}
.wccv-gift{
  font-family:'Brush Script MT','Lucida Handwriting',cursive;
  font-size:10px;
  font-style:italic;
  line-height:1;
}
.wccv-gift::before, .wccv-gift::after{ content:"—"; margin:0 3px; font-family:Arial; }
.wccv-vlabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  margin-top:1px;
  line-height:1;
}
.wccv-code-box{
  margin-top:3px; width:67px;
  border:1px dashed var(--wccv-border);
  border-radius:2px;
  padding:1px;
  text-align:center;
  background:#fff;
}
.wccv-code-label{
  background:var(--wccv-border);
  color:#fff;
  font-size:6px;
  font-weight:700;
  letter-spacing:.5px;
  padding:1px 2px;
  border-radius:1px;
  display:block;
}
.wccv-code{
  font-size:10px;
  font-weight:900;
  letter-spacing:.5px;
  padding:1px 0;
  cursor:pointer;
  color:var(--wccv-stub-text);
}
.wccv-code:hover{ text-decoration:underline; }

/* Gift-icon divider: ——— 🎁 ——— between code-box and barcode */
.wccv-gift-divider{
  display:flex; align-items:center; justify-content:center;
  width:67px; margin-top:2px; gap:3px;
  color:var(--wccv-stub-text);
}
.wccv-gift-line{
  flex:1; height:1px; background:var(--wccv-border); opacity:.8;
}
.wccv-gift-icon{ display:block; width:9px; height:9px; }

.wccv-barcode{ width:67px; height:12px; margin-top:1px; }

/* Inline status message (replaces the removed Apply button & badges) */
.wccv-msg{
  position:absolute;
  left:0; right:0; top:100%;
  margin-top:6px;
  font-size:11px;
  line-height:1.3;
  padding:0;
  min-height:0;
  color:#444;
  text-align:center;
}
.wccv-msg:empty{ display:none; }
.wccv-msg-pending{ color:#555; }
.wccv-msg-ok{ color:#2e7d32; font-weight:600; }
.wccv-msg-err{ color:#c62828; font-weight:600; }

/* Card spacing so inline message has room without affecting layout */
.wccv-track{ padding-bottom:32px; }

/* Mobile — never clip, never push layout */
@media (max-width:600px){
  .wccv-wrap{ overflow:hidden; }
  .wccv-track-viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .wccv-track-viewport::-webkit-scrollbar{ display:none; }
}

/* Debug */
.wccv-debug{ margin-top:12px; padding:10px; background:#fff8dc; border:1px dashed #d4a017; font-size:12px; }
.wccv-debug ul{ margin:6px 0 0 18px; }