/* ════════════════════════════════════════════════════════════════
   Velour Coupons & Deals Pro — Frontend CSS v3.0
   "Cut-out ticket" redesign · single-action reveal · accent-driven
   No external fonts (keeps Google Ads page speed high)
   ════════════════════════════════════════════════════════════════ */
:root {
  --vcp-accent:   #4338CA;                 /* overridden inline by plugin setting */
  --vcp-ink:      #15171C;
  --vcp-text:     #2B2E36;
  --vcp-muted:    #6A6F7B;
  --vcp-faint:    #9AA0AC;
  --vcp-surface:  #FFFFFF;
  --vcp-canvas:   #EEF0F4;                 /* mat behind each ticket (cool gray, not cream) */
  --vcp-line:     #E2E5EC;
  --vcp-line2:    #CBD0DA;
  --vcp-ok:       #167C52;
  --vcp-ok-l:     #E6F4EC;
  --vcp-urgent:   #B42318;
  --vcp-urgent-l: #FDECEA;
  --vcp-amber:    #B45309;
  --vcp-amber-l:  #FEF1DC;

  --vcp-stub-w:   124px;                    /* left value-stub width (drives notch position) */
  --vcp-pad:      7px;                       /* mat padding around the ticket */

  --vcp-r:        16px;
  --vcp-r-sm:     11px;
  --vcp-r-pill:   999px;

  --vcp-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --vcp-mono: ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --vcp-sh:   0 1px 2px rgba(20,23,33,.04), 0 6px 20px rgba(20,23,33,.06);
  --vcp-sh-h: 0 2px 4px rgba(20,23,33,.05), 0 16px 38px rgba(20,23,33,.13);

  /* accent tints (modern browsers; degrade gracefully to solid accent) */
  --vcp-acc-12: color-mix(in srgb, var(--vcp-accent) 12%, #fff);
  --vcp-acc-dk: color-mix(in srgb, var(--vcp-accent) 82%, #000);
}

/* ── WRAP ── */
.vcp-wrap { font-family: var(--vcp-font); max-width: 880px; margin: 0 auto; box-sizing: border-box; color: var(--vcp-text); }
.vcp-wrap *, .vcp-wrap *::before, .vcp-wrap *::after { box-sizing: border-box; }
.vcp-empty { color: var(--vcp-muted); font-style: italic; padding: 18px 0; }
.vcp-section-title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--vcp-ink); margin: 0 0 18px; }

/* ── FILTER BAR ── */
.vcp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.vcp-fbtn {
  font: 600 13px/1.4 var(--vcp-font);
  padding: 8px 16px;
  border-radius: var(--vcp-r-pill);
  border: 1.5px solid var(--vcp-line2);
  background: var(--vcp-surface);
  color: var(--vcp-muted);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.vcp-fbtn:hover  { border-color: var(--vcp-accent); color: var(--vcp-accent); background: var(--vcp-acc-12); }
.vcp-fbtn.active { background: var(--vcp-ink); color: #fff; border-color: var(--vcp-ink); }

/* ── GRID ── */
.vcp-grid { display: flex; flex-direction: column; gap: 18px; }

/* ════════════════════════════════════════════════════════════════
   THE TICKET CARD  (signature: perforated cut-out coupon)
   .vcp-card = mat frame · .vcp-ticket = paper · notches cut the mat
   ════════════════════════════════════════════════════════════════ */
.vcp-card {
  position: relative;
  background: var(--vcp-canvas);
  border-radius: var(--vcp-r);
  padding: var(--vcp-pad);
  box-shadow: var(--vcp-sh);
  transition: box-shadow .22s ease, transform .22s ease;
}
.vcp-card:hover { box-shadow: var(--vcp-sh-h); transform: translateY(-2px); }
.vcp-card.vcp-expired { opacity: .55; filter: grayscale(.4); pointer-events: none; }

/* notch cut-outs on the perforation seam (top + bottom edges of the ticket) */
.vcp-card::before, .vcp-card::after {
  content: ""; position: absolute; z-index: 4;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vcp-canvas);
  left: calc(var(--vcp-pad) + var(--vcp-stub-w) - 8px);
}
.vcp-card::before { top: calc(var(--vcp-pad) - 8px); }
.vcp-card::after  { bottom: calc(var(--vcp-pad) - 8px); }

/* featured ribbon */
.vcp-ribbon {
  position: absolute; top: 16px; left: -5px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  font: 800 10.5px/1 var(--vcp-font); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--vcp-accent);
  padding: 6px 11px 6px 10px;
  border-radius: 0 var(--vcp-r-pill) var(--vcp-r-pill) 0;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--vcp-accent) 45%, transparent);
}
.vcp-ribbon::before { content: "★"; font-size: 11px; }

