/* =============================================
   Samajer News - Main CSS
   WHITE / LIGHT THEME
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@400;600;700;800&family=Noto+Sans+Bengali:wght@300;400;500;600;700&display=swap');

:root {
  --primary:     #1a1a2e;
  --accent:      #c0392b;
  --accent-dark: #96281b;
  --accent-light:#fef2f2;
  --bg:          #ffffff;
  --bg-white:    #ffffff;
  --bg-soft:     #f8f9fa;
  --border:      #e0e0e0;
  --text:        #111111;
  --text-muted:  #555555;
  --text-light:  #888888;
  --nav-bg:      #ffffff;
  --nav-text:    #111111;
  --breaking-bg: #c0392b;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 30px rgba(0,0,0,.12);
  --radius:      4px;
  --font-serif:  'Noto Serif Bengali', serif;
  --font-sans:   'Noto Sans Bengali', sans-serif;
  --container:   1320px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body { overflow-x: hidden; /* body */
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
ul { list-style: none; }

.container { width: 100%; box-sizing: border-box; /* .container */ max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* ── TOP BAR ── */
.top-bar { width: 100%; /* FULL */ 
  background: #f8f9fa;
  color: #444;
  font-size: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #e5e5e5;
}
.top-bar .container { width: 100%; box-sizing: border-box; /* .container */ display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.top-bar-left { display: flex; gap: 20px; align-items: center; }
.top-bar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Date & time */
.topbar-date, .topbar-time {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #333;
}
.topbar-date i { color: #c0392b; font-size: 13px; }
.topbar-time i { color: #2980b9; font-size: 13px; }

/* Smart icon buttons — circular, icon-only */
.topbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  transition: all .2s;
  text-decoration: none;
}
.topbar-icon-btn i { font-size: 13px; color: #fff; }
.topbar-fb { background: #1877f2; }
.topbar-x  { background: #0f1419; }
.topbar-yt { background: #ff0000; }
.topbar-li { background: #0a66c2; }
.topbar-wa { background: #25d366; }
.topbar-em { background: #607d8b; }
.topbar-ig { background: #c13584; }
.topbar-icon-btn:hover { opacity: .85; transform: translateY(-1px); }

/* Admin button — stands out */
.topbar-admin-btn {
  background: #c0392b; color: #fff !important;
  border-color: #c0392b !important;
}
.topbar-admin-btn i { color: #fff !important; }
.topbar-admin-btn:hover {
  background: #96281b !important;
  color: #fff !important;
  border-color: #96281b !important;
  box-shadow: 0 3px 10px rgba(192,57,43,.35) !important;
}

/* Admin button in nav — visible on mobile where the topbar is hidden.
   The generic `.nav-login-btn:hover` (light) would otherwise override the
   admin hover and turn it white/invisible — keep a strong red hover here. */
.nav-admin-btn {
  display: none;
  background: linear-gradient(135deg, #c0392b, #96281b);
  color: #fff !important;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 6px rgba(192,57,43,.22);
  transition: all .18s ease;
}
.nav-admin-btn i { color: #fff !important; }
.nav-login-btn.nav-admin-btn:hover,
.nav-login-btn.nav-admin-btn:focus {
  background: linear-gradient(135deg, #d64032, #7f1d1d) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 5px 16px rgba(192,57,43,.5) !important;
  transform: translateY(-2px);
}

/* ── MAIN HEADER ── */
.main-header { width: 100%; /* FULL */ 
  background: #ffffff;
  padding: 10px 0;
  border-bottom: 2px solid #e0e0e0;
}
.main-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo */
.header-logo-wrap { flex-shrink: 0; padding: 4px 0; margin-right: 0; }
.logo-link { display: block; transition: opacity .2s; }
.logo-link:hover { opacity: .88; }
.site-logo {
  height: 150px; width: auto; max-width: 460px;
  object-fit: contain; display: block;
}
@media (max-width: 1100px) { .site-logo { height: 120px; } }
@media (max-width: 900px) { .site-logo { height: 92px; } }
@media (max-width: 600px) { .site-logo { height: 64px; } }
@media (max-width: 480px) { .site-logo { height: 50px; } }

/* Header featured news tiles */
.header-news-tiles {
  display: flex; gap: 16px; flex: 1; overflow: hidden;
}
.header-news-tile {
  display: flex; gap: 10px; align-items: flex-start;
  flex: 1; min-width: 0; text-decoration: none;
  padding-left: 16px;
  border-left: 1px solid #eee;
}
.header-news-tile:first-child { border-left: none; padding-left: 0; }
.header-tile-img {
  width: 72px; height: 52px; flex-shrink: 0;
  border-radius: 4px; overflow: hidden; background: #f0f0f0;
}
.header-tile-img img { width:100%; height:100%; object-fit:cover; }
.header-tile-title {
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: #111; font-family: var(--font-serif);
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.header-news-tile:hover .header-tile-title { color: var(--accent); }
@media (max-width: 900px) { .header-news-tiles { display: none; } }

/* ── NAVIGATION (Prothom Alo style) ── */
.main-nav {
  background: #fff;
  border-top: none;
  border-bottom: 1px solid #e5e5e5;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between;
}
.nav-tools {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

/* Search in nav */
.nav-search-wrap { position: relative; }
.nav-search-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px;
  font-weight: 600; color: #333; padding: 10px 12px;
  border-radius: 4px; transition: background .15s;
}
.nav-search-btn:hover { background: #f5f5f5; color: var(--accent); }
.nav-search-box {
  display: none; position: absolute; top: 100%; right: 0;
  width: 300px; background: #fff;
  border: 2px solid var(--accent); border-radius: 6px;
  box-shadow: var(--shadow); z-index: 200; padding: 8px;
}
.nav-search-box.open { display: block; }
.nav-search-box form { display: flex; }
.nav-search-box input {
  flex: 1; padding: 8px 12px; border: 1px solid #ddd;
  border-radius: 4px 0 0 4px; font-family: var(--font-sans);
  font-size: 13px; outline: none; color: #111;
}
.nav-search-box button {
  padding: 8px 14px; background: var(--accent);
  border: none; color: #fff; cursor: pointer;
  border-radius: 0 4px 4px 0;
}

/* Login button in nav */
.nav-login-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: #444; border-radius: 4px;
  transition: all .15s;
}
.nav-login-btn:hover { background: #f5f5f5; color: var(--accent); }
.nav-login-btn i { font-size: 14px; }

.header-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

.search-box { position: relative; }
.search-box form { display: flex; border: 2px solid #ddd; border-radius: 25px; overflow: hidden; transition: border-color .2s; background: #f8f9fa; }
.search-box form:focus-within { border-color: var(--accent); background: #fff; }
.search-box input { border: none; outline: none; padding: 8px 16px; font-family: var(--font-sans); font-size: 14px; width: 220px; background: transparent; color: #111; }
.search-box button { background: var(--accent); border: none; padding: 8px 14px; color: white; cursor: pointer; font-size: 14px; }
.search-box button:hover { background: var(--accent-dark); }

.search-suggestions {
  position: absolute; top: 110%; left: 0; right: 0;
  background: white; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: var(--shadow); z-index: 1000; display: none; max-height: 300px; overflow-y: auto;
}
.search-suggestions.show { display: block; }
.suggestion-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #111; }
.suggestion-item:hover { background: var(--accent-light); }
.suggestion-item .cat { font-size: 11px; color: var(--accent); }

.social-links { display: flex; gap: 8px; }
.social-links a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: white; }
.social-fb { background: #1877f2; }
.social-tw { background: #1da1f2; }
.social-yt { background: #ff0000; }
.social-links a.drawer-admin {
  width: auto;
  border-radius: 16px;
  padding: 0 12px;
  background: #e63946;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
}
.social-links a.drawer-admin:hover { background: #c0392b; }

/* ── NAVIGATION ── */
.main-nav {
  background: #ffffff;
  border-bottom: 3px solid var(--accent);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.nav-list { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav-list::-webkit-scrollbar { display: none; }
.nav-list li a {
  display: block; padding: 13px 13px;
  color: #111; font-size: 15px; font-weight: 700;
  font-family: 'Noto Sans Bengali', sans-serif;
  white-space: nowrap; border-bottom: 3px solid transparent;
  letter-spacing: .1px;
  transition: all .2s;
}
.nav-list li a:hover, .nav-list li a.active {
  color: var(--accent); border-bottom-color: var(--accent);
  background: #fef2f2;
}
.nav-toggle { display: none; background: none; border: none; color: #222; font-size: 18px; padding: 12px; cursor: pointer; font-weight: 700; }

/* ── BREAKING NEWS ── */
.breaking-bar {
  background: #fff8f8;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid #fca5a5;
  padding: 8px 0; overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.breaking-bar .container { width: 100%; box-sizing: border-box; /* .container */ display: flex; align-items: center; gap: 12px; }
.breaking-label {
  background: var(--accent); color: white; padding: 4px 14px; border-radius: 3px;
  font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.8} }

.ticker-wrap { overflow: hidden; flex: 1; }
.ticker {
  display: flex; width: max-content;
  /* NO CSS animation — JS rAF handles scrolling for zero-shake */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}
.ticker-item {
  display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: #111;
  white-space: nowrap; padding: 0 24px; flex-shrink: 0;
}
.ticker-item::before { content: '⬥'; margin-right: 24px; color: var(--accent); font-size: 10px; }
.ticker-item a { color: #111; }
.ticker-item a:hover { color: var(--accent); }

/* ── HERO SECTION ── */
.hero-section { padding: 20px 0; }
.hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.hero-main { border-radius: var(--radius); overflow: hidden; position: relative; }
.hero-image-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; position: relative; }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hero-main:hover .hero-image-wrap img { transform: scale(1.03); }
.hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  padding: 30px 20px 20px;
}
.hero-cat { display: inline-block; background: var(--accent); color: white; padding: 2px 10px; border-radius: 3px; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.hero-title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1.5; }
.hero-title a { color: #fff; }
.hero-title a:hover { color: #ffd; }
.hero-meta { display: flex; gap: 12px; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 8px; }

.hero-side { display: flex; flex-direction: column; gap: 8px; }
.side-story { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; gap: 10px; transition: transform .2s; border: 1px solid #eee; }
.side-story:hover { transform: translateY(-2px); }
.side-image { width: 90px; height: 70px; flex-shrink: 0; overflow: hidden; }
.side-image img { width: 100%; height: 100%; object-fit: cover; }
.side-content { padding: 8px; flex: 1; }
.side-cat { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.side-title { font-size: 13px; font-weight: 600; line-height: 1.5; color: #111; }
.side-title a:hover { color: var(--accent); }

/* ── NEWS CARDS ── */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.section-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: #111; display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ''; display: block; width: 4px; height: 20px; background: var(--accent); border-radius: 2px; }
.see-all { font-size: 13px; color: var(--accent); font-weight: 600; }
.see-all:hover { color: var(--accent-dark); }

.news-grid { display: grid; gap: 16px; }
.news-grid-3 { grid-template-columns: repeat(3,1fr); }
.news-grid-4 { grid-template-columns: repeat(4,1fr); }
.news-grid-2 { grid-template-columns: repeat(2,1fr); }

.news-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; border: 1px solid #eee; }
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-image-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .card-image-wrap img { transform: scale(1.03); }
.card-body { overflow-x: hidden; /* body */ padding: 12px; }
.card-category { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; display: block; }
.card-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 8px; color: #111; }
.card-title a:hover { color: var(--accent); }
.card-meta { display: flex; gap: 12px; font-size: 11px; color: #666; }
.card-excerpt { font-size: 13px; color: #444; line-height: 1.6; margin-bottom: 8px; }

/* Badge pills */
.badge-sm { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-right: 4px; }
.badge-breaking { background: #fde8e8; color: #c0392b; }
.badge-featured  { background: #fef9e7; color: #d68910; }

/* Category home sections */
.cat-section { margin-bottom: 32px; }
.cat-main-story { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cat-main-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; }
.cat-main-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cat-main-story:hover .cat-main-img img { transform: scale(1.03); }
.cat-main-content { display: flex; flex-direction: column; justify-content: center; }
.cat-main-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.6; color: #111; margin-bottom: 8px; }
.cat-main-title a:hover { color: var(--accent); }
.cat-main-excerpt { font-size: 13.5px; color: #444; line-height: 1.7; }
.cat-side-title { font-size: 13px; font-weight: 600; line-height: 1.5; color: #111; padding: 10px 0; border-bottom: 1px solid #eee; }
.cat-side-title a:hover { color: var(--accent); }
.side-cat { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 4px; }

/* ── ARTICLE PAGE ── */
.article-page { padding: 24px 0 40px; background: #fff; }
.content-layout { display: grid; grid-template-columns: 1fr 280px; gap: 30px; }
.article-main { min-width: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; margin-bottom: 16px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb i { font-size: 10px; color: #bbb; }
.article-category { display: inline-block; padding: 3px 12px; border-radius: 3px; color: white; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.article-title { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 800; line-height: 1.5; color: #111; margin-bottom: 12px; }
.article-excerpt { font-size: 1rem; color: #444; line-height: 1.7; margin-bottom: 16px; font-style: italic; border-left: 3px solid var(--accent); padding-left: 14px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.meta-left { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.meta-left span { font-size: 13px; color: #555; display: flex; align-items: center; gap: 5px; }
.meta-left i { color: var(--accent); }
.meta-author { font-weight: 600; color: #333; }
.article-divider { border: none; border-top: 1px solid #eee; margin: 16px 0; }
.article-figure { margin: 20px 0; }
.article-figure img { width: 100%; border-radius: var(--radius); }
.article-figure figcaption { font-size: 12px; color: #666; margin-top: 8px; text-align: center; font-style: italic; }
.article-content { font-family: var(--font-serif); font-size: 1rem; line-height: 1.9; color: #111; }
.article-content p { margin-bottom: 16px; }
.article-content h2 { font-size: 1.3rem; font-weight: 700; margin: 24px 0 12px; color: #111; }
.article-content h3 { font-size: 1.1rem; font-weight: 700; margin: 20px 0 10px; color: #222; }
.article-content blockquote { border-left: 4px solid var(--accent); padding: 12px 16px; background: #f8f9fa; margin: 16px 0; font-style: italic; color: #444; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; align-items: center; }
.article-tags i { color: var(--accent); }
.tag { background: #f1f3f5; color: #333; padding: 4px 12px; border-radius: 20px; font-size: 12px; border: 1px solid #ddd; }
.tag:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* Share buttons */
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-buttons span { font-size: 13px; color: #555; font-weight: 600; }
.share-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; color: white; cursor: pointer; border: none; }
.share-fb { background: #1877f2; }
.share-tw { background: #1da1f2; }
.share-wa { background: #25d366; }
.share-copy { background: #555; color: white; }
.article-share-bottom { padding: 16px 0; border-top: 1px solid #eee; margin-top: 20px; }
.article-share-bottom p { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: #333; }

/* Share menu — Prothom Alo style dropdown */
.share-menu { position: relative; display: inline-block; vertical-align: middle; }
.share-menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border: none; cursor: pointer; line-height: 1.2; }
.share-menu-btn i { font-size: 13px; }
.share-menu-btn:hover { opacity: .9; }
.share-menu-drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; display: none; }
.share-menu-drop.open { display: block; animation: shareMenuIn .15s ease; }
/* Bottom-of-article share: open rightward by default (JS auto-flips if it
   would still hit the viewport edge). */
.article-share-bottom .share-menu-drop { right: auto; left: 0; }
.share-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #333; text-decoration: none; text-align: left; border-radius: 6px; cursor: pointer; }
.share-menu-item:hover { background: #f4f6f8; color: #111; }
.share-menu-item i { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; }
.share-menu-item[data-net="fb"] i { color: #1877f2; }
.share-menu-item[data-net="twitter"] i { color: #1da1f2; }
.share-menu-item[data-net="linkedin"] i { color: #0a66c2; }
.share-menu-item[data-net="whatsapp"] i { color: #25d366; }
.share-menu-item[data-net="email"] i { color: #ea4335; }
.share-menu-item[data-net="copy"] i { color: #555; }
.share-menu-item[data-net="copy"].copied { color: #27ae60; }
.share-menu--compact .share-menu-btn { padding: 6px 9px; background: #f1f3f5; color: #555; }
.share-menu--compact .share-menu-btn:hover { background: #e6e9ec; color: var(--accent); opacity: 1; }
.share-menu--compact .share-menu-btn i { font-size: 12px; }
.share-menu--compact .share-menu-drop { right: auto; left: 0; }
@keyframes shareMenuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ── ARTICLE ACTION TOOLBAR (Prothom Alo style) ── */
.article-toolbar { margin-top: 4px; padding: 16px 0 14px; border-bottom: 1px solid #ececec; }
.atb-btns { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.atb-btn {
  touch-action: manipulation;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; padding: 0; cursor: pointer; text-decoration: none;
  transition: opacity .2s, transform .2s; line-height: 1;
}
.atb-btn:hover { opacity: .88; transform: translateY(-1px); }
.atb-btn:active { transform: scale(.92); opacity: .8; }
.atb-btn i { font-size: 16px; color: #fff; }
.atb-svg { display: block; flex-shrink: 0; }
.atb-fb { background: #1877f2; }
.atb-x  { background: #0f1419; }
.atb-fsize {
  background: #2b6cb0; color: #fff;
  box-shadow: 0 0 0 3px #f1f1f1;
  font-family: var(--font-serif);
}
.atb-fsize .atb-aa { font-size: 17px; font-weight: 700; line-height: 1; }
.atb-fsize .atb-sgn { font-size: 11px; font-weight: 800; margin-left: 1px; line-height: 1; }
.atb-print { background: #737373; }
.atb-print i { font-size: 15px; }
.atb-bookmark { background: #f0f1f5; }
.atb-bookmark i { color: #333; font-size: 16px; }
.atb-bookmark.saved { background: #ffe8e6; }
.atb-bookmark.saved i { color: #e63946; }

/* Share button inside toolbar — circle with red arrow */
.share-menu--toolbar .share-menu-btn {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: #fde8e8; color: #e63946;
  justify-content: center;
}
.share-menu--toolbar .share-menu-btn i { font-size: 16px; }
.share-menu--toolbar .share-menu-drop { top: calc(100% + 8px); }

/* Bookmark / toast feedback */
.atb-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #111; color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 24px; z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.atb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Author box */
.author-box { background: #f8f9fa; border-radius: 8px; padding: 20px; display: flex; gap: 16px; align-items: center; margin: 24px 0; border: 1px solid #e5e5e5; }
.author-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #e0e0e0; display: flex; align-items: center; justify-content: center; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-initials i { font-size: 32px; color: #bbb; }
.author-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #111; }
.author-info p { font-size: 13px; color: #555; line-height: 1.6; }

/* ── SIDEBAR ── */
.sidebar { min-width: 0; }
.widget { background: #fff; border: 1px solid #eee; border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.widget-title { padding: 12px 16px; font-family: var(--font-serif); font-size: 15px; font-weight: 700; background: var(--accent); color: white; display: flex; align-items: center; gap: 8px; }
.sidebar-news-list li { border-bottom: 1px solid #f0f0f0; }
.sidebar-news-list li:last-child { border-bottom: none; }
.sidebar-news-list a { display: flex; gap: 10px; padding: 10px 12px; align-items: flex-start; color: #111; font-size: 13px; font-weight: 500; }
.sidebar-news-list a:hover { background: #f8f9fa; color: var(--accent); }
.sidebar-news-list img { width: 60px; height: 45px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.cat-widget-list { padding: 8px 0; }
.cat-widget-list li { border-bottom: 1px solid #f5f5f5; }
.cat-widget-list a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: #333; font-weight: 500; }
.cat-widget-list a:hover { color: var(--accent); background: #f8f9fa; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.popular-list { padding: 8px 0; }
.popular-list li { display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #f5f5f5; align-items: center; font-size: 13px; color: #333; }
.popular-list li:last-child { border-bottom: none; }
.popular-list a:hover { color: var(--accent); }
.popular-num { font-weight: 800; color: var(--accent); font-size: 16px; min-width: 20px; }

/* ── CATEGORY PAGE ── */
.category-page { padding: 20px 0 40px; }
.category-header { background: #fff; border-radius: var(--radius); padding: 20px; margin-bottom: 24px; border-left: 5px solid var(--accent); border: 1px solid #eee; }
.category-header h1 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 800; color: #111; }
.category-header p { color: #555; font-size: 13px; margin-top: 4px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.page-btn { padding: 8px 14px; border: 2px solid #ddd; border-radius: var(--radius); font-size: 13px; color: #333; background: #fff; }
.page-btn:hover, .page-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ── FOOTER ── */
.main-footer { background: #f8f9fa; color: #444; border-top: 3px solid #e63946; margin-top: 40px; }
.footer-top { padding: 36px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 28px; }

/* Footer text logo */
.footer-logo-text { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-logo-name {
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 900; color: #111;
}

.footer-about p { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 14px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; background: #e63946; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .2s; }
.footer-social a:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(230,57,70,.4); }

.footer-col h4 { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid #e63946; display: inline-block; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 7px; }
.footer-col ul a { font-size: 13px; color: #555; display: flex; align-items: center; gap: 5px; }
.footer-col ul a i { color: #e63946; font-size: 10px; }
.footer-col ul a:hover { color: #e63946; padding-left: 4px; }
.contact-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; margin-bottom: 7px; }
.contact-list i { color: #e63946; width: 14px; }

.footer-bottom { background: #f1f3f5; border-top: 1px solid #e0e0e0; padding: 14px 0; }
.footer-bottom .container { width: 100%; box-sizing: border-box; /* .container */ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #888; }
.footer-bottom .footer-copyright { font-size: 13px; font-weight: 700; color: #7a1f1f; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { font-size: 12px; color: #888; }
.footer-bottom-links a:hover { color: #e63946; }

/* ── SEARCH PAGE ── */
.search-page { padding: 24px 0 40px; }
.search-result-header { margin-bottom: 20px; }
.search-result-header h2 { font-family: var(--font-serif); font-size: 1.2rem; color: #111; }
.search-result-header span { color: var(--accent); font-weight: 700; }

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px; background: var(--accent); color: white;
  border-radius: 50%; border: none; cursor: pointer; font-size: 18px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(192,57,43,.4); z-index: 500;
  transition: all .3s;
}
.back-to-top.show { display: flex; }
.back-to-top:hover { background: var(--accent-dark); transform: translateY(-2px); }

/* ── ALERTS ── */
.alert { padding: 12px 20px; border-radius: 6px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 12px; }
.alert-success { background: #d5f5e3; color: #1e8449; border: 1px solid #a9dfbf; }
.alert-error   { background: #fde8e8; color: #922b21; border: 1px solid #f5b7b1; }

/* ══════════════════════════════
   FEATURE 2: LANGUAGE SWITCHER
   ══════════════════════════════ */
.lang-switcher { display:flex; align-items:center; gap:0; background:#f1f3f5; border:1px solid #ddd; border-radius:20px; padding:4px 10px; margin-right:8px; white-space:nowrap; }
.lang-btn { font-size:12px; font-weight:600; color:#444; transition:color .2s; padding:1px 4px; border-radius:10px; text-decoration:none; }
.lang-btn:hover { color:var(--accent); }
.lang-active { color:var(--accent) !important; font-weight:800; }
.lang-sep { font-size:11px; color:#ccc; margin:0 2px; }

/* ══════════════════════════════
   FEATURE 3: DRAWER TOGGLE
   ══════════════════════════════ */
.drawer-toggle { width:40px; height:40px; background:#1a1a2e; border:none; border-radius:6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:9px 8px; transition:background .2s; flex-shrink:0; }
.drawer-toggle:hover { background:var(--accent); }
.drawer-bar { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
.drawer-toggle.open .drawer-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.drawer-toggle.open .drawer-bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.drawer-toggle.open .drawer-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── DRAWER PANEL ── */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:900; display:none; opacity:0; transition:opacity .3s; }
.drawer-overlay.show { display:block; opacity:1; }
.site-drawer { position:fixed; top:0; right:0; width:300px; height:100vh; background:#fff; z-index:901; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
.site-drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#1a1a2e; color:#fff; flex-shrink:0; }
.drawer-close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.drawer-close:hover { background:rgba(255,255,255,.15); }
.drawer-search { padding:14px 16px; border-bottom:1px solid #eee; flex-shrink:0; }
.drawer-search form { display:flex; background:#f5f5f5; border-radius:6px; overflow:hidden; }
.drawer-search input { flex:1; padding:9px 12px; border:none; background:transparent; font-family:var(--font-sans); font-size:13px; outline:none; color:#111; }
.drawer-search button { padding:9px 14px; background:var(--accent); border:none; color:#fff; cursor:pointer; }
.drawer-lang { display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid #eee; flex-shrink:0; }
.dlang-btn { flex:1; padding:8px; text-align:center; border:2px solid #ddd; border-radius:6px; font-size:13px; font-weight:600; color:#333; text-decoration:none; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:5px; }
.dlang-btn:hover { border-color:var(--accent); color:var(--accent); }
.dlang-active { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }
.drawer-nav { flex:1; padding:8px 0; }
.drawer-nav a { display:flex; align-items:center; gap:12px; padding:12px 20px; font-size:14px; font-weight:500; color:#222; text-decoration:none; border-bottom:1px solid #f5f5f5; transition:all .15s; }
.drawer-nav a:hover { background:#fef2f2; color:var(--accent); padding-left:26px; }
.drawer-nav a i { width:18px; text-align:center; color:#888; font-size:14px; }
.drawer-nav a:hover i { color:var(--accent); }
.drawer-divider { padding:10px 20px 6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#bbb; background:#fafafa; }
.drawer-footer { padding:16px 20px; border-top:1px solid #eee; flex-shrink:0; }

/* ── VIDEO NAV ── */
.nav-video-link { display:flex !important; align-items:center; gap:5px; font-weight:600 !important; }
.nav-video-link i { color:var(--accent); font-size:14px; }

/* ── LIVE STRIP ── */
.live-strip { display:flex; align-items:stretch; background:#fff; border:2px solid var(--accent); border-radius:6px; margin-bottom:16px; overflow:hidden; box-shadow:0 2px 8px rgba(192,57,43,.1); }
.live-strip-badge { display:flex; align-items:center; gap:6px; background:var(--accent); color:#fff; padding:10px 16px; font-weight:800; font-size:13px; white-space:nowrap; text-decoration:none; flex-shrink:0; }
.live-strip-dot { width:9px; height:9px; background:#fff; border-radius:50%; animation:liveDotPulse 1.2s infinite; display:inline-block; flex-shrink:0; }
.live-strip-ticker { flex:1; overflow:hidden; display:flex; align-items:center; position:relative; }
.live-strip-track { display:inline-flex; gap:0; white-space:nowrap; transform:translateZ(0); backface-visibility:hidden; will-change:transform; }
.live-strip-item { display:inline-flex; align-items:center; gap:8px; padding:10px 24px; font-size:13.5px; border-right:1px solid #f0eded; }
.live-strip-item a { color:#111; font-weight:500; }
.live-strip-item a:hover { color:var(--accent); }
.live-strip-item::after { content:'◆'; margin-left:24px; color:#fca5a5; font-size:8px; }
.live-strip-label { color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; white-space:nowrap; flex-shrink:0; }
.live-strip-more { background:#fef2f2; color:var(--accent); padding:10px 14px; font-size:12px; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:4px; flex-shrink:0; border-left:1px solid #fca5a5; text-decoration:none; }
.live-strip-more:hover { background:var(--accent); color:#fff; }
/* live ticker keyframes removed — handled by JS rAF */
@keyframes liveDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }

/* ── LIVE TOPBAR / NAV ── */
.live-topbar-link { display:flex; align-items:center; gap:5px; color:#fff !important; background:var(--accent); padding:2px 10px; border-radius:3px; font-weight:700; }
.live-topbar-dot { width:7px; height:7px; background:#fff; border-radius:50%; animation:liveDotPulse 1.2s infinite; display:inline-block; flex-shrink:0; }
.nav-live-link { display:flex !important; align-items:center; gap:6px; font-weight:700 !important; }
.nav-live-dot { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:liveDotPulse 1.2s infinite; display:inline-block; flex-shrink:0; }

/* ── CONTACT / ABOUT ── */
.info-section { padding: 40px 0; }
.info-card { background: #fff; border-radius: 8px; padding: 30px; border: 1px solid #eee; }

/* ══════════════════════════════════════════════════════
   WHITE LIGHT THEME — ALL CONTENT AREAS
   ══════════════════════════════════════════════════════ */

/* Body & page background */
body, main, .homepage, .article-page, .category-page,
.search-page, .live-page, .info-section {
  background: #ffffff !important;
  color: #111111;
}

/* Every section block */
.section-block {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 28px;
  border: 1px solid #ebebeb;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Section header divider */
.section-header {
  border-bottom: 2px solid #ebebeb;
  margin-bottom: 18px;
  padding-bottom: 10px;
}
.section-title { color: #111; }
.section-title::before { background: #c0392b; }

/* Content layout (article + sidebar) */
.content-layout { gap: 28px; }
.content-main { background: #ffffff; }

/* Category section layout */
.cat-section-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.cat-main-story { margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.cat-main-story a.cat-main-img {
  display: block; border-radius: 6px; overflow: hidden;
  aspect-ratio: 16/9;
}
.cat-main-story a.cat-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.cat-main-story:hover a.cat-main-img img { transform: scale(1.03); }
.cat-main-story h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.6; color: #111; }
.cat-main-story h3 a:hover { color: #c0392b; }
.cat-main-story p  { font-size: 13px; color: #444; line-height: 1.6; }
.cat-main-story .card-meta { font-size: 11px; color: #666; display: flex; gap: 10px; }
.cat-main-story .card-meta i { color: #c0392b; }

.cat-side-stories { display: flex; flex-direction: column; gap: 0; }
.cat-side-item {
  display: flex; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid #f0f0f0; align-items: flex-start;
}
.cat-side-item:last-child { border-bottom: none; }
.cat-side-img {
  flex-shrink: 0; width: 80px; height: 60px;
  border-radius: 4px; overflow: hidden; display: block;
}
.cat-side-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.cat-side-item:hover .cat-side-img img { transform:scale(1.05); }
.cat-side-item h4 { font-size: 13px; font-weight: 600; line-height: 1.5; color: #111; margin-bottom: 4px; }
.cat-side-item h4 a:hover { color: #c0392b; }
.meta-time { font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; }
.meta-time i { color: #c0392b; font-size: 10px; }

/* News grid - white cards */
.news-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.news-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.news-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.news-card { background: #ffffff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.news-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }

/* Ad banners */
.ad-banner, .ad-widget {
  background: #f8f9fa;
  border: 2px dashed #ddd;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  margin: 16px 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero section background */
.hero-section, .hero-grid { background: #ffffff; }
.side-story { background: #ffffff; border: 1px solid #e8e8e8; }

/* Sidebar widgets all white */
.widget { background: #ffffff; border: 1px solid #e8e8e8; }
.popular-list li { background: #ffffff; }
.popular-list li:hover { background: #fff5f5; }
.cat-widget-list a { background: #ffffff; }
.cat-widget-list a:hover { background: #fff5f5; }

/* Author box */
.author-box { background: #f8f9fa; border: 1px solid #e8e8e8; }

/* Article content area */
.article-main { background: #ffffff; padding: 20px; border-radius: 8px; border: 1px solid #ebebeb; }
.article-content blockquote { background: #f8f9fa; border-left: 4px solid #c0392b; }

/* Live page */
.live-entry { background: #ffffff; border-bottom: 1px solid #f0f0f0; border-left: 4px solid transparent; }
.live-entry:hover { background: #fff5f5; border-left-color: #c0392b; }
.live-entry-new { background: #fff8f8 !important; }
.live-empty { background: #ffffff; border: 1px solid #eee; border-radius: 8px; }

/* Video cards */
.video-card { background: #ffffff; border: 1px solid #e8e8e8; }

/* Category index page */
.category-page main { background: #ffffff; }
.category-header { background: #ffffff; border: 1px solid #e8e8e8; }

/* Search page */
.search-page main { background: #ffffff; }

/* Contact / About */
.info-card { background: #ffffff; border: 1px solid #e8e8e8; }

/* Responsive */
@media (max-width: 768px) {
  .cat-section-layout { grid-template-columns: 1fr; }
  .news-grid-3 { grid-template-columns: repeat(2,1fr); }
  .news-grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .news-grid-3, .news-grid-4, .news-grid-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   STATIC LIVE BAR (Prothom Alo style — no animation)
   ══════════════════════════════════════════════ */
.static-live-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1.5px solid #e63946;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(230,57,70,.1);
}

.slive-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #e63946;
  color: #fff;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  letter-spacing: .3px;
}
.slive-dot {
  width: 9px; height: 9px;
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  /* Gentle pulse — not position-based, won't cause shake */
  animation: slivePulse 1.5s ease-in-out infinite;
}
@keyframes slivePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}

.slive-items {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 12px;
  gap: 8px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.slive-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
}
.slive-label {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.slive-bullet {
  color: #e63946;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.slive-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slive-item:hover .slive-title { color: #e63946; }

.slive-sep {
  color: #ddd;
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 2px;
}

.slive-more {
  background: #fef2f2;
  color: #e63946;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  border-left: 1px solid #fca5a5;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.slive-more:hover { background: #e63946; color: #fff; }

@media (max-width: 768px) {
  .slive-items { overflow-x: auto; }
  .slive-item:not(:first-child) { display: none; }
  .slive-sep { display: none; }
}

/* ══════════════════════════════════════════════
   LIVE FEATURE CARD — Prothom Alo article style
   ══════════════════════════════════════════════ */
.live-feature-wrap {
  position: relative;
  margin-bottom: 20px;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* Only active card visible */
.live-feature-card { display: none; }
.live-feature-card.live-card-active {
  display: block;
  animation: liveFadeIn .4s ease;
}
@keyframes liveFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.live-feature-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  min-height: 200px;
}

/* Image */
.live-feat-img-wrap {
  display: block;
  overflow: hidden;
  background: #f0f0f0;
}
.live-feat-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.live-feat-img-wrap:hover img { transform: scale(1.03); }
.live-feat-no-img {
  display: flex; align-items: center; justify-content: center;
  background: #fef2f2; min-height: 200px;
}
.live-feat-no-img i { font-size: 48px; color: #fca5a5; }

/* Body */
.live-feat-body { overflow-x: hidden; /* body */
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* Meta row: dot + label + bullet */
.live-feat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-feat-dot {
  width: 12px; height: 12px;
  background: #e63946;
  border-radius: 50%;
  flex-shrink: 0;
  animation: liveDotPulse2 1.4s ease-in-out infinite;
}
@keyframes liveDotPulse2 {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(1.3); }
}
.live-feat-label {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-serif);
  letter-spacing: .3px;
}
.live-feat-bullet {
  font-size: 20px;
  font-weight: 900;
  color: #333;
  line-height: 1;
}

/* Title — big serif like screenshot */
.live-feat-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.55;
  color: #111;
  text-decoration: none;
  display: block;
}
.live-feat-title:hover { color: #e63946; }

/* Excerpt */
.live-feat-excerpt {
  font-size: 14px;
  color: #444;
  line-height: 1.75;
  margin: 0;
}

/* More link */
.live-feat-more {
  font-size: 13px;
  font-weight: 700;
  color: #e63946;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.live-feat-more:hover { color: #922b21; }

/* Dot navigation */
.live-feat-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
}
.live-feat-dot-btn {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.live-feat-dot-btn.active {
  background: #e63946;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .live-feature-grid {
    grid-template-columns: 1fr;
  }
  .live-feat-img-wrap { min-height: 180px; }
  .live-feat-title { font-size: 1.15rem; }
}

/* ══════════════════════════════════════════════════
   4-COLUMN HERO SECTION
   col1 | col2(live-photo) | col3(live-text) | col4
   ══════════════════════════════════════════════════ */
.hero4-section { padding: 16px 0 0; }

.hero4-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  /* col1 | live(spans 2) | col4 */
  gap: 0;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 24px;
}

/* Side news columns */
.hero4-col {
  padding: 16px;
  border-right: 1px solid #eee;
}
.hero4-col-right { border-right: none; border-left: 1px solid #eee; }

.h4-news-item {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.h4-news-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.h4-cat {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  display: block; margin-bottom: 6px;
  text-decoration: none;
}
.h4-title {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 700;
  line-height: 1.6; color: #111;
  margin-bottom: 6px;
}
.h4-title a { color: #111; }
.h4-title a:hover { color: #e63946; }
.h4-excerpt { font-size: 12.5px; color: #555; line-height: 1.6; margin-bottom: 6px; }
.h4-time { font-size: 11px; color: #aaa; display: block; margin-bottom: 8px; }
.h4-thumb { display: block; border-radius: 4px; overflow: hidden; }
.h4-thumb img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; }

/* ── LIVE middle 2 columns ── */
.hero4-live {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.h4-live-card { display: none; grid-column: 1 / -1; }
.h4-live-card.h4-live-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: h4fadeIn .35s ease;
}
@keyframes h4fadeIn { from{opacity:0} to{opacity:1} }

/* Col 2: photo */
.h4-live-img-col {
  overflow: hidden;
  min-height: 240px;
  background: #f0f0f0;
}
.h4-live-img-col img,
.h4-live-img-col a {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.h4-live-no-img {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; background: #fef2f2;
}
.h4-live-no-img i { font-size: 48px; color: #fca5a5; }

/* Col 3: text */
.h4-live-text-col {
  padding: 20px 18px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 10px;
  border-left: 1px solid #eee;
}

/* 🔴 meta row */
.h4-live-meta {
  display: flex; align-items: center; gap: 8px;
}
.h4-live-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: #e63946; flex-shrink: 0;
  animation: h4dotPulse 1.3s ease-in-out infinite;
}
@keyframes h4dotPulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.3)}
}
.h4-live-label {
  font-size: 16px; font-weight: 800;
  font-family: var(--font-serif);
}
.h4-live-bull { font-size: 22px; font-weight: 900; color: #222; }

/* Big title */
.h4-live-title {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 800;
  line-height: 1.55; color: #111;
  text-decoration: none; display: block;
}
.h4-live-title:hover { color: #e63946; }

/* Excerpt */
.h4-live-excerpt {
  font-size: 14px; color: #444;
  line-height: 1.75; margin: 0;
}

/* Dot nav */
.h4-live-dots {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.h4-dot-btn {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: #ddd; cursor: pointer;
  padding: 0; transition: background .2s, transform .2s;
}
.h4-dot-btn.h4-dot-active { background: #e63946; transform: scale(1.3); }

/* Fallback */
.hero4-featured-fallback { overflow: hidden; }
.h4-feat-img { display: block; height: 240px; overflow: hidden; }
.h4-feat-img img { width:100%; height:100%; object-fit:cover; }

/* Responsive */
@media (max-width: 1024px) {
  .hero4-grid { grid-template-columns: 1fr 1.6fr; }
  .hero4-col-left { display: none; }
  .hero4-live { grid-template-columns: 1fr; }
  .h4-live-card.h4-live-active { grid-template-columns: 1fr; }
  .h4-live-img-col { min-height: 180px; }
}
@media (max-width: 640px) {
  .hero4-grid { grid-template-columns: 1fr; }
  .hero4-col-right { display: none; }
  .hero4-live { grid-column: 1; }
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE — Prothom Alo style
   ════════════════════════════════════════════════════════ */
.hp-main { background:#f5f5f5; padding-bottom:40px; }
.hp-main .container { width: 100%; box-sizing: border-box; /* .container */ max-width:1200px; }

/* ── Shared utils ── */
.hp-cat-tag { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; text-decoration:none; display:inline-block; margin-bottom:5px; }
.hp-time { font-size:11px; color:#aaa; display:inline-flex; align-items:center; gap:4px; margin-top:4px; }
.hp-time i { color:#e63946; font-size:10px; }
.hp-see-all { font-size:12px; font-weight:700; color:#e63946; text-decoration:none; display:flex; align-items:center; gap:3px; }
.hp-see-all:hover { color:#922b21; }

.hp-sec-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:8px; margin-bottom:14px; border-bottom:2px solid #e63946; }
.hp-sec-title { font-family:'Noto Serif Bengali',serif; font-size:1.05rem; font-weight:800; color:#111; display:flex; align-items:center; gap:7px; margin:0; }

.hp-section { background:#fff; border-radius:4px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); border:1px solid #eee; }

/* ── HERO 4-col ── */
.hp-hero { margin-bottom:14px; }
.hp-hero-grid { display:grid; grid-template-columns:220px 1fr 220px; background:#fff; border:1px solid #e5e5e5; border-radius:4px; overflow:hidden; }

.hp-col { padding:14px; }
.hp-col-side { border-right:1px solid #eee; }
.hp-col-side:last-child { border-right:none; border-left:1px solid #eee; }

.hp-side-item { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #f2f2f2; }
.hp-side-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.hp-side-title { font-family:'Noto Serif Bengali',serif; font-size:14px; font-weight:700; line-height:1.55; color:#111; margin:0 0 4px; }
.hp-side-title a:hover { color:#e63946; }
.hp-side-ex { font-size:12px; color:#666; line-height:1.6; margin:4px 0; }
.hp-side-img { display:block; margin-top:8px; border-radius:3px; overflow:hidden; }
.hp-side-img img { width:100%; height:70px; object-fit:cover; }

/* Live panel */
.hp-live-wrap { display:grid; grid-template-rows:1fr auto; position:relative; min-height:260px; }
.hp-live-card { display:none; grid-template-columns:1fr 1fr; min-height:260px; }
.hp-live-card.hp-live-on { display:grid; animation:hpFade .35s ease; }
@keyframes hpFade { from{opacity:0} to{opacity:1} }

.hp-live-photo { overflow:hidden; background:#f0f0f0; }
.hp-live-photo img, .hp-live-photo a { display:block; width:100%; height:100%; object-fit:cover; }
.hp-live-nophoto { display:flex; align-items:center; justify-content:center; min-height:260px; background:#fef2f2; }
.hp-live-nophoto i { font-size:40px; color:#fca5a5; }

.hp-live-text { padding:18px 16px; display:flex; flex-direction:column; gap:8px; justify-content:center; border-left:1px solid #eee; }
.hp-live-meta { display:flex; align-items:center; gap:7px; }
.hp-live-dot { width:11px; height:11px; border-radius:50%; background:#e63946; flex-shrink:0; animation:hpDotP 1.3s ease-in-out infinite; }
@keyframes hpDotP { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }
.hp-live-label { font-size:15px; font-weight:800; font-family:'Noto Serif Bengali',serif; }
.hp-live-bull { font-size:20px; font-weight:900; color:#222; }
.hp-live-title { font-family:'Noto Serif Bengali',serif; font-size:1.25rem; font-weight:800; line-height:1.55; color:#111; text-decoration:none; }
.hp-live-title:hover { color:#e63946; }
.hp-live-ex { font-size:13px; color:#555; line-height:1.75; margin:0; }
.hp-live-more { font-size:12px; font-weight:700; color:#e63946; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }

.hp-live-dots { display:flex; justify-content:center; gap:5px; padding:6px 0; grid-column:1/-1; }
.hp-ldot { width:7px; height:7px; border-radius:50%; border:none; background:#ddd; cursor:pointer; padding:0; transition:all .2s; }
.hp-ldot.hp-ldot-on { background:#e63946; transform:scale(1.3); }

/* ── VIDEO STRIP ── */
.hp-video-strip { position:relative; overflow:hidden; }
.hp-vs-track { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 0 8px; }
.hp-vs-track::-webkit-scrollbar { display:none; }
.hp-vs-card { flex:0 0 200px; scroll-snap-align:start; }
.hp-vs-thumb { display:block; aspect-ratio:16/9; border-radius:4px; overflow:hidden; position:relative; background:#111; }
.hp-vs-thumb img { width:100%; height:100%; object-fit:cover; transition:opacity .2s; }
.hp-vs-thumb:hover img { opacity:.85; }
.hp-vs-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; background:rgba(192,57,43,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hp-vs-play i { color:#fff; font-size:12px; margin-left:2px; }
.hp-vs-dur { position:absolute; bottom:4px; right:6px; background:rgba(0,0,0,.75); color:#fff; font-size:10px; font-weight:600; padding:1px 5px; border-radius:3px; }
.hp-vs-info { padding:6px 0 0; }
.hp-vs-title { font-size:12.5px; font-weight:600; line-height:1.5; color:#111; text-decoration:none; display:block; margin-top:3px; }
.hp-vs-title:hover { color:#e63946; }
.hp-vs-btn { position:absolute; top:50%; transform:translateY(-100%); background:rgba(255,255,255,.92); border:1px solid #ddd; border-radius:50%; width:30px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.hp-vs-prev { left:0; }
.hp-vs-next { right:0; }

/* ── MAIN CONTENT + SIDEBAR ── */
.hp-content-wrap { display:grid; grid-template-columns:1fr 280px; gap:14px; align-items:start; }

/* 3-col grid */
.hp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hp-card { background:#fff; border-radius:4px; overflow:hidden; border:1px solid #eee; }
.hp-card-img { display:block; aspect-ratio:16/9; overflow:hidden; }
.hp-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.hp-card:hover .hp-card-img img { transform:scale(1.04); }
.hp-card-body { overflow-x: hidden; /* body */ padding:10px; }
.hp-card-title { font-family:'Noto Serif Bengali',serif; font-size:14px; font-weight:700; line-height:1.55; color:#111; margin:4px 0; }
.hp-card-title a:hover { color:#e63946; }
.hp-card-ex { font-size:12px; color:#666; line-height:1.6; }

/* List-4 row */
.hp-list-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hp-list-item { display:flex; flex-direction:column; gap:6px; }
.hp-list-img { display:block; border-radius:3px; overflow:hidden; aspect-ratio:16/9; }
.hp-list-img img { width:100%; height:100%; object-fit:cover; }
.hp-list-title { font-size:13px; font-weight:600; line-height:1.5; color:#111; }
.hp-list-title:hover { color:#e63946; }

/* Category section */
.hp-cat-section { }
.hp-cat-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; }
.hp-cat-main-img { display:block; border-radius:4px; overflow:hidden; aspect-ratio:16/9; margin-bottom:10px; }
.hp-cat-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.hp-cat-main-img:hover img { transform:scale(1.03); }
.hp-cat-main-title { font-family:'Noto Serif Bengali',serif; font-size:1.05rem; font-weight:800; line-height:1.55; color:#111; margin-bottom:6px; }
.hp-cat-main-title a:hover { color:#e63946; }
.hp-cat-main-ex { font-size:13px; color:#555; line-height:1.7; margin-bottom:6px; }

.hp-cat-side { display:flex; flex-direction:column; gap:10px; }
.hp-cat-side-item { display:flex; gap:8px; align-items:flex-start; padding-bottom:10px; border-bottom:1px solid #f2f2f2; }
.hp-cat-side-item:last-child { border-bottom:none; padding-bottom:0; }
.hp-cat-side-img { flex-shrink:0; width:80px; height:56px; border-radius:3px; overflow:hidden; }
.hp-cat-side-img img { width:100%; height:100%; object-fit:cover; }
.hp-cat-side-body h4 { font-size:13px; font-weight:600; line-height:1.5; color:#111; margin:0 0 3px; }
.hp-cat-side-body h4 a:hover { color:#e63946; }

/* ── SIDEBAR ── */
.hp-sidebar { position:sticky; top:60px; }
.hp-widget { background:#fff; border:1px solid #eee; border-radius:4px; overflow:hidden; margin-bottom:14px; }
.hp-widget-title { padding:10px 14px; font-size:14px; font-weight:800; background:#e63946; color:#fff; }

.hp-popular { list-style:none; padding:8px 0; }
.hp-popular li { display:flex; align-items:flex-start; gap:10px; padding:8px 14px; border-bottom:1px solid #f5f5f5; }
.hp-popular li:last-child { border-bottom:none; }
.hp-pop-num { font-size:16px; font-weight:900; color:#e63946; min-width:22px; flex-shrink:0; line-height:1.4; }
.hp-popular a { font-size:13px; font-weight:500; color:#222; line-height:1.5; }
.hp-popular a:hover { color:#e63946; }

.hp-cat-list { list-style:none; padding:8px 0; }
.hp-cat-list li a { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; color:#333; border-bottom:1px solid #f5f5f5; }
.hp-cat-list li:last-child a { border-bottom:none; }
.hp-cat-list a:hover { color:#e63946; background:#fef2f2; }
.hp-cat-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

.hp-widget-news-item { display:flex; gap:8px; padding:8px 14px; border-bottom:1px solid #f5f5f5; align-items:flex-start; }
.hp-widget-news-item:last-child { border-bottom:none; }
.hp-wni-img { flex-shrink:0; width:60px; height:42px; border-radius:3px; overflow:hidden; }
.hp-wni-img img { width:100%; height:100%; object-fit:cover; }
.hp-wni-title { font-size:12px; font-weight:600; line-height:1.5; color:#222; display:block; margin-bottom:3px; }
.hp-wni-title:hover { color:#e63946; }

/* ════════════════
   RESPONSIVE
   ════════════════ */
@media (max-width:1100px) {
  .hp-hero-grid { grid-template-columns:180px 1fr 180px; }
}
@media (max-width:900px) {
  .hp-hero-grid { grid-template-columns:1fr; }
  .hp-col-side { display:none; }
  .hp-live-card { grid-template-columns:1fr; }
  .hp-live-card.hp-live-on { display:flex; flex-direction:column; }
  .hp-live-photo { min-height:200px; }
  .hp-content-wrap { grid-template-columns:1fr; }
  .hp-sidebar { display:none; }
  .hp-grid-3 { grid-template-columns:repeat(2,1fr); }
  .hp-list-4 { grid-template-columns:repeat(2,1fr); }
  .hp-cat-layout { grid-template-columns:1fr; }
  .hp-cat-side { display:none; }
}
@media (max-width:600px) {
  .hp-grid-3 { grid-template-columns:1fr; }
  .hp-list-4 { grid-template-columns:1fr; }
  .hp-vs-card { flex:0 0 160px; }
}

/* ══════════════════════════════════════════
   TEXT LOGO (Prothom Alo style)
   ══════════════════════════════════════════ */
.logo-text-link { text-decoration: none; display: block; }
.logo-text-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Text block */
.logo-text-block { display: flex; flex-direction: column; }
.logo-text-main {
  font-family: 'Noto Serif Bengali', serif;
  font-size: 2rem;
  font-weight: 900;
  color: #111;
  line-height: 1;
  letter-spacing: -1px;
}
.logo-text-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3.5px;
  color: #999;
  text-transform: uppercase;
  margin-top: 3px;
}
.logo-text-link:hover .logo-text-main { color: #e63946; }

/* Topbar social icons */
.topbar-social {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all .2s;
  text-decoration: none;
}
.topbar-social:hover { background: #e63946; color: #fff; }

/* Topbar admin login pill (sits beside social icons) */
.topbar-social.topbar-admin {
  width: auto;
  height: 26px;
  border-radius: 13px;
  padding: 0 10px;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 2px;
}
.topbar-social.topbar-admin:hover { background: #e63946; color: #fff; }

@media (max-width: 600px) {
  .logo-text-main { font-size: 1.4rem; }
}

/* ── WHITE LIGHT FOOTER ── */
.main-footer.main-footer-light {
  background: #f8f9fa;
  color: #333;
  border-top: 3px solid #e63946;
}
.main-footer.main-footer-light .footer-logo { color: #111; }
.main-footer.main-footer-light p { color: #555; }
.main-footer.main-footer-light h4 { color: #111; border-bottom-color: #e63946; }
.main-footer.main-footer-light ul li a { color: #555; }
.main-footer.main-footer-light ul li a:hover { color: #e63946; }
.main-footer.main-footer-light .contact-list li { color: #555; }
.main-footer.main-footer-light .footer-bottom {
  background: #f0f0f0;
  border-top: 1px solid #ddd;
  color: #777;
}
.main-footer.main-footer-light .footer-social a {
  background: #e0e0e0;
  color: #444;
}
.main-footer.main-footer-light .footer-social a:hover {
  background: #e63946;
  color: #fff;
}

/* ══════════════════════════════════════════════
   REUSABLE PB LOGO
   ══════════════════════════════════════════════ */
.pb-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}

.pb-logo-img { display: block; }


.pb-logo-text { display: flex; flex-direction: column; }
.pb-logo-main {
  font-family: 'Noto Serif Bengali', serif;
  font-size: 1.9rem; font-weight: 900; color: #111;
  line-height: 1; letter-spacing: -1px;
}
.pb-logo-sub {
  font-size: 9px; font-weight: 600;
  letter-spacing: 3.5px; color: #999;
  text-transform: uppercase; margin-top: 2px;
}
.pb-logo:hover .pb-logo-main { color: #e63946; }

/* Small variant for sidebar */

.pb-logo-small .pb-logo-main { font-size: 1.1rem; letter-spacing: -.5px; }
.pb-logo-small .pb-logo-sub  { display: none; }

@media (max-width:600px) {
  .pb-logo-main { font-size: 1.4rem; }
}

/* Footer white theme overrides */
.main-footer .footer-logo { color: #111 !important; font-family: 'Noto Serif Bengali',serif; font-weight: 800; font-size: 1.3rem; }
.main-footer .contact-list li { color: #555; }
.main-footer .contact-list i  { color: #e63946; }
.main-footer .footer-social a { background: #e5e7eb; color: #555; }
.main-footer .footer-social a:hover { background: #e63946; color: #fff; }
.main-footer .footer-bottom { background: #f1f3f5; }

/* Nav user state */
.nav-user-wrap { display:flex; align-items:center; gap:6px; }
.nav-user-name { font-size:13px; font-weight:600; color:#333; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.nav-user-name i { color:#e63946; font-size:16px; }
.nav-logout-btn { background:#fef2f2; color:#e63946; border:none; border-radius:6px; padding:6px 10px; cursor:pointer; font-size:13px; text-decoration:none; }
.nav-logout-btn:hover { background:#e63946; color:#fff; }

/* Footer logo white variant */
.main-footer .pb-logo-main { color: #111; }
.main-footer .pb-logo-sub  { color: #888; }
.main-footer .pb-logo:hover .pb-logo-main { color: #e63946; }

/* Comment fade in */
@keyframes fadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════════════════════
   EID GREETING BANNER
   ═══════════════════════════════════════════════════════════ */
.eid-banner {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #fff8e1, #fff3e0, #fce4ec, #fff8e1);
  background-size: 300% 300%;
  animation: eidBg 6s ease infinite;
  border-top: 2px solid #ffd54f;
  border-bottom: 2px solid #ffd54f;
  overflow: hidden;
  padding: 10px 0;
  z-index: 90;
}
@keyframes eidBg {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.eid-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 48px;
  padding: 0 40px;
}
.eid-text {
  font-family: 'Noto Serif Bengali', serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #b71c1c;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(183,28,28,.15);
  animation: eidFloat 3s ease-in-out infinite;
  z-index: 2;
  position: relative;
}
@keyframes eidFloat {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.eid-circle {
  position: absolute;
  border-radius: 50%;
  opacity: .18;
}
.eid-c1{width:80px;height:80px;background:#e91e63;top:-20px;left:3%}
.eid-c2{width:60px;height:60px;background:#ffc107;bottom:-15px;left:12%}
.eid-c3{width:70px;height:70px;background:#4caf50;top:-18px;right:12%}
.eid-c4{width:50px;height:50px;background:#2196f3;bottom:-10px;right:4%}
.eid-star {
  position: absolute;
  font-size: 16px;
  color: #ffc107;
  animation: eidTwinkle 2s ease-in-out infinite alternate;
}
@keyframes eidTwinkle{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}
.eid-heart {
  position: absolute;
  font-size: 14px;
  animation: eidPulse 2.5s ease-in-out infinite;
}
@keyframes eidPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.eid-moon {
  position: absolute;
  right: 8%;
  font-size: 2rem;
  color: #f39c12;
  animation: eidRock 4s ease-in-out infinite;
}
@keyframes eidRock{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
.eid-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(183,28,28,.1);
  border: 1px solid rgba(183,28,28,.2);
  border-radius: 50%;
  width: 22px;height: 22px;
  font-size: 11px;
  color: #b71c1c;
  cursor: pointer;
  display: flex;align-items:center;justify-content:center;
  line-height: 1;
}
.eid-close:hover{background:rgba(183,28,28,.2)}

/* ═══════════════════════════════════════════════════
   PROFESSIONAL FOOTER v2 (light, modern, brand-driven)
   ═══════════════════════════════════════════════════ */
.main-footer{margin-top:52px;background:linear-gradient(180deg,#ffffff 0%,#fbf7f5 45%,#f6eeeb 100%);color:#3d3d45;border-top:none;position:relative}
.main-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#c0392b,#ff7043,#c0392b)}
.main-footer.main-footer-light{background:linear-gradient(180deg,#ffffff 0%,#fbf7f5 45%,#f6eeeb 100%);color:#3d3d45;border-top:none}
.footer-top{padding:46px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.7fr 3.3fr;gap:36px}
.footer-logo-text{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-logo-name{font-family:var(--font-serif);font-size:1.35rem;font-weight:900;color:#18181b}
.footer-about p{font-size:13.5px;color:#6b7280;line-height:1.85;margin-bottom:18px;max-width:350px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:36px;height:36px;border-radius:12px;background:#fff;color:#6b7280;display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid #ece6e3;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:all .2s}
.footer-social a:hover{transform:translateY(-3px);color:#fff;background:#c0392b;border-color:#c0392b;box-shadow:0 8px 18px rgba(192,57,43,.32)}
.footer-col h4{font-size:14.5px;font-weight:800;color:#18181b;margin-bottom:16px;padding-bottom:10px;display:inline-block;position:relative}
.footer-col h4::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,#c0392b,#ff7043)}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:9px}
.footer-col ul a{font-size:13.5px;color:#5b5f6b;display:flex;align-items:center;gap:7px;transition:all .18s}
.footer-col ul a i{color:#c0392b;font-size:10px}
.footer-col ul a:hover{color:#c0392b;padding-left:5px}
.footer-col ul a:hover i{transform:translateX(3px)}
.contact-list li{display:flex;align-items:center;gap:10px;font-size:13px;color:#5b5f6b;margin-bottom:11px}
.contact-list i{color:#c0392b;width:18px;text-align:center;font-size:15px}
.contact-list a{color:#c0392b;font-weight:600}
.contact-list a:hover{text-decoration:underline;color:#96281b}
.footer-bottom{background:#f3ebe8;border-top:1px solid #e9dfdb;padding:16px 0}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-bottom-inner{flex-wrap:wrap}
.footer-copyright{font-size:13.5px;color:#7a5f5a;font-weight:700}
.footer-copyright span{color:#c0392b}
.footer-bottom-links{display:flex;gap:18px}
.footer-bottom-links a{font-size:12.5px;color:#8a746e;display:flex;align-items:center;gap:5px}
.footer-bottom-links a:hover{color:#c0392b}
.footer-version{font-size:11px;letter-spacing:1px;color:#a8928c}
/* beat the old light-footer + white-theme overrides */
.main-footer.main-footer-light p{color:#6b7280}
.main-footer.main-footer-light h4{color:#18181b;border-bottom-color:transparent}
.main-footer.main-footer-light h4::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,#c0392b,#ff7043)}
.main-footer.main-footer-light ul li a{color:#5b5f6b}
.main-footer.main-footer-light ul li a:hover{color:#c0392b}
.main-footer.main-footer-light .contact-list li{color:#5b5f6b}
.main-footer.main-footer-light .footer-bottom{background:#f3ebe8;border-top-color:#e9dfdb}
.main-footer.main-footer-light .footer-social a{background:#fff;color:#6b7280;border:1px solid #ece6e3}
.main-footer.main-footer-light .footer-social a:hover{background:#c0392b;color:#fff}
.main-footer .footer-logo{color:#18181b !important}
.main-footer .contact-list i{color:#c0392b}
.main-footer .pb-logo-main{color:#18181b}
.main-footer .pb-logo-sub{color:#9ca3af}


/* -- FOOTER � CONTACT STRIP (single row, never wraps) -- */
.main-footer .contact-strip{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;background:#faf7f5;border:1px solid #eee6e2;border-radius:10px;padding:4px 2px}
.main-footer .contact-strip::-webkit-scrollbar{display:none}
.main-footer .contact-strip .cs-item{display:inline-flex;align-items:center;gap:7px;color:#5b5f6b;font-size:12px;font-weight:600;text-decoration:none;padding:7px 12px;border-right:1px solid #ebe3df;white-space:nowrap;flex-shrink:0}
.main-footer .contact-strip .cs-item:first-child{padding-left:12px}
.main-footer .contact-strip .cs-item:last-child{border-right:none}
.main-footer .contact-strip .cs-item i{color:#c0392b;font-size:12.5px}
.main-footer .contact-strip .cs-item:hover{color:#c0392b}
.main-footer .contact-strip .cs-item:hover i{transform:scale(1.1)}
@media(max-width:640px){.main-footer .contact-strip .cs-item{font-size:11px;padding:6px 9px;gap:5px}}

/* -- FOOTER � CONTACT + QUICK LINKS IN ONE SMART ROW -- */
.main-footer .footer-col-contact{display:grid;grid-template-columns:1.05fr 1fr;gap:12px;align-items:stretch;min-width:0}
.main-footer .footer-col-contact .f-cell{min-width:0}
.main-footer .footer-col-contact .f-cell{background:linear-gradient(170deg,#ffffff 0%,#faf6f4 100%);border:1px solid #eee7e3;border-radius:16px;padding:16px 18px;box-shadow:0 4px 16px rgba(0,0,0,.05);display:flex;flex-direction:column}
.main-footer .footer-col-contact .f-cell:hover{border-color:#e0cfc8;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.main-footer .footer-col-contact h4{display:flex;align-items:center;gap:8px;font-size:13px;text-transform:uppercase;letter-spacing:.7px;margin-top:0}
.main-footer .footer-col-contact h4 i{color:#c0392b;font-size:14px}
.main-footer .footer-col-contact ul{margin:0}
.main-footer .footer-col-contact ul li:last-child{margin-bottom:0}
.main-footer .footer-col-contact .contact-strip{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;gap:0;margin-top:auto;min-width:0}
.main-footer .footer-col-contact .contact-strip::-webkit-scrollbar{display:none}
.main-footer .footer-col-contact .cs-item{display:inline-flex;align-items:center;gap:7px;color:#5b5f6b;font-size:12px;font-weight:600;text-decoration:none;padding:7px 11px;border-right:1px solid #ebe3df;white-space:nowrap;flex-shrink:0}
.main-footer .footer-col-contact .cs-item:first-child{padding-left:0}
.main-footer .footer-col-contact .cs-item:last-child{border-right:none}
.main-footer .footer-col-contact .cs-item i{color:#c0392b;font-size:12.5px}
.main-footer .footer-col-contact .cs-item:hover{color:#c0392b}
@media(max-width:640px){.main-footer .footer-col-contact{gap:10px}}
@media(max-width:640px){.main-footer .footer-col-contact .cs-item{font-size:11px;padding:6px 9px;gap:5px}}

/* -- FOOTER � FOUR GROUPS ALWAYS IN ONE ROW -- */
.main-footer .footer-groups{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.main-footer .footer-groups::-webkit-scrollbar{display:none}
.main-footer .footer-groups .fg{min-width:0}
.main-footer .footer-groups h4{display:flex;align-items:center;gap:8px;font-size:13px;text-transform:uppercase;letter-spacing:.7px}
.main-footer .footer-groups h4 i{color:#c0392b;font-size:14px}
.main-footer .footer-groups ul{margin:0}
.main-footer .footer-groups .fg.f-cell{background:linear-gradient(170deg,#ffffff 0%,#faf6f4 100%);border:1px solid #eee7e3;border-radius:16px;padding:16px 18px;box-shadow:0 4px 16px rgba(0,0,0,.05);display:flex;flex-direction:column;min-width:0}
.main-footer .footer-groups .fg.f-cell:hover{border-color:#e0cfc8;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.main-footer .footer-groups .fg.f-cell .contact-strip{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;gap:0;margin-top:auto;min-width:0}
.main-footer .footer-groups .fg.f-cell .contact-strip::-webkit-scrollbar{display:none}
.main-footer .footer-groups .cs-item{display:inline-flex;align-items:center;gap:7px;color:#5b5f6b;font-size:12px;font-weight:600;text-decoration:none;padding:7px 11px;border-right:1px solid #ebe3df;white-space:nowrap;flex-shrink:0}
.main-footer .footer-groups .cs-item:first-child{padding-left:0}
.main-footer .footer-groups .cs-item:last-child{border-right:none}
.main-footer .footer-groups .cs-item i{color:#c0392b;font-size:12.5px}
.main-footer .footer-groups .cs-item:hover{color:#c0392b}
.main-footer .footer-groups h4{margin-top:0}
.main-footer .footer-groups .fg.f-cell h4{margin-bottom:12px}
@media(max-width:640px){.main-footer .footer-groups .cs-item{font-size:11px;padding:6px 9px;gap:5px}}