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

:root {
  /* Brand: Pastel green (Lintorf-Grün) + Pastel orange (Lintorf-Orange) */
  --green-dark:  #3a7d44;   /* forest green from logo */
  --green-mid:   #6db87a;   /* pastel mid green */
  --green-light: #e6f4e8;   /* very light pastel green background tint */
  --orange:      #f5a623;   /* warm orange from logo */
  --orange-soft: #fef0d4;   /* pastel orange tint */
  --accent:      #3a7d44;   /* primary interactive color = brand green */
  --accent-alt:  #f5a623;   /* secondary accent = brand orange */
  --success:     #3a7d44;
  --warning:     #f5a623;
  --danger:      #d94f3d;
  --text-dark:   #1d1d1f;
  --text-mid:    #3a3a3c;
  --text-light:  #6e6e73;
  --bg-light:    #f7faf7;   /* faint green tint on app background */
  --bg-card:     #ffffff;
  --border:      #cde3d0;   /* green-tinted border */
  --radius-s:    8px;
  --radius-m:    14px;
  --radius-l:    20px;
  --shadow-s:    0 2px 8px rgba(58,125,68,.10);
  --shadow-m:    0 6px 24px rgba(58,125,68,.14);
  --shadow-l:    0 16px 48px rgba(58,125,68,.20);
  --transition:  .2s cubic-bezier(.4,0,.2,1);
  /* Legacy aliases kept so existing rules that reference --blue-* still compile */
  --blue-dark:   var(--green-dark);
  --blue-mid:    var(--green-mid);
  --blue-light:  var(--green-light);
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* ── App Layout ─────────────────────────────────────────────────────────── */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--green-dark);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.header-banner {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
  object-position: center;
}

.header-text {
  padding: 16px 24px 24px;
}

