/* =========================================================
   NETZIAH HELP CENTER — ENTERPRISE FINAL CSS
   Zoho Desk Portal Custom CSS
   Version: Premium / Dark Hero + White Content
   ========================================================= */

/* =========================================================
   0. VARIABLES
   ========================================================= */

:root {
  --nz-black: #030306;
  --nz-black-2: #070711;
  --nz-dark: #0b0b14;

  --nz-white: #ffffff;
  --nz-body: #ffffff;
  --nz-text: #111217;
  --nz-muted: #6b6f7a;
  --nz-soft: #f6f7fb;
  --nz-border: #e7e9f0;

  --nz-blue: #2458ff;
  --nz-blue-2: #3d6eff;
  --nz-purple: #7a2cff;
  --nz-purple-2: #a855ff;

  --nz-shadow-soft: 0 18px 50px rgba(12, 16, 28, 0.08);
  --nz-shadow-hero: 0 30px 90px rgba(0, 0, 0, 0.48);
}

/* =========================================================
   1. BASE GENERAL
   ========================================================= */

html,
body {
  background: var(--nz-body) !important;
  color: var(--nz-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  overflow-x: hidden !important;
}

body {
  margin: 0 !important;
}

a {
  text-decoration: none !important;
}

::selection {
  background: rgba(36, 88, 255, 0.28) !important;
  color: #ffffff !important;
}

/* =========================================================
   2. HEADER BACKGROUND — NETZIAH STYLE
   ========================================================= */

.Header__headerBg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  min-height: 560px !important;

  background:
    radial-gradient(circle at 87% 0%, rgba(122, 44, 255, 0.78), transparent 29%),
    radial-gradient(circle at 8% 16%, rgba(36, 88, 255, 0.38), transparent 32%),
    radial-gradient(circle at 55% 55%, rgba(122, 44, 255, 0.16), transparent 38%),
    linear-gradient(180deg, #090713 0%, #050509 58%, #030306 100%) !important;

  z-index: 0 !important;
  overflow: hidden !important;
}

.Header__headerBg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, transparent 0%, rgba(36, 88, 255, 0.08) 28%, transparent 46%),
    linear-gradient(225deg, transparent 0%, rgba(122, 44, 255, 0.12) 34%, transparent 60%) !important;

  opacity: 1 !important;
  pointer-events: none !important;
}

.Header__headerBg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    radial-gradient(ellipse at 50% 100%, rgba(36, 88, 255, 0.18), transparent 45%),
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.78)) !important;

  pointer-events: none !important;
}

.Header__bgColor {
  background: transparent !important;
}

/* =========================================================
   3. NAVBAR GLASS
   ========================================================= */

.Header__menuWrapper {
  position: relative !important;
  z-index: 20 !important;
  background: transparent !important;
  padding: 30px 24px 0 !important;
}

