/* ==========================================================================
   Malayalam Christian News Portal - Typography & Theme System
   Font: Noto Sans Malayalam & Noto Serif Malayalam
   ========================================================================== */


:root {
  --font-ml-sans: 'Noto Sans Malayalam', 'Manjari', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ml-serif: 'Noto Serif Malayalam', Georgia, serif;
  --font-en: 'Outfit', sans-serif;

  /* Disciples News Logo Authentic Palette (#1171b4) */
  --c-primary: #1171b4;
  --c-primary-dark: #0b4e7d;
  --c-primary-light: #1987d1;
  --c-primary-accent: #00a9e0;
  --c-primary-subtle: #e8f4fc;
  --c-primary-rgb: 17, 113, 180;
  --c-gold: #c59b27;
  --c-gold-light: #f7e7b4;
  --c-navy: #0a192f;
  --c-dark: #1b263b;
  --c-slate: #f4f6f9;
  --c-border: #e2e8f0;
  --c-text: #2d3748;
  --c-text-muted: #718096;

  /* Global Helix Template Theme Colors matching Logo Blue */
  --primary_color: #1171b4 !important;
  --primary_color_rgb: 17, 113, 180 !important;
  --link_hover_color: #1171b4 !important;
  --menu_text_hover_color: #1171b4 !important;
  --menu_text_active_color: #1171b4 !important;
  --menu_dropdown_text_hover_color: #1171b4 !important;
  --menu_dropdown_text_active_color: #1171b4 !important;
  --logo_text_color: #1171b4 !important;
  --offcanvas_menu_icon_color: #1171b4 !important;
  --offcanvas_menu_active_menu_item_color: #1171b4 !important;

  /* Template Variables (Consolidated) */
  --sppb-topbar-bg-color: #212529;
  --sppb-topbar-text-color: #EBF3FB;
  --sppb-header-bg-color: #FFFFFF;
  --sppb-logo-text-color: #1171b4;
  --sppb-menu-text-color: #121212;
  --sppb-menu-text-hover-color: #1171b4;
  --sppb-menu-text-active-color: #1171b4;
  --sppb-menu-dropdown-bg-color: #FFFFFF;
  --sppb-menu-dropdown-text-color: #252525;
  --sppb-menu-dropdown-text-hover-color: #1171b4;
  --sppb-menu-dropdown-text-active-color: #1171b4;
  --sppb-text-color: #454545;
  --sppb-bg-color: #FFFFFF;
  --sppb-link-color: #121212;
  --sppb-link-hover-color: #1171b4;
  --sppb-footer-bg-color: #0f172a;
  --sppb-footer-text-color: #ABB1B7;
  --sppb-footer-link-color: #FFFFFF;
  --sppb-footer-link-hover-color: #00a9e0;
}

/* BASE TYPOGRAPHY */
body {
  font-family: var(--font-ml-sans);
  color: var(--c-text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  background: #f4f6f9;
}

h1, h2, h3, h4, h5, h6,
.article-title,
.sp-module-title,
.sppb-addon-title {
  font-family: var(--font-ml-serif) !important;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: none !important;
}

/* LINE CLAMP UTILITIES WITH PROPER MALAYALAM LINE-HEIGHT */
.line-clamp-1 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
}
.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.55 !important;
}
.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.55 !important;
}

/* TOP BAR */
#sp-top-bar {
  background: #111827 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.88rem;
  padding: 6px 0;
}
#sp-top-bar a { color: #d1d5db; text-decoration: none; transition: color 0.2s ease; }
#sp-top-bar a:hover { color: var(--c-gold); }
#sp-top-bar .social-icons a,
#sp-top-bar .social-icons a span,
#sp-top-bar .social-icons a i {
  color: #ffffff !important;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
