/* ════════════════════════════════════════════════
   NC User Dashboard — v2 Theme Skin
   Loads AFTER dashboard.css and overrides its design
   tokens to match nc-theme-v2 (Inter font, no serif/
   italic, v2 green palette, pill buttons).
   Zero JS changes required — same IDs/classes throughout.
   ════════════════════════════════════════════════ */

/* ── 1. Remap every design token to v2's palette ── */
:root {
  --d-green:#1b8a4f; --d-green-lt:#22a35a; --d-green-50:#eaf6ef;
  --d-green-100:#d2ecdd; --d-green-900:#0f3d2e;
  --d-cream:#faf9f6; --d-white:#ffffff;
  --d-ink:#1c2521; --d-ink-60:#5b6661; --d-ink-12:#e7e6e2;
  --d-amber:#f0a430; --d-blue:#3b6fe0; --d-red:#ef4444;

  /* Drop the serif display font entirely — v2 is Inter everywhere */
  --d-fd:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --d-fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --d-fm:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --d-r:14px; --d-r-lg:20px; --d-r-xl:20px;
  --d-sh:0 4px 24px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
  --d-sh-lg:0 24px 60px -24px rgba(20,60,40,.35);
}

/* ── 2. Headings — serif/italic to bold Inter ── */
.ncd-auth-left h1,
.ncd-section-header h2,
.ncd-ring-num,
.ncd-card h3,
.ncd-meal-score,
.ncd-empty-state h3,
.ncd-avatar-initials,
.ncd-bmi-ov-empty strong {
  font-family: var(--d-fb) !important;
  font-style: normal !important;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* SVG gauge text (BMI numbers) was hardcoded with font-family attrs
   inline in the PHP -- can't change those without touching markup,
   but the CSS below catches the wrapping text elements where it can. */
.ncd-bmi-gauge text,
.ncd-bmi-ov-svg text {
  font-family: var(--d-fb) !important;
}

/* ── 3. Buttons — pill consistency, flatten shadows ── */
.ncd-btn-submit,
.ncd-analyze-cta,
.ncd-upgrade-btn,
.ncd-btn-save,
.ncd-load-more {
  border-radius: 50px !important;
  font-family: var(--d-fb);
  font-weight: 700;
  box-shadow: none !important;
  transition: transform 0.1s, background 0.15s;
}
.ncd-btn-submit:hover,
.ncd-analyze-cta:hover,
.ncd-btn-save:hover {
  background: var(--d-green-900) !important;
  transform: none;
}
.ncd-btn-submit:active,
.ncd-analyze-cta:active,
.ncd-btn-save:active { transform: scale(0.98); }

/* ── 4. Cards — consistent radius ── */
.ncd-card,
.ncd-stat-card,
.ncd-meal-card,
.ncd-bmi-card,
.ncd-upgrade-card,
.ncd-profile-form {
  border-radius: var(--d-r-lg) !important;
}

/* ── 5. Nav items — pill-shaped active state ── */
.ncd-nav-item {
  border-radius: 50px !important;
}
.ncd-nav-item.active {
  background: var(--d-green) !important;
  color: #fff !important;
}

/* ── 6. Toggle buttons (kg/lbs, cm/inch) ── */
.ncd-toggle-btn {
  border-radius: 8px !important;
}

/* ── 7. Tier/premium badges ── */
.ncd-tier-badge,
.ncd-premium-badge,
.ncd-tag {
  border-radius: 50px !important;
  font-family: var(--d-fb);
}

/* ════════════════════════════════════════════════
   8. SIDEBAR AFFILIATE WIDGET (new)
   Matches the same ad-card pattern used in the v2
   theme's Food Database sidebar (ncv2_render_sidebar_ad_card).
   ════════════════════════════════════════════════ */
.ncd-sidebar-aff {
  margin: 1.25rem 0 0;
  padding: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--d-r-lg);
  text-align: center;
}
.ncd-sidebar-aff-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #f0a430;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* Thumbnail plate. Amazon product shots are almost always cut out on
   white, so they vanish against a dark sidebar without a light backing.
   object-fit:contain rather than cover — a cropped product is worse
   than a small one when the image IS the pitch. */
.ncd-sidebar-aff-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 118px;
  margin: 0 auto 9px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ncd-sidebar-aff-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}
/* No photo in the catalogue — the emoji keeps its old look, sitting on
   the sidebar rather than on a white plate that would frame nothing. */
.ncd-sidebar-aff-thumb--icon {
  background: transparent;
  max-height: none;
  aspect-ratio: auto;
  margin-bottom: 0;
}
.ncd-sidebar-aff-icon { font-size: 32px; margin-bottom: 6px; }
.ncd-sidebar-aff-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.ncd-sidebar-aff-price {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.ncd-sidebar-aff-btn {
  display: block;
  width: 100%;
  padding: 8px;
  background: var(--d-green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}
.ncd-sidebar-aff-btn:hover { background: var(--d-green-lt); }

/* ════════════════════════════════════════════════
   10. GOAL-AWARE MACRO BARS (new)
   Small additions for the Overview macro card once
   the user has saved targets via /goals/.
   ════════════════════════════════════════════════ */
.ncd-macro-vs-goal {
  font-size: 12px;
  color: var(--d-ink-60);
  font-weight: 500;
}
.ncd-mbar-of {
  color: var(--d-ink-60);
  font-weight: 500;
}

/* ════════════════════════════════════════════════
   11. AD SLOTS (new) — Google AdSense placeholders
   Clearly labelled, optional containers. Drop your
   AdSense <ins> unit inside .ncd-ad-slot-inner.
   ════════════════════════════════════════════════ */
.ncd-ad-slot {
  margin: 1.5rem 0;
  width: 100%;
}
.ncd-ad-slot-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--d-ink-60);
  text-align: center;
  margin-bottom: 6px;
  opacity: 0.6;
}
.ncd-ad-slot-inner {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--d-white);
  border: 1px dashed var(--d-ink-12);
  border-radius: var(--d-r-lg);
  color: var(--d-ink-60);
  font-size: 13px;
}
/* In-feed ad variant — sits inline within the meal grid */
.ncd-ad-slot--infeed {
  margin: 0;
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .ncd-ad-slot-inner { min-height: 80px; }
}