/* paper */
.vcp-ticket {
  position: relative;
  display: flex; align-items: stretch;
  background: var(--vcp-surface);
  border-radius: 11px;
  overflow: hidden;
}

/* ── LEFT STUB (the value) ── */
.vcp-stub {
  flex: 0 0 var(--vcp-stub-w);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 20px 12px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--vcp-acc-12), transparent 70%),
    var(--vcp-surface);
}
.vcp-stub-val {
  font: 900 34px/0.95 var(--vcp-font);
  letter-spacing: -.04em;
  color: var(--vcp-accent);
  font-variant-numeric: tabular-nums;
}
.vcp-stub-sub { margin-top: 6px; font: 600 11px/1.3 var(--vcp-font); color: var(--vcp-muted); }
.vcp-stub-store {
  margin-top: 10px; padding-top: 9px;
  font: 800 10px/1 var(--vcp-font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--vcp-faint);
  border-top: 1.5px dashed var(--vcp-line2);
  width: 70%;
}

/* ── PERFORATION (dashed tear line on the seam) ── */
.vcp-perf { position: relative; flex: 0 0 0; width: 0; align-self: stretch; }
.vcp-perf::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: -1px;
  border-left: 2.5px dashed var(--vcp-line2);
}

/* ── RIGHT BODY ── */
.vcp-body { flex: 1; min-width: 0; padding: 16px 18px 16px 22px; display: flex; flex-direction: column; }

.vcp-body-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.vcp-cat-pill {
  font: 700 10.5px/1 var(--vcp-font); letter-spacing: .03em; text-transform: uppercase;
  color: var(--vcp-accent); background: var(--vcp-acc-12);
  padding: 4px 9px; border-radius: var(--vcp-r-pill);
}
.vcp-verify { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--vcp-font); color: var(--vcp-ok); }
.vcp-verify::before { content: "✓"; font-weight: 900; }

.vcp-title { font: 800 16.5px/1.3 var(--vcp-font); letter-spacing: -.01em; color: var(--vcp-ink); margin: 0 0 5px; }
.vcp-desc  { font: 400 13.5px/1.55 var(--vcp-font); color: var(--vcp-muted); margin: 0 0 10px; }

.vcp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.vcp-tag  { font: 600 11px/1 var(--vcp-font); padding: 4px 9px; border-radius: var(--vcp-r-pill); white-space: nowrap; }
.vcp-tag-green { background: var(--vcp-ok-l);     color: var(--vcp-ok); }
.vcp-tag-blue  { background: var(--vcp-acc-12);   color: var(--vcp-accent); }
.vcp-tag-red   { background: var(--vcp-urgent-l); color: var(--vcp-urgent); }
.vcp-tag-gold  { background: var(--vcp-amber-l);  color: var(--vcp-amber); }
.vcp-tag-gray  { background: #F1F3F7;             color: var(--vcp-muted); }

/* expiry line */
.vcp-expiry { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--vcp-font); margin: 0 0 12px; }
.vcp-expiry-red   { color: var(--vcp-urgent); }
.vcp-expiry-green { color: var(--vcp-muted); }
.vcp-expiry::before { content: "⏱"; }
.vcp-timer { font-family: var(--vcp-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   ACTION ZONE — ONE button reveals code + opens store
   ════════════════════════════════════════════════════════════════ */
.vcp-action { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* revealed code box (hidden until reveal) */
.vcp-code-box {
  display: none;
  align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 2px dashed var(--vcp-accent);
  border-radius: var(--vcp-r-sm);
  background: var(--vcp-acc-12);
  cursor: copy;
  -webkit-tap-highlight-color: transparent;
  animation: vcp-pop .22s ease both;
}
.vcp-card.vcp-revealed .vcp-code-box { display: flex; }
.vcp-code-label { font: 700 9.5px/1 var(--vcp-font); letter-spacing: .12em; text-transform: uppercase; color: var(--vcp-muted); flex-shrink: 0; }
.vcp-code-text {
  flex: 1; min-width: 0;
  font: 800 17px/1 var(--vcp-mono); letter-spacing: .08em;
  color: var(--vcp-acc-dk); word-break: break-all;
}
.vcp-copy-hint { font: 600 11px/1 var(--vcp-font); color: var(--vcp-accent); white-space: nowrap; flex-shrink: 0; }
.vcp-copied    { display: none; font: 700 11px/1 var(--vcp-font); color: var(--vcp-ok); white-space: nowrap; flex-shrink: 0; }
.vcp-code-box.is-copied .vcp-copy-hint { display: none; }
.vcp-code-box.is-copied .vcp-copied    { display: inline; }

@keyframes vcp-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* THE single CTA */
.vcp-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  font: 800 14.5px/1.2 var(--vcp-font); letter-spacing: -.01em;
  color: #fff; background: var(--vcp-accent);
  border: none; border-radius: var(--vcp-r-sm);
  padding: 13px 18px;
  cursor: pointer;
  -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--vcp-accent) 32%, transparent);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.vcp-cta:hover  { background: var(--vcp-acc-dk); transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--vcp-accent) 38%, transparent); }
