/*
 * AutoMapper theme: stock Bootstrap, white and purple, no gradients.
 * Bootstrap's own variables are pointed at one purple, then the wizard layout
 * and type are added on top.
 */

/* ---------- fonts (self hosted, latin subset, variable) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("../vendor/fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("../vendor/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --am-purple: #6f42c1;       /* Bootstrap's own $purple, 6.1:1 on white */
  --am-purple-dark: #59359a;
  --am-purple-darker: #4c2d85;
  --am-tint: #f6f2fd;         /* very light purple surface */
  --am-tint-2: #ece3fa;
  --am-line: #e2d9f3;         /* light purple border */
  --am-ink: #231b3a;          /* near black with a purple cast, 15:1 on white */
  --am-muted: #5e5775;        /* 6.9:1 on white */

  --am-display: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --am-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--am-ink);
  --bs-body-color-rgb: 35, 27, 58;
  --bs-secondary-color: var(--am-muted);
  --bs-secondary-color-rgb: 94, 87, 117;
  --bs-primary: var(--am-purple);
  --bs-primary-rgb: 111, 66, 193;
  --bs-link-color: var(--am-purple);
  --bs-link-color-rgb: 111, 66, 193;
  --bs-link-hover-color: var(--am-purple-dark);
  --bs-link-hover-color-rgb: 89, 53, 154;
  --bs-border-color: var(--am-line);
  --bs-focus-ring-color: rgba(111, 66, 193, 0.35);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn, .badge, .nav-link, .display-5 {
  font-family: var(--am-display);
}
h1, h2, h3, .h1, .h2, .h3 { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Bootstrap, repainted purple ---------- */
.btn-primary {
  --bs-btn-bg: var(--am-purple);
  --bs-btn-border-color: var(--am-purple);
  --bs-btn-hover-bg: var(--am-purple-dark);
  --bs-btn-hover-border-color: var(--am-purple-dark);
  --bs-btn-active-bg: var(--am-purple-darker);
  --bs-btn-active-border-color: var(--am-purple-darker);
  --bs-btn-disabled-bg: var(--am-purple);
  --bs-btn-disabled-border-color: var(--am-purple);
  --bs-btn-focus-shadow-rgb: 111, 66, 193;
}
.btn-outline-primary {
  --bs-btn-color: var(--am-purple);
  --bs-btn-border-color: var(--am-purple);
  --bs-btn-hover-bg: var(--am-purple);
  --bs-btn-hover-border-color: var(--am-purple);
  --bs-btn-active-bg: var(--am-purple-dark);
  --bs-btn-active-border-color: var(--am-purple-dark);
  --bs-btn-disabled-color: var(--am-purple);
  --bs-btn-disabled-border-color: var(--am-purple);
  --bs-btn-focus-shadow-rgb: 111, 66, 193;
}
.btn-outline-secondary {
  --bs-btn-color: var(--am-muted);
  --bs-btn-border-color: var(--am-line);
  --bs-btn-hover-bg: var(--am-tint);
  --bs-btn-hover-color: var(--am-ink);
  --bs-btn-hover-border-color: var(--am-purple);
  --bs-btn-active-bg: var(--am-tint-2);
  --bs-btn-active-color: var(--am-ink);
  --bs-btn-active-border-color: var(--am-purple);
}
.text-bg-primary { background-color: var(--am-purple) !important; }
.text-primary { color: var(--am-purple) !important; }
.border-primary { border-color: var(--am-purple) !important; }
.alert-primary {
  --bs-alert-bg: var(--am-tint);
  --bs-alert-border-color: var(--am-line);
  --bs-alert-color: #3b2166;
}
.nav-underline {
  --bs-nav-underline-link-active-color: var(--am-purple);
  --bs-nav-underline-border-width: 3px;
  --bs-nav-link-color: var(--am-muted);
  --bs-nav-link-hover-color: var(--am-purple);
  --bs-nav-link-font-size: 1rem;
  --bs-nav-link-padding-y: 0.35rem;
  --bs-nav-link-font-weight: 500;
}
.pagination {
  --bs-pagination-active-bg: var(--am-purple);
  --bs-pagination-active-border-color: var(--am-purple);
  --bs-pagination-color: var(--am-purple);
  --bs-pagination-hover-color: var(--am-purple-dark);
  --bs-pagination-focus-color: var(--am-purple-dark);
}

.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--am-purple);
  border-color: var(--am-purple);
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
  border-color: #a98eda;
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}
.form-control, .form-select { min-height: 2.75rem; border-radius: 0.75rem; }
.form-label { font-weight: 600; margin-bottom: 0.35rem; }
.form-text { color: var(--am-muted); }
.form-switch .form-check-input { width: 2.5em; height: 1.4em; }
.form-switch .form-check-label { margin-left: 0.2rem; }

