/* ================= FONT ================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ================= RESET ================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Montserrat', sans-serif;
  background: #f7f6f4;
}

/* ================= ZOHO headerContainer NEUTRALIZATION ================= */

#headerContainer {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: unset !important;
}

#headerContainer > *:not(.Header__navbar) {
  display: none !important;
}

/* ================= ZOHO footerContainer NEUTRALIZATION ================= */

#footerContainer {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Hide Zoho's injected footer content but keep our custom footer tag */
#footerContainer > *:not(.pf-footer):not(footer) {
  display: none !important;
}

/* ================= GLOBAL BODY (ALL PAGE TYPES) ================= */

body.HomeContainer,
body.KbArticleContainer,
body.KbCategoryContainer,
body.KbSearchContainer,
body.MyTicketsContainer,
body.NewTicketContainer {
  font-family: 'Montserrat', sans-serif !important;
  overflow-x: hidden;
}

body.KbArticleContainer,
body.KbCategoryContainer,
body.KbSearchContainer {
  background: #111 !important;
}

.portalBody,
.mainWrapper,
.pageWrapper,
.portalContainer,
.portalMain {
  background: inherit !important;
}

/* ================= HEADER — NAVBAR ================= */

.Header__navbar {
  background: #000 !important;
  border-bottom: 3px solid #bc955c !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1000;
}

.portalHeader,
.portalTopBar,
.pf-header-wrap,
.Header__defaultContent > *:not(.Header__navbar) {
  display: none !important;
}

/* ================= HEADER — TOP ROW ================= */

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

.Header__logo img {
  max-height: 32px;
}

.Header__name {
  color: #fff;
  font-weight: 700;
  margin-left: 20px;
}

/* ================= HEADER — RIGHT NAV ================= */

.Header__nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.Header__nav-right a,
.Header__nav-right span,
.Header__nav-right div {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s;
}

.Header__nav-right a:hover {
  color: #bc955c;
}

/* ================= TAB BAR ================= */