.Header__menuBox {
  width: fit-content !important;
  max-width: calc(100% - 48px) !important;
  min-height: 62px !important;

  margin: 0 auto !important;
  padding: 8px 14px 8px 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;

  background: rgba(8, 8, 14, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;

  box-shadow:
    0 24px 75px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Logo */
.Header__logoPart {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex-shrink: 0 !important;
}

.Header__logoimg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.Header__logo {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

.Header__logotxt {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 620 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap !important;
}

/* Nav */
.Header__navbtn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.Header__nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.Header__menuList {
  color: rgba(255, 255, 255, 0.76) !important;
  background: transparent !important;

  font-size: 14px !important;
  font-weight: 470 !important;
  line-height: 1 !important;

  padding: 12px 14px !important;
  border-radius: 999px !important;

  cursor: pointer !important;
  white-space: nowrap !important;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease !important;
}

.Header__menuList:hover,
.Header__menuList.active,
.Header__menuList.Header__active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.095) !important;
}

.Header__nav li,
.Header__nav li a,
.Header__nav li span,
.Header__navbtn svg,
.Header__navbtn i {
  color: rgba(255, 255, 255, 0.78) !important;
  fill: rgba(255, 255, 255, 0.78) !important;
}

/* User bubble */
.Header__navbtn img,
.Header__navbtn .UserProfile,
.Header__navbtn [class*="User"],
.Header__navbtn [class*="Avatar"] {
  border-radius: 999px !important;
}

/* =========================================================
   4. HERO AREA
   ========================================================= */

.Header__titleSearchWrapper {
  position: relative !important;
  z-index: 10 !important;

  background: transparent !important;

  padding: 138px 24px 124px !important;
}

.Header__titleSearchBox {
  max-width: 1120px !important;
  margin: 0 auto !important;
  text-align: center !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Title */
.Header__titleDescription {
  margin: 0 auto 42px !important;
}

.Header__welcomeTitle {
  color: #ffffff !important;

  font-size: clamp(44px, 6vw, 84px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  font-weight: 560 !important;

  max-width: 920px !important;
  margin: 0 auto 20px !important;
}

.Header__welcomeDescription {
  color: rgba(255, 255, 255, 0.64) !important;

  font-size: 18px !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;

  max-width: 680px !important;
  margin: 0 auto !important;
}

/* =========================================================
   5. SEARCH BAR — GLASS / TRANSPARENT
   ========================================================= */

.Header__banneralt {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}

.Header__searchSubCont {
  max-width: 920px !important;
  margin: 0 auto !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Outer search pill */
.Header__searchalt {
  width: 100% !important;
  min-height: 76px !important;

  padding: 9px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.48),
    0 0 75px rgba(36, 88, 255, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

  backdrop-filter: blur(26px) !important;
  -webkit-backdrop-filter: blur(26px) !important;
}

/* Search clickable area */
.Header__searchLink {
  flex: 1 1 auto !important;
  min-width: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inner search */
.Header__searchBox {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 0 28px !important;
  margin: 0 !important;

  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.145) !important;
  border-radius: 999px !important;

  color: rgba(255, 255, 255, 0.86) !important;

  font-size: 16px !important;
  font-weight: 430 !important;
  text-align: left !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 30px rgba(0, 0, 0, 0.16) !important;

  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

.Header__searchBox:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.23) !important;
}

/* Search text */
.Header__searchBox,
.Header__searchBox *,
.Header__searchBox span,
.Header__searchBox div {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Real input if Zoho injects one */
.Header__searchBox input,
.Header__searchalt input,
.Header__searchSubCont input {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.Header__searchBox input::placeholder,
.Header__searchalt input::placeholder,
.Header__searchSubCont input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Search icons */
.Header__searchBox svg,
.Header__searchBox i,
.Header__searchalt svg,
.Header__searchalt i {
  color: rgba(255, 255, 255, 0.72) !important;
  fill: rgba(255, 255, 255, 0.72) !important;
}

/* =========================================================
   6. ADD TICKET BUTTON
   ========================================================= */

.Header__panelbtns {
  flex: 0 0 auto !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.Header__cdstretchynav {
  min-width: 128px !important;
  width: 128px !important;
  height: 58px !important;
  min-height: 58px !important;

  padding: 0 18px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    linear-gradient(180deg, #4777ff 0%, #2458ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 999px !important;

  box-shadow:
    0 18px 48px rgba(36, 88, 255, 0.44),
    0 0 34px rgba(36, 88, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;

  overflow: hidden !important;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease !important;
}

.Header__cdstretchynav:hover {
  background:
    linear-gradient(180deg, #5b86ff 0%, #3d6eff 100%) !important;

  transform: translateY(-1px) !important;

  box-shadow:
    0 22px 56px rgba(36, 88, 255, 0.52),
    0 0 42px rgba(36, 88, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* Remove Zoho weird inner trigger */
.Header__cdnavtrigger,
.Header__cdnavtrigger::before,
.Header__cdnavtrigger::after,
.Header__stretchynavbg,
.Header__overlayresponav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make Add Ticket text visible */
.Header__container {
  position: static !important;

  width: auto !important;
  height: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  padding: 0 !important;
  margin: 0 !important;
}

.Header__containerUl {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Show only first action */
.Header__containerUl li {
  display: none !important;
}

.Header__containerUl li:first-child {
  display: flex !important;
}

.Header__containerUl li:first-child,
.Header__containerUl li:first-child a,
.Header__containerUl li:first-child span {
  color: #ffffff !important;
  background: transparent !important;

  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   7. BREADCRUMBS
   ========================================================= */

.BreadCrumbs__breadcrumbsView,
.BreadCrumbs__breadcrumbsView a,
.BreadCrumbs__breadCrumbText,
[class*="BreadCrumbs"] {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 13px !important;
}

.BreadCrumbs__breadcrumbsView {
  margin-top: 24px !important;
}

/* =========================================================
   8. WHITE CONTENT AREA
   ========================================================= */

.AppContainer__container,
.Layout__layout1,
.Layout__layout2,
.ContentBox__boxThree,
.ContentBox__boxFour,
.commonStyle__zt3Layout,
.commonStyle__zt3Container,
.KbContainer__kbContainer,
.Profile__profileContainer,
.Profile__profileContent,
.Profile__profileInfo,
.Signin__signinContainer,
.MyArea__myAreaCon,
.SearchList__searchListContainer,
.SearchDetail__searchDetailContainer,
.TicketList__ticketListCommon,
.TicketDetailLeftContainer__ticketDetailLeftContainer,
.TicketDetailRightContainer__ticketDetailRightContainer {
  background: #ffffff !important;
  color: #111217 !important;
}

/* Smooth transition from hero */
.Layout__layout1,
.Layout__layout2,
.ContentBox__boxThree,
.ContentBox__boxFour {
  position: relative !important;
  z-index: 4 !important;
}

/* =========================================================
   9. CONTENT CARDS / FORMS
   ========================================================= */

.KbCategory__box,
.KbCategory__content,
.ArticleList__articleList,
.ListHeader__listHeader2,
.commonStyle__zt3Card,
.Profile__profileContent,
.Profile__profileInfo,
.Signin__signinBox,
.Signin__userSigincommon,
.Signin__loginHalf,
.Signin__newuser,
.Signin__forgotPassword {
  background: #ffffff !important;
  color: #111217 !important;

  border: 1px solid #e7e9f0 !important;
  border-radius: 22px !important;

  box-shadow: 0 16px 46px rgba(12, 16, 28, 0.07) !important;
}

/* Form box */
.TicketFormLeftContainer__formBox,
.TicketFormRightContainer__rightPanel,
.TicketDetailLeftContainer__ticketDetailLeftContainer,
.TicketDetailRightContainer__ticketDetailRightContainer {
  background: #ffffff !important;
  border: 1px solid #e7e9f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 46px rgba(12, 16, 28, 0.07) !important;
}

/* =========================================================
   10. CONTENT TYPOGRAPHY
   ========================================================= */

.AppContainer__container h1,
.AppContainer__container h2,
.AppContainer__container h3,
.AppContainer__container h4,
.AppContainer__container h5,
.AppContainer__container h6 {
  color: #111217 !important;
  letter-spacing: -0.025em !important;
}

.AppContainer__container p,
.AppContainer__container span,
.AppContainer__container label,
.AppContainer__container li,
.AppContainer__container div {
  color: inherit;
}

.AppContainer__container p,
.AppContainer__container span,
.AppContainer__container label,
.AppContainer__container li {
  color: #515663;
}

.AppContainer__container a {
  color: #2458ff !important;
}

.AppContainer__container a:hover {
  color: #123fe0 !important;
}

/* =========================================================
   11. INPUTS / SELECTS / TEXTAREAS
   ========================================================= */

.AppContainer__container input,
.AppContainer__container textarea,
.AppContainer__container select {
  background: #ffffff !important;
  color: #111217 !important;

  border: 1px solid #dfe3ec !important;
  border-radius: 12px !important;

  box-shadow: none !important;
  outline: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.AppContainer__container input:focus,
.AppContainer__container textarea:focus,
.AppContainer__container select:focus {
  border-color: rgba(36, 88, 255, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(36, 88, 255, 0.10) !important;
}

.AppContainer__container input::placeholder,
.AppContainer__container textarea::placeholder {
  color: #8b909c !important;
}

/* =========================================================
   12. BUTTONS INSIDE CONTENT
   ========================================================= */

.AppContainer__container button,
.AppContainer__container .Button__buttonCommon,
.AppContainer__container .commonStyle__zt3BrandBg,
.AppContainer__container input[type="submit"] {
  background: #2458ff !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 10px !important;

  font-weight: 600 !important;

  box-shadow: 0 10px 26px rgba(36, 88, 255, 0.25) !important;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.AppContainer__container button:hover,
.AppContainer__container .Button__buttonCommon:hover,
.AppContainer__container .commonStyle__zt3BrandBg:hover,
.AppContainer__container input[type="submit"]:hover {
  background: #3d6eff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 32px rgba(36, 88, 255, 0.32) !important;
}

/* Red/danger buttons */
.AppContainer__container .danger,
.AppContainer__container .Danger,
.AppContainer__container [class*="danger"],
.AppContainer__container [class*="Danger"] {
  background: #ff3b30 !important;
  color: #ffffff !important;
}

/* =========================================================
   13. PROFILE / MY AREA FIXES
   ========================================================= */

.Profile__profileContainer,
.Profile__profileContent,
.Profile__profileInfo,
.Profile__leftPanel,
.Profile__rightPanel,
.MyArea__myAreaCon {
  background: #ffffff !important;
  color: #111217 !important;
}

.Profile__profileContainer *,
.MyArea__myAreaCon * {
  color: inherit;
}

.Profile__profileContainer h1,
.Profile__profileContainer h2,
.Profile__profileContainer h3,
.MyArea__myAreaCon h1,
.MyArea__myAreaCon h2,
.MyArea__myAreaCon h3 {
  color: #111217 !important;
}

/* =========================================================
   14. CHAT WIDGET
   ========================================================= */

[class*="Chat"],
[class*="chat"] {
  border-radius: 999px;
}

/* =========================================================
   15. FOOTER
   ========================================================= */

footer,
.Footer__footer,
.Footer__footerBg,
.Footer__footerContent {
  background: #ffffff !important;
  color: #111217 !important;
  border-top: 1px solid #eeeeee !important;
}

/* Hide Zoho powered link if allowed by your plan/settings */
a[href*="zoho"],
a[href*="zohodesk"] {
  display: none !important;
}

/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .Header__menuBox {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;

    justify-content: space-between !important;
    gap: 14px !important;
  }

  .Header__nav {
    gap: 3px !important;
  }

  .Header__menuList {
    font-size: 13px !important;
    padding: 10px 10px !important;
  }
}

@media (max-width: 768px) {
  .Header__headerBg {
    min-height: 455px !important;
  }

  .Header__menuWrapper {
    padding: 16px 12px 0 !important;
  }

  .Header__menuBox {
    min-height: 58px !important;
    border-radius: 24px !important;
    padding: 10px 14px !important;
  }

  .Header__titleSearchWrapper {
    padding: 92px 16px 78px !important;
  }

  .Header__welcomeTitle {
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }

  .Header__welcomeDescription {
    font-size: 16px !important;
  }

  .Header__searchSubCont {
    max-width: 100% !important;
  }

  .Header__searchalt {
    min-height: 64px !important;
    padding: 7px !important;
    gap: 8px !important;
    border-radius: 26px !important;
  }

  .Header__searchBox {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 14px !important;
    padding: 0 18px !important;
  }

  .Header__cdstretchynav {
    min-width: 50px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
  }

  .Header__containerUl li:first-child,
  .Header__containerUl li:first-child a,
  .Header__containerUl li:first-child span {
    font-size: 0 !important;
  }

  .Header__containerUl li:first-child::after {
    content: "+" !important;
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
}