/* ============================================================
   UCOM Telecom — Help Centre v5
   Zoho Desk — Matched to Main Website Design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Brand Colours (matched to main site) ── */
  --ucom-blue: #0094d3;
  --ucom-blue-light: #3db8e8;
  --ucom-blue-hover: #00a8f0;
  --ucom-pink: #eb0089;
  --ucom-pink-light: #ff3fad;
  --ucom-pink-hover: #ff1a9b;
  --ucom-white: #ffffff;

  /* ── Gradient palette ── */
  --grad-purple: #3a1d6e;
  --grad-purple-mid: #2a2066;
  --grad-blue: #0d5f9e;
  --grad-blue-bright: #1277bd;
  --grad-magenta: #9c1080;

  /* ── Neutrals ── */
  --neutral-900: #1a1a2e;
  --neutral-800: #2d2d44;
  --neutral-700: #4a4a68;
  --neutral-600: #6b6b8a;
  --neutral-500: #8e8ea8;
  --neutral-400: #b3b3c6;
  --neutral-300: #d1d1de;
  --neutral-200: #e8e8f0;
  --neutral-100: #f4f4f8;
  --neutral-50: #fafafe;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --shadow-glow-blue: 0 4px 24px rgba(0,148,211,0.35);
  --shadow-glow-pink: 0 4px 24px rgba(235,0,137,0.30);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   GLOBAL
   ============================================================ */

body, body.body, #container, #container *,
.Header__navbar *, .Header__searchSection *,
.ContentBox__alignCenter *, .Footer__footerCopyrigt *,
.ucom-footer, .ucom-footer * {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.body {
  background-color: var(--neutral-100) !important;
  color: var(--neutral-800) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   NAVBAR  (dark navy — matched to main site)
   ============================================================ */

.Header__navbar {
  background: var(--neutral-900) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

.Header__container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
}

#navBarContainer {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
}

/* ---- Logo ---- */
.Header__logo {
  margin-right: 16px !important;
  flex-shrink: 0 !important;
}

.Header__logo a,
.Header__logoImg {
  display: flex !important;
  align-items: center !important;
}

.Header__logo img,
.Header__logoImg img {
  height: 32px !important;
  width: auto !important;
  border-radius: 6px !important;
  transition: opacity var(--transition-base) !important;
  object-fit: contain !important;
}

.Header__logo:hover img,
.Header__logoImg:hover img {
  opacity: 0.85 !important;
}

/* Portal name */
.Header__name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.9) !important;
  letter-spacing: 0.2px !important;
  margin-right: auto !important;
  white-space: nowrap !important;
}