.app-header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #fff;
}
.subtitle { font-size: 14px; opacity: .85; margin-top: 4px; color: #fff; }

.intro-text {
  font-size: 15px;
  line-height: 1.55;
  color: #fff;
  opacity: .92;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}

/* ── Main / Steps ───────────────────────────────────────────────────────── */
.app-main { flex: 1; padding: 0 16px 32px; display: flex; flex-direction: column; gap: 16px; margin-top: -16px; }

.step {
  background: var(--bg-card);
  border-radius: var(--radius-l);
  padding: 20px 18px;
  box-shadow: var(--shadow-s);
  transition: opacity var(--transition), transform var(--transition);
}

.step.hidden { display: none; }

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.step-badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-header h2 { font-size: 17px; font-weight: 600; color: var(--text-dark); }

/* ── Number Input ───────────────────────────────────────────────────────── */
.input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.input-row .number-input {
  min-width: 0;
  flex: 1 1 0;
}

.number-input {
  flex: 1;
  height: 52px;
  padding: 0 16px;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  outline: none;
  color: var(--text-dark);
  background: var(--bg-light);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.number-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(58,125,68,.15);
  background: #fff;
}
.number-input.valid  { border-color: var(--success); }
.number-input.invalid { border-color: var(--danger); }

.btn-scan {
  width: 52px; height: 52px;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-light);
  color: var(--text-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-scan:hover { background: var(--green-light); border-color: var(--accent); color: var(--accent); }
.btn-scan:active { transform: scale(.95); }

/* ── Number Status ──────────────────────────────────────────────────────── */
.number-status {
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
  transition: color var(--transition);
}
.number-status.success { color: var(--success); }
.number-status.info    { color: var(--text-light); }
.number-status.error   { color: var(--danger); }

/* ── Camera ─────────────────────────────────────────────────────────────── */
.camera-container {
  margin-top: 14px;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 2px solid var(--border);
}
.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--blue-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.camera-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-close-camera {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 50%;
  transition: background var(--transition);
}
.btn-close-camera:hover { background: rgba(255,255,255,.2); }
.btn-torch {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.btn-torch:hover { background: rgba(255,255,255,.2); }
.btn-torch.active { background: rgba(255,200,0,.3); color: #ffd700; }
.btn-torch.hidden { display: none; }
.camera-view { width: 100%; min-height: 240px; background: #000; }
.camera-hint { font-size: 12px; color: var(--text-light); text-align: center; padding: 8px; }

/* ── Design Grid ────────────────────────────────────────────────────────── */
.design-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.design-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-light);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  font-family: inherit;
}
.design-card:hover { border-color: var(--accent); box-shadow: var(--shadow-s); transform: translateY(-2px); }
.design-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,125,68,.25); }
.design-card:active { transform: scale(.97); }

.design-preview {
  width: 100%;
  aspect-ratio: 1.586 / 1;   /* standard card ratio */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 6px 4px;
  overflow: hidden;
}

/* Design colour themes */
.design-ratingencard { background: #fff; padding: 0; overflow: hidden; }
.design-lintorf      { background: #fff; padding: 0; overflow: hidden; }
.design-klassisch    { background: linear-gradient(135deg, #3a7d44 0%, #6db87a 100%); }
.design-frisch       { background: linear-gradient(135deg, #f5a623 0%, #f7c46a 100%); }
.design-modern       { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }

.design-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-logo-mini {
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .3px;
}
.preview-barcode-mini {
  width: 80%;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.9) 0px, rgba(255,255,255,.9) 2px,
    transparent 2px, transparent 4px
  );
  border-radius: 2px;
}

.design-label { font-size: 12px; font-weight: 600; color: var(--text-mid); }

/* ── Card Preview ───────────────────────────────────────────────────────── */
.card-preview-wrapper {
  perspective: 800px;
  margin-bottom: 20px;
}

.card-preview {
  border-radius: var(--radius-m);
  padding: 20px 18px 16px;
  box-shadow: var(--shadow-m);
  transition: background var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

/* Match server DESIGNS colours */
.card-preview.design-ratingencard { background: #fff; }
.card-preview.design-ratingencard .card-logo  { color: #c0392b; }
.card-preview.design-ratingencard .card-number { color: #3a3a3c; }
.card-preview.design-lintorf { background: #fff; }
.card-preview.design-lintorf .card-logo   { display: none; }
.card-preview.design-lintorf .card-number { color: #3a3a3c; }
.card-preview.design-klassisch { background: linear-gradient(135deg, #3a7d44 0%, #6db87a 100%); }
.card-preview.design-frisch    { background: linear-gradient(135deg, #f5a623 0%, #f7c46a 100%); }
.card-preview.design-frisch .card-logo  { color: #fff; }
.card-preview.design-frisch .card-number { color: #fff; }
.card-preview.design-modern    { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }

/* Default before a design is chosen */
.card-preview:not(.design-ratingencard):not(.design-lintorf):not(.design-klassisch):not(.design-frisch):not(.design-modern) {
  background: linear-gradient(135deg, #3a7d44 0%, #6db87a 100%);
}

/* Background image layer – only visible for ratingencard design */
.card-bg-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-m);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.card-preview.design-ratingencard .card-bg-img,
.card-preview.design-lintorf .card-bg-img {
  display: block;
  opacity: 1;
}

.card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.card-logo {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  align-self: flex-start;
  letter-spacing: .5px;
}

.card-barcode {
  max-width: 100%;
  border-radius: 4px;
}

.card-number {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Wallet Buttons ─────────────────────────────────────────────────────── */
.wallet-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-wallet {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-m);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-s);
}
.btn-wallet:disabled { opacity: .45; cursor: not-allowed; }
.btn-wallet:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn-wallet:not(:disabled):active { transform: scale(.98); }

.btn-apple   { background: #1d1d1f; color: #fff; }
.btn-android { background: var(--green-dark); color: #fff; }

.btn-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ── Download Status ────────────────────────────────────────────────────── */
.download-status {
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 12px;
  min-height: 18px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.app-footer {
  padding: 20px 24px 28px;
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-privacy {
  font-size: 11px;
  color: var(--text-light);
  margin: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.footer-links a {
  color: var(--green-dark);
  text-decoration: none;
  font-weight: 500;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-divider {
  color: var(--border);
  font-size: 14px;
  line-height: 1;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: 4px;
}

.footer-brand-logo {
  height: 28px;
  width: auto;
  display: block;
  opacity: .85;
  transition: opacity var(--transition);
}

.footer-brand:hover .footer-brand-logo {
  opacity: 1;
}

.footer-brand-copy {
  font-size: 11px;
  color: var(--text-light);
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive fine-tuning ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  .number-input { font-size: 18px; letter-spacing: 1px; }
  .design-grid  { gap: 8px; }
}