/* ==========================================================================
   Libri buyback — customer web-flow design system (mobile-first)
   Foundation: tokens, fonts, layout, shared components, desktop gate.
   Screen-specific layout lives in the per-screen templates/steps.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Brand + semantic colors (from the design) */
  --color-primary: #3c7dc0;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #eaf3fb;
  --color-primary-border: #cfe3f7;

  --color-money: #00875c;
  --color-money-strong: #00a770;
  --color-money-bg: #e8fdf1;
  --color-money-ink: #1a4a2e;
  /* Page background of the confirmation screen. */
  --color-money-page: #b6e8c8;

  --color-ink: #191919;
  --color-muted: #686868;
  --color-page: #faf9f5;
  --color-surface: #ffffff;
  --color-grey-300: #efefef;

  --color-border: #d4d4d4;
  --color-border-soft: var(--color-grey-300);
  --color-border-faint: #edeef2;

  --color-error: #e94f44;
  --color-error-bg: #fdecea;

  --color-success: #1c7a4b;
  --color-success-bg: #e4f4ea;

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Arial Black", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radii */
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* Spacing rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-bubble: 0 4px 12px rgba(25, 25, 25, 0.08);

  --app-max-width: 440px;
}

/* --- Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* --- App shell (phone frame) --------------------------------------------- */

.app {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-5);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Screens that sit on white instead of the beige page background. */
.app--white {
  background: var(--color-surface);
}

/* The confirmation screen (A04) is a green success page. */
.app--success {
  background: var(--color-money-page);
}

/* A vertical stack helper for consistent spacing inside a screen. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Top bar (screen title + cart count) --------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.topbar__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.topbar__back {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Back button on the green screens — a translucent tint, like .how-to-note. */
.topbar__back--money {
  background: rgba(255, 255, 255, 0.55);
  color: var(--color-money-strong);
}

.cart-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}

/* --- Cards --------------------------------------------------------------- */

/* Flat rounded blocks: no border and no drop shadow — the page background
   between them does the separating. */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

/* --- Type helpers -------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.book-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
}

.book-creator {
  font-size: 14px;
  color: var(--color-muted);
}

.price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-money);
}

.total {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
}

.hint {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.45;
}

.error {
  font-size: 14px;
  color: var(--color-error);
}

/* --- Inline notices (Django messages) ------------------------------------ */

.message {
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.message.error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.message.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* --- Book cover + price pill ---------------------------------------------
   Shared by the scan result sheet and the cart rows.
   ------------------------------------------------------------------------- */

/* Fixed size so the box reserves its space before the remote cover loads. */
.book-cover {
  flex: none;
  width: 44px;
  height: 62px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: flex-end;
}

.book-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback tile for products without a cover image. */
.book-cover span {
  padding: 5px;
  font-size: 8px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-pill {
  flex: none;
  white-space: nowrap;
  background: var(--color-money-bg);
  color: var(--color-money);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}

.price-pill--muted {
  background: var(--color-border-soft);
  color: var(--color-muted);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

.btn-primary:hover {
  background: #346fac;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-muted);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-muted);
  color: var(--color-ink);
}

.btn-outline {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary-soft);
}

/* Green CTA — used on the confirmation screen. */
.btn-money {
  background: var(--color-money-strong);
  color: var(--color-primary-ink);
}

.btn-money:hover {
  background: var(--color-money);
}

/* Text-only CTA: button rhythm, no border and no fill. */
.btn-link {
  background: transparent;
  color: var(--color-primary);
}

.btn-link:hover {
  background: var(--color-primary-soft);
}

/* --- Inputs -------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"] {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
  line-height: 1.3;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder {
  color: #aaaaaa;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* --- Focus visibility (quality floor) ------------------------------------ */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:focus-visible {
  outline-offset: 3px;
}

/* --- Desktop gate --------------------------------------------------------
   Flow screens are mobile-only. On wide viewports we hide the flow and show
   a notice instead. The welcome page does not render .flow-only / the notice,
   so it stays fully visible on desktop.
   ------------------------------------------------------------------------- */

.desktop-notice {
  display: none;
}

@media (min-width: 768px) {
  /* Anything mobile-only — the whole flow, its features and buttons —
     is hidden on desktop; only the welcoming notice remains. */
  .flow-only {
    display: none;
  }

  .desktop-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    max-width: 420px;
    margin: auto; /* centers within the full-height .app shell */
    padding: var(--space-6);
    text-align: center;
  }

  .desktop-notice__icon {
    color: var(--color-primary);
  }

  .desktop-notice__eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .desktop-notice__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .desktop-notice__text {
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.5;
  }
}

/* --- Welcome / landing (A01) ---------------------------------------------
   The only screen shown on desktop; fully responsive, not behind the gate.
   ------------------------------------------------------------------------- */

.welcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.welcome-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.welcome-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
}

