/**
 * Rating Widget Styles
 * Thumbs up/down, star ratings, reactions, and numeric scales.
 */

.xmf-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================
   Thumbs Up / Down
   ========================================================= */
.xmf-rating--thumbs {
  gap: 0.75rem;
}

.xmf-rating__thumb {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.88rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.xmf-rating__thumb:hover {
  border-color: #9ca3af;
  background: #f3f4f6;
}

.xmf-rating__thumb--up:hover,
.xmf-rating__thumb--up.xmf-rating__thumb--active {
  color: #16a34a;
  border-color: #86efac;
  background: #f0fdf4;
}

.xmf-rating__thumb--down:hover,
.xmf-rating__thumb--down.xmf-rating__thumb--active {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fef2f2;
}

.xmf-rating__thumb-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.xmf-rating__thumb-icon--up::before {
  content: '\1F44D';
}

.xmf-rating__thumb-icon--down::before {
  content: '\1F44E';
}

.xmf-rating__count {
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 1ch;
  text-align: center;
}

.xmf-rating__thumb--up .xmf-rating__count {
  color: #16a34a;
}

.xmf-rating__thumb--down .xmf-rating__count {
  color: #dc2626;
}

/* =========================================================
   Star Rating
   ========================================================= */
.xmf-rating--stars {
  gap: 0.15rem;
}

.xmf-rating__star {
  cursor: pointer;
  font-size: 1.4rem;
  color: #d1d5db;
  transition: color 0.15s ease, transform 0.15s ease;
  user-select: none;
  line-height: 1;
}

.xmf-rating__star::before {
  content: '\2605';
}

.xmf-rating__star:hover,
.xmf-rating__star--filled {
  color: #f59e0b;
}

.xmf-rating__star:hover {
  transform: scale(1.15);
}

.xmf-rating__star--half {
  background: linear-gradient(90deg, #f59e0b 50%, #d1d5db 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.xmf-rating__average {
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
  margin-left: 0.35rem;
}

.xmf-rating__total {
  font-size: 0.78rem;
  color: #9ca3af;
}

/* =========================================================
   Reactions (Emoji)
   ========================================================= */
.xmf-rating--reactions {
  gap: 0.35rem;
}

.xmf-rating__reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 0.88rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.xmf-rating__reaction:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: scale(1.05);
}

.xmf-rating__reaction--active {
  border-color: #93c5fd;
  background: #eff6ff;
}

.xmf-rating__reaction-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.xmf-rating__reaction-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
}

/* =========================================================
   Numeric Scale
   ========================================================= */
.xmf-rating--numeric {
  gap: 0.25rem;
}

.xmf-rating__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.xmf-rating__number:hover {
  background: #e0e7ff;
  border-color: #818cf8;
  color: #4338ca;
}

.xmf-rating__number--active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

/* =========================================================
   Disabled State
   ========================================================= */
.xmf-rating--disabled .xmf-rating__thumb,
.xmf-rating--disabled .xmf-rating__star,
.xmf-rating--disabled .xmf-rating__reaction,
.xmf-rating--disabled .xmf-rating__number {
  cursor: default;
  opacity: 0.7;
  pointer-events: none;
}

/* =========================================================
   Loading State
   ========================================================= */
.xmf-rating--loading {
  opacity: 0.5;
  pointer-events: none;
}