/*
  Deal Network Design System  —  v0.1.0
  -------------------------------------------------------------------------
  SINGLE source of truth for every frontend component in the network:
  offer cards, intelligence widgets, leaderboards, content, forms.

  Distilled DNA:
    - Offer cards      <- Skyscanner / RetailMeNot / Honey
    - Intelligence     <- Hopper buy-wait / Google Flights price history /
                          financial dashboards (Stripe, Bloomberg)

  PRINCIPLES (apply to ALL families):
    1. Color scarcity   — green = money/savings ONLY. Everything else neutral.
    2. Semantic color   — green = action, dark = status/trust, amber = urgency.
    3. Label every number with its unit. Forecast dimmer than confirmed.
    4. Flat, lean, boring on purpose. Hierarchy via size + weight, not chrome.

  MARKUP CONTRACT
    Wrap any component in a `.ds` element. Compose from these primitives:
      ds-card (--hero)         ds-val (--best)        ds-badge
      ds-btn (--go / --block)  ds-code                ds-chip (--ship / --urgent)
      ds-stat                  ds-signal (--buy / --wait / --watch)
      ds-spark / ds-spark__bar (--fc)                 ds-section
    Layout helpers: ds-feed, ds-stack, ds-row-top, ds-row-act, ds-row-meta,
                    ds-stats-3, ds-cta-row
  -------------------------------------------------------------------------
*/

/* NB: Plus Jakarta Sans + JetBrains Mono are loaded via wp_enqueue_style('ds-fonts') in
   deal-design-system.php (a real <link> with display=swap + preconnect) — NOT a render-blocking @import. */

:root{
  /* money / action (green) — AA contrast on white */
  --ds-money-ink:#0F766E;
  --ds-money-solid:#0F766E;
  --ds-money-solid-hover:#0B5C55;
  --ds-money-fill:#E6F7F1;
  --ds-money-bright:#2DD4BF;      /* bright teal — money green on DARK surfaces (e.g. card heroes) */

  /* status / trust (dark charcoal) */
  --ds-status-ink:#1A2332;
  --ds-status-fill:#EEF1F5;

  /* urgency (amber) — AA contrast on white */
  --ds-urgent-ink:#B45309;
  --ds-urgent-fill:#FEF3C7;

  /* neutrals */
  --ds-ink:#1A2332;        /* primary text          */
  --ds-muted:#5C6A7F;      /* secondary text (AA)    */
  --ds-faint:#8A94A6;      /* hints / tertiary       */
  --ds-line:#E6E9EF;       /* borders / dividers     */
  --ds-surface:#FFFFFF;    /* card background        */
  --ds-surface-2:#F5F7F9;  /* tiles / code wells     */
  --ds-page:#F2F4F7;       /* page background        */

  /* typography */
  --ds-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ds-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* radius */
  --ds-r-sm:8px;
  --ds-r:12px;
  --ds-r-lg:16px;
  --ds-r-pill:999px;

  /* elevation — single, flat step */
  --ds-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.05);

  --ds-t:160ms ease;
}

@media (prefers-color-scheme:dark){
  :root{
    --ds-money-ink:#5EEAD4;
    --ds-money-solid:#0F766E;
    --ds-money-solid-hover:#15938A;
    --ds-money-fill:#0E2A28;
    --ds-money-bright:#5EEAD4;

    --ds-status-ink:#E6E9EF;
    --ds-status-fill:#222B38;

    --ds-urgent-ink:#FBBF24;
    --ds-urgent-fill:#3A2E12;

    --ds-ink:#E6E9EF;
    --ds-muted:#9AA6B8;
    --ds-faint:#6B7689;
    --ds-line:#2A3342;
    --ds-surface:#161C26;
    --ds-surface-2:#1C2430;
    --ds-page:#0F141B;

    --ds-shadow:0 1px 2px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.35);
  }
}

/* --- wrapper reset: survive theme + Tailwind preflight ------------------ */
.ds,.ds *{box-sizing:border-box;}
.ds{font-family:var(--ds-font);color:var(--ds-ink);line-height:1.5;-webkit-font-smoothing:antialiased;}
.ds a{color:inherit;text-decoration:none;}
/* UI link reset — card / button / CTA links across the deal network are NEVER underlined (blog body links keep theirs for accessibility). !important beats the theme's .entry-content a underline. */
.dhp a,.bof-wrapper a,.lof-wrapper a,.clo-wrapper a,a[class*="-cta"],a[class*="-btn"],a[class*="-deal"],a[class*="-card"],a[class*="-pill"],a[class*="brand-link"],a[class*="-activate-offer"],a[class*="-chip"]{text-decoration:none!important;}
.ds p{margin:0;}

/* --- card -------------------------------------------------------------- */
.ds-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow);
  padding:14px 16px;
}
.ds-card--hero{border:2px solid var(--ds-money-solid);}