/* big, thumb friendly sliders */
.form-range { height: 1.75rem; }
.form-range::-webkit-slider-runnable-track { height: 0.5rem; border-radius: 0.25rem; background-color: var(--am-tint-2); }
.form-range::-moz-range-track { height: 0.5rem; border-radius: 0.25rem; background-color: var(--am-tint-2); }
.form-range::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; margin-top: -0.5rem; background-color: var(--am-purple); }
.form-range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; background-color: var(--am-purple); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(111, 66, 193, 0.3); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(111, 66, 193, 0.3); }
.form-range:disabled::-webkit-slider-thumb { background-color: #b9a8dc; }
.form-range:disabled::-moz-range-thumb { background-color: #b9a8dc; }

.progress { --bs-progress-bar-bg: var(--am-purple); }
.spinner-border { --bs-spinner-border-color: var(--am-purple); }
.btn-check:checked + .btn-outline-primary { color: #fff; }
.btn-check:focus-visible + .btn { box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.3); }

/* Bootstrap's display utilities (d-flex etc.) are !important and would beat [hidden]. */
[hidden] { display: none !important; }

.bi { vertical-align: -0.125em; }
.btn, .form-check-input, .btn-check + .btn { touch-action: manipulation; }

/* ---------- banner ---------- */
.banner {
  display: block;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  background-color: var(--am-purple);
}
.banner-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--am-display);
}

/* ---------- the wizard ---------- */
.wz { width: 100%; }

.wz-head { margin-bottom: 0.5rem; }
.wz-kicker {
  font-family: var(--am-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--am-purple);
}
.wz-optional {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--am-muted);
  background: var(--am-tint);
  border: 1px solid var(--am-line);
  border-radius: 1rem;
  padding: 0.1rem 0.55rem;
  margin-left: 0.4rem;
  letter-spacing: 0;
  text-transform: none;
}
.wz-progress {
  height: 0.4rem;
  background: var(--am-tint-2);
  border-radius: 0.2rem;
  overflow: hidden;
}
.wz-bar {
  width: 100%;
  height: 100%;
  background: var(--am-purple);
  transform-origin: left center;
  transform: scaleX(0.143);
  transition: transform 0.28s var(--am-ease);
}

.wz-card {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: 0 2px 0 rgba(111, 66, 193, 0.08);
}
.wz-stage { min-height: 15rem; }
/* tighter field spacing inside the steps */
.wz-step .mb-3 { margin-bottom: 0.75rem !important; }

.wz-title {
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 0 0 0.25rem;
  outline: none;
}
.wz-lead { color: var(--am-muted); margin-bottom: 0.75rem; }

.wz-step.wz-in-fwd { animation: wz-in-fwd 0.24s var(--am-ease); }
.wz-step.wz-in-back { animation: wz-in-back 0.24s var(--am-ease); }
@keyframes wz-in-fwd { from { opacity: 0; transform: translateX(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes wz-in-back { from { opacity: 0; transform: translateX(-1.25rem); } to { opacity: 1; transform: none; } }

.wz-foot {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.75rem;
}
.wz-foot .btn { min-height: 2.75rem; min-width: 6.5rem; font-weight: 500; }
.wz-foot .btn-primary { flex: 1 1 auto; }
@media (min-width: 576px) {
  .wz-card { padding: 1.75rem; }
  .wz-stage { min-height: 21rem; }
  .wz-title { font-size: 1.6rem; }
  .wz-foot { margin-top: 1.25rem; }
  .wz-foot .btn-primary { flex: 0 0 auto; min-width: 9rem; }
}

/* the live value next to a slider label */
.wz-value { font-family: var(--am-display); font-weight: 600; color: var(--am-purple); }

/* step 1: the drop zone */
.dropzone {
  display: block;
  border: 2px dashed #b9a1e6;
  border-radius: 1.25rem;
  background-color: var(--am-tint);
  cursor: pointer;
  min-height: 9rem;
  padding: 1rem;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.dropzone:hover,
.dropzone.dragover { background-color: var(--am-tint-2); border-color: var(--am-purple); }
.dropzone:focus-within { outline: 0.25rem solid rgba(111, 66, 193, 0.35); outline-offset: 2px; }
.dropzone-icon { font-size: 2.25rem; color: var(--am-purple); line-height: 1; }
.dropzone-cta { font-family: var(--am-display); font-weight: 600; font-size: 1.15rem; }

/* step 4: compact slider rows */
.wz-knob + .wz-knob { margin-top: 0.15rem; }

/* step 6: descriptor picker */
.wz-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wz-chips .btn { min-height: 2.5rem; padding: 0.4rem 0.9rem; }
fieldset:disabled .wz-chips { opacity: 0.45; }
.wz-locked { background: var(--am-tint); border: 1px dashed #b9a1e6; border-radius: 0.75rem; padding: 0.85rem 1rem; }

/* step 7: review */
.wz-summary { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.15rem 0.75rem; margin: 0; font-size: 0.9rem; line-height: 1.35; }
.wz-summary dt { color: var(--am-muted); font-weight: 600; }
.wz-summary dd { margin: 0; overflow-wrap: anywhere; }
.wz-check { background: var(--am-tint); border: 1px solid var(--am-line); border-radius: 0.75rem; padding: 0.5rem 0.75rem; }
.wz-check .progress { height: 0.4rem; }

@media (max-height: 760px) {
  .wz-skippable { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-step.wz-in-fwd, .wz-step.wz-in-back { animation: none; }
  .wz-bar, .dropzone { transition: none; }
}