.welcome-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.welcome-lead {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.5;
}

.welcome-lead__accent {
  font-weight: 700;
  color: var(--color-primary);
}

/* Numbered process — the one bold element. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.steps__num {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps__text {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-ink);
}

.quality-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 11px;
  line-height: 1.45;
}

.quality-note__icon {
  flex: none;
  color: var(--color-primary);
}

.cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-muted);
  font-size: 13px;
}

/* --- Scan screen (A02c · ISBN eingeben / A02 · Scannen) -------------------
   A dark, immersive screen that fills the phone-width app edge-to-edge, with
   the offer shown as a white bottom sheet.
   ------------------------------------------------------------------------- */

.app--flush {
  padding: 0;
  gap: 0;
}

.scan-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-ink);
  color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
}

/* Top bar: back button · title · cart pill */
.scan-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 18px 6px;
}

.scan-topbar__title {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

.scan-back {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-cart {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
}

/* Messages sit between the top bar and the tabs, inside the dark screen. */
.scan-screen .message {
  margin: 10px 18px 0;
}

/* Segmented tabs (dark). Tabs are links; the server renders the active pane. */
.tabs {
  display: flex;
  margin: 14px 18px 2px;
  padding: var(--space-1);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

.tabs__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 0;
  border-radius: var(--radius-pill);
  color: var(--color-primary-border);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.tabs__tab.is-active {
  background: #fff;
  color: var(--color-ink);
}

/* ISBN entry pane */
.scan-pane {
  flex: 1;
  padding: 28px 22px;
}

.scan-label {
  font-size: 13px;
  color: var(--color-primary-border);
  margin-bottom: 8px;
}

.scan-panel {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px;
}

.scan-panel input[type="text"] {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.scan-panel input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.scan-panel input[type="text"]:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.scan-panel .btn {
  margin-top: 14px;
}

.scan-hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-primary-border);
  font-size: 12px;
  line-height: 1.4;
}

.scan-hint svg {
  flex: none;
  margin-top: 1px;
}

/* Scannen tab — live camera scanner. */
.scan-camera {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
  gap: var(--space-3);
}

.scan-camera__viewport {
  position: relative;
  flex: 1;
  min-height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}

.scan-camera__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centered reticle the customer aims at the barcode. */
.scan-camera__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 34%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}

.scan-camera__overlay {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Inline note shown on the manual tab after a camera fallback. */
.scan-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}

.scan-notice svg {
  flex: none;
  margin-top: 1px;
}

/* Offer bottom sheet (A02c · "Sie erhalten") */
.offer-sheet {
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: 26px 26px 0 0;
  padding: 16px 22px calc(24px + env(safe-area-inset-bottom, 0px));
}

.offer-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  margin: 0 auto 14px;
}

.offer-sheet .eyebrow {
  font-size: 11px;
}

.eyebrow--error {
  color: var(--color-error);
}

.offer-sheet__text {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.45;
}

.offer-sheet__text svg {
  flex: none;
  margin-top: 1px;
}

.offer-sheet__text--error {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-error-bg);
  color: var(--color-error);
}

.offer-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0 4px;
}

.offer-row__meta {
  flex: 1;
  min-width: 0;
}

.offer-row__title {
  font-size: 14px;
  font-weight: 700;
}

.offer-row__creator {
  font-size: 12px;
  color: var(--color-muted);
}

.offer-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

/* --- Cart screen (A03 · Übersicht & E-Mail) -------------------------------
   The sell box: one card holding the book rows, then the offer value and the
   e-mail form pinned to the bottom of the screen.
   ------------------------------------------------------------------------- */