/* Nav tabs */
.Header__menuList {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.Header__tabsTab .Header__tabs__link {
  color: rgba(255,255,255,0.55) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-base) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.Header__tabsTab:hover .Header__tabs__link {
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Active tab — pink underline to match main site */
.Header__tabsTab.Header__active .Header__tabs__link {
  color: var(--ucom-white) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
}

/* Override Zoho's brand-colored borders on active elements */
[class*="active"][class*="zt3"],
[class*="Active"][class*="zt3"],
.Header__active [class*="zt3"] {
  border-color: var(--ucom-pink) !important;
  color: var(--ucom-pink) !important;
}

/* Active indicator dot — PINK to match main site nav */
.Header__tabsTab.Header__active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20px !important;
  height: 2.5px !important;
  background: var(--ucom-pink) !important;
  background-color: var(--ucom-pink) !important;
  border-radius: 3px !important;
}

/* Nuke orange underline from every possible source */
#portal_tabSolutions.Header__active,
#portal_tabHome.Header__active,
#portal_tabCases.Header__active,
#portal_tabCommunity.Header__active,
.Header__tabsTab.Header__active,
.Header__tabsTab.Header__active a,
.Header__tabsTab.Header__active .Header__tabs__link,
li.Header__tabsTab.Header__active,
li.Header__tabsTab.Header__active a.Header__tabs__link {
  border: none !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* If Zoho uses ::before or ::after on the link itself */
.Header__tabsTab.Header__active a::after,
.Header__tabsTab.Header__active a::before,
.Header__tabsTab.Header__active .Header__tabs__link::after,
.Header__tabsTab.Header__active .Header__tabs__link::before {
  background: var(--ucom-pink) !important;
  background-color: var(--ucom-pink) !important;
  border-color: var(--ucom-pink) !important;
}

/* ---- Sign In — PINK pill to match "Get Started" on main site ---- */
.LoginDetail__signin .LoginDetail__tabLink,
.LoginDetail__signin .signinLink {
  background: var(--ucom-pink) !important;
  color: var(--ucom-white) !important;
  padding: 7px 22px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all var(--transition-base) !important;
  border: 2px solid var(--ucom-pink) !important;
}

.LoginDetail__signin .LoginDetail__tabLink:hover,
.LoginDetail__signin .signinLink:hover {
  background: transparent !important;
  color: var(--ucom-blue) !important;
  border-color: var(--ucom-blue) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Sign Up — ghost outline */
.LoginDetail__signup .LoginDetail__tabLink,
.LoginDetail__signup .signupLink {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--radius-pill) !important;
  transition: all var(--transition-base) !important;
  background: transparent !important;
}

.LoginDetail__signup .LoginDetail__tabLink:hover,
.LoginDetail__signup .signupLink:hover {
  color: var(--ucom-white) !important;
  border-color: rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.05) !important;
}

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

/* Navbar search */
.Header__globalSearchAlt .SearchContainer__globalSearch {
  border-radius: var(--radius-pill) !important;
  overflow: hidden !important;
}

.Header__globalSearchAlt .Input__inputCommon,
.Header__globalSearchAlt .Input__headerSearch {
  background: rgba(255,255,255,0.07) !important;
  color: var(--ucom-white) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  transition: all var(--transition-base) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.Header__globalSearchAlt .Input__inputCommon:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(0,148,211,0.4) !important;
}

.Header__globalSearchAlt .Input__inputCommon::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

/* ---- Search Icon Fix (centering + color) ---- */
.SearchContainer__searchIcon,
.SearchContainer__searchIcon.commonStyle__zt3BrandBg {
  background: var(--ucom-blue) !important;
  background-color: var(--ucom-blue) !important;
  transition: background var(--transition-base) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.SearchContainer__searchIcon:hover {
  background: var(--ucom-blue-hover) !important;
  background-color: var(--ucom-blue-hover) !important;
}

.SearchContainer__searchIcon .Icon__icon,
.SearchContainer__searchIcon svg,
.SearchContainer__searchIcon svg use {
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  fill: var(--ucom-white) !important;
  color: var(--ucom-white) !important;
}

/* Flat search bar (KB/article pages) */
[class*="SearchContainer"] .Icon__icon,
[class*="searchContainer"] .Icon__icon,
[id*="searchContainer"] .Icon__icon {
  fill: var(--ucom-blue) !important;
  color: var(--ucom-blue) !important;
}

/* Keep white inside blue button backgrounds */
.SearchContainer__searchIcon .Icon__icon,
.commonStyle__zt3BrandBg .Icon__icon,
[class*="zt3BrandBg"] .Icon__icon {
  fill: var(--ucom-white) !important;
  color: var(--ucom-white) !important;
}

/* Override any SVG inside search that Zoho colors with brand/orange */
[class*="SearchContainer"] svg use,
[id*="searchContainer"] svg use {
  fill: currentColor !important;
}

/* Accessibility icon */
.CustomizeContainer__aPlus .Icon__icon {
  fill: rgba(255,255,255,0.4) !important;
}

.CustomizeContainer__aPlus:hover .Icon__icon {
  fill: var(--ucom-white) !important;
}

/* Hamburger */
.Header__menu { background: var(--ucom-white) !important; }
.Header__menu::before, .Header__menu::after { background: var(--ucom-white) !important; }


/* ============================================================
   HERO / SEARCH SECTION
   Gradient matched to main website hero
   ============================================================ */

.Header__searchSection,
#headerContent.Header__searchSection,
#headerContent[data-id="headerContent"] {
  background: linear-gradient(140deg,
    var(--grad-purple) 0%,
    var(--grad-purple-mid) 20%,
    #1a3a7a 45%,
    var(--grad-blue-bright) 65%,
    #0d5f9e 80%,
    var(--grad-magenta) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 72px 28px 64px !important;
  text-align: center !important;
  min-height: 340px !important;
}

/* Kill any Zoho pseudo-elements */
.Header__searchSection::before,
.Header__searchSection::after {
  display: none !important;
}

/* ---- Orbs ---- */
.ucom-hero-orb {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.ucom-hero-orb--blue {
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(0,148,211,0.45) 0%, transparent 70%) !important;
  top: -80px !important;
  right: 10% !important;
  animation: orbFloat1 18s ease-in-out infinite alternate !important;
}

.ucom-hero-orb--pink {
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(235,0,137,0.35) 0%, transparent 70%) !important;
  bottom: -100px !important;
  left: 5% !important;
  animation: orbFloat2 22s ease-in-out infinite alternate !important;
}

.ucom-hero-orb--purple {
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(58,29,110,0.5) 0%, transparent 70%) !important;
  top: 30% !important;
  left: 50% !important;
  animation: orbFloat3 15s ease-in-out infinite alternate !important;
}

