/* public/assets/css/styles.css */
.hero-banner {
  position: relative;
  background: #0b0d12;
  background-image: url('/assets/img/vov-files.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,13,18,.55), rgba(12,13,18,.65));
}
.hero-banner > .container { position: relative; z-index: 1; }
.hero-banner .display-5 { text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.hero-banner .lead { color: rgba(255,255,255,.85) !important; }
.card { border: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; }
.card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.12) !important; }
.card:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.card .card-img-top { transition: transform .3s ease; }
.card:hover .card-img-top { transform: scale(1.03); }

/* Info tiles (payment steps) */
.bg-body-tertiary.rounded-3.border { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bg-body-tertiary.rounded-3.border:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08); border-color: rgba(0,0,0,.06); }

@media (prefers-reduced-motion: reduce) {
  .card, .card .card-img-top, .bg-body-tertiary.rounded-3.border { transition: none !important; }
}

/* Social icons */
.social-links a { display: inline-flex; align-items: center; gap: 8px; }
.icon-circle { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; line-height: 1; }
.icon-vk { background: #4a76a8; }
.icon-tg { background: #229ED9; }
.icon-wa { background: #25D366; }
.icon-ig { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90% ); }

/* Vote buttons */
.js-vote-wrap .btn svg { margin-right: 6px; }
.js-vote-wrap .btn .likes-count,
.js-vote-wrap .btn .dislikes-count { min-width: 1.5em; display: inline-block; text-align: left; }