#sp-top-bar .social-icons a:hover,
#sp-top-bar .social-icons a:hover span,
#sp-top-bar .social-icons a:hover i {
  color: var(--c-gold) !important;
  opacity: 0.85;
}
.ut-news-date { color: #9ca3af; display: flex; align-items: center; gap: 6px; }

/* HEADER TOPBAR */
#sp-header-topbar { background: #ffffff; padding: 16px 0; border-bottom: 1px solid #edf2f7; }
.portal-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.portal-logo-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 4px 12px rgba(17,113,180,0.25);
}
.portal-logo-img {
  max-height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.portal-logo-img:hover {
  transform: scale(1.02);
}
.portal-brand-text h1 { font-size: 1.95rem; color: var(--c-primary); margin: 0; line-height: 1.1; font-weight: 800; }
.portal-brand-text span { font-size: 0.82rem; color: var(--c-text-muted); font-family: var(--font-ml-sans); display: block; margin-top: 3px; }
.logo-image { height: 42px; }

/* BREAKING TICKER */
.breaking-news-bar { background: #ffffff; border-bottom: 1px solid #e5e7eb; padding: 6px 0; display: flex; align-items: center; overflow: hidden; }
.breaking-label {
  background: var(--c-primary); color: #ffffff; font-weight: 700; font-size: 0.82rem;
  padding: 4px 12px; border-radius: 4px; white-space: nowrap; display: inline-flex;
  align-items: center; gap: 6px; margin-right: 14px; flex-shrink: 0;
}
.breaking-label::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background: #ff4d4d; border-radius: 50%; animation: pulse-dot 1.4s infinite;
}
@keyframes pulse-dot {
  0%   { transform: scale(0.95); opacity: 0.8; }
  50%  { transform: scale(1.3);  opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.breaking-ticker-wrap { flex: 1; overflow: hidden; position: relative; height: 24px; }
.breaking-ticker-items { display: flex; gap: 30px; white-space: nowrap; animation: marquee 35s linear infinite; }
.breaking-ticker-wrap:hover .breaking-ticker-items { animation-play-state: paused; }
.breaking-ticker-items a { color: var(--c-navy); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.breaking-ticker-items a:hover { color: var(--c-primary); }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

/* DAILY VERSE */
.daily-verse-card {
  background: linear-gradient(135deg, #fdfbf7 0%, #f7f1e5 100%);
  border: 1px solid #ebd9b5; border-left: 5px solid var(--c-gold); border-radius: 8px;
  padding: 14px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 16px;
  box-shadow: 0 2px 8px rgba(197,155,39,0.08);
}
.daily-verse-icon { font-size: 28px; color: var(--c-gold); flex-shrink: 0; }
.daily-verse-content { font-size: 1.02rem; font-family: var(--font-ml-serif); color: #4a3811; line-height: 1.6; }
.daily-verse-ref { font-size: 0.85rem; font-weight: 700; color: var(--c-primary); margin-top: 3px; }

/* NAVBAR & MENU SYSTEM */
#sp-header {
  height: 60px !important;
  background: #ffffff !important;
  border-bottom: 2px solid var(--c-primary) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  position: relative;
  z-index: 1050;
}
@media (min-width: 992px) {
#sp-header .container, #sp-header .container-inner { height: 100%; }
#sp-header .container-inner > .row { height: 100% !important; position: relative !important; flex-wrap: nowrap !important; }
#sp-menu { position: static !important; height: 100%; display: flex !important; align-items: center !important; }
#sp-menu .sp-column { height: 100%; width: 100%; }
.sp-megamenu-wrapper { position: static !important; height: 100%; display: flex !important; align-items: center !important; }
.sp-megamenu-parent {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  list-style: none !important;
}
.sp-megamenu-parent > li {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sp-megamenu-parent > li > a {
  font-family: var(--font-ml-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 12px !important;
  line-height: 60px !important;
  color: #1f2937 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  position: relative;
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
  color: var(--c-primary) !important;
  font-weight: 700 !important;
}
body.ltr .sp-megamenu-parent > li.sp-has-child > a:after {
  font-size: 0.68rem !important;
  margin-left: 6px !important;
  opacity: 0.7;
}

/* ==========================================================================
   DROPDOWN & MEGA MENU SYSTEM
   ========================================================================== */
#sp-header {
  position: relative !important;
  z-index: 1050 !important;
}

.sp-megamenu-parent > li.sp-has-child {
  position: static !important;
}
.sp-megamenu-parent > li:last-child,
.sp-megamenu-parent > li.sp-nav-more {
  position: relative !important;
}

/* Adaptive Greedy Navigation rules */
.sp-megamenu-parent > li.sp-nav-hidden {
  display: none !important;
}
.sp-megamenu-parent > li.sp-nav-more {
  display: inline-flex !important;
}
.sp-megamenu-parent > li.sp-nav-more.d-none {
  display: none !important;
}
.sp-megamenu-parent > li.sp-nav-more > a {
  cursor: pointer;
  user-select: none;
}
.sp-megamenu-parent > li.sp-nav-more:hover > .sp-dropdown,
.sp-megamenu-parent > li.sp-nav-more.open > .sp-dropdown {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.sp-nav-more-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sp-nav-more-list > li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.sp-nav-more-list > li:last-child {
  border-bottom: none !important;
}
.sp-nav-more-list > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  font-family: var(--font-ml-sans) !important;
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
  line-height: 1.4 !important;
}
.sp-nav-more-list > li > a:hover {
  background: #fef2f2 !important;
  color: var(--c-primary) !important;
  padding-left: 20px !important;
}
.sp-nav-more-list > li.active > a {
  background: #fff1f2 !important;
  color: var(--c-primary) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--c-primary) !important;
}

.sp-megamenu-parent .sp-dropdown {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  transform: translateY(6px);
}
.sp-megamenu-parent > li.sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent > li.sp-has-child:focus-within > .sp-dropdown,
.sp-megamenu-parent > li.sp-has-child.open > .sp-dropdown,
.sp-megamenu-parent > li.sp-has-child.active-dropdown > .sp-dropdown,
.sp-megamenu-parent .sp-dropdown[style*="display: block"],
.sp-megamenu-parent .sp-dropdown.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* 1. Mega Dropdown Menu */
.sp-megamenu-parent .sp-dropdown.sp-dropdown-mega.sp-menu-full {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.14) !important;
  border-radius: 0 0 12px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid var(--c-primary) !important;
  z-index: 1050 !important;
  padding: 0 !important;
}
.sp-megamenu-parent .sp-dropdown.sp-dropdown-mega .sp-dropdown-inner {
  padding: 22px 24px !important;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px !important;
}
.sp-megamenu-parent .sp-mega-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sp-megamenu-parent .sp-mega-group li.item-header {
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 3px !important;
}
.sp-megamenu-parent .sp-mega-group li.item-header a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.18s ease !important;
  line-height: 1.4 !important;
}
.sp-megamenu-parent .sp-mega-group li.item-header a:hover {
  background: #e8f4fc !important;
  color: var(--c-primary) !important;
  padding-left: 15px !important;
}

/* Mega Dropdown Articles Cards */
.sp-dropdown-mega .article.main-article {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.sp-dropdown-mega .article.main-article:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  border-color: #fce7eb !important;
}
.sp-dropdown-mega .article-intro-image img {
  border-radius: 6px !important;
  height: 105px !important;
  width: 100% !important;
  object-fit: cover !important;
}
.sp-dropdown-mega .article-title {
  font-size: 0.86rem !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  margin-top: 6px !important;
  text-decoration: none !important;
  font-family: var(--font-ml-serif) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.sp-dropdown-mega .article-title:hover {
  color: var(--c-primary) !important;
}

/* 2. Standard Dropdown Menu (Pages) */
.sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  min-width: 295px !important;
  width: max-content !important;
  max-width: 400px !important;
  border-radius: 0 0 10px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid var(--c-primary) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.13) !important;
  background: #ffffff !important;
  padding: 8px 0 !important;
  z-index: 1050 !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-inner {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items > li {
  position: relative !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items > li:last-child {
  border-bottom: none !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 20px !important;
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
  white-space: nowrap !important;
  line-height: 1.45 !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items > li > a:hover {
  background: #e8f4fc !important;
  color: var(--c-primary) !important;
  padding-left: 23px !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items > li > a i.me-2 {
  width: 20px !important;
  text-align: center !important;
  font-size: 0.88rem !important;
  flex-shrink: 0 !important;
}

/* 3. Nested Submenu inside Standard Dropdown */
.sp-dropdown.sp-menu-right .sp-dropdown-items > li.sp-has-child > .sp-dropdown-sub {
  display: none;
  position: absolute !important;
  right: 100% !important;
  left: auto !important;
  top: -8px !important;
  min-width: 250px !important;
  width: max-content !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid var(--c-primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 35px rgba(0,0,0,0.12) !important;
  padding: 6px 0 !important;
  z-index: 1060 !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-items > li.sp-has-child:hover > .sp-dropdown-sub,
.sp-dropdown.sp-menu-right .sp-dropdown-items > li.sp-has-child:focus-within > .sp-dropdown-sub,
.sp-dropdown.sp-menu-right .sp-dropdown-items > li.sp-has-child > .sp-dropdown-sub[style*="display: block"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.sp-dropdown.sp-menu-right .sp-dropdown-sub .sp-dropdown-items > li > a {
  padding: 10px 20px !important;
  font-size: 0.88rem !important;
}
} /* End @media (min-width: 992px) */

/* Header modules (Search, User, DarkMode) */
.header-modules {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}
.header-modules .sp-module { margin: 0 !important; }
.mod-finder-overlay a, #modeToggler, .sp-sign-in {
  color: #4b5563 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  transition: color 0.15s ease !important;
}
.mod-finder-overlay a:hover, #modeToggler:hover, .sp-sign-in:hover {
  color: var(--c-primary) !important;
}
@media (max-width: 1280px) and (min-width: 992px) {
  .sp-megamenu-parent > li > a { padding: 0 10px !important; font-size: 15px !important; font-weight: 700 !important; }
}

/* ==========================================================================
   MOBILE HEADER & OFFCANVAS SYSTEM (< 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* 1. Hide desktop mega menu on mobile */
  .sp-megamenu-wrapper,
  .sp-megamenu-parent {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 2. Prevent topbars from breaking mobile viewport */
  #sp-header-topbar {
    display: none !important;
  }
  #sp-top-bar {
    display: none !important;
  }

  /* 3. Sticky Compact Mobile Header */
  #sp-header {
    height: 58px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  }
  #sp-header .container,
  #sp-header .container-inner,
  #sp-header .container-inner > .row {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 12px !important;
    width: 100% !important;
  }
  #sp-header #sp-logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    max-width: 58% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #sp-header #sp-logo img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  #sp-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #sp-menu .sp-column {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-modules {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-modules .sp-module {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .header-modules .mod-finder-overlay a,
  .header-modules #modeToggler {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
  }
  .header-modules .sp-sign-in {
    display: none !important;
  }

  /* 4. Hamburger Toggler Button */
  #offcanvas-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #1171b4 !important;
    color: #ffffff !important;
    border: none !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(17, 113, 180, 0.25) !important;
    transition: all 0.2s ease !important;
  }
  #offcanvas-toggler:hover,
  #offcanvas-toggler:active {
    background: #0d5a91 !important;
    transform: scale(0.96);
  }
  #offcanvas-toggler .burger-icon {
    width: 18px !important;
    height: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #offcanvas-toggler .burger-icon span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
  }

  /* 5. Breaking News Bar on Mobile */
  .breaking-news-bar {
    padding: 6px 0 !important;
    overflow: hidden !important;
  }
  .breaking-label {
    font-size: 0.78rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   OFFCANVAS DRAWER & BACKDROP SYSTEM (Universal)
   ========================================================================== */
.offcanvas-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
body.offcanvas-active .offcanvas-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}
body.offcanvas-active {
  overflow: hidden !important;
}

.offcanvas-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 320px !important;
  max-width: 86vw !important;
  background: #ffffff !important;
  z-index: 99999 !important;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(105%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.offcanvas-active .offcanvas-menu {
  transform: translateX(0%) !important;
}

/* Offcanvas Header */
.offcanvas-menu .offcanvas-header {
  padding: 16px 20px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
.offcanvas-menu .close-offcanvas {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.offcanvas-menu .close-offcanvas:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Offcanvas Menu Items */
.offcanvas-inner {
  padding: 16px 20px !important;
  flex: 1 !important;
}
.offcanvas-inner .header-modules {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 16px !important;
  gap: 10px !important;
  width: 100% !important;
}
.offcanvas-inner .header-modules .sp-module {
  margin: 0 !important;
}
.offcanvas-inner .header-modules .sp-sign-in {
  display: inline-flex !important;
  height: 38px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}
.offcanvas-inner .header-modules .form-control {
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}

.offcanvas-inner ul.menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.offcanvas-inner ul.menu > li {
  border-bottom: 1px solid #f1f5f9 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.offcanvas-inner ul.menu > li > a,
.offcanvas-inner .nav-item-wrapper > a {
  font-family: var(--font-ml-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.offcanvas-inner ul.menu > li span,
.offcanvas-inner .nav-item-wrapper span {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.offcanvas-inner ul.menu > li > a:hover,
.offcanvas-inner .nav-item-wrapper > a:hover,
.offcanvas-inner ul.menu > li:hover span,
.offcanvas-inner .nav-item-wrapper:hover span {
  color: #1171b4 !important;
}
.offcanvas-inner .menu-toggler-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background 0.15s ease !important;
  background: #f1f5f9 !important;
  border: none !important;
  color: #475569 !important;
}
.offcanvas-inner .menu-toggler-btn:hover {
  background: #e2e8f0 !important;
  color: #1171b4 !important;
}
.offcanvas-inner li.menu-parent-open .menu-toggler-btn {
  transform: rotate(180deg) !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
}
.offcanvas-inner ul.menu-child {
  list-style: none !important;
  margin: 6px 0 12px 4px !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border-left: 3px solid #1171b4 !important;
}
.offcanvas-inner ul.menu-child li {
  margin: 0 !important;
  padding: 0 !important;
}
.offcanvas-inner ul.menu-child li a {
  font-family: var(--font-ml-sans) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  padding: 8px 0 !important;
  display: block !important;
  text-decoration: none !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  transition: all 0.15s ease !important;
}
.offcanvas-inner ul.menu-child li:last-child a {
  border-bottom: none !important;
}
.offcanvas-inner ul.menu-child li a:hover {
  color: #1171b4 !important;
  padding-left: 4px !important;
}

/* ==========================================================================
   SECTION TITLE SYSTEM
   ========================================================================== */
.sppb-addon-module .sppb-addon-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  margin: 0 0 18px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #e5e7eb !important;
  position: relative !important;
  display: block !important;
}
.sppb-addon-module .sppb-addon-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.sppb-addon-module .sppb-addon-title a:hover {
  color: var(--c-primary) !important;
}
.sppb-addon-module .sppb-addon-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  height: 3px !important;
  width: 60px !important;
  border-radius: 2px !important;
  background: var(--c-primary) !important;
}
.sppb-addon-module.color-1 .sppb-addon-title::after { background: var(--c-primary) !important; }
.sppb-addon-module.color-2 .sppb-addon-title::after { background: #1d6fa4 !important; }
.sppb-addon-module.color-3 .sppb-addon-title::after { background: #c02020 !important; }
.sppb-addon-module.color-4 .sppb-addon-title::after { background: #1a7a4a !important; }
.sppb-addon-module.color-5 .sppb-addon-title::after { background: #e07c20 !important; }
.sppb-addon-module.color-6 .sppb-addon-title::after { background: #6b3fa0 !important; }
.sppb-addon-module.color-7 .sppb-addon-title::after { background: #2c7a4b !important; }
.sppb-addon-module.color-8 .sppb-addon-title::after { background: #1d5fa4 !important; }
#section-id-1721834712334 .sppb-addon-title {
  color: #1a1a2e !important;
  border-bottom: 2px solid #e5e7eb !important;
}
#section-id-1721834712334 .sppb-addon-title::after { background: var(--c-primary) !important; }
.sppb-addon-header .sppb-addon-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  border-bottom: 2px solid #e5e7eb !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
.sppb-addon-header .sppb-addon-title::after { width: 40px !important; }

/* SPPB GRID & SECTION LAYOUT */
@media (min-width: 1400px) { .sppb-row-container { max-width: 1320px; } }
#article-list-233 { --ut-ap-gutter-x: 10px; --ut-ap-gutter-y: 10px; }

.sppb-section { padding-top: 30px; padding-bottom: 30px; }
.sppb-row-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.sppb-row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.sppb-row-column { padding: 0 12px; box-sizing: border-box; }

/* ==========================================================================
   SECTION SPECIFIC LAYOUT & PADDING HARMONY
   ========================================================================== */
.sp-page-builder .page-content #section-id-1721834712327 {
  padding-top: 26px;
  padding-bottom: 22px;
  margin: 0;
  background: #ffffff;
}
#column-wrap-id-1721834712326 { max-width: 100%; flex-basis: 100%; }

.sp-page-builder .page-content #section-id-1721834712330 {
  padding-top: 24px;
  padding-bottom: 28px;
  margin: 0;
  background: #ffffff;
}
#column-wrap-id-1721834712328 { max-width: 66.666667%; flex-basis: 66.666667%; }
@media (max-width: 991.98px) { #column-wrap-id-1721834712328 { max-width: 100%; flex-basis: 100%; } }

#column-wrap-id-1721834712329 { max-width: 33.333333%; flex-basis: 33.333333%; }
@media (max-width: 991.98px) { #column-wrap-id-1721834712329 { max-width: 100%; flex-basis: 100%; margin-top: 28px; } }

.sp-page-builder .page-content #section-id-1721834712332 {
  padding-top: 32px;
  padding-bottom: 36px;
  margin: 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
#column-wrap-id-1721834712331 { max-width: 100%; flex-basis: 100%; }

.sp-page-builder .page-content #section-id-1721834712334 {
  background-color: #f8fafc !important;
  padding-top: 28px;
  padding-bottom: 28px;
  margin: 0;
  color: inherit;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}
#column-wrap-id-1721834712333 { max-width: 100%; flex-basis: 100%; }

.sp-page-builder .page-content #section-id-1721871928559 {
  padding-top: 32px;
  padding-bottom: 32px;
  margin: 0;
  background: #ffffff;
}
#column-wrap-id-1721871928558 { max-width: 100%; flex-basis: 100%; }

.sp-page-builder .page-content #section-id-1721883758927 {
  padding-top: 32px;
  padding-bottom: 42px;
  margin: 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
#column-wrap-id-1721883758923, #column-wrap-id-1721883758924,
#column-wrap-id-1721883758925, #column-wrap-id-1721883758926 { max-width: 25%; flex-basis: 25%; }
@media (max-width: 991.98px) {
  #column-wrap-id-1721883758923, #column-wrap-id-1721883758924,
  #column-wrap-id-1721883758925, #column-wrap-id-1721883758926 { max-width: 50%; flex-basis: 50%; }
}
@media (max-width: 575.98px) {
  #column-wrap-id-1721883758923, #column-wrap-id-1721883758924,
  #column-wrap-id-1721883758925, #column-wrap-id-1721883758926 { max-width: 100%; flex-basis: 100%; }
}

/* ==========================================================================
   ARTICLE CARDS ARCHITECTURE & PADDING FIXES
   ========================================================================== */
.article.main-article, .article.secondary-article {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article.main-article:hover, .article.secondary-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.article-intro-image {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-intro-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.article-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  display: block;
  position: relative;
  z-index: 2;
}
.article:hover .article-intro-image img {
  transform: scale(1.02);
}

/* Overlapped Gradient Image Cards */
.article-intro-image.overlaped {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-intro-image.overlaped a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.article-intro-image.overlaped img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
}
.article-intro-image.overlaped::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.88) 100%);
  z-index: 3;
  border-radius: 10px;
  pointer-events: none;
}
.article-intro-image.overlaped .article-header {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 4 !important;
  padding: 16px 18px !important;
}

/* Ambient Backdrop for contained card images across homepage */
.article-ambient-backdrop {
  position: absolute;
  inset: -25px;
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(0.38);
  opacity: 0.88;
  transform: scale(1.15);
  pointer-events: none;
  z-index: 1;
}
.article-intro-image.overlaped .article-header .article-info { margin: 0 0 6px 0 !important; }
.article-intro-image.overlaped .article-header h3 { margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; }
.article-intro-image.overlaped .article-header .article-title {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  line-height: 1.4 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;
  text-decoration: none !important;
}
.article-intro-image.overlaped .article-header .article-title:hover { color: #ffe4e8 !important; }
.article-intro-image.overlaped .category-name a {
  background: var(--c-primary);
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}
.article-intro-image.overlaped .published { color: rgba(255,255,255,0.85) !important; font-size: 0.78rem !important; }

/* Section 1 Hero Specific Card Sizes & Paddings */
.hero-featured-swiper-wrap {
  position: relative;
  width: 100%;
}
.hero-featured-swiper {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.hero-featured-swiper .swiper-slide {
  width: 100%;
  height: auto;
}
.hero-featured-swiper .swiper-slide .article-column {
  padding: 0 !important;
}
.hero-featured-swiper .swiper-slide .article.main-article {
  margin: 0 !important;
}
.hero-featured-swiper .swiper-slide .row {
  margin: 0 !important;
}
.hero-featured-swiper .swiper-slide .article-media {
  padding: 0 !important;
  position: relative;
}

/* Arrow Navigation */
.hero-featured-swiper .swiper-button-prev,
.hero-featured-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  color: #ffffff;
  border-radius: 50%;
  transition: all 0.25s ease;
  opacity: 0;
  z-index: 10;
}
.hero-featured-swiper:hover .swiper-button-prev,
.hero-featured-swiper:hover .swiper-button-next {
  opacity: 1;
}
.hero-featured-swiper .swiper-button-prev:hover,
.hero-featured-swiper .swiper-button-next:hover {
  background: #dc3545;
  color: #ffffff;
  transform: scale(1.08);
}
.hero-featured-swiper .swiper-button-prev::after,
.hero-featured-swiper .swiper-button-next::after {
  font-size: 15px;
  font-weight: 700;
}
.hero-featured-swiper .swiper-button-prev {
  left: 16px;
}
.hero-featured-swiper .swiper-button-next {
  right: 16px;
}

/* Navigation Dots Below Carousel */
.hero-swiper-pagination {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  z-index: 5;
}
.hero-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: #94a3b8;
  opacity: 0.55;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-block;
  border: none;
  padding: 0;
}
.hero-swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.9;
  transform: scale(1.2);
}
.hero-swiper-pagination .swiper-pagination-bullet-active {
  width: 28px;
  height: 10px;
  border-radius: 5px;
  background: #dc3545;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

#section-id-1721834712327 .main-wrapper .article-intro-image.overlaped {
  height: 505px;
  border-radius: 12px;
}
#section-id-1721834712327 .main-wrapper .article-intro-image.overlaped img {
  height: 505px;
  width: 100%;
  object-fit: contain;
}
#section-id-1721834712327 .main-wrapper .article-intro-image.overlaped .article-header {
  padding: 24px 28px !important;
}
#section-id-1721834712327 .main-wrapper .article-intro-image.overlaped .article-title {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
}
#section-id-1721834712327 .secondary-wrapper .article-intro-image.overlaped {
  height: 242px;
  border-radius: 10px;
}
#section-id-1721834712327 .secondary-wrapper .article-intro-image.overlaped img {
  height: 242px;
  width: 100%;
  object-fit: contain;
}
#section-id-1721834712327 .secondary-wrapper .article-intro-image.overlaped .article-header {
  padding: 16px 18px !important;
}
#section-id-1721834712327 .secondary-wrapper .article-intro-image.overlaped .article-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;
}