@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.15); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, -20px) scale(1.1); }
}

@keyframes orbFloat3 {
  0% { transform: translate(-50%, 0) scale(1); }
  100% { transform: translate(-50%, -25px) scale(1.2); }
}

/* ---- Hero Content ---- */
#headerContentContainer {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 680px !important;
}

.ucom-hero-badge {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: 5px 16px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Hero heading — LIGHTER weight to match main site's elegant feel */
h2.Header__searchTitle, .Header__searchTitle {
  font-size: 36px !important;
  font-weight: 400 !important;
  color: var(--ucom-white) !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15) !important;
}

p.Header__description, .Header__description {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 32px !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
}

/* ---- Hero Search Bar ---- */
.ucom-search-wrap {
  width: 100% !important;
  max-width: 560px !important;
}

.Header__globalSearch .SearchContainer__globalSearch,
#searchContainer1 .SearchContainer__globalSearch,
.ucom-search-wrap .SearchContainer__globalSearch {
  max-width: 560px !important;
  margin: 0 auto !important;
  border-radius: var(--radius-pill) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1) !important;
  background: var(--ucom-white) !important;
  transition: box-shadow var(--transition-base) !important;
}

.Header__globalSearch .SearchContainer__globalSearch:focus-within,
#searchContainer1 .SearchContainer__globalSearch:focus-within,
.ucom-search-wrap .SearchContainer__globalSearch:focus-within {
  box-shadow: 0 4px 32px rgba(0,0,0,0.25), 0 0 0 2px var(--ucom-blue), 0 0 30px rgba(0,148,211,0.2) !important;
}

.Header__globalSearch .Input__inputCommon,
.Header__globalSearch .Input__headerSearch,
#searchContainer1 .Input__inputCommon,
#searchContainer1 .Input__headerSearch,
.ucom-search-wrap .Input__inputCommon,
.ucom-search-wrap .Input__headerSearch {
  background: var(--ucom-white) !important;
  color: var(--neutral-800) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 16px 22px !important;
  border: none !important;
  outline: none !important;
}

.Header__globalSearch .Input__inputCommon::placeholder,
#searchContainer1 .Input__inputCommon::placeholder,
.ucom-search-wrap .Input__inputCommon::placeholder {
  color: var(--neutral-500) !important;
}

.Header__globalSearch .SearchContainer__searchIcon,
#searchContainer1 .SearchContainer__searchIcon,
.ucom-search-wrap .SearchContainer__searchIcon {
  background: var(--ucom-blue) !important;
  padding: 0 20px !important;
  min-width: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.Header__globalSearch .SearchContainer__searchIcon:hover,
#searchContainer1 .SearchContainer__searchIcon:hover,
.ucom-search-wrap .SearchContainer__searchIcon:hover {
  background: var(--ucom-blue-hover) !important;
}

/* ---- Quick Links ---- */
.ucom-hero-links {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.ucom-hero-quicklink {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all var(--transition-base) !important;
}

.ucom-hero-quicklink:hover { color: var(--ucom-white) !important; }
.ucom-hero-quicklink svg { opacity: 0.7 !important; }
.ucom-hero-quicklink:hover svg { opacity: 1 !important; }
.ucom-hero-divider { color: rgba(255,255,255,0.2) !important; font-size: 14px !important; }


/* ============================================================
   HOME PAGE CARDS — ICON FIX
   ============================================================ */

.ContentBox__alignCenter {
  background: var(--ucom-white) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-xl) !important;
  padding: 36px 28px 32px !important;
  transition: all var(--transition-base) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.ContentBox__alignCenter:hover {
  border-color: rgba(235,0,137,0.20) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

/* Top accent line — gradient matches main site palette */
.ContentBox__alignCenter::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ucom-pink), var(--ucom-blue)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-slow) !important;
}

.ContentBox__alignCenter:hover::before {
  transform: scaleX(1) !important;
}

/* ---- Icon: UCOM blue default, pink on hover ---- */
.ContentBox__indexIcon {
  margin-bottom: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(0,148,211,0.08) !important;
  transition: all var(--transition-base) !important;
}

