/* ============================================
   1. CSS VARIABLES - MYKOBO Brand
   ============================================
*/
:root {
  /* Purple Palette */
  --mk-purple-deep: #1a1035;
  --mk-purple-dark: #2d1b4e;
  --mk-purple-mid: #4a2c7a;
  --mk-purple-primary: #8b5cf6;
  --mk-purple-light: #a78bfa;
  --mk-purple-soft: #c4b5fd;
  --mk-purple-glow: rgba(139, 92, 246, 0.25);
  --mk-purple-gradient: linear-gradient(90deg, #8b5cf6, #3b82f6);

  /* Backgrounds */
  --mk-bg-primary: #0a0e27;
  --mk-bg-secondary: #1a1035;
  --mk-bg-card: rgba(255, 255, 255, 0.05);
  --mk-bg-card-hover: rgba(255, 255, 255, 0.08);

  /* Text */
  --mk-text-primary: #ffffff;
  --mk-text-secondary: rgba(255, 255, 255, 0.7);
  --mk-text-muted: rgba(255, 255, 255, 0.5);

  /* Borders */
  --mk-border-subtle: rgba(255, 255, 255, 0.1);
  --mk-border-accent: rgba(139, 92, 246, 0.4);

  /* Accent Colors */
  --mk-success: #10b981;
  --mk-blue: #3b82f6;
  --mk-cyan: #06b6d4;

  /* Spacing */
  --mk-radius-sm: 8px;
  --mk-radius-md: 12px;
  --mk-radius-lg: 16px;
  --mk-radius-xl: 24px;

  /* Transitions */
  --mk-transition: all 0.3s ease;
}


/* ============================================
   2. BASE OVERRIDES & RESET
   ============================================ */
/* Force dark background on html/body */
html,
body,
#zd-portalContainer,
#zd-main,
.zd-portalBody {
  background: var(--mk-bg-primary) !important;
  color: var(--mk-text-primary) !important;
}

/* Override Zoho's default fonts */
body,
.zd-portalBody,
#zd-portalContainer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links base styling */
a,
.Link__link,
.commonStyle__zt3Link {
  color: var(--mk-purple-light);
  text-decoration: none;
  transition: var(--mk-transition);
}

a:hover,
.Link__link:hover,
.commonStyle__zt3Link:hover {
  color: var(--mk-purple-soft);
}

/* Icon colors - make visible on dark background */
.Icon__icon,
.Icon__greyShade70,
[class*="Icon__"] svg {
  fill: var(--mk-text-secondary) !important;
}

.Icon__icon use,
.Icon__greyShade70 use {
  fill: inherit !important;
}

/* Remove default Zoho shadows and borders */
.commonStyle__boxShadow,
[class*="boxShadow"] {
  box-shadow: none !important;
}

/* Kill all white/light borders on containers */
[class*="Container"],
[class*="container"],
[class*="Wrapper"],
[class*="wrapper"],
[class*="Widget"],
[class*="widget"],
[role="list"],
[role="listitem"],
ul, ol, li,
.commonStyle__listStyleNone {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Ensure list items have no background/border */
.WidgetContainer__list,
.WidgetContainer__contentList,
.KbCategoryContainer__row {
  list-style: none !important;
  background: transparent !important;
  border: none !important;
}

/* Scrollbar styling (Webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--mk-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--mk-purple-mid);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mk-purple-primary);
}

/* Brand specific overrides */
.commonStyle__zt3BrandBg {
    background-color: var(--mk-purple-light);
}

.Icon__brand {
    color: var(--mk-purple-light);
}


/* ============================================
   3. BODY & MAIN BACKGROUND
   ============================================ */
/* Dark gradient background matching mykobo.co */
body {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1035 50%, #2d1b4e 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  height: 100% !important;
}

/* Main container */
#mainContainer,
.Layout__oneColumn,
.Layout__layout1,
#layoutContainer,
[data-id="kbLanding"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
  margin-top: 0 !important;
}

#zd-portalContainer,
#zd-main,
.zd-portalBody,
.Layout__layoutContainer,
.AppContainer__appBody,
.AppContainer__appWrapper,
.AppContainer__appBodyWrapper,
#container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
  margin-top: 0 !important;
  height: auto !important;
}

/* Redundant Layout Spacing cleanup */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Animated background orbs */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  animation: mk-float 20s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  animation: mk-float 25s infinite ease-in-out reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes mk-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, 20px) rotate(5deg); }
}

