/* ============================================================
   SHARED PARTIALS — included in all pages via JS
   ============================================================ */

/* HELP FINDER PAGE */
.finder-container {
  background: var(--color-bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.finder-progress-bar-container {
  height: 5px;
  background: var(--color-border-light);
  position: relative;
}

.finder-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  transition: width var(--transition-slow);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.finder-step {
  padding: var(--space-12) var(--space-12);
}

.finder-step-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.finder-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
}

.finder-step h2 { margin-bottom: var(--space-3); }
.finder-step-subtitle { color: var(--color-text-secondary); font-size: var(--text-lg); }

.finder-needs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.finder-location-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.finder-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.finder-result-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-white);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-normal);
}

.finder-result-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateX(6px);
  text-decoration: none;
  color: inherit;
}

.finder-result-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.finder-result-card__emoji { font-size: 2.25rem; flex-shrink: 0; }

.finder-result-card__body { flex: 1; }
.finder-result-card__body strong { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-1); }
.finder-result-card__body p { color: var(--color-text-secondary); font-size: var(--text-base); max-width: none; }

.finder-result-card > svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke: var(--color-primary);
  transition: transform var(--transition-fast);
}

.finder-result-card:hover > svg { transform: translateX(4px); }

/* Finder back button */
.finder-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-12);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.finder-note { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (max-width: 900px) {
  .finder-needs-grid { grid-template-columns: repeat(2, 1fr); }
  .finder-location-grid { grid-template-columns: repeat(2, 1fr); }
  .finder-step { padding: var(--space-8) var(--space-6); }
  .finder-nav { padding: var(--space-5) var(--space-6); }
}

@media (max-width: 560px) {
  .finder-needs-grid { grid-template-columns: 1fr; }
  .finder-location-grid { grid-template-columns: repeat(2, 1fr); }
}