.vcp-cta:active { transform: translateY(0); }
.vcp-cta-arrow  { transition: transform .18s ease; }
.vcp-cta:hover .vcp-cta-arrow { transform: translateX(3px); }
.vcp-cta::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
.vcp-cta:hover::after { left: 130%; }
.vcp-card.vcp-revealed .vcp-cta { background: var(--vcp-ink); box-shadow: none; }
.vcp-card.vcp-revealed .vcp-cta:hover { background: #000; }

.vcp-nocode-note { font: italic 400 12px/1.4 var(--vcp-font); color: var(--vcp-faint); }

/* keyboard focus */
.vcp-cta:focus-visible, .vcp-code-box:focus-visible, .vcp-fbtn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vcp-accent) 50%, #fff); outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   TOAST (shown in the returning tab)
   ════════════════════════════════════════════════════════════════ */
#vcp-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(40px); opacity: 0;
  z-index: 2147483647;
  display: flex; align-items: stretch;
  background: var(--vcp-ink); border-radius: 14px;
  box-shadow: 0 10px 44px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.2);
  font-family: var(--vcp-font);
  min-width: 300px; max-width: min(520px, calc(100vw - 32px));
  pointer-events: none; overflow: hidden;
  transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
#vcp-toast.vcp-t-in  { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#vcp-toast.vcp-t-out { opacity: 0; transform: translateX(-50%) translateY(20px); }
.vcp-t-left  { background: #18A558; display: flex; align-items: center; padding: 0 15px; }
.vcp-t-check { color: #fff; font-size: 20px; font-weight: 900; line-height: 1; }
.vcp-t-body  { flex: 1; padding: 13px 12px 13px 14px; min-width: 0; }
.vcp-t-line1 { font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 2px; }
.vcp-t-line1 strong { color: #fff; font: 700 15px/1.2 var(--vcp-mono); letter-spacing: .04em; display: block; margin-top: 2px; }
.vcp-t-line2 { font-size: 12px; color: rgba(255,255,255,.5); }
.vcp-t-close { background: none; border: none; color: rgba(255,255,255,.4); font-size: 16px; cursor: pointer; padding: 13px 14px 13px 4px; align-self: flex-start; transition: color .15s; }
.vcp-t-close:hover { color: #fff; }
#vcp-toast::after {
  content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%;
  background: #18A558; transform-origin: left center; animation: vcp-progress 5s linear forwards;
}
@keyframes vcp-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .vcp-ticket { flex-direction: column; }
  /* hide vertical seam notches, switch to horizontal */
  .vcp-card::before { top: calc(var(--vcp-pad) + 68px); left: calc(var(--vcp-pad) - 8px); }
  .vcp-card::after  { bottom: auto; top: calc(var(--vcp-pad) + 68px); left: auto; right: calc(var(--vcp-pad) - 8px); }
  .vcp-stub {
    flex: none; width: 100%; height: 76px;
    flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 0 20px; text-align: left;
    background: radial-gradient(120% 140% at 0% 0%, var(--vcp-acc-12), transparent 65%), var(--vcp-surface);
  }
  .vcp-stub-val   { font-size: 28px; }
  .vcp-stub-sub   { margin: 0; }
  .vcp-stub-store { margin: 0 0 0 auto; padding: 0; border: none; width: auto; }
  .vcp-perf { width: 100%; height: 0; flex: none; }
  .vcp-perf::before { top: -1px; left: 14px; right: 14px; bottom: auto; width: auto; border-left: none; border-top: 2.5px dashed var(--vcp-line2); }
  .vcp-body { padding: 16px 18px; }
  .vcp-title { font-size: 15.5px; }
}

@media (max-width: 380px) {
  .vcp-stub-val { font-size: 25px; }
  .vcp-code-text { font-size: 15px; }
  #vcp-toast { bottom: 0; left: 0; right: 0; transform: translateY(100%); min-width: 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; }
  #vcp-toast.vcp-t-in  { transform: translateY(0); }
  #vcp-toast.vcp-t-out { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .vcp-card, .vcp-cta, .vcp-cta-arrow, .vcp-cta::after, .vcp-code-box, #vcp-toast { transition: none !important; animation: none !important; }
  .vcp-card:hover { transform: none; }
}

/* ── FOUC PREVENTION ── */
.vcp-wrap { opacity: 0; visibility: hidden; }
.vcp-wrap.vcp-ready { opacity: 1; visibility: visible; transition: opacity .2s ease; }