@layer reset, tokens, base, components, responsive, utilities;

@layer components {
  .qr-fab,
  .qr-dialog {
    display: none;
  }
}

@layer responsive {
  @media (min-width: 640px) {
    .qr-fab {
      --qr-fab-offset: max(var(--space-5), calc(var(--safe-bottom) + var(--space-4)), var(--safe-right));
      position: fixed;
      right: var(--qr-fab-offset);
      bottom: var(--qr-fab-offset);
      z-index: var(--z-fab);
      display: inline-grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: var(--radius-pill);
      background-color: var(--color-primary);
      color: var(--color-text-primary);
      box-shadow:
        0 0 0 1px rgb(var(--rgb-white) / 0.14),
        0 10px 24px -8px rgb(0 0 0 / 0.75),
        0 2px 8px rgb(0 0 0 / 0.4);
      -webkit-tap-highlight-color: transparent;
      transition:
        background-color var(--motion-micro) linear,
        transform var(--motion-micro) var(--ease-enter);
    }

    .qr-fab svg {
      width: 24px;
      height: 24px;
    }

    .qr-fab:active {
      background-color: var(--color-primary-pressed);
      transform: scale(0.96);
      transition-duration: var(--motion-instant);
    }

    .qr-dialog {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      display: grid;
      place-items: center;
      padding:
        max(var(--space-5), var(--safe-top))
        max(var(--space-5), var(--safe-right))
        max(var(--space-5), var(--safe-bottom))
        max(var(--space-5), var(--safe-left));
      background-color: var(--color-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-micro) linear;
    }

    .qr-dialog.is-open {
      opacity: 1;
      pointer-events: auto;
      transition: opacity var(--motion-standard) linear;
    }

    .qr-dialog__panel {
      position: relative;
      width: min(100%, 22.5rem);
      max-height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-6);
      border-radius: var(--radius-lg);
      background-color: var(--color-surface-elevated);
      box-shadow: 0 0 0 1px var(--color-border), var(--shadow-overlay);
      text-align: center;
      opacity: 0;
      transform: translateY(var(--motion-reveal-distance));
      transition:
        opacity var(--motion-micro) linear,
        transform var(--motion-micro) var(--ease-exit);
    }

    .qr-dialog.is-open .qr-dialog__panel {
      opacity: 1;
      transform: none;
      transition:
        opacity var(--motion-standard) linear,
        transform var(--motion-standard) var(--ease-enter);
    }

    .qr-dialog__panel:focus {
      outline: none;
    }

    .qr-dialog__close {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
    }

    .qr-dialog__title {
      font-size: var(--fs-rail-title);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-tight);
      letter-spacing: -0.01em;
    }

    .qr-dialog__text {
      margin-top: var(--space-2);
      color: var(--color-text-secondary);
      font-size: var(--fs-nav);
      line-height: var(--lh-body);
    }

    .qr-dialog__plate {
      width: fit-content;
      margin: var(--space-5) auto 0;
      padding: var(--space-3);
      border-radius: var(--radius-md);
      background-color: #fff;
    }

    .qr-dialog__img {
      display: block;
      width: min(240px, 42vh);
      width: min(240px, 42svh);
      height: auto;
      aspect-ratio: 1 / 1;
    }
  }

  @media (min-width: 640px) and (hover: hover) and (pointer: fine) {
    .qr-fab:hover {
      background-color: var(--color-primary-hover);
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .qr-fab:active,
    .qr-dialog__panel,
    .qr-dialog.is-open .qr-dialog__panel {
      transform: none;
    }
  }
}