/* ============================================================================
   free-os.css: /free-games/, /free-software/ and the deal pages in the
   homepage's look (owner 2026-09-27, approved with the /events/ mockup
   7MBQTA2tqAPYQrGUmsJduv: "in the same design do the same for free apps").
   Loaded by Theme\FreeOs only; every rule is under body.cg-free-os, which only
   cryptogames.gg carries. deals.css reads tokens, so most of the change is
   re-pointing those tokens at home-os.css's palette; the rest gives the hero,
   the filters and the main buttons the homepage's shapes and gradient.
   Green stays only where it means "free" or "live".
   ============================================================================ */

/* ---------------------------------------------------------------- tokens */
body.cg-free-os {
  --fos-bg: #191919;
  --fos-s1: #212121;
  --fos-s2: #333333;
  --fos-s3: #3f3f3f;
  --fos-line: rgba(255, 255, 255, .08);
  --fos-text: #ffffff;
  --fos-muted: #b5b5b5;
  --fos-accent: #9d8cff;
  --fos-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  --fos-soft-line: rgba(157, 140, 255, .28);
  --fos-glow: rgba(123, 47, 192, .55);
  --fos-glow-2: rgba(74, 40, 196, .28);
  --fos-well: rgba(0, 0, 0, .32);
}
body:not([data-theme="dark"]).cg-free-os {
  --fos-bg: #ffffff;
  --fos-s1: #f4f4f6;
  --fos-s2: #e9e9ee;
  --fos-s3: #dedee6;
  --fos-line: rgba(0, 0, 0, .08);
  --fos-text: #191919;
  --fos-muted: #6b6b6b;
  --fos-accent: #4a28c4;
  --fos-soft-line: rgba(74, 40, 196, .22);
  --fos-glow: rgba(123, 47, 192, .22);
  --fos-glow-2: rgba(74, 40, 196, .12);
  --fos-well: rgba(255, 255, 255, .7);
}

/* What deals.css reads, pointed at the palette above. */
body.cg-free-os .cg-deals {
  --color-on-surface: var(--fos-text);
  --color-on-surface-variant: var(--fos-muted);
  --color-surface-container-low: var(--fos-s1);
  --color-surface-container: var(--fos-s2);
  --color-surface-container-high: var(--fos-s3);
  --color-surface-container-highest: var(--fos-s3);
  --color-outline-variant: var(--fos-line);
  --color-outline: var(--fos-line);
  --color-primary-fixed-dim: var(--fos-accent);
  --color-primary-container: #4a28c4;
  --color-on-primary-container: #ffffff;
  --color-tertiary-container: #35b477;
  --color-on-tertiary-container: #ffffff;
  --color-secondary: #d65a52;
  --color-error: #d65a52;
  --rgb-on-surface: 255, 255, 255;
  --rgb-surface: 25, 25, 25;
  --rgb-surface-container-low: 33, 33, 33;
  --rgb-surface-container-lowest: 17, 17, 17;
  --rgb-outline-variant: 58, 58, 58;
  --rgb-outline: 120, 120, 120;
  --rgb-primary-container: 74, 40, 196;
  --rgb-secondary-container: 123, 47, 192;
  --rgb-tertiary-container: 53, 180, 119;
  --rgb-error: 214, 90, 82;
  --cg-deals-accent: var(--fos-accent);
  --cg-deals-accent-rgb: 157, 140, 255;
  --cg-deals-mono: Inter, system-ui, sans-serif;
  --font-headline: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-label: Inter, system-ui, sans-serif;
}
body:not([data-theme="dark"]).cg-free-os .cg-deals {
  --color-tertiary-container: #2f9e68;
  --color-secondary: #c0453e;
  --color-error: #c0453e;
  --rgb-on-surface: 25, 25, 25;
  --rgb-surface: 255, 255, 255;
  --rgb-surface-container-low: 244, 244, 246;
  --rgb-surface-container-lowest: 255, 255, 255;
  --rgb-outline-variant: 222, 222, 230;
  --rgb-outline: 160, 160, 170;
  --rgb-tertiary-container: 47, 158, 104;
  --rgb-error: 192, 69, 62;
  --cg-deals-accent-rgb: 74, 40, 196;
}

