/* ============================================================
   Zeands Digital — Fit Finder ("tailor shop" configurator)
   Used on: services/website-development.html, services/ui-ux-design.html
   Engine:  js/fit-finder.js
   ============================================================ */

.fit-finder .ff-stage {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

/* --- Progress row (back · measuring tape · counter) -------- */
.ff-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.ff-progress[hidden] { display: none; }
.ff-back {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.ff-back:hover { border-color: var(--accent-ink); color: var(--text); transform: translateX(-2px); }
.ff-back[hidden] { visibility: hidden; display: block; } /* keep bar aligned */
.ff-bar {
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
/* measuring-tape ticks */
.ff-bar::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(20,10,45,0.18) 23px, rgba(20,10,45,0.18) 24px);
  pointer-events: none;
}
.ff-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gradient);
  border-radius: 100px;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}
.ff-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 96px;
  text-align: right;
}

/* --- Step shell --------------------------------------------- */
.ff-steps { position: relative; }
.ff-step {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.ff-step.is-entering { opacity: 0; transform: translateX(36px); transition: none; }

/* Agency "speaking" bubble */
.ff-bubble { margin-bottom: 26px; }
.ff-question {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.18;
  color: var(--text);
  margin: 0 0 8px;
  outline: none;
}
.ff-hint { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Typing dots (borrowed feel from faq-chat) */
.ff-typing {
  display: none;
  gap: 5px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
  width: fit-content;
}
.ff-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-ink);
  animation: ffDot 1.1s ease-in-out infinite;
}
.ff-typing span:nth-child(2) { animation-delay: 0.15s; }
.ff-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ffDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.ff-step.typing-active .ff-typing { display: inline-flex; }
.ff-step.typing-active .ff-question,
.ff-step.typing-active .ff-hint,
.ff-step.typing-active .ff-options,
.ff-step.typing-active .ff-actions { opacity: 0; visibility: hidden; }
.ff-step .ff-question,
.ff-step .ff-hint,
.ff-step .ff-options,
.ff-step .ff-actions {
  transition: opacity 0.45s ease;
}

/* --- Option cards ------------------------------------------- */
.ff-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.ff-options--styles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.ff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ff-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13,13,13,0.4);
  box-shadow: var(--shadow-glow);
}
.ff-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.ff-card[aria-pressed="true"] {
  border-color: var(--accent-ink);
  background: var(--accent-light);
}
.ff-card.ff-shake { animation: ffShake 0.35s ease; }
@keyframes ffShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.ff-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ff-card-body { display: flex; flex-direction: column; gap: 3px; }
.ff-card-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.ff-card-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* check badge (selected) */
.ff-card-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--transition), transform var(--transition);
}
.ff-card[aria-pressed="true"] .ff-card-check { opacity: 1; transform: scale(1); }

/* "Pick 1 / 2 / 3" order tag — the tailor's chalk mark */
.ff-card-order {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--gradient);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
.ff-card-order.is-on { opacity: 1; transform: translateY(0); }

/* --- Mini website previews (pure CSS, no external assets) --- */
.ff-mini {
  --mini-bg: #FAFAF8;
  --mini-ink: #1A1A1A;
  --mini-accent: #1A1A1A;
  --mini-line: rgba(0,0,0,0.14);
  --mini-radius: 3px;
  --mini-border: 0px;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--mini-bg);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8%;
  gap: 9%;
  position: relative;
  border: 1px solid var(--border-2);
}
.ff-mini-nav { display: flex; align-items: center; gap: 6%; height: 6%; }
.ff-mini-nav i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mini-accent);
  flex-shrink: 0;
}
.ff-mini-nav b {
  width: 12%; height: 3px;
  border-radius: 2px;
  background: var(--mini-line);
}
.ff-mini-nav b:first-of-type { margin-left: auto; }
.ff-mini-hero { display: flex; flex-direction: column; gap: 7%; flex: 1; justify-content: center; }
.ff-mini-hero u {
  display: block; text-decoration: none;
  width: 62%; height: 12%;
  min-height: 7px;
  border-radius: var(--mini-radius);
  background: var(--mini-ink);
}
.ff-mini-hero s {
  display: block; text-decoration: none;
  width: 46%; height: 5%;
  min-height: 3px;
  border-radius: 2px;
  background: var(--mini-line);
}
.ff-mini-hero s + s { width: 34%; }
.ff-mini-hero em {
  display: block;
  width: 24%; height: 11%;
  min-height: 7px;
  margin-top: 3%;
  border-radius: var(--mini-radius);
  background: var(--mini-accent);
  border: var(--mini-border) solid var(--mini-ink);
}
.ff-mini-cols { display: flex; gap: 6%; height: 20%; }
.ff-mini-cols span {
  flex: 1;
  border-radius: var(--mini-radius);
  background: var(--mini-line);
  border: var(--mini-border) solid var(--mini-ink);
}

