/* ============================================================
   Foto de Vakman — vergelijken.css  (module: vergelijken)

   Alleen wat het designsysteem nog niet heeft. De tabel zelf is
   .fdv-compare-wrap / .fdv-compare uit assets/css/main.css; hier
   staan de vergelijkbalk, het vinkje op de productkaart en de
   paar tabelnuances. Alle kleuren, radii en tijden komen uit de
   bestaande custom properties — geen eigen palet.
============================================================ */

/* ── Paginakop met de schakelaar ─────────────────────────── */
.vgl-head { align-items: flex-start; gap: 24px; }
.vgl-diff { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vgl-diff .fdv-switch { gap: 12px; }
.vgl-note { margin-bottom: 20px; }
.vgl-empty { max-width: 46rem; }
.vgl-foot { margin-top: 16px; color: var(--fdv-muted); }

/* ── Kolomkoppen: de productkaartjes ─────────────────────── */
.vgl-corner { background: var(--fdv-bg); }
.vgl-col { min-width: 220px; }
.vgl-card { align-items: stretch; text-align: left; font-weight: 400; }
.vgl-card .fdv-product__name { font-size: 16px; line-height: 1.35; }
.vgl-card form { margin: 0; }

.vgl-col--add { min-width: 180px; }
.vgl-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 240px; padding: 18px; text-align: center;
  border: 1px dashed var(--fdv-line-control); border-radius: var(--fdv-r-xl);
  color: var(--fdv-muted); transition: border-color var(--fdv-t), color var(--fdv-t);
}
.vgl-add:hover { border-color: var(--fdv-accent); color: var(--fdv-ink); }

/* ── Rijen ───────────────────────────────────────────────── */
/* Verborgen rijen: zowel server-side (?verschillen=1) als via de
   schakelaar met JavaScript. Expliciet, zodat geen enkele
   tabelregel het [hidden]-gedrag van de browser overschrijft. */
.vgl-table tr[hidden] { display: none; }
.vgl-row--differs > th { color: var(--fdv-ink); }
.vgl-none { color: var(--fdv-muted-soft); }

/* ── Het vinkje op een productkaart ──────────────────────── */
.vgl-check { display: flex; align-items: center; margin: 0; }
/* De knop draagt .fdv-check en ziet er dus uit als elk ander vinkje;
   alleen het knop-eigen uiterlijk moet nog weg. */
.vgl-check__btn {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; text-align: left; color: var(--fdv-ink-soft);
}
.vgl-check__btn[aria-pressed="true"] .fdv-check__box { background: var(--fdv-accent); border-color: var(--fdv-accent); }
.vgl-check__btn[aria-pressed="true"] .fdv-check__box::after { transform: rotate(-45deg) scale(1); }
.vgl-check__btn:focus-visible .fdv-check__box { outline: 2px solid var(--fdv-accent); outline-offset: 2px; }
.vgl-check__btn:hover { color: var(--fdv-ink); }
.vgl-check__btn[disabled] { opacity: 0.6; }

/* ── De vergelijkbalk ────────────────────────────────────── */
.vgl-bar {
  position: sticky; bottom: 0; z-index: 60;
  background: var(--fdv-surface); border-top: 1px solid var(--fdv-line);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
}
.vgl-bar[hidden] { display: none; }
.vgl-bar__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vgl-bar__count { margin: 0; color: var(--fdv-ink-soft); }
.vgl-bar__count strong { font-family: var(--fdv-font-display); font-size: 18px; }
.vgl-bar__msg { margin: 0; color: var(--fdv-accent); flex: 1 1 12rem; }
.vgl-bar__msg:empty { display: none; }

.vgl-bar__thumbs { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.vgl-bar__thumb { position: relative; width: 48px; }
.vgl-bar__thumb .fdv-media { border-radius: var(--fdv-r-md); overflow: hidden; }
/* Zonder productfoto zet .fdv-media de productnaam als plaatshouder neer.
   In een miniatuur van 48px levert dat alleen afgekapte letters op; de
   naam staat er al toegankelijk naast (.fdv-visually-hidden). */
.vgl-bar__thumb .fdv-media__note { display: none; }
.vgl-bar__drop { position: absolute; top: -8px; right: -8px; margin: 0; }
.vgl-bar__dropbtn {
  width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: var(--fdv-r-pill);
  background: var(--fdv-surface); border: 1px solid var(--fdv-line-control); color: var(--fdv-ink-soft);
}
.vgl-bar__dropbtn:hover { border-color: var(--fdv-accent); color: var(--fdv-accent); }

.vgl-bar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vgl-bar__actions form { margin: 0; }

@media (max-width: 640px) {
  .vgl-bar__inner { gap: 10px; }
  .vgl-bar__actions { margin-left: 0; width: 100%; }
  .vgl-bar__actions .fdv-btn { flex: 1 1 auto; }
  .vgl-col { min-width: 170px; }
}