@media (max-width: 991px) {
  #section-id-1721834712327 .main-wrapper .article-intro-image.overlaped,
  #section-id-1721834712327 .main-wrapper .article-intro-image.overlaped img {
    height: 380px;
  }
}
@media (max-width: 576px) {
  #section-id-1721834712327 .main-wrapper .article-intro-image.overlaped,
  #section-id-1721834712327 .main-wrapper .article-intro-image.overlaped img {
    height: 280px;
  }
  #section-id-1721834712327 .main-wrapper .article-intro-image.overlaped .article-title {
    font-size: 1.15rem !important;
  }
}

/* Article Body & Padding Foundation (Fixing 4px bug) */
.article-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin: 6px 0 8px 0;
  flex-wrap: wrap;
}
.article-info i { color: var(--c-gold); }
.article-info .category-name a,
.category-name a,
.category-name,
span.category-name a {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  transition: all 0.2s ease !important;
}
.article-info .category-name a:hover,
.category-name a:hover,
span.category-name a:hover {
  background: var(--c-primary-dark) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.95;
}
.article-info .published { color: var(--c-text-muted); font-size: 0.80rem; }
.article-body {
  padding: 0;
}
.article-content {
  padding: 16px;
}
.article-title {
  font-family: var(--font-ml-serif);
  font-size: 1.10rem;
  font-weight: 700;
  color: #0f172a !important;
  text-decoration: none !important;
  line-height: 1.45;
  transition: color 0.2s ease;
  display: block;
}
.article-title:hover { color: var(--c-primary) !important; }