.ContentBox__alignCenter:hover .ContentBox__indexIcon {
  background: rgba(235,0,137,0.10) !important;
  transform: scale(1.05) !important;
}

/* Force all SVG elements inside card icons to UCOM blue */
.ContentBox__indexIcon svg,
.ContentBox__indexIcon .Icon__icon,
.ContentBox__indexIcon .Icon__Xlarge,
.ContentBox__indexIcon .Icon__greyShade70,
.ContentBox__indexIcon [class*="Icon__"] {
  fill: var(--ucom-blue) !important;
  color: var(--ucom-blue) !important;
  stroke: var(--ucom-blue) !important;
  transition: all var(--transition-base) !important;
}

.ContentBox__indexIcon svg use {
  fill: var(--ucom-blue) !important;
  color: var(--ucom-blue) !important;
}

/* Hover: shift to pink */
.ContentBox__alignCenter:hover .ContentBox__indexIcon svg,
.ContentBox__alignCenter:hover .ContentBox__indexIcon .Icon__icon,
.ContentBox__alignCenter:hover .ContentBox__indexIcon .Icon__Xlarge,
.ContentBox__alignCenter:hover .ContentBox__indexIcon .Icon__greyShade70,
.ContentBox__alignCenter:hover .ContentBox__indexIcon [class*="Icon__"],
.ContentBox__alignCenter:hover .ContentBox__indexIcon svg use {
  fill: var(--ucom-pink) !important;
  color: var(--ucom-pink) !important;
  stroke: var(--ucom-pink) !important;
}

/* Icon size override */
.ContentBox__indexIcon .Icon__Xlarge {
  width: 28px !important;
  height: 28px !important;
}