.Header__tabBar {
  background: #111 !important;
  border-top: 1px solid #1a1a1a;
  border-bottom: 2px solid #bc955c;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.Header__tabBarInner {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

.Header__menuList {
  display: flex !important;
  list-style: none;
}

.Header__tabsTab {
  display: flex;
}

.Header__tabsTab a,
.Header__tabsTab span {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 44px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #777;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.Header__tabsTab a:hover,
.Header__tabsTab span:hover {
  color: #bc955c;
  border-bottom-color: #bc955c;
}

/* ================= ACTIVE TABS ================= */
/* Class-based targeting instead of nth-child, so tab highlighting
   doesn't break if Zoho renders a tab's merge field empty (e.g. for
   guests) and shifts the child order. */

body.HomeContainer .tab-home a,
body.HomeContainer .tab-home span {
  color: #bc955c;
  border-bottom-color: #bc955c;
}

body.MyTicketsContainer .tab-tickets a,
body.MyTicketsContainer .tab-tickets span,
body.NewTicketContainer .tab-tickets a,
body.NewTicketContainer .tab-tickets span {
  color: #bc955c;
  border-bottom-color: #bc955c;
}

body.KbCategoryContainer .tab-kb a,
body.KbCategoryContainer .tab-kb span,
body.KbArticleContainer .tab-kb a,
body.KbArticleContainer .tab-kb span,
body.KbSearchContainer .tab-kb a,
body.KbSearchContainer .tab-kb span {
  color: #bc955c;
  border-bottom-color: #bc955c;
}

/* ================= HERO / SEARCH SECTION ================= */

.Header__searchSection {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 50px 20px;
  overflow: auto;
}

.Header__searchTitle {
  font-size: 28px;
  margin-bottom: 10px;
}

.Header__description {
  color: #777;
  margin-bottom: 20px;
}

/* ================= SEARCH BAR ================= */

.pf-search-wrapper {
  display: flex;
  align-items: stretch;
  height: 48px;
  max-width: 600px;
  margin: 0 auto;
  border: 2px solid #bc955c;
  background: #0d0d0d;
}

.pf-search-wrapper form,
.pf-search-wrapper form > div {
  display: flex !important;
  flex: 1;
  height: 100%;
}

.pf-search-wrapper input {
  flex: 1;
  border: none !important;
  padding: 0 16px !important;
  color: #fff !important;
  background: transparent !important;
  outline: none !important;
}

.pf-search-wrapper button {
  padding: 0 20px !important;
  background: #bc955c !important;
  color: #000 !important;
  border: none !important;
  font-weight: 700;
  display: flex;
  align-items: center;
}

body.KbCategoryContainer .searchBox input,
body.KbSearchContainer .searchBox input,
body.KbArticleContainer .searchBox input {
  background: #0d0d0d !important;
  color: #fff !important;
  border: 2px solid #bc955c !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ================= STATUS BAR ================= */

.pf-status-bar {
  background: #111;
  color: #aaa;
  padding: 12px 20px;
  display: flex;
  gap: 25px;
}

.pf-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pf-dot-green { background: #5cbc95; }
.pf-dot-gold  { background: #bc955c; }

/* ================= FOOTER ================= */

.pf-footer {
  background: #000 !important;
  color: #fff;
  padding: 20px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pf-footer-inner {
  max-width: 1200px;
  margin: auto;
}

.pf-footer-copy {
  color: #777;
  font-size: 12px;
  margin-bottom: 8px;
}

.pf-footer-links a {
  color: #bc955c;
  margin-right: 15px;
  text-decoration: none;
}

/* ================= KB PAGE — WRAPPERS ================= */

body.KbArticleContainer .mainContent,
body.KbArticleContainer .middleArea,
body.KbArticleContainer .KbBody,
body.KbCategoryContainer .mainContent,
body.KbCategoryContainer .middleArea,
body.KbSearchContainer .mainContent,
body.KbSearchContainer .middleArea {
  background: #111 !important;
  color: #ddd !important;
}

/* ================= KB ARTICLE — TITLE & META ================= */

body.KbArticleContainer .articleTitle,
body.KbArticleContainer .kbArticleTitle,
body.KbArticleContainer h1.title {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
}

body.KbArticleContainer .breadcrumb,
body.KbArticleContainer .breadcrumb a,
body.KbCategoryContainer .breadcrumb,
body.KbCategoryContainer .breadcrumb a {
  color: #777 !important;
  font-size: 12px;
}

body.KbArticleContainer .breadcrumb a:hover,
body.KbCategoryContainer .breadcrumb a:hover {
  color: #bc955c !important;
}

/* ================= KB ARTICLE — CONTENT BODY ================= */

.KbArticleContainer .ArticleDetailContainer,
.KbArticleContainer .KbArticleContent {
  font-family: 'Montserrat', sans-serif !important;
  background: #111 !important;
  color: #ddd !important;
}

.KbArticleContainer .KbArticleContent * {
  color: inherit !important;
}

.KbArticleContainer .KbArticleContent p,
.KbArticleContainer .KbArticleContent div,
.KbArticleContainer .KbArticleContent span,
.KbArticleContainer .KbArticleContent li {
  color: #ddd !important;
  font-size: 14px;
  line-height: 1.7;
}

.KbArticleContainer .KbArticleContent h1,
.KbArticleContainer .KbArticleContent h2,
.KbArticleContainer .KbArticleContent h3,
.KbArticleContainer .KbArticleContent h4 {
  color: #fff !important;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
}

.KbArticleContainer .KbArticleContent strong,
.KbArticleContainer .KbArticleContent b {
  color: #fff !important;
}

.KbArticleContainer .KbArticleContent em {
  color: #bc955c !important;
}

.KbArticleContainer .KbArticleContent a {
  color: #bc955c !important;
  text-decoration: none;
  font-weight: 600;
}

.KbArticleContainer .KbArticleContent a:hover {
  color: #d8b77a !important;
  text-decoration: underline;
}

.KbArticleContainer .KbArticleContent ul,
.KbArticleContainer .KbArticleContent ol {
  padding-left: 20px;
  color: #ddd !important;
}

.KbArticleContainer .KbArticleContent img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.KbArticleContainer .KbArticleContent table {
  width: 100%;
  border-collapse: collapse;
}

.KbArticleContainer .KbArticleContent td,
.KbArticleContainer .KbArticleContent th {
  color: #ddd !important;
  padding: 8px 12px;
  border: 1px solid #333;
}

.KbArticleContainer .KbArticleContent th {
  background: #1a1a1a;
  color: #fff !important;
  font-weight: 700;
}

.KbArticleContainer .KbArticleContent tr:nth-child(even) td {
  background: #161616;
}

.KbArticleContainer .KbArticleContent code,
.KbArticleContainer .KbArticleContent pre {
  background: #1a1a1a !important;
  color: #bc955c !important;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
}

.KbArticleContainer .KbArticleContent pre {
  padding: 16px;
  overflow-x: auto;
}

.KbArticleContainer .KbArticleContent blockquote {
  border-left: 3px solid #bc955c;
  padding-left: 16px;
  color: #aaa !important;
  margin: 16px 0;
  font-style: italic;
}

.KbArticleContainer .KbArticleContent hr {
  border: none;
  border-top: 1px solid #333;
  margin: 24px 0;
}

/* ================= KB CATEGORY PAGE ================= */

body.KbCategoryContainer .categoryTitle,
body.KbCategoryContainer h1,
body.KbCategoryContainer h2 {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
}

body.KbCategoryContainer .articleLink,
body.KbCategoryContainer .articleListItem a {
  color: #bc955c !important;
  text-decoration: none;
  font-weight: 600;
}

body.KbCategoryContainer .articleLink:hover,
body.KbCategoryContainer .articleListItem a:hover {
  color: #d8b77a !important;
  text-decoration: underline;
}

/* ================= ZOHO GLOBAL LINK OVERRIDE ================= */

.portalBody a {
  color: #bc955c;
}

/* ================= WIDGET SPACING (HOME PAGE) ================= */

.WidgetContainer__contentList + .WidgetContainer__contentList {
  margin-top: 1rem !important;
}