/* FILE: /assets/css/style.css */

body {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Slim custom scrollbar for internally-scrollable boxes (e.g. latest/popular widget) */
.custom-scroll { scrollbar-width: thin; scrollbar-color: #e5e7eb transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.custom-scroll::-webkit-scrollbar { width: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
[data-scrollbox].active-drag { cursor: grabbing; user-select: none; }

/* Breaking news ticker */
.ticker-wrap { position: relative; }
.ticker-track {
  animation: ticker-scroll 30s linear infinite;
  width: max-content;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card hover */
.news-card { transition: transform .25s ease, box-shadow .25s ease; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.news-card img { transition: transform .4s ease; }
.news-card:hover img { transform: scale(1.05); }
.img-wrap { overflow: hidden; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Fade in on load */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Toast */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast { min-width: 240px; padding: .75rem 1rem; border-radius: .5rem; color: #fff; font-size: .875rem; box-shadow: 0 6px 16px rgba(0,0,0,.15); animation: toastIn .3s ease both; }
.toast.success { background: #16a34a; }
.toast.error { background: #dc2626; }
@keyframes toastIn { from { opacity:0; transform: translateX(20px);} to { opacity:1; transform: translateX(0);} }

/* Back To Top button */
#backToTop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9998;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: none;
  background: #16a34a;
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.85);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  animation: backToTopBounce 2.4s ease-in-out infinite;
}
#backToTop:hover {
  background: #15803d;
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.05);
}
#backToTop:active { transform: translateY(0) scale(.95); }
@keyframes backToTopBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1); }
}
@media (max-width: 640px) {
  #backToTop { right: 1rem; bottom: 1rem; width: 42px; height: 42px; font-size: 1rem; }
}