/* Card title */
.ContentBox__headerMid {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.ContentBox__headerMid a,
.ContentBox__headerMid .Link__link {
  color: var(--neutral-900) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.ContentBox__headerMid a:hover,
.ContentBox__headerMid .Link__link:hover {
  color: var(--ucom-pink) !important;
}

/* Card description */
.ContentBox__alignCenter > p {
  font-size: 13.5px !important;
  color: var(--neutral-600) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* ============================================================
   ZOHO BRAND COLOR OVERRIDES — all utility classes
   ============================================================ */

.commonStyle__zt3BrandBg { background-color: var(--ucom-blue) !important; }
.commonStyle__zt3Link { color: var(--ucom-blue) !important; }
.commonStyle__zt3Link:hover { color: var(--ucom-blue-hover) !important; }
.commonStyle__zt3LinkActive { color: var(--ucom-pink) !important; }
.commonStyle__zt3Brand { color: var(--ucom-blue) !important; }
.commonStyle__zt3BrandBorder { border-color: var(--ucom-blue) !important; }
[class*="zt3Brand"]:not([class*="Bg"]):not([class*="Border"]) { color: var(--ucom-blue) !important; }
[class*="zt3BrandBg"] { background-color: var(--ucom-blue) !important; }
[class*="zt3BrandBorder"] { border-color: var(--ucom-blue) !important; }

/* Button base font class */
.Button__btnFont {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

/* Global SVG icon color override */
.Icon__greyShade70 {
  fill: var(--ucom-blue) !important;
}


/* ============================================================
   GLOBAL LINKS
   ============================================================ */

.Link__link {
  color: var(--ucom-blue) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.Link__link:hover {
  color: var(--ucom-blue-hover) !important;
}


/* ============================================================
   POPULAR ARTICLES
   ============================================================ */

[class*="PopularArticle"] h3,
[class*="popularArticle"] h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
}

[class*="PopularArticle"] li a,
[class*="popularArticle"] li a {
  color: var(--ucom-blue) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}

[class*="PopularArticle"] li a:hover,
[class*="popularArticle"] li a:hover {
  color: var(--ucom-pink) !important;
}

/* Article list icon color fix */
[class*="PopularArticle"] .Icon__icon,
[class*="popularArticle"] .Icon__icon,
[class*="PopularArticle"] svg,
[class*="popularArticle"] svg {
  fill: var(--neutral-400) !important;
}


/* ============================================================
   BUTTONS  — PINK default, BLUE hover (matching main site)
   ============================================================ */

button[type="submit"],
input[type="submit"],
[class*="submitBtn"],
[class*="primaryBtn"] {
  background: var(--ucom-pink) !important;
  color: var(--ucom-white) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 2px solid var(--ucom-pink) !important;
  border-radius: var(--radius-pill) !important;
  padding: 11px 28px !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--ucom-blue) !important;
  border-color: var(--ucom-blue) !important;
  color: var(--ucom-white) !important;
  box-shadow: var(--shadow-glow-blue) !important;
  transform: translateY(-1px) !important;
}


/* ============================================================
   FORMS
   ============================================================ */

[class*="formGroup"] input[type="text"],
[class*="formGroup"] input[type="email"],
[class*="formGroup"] textarea,
[class*="formGroup"] select {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--neutral-800) !important;
  border: 1.5px solid var(--neutral-300) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 16px !important;
  transition: all var(--transition-fast) !important;
}

[class*="formGroup"] input:focus,
[class*="formGroup"] textarea:focus,
[class*="formGroup"] select:focus {
  border-color: var(--ucom-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,148,211,0.12) !important;
  outline: none !important;
}


/* ============================================================
   KB ARTICLES
   ============================================================ */

[class*="articleContent"] h1, [class*="ArticleContent"] h1 {
  font-size: 28px !important; font-weight: 700 !important; color: var(--neutral-900) !important;
}

[class*="articleContent"] h2, [class*="ArticleContent"] h2 {
  font-size: 22px !important; font-weight: 600 !important; color: var(--neutral-900) !important;
}

[class*="articleContent"] h3, [class*="ArticleContent"] h3 {
  font-size: 18px !important; font-weight: 600 !important; color: var(--neutral-800) !important;
}

[class*="articleContent"] table th {
  background: var(--neutral-100) !important; font-weight: 600 !important; padding: 12px 16px !important;
}

[class*="articleContent"] table td {
  padding: 12px 16px !important; border-bottom: 1px solid var(--neutral-200) !important;
}

[class*="Breadcrumb"] a, [class*="breadcrumb"] a {
  color: var(--neutral-500) !important; font-weight: 500 !important;
}

[class*="Breadcrumb"] a:hover, [class*="breadcrumb"] a:hover {
  color: var(--ucom-blue) !important;
}


/* ============================================================
   TICKETS / MY AREA
   ============================================================ */

[class*="ticketList"] th, [class*="TicketList"] th {
  background: var(--neutral-100) !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--neutral-600) !important; text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

[class*="ticketList"] tr:hover td, [class*="TicketList"] tr:hover td {
  background: rgba(0,148,211,0.03) !important;
}


/* ============================================================
   FOOTER  — Deep navy, matched to main site
   ============================================================ */

.ucom-footer {
  background: var(--neutral-900) !important;
  padding: 32px 0 0 !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg, var(--ucom-pink), var(--ucom-blue)) 1 !important;
}

.ucom-footer__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 28px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.ucom-footer__brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ucom-footer__logo {
  height: 28px !important;
  width: auto !important;
  opacity: 0.8 !important;
  border-radius: 4px !important;
}

.ucom-footer__tagline {
  font-size: 13px !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

.ucom-footer__links {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ucom-footer__links a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.ucom-footer__links a:hover { color: var(--ucom-blue-light) !important; }

.ucom-footer__sep { color: rgba(255,255,255,0.2) !important; font-size: 14px !important; }

.Footer__footerCopyrigt {
  background: var(--neutral-900) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 16px 0 !important;
}

.Footer__container2 {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.Footer__container2 span { font-size: 12px !important; color: rgba(255,255,255,0.3) !important; }
.Footer__footerLink { font-size: 12px !important; color: rgba(255,255,255,0.25) !important; }
.Footer__footerLink:hover { color: rgba(255,255,255,0.5) !important; }


/* ============================================================
   SCROLLBAR & SELECTION
   ============================================================ */

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--neutral-100); }
::-webkit-scrollbar-thumb { background: var(--neutral-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-500); }
::selection { background: rgba(235,0,137,0.15); color: var(--neutral-900); }


/* ============================================================
   BREADCRUMBS
   ============================================================ */

[class*="Breadcrumb"],
[class*="breadcrumb"],
[class*="BreadCrumb"] {
  font-size: 13px !important;
  color: var(--neutral-500) !important;
  padding: 16px 0 12px !important;
}

[class*="Breadcrumb"] a,
[class*="breadcrumb"] a,
[class*="BreadCrumb"] a {
  color: var(--neutral-500) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

[class*="Breadcrumb"] a:hover,
[class*="breadcrumb"] a:hover,
[class*="BreadCrumb"] a:hover {
  color: var(--ucom-blue) !important;
}

/* Breadcrumb separators */
[class*="Breadcrumb"] span,
[class*="breadcrumb"] span {
  color: var(--neutral-400) !important;
}


/* ============================================================
   KB LISTING PAGE — Category & Article Lists
   ============================================================ */

/* Category header */
[class*="CategoryTitle"] a,
[class*="categoryTitle"] a,
[class*="CategoryHeader"] a,
[class*="categoryHeader"] a,
[class*="folderTitle"] a,
[class*="FolderTitle"] a {
  color: var(--neutral-900) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

[class*="CategoryTitle"] a:hover,
[class*="categoryTitle"] a:hover,
[class*="FolderTitle"] a:hover {
  color: var(--ucom-pink) !important;
}

/* Category description */
[class*="CategoryDescription"],
[class*="categoryDescription"],
[class*="folderDescription"] {
  color: var(--neutral-600) !important;
  font-size: 13px !important;
}

/* Article links in KB listing */
[class*="ArticleListItem"] a,
[class*="articleListItem"] a,
[class*="articleList"] a,
[class*="ArticleList"] a,
[class*="SolutionList"] a,
[class*="solutionList"] a {
  color: var(--ucom-blue) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

[class*="ArticleListItem"] a:hover,
[class*="articleListItem"] a:hover,
[class*="articleList"] a:hover,
[class*="ArticleList"] a:hover {
  color: var(--ucom-pink) !important;
}

/* Three-dot menu icon */
[class*="moreOption"],
[class*="MoreOption"] {
  color: var(--neutral-400) !important;
}

/* Section headers */
[class*="SectionHeader"] h3,
[class*="sectionHeader"] h3,
[class*="SectionTitle"] h3,
[class*="ListSection"] h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
}

/* Section header icons */
[class*="SectionHeader"] .Icon__icon,
[class*="sectionHeader"] .Icon__icon,
[class*="ListSection"] .Icon__icon {
  fill: var(--neutral-400) !important;
}


/* ============================================================
   ARTICLE DETAIL PAGE
   ============================================================ */

/* Article title */
[class*="ArticleTitle"],
[class*="articleTitle"],
[class*="ArticleHeader"] h1,
[class*="articleHeader"] h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 20px !important;
}

/* Print/share icons row */
[class*="ArticleActions"] .Icon__icon,
[class*="articleActions"] .Icon__icon,
[class*="printAction"] .Icon__icon {
  fill: var(--neutral-400) !important;
  transition: fill var(--transition-fast) !important;
}

[class*="ArticleActions"] .Icon__icon:hover,
[class*="articleActions"] .Icon__icon:hover {
  fill: var(--ucom-blue) !important;
}

/* ---- Table of Contents ---- */
[class*="TableOfContent"],
[class*="tableOfContent"],
[class*="TOC__"],
[class*="toc__"],
[class*="onThisPage"] {
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  background: var(--neutral-50) !important;
}

/* TOC title */
[class*="TableOfContent"] > span,
[class*="tableOfContent"] > span,
[class*="TOC__"] > span,
[class*="onThisPage"] > span,
[class*="TableOfContent"] > div:first-child,
[class*="tableOfContent"] > div:first-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--neutral-800) !important;
}

/* TOC links */
[class*="TableOfContent"] a,
[class*="tableOfContent"] a,
[class*="TOC__"] a,
[class*="toc__"] a,
[class*="onThisPage"] a {
  color: var(--ucom-blue) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
  display: block !important;
  padding: 4px 0 !important;
}

[class*="TableOfContent"] a:hover,
[class*="tableOfContent"] a:hover,
[class*="TOC__"] a:hover,
[class*="toc__"] a:hover,
[class*="onThisPage"] a:hover {
  color: var(--ucom-pink) !important;
}

/* ---- Article Body Content ---- */
[class*="articleContent"],
[class*="ArticleContent"],
[class*="articleBody"],
[class*="ArticleBody"],
[class*="solutionContent"],
[class*="SolutionContent"] {
  max-width: 780px !important;
  line-height: 1.75 !important;
  color: var(--neutral-700) !important;
  font-size: 15px !important;
}

[class*="articleContent"] h2,
[class*="ArticleContent"] h2,
[class*="solutionContent"] h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--neutral-200) !important;
}

