/* ============================================================================
   SME Apply Wizard — fiber design-system layer (apply-ds.css).
   Loaded AFTER wizard-v2.css, so it harmonises the (already well-built) wizard
   with the fiber design language used across the landing + portal, WITHOUT
   touching wizard-v2.css or wizard-v2.js. Purely additive, visual-only — it
   never changes layout/display/position, only colour/shadow/transition/transform.
   CSP-safe (self stylesheet). Reuses the wizard's own tokens (--accent, --primary,
   --radius, --shadow-*) and adds fiber "signal" accents. Reduced-motion honored.

   Care taken NOT to clobber existing pseudo-elements the wizard already uses:
   .step-icon::after (connector) and .btn-primary.btn-large::before (shine) are
   left alone; the progress fill has no ::after of its own, so we add one.
   ========================================================================== */

:root {
  --ads-signal:   190 95% 45%;   /* cyan  */
  --ads-signal-2: 212 88% 52%;   /* azure */
  --ads-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Progress bar — fiber gradient + travelling sheen -------------------- */
.wizard-progress-fill {
  background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--ads-signal-2))) !important;
  position: relative; overflow: hidden;
}
.wizard-progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .wizard-progress-fill::after { animation: ads-sheen 2.6s var(--ads-ease) infinite; }
}
@keyframes ads-sheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(220%); } }

/* ---- Step indicators — active glow / complete ring ---------------------- */
.step-icon { transition: box-shadow .25s var(--ads-ease), transform .25s var(--ads-ease); }
.wizard-step.is-active .step-icon {
  box-shadow: 0 0 0 4px hsl(var(--accent) / .14), 0 6px 16px hsl(var(--accent) / .28);
}
.wizard-step.is-complete .step-icon {
  box-shadow: 0 0 0 3px hsl(var(--ads-signal) / .16);
}

/* ---- Primary buttons — gradient depth + hover lift (shine kept intact) --- */
.btn-primary:not(.btn-ghost) {
  background-image: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-800))) !important;
  transition: transform .2s var(--ads-ease), box-shadow .2s var(--ads-ease), filter .2s var(--ads-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary:not(.btn-ghost):not(:disabled):hover {
    transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: brightness(1.05);
  }
}

/* ---- Choice buttons — hover lift + selected glow ------------------------- */
.choice-btn { transition: transform .2s var(--ads-ease), box-shadow .2s var(--ads-ease), border-color .2s var(--ads-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .choice-btn:hover:not(.is-selected) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.choice-btn.is-selected { box-shadow: 0 0 0 2px hsl(var(--accent) / .5), 0 8px 20px hsl(var(--accent) / .18); }

/* ---- Upload cards — hover lift + state glows ----------------------------- */
.upload-card { transition: transform .2s var(--ads-ease), box-shadow .2s var(--ads-ease), border-color .2s var(--ads-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .upload-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.upload-card.is-ok       { box-shadow: 0 0 0 1px hsl(var(--success-fg) / .3), var(--shadow-sm); }
.upload-card.is-processing { box-shadow: 0 0 0 1px hsl(var(--info-fg) / .3), var(--shadow-sm); }
.upload-card.is-failed   { box-shadow: 0 0 0 1px hsl(var(--danger-fg) / .3), var(--shadow-sm); }

/* ---- Inputs / floating labels — refined focus ring ---------------------- */
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px hsl(var(--accent) / .12) !important;
}

/* ---- Panels — soft elevation ------------------------------------------- */
.panel { box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .choice-btn, .upload-card, .step-icon { transition: none; }
}