/* Base resets */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0f172a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #0f172a;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* iOS Safe Area - extend background behind status bar and home indicator */
@supports (padding: env(safe-area-inset-top)) {
  html {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: linear-gradient(to bottom right, #0f172a, #1e3a8a, #0f172a);
    min-height: 100vh;
  }
}

/* Stamps grid — auto-adapts columns based on count */
.stamps-grid {
  display: grid;
  justify-items: center;
  align-items: center;
  /* Match Apple pass strip aspect ratio (1125:432) */
  aspect-ratio: 1125 / 432;
  padding: 8px;
}

/* Stamp dot styles */
.stamp-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.stamp-dot.filled {
  background: rgba(255, 255, 255, 0.85);
}

.stamp-dot.filled.inactive {
  background: rgba(255, 255, 255, 0.25);
}

.stamp-dot.filled svg {
  color: var(--pass-bg, #0f172a);
}

.stamp-dot.empty {
  background: rgba(255, 255, 255, 0.25);
}

.stamp-icon {
  width: 60%;
  height: 60%;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}