/* ============================================================
   goud999safe — pagina-CSS: Prijsgrafieken
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ─────────────────────────────────────────────
     Prijsgrafieken — filterbalk + grafiek-placeholder + footer.
     Hergebruikt .card en .btn-buy. (Live grafiek: Netdania, in productie.)
     ───────────────────────────────────────────── */
  .pg-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--grey-line); }
  .pg-filter { display: flex; align-items: center; gap: 8px; }
  .pg-filter-label { font-size: var(--fs-11); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
  .pg-select { appearance: none; -webkit-appearance: none; min-width: 110px; padding: 8px 30px 8px 12px; border: 1.5px solid var(--grey-line); border-radius: var(--r-sm); background: var(--paper); font-family: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23162E25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
  .pg-select--sm { min-width: 78px; }
  .pg-select:hover { border-color: var(--forest); }
  .pg-select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(22,46,37,0.1); }
  .pg-divider { width: 1px; height: 20px; background: var(--grey-line); flex-shrink: 0; }

  .pg-chart { position: relative; min-height: 420px; height: calc(100vh - 340px); display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(180deg, #fff 0%, var(--grey-soft) 100%); }
  .pg-chart-img { width: 100%; height: 100%; object-fit: contain; opacity: 0.9; }
  .pg-chart-note { position: absolute; left: 24px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 48px); font-size: var(--fs-12); color: var(--text-soft); background: rgba(255,255,255,0.85); padding: 6px 10px; border-radius: var(--r-sm); }
  .pg-chart-note svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

  .pg-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; border-top: 1px solid var(--grey-line); background: var(--grey-soft); }
  .pg-footer-meta { font-size: var(--fs-13); color: var(--text-muted); }
  .pg-footer-meta strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  /* Kopen-knop compact (auto-breedte) i.p.v. de full-width form-variant van .btn-buy */
  .pg-footer .btn-buy { width: auto; height: auto; margin-top: 0; display: inline-flex; align-items: center; justify-content: center; padding: 11px 28px; }

  @media (max-width: 768px) {
    /* Compacte filterbalk: 3 keuzelijsten naast elkaar op 1 regel,
       labels + scheidingslijntjes verborgen → maximale ruimte voor de grafiek. */
    .pg-filters { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
    .pg-filter { flex: 1 1 0; min-width: 0; }
    /* Metaal-keuzemenu (eerste) breder dan Valuta + Eenheid ernaast. */
    .pg-filter:first-child { flex: 1.7 1 0; }
    .pg-filter-label { display: none; }
    .pg-divider { display: none; }
    .pg-select,
    .pg-select--sm { width: 100%; min-width: 0; padding: 9px 28px 9px 10px; background-position: right 8px center; }
    .pg-footer { display: none; }

    /* Schermvullend zonder scrollbalk: de pagina wordt op de viewport-hoogte
       vastgezet (100dvh, houdt rekening met de in/uitklappende iOS-adresbalk)
       en scrollt niet. De grafiek krijgt via flex exact de resterende ruimte —
       geen pixel-rekenwerk, dus geen overflow op echte toestellen. */
    body.pg-page,
    body.pg-page .main { height: 100dvh; overflow: hidden; }
    body.pg-page .main { display: flex; flex-direction: column; }
    body.pg-page .content { flex: 1 1 auto; min-height: 0; padding: 12px 12px 74px; overflow: hidden; }
    body.pg-page .pg-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.pg-page .pg-filters { flex: 0 0 auto; }
    body.pg-page .pg-chart { flex: 1 1 auto; min-height: 0; height: auto; padding: 12px; }
    .pg-chart-note { left: 12px; bottom: 12px; }
  }