[class*="articleContent"] h3,
[class*="ArticleContent"] h3,
[class*="solutionContent"] h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--neutral-800) !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

[class*="articleContent"] p,
[class*="ArticleContent"] p,
[class*="solutionContent"] p {
  margin-bottom: 14px !important;
  line-height: 1.75 !important;
}

[class*="articleContent"] a,
[class*="ArticleContent"] a,
[class*="solutionContent"] a {
  color: var(--ucom-blue) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

[class*="articleContent"] a:hover,
[class*="ArticleContent"] a:hover,
[class*="solutionContent"] a:hover {
  color: var(--ucom-pink) !important;
}

[class*="articleContent"] strong,
[class*="ArticleContent"] strong,
[class*="solutionContent"] strong {
  font-weight: 700 !important;
  color: var(--neutral-800) !important;
}

/* Article lists (ol, ul) */
[class*="articleContent"] ul,
[class*="articleContent"] ol,
[class*="solutionContent"] ul,
[class*="solutionContent"] ol {
  padding-left: 24px !important;
  margin-bottom: 14px !important;
}

[class*="articleContent"] li,
[class*="solutionContent"] li {
  margin-bottom: 6px !important;
  line-height: 1.7 !important;
}

/* Article tables */
[class*="articleContent"] table,
[class*="solutionContent"] table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}