/* Article Badge and Meta Placement System */
.article-badge-wrap {
  display: block;
  margin-bottom: 6px;
}
.article-info-bottom {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.78rem !important;
  color: #64748b !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
.article-info-bottom .published {
  color: #64748b !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.article-intro-image.overlaped .article-info-bottom .published {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.article-introtext p { color: #4b5563; line-height: 1.72; font-size: 0.92rem; margin-bottom: 0; }
.readmore a {
  color: var(--c-primary);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  transition: gap 0.2s ease;
}
.readmore a:hover { gap: 9px; color: var(--c-primary-dark); }

/* Badges */
.featured-article-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}
.category-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* ==========================================================================
   CHURCH NEWS SECTION (SECTION 2 BLOCK 1): HEADER, TABS & CARD PADDING FIX
   ========================================================================== */
.articles-tabs-4 {
  margin-top: 0 !important;
}
.ut-articles-tabs .uat-tab-content {
  padding-top: 0 !important;
}

/* Section 2 Header Bar (Church News & Latest News) */
.church-news-addon .section-header-wrap,
.latest-news-addon .section-header-wrap {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 12px;
}
.church-news-addon .section-title-line,
.latest-news-addon .section-title-line {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a1a2e;
  font-family: var(--font-ml-serif);
}

/* Clean Pill Tab Navigation */
.church-tab-nav {
  display: flex !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.church-tab-nav .nav-link {
  font-family: var(--font-ml-sans) !important;
  font-size: 0.90rem !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  border-radius: 8px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}
.church-tab-nav .nav-link:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.church-tab-nav .nav-link.active {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  border-color: var(--c-primary) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
  font-weight: 700 !important;
}
.uat-pane { display: none; }
.uat-pane.show.active, .uat-pane.tab-pane.show.active { display: block; }

/* Section 2 Tab 1 Main Cards & Latest News Main Cards */
#tab-church .main-wrapper .article.main-article,
.latest-news-addon .main-wrapper .article.main-article {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#tab-church .main-wrapper .article.main-article:hover,
.latest-news-addon .main-wrapper .article.main-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #fce7eb;
}
#tab-church .main-wrapper .article-intro-image,
.latest-news-addon .main-wrapper .article-intro-image {
  height: 215px;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#tab-church .main-wrapper .article-intro-image img,
.latest-news-addon .main-wrapper .article-intro-image img {
  height: 215px;
  width: 100%;
  object-fit: contain;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  transition: transform 0.35s ease;
}
#tab-church .main-wrapper .article.main-article:hover .article-intro-image img,
.latest-news-addon .main-wrapper .article.main-article:hover .article-intro-image img {
  transform: scale(1.03);
}
#tab-church .main-wrapper .article-body,
.latest-news-addon .main-wrapper .article-body {
  padding: 0 !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#tab-church .main-wrapper .article-content,
.latest-news-addon .main-wrapper .article-content {
  padding: 18px 20px 20px 20px !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#tab-church .main-wrapper .article-title,
.latest-news-addon .main-wrapper .article-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  color: #0f172a !important;
  line-height: 1.42 !important;
  margin-bottom: 6px;
}

/* Section 2 Tab Cards (Tab 1 Secondary & Tabs 2, 3, 4) */
.tab-list-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tab-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  border-color: #fce7eb;
}
.tab-list-card .article-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  color: #0f172a !important;
  line-height: 1.42 !important;
  margin-bottom: 4px;
}
.tab-thumb-img {
  width: 100px;
  height: 78px;
  object-fit: contain;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}

/* Tab View More Footer & Button */
.uat-more-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.btn-more-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ml-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-primary);
  background: #fdf2f2;
  border: 1px solid #fee2e2;
  border-radius: 6px;
  padding: 7px 16px;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.btn-more-tab:hover {
  background: var(--c-primary);
  color: #ffffff !important;
  border-color: var(--c-primary);
  transform: translateX(2px);
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(192, 32, 32, 0.25);
}
.btn-more-tab i {
  font-size: 0.78rem;
  transition: transform 0.2s ease;
}
.btn-more-tab:hover i {
  transform: translateX(3px);
}

/* Sidebar & Social Widget */
.sidebar-widget {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #edf2f7;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.sidebar-widget-title {
  font-size: 1.1rem;
  color: var(--c-navy);
  border-left: 4px solid var(--c-primary);
  padding-left: 10px;
  margin-bottom: 14px;
}

/* Good Day (ശുഭദിനം) Widget */
.good-day-widget {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.good-day-widget:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.good-day-widget .good-day-header .sidebar-widget-title {
  border-left: 4px solid #f59e0b;
  padding-left: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 0;
}
.good-day-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.good-day-body {
  background: linear-gradient(135deg, #fffdf8 0%, #fbf6ec 100%);
  border: 1px solid #f5e4c3;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  overflow: hidden;
}
.good-day-body .quote-watermark {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 48px;
  color: rgba(245, 158, 11, 0.12);
  pointer-events: none;
  z-index: 1;
}
.good-day-text {
  font-family: var(--font-ml-serif, Georgia, serif);
  font-size: 1.04rem;
  line-height: 1.75;
  color: #374151;
  font-style: italic;
}
.good-day-ref {
  color: #78350f;
  font-size: 0.88rem;
}
.good-day-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #25d366;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
}
.good-day-wa-btn:hover {
  background-color: #1ebc59;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.35);
  color: #ffffff !important;
}

#sppb-addon-wrapper-Qe3KYaC7dhvjaxGrmytmb .sppb-addon-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb a {
  --bs-btn-padding-x: 0.5rem;
  width: 100% !important;
  min-height: 80px !important;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 8px !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding: 12px 8px !important;
}
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb a i { font-size: 24px; margin-bottom: 6px; }
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb a:hover { opacity: 0.88; transform: translateY(-2px); }
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb #btn-fb { background-color: #1877f2; color: #fff; }
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb #btn-yt { background-color: #ff0000; color: #fff; }
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb #btn-ig { background-color: #c13584; color: #fff; }
#sppb-addon-Qe3KYaC7dhvjaxGrmytmb #btn-wa { background-color: #25d366; color: #fff; }

/* =========================================================================
   WHATSAPP GROUP INVITATION WIDGET (സോഷ്യൽ മീഡിയയ്ക്കു താഴെ)
   ========================================================================= */
.wa-invite-card {
  position: relative;
  background: linear-gradient(135deg, #075e54 0%, #128c7e 55%, #075e54 100%);
  border-radius: 14px;
  padding: 22px 20px 20px 20px;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 25px -4px rgba(7, 94, 84, 0.35), 0 4px 10px -2px rgba(7, 94, 84, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 24px;
  margin-bottom: 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-invite-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -4px rgba(7, 94, 84, 0.45), 0 6px 14px -2px rgba(7, 94, 84, 0.25);
}

/* Translucent oversized background watermark icon */
.wa-invite-card::before {
  content: '\f232';
  font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', 'FontAwesome';
  font-weight: 400;
  position: absolute;
  right: -14px;
  bottom: -24px;
  font-size: 130px;
  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-12deg);
  pointer-events: none;
  line-height: 1;
}

/* Ambient radial glow */
.wa-invite-card::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.wa-invite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.wa-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #a7f3d0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.wa-pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(37, 211, 102, 0.7);
  animation: waPulse 1.8s infinite;
}

@keyframes waPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.wa-avatar-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.wa-invite-title {
  font-size: 1.22rem;
  font-weight: 800;
  font-family: var(--font-ml-serif, Georgia, serif);
  color: #ffffff !important;
  margin: 0 0 8px 0;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.wa-invite-desc {
  font-size: 0.90rem;
  color: #e6f7f2;
  line-height: 1.6;
  margin: 0 0 14px 0;
  position: relative;
  z-index: 1;
}

.wa-perks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.wa-perk-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wa-join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: #ffffff;
  color: #075e54 !important;
  font-size: 0.98rem;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.wa-join-btn i.fa-whatsapp {
  font-size: 1.3rem;
  color: #25d366;
}

.wa-join-btn:hover {
  background: #f0fdf4;
  color: #054c44 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.wa-join-btn:hover .wa-btn-arrow {
  transform: translateX(4px);
}

.wa-btn-arrow {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.wa-invite-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #a7f3d0;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* =========================================================================
   COMPACT WHATSAPP JOIN STRIP (ARTICLE PAGE - BELOW SHARE BUTTONS)
   ========================================================================= */
.article-wa-strip {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  border-radius: 12px;
  padding: 14px 18px;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(7, 94, 84, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-wa-strip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(7, 94, 84, 0.28);
}

.article-wa-strip::before {
  content: '\f232';
  font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', 'FontAwesome';
  position: absolute;
  right: -10px;
  bottom: -22px;
  font-size: 85px;
  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-10deg);
  pointer-events: none;
  line-height: 1;
}

.article-wa-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.article-wa-title {
  color: #ffffff !important;
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-ml-sans, sans-serif);
  line-height: 1.4;
}

.article-wa-sub {
  color: #d1fae5;
  font-size: 0.82rem;
  display: block;
  margin-top: 2px;
}

.article-wa-btn {
  background: #ffffff !important;
  color: #075e54 !important;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 20px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  border: none;
  text-decoration: none !important;
  flex-shrink: 0;
}

.article-wa-btn:hover {
  background: #f0fdf4 !important;
  color: #054c44 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.article-wa-btn i.fa-whatsapp {
  color: #25d366;
  font-size: 1.15rem;
}

@media (max-width: 576px) {
  .article-wa-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* =========================================================================
   POPULAR NOW (ഏറ്റവും കൂടുതൽ വായിച്ചവ) - REDESIGNED MODERN WIDGET
   ========================================================================= */
.popular-widget-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.popular-widget-header {
  margin-bottom: 14px;
}
.popular-widget-title {
  font-size: 1.12rem;
  font-weight: 700;
  font-family: var(--font-ml-serif);
  color: var(--c-navy);
  margin: 0;
  display: flex;
  align-items: center;
}
.popular-trend-pill {
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.popular-header-divider {
  height: 2px;
  background: linear-gradient(to right, var(--c-primary) 65px, #e2e8f0 65px);
  margin-top: 10px;
  border-radius: 2px;
}

/* Featured Top Story (#01 Rank) */
.popular-lead-article {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.25s ease;
}
.popular-lead-article:hover {
  box-shadow: 0 6px 20px rgba(17, 113, 180, 0.08);
  border-color: #cbd5e1;
}
.popular-lead-media {
  position: relative;
  height: 175px;
  overflow: hidden;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-lead-img {
  width: 100%;
  height: 175px;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.popular-lead-article:hover .popular-lead-img {
  transform: scale(1.05);
}
.popular-rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #e53e3e, #dd6b20);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.74rem;
  padding: 3px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.5px;
}
.popular-category-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.popular-category-badge a {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
.popular-category-badge a:hover {
  background: var(--c-primary-dark) !important;
  color: #ffffff !important;
}
.popular-lead-body {
  padding: 12px 14px;
}
.popular-lead-title {
  font-size: 1.10rem;
  font-weight: 700;
  font-family: var(--font-ml-serif);
  line-height: 1.42;
  margin-bottom: 6px;
}
.popular-lead-title a {
  color: var(--c-navy) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.popular-lead-title a:hover {
  color: var(--c-primary) !important;
}
.popular-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #64748b;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

/* Numbered Mini Rows (#02 - #05) */
.popular-mini-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.popular-mini-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f1f5f9;
}
.popular-mini-item:last-child {
  border-bottom: none;
}
.popular-mini-item:hover {
  background: #f8fafc;
}
.popular-mini-rank {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  font-family: var(--font-ml-sans);
  transition: all 0.2s ease;
}
.popular-mini-item:nth-child(1) .popular-mini-rank {
  background: #e0f2fe;
  color: var(--c-primary);
}
.popular-mini-item:hover .popular-mini-rank {
  background: var(--c-primary);
  color: #ffffff;
}
.popular-mini-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.popular-mini-item:hover .popular-mini-thumb img {
  transform: scale(1.08);
}
.popular-mini-content {
  flex-grow: 1;
  min-width: 0;
}
.popular-mini-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
.popular-mini-meta .category-name a {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  font-size: 0.64rem !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.3 !important;
}
.popular-mini-meta .category-name a:hover {
  background: var(--c-primary-dark) !important;
  color: #ffffff !important;
}
.popular-mini-views {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}
.popular-mini-title {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-ml-serif);
  line-height: 1.40;
  margin: 0;
}
.popular-mini-title a {
  color: var(--c-navy) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.popular-mini-item:hover .popular-mini-title a {
  color: var(--c-primary) !important;
}

/* CAROUSEL NAVIGATION */
.ut-articles-carousel .uac-navigation.top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.uac-nav-prev, .uac-nav-next {
  width: 32px; height: 32px; border-radius: 50%; background: #ffffff; color: #374151;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.82rem;
  transition: all 0.2s ease; border: 1px solid #cbd5e1; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.uac-nav-prev:hover, .uac-nav-next:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Section 3 Spiritual Carousel */
#uac-container-227 {
  overflow: hidden !important;
  padding-bottom: 8px;
}
#uac-container-227 .article-intro-image.overlaped {
  height: 310px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#uac-container-227 .article.main-article:hover .article-intro-image.overlaped {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}
#uac-container-227 .article-intro-image.overlaped img {
  height: 310px;
  width: 100%;
  object-fit: contain;
}
#uac-container-227 .article-intro-image.overlaped .article-header {
  padding: 18px 20px !important;
}
#uac-container-227 .article-intro-image.overlaped .article-title {
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
}

/* PRAYER BOX */
.prayer-request-box {
  background: linear-gradient(135deg, var(--c-primary) 0%, #0b395b 100%);
  color: #ffffff; border-radius: 10px; padding: 22px; text-align: center; margin-bottom: 22px;
}
.prayer-request-box h4 { color: #ffffff; font-size: 1.2rem; margin-bottom: 8px; }
.prayer-request-box p { color: #dbeafe; font-size: 0.90rem; line-height: 1.6; }
.prayer-request-btn {
  background: var(--c-gold); color: #1a1a1a; font-weight: 700; border: none;
  padding: 9px 20px; border-radius: 6px; display: inline-block; margin-top: 12px;
  text-decoration: none; transition: all 0.2s ease;
}
.prayer-request-btn:hover { background: #dfb234; color: #000; transform: translateY(-2px); }

/* VIDEO PLAY BUTTON */
.btn-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; background: rgba(255,255,255,0.92); color: var(--c-primary);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; z-index: 5; transition: all 0.25s ease; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35); padding-left: 4px;
}
.btn-video:hover {
  background: var(--c-primary); color: #fff;
  transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 6px 22px rgba(17,113,180,0.45);
}
.articles-wrapper.secondary-wrapper .btn-video { width: 36px; height: 36px; font-size: 13px; padding-left: 3px; }

/* MINIMAL VIDEO SECTION (SECTION 4) */
#section-id-1721834712334 .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#section-id-1721834712334 .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}
#section-id-1721834712334 .card h3 {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  line-height: 1.45 !important;
}
#section-id-1721834712334 .card h3 a:hover {
  color: var(--c-primary) !important;
}

/* SECTION 5 (FAMILY & YOUTH) CARDS */
#section-id-1721871928559 .main-wrapper .article.main-article {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#section-id-1721871928559 .main-wrapper .article.main-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #fce7eb;
}
#section-id-1721871928559 .main-wrapper .article-intro-image img {
  height: 290px;
  width: 100%;
  object-fit: contain;
}
#section-id-1721871928559 .main-wrapper .article-body {
  padding: 18px 20px 20px !important;
  flex-grow: 1;
}
#section-id-1721871928559 .main-wrapper .article-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  color: #1a202c !important;
  line-height: 1.45 !important;
  margin-bottom: 8px;
}
#section-id-1721871928559 .main-wrapper .article-introtext p {
  font-size: 0.90rem;
  color: #4b5563;
  line-height: 1.65;
}

