/* ============================================
   BATCHLY HELP CENTER – ZOHO DESK CSS v9
   Icons reverted to Zoho defaults
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── GLOBAL ── */
body, html {
  background: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #1E1637 !important;
  -webkit-font-smoothing: antialiased !important;
}

[class*="portalContainer"],
[class*="AppContainer"],
[class*="portal_"],
#portal_main, #main, #container,
#middle_container, [id*="middle_container"] {
  background: #FFFFFF !important;
}

/* ── NAVBAR ── */
.Header__navbar {
  background: #1E1637 !important;
  border-bottom: 1px solid rgba(162, 136, 248, 0.08) !important;
  box-shadow: none !important;
}

.Header__navbar .Header__container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 36px !important;
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
}

.Header__logo a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.Header__logo img {
  height: 43px !important;
  width: auto !important;
}

.Header__name { display: none !important; }
.Header__clBoth { display: none !important; }
.Header__menuTab { margin-left: auto !important; }

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

.Header__tabsTab a,
.Header__tabsTab span {
  display: block !important;
  padding: 7px 16px !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.Header__tabsTab a:hover,
.Header__tabsTab span:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}

.Header__tabsTab.active a,
.Header__tabsTab.active span {
  color: #fff !important;
  background: rgba(162,136,248,0.15) !important;
}

/* ── HERO / SEARCH ── */
.Header__searchSection {
  background: #1E1637 !important;
  padding: 48px 36px 56px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.Header__searchTitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.Header__description {
  font-size: 15px !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
}

/* ============================================
   LAYOUT CONTAINER
   ============================================ */
#layoutContainer {
  max-width: 1100px !important;
  margin: 32px auto !important;
  padding: 0 36px !important;
  background: transparent !important;
}

/* Force left alignment on everything in layout */
#layoutContainer a,
#layoutContainer span,
#layoutContainer div,
#layoutContainer li,
#layoutContainer p,
#layoutContainer h2,
#layoutContainer h3,
#layoutContainer h4 {
  text-align: left !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* All article/KB links */
#layoutContainer a {
  color: #1E1637 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

#layoutContainer a:hover {
  color: #A288F8 !important;
}

/* Category titles */
#layoutContainer h2,
#layoutContainer h3,
#layoutContainer h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1E1637 !important;
}

/* ============================================
   CATEGORY CARDS
   (FIXED: removed subCategoryContainer from card styling)
   ============================================ */