/* 1 · Minimal & Airy — near-white, hairlines, whitespace */
.ff-mini--minimal {
  --mini-bg: #FBFBF9;
  --mini-ink: #1C1C1C;
  --mini-accent: #1C1C1C;
  --mini-line: rgba(0,0,0,0.10);
  --mini-radius: 2px;
  padding: 11%;
  gap: 12%;
}
.ff-mini--minimal .ff-mini-hero u { width: 44%; height: 8%; }
.ff-mini--minimal .ff-mini-hero em { width: 18%; background: transparent; border: 1px solid var(--mini-ink); }
.ff-mini--minimal .ff-mini-cols { height: 12%; }

/* 2 · Bold & Brutalist — stark, 2px borders, radius 0, acid accent */
.ff-mini--brutalist {
  --mini-bg: #FFFEF2;
  --mini-ink: #000000;
  --mini-accent: #D8FF3E;
  --mini-line: #000000;
  --mini-radius: 0px;
  --mini-border: 1.5px;
  border: 2px solid #000;
}
.ff-mini--brutalist .ff-mini-nav b { height: 4px; }
.ff-mini--brutalist .ff-mini-hero u { width: 78%; height: 18%; }
.ff-mini--brutalist .ff-mini-hero s { background: #000; height: 4%; }
.ff-mini--brutalist .ff-mini-hero em { box-shadow: 3px 3px 0 #000; }
.ff-mini--brutalist .ff-mini-cols span { background: var(--mini-bg); box-shadow: 2px 2px 0 #000; }

/* 3 · Luxury & Editorial — cream, gold rules, centered */
.ff-mini--luxury {
  --mini-bg: #F5F0E6;
  --mini-ink: #26221B;
  --mini-accent: #C0A15C;
  --mini-line: rgba(38,34,27,0.16);
  --mini-radius: 1px;
}
.ff-mini--luxury .ff-mini-nav { justify-content: center; }
.ff-mini--luxury .ff-mini-nav i { background: var(--mini-accent); }
.ff-mini--luxury .ff-mini-nav b:first-of-type { margin-left: 0; }
.ff-mini--luxury .ff-mini-hero { align-items: center; }
.ff-mini--luxury .ff-mini-hero u { width: 56%; height: 7%; }
.ff-mini--luxury .ff-mini-hero s { width: 30%; background: var(--mini-accent); height: 2px; min-height: 2px; }
.ff-mini--luxury .ff-mini-hero s + s { width: 40%; background: var(--mini-line); }
.ff-mini--luxury .ff-mini-hero em { width: 20%; background: transparent; border: 1px solid var(--mini-accent); }
.ff-mini--luxury .ff-mini-cols { height: 14%; }
.ff-mini--luxury .ff-mini-cols span { background: rgba(38,34,27,0.08); }

/* 4 · Playful & Vibrant — bright tints, blobs, chunky pill */
.ff-mini--playful {
  --mini-bg: #FFF4E4;
  --mini-ink: #2B2340;
  --mini-accent: #FF6B6B;
  --mini-line: rgba(43,35,64,0.16);
  --mini-radius: 10px;
}
.ff-mini--playful .ff-mini-nav i { background: #FFD166; }
.ff-mini--playful .ff-mini-hero u { border-radius: 6px; }
.ff-mini--playful .ff-mini-hero em { border-radius: 100px; width: 28%; }
.ff-mini--playful .ff-mini-cols span { border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; }
.ff-mini--playful .ff-mini-cols span:nth-child(1) { background: #FF6B6B; transform: rotate(-3deg); }
.ff-mini--playful .ff-mini-cols span:nth-child(2) { background: #4ECDC4; transform: rotate(2deg); }
.ff-mini--playful .ff-mini-cols span:nth-child(3) { background: #FFD166; transform: rotate(-2deg); }

/* 5 · Corporate & Trustworthy — cool blue, tidy grid */
.ff-mini--corporate {
  --mini-bg: #F7FAFD;
  --mini-ink: #16324F;
  --mini-accent: #2563EB;
  --mini-line: rgba(22,50,79,0.14);
  --mini-radius: 4px;
  padding: 0;
  gap: 0;
}
.ff-mini--corporate .ff-mini-nav {
  height: 16%;
  background: #16324F;
  padding: 0 8%;
  gap: 5%;
}
.ff-mini--corporate .ff-mini-nav i { background: #fff; }
.ff-mini--corporate .ff-mini-nav b { background: rgba(255,255,255,0.45); }
.ff-mini--corporate .ff-mini-hero { padding: 4% 8%; }
.ff-mini--corporate .ff-mini-hero u { width: 52%; height: 10%; }
.ff-mini--corporate .ff-mini-cols { padding: 0 8% 6%; height: 26%; }
.ff-mini--corporate .ff-mini-cols span { background: #fff; border: 1px solid var(--mini-line); }

/* 6 · Dark & Immersive — deep bg, gradient glow, neon button */
.ff-mini--dark {
  --mini-bg: #0D0D15;
  --mini-ink: #ECECF4;
  --mini-accent: #C6FB50;
  --mini-line: rgba(255,255,255,0.14);
  --mini-radius: 6px;
  border-color: rgba(13,13,13,0.35);
}
.ff-mini--dark::before {
  content: '';
  position: absolute;
  top: -30%; left: 20%;
  width: 60%; height: 70%;
  background: radial-gradient(ellipse, rgba(13,13,13,0.45), transparent 70%);
  pointer-events: none;
}
.ff-mini--dark .ff-mini-hero u { background: var(--mini-ink); }
.ff-mini--dark .ff-mini-hero em { background: var(--gradient); box-shadow: 0 0 10px rgba(13,13,13,0.55); }
.ff-mini--dark .ff-mini-cols span { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }

/* Motion-intensity cards animate their preview on hover */
@keyframes ffRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ff-card--motion[data-value="polished"]:hover .ff-mini-hero > * {
  animation: ffRise 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.ff-card--motion[data-value="polished"]:hover .ff-mini-hero > *:nth-child(2) { animation-delay: 0.08s; }
.ff-card--motion[data-value="polished"]:hover .ff-mini-hero > *:nth-child(3) { animation-delay: 0.16s; }
.ff-card--motion[data-value="polished"]:hover .ff-mini-hero > *:nth-child(4) { animation-delay: 0.24s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-nav,
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-hero > *,
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-cols span {
  animation: ffRise 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-hero > *:nth-child(1) { animation-delay: 0.12s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-hero > *:nth-child(2) { animation-delay: 0.24s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-hero > *:nth-child(3) { animation-delay: 0.36s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-hero > *:nth-child(4) { animation-delay: 0.48s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-cols span:nth-child(1) { animation-delay: 0.6s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-cols span:nth-child(2) { animation-delay: 0.7s; }
.ff-card--motion[data-value="cinematic"]:hover .ff-mini-cols span:nth-child(3) { animation-delay: 0.8s; }

/* --- Step actions ------------------------------------------- */
.ff-actions { display: flex; align-items: center; gap: 14px; }
.ff-next[disabled] { opacity: 0.4; cursor: not-allowed; }

/* --- Greeting ------------------------------------------------ */
.ff-greeting { text-align: center; padding: 24px 0 8px; }
.ff-greeting-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--text);
}
.ff-greeting-body {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}
.ff-greeting .ff-actions { justify-content: center; }

/* --- Reveal -------------------------------------------------- */
.ff-reveal { text-align: center; padding: 12px 0; }
.ff-reveal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  background: var(--accent-light);
  border: 1px solid rgba(13,13,13,0.3);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.ff-reveal-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  margin: 0 0 22px;
  color: var(--text);
}
.ff-swatches {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 26px;
}
.ff-swatches .ff-mini { width: 160px; flex-shrink: 0; }
.ff-traits { max-width: 620px; margin: 0 auto 8px; }
.ff-traits p {
  font-family: var(--font-italic);
  font-size: clamp(19px, 2.6vw, 24px);
  font-style: italic;
  color: var(--text-2);
  margin: 0 0 4px;
  line-height: 1.4;
}
.ff-rec {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 580px;
  margin: 14px auto 22px;
}
.ff-closer {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.35;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 30px;
}
.ff-reveal .ff-actions { justify-content: center; flex-wrap: wrap; }
.ff-restart {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.ff-restart:hover { color: var(--text); }

/* --- No-JS note ---------------------------------------------- */
.ff-noscript {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 0;
}

/* --- SEO deliverables fallback ------------------------------- */
.ff-deliverables {
  max-width: 880px;
  margin: 48px auto 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.ff-deliverables summary {
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}
.ff-deliverables summary::-webkit-details-marker { display: none; }
.ff-deliverables summary::before { content: '+ '; color: var(--accent-ink); }
.ff-deliverables[open] summary::before { content: '\2212\00a0'; }
.ff-deliverables summary:hover { color: var(--text-2); }
.ff-deliverables-body { padding: 20px 0 4px; }
.ff-deliverables-body h3 {
  font-size: 16px;
  color: var(--text);
  margin: 0 0 10px;
}
.ff-deliverables-body ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 24px;
  padding: 0;
  margin: 0 0 18px;
}
.ff-deliverables-body li {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}
.ff-deliverables-body li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--accent-ink);
}
.ff-deliverables-body p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 14px;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 640px) {
  .ff-options { grid-template-columns: repeat(2, 1fr); }
  .ff-options--styles { grid-template-columns: 1fr 1fr; }
  .ff-swatches .ff-mini { width: 120px; }
  .ff-count { min-width: 0; }
}
@media (max-width: 420px) {
  .ff-options--styles { grid-template-columns: 1fr; }
}

/* --- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ff-step,
  .ff-step.is-entering { transition: opacity 0.15s ease; transform: none; }
  .ff-bar-fill { transition: none; }
  .ff-card,
  .ff-card:hover { transform: none; transition: border-color var(--transition); }
  .ff-card.ff-shake { animation: none; }
  .ff-typing span { animation: none; }
  .ff-card--motion:hover .ff-mini-nav,
  .ff-card--motion:hover .ff-mini-hero > *,
  .ff-card--motion:hover .ff-mini-cols span { animation: none; }
  .ff-card-check, .ff-card-order { transition: opacity 0.15s ease; transform: none; }
}