#section-id-1721871928559 .secondary-wrapper .family-grid-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#section-id-1721871928559 .secondary-wrapper .family-grid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.07);
  border-color: #fce7eb;
}
#section-id-1721871928559 .secondary-wrapper .family-grid-card .article-intro-image img {
  height: 135px;
  width: 100%;
  object-fit: contain;
}
#section-id-1721871928559 .secondary-wrapper .family-grid-card .article-body {
  padding: 10px 12px 12px !important;
  flex-grow: 1;
}
#section-id-1721871928559 .secondary-wrapper .family-grid-card .article-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  line-height: 1.42 !important;
  color: #1a202c !important;
}

/* SECTION 6 (BOTTOM DESKS) CARDS */
#section-id-1721883758927 .sppb-row-column {
  padding: 0 16px !important;
  border-right: 1px solid #e2e8f0;
}
#section-id-1721883758927 .sppb-row-column:last-child {
  border-right: none;
}
#section-id-1721883758927 .article.main-article {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#section-id-1721883758927 .article.main-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}
#section-id-1721883758927 .article-intro-image.overlaped {
  height: 185px;
  border-radius: 10px;
}
#section-id-1721883758927 .article-intro-image.overlaped img {
  height: 185px;
  width: 100%;
  object-fit: contain;
}
#section-id-1721883758927 .article-intro-image.overlaped .article-header {
  padding: 12px 14px !important;
}
#section-id-1721883758927 .article-intro-image.overlaped .article-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ml-serif) !important;
  line-height: 1.38 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important;
}
#section-id-1721883758927 .article-intro-image.overlaped .published {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* AD BANNERS */
#mod-custom118 img { display: block; margin: 0 auto 20px; max-width: 100%; border-radius: 6px; }
#mod-custom119 img { display: block; margin: 0 auto; max-width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; }

