/* ═══════════════════════════════════════════════════════
   GENERATOR PAGE – MODERN REDESIGN
   Colorful, icon-rich, card-based UI
═══════════════════════════════════════════════════════ */

/* ── Hero Banner ─────────────────────────────────────── */
.gen-hero-banner {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #a855f7 70%, #ec4899 100%);
  padding: 28px 20px 26px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.gen-hero-banner::before {
  content: '✨ ⭐ 🌟 ✨ 💫 ⭐ 🌟 ✨ 💫';
  position: absolute; top: 10px; left: 0; right: 0;
  font-size: 1.4rem; letter-spacing: 18px;
  opacity: .15; pointer-events: none;
  white-space: nowrap; overflow: hidden;
}
.gen-hero-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: #fff; margin-bottom: 6px; position: relative;
}
.gen-hero-sub {
  color: rgba(255,255,255,.78);
  font-size: .9rem; line-height: 1.6;
  max-width: 480px; margin: 0 auto 14px;
  position: relative;
}
.gen-hero-pills {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; position: relative;
}
.gen-hero-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .78rem; font-weight: 700; color: #fff;
}

/* ── Step Indicator – colorful ───────────────────────── */
#generator .step-indicator-wrap {
  margin-bottom: 28px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid var(--border);
}
#generator .step-circle {
  width: 44px; height: 44px;
  font-size: 1.1rem; font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
#generator .step-circle.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
}
#generator .step-circle.done {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  box-shadow: 0 4px 14px rgba(16,185,129,.3);
}
#generator .step-label { font-size: .75rem; }
#generator .step-label.active { color: #7c3aed; font-weight: 800; }
#generator .step-label.done   { color: #10b981; }
#generator .step-item:not(:last-child)::after { background: #e5e7eb; }
#generator .step-item.done::after { background: linear-gradient(to right, #10b981, #7c3aed); }

/* ── Step eyebrow badge ───────────────────────────────── */
.gen-step-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 11px;
  margin-bottom: 8px;
}
.gen-step-eyebrow-purple { background: #f3e8ff; color: #7c3aed; }
.gen-step-eyebrow-blue   { background: #dbeafe; color: #2563eb; }
.gen-step-eyebrow-orange { background: #fef3c7; color: #d97706; }

/* ── Step title ───────────────────────────────────────── */
#generator .step-title {
  font-size: 1.45rem;
  margin-bottom: 6px;
}
#generator .step-subtitle {
  font-size: .9rem; margin-bottom: 18px;
}

/* ── Inputs / selects / textarea ─────────────────────── */
#generator input[type="text"],
#generator textarea,
#generator select {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  transition: border-color .2s, box-shadow .2s;
}
#generator input[type="text"]:focus,
#generator textarea:focus,
#generator select:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
  outline: none;
}

/* ── Gender buttons ───────────────────────────────────── */
#generator .gender-btn {
  border-radius: 12px; font-size: 1rem; padding: 10px 14px;
  transition: all .2s;
}
#generator .gender-btn:hover { transform: translateY(-2px); }
#generator .gender-btn[data-g="male"]:hover    { border-color: #3b82f6; color: #2563eb; background: #eff6ff; }
#generator .gender-btn[data-g="female"]:hover  { border-color: #ec4899; color: #be185d; background: #fdf2f8; }
#generator .gender-btn[data-g="neutral"]:hover { border-color: #8b5cf6; color: #6d28d9; background: #f5f3ff; }
#generator .gender-btn[data-g="male"].selected    { border-color: #3b82f6; background: linear-gradient(135deg,#eff6ff,#dbeafe); color: #2563eb; font-weight: 800; }
#generator .gender-btn[data-g="female"].selected  { border-color: #ec4899; background: linear-gradient(135deg,#fdf2f8,#fce7f3); color: #be185d; font-weight: 800; }
#generator .gender-btn[data-g="neutral"].selected { border-color: #8b5cf6; background: linear-gradient(135deg,#f5f3ff,#f3e8ff); color: #6d28d9; font-weight: 800; }

/* ── Tags (interests) ─────────────────────────────────── */
#generator .tag {
  border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  transition: all .2s;
  cursor: pointer;
}
#generator .tag:hover {
  transform: translateY(-2px);
  border-color: #7c3aed; color: #7c3aed; background: #f3e8ff;
}
#generator .tag.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,.3);
  transform: translateY(-1px);
}

/* ── Theme chips ──────────────────────────────────────── */
#generator .theme-chip {
  border-radius: 999px; font-weight: 700;
  transition: all .2s; font-size: .88rem;
}
#generator .theme-chip:hover { transform: translateY(-2px); }
#generator .theme-chip.active {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,.3);
}

