/* De scanuitnodiging: een kaart rechtsonder, niet een scherm dat de
   pagina afdekt. Iemand die zit te lezen wil je uitnodigen, niet de weg
   versperren -- vandaar geen overlay en geen focusval. */

@layer components {
  .scanpop {
    position: fixed;
    z-index: 60;
    inset-block-end: var(--space-m);
    inset-inline-end: var(--space-m);
    width: min(24rem, calc(100vw - var(--space-m) * 2));
  }

  .scanpop[hidden] {
    display: none;
  }

  .scanpop__kaart {
    position: relative;
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-float);
    opacity: 0;
    transform: translateY(var(--space-s));
    transition: opacity var(--motion-entrance), transform var(--motion-entrance);
  }

  .scanpop.is-open .scanpop__kaart {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .scanpop__kaart {
      transition: none;
      transform: none;
    }
  }

  .scanpop__sluiten {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
  }

  .scanpop__sluiten:hover {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .scanpop__sluiten svg {
    width: 1rem;
    height: 1rem;
  }

  .scanpop__label {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .scanpop h2 {
    margin: var(--space-3xs) 0 var(--space-2xs);
    font-size: var(--step-1);
    line-height: 1.2;
    padding-inline-end: var(--space-m);
  }

  .scanpop__vraag {
    margin: 0 0 var(--space-s);
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  .scanpop__opties {
    display: grid;
    gap: var(--space-2xs);
  }

  /* De antwoorden zijn links naar de scan: één klik en je zit er al in,
     met dit antwoord ingevuld. */
  .scanpop__optie {
    padding: var(--space-xs) var(--space-s);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    color: var(--color-ink);
    font-size: var(--step--1);
    line-height: 1.4;
    text-decoration: none;
    transition: border-color var(--motion), background var(--motion);
  }

  .scanpop__optie:hover {
    border-color: var(--color-accent);
    background: var(--color-surface);
  }

  .scanpop__voet {
    margin: var(--space-s) 0 0;
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  /* Op een telefoon over de volle breedte onderaan, boven de knop voor
     de cookie-instellingen langs. */
  @media (max-width: 40rem) {
    .scanpop {
      inset-inline: var(--space-s);
      inset-block-end: var(--space-s);
      width: auto;
    }
  }
}