[class*="KbSubCategoryContainer__contentList"] {
  background: #F9F9F9 !important;
  border: 1px solid rgba(30,22,55,0.06) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  margin-bottom: 20px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

[class*="KbSubCategoryContainer__contentList"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #A288F8, #c4b0ff) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}

[class*="KbSubCategoryContainer__contentList"]:hover {
  border-color: rgba(162,136,248,0.18) !important;
  box-shadow: 0 10px 30px rgba(30,22,55,0.06) !important;
}

[class*="KbSubCategoryContainer__contentList"]:hover::before {
  opacity: 1 !important;
}

/* FIX: explicitly neutralise the OUTER wrapper frame */
#subCategoryContainer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#subCategoryContainer::before,
#subCategoryContainer::after {
  content: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Category header divider */
[class*="ListHeader__listHeader"],
[class*="ListHeader__listHeader2"] {
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(30,22,55,0.05) !important;
}

/* ============================================
   HIDE THREE-DOT MENUS
   ============================================ */
[class*="KbSubCategoryContainer"] [class*="dot"],
[class*="KbSubCategoryContainer"] [class*="Dot"],
[class*="KbSubCategoryContainer"] [class*="more"],
[class*="KbSubCategoryContainer"] [class*="More"],
[class*="KbSubCategoryContainer"] [class*="ellipsis"],
[class*="KbSubCategoryContainer"] [class*="Ellipsis"],
[class*="KbSubCategoryContainer"] [class*="optionMenu"],
[class*="KbSubCategoryContainer"] [class*="OptionMenu"],
[class*="KbSubCategoryContainer"] [class*="option_menu"],
[class*="KbSubCategoryContainer"] [class*="ActionMenu"],
[class*="KbSubCategoryContainer"] [class*="actionMenu"],
[class*="KbSubCategoryContainer"] [class*="action_menu"],
[class*="ListHeader"] [class*="dot"],
[class*="ListHeader"] [class*="more"],
[class*="ListHeader"] [class*="ellipsis"],
[class*="ListHeader"] [class*="option"],
[class*="ListHeader"] [class*="action"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================
   ARTICLE LINKS
   ============================================ */
[class*="ContentList__topicList"],
[class*="contentList__topicList"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 13px 16px !important;
  margin: 6px 0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(30,22,55,0.05) !important;
  transition: all 0.12s ease !important;
  cursor: pointer !important;
}

[class*="ContentList__topicList"]:hover,
[class*="contentList__topicList"]:hover {
  background: rgba(162,136,248,0.04) !important;
  border-color: rgba(162,136,248,0.2) !important;
  transform: translateX(4px) !important;
}

[class*="ContentList__topicList"] a,
[class*="ContentList__topicList"] span,
[class*="ContentList__topicList"] div,
[class*="contentList__topicList"] a,
[class*="contentList__topicList"] span,
[class*="contentList__topicList"] div {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Small doc icons in article rows */
[class*="ContentList__topicList"] [class*="icon"],
[class*="contentList__topicList"] [class*="icon"],
[class*="ContentList__topicList"] svg,
[class*="contentList__topicList"] svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  margin-right: 12px !important;
  opacity: 0.35 !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

[class*="ContentList__topicList"]:hover [class*="icon"],
[class*="contentList__topicList"]:hover [class*="icon"],
[class*="ContentList__topicList"]:hover svg,
[class*="contentList__topicList"]:hover svg {
  opacity: 0.6 !important;
}

/* ============================================
   BREADCRUMB / SEARCH BAR
   ============================================ */
[class*="BreadCrumb"],
[class*="breadcrumb"],
[class*="Breadcrumb"] {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 14px 36px !important;
  font-size: 13px !important;
  color: #888 !important;
}

[class*="BreadCrumb"] a,
[class*="breadcrumb"] a {
  color: #A288F8 !important;
  text-decoration: none !important;
}

[class*="searchContainer"] input,
[class*="SearchBar"] input,
[id*="global_leftpanel_search"] input {
  border: 1px solid #EEEEEE !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  background: #fff !important;
}

[class*="searchContainer"] input:focus,
[class*="SearchBar"] input:focus {
  border-color: #A288F8 !important;
  box-shadow: 0 0 0 3px rgba(162,136,248,0.1) !important;
  outline: none !important;
}

/* ============================================
   ARTICLE DETAIL PAGE
   ============================================ */
[class*="articleBody"],
[class*="ArticleBody"],
[class*="article-body"],
[class*="solnContent"],
[class*="SolnContent"] {
  max-width: 760px !important;
  margin: 32px auto !important;
  padding: 36px !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(30,22,55,0.06) !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
  color: #1E1637 !important;
}

[class*="articleBody"] h1,
[class*="solnContent"] h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1E1637 !important;
  margin-bottom: 16px !important;
}

[class*="articleBody"] h2,
[class*="solnContent"] h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 28px 0 12px !important;
}

[class*="articleBody"] a,
[class*="solnContent"] a {
  color: #A288F8 !important;
}

[class*="articleBody"] code,
[class*="solnContent"] code {
  background: rgba(162,136,248,0.08) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

/* ============================================
   FOOTER / TICKET CTA
   ============================================ */
footer, [role="contentinfo"],
#footerContainer, [id*="footer"] {
  background: #1E1637 !important;
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Inter', sans-serif !important;
}

footer a, [role="contentinfo"] a {
  color: #A288F8 !important;
}

[class*="submitTicket"],
[class*="SubmitTicket"],
[class*="ticket_section"],
[class*="ticketSection"] {
  background: #1E1637 !important;
  color: #fff !important;
  padding: 44px 36px !important;
  text-align: center !important;
}

[class*="submitTicket"] h2,
[class*="submitTicket"] h3,
[class*="SubmitTicket"] h2 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-align: center !important;
}

[class*="submitTicket"] p,
[class*="SubmitTicket"] p {
  color: rgba(255,255,255,0.5) !important;
  font-size: 14px !important;
  text-align: center !important;
}

[class*="submitTicket"] a,
[class*="submitTicket"] button,
[class*="SubmitTicket"] a,
[class*="SubmitTicket"] button {
  background: #A288F8 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 13px 32px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  font-size: 14px !important;
}

[class*="submitTicket"] a:hover,
[class*="submitTicket"] button:hover {
  background: #8B6EF0 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .Header__navbar .Header__container {
    padding: 0 16px !important;
    height: 56px !important;
  }
  .Header__tabsTab a,
  .Header__tabsTab span {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }
  .Header__searchSection {
    padding: 36px 16px 44px !important;
  }
  .Header__searchTitle { font-size: 26px !important; }
  #layoutContainer { padding: 0 16px !important; }
  [class*="KbSubCategoryContainer__contentList"] {
    padding: 20px 16px !important;
  }
}

@media (max-width: 480px) {
  .Header__menuTab { display: none !important; }
  .Header__menuicon {
    display: block !important;
    margin-left: auto !important;
  }
}
/* ── Match Payment Process icon size to General ── */
.ListHeader__listIcon,
svg[class*="ListHeader__listIcon"] {
  width: 40px !important;
  height: 40px !important;
}
/* ── Hide "Still can't find an answer" section ── */
.Footer__footerInfo,
[class*="Footer__footerInfo"] {
  display: none !important;
}
/* ── Hide Sign In ── */
#portal_tabsignin,
.LoginDetail__signin,
.globalSignin {
  display: none !important;
}
/* ── Footer stretch to bottom ── */
.Footer__footerBg {
  background: #1E1637 !important;
  min-height: 30vh !important;
}