/* Names site - card styling, adapted from the main Africtionary site so the
   two look consistent. Self-contained: only the classes definition.php uses. */

body { background-color: #dfe6e9; }

.word-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  margin-bottom: 18px;
  overflow: hidden;
}
.word-card-body { padding: 22px 24px; }

.word-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.word-card-title { margin: 0 0 2px; font-weight: 800; font-size: 1.9rem; line-height: 1.15; }
.word-card-title a { color: #1f2937; text-decoration: none; }
.word-card-title a:hover { color: #17a2b8; }

.word-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.word-country-badge, .word-lang-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  text-decoration: none;
}
.word-country-badge { background: #e6f6f9; color: #0e7490; }
.word-country-badge:hover { background: #d3eef3; color: #0e7490; text-decoration: none; }
.word-lang-badge { background: #f3e8ff; color: #7c3aed; }
.word-lang-badge:hover { background: #ecdcff; color: #7c3aed; text-decoration: none; }

.word-card-def { font-size: 1.05rem; line-height: 1.7; color: #374151; margin: 0 0 14px; }
.word-card-def a { color: #17a2b8; }

.word-card-byline { font-size: 0.85rem; color: #9ca3af; margin-bottom: 16px; }
.word-card-byline a { color: #6b7280; font-weight: 600; }

.word-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.word-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  background: #f3f4f6; color: #374151; text-decoration: none;
  font-size: 0.9rem; font-weight: 600; border: 1px solid #e5e7eb;
}
.word-action:hover { background: #17a2b8; color: #fff; border-color: #17a2b8; text-decoration: none; }
.word-action .count { font-weight: 700; }

/* Not-found "be the first" card */
.notfound-card { text-align: center; }
.notfound-icon { font-size: 2.6rem; color: #cbd5e1; margin-bottom: 10px; }
.notfound-title { font-size: 1.5rem; font-weight: 800; color: #1f2937; margin-bottom: 8px; }
.notfound-sub { color: #6b7280; margin-bottom: 18px; line-height: 1.6; }
.notfound-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #d99a2b; color: #191b21; font-weight: 700;
  padding: 11px 24px; border-radius: 24px; text-decoration: none;
}
.notfound-cta:hover { background: #c88a20; color: #191b21; text-decoration: none; }
.notfound-alt { margin-top: 16px; font-size: 0.9rem; color: #9ca3af; }
.notfound-alt a { color: #17a2b8; }

/* Most Wanted chips */
.wanted-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #e5e7eb; color: #1f2937;
  text-decoration: none; font-weight: 600; font-size: 0.92rem;
}
.wanted-chip:hover { border-color: #17a2b8; color: #0e7490; text-decoration: none; }
.wanted-chip-count {
  background: #17a2b8; color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 0.78rem; font-weight: 700;
}

/* Share buttons - X (Post) + Facebook, styled like the main site */
.word-share { display: inline-flex; gap: 8px; margin-left: auto; }
.word-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
.word-share-x { background: #000; color: #fff; }
.word-share-x:hover { background: #222; color: #fff; text-decoration: none; }
.word-share-x b { font-size: 0.95rem; }
.word-share-fb { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.word-share-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; text-decoration: none; }

/* Make the actions row wrap nicely with share pushed right */
.word-card-actions { align-items: center; }
.word-action-like:hover { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.word-action-dislike:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* Top row: badges on the left, share on the right (matches main site) */
.word-card-toprow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.word-card-toprow .word-card-badges { margin: 0; }
.word-card-toprow .word-share { margin: 0; }