/* --- layout helpers ---------------------------------------------------- */
.ds-feed{display:flex;flex-direction:column;gap:10px;}
.ds-stack{display:flex;flex-direction:column;gap:9px;}
.ds-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.ds-row-act{display:flex;gap:8px;align-items:stretch;}
.ds-row-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--ds-faint);}
.ds-stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

/* --- section label ----------------------------------------------------- */
.ds-section{font-size:13px;font-weight:700;color:var(--ds-muted);letter-spacing:.02em;margin:0 0 8px;}

/* --- discount anchor value (the headline number) ----------------------- */
.ds-val{font-size:21px;font-weight:800;color:var(--ds-ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ds-val--best{color:var(--ds-money-ink);}     /* color scarcity: best deal only */

/* --- brand name -------------------------------------------------------- */
.ds-brand{font-size:15px;font-weight:700;color:var(--ds-ink);}

/* --- supporting copy --------------------------------------------------- */
.ds-desc{font-size:13px;color:var(--ds-muted);}

/* --- badge (money) ----------------------------------------------------- */
.ds-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--ds-r-sm);background:var(--ds-money-fill);color:var(--ds-money-ink);}

/* --- chips ------------------------------------------------------------- */
.ds-chip{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--ds-r-sm);}
.ds-chip--ship{background:var(--ds-status-fill);color:var(--ds-status-ink);}
.ds-chip--urgent{background:var(--ds-urgent-fill);color:var(--ds-urgent-ink);}
.ds-chip i{vertical-align:-2px;margin-right:4px;}

/* --- code well (masked until reveal) ----------------------------------- */
.ds-code{display:inline-flex;align-items:center;font-family:var(--ds-mono);font-size:14px;font-weight:700;letter-spacing:2px;color:var(--ds-muted);background:var(--ds-surface-2);border-radius:var(--ds-r-sm);padding:9px 12px;}

/* --- buttons ----------------------------------------------------------- */
/* Rule 1: no border+radius (browser clips); fake the border with inset shadow.
   Rule 2: inline-block for text buttons (inline-flex clips descenders). */