/* Fills the app shell so the e-mail form can be pushed to the bottom. */
.cart-screen {
  flex: 1;
}

.book-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.book-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* No side padding — the rows use the full width of the app shell. */
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.book-row:last-child {
  border-bottom: 0;
}

.book-row__meta {
  flex: 1;
  min-width: 0;
}

.book-row__title {
  font-size: 14px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-row__sub {
  font-size: 12px;
  color: var(--color-muted);
}

/* An outlined circle with a cross inside — no fill. */
.book-row__remove {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.book-row__remove:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.value-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: var(--color-grey-300);
}

.value-card__label {
  font-size: 14px;
  color: var(--color-muted);
}

/* Offer value + e-mail form as one bar stuck to the bottom of the screen, so a
   long book list cannot push the field out of view. The auto margin keeps it at
   the bottom on short lists, where there is nothing to scroll and the sticky
   offset never kicks in. The negative side margins let the opaque background
   span the full width of the app shell, covering the rows scrolling behind it. */
.cart-checkout {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  margin-inline: calc(var(--space-5) * -1);
  /* Cancels the shell's bottom padding, which the bar re-adds as its own so it
     ends flush with the screen instead of lifting off it at the end of the scroll. */
  margin-bottom: calc((var(--space-6) + env(safe-area-inset-bottom, 0px)) * -1);
  padding: var(--space-3) var(--space-5)
    calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.offer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--color-muted);
  text-align: center;
}

.cart-empty__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
}

.cart-empty .btn {
  margin-top: var(--space-2);
}

/* --- Offer confirmation (A04 · Angebot erstellt) --------------------------
   A centered screen: success check, the offer number the bookstore asks for,
   the voucher value, and the how-to CTA pinned to the bottom.
   ------------------------------------------------------------------------- */

.confirm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

/* White blocks on the green page — the pale money tints would disappear. */
.confirm__check {
  width: 64px;
  height: 64px;
  margin-top: var(--space-4);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-money-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm__title {
  font-size: 26px;
}

.offer-number {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-bubble);
}

/* The number is read out at the counter — biggest thing on screen. */
.offer-number__value {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.16em;
  /* Balance the trailing letter-spacing so the number looks centered. */
  text-indent: 0.16em;
}

.offer-number__caption {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-muted);
}

.voucher {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-bubble);
}

.voucher__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-money);
}

.voucher__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-money);
}

.voucher__note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* Icon, sentence and address sit row by row. */
.offer-email {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-bubble);
}

.offer-email__icon {
  flex: none;
  color: var(--color-money);
}

.offer-email__text {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-money);
}

.offer-email__address {
  margin-top: 1px;
  font-size: 12px;
  color: var(--color-muted);
}

.confirm .btn {
  margin-top: auto;
}

/* --- Hand-in how-to (A05 · So funktioniert die Abgabe) --------------------
   Numbered steps reusing the welcome page's .steps__num circles.
   ------------------------------------------------------------------------- */

.how-to {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.how-to__title {
  flex: 1;
  font-size: 22px;
}

/* Numbered badge: white on the green page, green digit. */
.how-to-step__num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-money-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 80, 50, 0.12);
}

.how-to-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Steps sit directly on the green page — the white badge carries the contrast. */
.how-to-step {
  display: flex;
  gap: var(--space-3);
}

.how-to-step__body {
  flex: 1;
  min-width: 0;
}

.how-to-step__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

/* Green ink instead of grey — grey body text on the green page is too faint. */
.how-to-step__text {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0, 75, 50, 0.65);
}

.callout {
  margin-top: var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: var(--shadow-bubble);
}

/* Tick and label share one line; the text below starts at the left edge. */
.callout__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--color-ink);
}

.callout__icon {
  flex: none;
  color: var(--color-money-strong);
}

/* A translucent tint on the green page rather than a solid bubble. */
.how-to-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.55);
  color: var(--color-money-ink);
  font-size: 12px;
  line-height: 1.45;
}

.how-to-note svg {
  color: var(--color-money-strong);
}

.how-to-note svg {
  flex: none;
  margin-top: 1px;
}

/* The note sits directly above the CTA, both pinned to the bottom. */
.how-to__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Reduced motion (quality floor) -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}