/* Shim de utilitários para a feature de Avaliações.
   O lucks usa Tailwind PRÉ-COMPILADO (sem JIT), então as classes abaixo —
   usadas pelos componentes feedbacks-* — não existem no build e são definidas
   aqui com os valores padrão do Tailwind + as CSS vars do cliente.
   Cores: --primary/--secondary = HSL; --foreground/--muted-foreground = RGB. */

/* spacing / gap */
.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-6 { gap: 1.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.pr-8 { padding-right: 2rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.border-t { border-top-width: 1px; }

/* sizing */
.w-2 { width: 0.5rem; }
.h-1\.5 { height: 0.375rem; }
.h-7 { height: 1.75rem; }
.h-px { height: 1px; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.size-9 { width: 2.25rem; height: 2.25rem; }
.max-h-\[50vh\] { max-height: 50vh; }
.self-center { align-self: center; }

/* typography */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-right { text-align: right; }
.opacity-70 { opacity: 0.7; }

/* effects */
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.resize-none { resize: none; }

/* position */
.right-2 { right: 0.5rem; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* colors (primary/secondary = HSL, foreground = RGB) */
.text-secondary { color: hsl(var(--secondary)); }
.text-emerald-500 { color: #10b981; }
.text-yellow-400 { color: #facc15; }
.fill-primary { fill: hsl(var(--primary)); }
.fill-transparent { fill: transparent; }
.fill-yellow-400 { fill: #facc15; }
.bg-foreground\/10 { background-color: rgb(var(--foreground) / 0.1); }
.bg-primary\/15 { background-color: hsl(var(--primary) / 0.15); }
.border-primary\/30 { border-color: hsl(var(--primary) / 0.3); }

/* states */
.hover\:scale-110:hover { transform: scale(1.1); }
.active\:scale-95:active { transform: scale(0.95); }
.hover\:text-yellow-400:hover { color: #facc15; }
.hover\:bg-primary\/80:hover { background-color: hsl(var(--primary) / 0.8); }

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:pr-2 { padding-right: 0.5rem; }
  .md\:w-72 { width: 18rem; }
}

/* Inputs da feature (o lucks não tem estilo base de textarea/select) */
#feedback-message,
#package-feedbacks-filter {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius, 0.6rem);
  color: rgb(var(--foreground));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#feedback-message:focus-visible,
#package-feedbacks-filter:focus-visible {
  outline: none;
  border-color: hsl(var(--primary) / 0.5);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
}

#feedback-message::placeholder {
  color: rgb(var(--muted-foreground) / 0.7);
}