/* ==========================================================================
   CamDiscounts — lightweight stylesheet
   No frameworks, no webfonts, no external requests.

   Palette and type scale derived from mnogo.chat (Tailwind + shadcn/ui):
     background      #FFFFFF          signature wash: pink-50 -> blue-50
     heading         #0F172A          shadcn --primary (light)
     body text       #4B5563          gray-600  (their dominant text colour)
     primary action  #2563EB          blue-600, hover blue-700 #1D4ED8
     borders         #E5E7EB          gray-200
     soft chips      pink-100 / blue-100 / purple-100
   Font: Tailwind's default system stack — mnogo.chat loads no webfont.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #ffffff;
  --wash-from: #fdf2f8;          /* pink-50  */
  --wash-to:   #eff6ff;          /* blue-50  */
  --surface:   #ffffff;
  --surface-2: #f9fafb;          /* gray-50  */
  --line:      #e5e7eb;          /* gray-200 */

  /* Type */
  --heading: #0f172a;            /* shadcn --primary */
  --text:    #374151;            /* gray-700 */
  --muted:   #4b5563;            /* gray-600 */
  --muted-2: #6b7280;            /* gray-500 */

  /* Accents */
  --accent:       #2563eb;       /* blue-600 */
  --accent-hover: #1d4ed8;       /* blue-700 */
  --accent-ink:   #ffffff;
  --accent-soft:  #dbeafe;       /* blue-100 */
  --pink-soft:    #fce7f3;       /* pink-100 */
  --purple-soft:  #f3e8ff;       /* purple-100 */

  /* Status. --rank is small uppercase TEXT, so it needs 4.5:1 on white:
     amber-700 gives 5.02:1, where amber-500/600 would fail. */
  --rank: #b45309;               /* amber-700 — 5.02:1 */
  --good: #15803d;               /* green-700 — verified status */
  --bad:  #b91c1c;               /* red-700   — expired status  */

  --radius: 14px;
  --max: 1100px;

  /* Tailwind's default stacks, exactly as mnogo.chat resolves them. */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font: 16px/1.65 var(--font-sans);
  overflow-wrap: break-word;

  /* mnogo.chat's signature full-page wash: bg-gradient-to-br from-pink-50 to-blue-50 */
  background: var(--bg);
  background-image: linear-gradient(to bottom right, var(--wash-from), var(--wash-to));
  background-attachment: fixed;
  min-height: 100vh;
}

code, pre, kbd { font-family: var(--font-mono); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; color: var(--heading); font-weight: 700; }
h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 3.6vw, 1.9rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.section { padding: 48px 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }

/* Accessibility ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 60px; flex-wrap: wrap;
}
.brand {
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
  color: var(--heading); text-decoration: none; margin-right: auto;
}
.brand span { color: var(--accent); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none;
  padding: 6px 10px; border-radius: 8px; font-size: .95rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--heading); background: var(--surface-2); }

.badge-18 {
  display: inline-flex; align-items: center;
  background: var(--pink-soft);
  border: 1px solid #f9a8d4;               /* pink-300 */
  color: #be185d;                          /* pink-700 */
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 6px;
}

/* Hero ------------------------------------------------------------------- */
.hero { padding: 40px 0 8px; }
.hero .lead { margin-bottom: 20px; }

.btn {
  display: inline-block;
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 600;
  padding: 12px 22px; border-radius: 999px;
  border: 0; cursor: pointer; font-size: 1rem;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost {
  background: var(--surface); color: var(--heading);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--heading); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Flirtbees embed -------------------------------------------------------- */
/* Fixed reserved box = zero layout shift when the widget loads. */
.embed {
  width: 700px;
  max-width: 100%;
  height: 600px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: block;
  overflow: hidden;
  color-scheme: light;
}
@media (max-width: 760px) { .embed { height: 560px; } }
@media (max-width: 420px) { .embed { height: 480px; } }

.embed-note {
  max-width: 700px; margin: 10px auto 0;
  font-size: .8rem; color: var(--muted-2); text-align: center;
}

/* Cards ------------------------------------------------------------------ */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card--featured {
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(37, 99, 235, .12);
}

.rank {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--rank);
}
/* Deal cards ------------------------------------------------------------- */
.deal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.deal-card h3 { margin: 0; }
.deal-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.deal-card .btn { margin-top: auto; align-self: flex-start; }
.deal-card--featured {
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(37, 99, 235, .12);
}

/* The offer itself — the one line a visitor actually scans for. */
.deal-headline {
  font-size: 1.25rem !important;
  font-weight: 700;
  color: var(--accent) !important;
  line-height: 1.25;
}
.deal-headline--empty {
  color: var(--muted-2) !important;
  font-weight: 600;
  font-size: 1rem !important;
}

.deal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.deal-status {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted-2);
}
.deal-status--live {
  background: #dcfce7;                     /* green-100 */
  border-color: #86efac;                   /* green-300 */
  color: var(--good);                      /* green-700 — 4.8:1 on green-100 */
}
.deal-status--expired {
  background: #fee2e2;                     /* red-100 */
  border-color: #fca5a5;                   /* red-300 */
  color: var(--bad);                       /* red-700 — 5.9:1 on red-100 */
}

/* Promo code chip. Only ever used for a code that has actually been verified. */
.code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1rem; font-weight: 700;
  letter-spacing: .08em;
  padding: 8px 16px;
  border: 2px dashed var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: #1e3a8a;                          /* blue-900 */
  user-select: all;                        /* one click selects the whole code */
}

/* Table ------------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
table {
  width: 100%; border-collapse: collapse;
  min-width: 620px; font-size: .95rem;
}
caption { text-align: left; color: var(--muted-2); font-size: .875rem; padding: 14px 14px 10px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; background: var(--surface-2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
tbody th { font-weight: 600; color: var(--heading); }

/* FAQ -------------------------------------------------------------------- */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq summary { cursor: pointer; font-weight: 600; list-style: none; color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* Prose (reviews & guides) ----------------------------------------------- */
.prose { max-width: 70ch; }
.prose ul, .prose ol { color: var(--muted); padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
  margin: 0 0 1em; padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft); color: #1e3a8a;   /* blue-900 */
  border-radius: 0 8px 8px 0;
}

.breadcrumbs { font-size: .85rem; color: var(--muted-2); padding: 16px 0 0; }
.breadcrumbs a { color: var(--muted-2); }
.breadcrumbs a:hover { color: var(--accent); }

.disclosure {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: .85rem; color: var(--muted);
  margin: 0 0 24px;
}

/* Footer ----------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .6);
  padding: 32px 0;
  color: var(--muted);
  font-size: .875rem;
}
.site-footer .wrap { display: grid; gap: 16px; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer strong { color: var(--heading); }

/* Optional age gate (inactive unless assets/agegate.js is loaded) --------- */
.agegate {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(255, 255, 255, .97);
  display: grid; place-items: center; padding: 24px;
}
.agegate__box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; max-width: 420px; text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}