/* forward-search.css — widget for cross-platform name forwarding.
 *
 * Uses the site's existing dark-mode CSS variables (defined in rnkd.css):
 *   --bg, --bg-elevated, --text, --text-muted, --text-dim, --border,
 *   --border-bright, --primary-from, --primary-to, --primary-gradient.
 *
 * The widget previously fell back to hardcoded light-mode colors
 * (var(--surface, #ffffff), #111827, #fff, #374151) which were unreadable
 * against the site's dark background. This rewrite uses the actual design
 * system tokens so the widget reads cleanly in the site's dark theme.
 */

.forward-search {
  background: var(--bg-elevated, #12121a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  max-width: 720px;
  margin: 0 auto;
}

.forward-search .fs-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.forward-search .fs-input-row {
  display: flex;
  gap: 0.5rem;
}

.forward-search .fs-input {
  flex: 1;
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-bright, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  background: var(--bg, #0a0a0f);
  color: var(--text, #ffffff);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.forward-search .fs-input::placeholder {
  color: var(--text-dim, #71717a);
}

.forward-search .fs-input:focus {
  border-color: var(--primary-from, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.forward-search .fs-submit {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 8px;
  background: var(--primary-gradient, linear-gradient(135deg, #8b5cf6, #ec4899));
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}

.forward-search .fs-submit:hover { opacity: 0.92; }
.forward-search .fs-submit:active { transform: translateY(1px); }

.forward-search .fs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.forward-search .fs-tab {
  --tab-color: #6b7280;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-bright, rgba(255, 255, 255, 0.15));
  background: transparent;
  color: var(--text-muted, #a1a1aa);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.forward-search .fs-tab:hover {
  border-color: var(--tab-color);
  color: var(--text, #ffffff);
}

.forward-search .fs-tab.active {
  background: var(--tab-color);
  border-color: var(--tab-color);
  color: #ffffff;
}

.forward-search .fs-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #a1a1aa);
}

@media (max-width: 540px) {
  .forward-search .fs-input-row { flex-direction: column; }
  .forward-search .fs-submit { width: 100%; }
}