/* ---------------------------------------------------------- page ground */
body.cg-free-os,
body.cg-free-os main.cg-main,
body.cg-free-os .cg-content-area.cg-deals { background: var(--fos-bg); }
body.cg-free-os .cg-content-area.cg-deals { padding: 20px 24px 40px; }
body.cg-free-os .cg-deals-stat-num,
body.cg-free-os .cg-deals-count,
body.cg-free-os .cg-deal-worth { font-variant-numeric: tabular-nums; }

body.cg-free-os .cg-deals-crumbs ol { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ------------------------------------------------------------------ hero */
body.cg-free-os .cg-deals-hero {
  margin-bottom: 18px; padding: 26px 28px; border: 0; border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--fos-glow) 0%, var(--fos-glow-2) 35%, transparent 70%),
    var(--fos-s1);
}
body.cg-free-os .cg-deals-title { font: 800 40px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
body.cg-free-os .cg-deals-hero .cg-deals-intro { font-size: 15px; }
body.cg-free-os .cg-deals-stats { margin-top: 20px; padding-top: 0; border-top: 0; gap: 10px; }
body.cg-free-os .cg-deals-stat { border: 1px solid var(--fos-line); background: var(--fos-well); }
body.cg-free-os .cg-deals-stat dd { font-size: 20px; font-weight: 700; }

/* --------------------------------------------------------------- filters */
body.cg-free-os .cg-deals-filters { border: 0; background: var(--fos-s1); }
body.cg-free-os .cg-deals-filters > * + * { border-top-color: var(--fos-line); }
body.cg-free-os .cg-deals .cg-deals-pill { border: 0; border-radius: 9px; background: var(--fos-s2); color: var(--fos-muted); font-weight: 600; }
body.cg-free-os .cg-deals .cg-deals-pill:hover { background: var(--fos-s3); color: var(--fos-text); }
body.cg-free-os .cg-deals .cg-deals-pill[aria-current="page"] { background: var(--fos-grad); color: #ffffff; box-shadow: none; }
body.cg-free-os .cg-deals-sort-select,
body.cg-free-os .cg-deals-sort-go { border-color: var(--fos-line); border-radius: 9px; background: var(--fos-s2); }

/* ---------------------------------------------------------------- cards */
body.cg-free-os .cg-deal-card { border-color: transparent; background: var(--fos-s1); }
body.cg-free-os .cg-deal-card:hover { border-color: var(--fos-soft-line); box-shadow: none; }
body.cg-free-os .cg-deal-claim { border: 0; background: var(--fos-s2); }
body.cg-free-os .cg-deal-card:hover .cg-deal-claim { background: var(--fos-grad); color: #ffffff; }
body.cg-free-os .cg-deal--expired:hover .cg-deal-claim { background: var(--fos-s2); color: var(--fos-muted); }
body.cg-free-os .cg-deal-chip { border-color: var(--fos-line); background: var(--fos-s2); }

/* --------------------------------------------------------------- buttons */
body.cg-free-os .cg-deals-btn { border-color: var(--fos-line); background: var(--fos-s2); border-radius: 10px; }
body.cg-free-os .cg-deals-btn:hover { background: var(--fos-s3); }
body.cg-free-os .cg-deals-btn--primary,
body.cg-free-os .cg-deals-btn--primary:hover { border-color: transparent; background: var(--fos-grad); color: #ffffff; }
body.cg-free-os .cg-deals .cg-deal-cta { background: var(--fos-grad); color: #ffffff; }
body.cg-free-os .cg-deals a.cg-deal-cta:hover { box-shadow: 0 6px 20px rgba(74, 40, 196, .3); }
body.cg-free-os .cg-deals .cg-deal-cta.is-disabled { background: var(--fos-s3); color: var(--fos-muted); }

/* ------------------------------------------------------- deal page, misc */
body.cg-free-os .cg-deal-panel,
body.cg-free-os .cg-deals-faq-card,
body.cg-free-os .cg-deals-other,
body.cg-free-os .cg-deals-empty { border-color: transparent; background: var(--fos-s1); }
body.cg-free-os .cg-deals-faq-card:hover { border-color: var(--fos-soft-line); }
body.cg-free-os .cg-deals-more { border-top-color: var(--fos-line); }

/* ----------------------------------------------------------------- sizes */
@media (max-width: 767px) {
  body.cg-free-os .cg-content-area.cg-deals { padding: 12px 12px 32px; }
  body.cg-free-os .cg-deals-hero { padding: 18px; }
  body.cg-free-os .cg-deals-title { font-size: 28px; }
  body.cg-free-os .cg-deals-stat dd { font-size: 16px; }
}