/* Ensure content sits above background orbs */
#zd-portalContainer,
#mainContainer,
.Layout__oneColumn {
  position: relative;
  z-index: 1;
}


/* ============================================
   4. HEADER & SEARCH AREA
   ============================================ */
/* Top navigation bar - remove all borders and background blocks */
.Header__header,
.Header__navbar,
.zd-header,
header,
[class*="Header__"],
[class*="header"],
.navbar,
.zd-portalHeader,
#zd-header {
  background-color: rgba(255, 255, 255, 0.05) !important; /* Semi-transparent base */
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Restoration of horizontal alignment and centering */
.Header__container,
#navBarContainer {
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 12px !important; /* Tightened from 24px */
  padding-bottom: 12px !important;
  margin: 0 auto !important;
  max-width: 1200px !important; /* Wide layout for top bar */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important; /* Ensure search bar isn't clipped */
}

/* Mobile Header Refinement */
@media (max-width: 640px) {
  .Header__container,
  #navBarContainer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    flex-direction: column !important;
    align-items: center !important; /* Centered */
    text-align: center !important;
    gap: 12px !important;
  }

  /* Force search container to be full width but fit */
  #searchContainer2,
  .Header__globalSearchAlt,
  .SearchContainer__globalSearch {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }
}

/* Clearfixes and redundant items */
.Header__clBoth,
.Header__menuicon,
.AppContainer__breadCrumbs,
#breadCrumbsContainer {
  display: none !important;
}

/* Navbar Search - Visibility Hardening */
#searchContainer2,
.Header__globalSearchAlt,
.SearchContainer__globalSearch {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 350px !important;
  min-width: 300px !important; /* Force a minimum width */
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  display: flex !important; /* Ensure flex for icon positioning */
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}

