/* ============================================================
   Кастомні стилі «Голос громади» понад Tailwind CDN.
   ============================================================ */

/* Alpine x-cloak — ховає елементи, поки Alpine не ініціалізувався.
   Без цього на момент завантаження видно «розгорнуті» x-show блоки. */
[x-cloak] { display: none !important; }

/* Брендовий градієнт hero. */
.brand-gradient {
  background: linear-gradient(180deg, #DBEAFE 0%, #F9FAFB 100%);
}

/* Картка звернення — універсальний клас, якщо колись захочеться
   стилізувати поза Tailwind. */
.complaint-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px;
  transition: box-shadow .15s, border-color .15s;
}
.complaint-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  border-color: #2563EB;
}

/* Бейджі типів — дублюють Tailwind-логіку як CSS-fallback. */
.badge-complaint        { background: #FEE2E2; color: #991B1B; }
.badge-proposal         { background: #FEF3C7; color: #92400E; }
.badge-review-positive  { background: #D1FAE5; color: #065F46; }
.badge-review-negative  { background: #FEE2E2; color: #991B1B; }
.badge-review-neutral   { background: #F3F4F6; color: #374151; }

/* Анімація пульсу для кнопки голосування — спрацьовує при натисканні. */
@keyframes vote-pulse {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1);    }
}
.vote-pulse {
  animation: vote-pulse .25s ease-out;
}

/* Fade-out для flash-повідомлень (працює разом з main.js). */
.flash-fade-out {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s, transform .4s;
}

/* Дрібниці: гарне фокус-кільце для брендових елементів. */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}