[class*="articleContent"] table th,
[class*="solutionContent"] table th {
  background: var(--neutral-100) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  text-align: left !important;
  color: var(--neutral-700) !important;
  border-bottom: 2px solid var(--neutral-200) !important;
}

[class*="articleContent"] table td,
[class*="solutionContent"] table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--neutral-200) !important;
  font-size: 14px !important;
  color: var(--neutral-700) !important;
}

[class*="articleContent"] table tr:hover td,
[class*="solutionContent"] table tr:hover td {
  background: rgba(0,148,211,0.03) !important;
}

/* Code blocks */
[class*="articleContent"] code,
[class*="solutionContent"] code {
  background: var(--neutral-100) !important;
  color: var(--ucom-pink) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

[class*="articleContent"] pre,
[class*="solutionContent"] pre {
  background: var(--neutral-900) !important;
  color: var(--neutral-200) !important;
  padding: 16px 20px !important;
  border-radius: var(--radius-md) !important;
  overflow-x: auto !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Blockquotes */
[class*="articleContent"] blockquote,
[class*="solutionContent"] blockquote {
  border-left: 3px solid var(--ucom-pink) !important;
  padding: 12px 20px !important;
  margin: 16px 0 !important;
  background: rgba(235,0,137,0.04) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  color: var(--neutral-700) !important;
}

/* Images in articles */
[class*="articleContent"] img,
[class*="solutionContent"] img {
  max-width: 100% !important;
  border-radius: var(--radius-md) !important;
  margin: 12px 0 !important;
}


/* ============================================================
   SIDEBAR — Follow Button, Category, Related Articles
   ============================================================ */

/* Follow button — PINK style to match main site CTAs */
.Button__primaryBorder,
.Button__primaryBorder.commonStyle__zt3BrandBorder,
button.Button__primaryBorder {
  background: transparent !important;
  color: var(--ucom-pink) !important;
  border: 1.5px solid var(--ucom-pink) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

.Button__primaryBorder:hover,
button.Button__primaryBorder:hover {
  background: var(--ucom-pink) !important;
  color: var(--ucom-white) !important;
  box-shadow: var(--shadow-glow-pink) !important;
}

/* Zoho brand border utility override */
.commonStyle__zt3BrandBorder {
  border-color: var(--ucom-blue) !important;
}

/* Zoho brand text color utility override */
.commonStyle__zt3Brand {
  color: var(--ucom-blue) !important;
}

/* Sidebar subscribe text */
[class*="subscribeText"],
[class*="SubscribeText"],
[class*="followDescription"] {
  font-size: 12px !important;
  color: var(--neutral-500) !important;
  margin-top: 6px !important;
}

/* Sidebar section titles */
[class*="sideBar"] h3,
[class*="SideBar"] h3,
[class*="sidebar"] h3,
[class*="Sidebar"] h3,
[class*="rightPanel"] h3,
[class*="RightPanel"] h3,
[class*="relatedArticle"] h4,
[class*="RelatedArticle"] h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  margin-bottom: 12px !important;
}

/* Sidebar category title link */
[class*="sideBar"] h3 a,
[class*="SideBar"] h3 a,
[class*="sidebar"] h3 a,
[class*="Sidebar"] h3 a,
[class*="rightPanel"] h3 a {
  color: var(--ucom-blue) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

[class*="sideBar"] h3 a:hover,
[class*="sidebar"] h3 a:hover {
  color: var(--ucom-pink) !important;
}

/* Sidebar article links */
[class*="sideBar"] li a,
[class*="SideBar"] li a,
[class*="sidebar"] li a,
[class*="Sidebar"] li a,
[class*="rightPanel"] li a,
[class*="RightPanel"] li a,
[class*="relatedArticle"] a,
[class*="RelatedArticle"] a {
  color: var(--ucom-blue) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
  display: block !important;
  padding: 4px 0 !important;
}

[class*="sideBar"] li a:hover,
[class*="sidebar"] li a:hover,
[class*="rightPanel"] li a:hover,
[class*="relatedArticle"] a:hover,
[class*="RelatedArticle"] a:hover {
  color: var(--ucom-pink) !important;
}

/* Sidebar icons */
[class*="sideBar"] .Icon__icon,
[class*="sidebar"] .Icon__icon,
[class*="rightPanel"] .Icon__icon {
  fill: var(--neutral-400) !important;
}


/* ============================================================
   "STILL CAN'T FIND AN ANSWER?" CTA BAR
   ============================================================ */

.Footer__footerInfo {
  background: var(--neutral-900) !important;
  padding: 36px 28px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
}

.Footer__footerQus {
  color: var(--ucom-white) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.Footer__footerDescription,
.Footer__footerDescription span {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}

/* Submit a ticket button — PINK on dark bg, blue on hover */
.Button__footerBtn,
button.Button__footerBtn {
  background: var(--ucom-pink) !important;
  color: var(--ucom-white) !important;
  border: 2px solid var(--ucom-pink) !important;
  border-radius: var(--radius-pill) !important;
  padding: 11px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

.Button__footerBtn:hover,
button.Button__footerBtn:hover {
  background: var(--ucom-blue) !important;
  border-color: var(--ucom-blue) !important;
  box-shadow: var(--shadow-glow-blue) !important;
  transform: translateY(-1px) !important;
}

/* Active sidebar link */
.Link__active,
.Link__active.commonStyle__zt3LinkActive,
.commonStyle__zt3LinkActive {
  color: var(--ucom-pink) !important;
  font-weight: 700 !important;
}


/* ============================================================
   TICKET SUBMISSION FORM
   ============================================================ */

[class*="SubmitTicket"] h1,
[class*="submitTicket"] h1,
[class*="NewTicket"] h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
}

[class*="formField"] label,
[class*="FormField"] label,
[class*="fieldLabel"],
[class*="FieldLabel"] {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--neutral-800) !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 4px !important;
}


/* ============================================================
   GLOBAL ORANGE OVERRIDE — Nuclear option
   Kill any remaining orange from default theme
   ============================================================ */

/* Override any hardcoded orange on links */
a[style*="color"],
span[style*="color: rgb(229"] {
  color: var(--ucom-blue) !important;
}

/* Link active state */
.Link__active {
  color: var(--ucom-pink) !important;
}

/* Any SVG icon that Zoho colours with greyShade */
.Icon__greyShade70,
.Icon__greyShade50 {
  fill: var(--neutral-400) !important;
}

/* Non-hero search icons */
[class*="searchBar"] .SearchContainer__searchIcon,
[class*="SearchBar"] .SearchContainer__searchIcon {
  background: var(--ucom-blue) !important;
}


/* ============================================================
   SECTION TITLES — Allow long names to wrap
   ============================================================ */

.ListHeader__linkText,
.ListHeader__linkText.commonStyle__zt3Link,
a[data-id*="_title"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .Header__searchSection, #headerContent.Header__searchSection {
    padding: 48px 20px 40px !important;
    min-height: auto !important;
  }

  h2.Header__searchTitle, .Header__searchTitle { font-size: 26px !important; }
  p.Header__description, .Header__description { font-size: 14px !important; margin-bottom: 24px !important; }
  .ucom-hero-badge { font-size: 9.5px !important; letter-spacing: 1.5px !important; }
  .ucom-hero-links { flex-direction: column !important; gap: 8px !important; }
  .ucom-hero-divider { display: none !important; }
  .ucom-hero-orb { display: none !important; }

  .ucom-footer__inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .ucom-footer__brand { flex-direction: column !important; gap: 8px !important; }

  .Footer__container2 {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }
}

@media (max-width: 480px) {
  h2.Header__searchTitle, .Header__searchTitle { font-size: 22px !important; }
  .ContentBox__alignCenter { padding: 28px 20px 24px !important; }
}