/* Explicitly target the search input classes */
.Header__globalSearchAlt input,
.SearchContainer__globalSearch input,
.Input__headerSearch {
  background: rgba(10, 14, 39, 0.4) !important; /* Darker glassy base for better contrast */
  border: 1px solid var(--mk-border-accent) !important;
  border-radius: var(--mk-radius-md) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  padding-right: 44px !important; /* Space for icon */
  font-size: 14px !important;
  width: 100% !important;
  height: 42px !important; /* Explicit height */
  transition: all 0.3s ease;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important; /* Ensure it's clickable */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Force high-visibility placeholder across all browser engines */
.Header__globalSearchAlt input::-webkit-input-placeholder,
.SearchContainer__globalSearch input::-webkit-input-placeholder,
.Input__headerSearch::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.Header__globalSearchAlt input::-moz-placeholder,
.SearchContainer__globalSearch input::-moz-placeholder,
.Input__headerSearch::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.Header__globalSearchAlt input:-ms-input-placeholder,
.SearchContainer__globalSearch input:-ms-input-placeholder,
.Input__headerSearch:-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.Header__globalSearchAlt input::-ms-input-placeholder,
.SearchContainer__globalSearch input::-ms-input-placeholder,
.Input__headerSearch::-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.Header__globalSearchAlt input::placeholder,
.SearchContainer__globalSearch input::placeholder,
.Input__headerSearch::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Modernize Search Icon in Navbar */
.SearchContainer__searchIcon {
  background: transparent !important;
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important; /* Let clicks pass through to input */
  border: none !important;
  box-shadow: none !important;
}

.SearchContainer__searchIcon svg {
  fill: #ffffff !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
}

.Header__globalSearchAlt input:focus,
.SearchContainer__globalSearch input:focus,
.Input__headerSearch:focus {
  border-color: var(--mk-purple-primary) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px var(--mk-purple-glow) !important;
  outline: none !important;
}

/* Kill all default Zoho padding and borders on wrappers */
.Header__navbar,
#navBar,
.Header__headerContainer,
.Header__logo,
.Header__logo a,
.Header__menuTab,
.Header__menuList,
.Header__tabsTab,
.Header__tabs__link,
.Header__active,
[class*="Header__headerContainer"] {
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Help Center title - force white */
.Header__name,
.Header__logo,
.zd-header *,
header *,
[class*="Header__"] *,
[class*="header"] *,
.zd-portalHeader *,
#zd-header *,
[class*="HelpCenter"],
[class*="helpCenter"],
[class*="portalTitle"],
[class*="PortalTitle"],
h1, h2, h3, h4, h5, h6,
.zd-portalName,
[class*="portalName"] {
  color: var(--mk-text-primary) !important;
}

/* Specific header name styling */
.Header__name,
.Header__menuTab,
.Header__searchSection,
#headerContent {
  display: none !important;
}

/* Header links */
.zd-header a,
header a {
  color: var(--mk-text-secondary) !important;
  font-weight: 500;
}

.zd-header a:hover,
header a:hover {
  color: var(--mk-text-primary) !important;
}

/* Logo styling */
.zd-header img,
header img,
[class*="logo"] img {
  filter: brightness(1.1);
}

/* Search container */
[class*="Search__"],
.search-container,
.zd-search {
  background: var(--mk-bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-lg);
  padding: 32px;
  margin: 32px auto;
  max-width: 600px;
}

/* Search input styling */
input[type="search"],
input[type="text"][class*="search" i],
.zd-searchInput,
[class*="SearchInput"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  color: var(--mk-text-primary) !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  width: 100% !important;
  transition: var(--mk-transition);
}

input[type="search"]:focus,
input[type="text"][class*="search" i]:focus,
.zd-searchInput:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--mk-border-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--mk-purple-glow) !important;
}

input[type="search"]::placeholder,
input[type="text"]::placeholder {
  color: var(--mk-text-muted) !important;
}

/* Search button */
button[type="submit"],
.zd-searchBtn,
[class*="SearchBtn"] {
  background: linear-gradient(135deg, var(--mk-purple-primary), var(--mk-blue)) !important;
  border: none !important;
  border-radius: var(--mk-radius-md) !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  cursor: pointer;
  transition: var(--mk-transition);
}

button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

/* Search results dropdown & Auto-suggest */
[class*="SearchResult"],
.zd-searchResults,
.SearchList__listmenu {
  background: rgba(26, 16, 53, 0.95) !important; /* Dark solid-ish purple */
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--mk-border-accent) !important;
  border-radius: var(--mk-radius-md) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
  padding: 8px 0 !important;
  margin-top: 8px !important;
}

/* Individual Result Items */
[class*="SearchResult"] a,
.zd-searchResults a,
.SearchList__autoSuggestListItem,
.SearchList__normal {
  color: #ffffff !important; /* Forced white text */
  padding: 12px 20px !important;
  transition: var(--mk-transition) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: block !important;
  text-decoration: none !important;
  font-size: 14px !important;
  background: transparent !important;
}

.SearchList__autoSuggestListItem:last-child,
.SearchList__normal:last-child {
  border-bottom: none !important;
}

/* Hover States */
[class*="SearchResult"] a:hover,
.zd-searchResults a:hover,
.SearchList__autoSuggestListItem:hover,
.SearchList__normal:hover,
.SearchList__autoSuggestListItem[data-act-selected="true"] {
  background: rgba(139, 92, 246, 0.2) !important;
  color: var(--mk-purple-light) !important;
}