/* GLOBAL OUTLOOK CLEAN ARTICLES (SECTION 2 BLOCK 2) */
.global-outlook-card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.global-outlook-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #fce7eb;
}
.global-outlook-card .card-thumb {
  position: relative;
  overflow: hidden;
  height: 165px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.global-outlook-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  display: block;
}
.global-outlook-card:hover .card-thumb img {
  transform: scale(1.05);
}
.global-outlook-card .card-content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.global-outlook-card .card-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 8px;
  text-decoration: none;
}
.global-outlook-card .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-ml-serif);
  line-height: 1.42;
  color: #0f172a;
  margin: 0 0 8px 0;
  text-decoration: none;
}
.global-outlook-card:hover .card-title {
  color: var(--c-primary) !important;
}
.global-outlook-card .card-meta {
  margin-top: auto;
  font-size: 0.76rem;
  color: var(--c-text-muted);
}

/* SINGLE ARTICLE */
.single-article-header { margin-bottom: 24px; }
.single-article-title { font-size: 2.3rem; color: var(--c-navy); line-height: 1.35; margin: 12px 0 16px 0; }
.single-article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 12px 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
  color: var(--c-text-muted); font-size: 0.9rem;
}
.single-article-body { font-size: 1.1rem; line-height: 2.0; color: #24292f; }
.single-article-body p { margin-bottom: 22px; }

/* SHARE */
.share-buttons { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.share-btn {
  padding: 8px 16px; border-radius: 6px; color: #fff; font-size: 0.88rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.2s ease;
}
.share-btn:hover { opacity: 0.85; }
.share-facebook { background: #1877f2; }
.share-whatsapp { background: #25d366; }
.share-twitter  { background: #1da1f2; }

/* ADMIN LINK */
.admin-badge-link { color: #9ca3af; font-size: 0.82rem; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.admin-badge-link:hover { color: var(--c-gold); }

/* RESPONSIVE */
@media (max-width: 991px) {
  #section-id-1721883758927 .sppb-row-column {
    border-right: none; border-bottom: 1px solid #e9ecef; padding-bottom: 24px; margin-bottom: 12px;
  }
}
@media (max-width: 768px) {
  .single-article-title { font-size: 1.6rem; }
  .portal-brand-text h1 { font-size: 1.4rem; }
  .sppb-addon-module .sppb-addon-title { font-size: 1.05rem !important; }
  .article-intro-image.overlaped .article-title { font-size: 0.90rem !important; }
}
@media (max-width: 576px) {
  .sppb-section { padding-top: 20px; padding-bottom: 20px; }
}

/* ==========================================================================
   FOOTER TEXT ALIGNMENT
   ========================================================================== */
#sp-footer,
footer#sp-footer {
  text-align: left !important;
}

#sp-footer .container,
#sp-footer .row,
#sp-footer [class*="col-"],
#sp-footer p,
#sp-footer h4,
#sp-footer h5,
#sp-footer h6,
#sp-footer ul,
#sp-footer li,
#sp-footer div,
#sp-footer form,
#sp-footer small,
#sp-footer .portal-logo-icon,
#sp-footer .text-secondary {
  text-align: left !important;
}

#sp-footer ul.list-unstyled {
  padding-left: 0;
  margin-left: 0;
}

#sp-footer ul.list-unstyled li {
  text-align: left !important;
  display: block !important;
}

#sp-footer ul.list-unstyled li a {
  display: inline-flex !important;
  align-items: center;
  text-align: left !important;
}