.ds-btn{
  display:inline-block;
  font:inherit;font-weight:700;font-size:14px;line-height:1.2;text-align:center;
  padding:12px 16px;min-height:44px;
  border:none;border-radius:var(--ds-r-sm);
  background:transparent;color:var(--ds-ink);
  box-shadow:inset 0 0 0 1px var(--ds-line);
  cursor:pointer;transition:box-shadow var(--ds-t),background var(--ds-t);
}
.ds-btn i{vertical-align:-2px;margin-left:5px;}
.ds-btn:hover{box-shadow:inset 0 0 0 1px var(--ds-muted);}
.ds-btn:focus-visible{outline:2px solid var(--ds-money-solid);outline-offset:2px;}
.ds-btn--go{background:var(--ds-money-solid);color:#fff;box-shadow:none;}
.ds-btn--go:hover{background:var(--ds-money-solid-hover);box-shadow:none;}
.ds-btn--block{display:block;width:100%;}

/* --- stat tile (intelligence) ------------------------------------------ */
.ds-stat{background:var(--ds-surface-2);border-radius:var(--ds-r);padding:10px 12px;}
.ds-stat__label{font-size:12px;color:var(--ds-muted);margin:0 0 3px;}
.ds-stat__num{font-size:22px;font-weight:800;color:var(--ds-ink);margin:0;font-variant-numeric:tabular-nums;}

/* --- signal / verdict pill (the intelligence anchor) ------------------- */
.ds-signal{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 11px;border-radius:var(--ds-r-sm);white-space:nowrap;}
.ds-signal--buy{background:var(--ds-money-fill);color:var(--ds-money-ink);}
.ds-signal--wait{background:var(--ds-urgent-fill);color:var(--ds-urgent-ink);}
.ds-signal--watch{background:var(--ds-status-fill);color:var(--ds-status-ink);}
.ds-signal i{font-size:15px;}

/* --- sparkline (confirmed vs forecast) --------------------------------- */
.ds-spark{display:flex;align-items:flex-end;gap:5px;height:62px;}
.ds-spark__bar{flex:1;background:var(--ds-faint);border-radius:2px 2px 0 0;min-height:3px;}
.ds-spark__bar--fc{opacity:.3;}            /* forecast: dimmer than confirmed */

/* --- mobile ------------------------------------------------------------ */
@media (max-width:480px){
  .ds-cta-row{flex-direction:column;}
  .ds-cta-row .ds-btn{width:100%;}
  .ds-stats-3{grid-template-columns:repeat(3,1fr);gap:8px;}
}

/* --- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ds-btn{transition:none;}
}

/* === Compliance === */
/* Belt-and-suspenders: suppress LLM buy/wait advice prose. PRIMARY fix is server-side
   (BHI sanitize_signal_text() returns '' so these never render); this CSS is backup in
   case that field ever returns. Targets every buy_signal_text/reason render class. */
.bhi-urgency-text,.bhi-signal-text,.bhi-pred-text,.bhi-pred-reason,.bhi-pi-prediction,.bhi-highlight-text{display:none!important;}
/* Neutralise the buy/wait signal COLOUR-CODING (amber=wait, green=buy implied a directive).
   One neutral treatment for every state; the reframed data LABEL carries the meaning. */
.bhi-signal-icon,.bhi-urgency-icon{background:var(--ds-surface-2,#f5f7f9)!important;}
.bhi-signal-label,.bhi-urgency-label{color:var(--ds-ink,#1a2332)!important;}
.bhi-signal-xl,.bhi-signal-m,.bhi-signal-s,.bhi-urgency-alert{border-color:var(--ds-line,#e6e9ef)!important;}
.bhi-signal-s.bhi-signal-buy_now,.bhi-signal-s.bhi-signal-good_time,.bhi-signal-s.bhi-signal-wait,.bhi-signal-s.bhi-signal-uncertain{background:var(--ds-surface-2,#f5f7f9)!important;color:var(--ds-ink,#1a2332)!important;}
/* bhi-script.js injects a colour-coded buy-signal DOT (green=buy / amber=wait, inline-styled) into
   every brand link site-wide (.brand-link[data-brand]) — a buy/wait directive. Remove it + the
   injected mini-trend on brand links; the directory shows reliability + discount as data instead. */
.bhi-signal-dot{display:none!important;}
.brand-link .bhi-mini-trend,.sb-brand-item .bhi-mini-trend{display:none!important;}

/* === Mobile QA fixes (28.06.2026) === */
/* BHI 4-up stat grid: long pattern/trend words ("ebakorrapärane") were forcing cells past min-content
   → grid overflowed + clipped the right column. minmax(0,1fr) lets cells shrink; word-break wraps. */
@media (max-width:600px){
  .bhi-stats-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .bhi-stats-row .bhi-stat-box{min-width:0!important;}
  .bhi-stats-row .bhi-stat-number{overflow-wrap:anywhere!important;word-break:break-word!important;}
}
/* Flatten the historic-trends-viewer off-brand ORANGE gradient "next likely" card to the flat design system. */
.historic-trends-viewer-component .htv-next-likely-card-mobile{background:var(--ds-money-fill,#E6F7F1)!important;color:var(--ds-ink,#1a2332)!important;}
.historic-trends-viewer-component .htv-next-likely-card-mobile .card-title,.historic-trends-viewer-component .htv-next-likely-card-mobile .htv-card-title{color:var(--ds-money-ink,#0F766E)!important;}
.historic-trends-viewer-component .htv-orange-card-button{background:var(--ds-money-solid,#0F766E)!important;color:#fff!important;}
/* History toggle ("Peida aegunud") was an oversized dark full-width pill on mobile; restore a compact, right-aligned, light button. */
.bhi-history-toggle-wrapper{text-align:right!important;}
.bhi-history-toggle{display:inline-flex!important;width:auto!important;max-width:max-content!important;padding:9px 16px!important;font-size:.85rem!important;font-weight:600!important;background:var(--ds-surface-2,#f5f7f9)!important;color:var(--ds-muted,#5c6a7f)!important;border:1px solid var(--ds-line,#e6e9ef)!important;border-radius:var(--ds-r-pill,999px)!important;box-shadow:none!important;min-height:0!important;}
.bhi-history-toggle[aria-expanded="true"]{background:var(--ds-money-fill,#E6F7F1)!important;color:var(--ds-money-ink,#0F766E)!important;border-color:var(--ds-money-solid,#0F766E)!important;}
/* CREDIBILITY: the BHI "✅ Kehtib kuni [date]" chip stamps a hardcoded DEFAULT expiry (≈ today+18mo,
   e.g. 26.12.2027) on EVERY offer incl. expired ones — a fake green "valid until ✓" that contradicts the
   card's real status. Suppress it; the offer card shows the true active/expired state + real expiry.
   (Deeper fix: the chip should read each offer's real expiry, not a default — flagged for a BHI data pass.) */
.bhi-chip--pro,.bhi-mini-trend--chips{display:none!important;}

/* === Mobile QA round 2 (28.06.2026) === */
/* BOF filter pills were set to overflow-x:visible on mobile → the last pill ("Pakkumised") clipped at the
   viewport edge instead of scrolling. Restore horizontal scroll. */
.bof-filter-pills{overflow-x:auto!important;}
/* Confirmed/verified date ("Kinnitatud 09.03.2026") is white-space:nowrap, so beside the wide
   "PARIM PAKKUMINE" badge it overflowed + clipped the year. Allow it to wrap. */
.bof-verified{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
/* Affiliate disclosure — small, muted footer line */
.ds-disclosure{max-width:760px;margin:6px auto 18px;padding:0 16px;text-align:center;font-size:11px;line-height:1.5;color:var(--ds-faint,#8a94a6);}