/* Search Highlighting */
.SearchList__listmenu b,
.SearchList__listmenu strong {
  color: var(--mk-purple-primary) !important;
  font-weight: 700 !important;
}


/* ============================================
   5. CATEGORY CARDS
   ============================================ */
/* CRITICAL: Remove white border from li wrapper */
.WidgetContainer__list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  list-style: none !important;
}

.WidgetContainer__contentList {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override ALL commonStyle borders/backgrounds */
.WidgetContainer__contentList.commonStyle__margin0,
.WidgetContainer__contentList.commonStyle__padding0,
.WidgetContainer__list.commonStyle__listStyleNone,
[class*="commonStyle__"] {
  border: none !important;
  box-shadow: none !important;
}

/* First li contains the category cards */
.WidgetContainer__contentList:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Card container row - Three column grid */
.KbCategoryContainer__row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 per row */
  gap: 24px !important; /* Balanced gap */
  justify-content: center !important;
  max-width: 1100px !important; 
  margin: 0 auto !important;
  padding-top: 20px !important; /* Tightened from 32px */
  padding-bottom: 20px !important; 
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile Responsiveness for Grid */
@media (max-width: 1023px) {
  .KbCategoryContainer__row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .KbCategoryContainer__row {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* Override Zoho's flex classes */
.KbCategoryContainer__row.commonStyle__disFlexRow {
  display: grid !important;
}

/* Card container - remove any inherited styles */
.KbCategory__box {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.KbCategory__box.commonStyle__verticalTop {
  vertical-align: top;
}

/* The actual card styling */
.KbCategory__boxInner {
  background: var(--mk-bg-card) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-lg) !important;
  padding: 28px !important;
  height: 100%;
  transition: var(--mk-transition);
  position: relative;
  overflow: visible;
}

/* Card hover state with glow */
.KbCategory__boxInner:hover {
  background: var(--mk-bg-card-hover) !important;
  border-color: var(--mk-border-accent) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
              0 0 40px var(--mk-purple-glow) !important;
}

/* Category icon/avatar */
.KbCategory__avatarPhoto {
  margin-bottom: 0;
}

.Avatar__avatar {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, var(--mk-purple-primary), var(--mk-blue));
  border-radius: var(--mk-radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.Avatar__avatarImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Media object layout */
.MediaObject__mediaObject {
  gap: 20px;
}

.MediaObject__mediaFigure {
  flex-shrink: 0;
}

/* Category title */
.KbCategory__topic {
  margin-bottom: 8px !important;
}

.KbCategory__topic a {
  color: var(--mk-text-primary) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  transition: var(--mk-transition);
}

.KbCategory__topic a:hover {
  color: var(--mk-purple-light) !important;
}

/* Category description */
.KbCategory__topicContent {
  color: var(--mk-text-secondary) !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Hide the three-dot menu */
.KbCategory__dottedPopup,
.DottedMenuPopup__displayInB {
  display: none !important;
}


/* ============================================
   6. ARTICLE LISTS (Recent/Popular)
   ============================================ */
/* List section container */
.WidgetContainer__boxSplit {
  background: var(--mk-bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-lg);
  padding: 24px;
  margin-bottom: 12px; /* Reduced from 24px */
}

/* List header container */
.ListHeader__listHeader2 {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mk-border-subtle);
}

/* List header icon */
.ListHeader__listIcon2 {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--mk-purple-primary), var(--mk-blue));
  border-radius: var(--mk-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
}

.ListHeader__listIcon2 svg {
  width: 20px;
  height: 20px;
  fill: white !important;
  color: white !important;
}

.ListHeader__listIcon2 svg use {
  fill: white !important;
}

/* List header title */
.ListHeader__header2 {
  color: var(--mk-text-primary) !important;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* Individual article item */
.ContentList__topicList,
.ArticleList__articles,
.ArticleList__item {
  display: flex !important;
  align-items: center !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  transition: var(--mk-transition) !important;
  text-decoration: none !important;
}

.ContentList__topicList:hover,
.ArticleList__articles:hover,
.ArticleList__item:hover {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: var(--mk-purple-accent) !important;
  transform: translateX(4px);
}

/* Document icon refinement */
.ContentList__documentIcon,
.ArticleList__icon,
[class*="ArticleList__icon"] {
  margin-right: 16px !important;
  flex-shrink: 0 !important;
}

.ContentList__documentIcon svg,
.ArticleList__icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--mk-purple-light) !important;
  opacity: 1 !important;
}

/* Article link */
.ContentList__listLink,
.ArticleList__titleLink {
  color: var(--mk-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: var(--mk-transition) !important;
}

.ContentList__topicList:hover .ContentList__listLink,
.ArticleList__item:hover .ArticleList__titleLink {
  color: var(--mk-text-primary) !important;
}

/* Add subtle arrow on hover */
.ContentList__topicList::after {
  content: '→';
  margin-left: auto;
  color: var(--mk-purple-primary);
  opacity: 0;
  transform: translateX(-8px);
  transition: var(--mk-transition);
}

.ContentList__topicList:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Side by side layout for Recent/Popular */
.WidgetContainer__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.WidgetContainer__contentList {
  margin: 0 !important;
  padding: 0 !important;
}

/* Two column layout for article lists */
@media (min-width: 768px) {
  .WidgetContainer__contentList:nth-child(2),
  .WidgetContainer__contentList:nth-child(3) {
    display: inline-block;
    width: calc(50% - 12px);
    vertical-align: top;
  }

  .WidgetContainer__contentList:nth-child(2) {
    margin-right: 24px !important;
  }
}

/* Footer button hover state */
.Button__footerBtn:hover {
  background-color: var(--mk-purple-light);
  border: 1px solid transparent;
}

/* ============================================
   7. FOOTER
   ============================================ */
/* Target Zoho's footer containers to blend with background */
footer#footerContainer,
#footerContainer,
.Footer__footerBg,
.zd-footer,
#footer,
[data-id="footerContainer"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important; /* Total blend */
  color: #ffffff !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
}

/* Specific inner container tightening */
.Footer__container1,
.Footer__footerInfo,
.Footer__footerContent {
  padding-top: 48px !important; /* Balanced spacing with categories above */
  padding-bottom: 48px !important;
  margin: 0 auto !important;
  min-height: auto !important;
}

/* Kill trailing space after footer and in main portal wrappers */
body, 
html,
portal,
#container,
.AccessibilityKeyboardNavigation__common {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Centering helper for footer content - Restored Side-by-Side */
.zd-footer .Footer__container,
.zd-footer-container,
.Footer__footerContainer,
.Footer__footerInfo {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: row !important; /* Side by side */
  align-items: center !important;
  justify-content: space-between !important; /* Split left/right */
}

/* Mobile Footer Refinement */
@media (max-width: 640px) {
  .zd-footer .Footer__container,
  .zd-footer-container,
  .Footer__footerContainer,
  .Footer__footerInfo {
    padding: 0 20px !important;
    flex-direction: column !important;
    align-items: center !important; /* Centered */
    text-align: center !important;
    gap: 24px !important;
  }

  .zd-footer .commonStyle__zt1Button,
  #SubmitTicketBtn,
  .Button__footerBtn,
  [class*="footerBtn"] {
    width: 100% !important;
    min-width: 100% !important;
    pointer-events: auto !important; /* Interaction safety */
    z-index: 10001 !important;
    position: relative !important;
  }

  .Footer__content {
     width: 100% !important;
     text-align: center !important;
  }
}

/* Force legend/title text in footer to be visible */
.zd-footer h2,
#footer h2,
.Footer__content h2,
[class*="footer"] h2,
.zd-footer p,
#footer p,
.Footer__content p,
.Footer__footerQus,
.Footer__footerDescription,
[class*="footer"] p {
  color: #ffffff !important;
  text-align: left !important;
  opacity: 1 !important;
  margin: 0 !important;
}

.zd-footer h2,
#footer h2,
.Footer__footerQus {
  font-size: 28px !important; /* Slightly smaller to fit side-by-side */
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  text-align: left !important;
}

/* Style the Submit Ticket button with brand gradient */
.zd-footer .commonStyle__zt1Button,
#SubmitTicketBtn,
.Button__footerBtn,
[class*="footerBtn"] {
  background: linear-gradient(135deg, var(--mk-purple-primary), var(--mk-blue)) !important;
  border: none !important;
  border-radius: var(--mk-radius-md) !important;
  color: #ffffff !important;
  padding: 16px 48px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: var(--mk-transition) !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 200px !important;
  text-align: center !important;
  margin-top: 0 !important; /* Remove top margin in horizontal layout */
}

.zd-footer .commonStyle__zt1Button:hover,
#SubmitTicketBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5) !important;
}

/* ============================================
   8. REMOVE TOGGLER COMPLETELY
   ============================================ */
.zd-backToTop,
.commonStyle__backToTop,
#backToTop,
.AppContainer__backToTop,
[class*="backToTop"],
[data-id="toparrow"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}


/* ============================================
   9. CATEGORY & ARTICLE PAGES (Content Cleanup)
   ============================================ */
/* Deep kill borders on all article/category headings and list items */
.ArticleList__categoryName,
.CategoryContainer__name,
.KbArticleContainer__header,
.TopicHeader__topicName,
.ArticleContainer__title,
.ArticleList__categoryHead,
.WidgetContainer__header,
.ArticleContainer__widgetTitle,
.ArticleList__item,
.ArticleList__articles,
.ListHeader__listHeader1,
.ListHeader__listHeader,
.ListHeader__headerContent,
[class*="ListHeader__listHeader"],
[class*="ListHeader__headerContent"],
[class*="CategoryName"],
[class*="categoryHead"],
[class*="widgetTitle"],
[class*="borderBottom"] {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Specific cleanup for headings to ensure no inner boxes/borders */
.ListHeader__header1,
.ListHeader__header3,
.ListHeader__headerContent,
h5.ListHeader__header1,
h5.ListHeader__header3,
[class*="header3"],
[class*="header1"] {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Specific cleanup for icons to ensure no inherited borders/boxes */
.ListHeader__listIcon1,
.ListHeader__listIcon3,
.ListHeader__listIcon,
.ArticleList__icon,
.ArticleListRightContainer__mediaFigure,
[class*="listIcon"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* WIDGET SECTION BOXES: Remove the dark background blocks from sidebars */
.ArticleListRightContainer__widgetSection,
[class*="ArticleListRightContainer__widgetSection"] {
  background: transparent !important;
  border: none !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* Specific heading transparency/glow instead of lines */
.CategoryContainer__name h1,
.KbArticleContainer__header h1,
.WidgetContainer__header h2,
.TopicHeader__topicName,
.ArticleListRightContainer__deskHeading {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.3) !important;
  border: none !important;
}

/* SIDEBAR WIDGET TITLES: "Stablecoins", "Tags", "Related Articles" */
.ListHeader__header1,
.ListHeader__header3,
.ListHeader__headerContent,
.ArticleListRightContainer__deskHeading,
.ArticleList__categoryHead,
.WidgetContainer__header,
.Tags__header,
.ArticleContainer__widgetTitle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0px !important; /* Spacing managed by parent flex/gap */
  font-size: 14px !important;
  text-transform: none !important; /* Removed uppercase */
  letter-spacing: 0.5px !important;
  color: var(--mk-purple-light) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Sidebar Widget Layout: 2-Row Grid Strategy (v8.0.0) */
.ArticleListRightContainer__widgetSection {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  column-gap: 24px !important;
  align-items: start !important;
  border: none !important;
  background: transparent !important;
}

/* Row 1, Column 1: The Icon */
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__fleft {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Row 1, Column 2: The Title (Vertically Centered) */
.ArticleListRightContainer__widgetSection h5.ArticleListRightContainer__deskHeading,
.ArticleListRightContainer__widgetSection .WidgetContainer__header,
.ArticleListRightContainer__widgetSection .ListHeader__header1,
.ArticleListRightContainer__widgetSection .ListHeader__listHeader1 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important; /* Tightened for better density */
  align-self: center !important;
  line-height: 1.2 !important;
}

/* Row 2: The Description, Content or TreeView (Full width, starting under the icon) */
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__categoryDescription,
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__deskDesc,
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__description,
.ArticleListRightContainer__widgetSection .ArticleList__categoryHead,
.ArticleListRightContainer__widgetSection .treeView,
.ArticleListRightContainer__widgetSection .WidgetContainer__content {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
  clear: both !important;
  display: block !important;
  margin-top: 4px !important; /* Tightened spacing for Row 2 */
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  color: var(--mk-text-secondary) !important;
  font-size: 14px !important;
}

/* Special Case: If there is NO fleft icon, move the header back to Column 1 span 2 */
.ArticleListRightContainer__widgetSection:not(:has(.ArticleListRightContainer__fleft)) .ListHeader__listHeader1,
.ArticleListRightContainer__widgetSection:not(:has(.ArticleListRightContainer__fleft)) .WidgetContainer__header {
  grid-column: 1 / span 2 !important;
  justify-content: flex-start !important;
}

/* Special Case: When both a header and a deskHeading exist, push deskHeading to Row 2 */
.ArticleListRightContainer__widgetSection .WidgetContainer__header + h5.ArticleListRightContainer__deskHeading,
.ArticleListRightContainer__widgetSection .ListHeader__listHeader1 + h5.ArticleListRightContainer__deskHeading {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
  margin-top: 12px !important;
  min-height: 0 !important;
  align-items: start !important;
}

/* Ensure secondary items also span full width below */
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__followOption,
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__subscribeDescription {
  grid-column: 1 / span 2 !important;
  margin-left: 0 !important;
}

/* Content Page: Article List Items & Sidebar Widget Alignment */
.ListHeader__listHeader3,
.ListHeader__listHeader1,
[class*="ListHeader__listHeader"] {
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  transition: var(--mk-transition) !important;
  display: flex !important;
  align-items: center !important; /* Hard vertical alignment */
  text-decoration: none !important;
}

/* Remove borders from Sidebar widgets but keep alignment labels clean */
.ArticleListRightContainer__widgetSection .ListHeader__listHeader1 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
}

.ListHeader__listHeader3:hover {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: var(--mk-purple-primary) !important;
  transform: translateX(4px);
}

.ListHeader__listIcon3 {
  margin-right: 20px !important; /* Increased spacing */
  flex-shrink: 0 !important;
  display: flex !important;
}

/* Sidebar Spacing Fixes - Restoring main icon float */
.ArticleListRightContainer__fLeft {
  margin-right: 32px !important; 
  float: left !important;
}

.ListHeader__fLeft {
  margin-right: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ListHeader__listIcon1 {
  margin-right: 24px !important; /* Spacing for secondary widget icons (Section, Tags, etc) */
  flex-shrink: 0 !important;
}

/* Hide the FOLLOW button and Subscribe text (v9.2.0) */
.ArticleListRightContainer__followOption,
.ArticleListRightContainer__subscribeDescription,
.KbDetailRtContainer__followOption,
.KbDetailRtContainer__subscribeDescription,
.FollowButton__buttonContainer,
[class*="followButton"],
[class*="FollowButton"] {
  display: none !important;
}

/* Reading Progress Bar Branding (v10.1.0) */
.Readingprogress__progressBarLine .Readingprogress__progressContainer {
  background: rgba(255, 255, 255, 0.1) !important;
  height: 4px !important;
}

.Readingprogress__progressBarLine .Readingprogress__progressBar {
  background: var(--mk-purple-gradient) !important;
  height: 100% !important;
  box-shadow: 0 0 15px var(--mk-purple-primary) !important;
  display: block !important;
}

/* Article helpful buttons (Thumbs) */
.FeedBack__helpfulBtn,
.ArticleContainer__feedback svg {
  fill: var(--mk-text-secondary) !important;
  transition: all 0.3s ease;
}

.FeedBack__helpfulBtn:hover svg {
  fill: var(--mk-purple-light) !important;
  transform: scale(1.1);
}

/* Brand the TAGS */
.Tags__tagItem,
[class*="tagItem"],
.KbArticleContainer__tag,
.ArticleContainer__tag {
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1px solid var(--mk-border-accent) !important;
  color: var(--mk-purple-light) !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;
}

.Tags__tagItem:hover,
[class*="tagItem"]:hover {
  background: var(--mk-purple-primary) !important;
  border-color: var(--mk-purple-primary) !important;
  color: #ffffff !important;
}

/* ============================================
   10. SEARCH PAGE BRANDING (v11.1.0)
   ============================================ */
/* Main Search Container */
.KnowledgeSearchContainer,
#knowledgeSearchContainer {
  background: transparent !important;
}

/* Search results count text */
.KnowledgeSearchContainer__searchSummary {
  color: var(--mk-text-secondary) !important;
  font-size: 16px !important;
  margin-bottom: 24px !important;
}

/* Search result individual cards */
.KnowledgeSearchContainer__searchResultItem,
.KnowledgeSearchContainer__searchResult {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  transition: var(--mk-transition) !important;
  display: block !important;
  text-decoration: none !important;
}

.KnowledgeSearchContainer__searchResultItem:hover,
.KnowledgeSearchContainer__searchResult:hover {
  background: var(--mk-bg-card-hover) !important;
  border-color: var(--mk-border-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Result title and snippet */
.KnowledgeSearchContainer__articleTitle {
  color: var(--mk-purple-light) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.KnowledgeSearchContainer__articleSnippet {
  color: var(--mk-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Search Page Sidebar Widgets */
.SearchFilter__filterSection,
.KnowledgeSearchRtContainer__widgetSection {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.SearchFilter__filterTitle {
  color: var(--mk-purple-light) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}

/* Radio Buttons & Checkboxes on Search Page */
.Radio__radioLabel,
.CheckBox__checkboxLabel {
  color: var(--mk-text-secondary) !important;
  cursor: pointer !important;
}

.Radio__radioFaux,
.CheckBox__checkboxFaux {
  border-color: var(--mk-purple-mid) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.Radio__radio [type="radio"]:checked + .Radio__radioLabel .Radio__radioFaux,
.CheckBox__inputCheckbox:checked + .CheckBox__checkbox {
  background-color: var(--mk-purple-primary) !important;
  border-color: var(--mk-purple-primary) !important;
}

/* Empty State / No Results */
.NoArticles__noArticlesBox {
  padding: 64px 24px !important;
  text-align: center !important;
}

.NoArticles__noArticlesImg {
  filter: brightness(0.8) hue-rotate(240deg) !important; /* Brand sync for illustration */
  max-width: 300px !important;
  margin-bottom: 32px !important;
  opacity: 0.8 !important;
}

.NoArticles__noArticlesTitle {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

.NoArticles__noArticlesDesc {
  color: var(--mk-text-secondary) !important;
}

/* Back to Help Center Link Button */
.NoArticles__backLink {
  margin-top: 32px !important;
  display: inline-block !important;
}

/* Article Body Cleanup */
.ArticleContainer__body,
.KbArticleContainer__articleBody,
#articleBody {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--mk-text-secondary) !important;
}

.ArticleContainer__body strong,
.ArticleContainer__body b {
  color: #ffffff !important;
}