/* ════════════════════════════════════════════════════════════════
   SaveSwift Deals Pro — Frontend CSS v1.0
   "Deal tile" design · logo-led · single-action reveal · accent-driven
   No external fonts (fast Google Ads landing pages)
   ════════════════════════════════════════════════════════════════ */
:root {
  --ssd-accent:  #EA580C;                  /* overridden inline by plugin setting */
  --ssd-ink:     #11181C;
  --ssd-text:    #2C353B;
  --ssd-muted:   #66707A;
  --ssd-faint:   #98A2AD;
  --ssd-surface: #FFFFFF;
  --ssd-page:    #F5F7F8;
  --ssd-line:    #E7EAEE;
  --ssd-line2:   #D3D8DE;
  --ssd-ok:      #0E7C5A;
  --ssd-ok-l:    #E3F4EC;
  --ssd-urgent:  #DC2626;
  --ssd-urgent-l:#FDECEC;
  --ssd-blue:    #1D6FB8;
  --ssd-blue-l:  #E7F0F9;
  --ssd-amber:   #9A6A07;
  --ssd-amber-l: #FBF0D8;

  --ssd-r:     18px;
  --ssd-r-sm:  12px;
  --ssd-r-pill:999px;

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

  --ssd-sh:   0 1px 2px rgba(17,24,28,.05), 0 4px 16px rgba(17,24,28,.05);
  --ssd-sh-h: 0 2px 6px rgba(17,24,28,.07), 0 14px 34px rgba(17,24,28,.12);

  --ssd-acc-10: color-mix(in srgb, var(--ssd-accent) 10%, #fff);
  --ssd-acc-16: color-mix(in srgb, var(--ssd-accent) 16%, #fff);
  --ssd-acc-dk: color-mix(in srgb, var(--ssd-accent) 80%, #000);
}

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

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

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

/* ════════════════════════════════════════════════════════════════
   THE DEAL TILE  (signature: top accent bar + store monogram)
   ════════════════════════════════════════════════════════════════ */
.ssd-card {
  position: relative;
  background: var(--ssd-surface);
  border: 1px solid var(--ssd-line);
  border-radius: var(--ssd-r);
  overflow: hidden;
  box-shadow: var(--ssd-sh);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ssd-card:hover { box-shadow: var(--ssd-sh-h); transform: translateY(-2px); border-color: var(--ssd-line2); }
.ssd-card.ssd-expired { opacity: .55; filter: grayscale(.4); pointer-events: none; }

/* top accent bar (non-featured) */
.ssd-bar { display: block; height: 4px; width: 100%; background: var(--ssd-accent); }

/* featured top strip (replaces overlapping corner flag) */
.ssd-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  background: var(--ssd-accent);
  color: #fff;
  font: 800 10.5px/1 var(--ssd-font); letter-spacing: .08em; text-transform: uppercase;
}
.ssd-strip-star { font-size: 11px; }

.ssd-in { padding: 18px 20px 18px; }

/* ── HEADER: monogram · store · save badge ── */
.ssd-head { display: flex; align-items: center; gap: 12px; }
.ssd-logo {
  flex: 0 0 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--ssd-acc-10);
  color: var(--ssd-acc-dk);
  font: 800 17px/1 var(--ssd-font); letter-spacing: -.02em;
}
.ssd-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ssd-store { font: 700 14px/1.2 var(--ssd-font); color: var(--ssd-ink); }
.ssd-verify { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/1 var(--ssd-font); color: var(--ssd-ok); }
.ssd-verify::before { content: "✓"; font-weight: 900; }

.ssd-save { margin-left: auto; text-align: right; flex-shrink: 0; padding-left: 10px; }
.ssd-save-val { display: block; font: 900 23px/1 var(--ssd-font); letter-spacing: -.03em; color: var(--ssd-accent); font-variant-numeric: tabular-nums; }
.ssd-save-sub { display: block; margin-top: 3px; font: 600 10.5px/1.2 var(--ssd-font); color: var(--ssd-muted); }

/* ── BODY ── */
.ssd-title { font: 800 16px/1.35 var(--ssd-font); letter-spacing: -.01em; color: var(--ssd-ink); margin: 14px 0 5px; }
.ssd-desc  { font: 400 13.5px/1.55 var(--ssd-font); color: var(--ssd-muted); margin: 0 0 12px; }

.ssd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.ssd-chip  { font: 600 11px/1 var(--ssd-font); padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
.ssd-chip-cat   { background: var(--ssd-acc-10); color: var(--ssd-acc-dk); }
.ssd-chip-green { background: var(--ssd-ok-l);     color: var(--ssd-ok); }
.ssd-chip-blue  { background: var(--ssd-blue-l);   color: var(--ssd-blue); }
.ssd-chip-red   { background: var(--ssd-urgent-l); color: var(--ssd-urgent); }
.ssd-chip-gold  { background: var(--ssd-amber-l);  color: var(--ssd-amber); }
.ssd-chip-gray  { background: #EEF1F4;             color: var(--ssd-muted); }

/* ── EXPIRY ── */
.ssd-expiry { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--ssd-font); margin: 0 0 14px; }
.ssd-expiry-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ssd-expiry-red   { color: var(--ssd-urgent); }
.ssd-expiry-red   .ssd-expiry-dot { background: var(--ssd-urgent); animation: ssd-pulse 1.4s ease-in-out infinite; }
.ssd-expiry-green { color: var(--ssd-muted); }
.ssd-expiry-green .ssd-expiry-dot { background: var(--ssd-ok); }
.ssd-timer { font-family: var(--ssd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes ssd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ════════════════════════════════════════════════════════════════
   ACTION — ONE button reveals code + opens store
   ════════════════════════════════════════════════════════════════ */
.ssd-action { display: flex; flex-direction: column; gap: 10px; }

.ssd-code {
  display: none;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1.5px dashed var(--ssd-accent);
  border-radius: var(--ssd-r-sm);
  background: var(--ssd-acc-10);
  cursor: copy;
  -webkit-tap-highlight-color: transparent;
  animation: ssd-pop .22s ease both;
}
.ssd-card.ssd-revealed .ssd-code { display: flex; }
.ssd-code-dots { display: none; }
.ssd-code-text {
  flex: 1; min-width: 0;
  font: 800 18px/1 var(--ssd-mono); letter-spacing: .1em;
  color: var(--ssd-acc-dk); word-break: break-all;
}
.ssd-copy-hint {
  font: 700 11px/1 var(--ssd-font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ssd-accent); white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.ssd-copy-hint::before { content: "⧉"; font-size: 13px; }
.ssd-copied { display: none; font: 700 11px/1 var(--ssd-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ssd-ok); white-space: nowrap; flex-shrink: 0; }
.ssd-code.is-copied .ssd-copy-hint { display: none; }
.ssd-code.is-copied .ssd-copied    { display: inline; }
@keyframes ssd-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* THE single CTA */
.ssd-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  font: 800 15px/1.2 var(--ssd-font); letter-spacing: -.01em;
  color: #fff; background: var(--ssd-accent);
  border: none; border-radius: var(--ssd-r-sm);
  padding: 14px 18px;
  cursor: pointer;
  -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ssd-accent) 28%, transparent);
}
.ssd-cta:hover  { background: var(--ssd-acc-dk); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ssd-accent) 34%, transparent); }
.ssd-cta:active { transform: translateY(0); }
.ssd-cta-ico { font-size: 17px; transition: transform .18s ease; }
.ssd-cta:hover .ssd-cta-ico { transform: translateX(3px); }
.ssd-card.ssd-revealed .ssd-cta { background: var(--ssd-ink); box-shadow: none; }
.ssd-card.ssd-revealed .ssd-cta:hover { background: #000; }

.ssd-nocode { font: italic 400 12.5px/1.4 var(--ssd-font); color: var(--ssd-faint); }

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

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .ssd-in { padding: 16px 16px; }
  .ssd-save-val { font-size: 21px; }
  .ssd-title { font-size: 15px; }
}
@media (max-width: 380px) {
  .ssd-logo { flex-basis: 42px; height: 42px; font-size: 15px; }
  .ssd-code-text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssd-card, .ssd-cta, .ssd-cta-ico, .ssd-code, .ssd-expiry-dot { transition: none !important; animation: none !important; }
  .ssd-card:hover { transform: none; }
}

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