#sp-footer .text-md-end {
  text-align: right !important;
}

@media (max-width: 767.98px) {
  #sp-footer .text-md-end {
    text-align: left !important;
  }
}

/* ==========================================================================
   DISCIPLES NEWS THEME SYSTEM (Derived from Official Logo #1171b4)
   ========================================================================== */
.btn-primary, .btn-danger {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-danger:hover, .btn-danger:focus {
  background-color: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
  color: #ffffff !important;
}
.btn-outline-primary, .btn-outline-danger {
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #ffffff !important;
}
.badge.bg-primary, .badge.bg-danger {
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
}
.badge.bg-danger.badge-live, .badge-live {
  background-color: #dc2626 !important;
}
.text-primary {
  color: var(--c-primary) !important;
}
.text-danger:not(.fa-youtube):not(.text-youtube) {
  color: var(--c-primary) !important;
}
.border-primary, .border-danger {
  border-color: var(--c-primary) !important;
}
.page-item.active .page-link {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
.page-link {
  color: var(--c-primary) !important;
}
.page-link:hover {
  color: var(--c-primary-dark) !important;
}
.category-badge[style*="#8B0000"], .card-badge[style*="#800020"], .card-badge[style*="#8B0000"] {
  background: var(--c-primary) !important;
}

/* ==========================================================================
   HOMEPAGE CATEGORY SECTIONS SYSTEM
   ========================================================================== */
.sppb-section-category {
  padding: 34px 0;
  border-bottom: 1px solid #edf2f7;
}
.sppb-section-category.bg-light-subtle {
  background: #f8fafc;
}
.section-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.section-header-wrap .section-title-line {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
}
.section-header-wrap .section-title-line::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--c-primary);
  border-radius: 2px;
}

/* Category Lead Card */
.category-lead-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.category-lead-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.07);
}
.category-lead-card .lead-img-wrap {
  height: 250px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-lead-card .lead-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.category-lead-card:hover .lead-img-wrap img {
  transform: scale(1.02);
}

/* Category Mini List Row */
.category-mini-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  transition: all 0.2s ease;
  text-decoration: none;
}
.category-mini-row:hover {
  background: #f0f7fd;
  border-color: #cbd5e1;
  transform: translateX(4px);
}
.category-mini-row img {
  width: 90px;
  height: 72px;
  object-fit: contain;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  border-radius: 6px;
  flex-shrink: 0;
}
.category-mini-row .mini-title {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-ml-serif);
  line-height: 1.4;
  color: #1e293b;
  margin: 0 0 4px 0;
}
.category-mini-row:hover .mini-title {
  color: var(--c-primary);
}

/* Editorial Thought Leadership Cards */
.editorial-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-top: 4px solid #fd7e14;
  border-radius: 8px;
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}
.editorial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  border-color: #fd7e14;
}
.editorial-card .author-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 10px;
}
.editorial-card .editorial-title {
  font-family: var(--font-ml-serif);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.42;
  color: #0f172a;
  margin-bottom: 10px;
}
.editorial-card .editorial-title a:hover {
  color: var(--c-primary);
}

