/* ============================================
   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-accent: rgba(139, 92, 246, 0.5);
  --mk-purple-gradient: linear-gradient(90deg, #8b5cf6, #3b82f6);

  /* Glass Effects */
  --mk-glass-dark: rgba(10, 14, 39, 0.7);
  --mk-glass-light: rgba(255, 255, 255, 0.05);

  /* 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;
  --mk-radius-full: 9999px;

  /* 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 Layout Column Transparency - Kill Ghost Backgrounds (v14.2.0) */
.Layout__layout1,
.Layout__layout2,
.SearchResult__rightPanelDetail,
.SearchResult__widgetRight {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Main container */
#mainContainer,
.Layout__oneColumn,
.Layout__twoColumn,
#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.Input__headerSearch::-webkit-input-placeholder,
.SearchContainer__globalSearch input.Input__headerSearch::-webkit-input-placeholder,
input.Input__headerSearch::-webkit-input-placeholder,
input.Input__inputCommon.Input__headerSearch::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

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

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

.Header__globalSearchAlt input.Input__headerSearch::placeholder,
.SearchContainer__globalSearch input.Input__headerSearch::placeholder,
input.Input__headerSearch::placeholder,
input.Input__inputCommon.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 Suggestive Dropdown - Specific Targeting (v14.3.0) */
.SearchList__listmenu,
.zd-searchResults {
  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,
h5.ListHeader__header2 {
  color: var(--mk-text-primary) !important;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* 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: 12px 32px !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: 160px !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 (Aligned with text) */
.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: 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 */
/* Target by class cascade instead of :has() for Zoho compatibility */
.ArticleListRightContainer__widgetSection .ListHeader__listHeader1,
.ArticleListRightContainer__widgetSection .WidgetContainer__header {
  grid-column: 2 !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 (v18.1.0) - Replaced by consolidated rules below */

/* 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 LHS Header Branding (v16.1.0) */
.Layout__layout1 .SearchResult__articleTitle {
  background: var(--mk-glass-dark) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  padding: 16px 24px !important;
  margin-bottom: 32px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Force text visibility inside branded LHS header */
.Layout__layout1 .SearchResult__articleTitle h3,
.Layout__layout1 .SearchResult__articleTitle span,
.Layout__layout1 .SearchResult__articleTitle span.SearchResult__moduleName {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: transparent !important; /* Remove stray highlights */
  border: none !important;
}

/* Align count suffix separately if needed */
.Layout__layout1 .SearchResult__articleTitle h3 span:last-child {
  opacity: 0.8 !important;
  margin-left: 4px !important;
}

/* Article & Search Result Cards Alignment (v18.2.0) */
.Layout__layout1 .ListHeader__listHeader3,
.Layout__layout1 .ListHeader__listHeader1,
.Layout__layout1 [class*="ListHeader__listHeader"],
.Layout__layout1 .KnowledgeSearchContainer__searchResultItem,
.Layout__layout1 .KnowledgeSearchContainer__searchResult {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 20px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  background: var(--mk-glass-dark) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-lg) !important;
  transition: var(--mk-transition) !important;
  align-items: start !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

/* Force Content Containers to use Grid Column 2 */
.Layout__layout1 .ListHeader__headerContent,
.Layout__layout1 .KnowledgeSearchContainer__searchResultItemTitle,
.Layout__layout1 .KnowledgeSearchContainer__searchResultItemSnippet {
  grid-column: 2 !important;
  width: 100% !important;
  display: block !important;
}

/* Hard Flattening: Treat titles and snippets as direct grid items if they escape parents */
.Layout__layout1 .ListHeader__header3,
.Layout__layout1 .ListHeader__linkText {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  display: block !important;
}

.Layout__layout1 .ListHeader__description,
.Layout__layout1 .KnowledgeSearchContainer__searchResultItemSnippet {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  opacity: 0.8 !important;
  line-height: 1.6 !important;
  display: block !important;
}

/* Icon Alignment */
.Layout__layout1 .ListHeader__listIcon1,
.Layout__layout1 .ListHeader__listIcon3,
.Layout__layout1 .ListHeader__listIcon,
.Layout__layout1 .ListHeader__fLeft,
.Layout__layout1 .KnowledgeSearchContainer__searchResultItemImg,
.Layout__layout1 .SearchResult__itemIcon,
.Layout__layout1 span[class*="ListIcon"] {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 48px !important;
  height: 48px !important;
}

/* Hide legacy clear elements that break grid flow */
.Layout__layout1 .ListHeader__clBoth,
.Layout__layout1 .commonStyle__clBoth {
  display: none !important;
}

/* Remove stray highlights and backgrounds from LHS result content */
.Layout__layout1 .ListHeader__headerContent,
.Layout__layout1 .ListHeader__description,
.Layout__layout1 .ListHeader__header3,
.Layout__layout1 .ListHeader__header3 a,
.Layout__layout1 .ListHeader__linkText {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Ensure headings are clean white and appropriately sized */
.Layout__layout1 .ListHeader__header3 a,
.Layout__layout1 .ListHeader__linkText {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Ensure snippet text is visible and clean */
.Layout__layout1 .ListHeader__description {
  color: var(--mk-text-secondary) !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* Brand Search Highlights (v16.4.0) */
.SearchResultmark,
.KnowledgeSearchContainer__searchResultItem b,
.KnowledgeSearchContainer__searchResultItem strong,
.ListHeader__listHeader3 b,
.ListHeader__listHeader3 strong {
  background: rgba(139, 92, 246, 0.2) !important; /* Subtle purple glow */
  color: var(--mk-purple-light) !important;
  border-radius: 2px !important;
  padding: 0 2px !important;
  font-weight: 600 !important;
}

.Layout__layout1 .ListHeader__listHeader3:hover,
.KnowledgeSearchContainer__searchResultItem:hover,
.KnowledgeSearchContainer__searchResult:hover {
  background: var(--mk-glass-light) !important;
  border-color: var(--mk-purple-primary) !important;
  transform: translateY(-2px) !important;
  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;
}

/* Sidebar Padding & Alignment cleanup (v14.3.0) */
.Layout__layout2 .SearchResult__rightPanelDetail,
.Layout__layout2 .SearchResult__widgetRight {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Search Page Sidebar Widgets - Balanced Glass Cards */
.Layout__layout2 .SearchResult__rightPanelDetail .SearchResult__widgetRight .SearchResult__searchPart,
.SearchFilter__filterSection,
.SearchResult__widgetSection,
.KnowledgeSearchRtContainer__widgetSection {
  background: var(--mk-glass-dark) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  padding: 20px !important; /* Reclaimed internal width */
  margin-bottom: 24px !important; /* Balanced vertical rhythm */
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sidebar Headings Alignment - Clean & Edge-Aligned */
.SearchResult__searchPart .ListHeader__listHeader1,
.SearchFilter__filterTitle,
.SearchResult__widgetSection .ListHeader__listHeader1,
.KnowledgeSearchRtContainer__deskHeading {
  color: var(--mk-purple-light) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-bottom: 16px !important; 
  border: none !important;
  padding: 0 !important; /* Edge aligned */
  background: transparent !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sidebar List Item Cleanup - Kill Ghost Boxes */
li.SearchResult__boxList,
li.Menu__menuItem {
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Help Center / Tree Menu Refinement (v15.5.0) */
li.Menu__menuItem.commonStyle__displayBlock {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 4px 0 !important;
  border-radius: var(--mk-radius-sm) !important;
  transition: var(--mk-transition) !important;
  gap: 0 !important;
}

li.Menu__menuItem.commonStyle__displayBlock:hover {
  background: transparent !important;
  color: var(--mk-purple-light) !important;
}

/* Vertical Baseline - Align Icons and Text with the Header above */
.SearchResult__widgetSection .ListHeader__listHeader1 {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

.SearchResult__widgetSection .ListHeader__fLeft,
.SearchResult__widgetSection .ListHeader__listIcon1 {
  margin-right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

/* Force SVG Folder Icon Branding and Visibility - Targeted direct class for portal-wide stability */
svg.ListHeader__listIcon {
  fill: var(--mk-purple-light) !important;
  color: var(--mk-purple-light) !important;
  opacity: 1 !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  visibility: visible !important;
}

svg.ListHeader__listIcon use {
  fill: inherit !important;
  stroke: inherit !important;
  opacity: 1 !important;
}

/* Specific Arrow/Caret Normalization - Zeroing out offsets */
.SearchResult__widgetSection span.Menu__arrow.Menu__cntSpce {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  text-indent: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

/* Hard Reset for Caret: Force character-based chevron for total control */
.SearchResult__widgetSection span.Menu__arrow.Menu__cntSpce::before {
  content: '\203A' !important; /* Single Right-Pointing Angle Quotation Mark */
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; /* Matches Folder Icon container width */
  height: 32px !important;
  font-size: 24px !important; /* Visual match for folder weight */
  margin-right: 12px !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  text-indent: 0 !important;
  background: none !important;
  border: none !important;
  transform: none !important;
  color: var(--mk-purple-light) !important;
  line-height: 1 !important;
}

.SearchResult__widgetSection li.Menu__menuItem a,
.SearchResult__widgetSection .SearchResult__moduleName {
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.SearchResult__widgetSection .Menu__extraInfo {
  color: var(--mk-text-secondary) !important;
  margin-left: 8px !important;
  font-size: 13px !important;
}

/* Sidebar Icon Branded Sync */
.SearchResult__widgetSection .Icon__icon,
.SearchResult__widgetSection .ListHeader__listIcon {
  fill: var(--mk-purple-light) !important;
  margin-right: 12px !important;
  opacity: 0.9 !important;
}

/* Branded Radio/Checkbox Container - Main interactive area */
label.Radio__radioLabel.commonStyle__cursor,
label.CheckBox__checkboxLabel.commonStyle__cursor {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  gap: 12px !important;
  margin-bottom: 8px !important; /* Spacing between items */
}

label.Radio__radioLabel.commonStyle__cursor:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: var(--mk-purple-primary) !important;
}

/* Radio Button Shell - Reset Zoho defaults */
span.Radio__radio.commonStyle__positionRel {
  display: contents !important; /* Remove this from the layout flow to prevent ghost boxes */
}

/* Radio Faux Ring */
.Radio__radioFaux {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--mk-purple-mid) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inner Dot Selection via pseudo-element for stability */
.Radio__radio [type="radio"]:checked + .Radio__radioLabel .Radio__radioFaux::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--mk-purple-primary) !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Hide legacy Zoho dot markers and unnecessary spans */
.Radio__formElementLabel,
.Radio__radio [type="radio"] {
  display: none !important;
}

/* Checked State Container Decoration */
.Radio__radio [type="radio"]:checked + .Radio__radioLabel.commonStyle__cursor {
  border-color: var(--mk-purple-primary) !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

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

/* Force text visibility for labels - Robust alignment (v12.0.0) */
label.Radio__radioLabel.commonStyle__cursor span:last-child,
label.CheckBox__checkboxLabel.commonStyle__cursor span:last-child,
span.undefined[class*="SearchResult__labelTree"],
[class*="SearchResult__labelTree"] {
  display: contents !important; /* Strips the visual container box while preserving the text node */
  color: #ffffff !important;
  font-size: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure the label container handles the text correctly */
label.Radio__radioLabel.commonStyle__cursor,
label.CheckBox__checkboxLabel.commonStyle__cursor {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Empty Search Branding (v22.0.0) - Focused Cyber Magnifier */
.NoContent__noContent[data-id="noSearchResult"] {
  padding: 100px 40px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Illustration Container - Focal Point for the Radar Pulse */
.NoContent__noContent[data-id="noSearchResult"] > div:first-child {
  position: relative !important;
  width: 240px !important;
  height: 240px !important;
  margin-bottom: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide legacy cartoon SVG */
.NoContent__noContent[data-id="noSearchResult"] svg.Icon__icon {
  display: none !important;
}

/* Radar Pulse Layer 1 (Outer Glow) */
.NoContent__noContent[data-id="noSearchResult"] > div:first-child::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: mk-radar-pulse 4s infinite ease-in-out !important;
  z-index: 1 !important;
}

/* High-Contrast Branded Search Icon focal point */
.NoContent__noContent[data-id="noSearchResult"] > div:first-child .SearchResult__info_icon_fallback {
  display: none !important; /* Placeholder safety */
}

/* Injection of the replacement icon focal point (No Border) */
.NoContent__noContent[data-id="noSearchResult"] > div:first-child::after {
  content: "" !important;
  position: absolute !important;
  width: 110px !important;
  height: 110px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.9)) !important;
  z-index: 5 !important;
  transform: translateZ(0) !important;
}

@keyframes mk-radar-pulse {
  0% { transform: scale(0.85); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
  100% { transform: scale(0.85); opacity: 0.3; }
}

.NoContent__noContent .SearchResult__description {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.03em !important;
}

.NoContent__noContent .SearchResult__info {
  color: var(--mk-text-secondary) !important;
  font-size: 16px !important;
  margin-bottom: 48px !important;
  max-width: 400px !important;
}

/* Back to Help Center Link Button - Branded variant */
.NoContent__noContent .SearchResult__backOption a {
  background: var(--mk-purple-gradient) !important;
  color: #ffffff !important;
  padding: 14px 36px !important;
  border-radius: var(--mk-radius-full) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  letter-spacing: 0.5px !important;
}

.NoContent__noContent .SearchResult__backOption a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5) !important;
  filter: brightness(1.1) !important;
}

/* Ticket Form Branding (v24.1.0) - Surgical Zoho Targeting */
#layoutContainer[data-id="ticketForm"] {
  background: transparent !important;
}

/* Form Titles & Sections */
.TicketFormLeftContainer__formTitle {
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  margin-bottom: 40px !important;
  letter-spacing: -0.02em !important;
}

.TicketFormLeftContainer__sectionName {
  color: var(--mk-text-secondary) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--mk-border-subtle) !important;
  padding-bottom: 12px !important;
  margin-top: 48px !important;
}

/* Form Labels & Required Stars */
.FormElement__formLabelvertical {
  color: #ffffff !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  font-size: 15px !important;
}

.FormElement__required::after {
  color: var(--mk-purple-light) !important;
  margin-left: 4px !important;
}

/* Form Inputs (Text, Email, etc) */
.Input__formInput, 
.Input__inputCommon {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.Input__formInput:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--mk-purple-light) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2) !important;
}

/* Dropdown Menus */
.DropDown__dropdown {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-md) !important;
  padding: 12px 18px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.DropDown__selectedContent {
  color: #ffffff !important;
  font-weight: 400 !important;
}

/* Replace carets with character-based chevrons (v26.0.0) */
.DropDown__arrowOpen svg {
  display: none !important;
}

.DropDown__arrowOpen::before {
  content: '\203A' !important; /* Single right-pointing angle quotation mark */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 26px !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important; /* Point down */
  line-height: 1 !important;
  opacity: 0.9 !important;
  margin-top: 4px !important; /* Vertical alignment nudge (v31.1.0) */
  margin-right: 12px !important; /* Adjustment for container position */
}

/* Sidebar Branding (Popular Articles) */
.Layout__layout2 .TicketFormRightContainer__rightPanelDetail,
.Layout__layout2 .ScrollSticky__type2,
.Layout__layout2 .TicketFormRightContainer__widgetRight {
  background: transparent !important;
  border: none !important;
}

.Layout__layout2 .TicketFormRightContainer__widgetSection {
  background: var(--mk-glass-dark) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: var(--mk-radius-lg) !important;
  padding: 24px !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}

.Layout__layout2 .ListHeader__listHeader1 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}

.Layout__layout2 .ListHeader__listIcon1 {
  float: none !important; /* Kill legacy floats */
  display: flex !important;
  align-items: center !important;
}

.Layout__layout2 .ListHeader__listIcon1 svg {
  fill: var(--mk-purple-light) !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}

.Layout__layout2 .ListHeader__header1 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.Menu__menuItem a.Link__link {
  color: var(--mk-text-secondary) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease !important;
}

.Menu__menuItem a.Link__link:hover {
  color: var(--mk-purple-light) !important;
  padding-left: 6px !important;
}

/* Rich Text Editor Overrides */
.KB_Editor_menus,
.KB_Editor_MultiTools {
  background: rgba(30, 30, 45, 0.95) !important;
  border-bottom: 1px solid var(--mk-border-subtle) !important;
  border-radius: 0 !important;
}

.zde_toolbarListItem span svg {
  fill: #ffffff !important;
  opacity: 0.8 !important;
}

.zde_toolbarListItem:hover span svg {
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px var(--mk-purple-light)) !important;
}

/* Attachment Pin & Link */
.FileUpload__attachPin svg {
  fill: var(--mk-purple-light) !important;
}

.FileUpload__userLink {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Mobile Ticket Layout (v25.0.0) - Prevent Sidebar Overlap */
@media (max-width: 1024px) {
  #layoutContainer[data-id="ticketForm"],
  .Layout__twoColumn[data-id="ticketForm"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }

  .Layout__layout1[data-id="column1"],
  .Layout__layout2[data-id="column2"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Disable absolute/fixed sticking on smaller screens */
  .Layout__layout2 .ScrollSticky__type2 {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    padding-top: 20px !important;
  }
}
/* Pagination Alignment & Branding (v17.1.0) */
.Layout__layout1 .SearchResult__pagination,
.Layout__layout1 .Pagination__pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 40px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Neutralize Zoho Li Boxes */
.Layout__layout1 li.Pagination__arrowBox {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

.Layout__layout1 .Pagination__paginationUl {
  display: flex !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

/* Hard Reset for Prev/Next Buttons - Using character chevrons */
.Layout__layout1 .Pagination__arrowBox a[data-id] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: var(--mk-glass-dark) !important;
  border: 1px solid var(--mk-border-subtle) !important;
  border-radius: 50% !important;
  color: var(--mk-purple-light) !important;
  cursor: pointer !important;
  transition: var(--mk-transition) !important;
  position: relative !important;
  text-decoration: none !important;
  transform: none !important; /* Force rotation reset to fix up/down orientation */
}

/* Hide original SVG icons */
.Layout__layout1 .Pagination__arrowBox svg {
  display: none !important;
}

/* Inject Character Chevrons for total alignment control */
.Layout__layout1 a[data-id="prev_page"]::before {
  content: '\2039' !important; /* Single left-pointing angle quotation mark */
  font-size: 32px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin-right: 2px !important;
  margin-top: -4px !important; /* Visual vertical correction for better centering */
  transform: none !important;
}

.Layout__layout1 a[data-id="next_page"]::before {
  content: '\203A' !important; /* Single right-pointing angle quotation mark */
  font-size: 32px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  margin-top: -4px !important; /* Visual vertical correction for better centering */
  transform: none !important;
}

/* Hover state and disabled state cleanup */
.Layout__layout1 .Pagination__arrowBox a[data-id]:hover:not([aria-disabled="true"]) {
  background: var(--mk-glass-light) !important;
  border-color: var(--mk-purple-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
}

.Layout__layout1 a[aria-disabled="true"] {
  opacity: 0.3 !important;
  cursor: default !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
}

.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;
}