/* ── Content cards (story type) ───────────────────────── */
#generator .content-card {
  border-radius: 16px;
  transition: all .25s;
}
#generator .content-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
#generator .content-card-icon  { font-size: 2.1rem; margin-bottom: 6px; }
#generator .content-card-name  { font-size: .92rem; }
#generator .content-card[data-type="Kinderbuch"].selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
}
#generator .content-card[data-type="Bildungsstory"].selected {
  border-color: #059669;
  background: linear-gradient(135deg, #d1fae5, #e0f2fe);
}
#generator .content-card[data-type="Quiz-Buch"].selected {
  border-color: #d97706;
  background: linear-gradient(135deg, #fef3c7, #fff7ed);
}
#generator .content-card[data-type="Emotionale Geschichte"].selected {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fce7f3, #fef3c7);
}

/* ── Style cards ──────────────────────────────────────── */
#generator .style-card {
  border-radius: 14px;
  transition: all .25s;
}
#generator .style-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
#generator .style-card-icon  { font-size: 1.8rem; margin-bottom: 6px; }
#generator .style-card[data-style="Disney"].selected     { border-color: #7c3aed; background: linear-gradient(135deg, #f3e8ff, #fce7f3); }
#generator .style-card[data-style="Cartoon"].selected    { border-color: #f59e0b; background: linear-gradient(135deg, #fef3c7, #fff7ed); }
#generator .style-card[data-style="Aquarell"].selected   { border-color: #3b82f6; background: linear-gradient(135deg, #dbeafe, #e0f2fe); }
#generator .style-card[data-style="Realistisch"].selected{ border-color: #059669; background: linear-gradient(135deg, #d1fae5, #ecfdf5); }
#generator .style-card[data-style="Pastell"].selected    { border-color: #ec4899; background: linear-gradient(135deg, #fce7f3, #fdf2f8); }
#generator .style-card[data-style="Märchen"].selected    { border-color: #d97706; background: linear-gradient(135deg, #fef3c7, #fffbeb); }
#generator .style-card[data-style="Abstrakt"].selected   { border-color: #6366f1; background: linear-gradient(135deg, #eef2ff, #f3e8ff); }
#generator .style-card[data-style="Manga"].selected      { border-color: #ef4444; background: linear-gradient(135deg, #fef2f2, #fce7f3); }

/* ── Image model cards ───────────────────────────────── */
#generator .image-model-card {
  border-radius: 14px; transition: all .2s;
}
#generator .image-model-card:hover { transform: translateY(-2px); }
#generator .image-model-card.selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
}
#generator .image-model-icon { font-size: 1.8rem; margin-bottom: 4px; }

/* ── Length buttons ───────────────────────────────────── */
#generator .length-btn {
  border-radius: 12px; transition: all .2s; flex: 1;
}
#generator .length-btn:hover { transform: translateY(-2px); }
#generator .length-btn.selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
  color: #7c3aed;
}

/* ── Text amount buttons ─────────────────────────────── */
#generator .text-amount-btn.selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
  color: #7c3aed;
}

/* ── Lang buttons ─────────────────────────────────────── */
#generator .lang-btn {
  border-radius: 12px; font-size: .95rem;
  padding: 10px 18px; font-weight: 700; transition: all .2s;
}
#generator .lang-btn:hover { transform: translateY(-2px); }
#generator .lang-btn.selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
  color: #7c3aed;
}

/* ── Summary card ─────────────────────────────────────── */
#generator .generator-summary-card {
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
  border: 1px solid #e9d5ff;
  border-radius: 16px; padding: 18px 20px;
}
#generator .summary-label { color: #7c3aed; }

/* ── Advanced details ─────────────────────────────────── */
#generator .generator-advanced {
  border-radius: 14px;
}

/* ── Step nav buttons ─────────────────────────────────── */
#generator .step-nav .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: none;
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
  transition: all .2s;
}
#generator .step-nav .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(124,58,237,.4);
}

/* ── Generate button ──────────────────────────────────── */
#generator .btn-generate {
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  font-size: 1.1rem; padding: 16px 28px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(124,58,237,.4);
  transition: all .25s; border: none;
}
#generator .btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(124,58,237,.5);
}
.mobile-generate-cta .btn-generate {
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
}

/* ── Loading overlay ─────────────────────────────────── */
#generator .gen-loading-box {
  border-radius: 24px;
  border: 1px solid #e9d5ff;
}
#generator .gen-loading-box .spinner {
  border-color: #f3e8ff;
  border-top-color: #7c3aed;
}

/* ── Section divider labels ───────────────────────────── */
.gen-section-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 12px;
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.gen-section-divider::before,
.gen-section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
}

/* ── Form label icons ─────────────────────────────────── */
.gen-label-icon {
  margin-right: 4px; font-size: 1rem;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 480px) {
  .gen-hero-banner { padding: 20px 16px 18px; }
  .gen-hero-pills  { gap: 6px; }
  .gen-hero-pill   { font-size: .72rem; padding: 4px 10px; }
  #generator .step-circle { width: 36px; height: 36px; font-size: .9rem; }
  #generator .step-indicator-wrap { padding: 12px 8px; }
  #generator .btn-generate { font-size: 1rem; padding: 14px 22px; }
}