/* Obituary Tribute Cards */
.obituary-tribute-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
  position: relative;
}
.obituary-tribute-card:hover {
  transform: translateY(-3px);
  border-color: #94a3b8;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.obituary-tribute-card .tribute-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f1f5f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 12px;
}
.obituary-tribute-card .tribute-title {
  font-family: var(--font-ml-serif);
  font-size: 1.00rem;
  font-weight: 700;
  line-height: 1.42;
  color: #0f172a;
  margin-bottom: 8px;
}
.obituary-tribute-card .tribute-title a:hover {
  color: var(--c-primary);
}
.obituary-tribute-card .tribute-date {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: auto;
}

/* =========================================================================
   UNIVERSAL MODERN PAGINATION COMPONENT
   ========================================================================= */
.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 32px 0 16px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pagination .page-item {
  margin: 0 !important;
  display: inline-block !important;
}
.pagination .page-link {
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: var(--c-navy) !important;
  font-size: 0.90rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}
.pagination .page-link:hover {
  background: #f1f5f9 !important;
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(17, 113, 180, 0.15) !important;
}
.pagination .page-item.active .page-link,
.pagination .page-link.active {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  border-color: var(--c-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(17, 113, 180, 0.28) !important;
  cursor: default !important;
  transform: none !important;
}
.pagination .page-item.disabled .page-link,
.pagination .page-link:disabled {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}
.pagination .pagination-ellipsis {
  min-width: 32px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 2px !important;
  user-select: none !important;
}
.pagination .page-nav-btn {
  font-weight: 600 !important;
  padding: 0 16px !important;
  gap: 6px !important;
}

@media (max-width: 576px) {
  .pagination {
    gap: 4px !important;
  }
  .pagination .page-link {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
  }
  .pagination .pagination-ellipsis {
    min-width: 24px !important;
    height: 34px !important;
  }
  .pagination .page-nav-btn {
    padding: 0 10px !important;
  }
}

/* ==========================================================================
   INTERACTIVE SEARCH POPUP MODAL SYSTEM
   ========================================================================== */
.finder-overlay-wrapper {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 80px 20px 20px 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important;
}

.finder-overlay-wrapper.is-open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.finder-overlay-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
}

.finder-overlay-dialog {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 680px !important;
  transform: translateY(-24px) scale(0.97) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.finder-overlay-wrapper.is-open .finder-overlay-dialog {
  transform: translateY(0) scale(1) !important;
}

.finder-modal-content {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 32px 30px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

html.dark-mode .finder-modal-content {
  background: #1e293b !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.finder-overlay-close {
  position: absolute !important;
  top: -16px !important;
  right: -16px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.finder-overlay-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.08) !important;
  border-color: #ef4444 !important;
}

html.dark-mode .finder-overlay-close {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-mode .finder-overlay-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.finder-modal-badge {
  display: inline-block !important;
  background: rgba(17, 113, 180, 0.1) !important;
  color: #1171b4 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
}

html.dark-mode .finder-modal-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

.finder-modal-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  font-family: var(--font-ml-serif) !important;
}

html.dark-mode .finder-modal-title {
  color: #f8fafc !important;
}

.finder-input-group {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 6px 6px 6px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.finder-input-group:focus-within {
  border-color: #1171b4 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(17, 113, 180, 0.15) !important;
}

html.dark-mode .finder-input-group {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark-mode .finder-input-group:focus-within {
  border-color: #38bdf8 !important;
  background: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2) !important;
}

.finder-search-icon {
  color: #94a3b8 !important;
  font-size: 1.15rem !important;
  margin-right: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.finder-search-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 1.08rem !important;
  color: #0f172a !important;
  padding: 8px 4px !important;
  font-family: inherit !important;
  min-width: 0 !important;
}

html.dark-mode .finder-search-input {
  color: #f8fafc !important;
}

.finder-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
}

.finder-submit-btn {
  background: linear-gradient(135deg, #1171b4 0%, #0d5a92 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 0.96rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  flex-shrink: 0 !important;
}

.finder-submit-btn:hover {
  background: linear-gradient(135deg, #0d5a92 0%, #084069 100%) !important;
  box-shadow: 0 4px 14px rgba(17, 113, 180, 0.4) !important;
  transform: translateY(-1px) !important;
}

.finder-suggestions {
  margin-top: 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.suggestions-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-right: 4px !important;
}

html.dark-mode .suggestions-label {
  color: #94a3b8 !important;
}

.suggestion-tag {
  display: inline-block !important;
  font-size: 0.82rem !important;
  color: #334155 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.suggestion-tag:hover {
  background: #1171b4 !important;
  color: #ffffff !important;
  border-color: #1171b4 !important;
  transform: translateY(-1px) !important;
}

html.dark-mode .suggestion-tag {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

html.dark-mode .suggestion-tag:hover {
  background: #38bdf8 !important;
  border-color: #38bdf8 !important;
  color: #0f172a !important;
}

.finder-tip {
  margin-top: 16px !important;
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
}

.finder-tip kbd {
  background: #e2e8f0 !important;
  color: #334155 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  font-family: inherit !important;
  border: 1px solid #cbd5e1 !important;
}

html.dark-mode .finder-tip kbd {
  background: #334155 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

@media (max-width: 576px) {
  .finder-overlay-wrapper {
    padding: 30px 14px 14px 14px !important;
  }
  .finder-modal-content {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }
  .finder-overlay-close {
    top: -12px !important;
    right: -8px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
  .finder-input-group {
    padding: 4px 4px 4px 12px !important;
  }
  .finder-search-input {
    font-size: 0.95rem !important;
  }
  .finder-submit-btn {
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
  }
}

/* ==========================================================================
   RESPONSIVE AD CONTAINER & MONETIZATION STYLES
   ========================================================================== */
.news-ad-container {
  display: block;
  text-align: center;
  margin: 1.25rem auto;
  clear: both;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.news-ad-container .news-ad-inner {
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
}
.news-ad-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.news-ad-container ins.adsbygoogle {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}
.news-ad-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 6px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Specific ad placement adjustments */
.news-ad-header_top {
  margin: 0 !important;
}
.news-ad-header_top img {
  max-height: 90px;
  width: auto;
}
.news-ad-sidebar_bottom.sticky-ad {
  position: sticky;
  top: 90px;
  z-index: 5;
}
@media (max-width: 991px) {
  .news-ad-header_top img {
    max-height: 60px;
  }
}

/* ==========================================================================
   ARTICLE FEATURED IMAGE FRAME (Contained display without cropping)
   ========================================================================== */
.post-featured-media {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 520px;
  min-height: 280px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.post-featured-backdrop {
  position: absolute;
  inset: -25px;
  background-size: cover;
  background-position: center;
  filter: blur(25px) brightness(0.40);
  opacity: 0.88;
  transform: scale(1.15);
  pointer-events: none;
  z-index: 1;
}

.post-featured-img {
  position: relative;
  z-index: 2;
  max-height: 520px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}

@media (max-width: 767px) {
  .post-featured-media {
    max-height: 380px;
    min-height: 220px;
    border-radius: 8px;
  }
  .post-featured-img {
    max-height: 380px;
  }
}

/* Modern Horizontal 4-Column News Cards (Interviews & Articles) */
.modern-news-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.modern-news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  border-color: #fce7eb !important;
}
.card-img-zoom {
  transition: transform 0.35s ease;
}
.modern-news-card:hover .card-img-zoom {
  transform: scale(1.05);
}