/* ============================================================================
   Circularo — Zoho Desk Help Center theme override
   Portal:  https://circularo.zohodesk.ae/portal/en/home
   Theme:   Elegant (Zoho Desk, Professional edition — CSS customization only)
   Target:  visual parity with https://help.circularo.com
   Paste into: Setup > Channels > Help Center > Help Center Customization >
               Customize (published theme) > CSS
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700&display=swap");
@import url("https://fonts.cdnfonts.com/css/spartan");

/* ---------------------------------------------------------------- 1. tokens */
/* Values lifted from the live help.circularo.com stylesheet. */
:root {
  --crc-navy:         #0F0069;  /* header / hero base            */
  --crc-violet:       #7000FF;  /* hero gradient top             */
  --crc-purple:       #270778;  /* headings                      */
  --crc-brand:        #4212D6;  /* brand foreground              */
  --crc-accent:       #22AFFF;  /* primary buttons / CTA         */
  --crc-accent-hover: #05A4FF;
  --crc-search-bg:    #26108B;  /* search field inside header     */
  --crc-ink:          #3C4156;  /* body copy                     */
  --crc-link:         #0D42CC;
  --crc-footer:       #121127;
  --crc-line:         #EBEBEE;
  --crc-surface:      #F7F7F9;
  --crc-shadow:       0 8px 15px rgba(18, 17, 39, .08);
  --crc-font-body:    "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
  --crc-font-head:    "Spartan", "League Spartan", "Mulish", sans-serif;

  /* Elegant theme variables, repointed at the Circularo palette. */
  --color-brand:                var(--crc-accent);
  --color-primary:              var(--crc-accent);
  --color-link:                 var(--crc-link);
  --color-linkHover:            var(--crc-accent-hover);
  --color-buttonPrimaryBg:      var(--crc-accent);
  --color-buttonPrimaryText:    #ffffff;
  --color-buttonSecondaryBg:    #ffffff;
  --color-buttonSecondaryText:  var(--crc-purple);
  --color-breadCrumbBg:         var(--crc-surface);
  --color-breadCrumbText:       var(--crc-ink);
  --color-breadCrumbTextHover:  var(--crc-accent-hover);
  --color-userCategory:         var(--crc-purple);
  --color-border:               var(--crc-line);
  --reading-guide-line-bg:      var(--crc-accent);
}

/* ------------------------------------------------------------ 2. typography */
body,
.body,
input,
textarea,
select,
button {
  font-family: var(--crc-font-body);
}

body,
.body {
  color: var(--crc-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--crc-font-head);
  color: var(--crc-purple);
  letter-spacing: 0;
}

/* Headings that sit on the dark hero stay white. */
.Header__name,
.Header__searchTitle,
.Header__description,
h1.Header__searchTitle,
h2.Header__searchTitle {
  color: #ffffff;
}

/* ---------------------------------------------------------------- 3. header */
/* Replace the stock photo background with the Circularo hero gradient. */
.Header__header {
  background-image: linear-gradient(0deg, var(--crc-navy) 0%, var(--crc-violet) 100%) !important;
  background-color: var(--crc-navy) !important;
}

/* Home hero: transparent nav bar over the gradient. */
.Header__homeContent .Header__navbar {
  background-color: transparent !important;
}

/* Inner pages + sticky (scrolled) nav bar: solid navy, never Zoho's #f8f8f8. */
.Header__defaultContent .Header__navbar,
.Header__homeContent.Header__homeNavbarFixed .Header__navbar,
.Header__homeNavbarFixed .Header__navbar {
  background-color: var(--crc-navy) !important;
  box-shadow: 0 2px 12px rgba(15, 0, 105, .25);
}

.Header__container {
  min-height: 76px;
}

/* ------------------------------------------------------ 4. logo, no wordmark */
/* The uploaded logo is the only brand element in the header: the portal-name
   text node is collapsed rather than display:none'd, so the flex layout that
   right-aligns the tabs is preserved. */
.Header__portName {
  display: none !important;
}

.Header__navbar .Header__name,
#navBarContainer .Header__name {
  font-size: 0 !important;
  line-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-width: 0 !important;
}

.Header__logo {
  display: flex;
  align-items: center;
}

.Header__logo img,
.Header__logoImg {
  height: 34px !important;
  max-height: 34px !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.Header__homeNavbarFixed .Header__navbar .Header__logo img {
  height: 30px !important;
  max-width: none !important;
}

/* ------------------------------------------------------------ 5. hero block */
.Header__homeContent .Header__searchSection {
  padding: 5rem 0 5.5rem;
}

.Header__searchTitle {
  font-family: var(--crc-font-head);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0;
  text-shadow: none;
}

.Header__description {
  font-size: 1rem;
  opacity: .85;
  width: 60%;
}

/* ------------------------------------------------------------ 6. search box */
.Header__globalSearch input,
.Header__globalSearchAlt input,
.Input__headerSearch {
  background-color: var(--crc-search-bg) !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-family: var(--crc-font-body);
}

.Header__globalSearch input::placeholder,
.Header__globalSearchAlt input::placeholder,
.Input__headerSearch::placeholder {
  color: rgba(255, 255, 255, .62) !important;
}

.Button__search {
  color: #ffffff !important;
}

/* ------------------------------------------------------------------ 7. tabs */
.Header__tabsTab,
.Header__tabsTab a,
.Header__tabs__link,
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab {
  color: #ffffff !important;
  font-family: var(--crc-font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}

.Header__tabsTab:hover,
.Header__tabsTab.Header__active {
  border-bottom: 2px solid var(--crc-accent);
}

.Header__userPreference,
.Header__userPreference_mobile,
.Header__menuicon,
.Header__menuToggle {
  color: #ffffff !important;
}

/* --------------------------------------------- 8. no knowledge base anywhere */
/* Primary switch is Customize > Tabs > Knowledge Base > Visibility: off.
   These rules are the safety net (also catches KB entry points on the home
   page, search filters and the footer). */
.Header__tabsTab:has(a[href*="/kb"]),
.Header__menuList li:has(a[href*="/kb"]),
.Header__menuBoxMain a[href*="/kb"],
.Footer__footerLink[href*="/kb"],
.SearchResult__filterList li:has(a[href*="/kb"]),
.KbCategory__box,
.CategorySection__popupbox {
  display: none !important;
}

/* --------------------------------------------------------------- 9. buttons */
.Button__brand,
.Button__primary,
.Button__buttonCommon.Button__primary,
.Footer__footerBtn,
.Button__footerBtn {
  background-color: var(--crc-accent) !important;
  border-color: var(--crc-accent) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--crc-font-head);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background-color .2s ease-in-out;
}

.Button__brand:hover,
.Button__primary:hover,
.Button__hoverprimary:hover,
.Footer__footerBtn:hover,
.Button__footerBtn:hover {
  background-color: var(--crc-accent-hover) !important;
  border-color: var(--crc-accent-hover) !important;
}

.Button__secondary,
.Button__default,
.Button__borderButton,
.Button__primaryBorder {
  background-color: #ffffff !important;
  border: 1px solid var(--crc-line) !important;
  color: var(--crc-purple) !important;
  border-radius: 4px !important;
  font-family: var(--crc-font-head);
  font-weight: 600;
}

.Button__secondary:hover,
.Button__default:hover,
.Button__borderButton:hover,
.Button__primaryBorder:hover {
  border-color: var(--crc-accent) !important;
  color: var(--crc-accent-hover) !important;
}

/* --------------------------------------------------------- 10. cards, links */
.DashboardCard__container,
.KbDetailLtContainer__container,
.LayoutListContainer__container {
  background-color: #ffffff;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: var(--crc-shadow);
}

.DashboardCard__description {
  color: var(--crc-ink);
}

a,
.Link__link {
  color: var(--crc-link);
}

a:hover,
.Link__link:hover {
  color: var(--crc-accent-hover);
}

.BreadCrumbs__container,
.BreadCrumbs__breadCrumbs {
  background-color: var(--crc-surface) !important;
}

hr,
.Layout__border,
.ListHeader__container {
  border-color: var(--crc-line) !important;
}

/* ---------------------------------------------------------------- 11. footer */
.Footer__footerBg,
.Footer__container,
.Footer__container2 {
  background-color: var(--crc-footer) !important;
  color: rgba(255, 255, 255, .78);
}

.Footer__footerContent,
.Footer__footerDescription,
.Footer__footerCopyrigt,
.Footer__footerInfo,
.Footer__footerQus {
  color: rgba(255, 255, 255, .78) !important;
  font-family: var(--crc-font-body);
  letter-spacing: .04em;
}

.Footer__footerLink {
  color: #ffffff !important;
}

.Footer__footerLink:hover {
  color: var(--crc-accent) !important;
}

/* -------------------------------------------- 13. ticket form + description */
/* Selectors below were read off the live form at
   https://circularo.zohodesk.ae/portal/en/newticket */
.TicketFormLeftContainer__sectionName {
  font-family: var(--crc-font-head);
  color: var(--crc-purple);
  font-weight: 600;
  letter-spacing: .01em;
}

.FormElement__formLabelvertical,
.FormElement__labelStyle {
  color: var(--crc-ink);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  border-radius: 4px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--crc-accent) !important;
  box-shadow: 0 0 0 3px rgba(34, 175, 255, .15) !important;
  outline: none !important;
}

/* Description rich-text editor: make it read as a field like the others.
   The editor is a 58px toolbar plus a 300px contenteditable iframe. */
.KB_Editor {
  border: 1px solid var(--crc-line) !important;
  border-radius: 4px !important;
  overflow: hidden;
}

.KB_Editor_menus {
  background-color: var(--crc-surface) !important;
  border-bottom: 1px solid var(--crc-line) !important;
}

.KB_Editor_iframe {
  min-height: 300px !important;
}

/* CAPTCHA tabs hardcode Zoho orange (#e46317) instead of using --color-brand. */
.HCNewCaptcha__captchaButtonActive {
  border-color: var(--crc-accent) !important;
  color: var(--crc-accent-hover) !important;
}

/* ---------------------------------- 14. hide the "Additional Information" bit */
/* We sell no Products, so the field and its section heading are dead weight.
   The form is a flat list of siblings — the heading is NOT a wrapper — so
   hiding it leaves Description and Attach a file untouched. Verified live.
   Note: this is cosmetic. The field still exists on the layout and submits
   empty. To remove it for real:
   Setup > Customization > Layouts and Fields > Tickets > Edit Layout. */
#field_productId,
.TicketFormLeftContainer__sectionName.Additional_Information {
  display: none !important;
}

/* With one section left, its heading is redundant too — uncomment to drop it.
.TicketFormLeftContainer__sectionName.Ticket_Information {
  display: none !important;
}
*/

/* ------------------------------------------------------------- 12. RTL (AR) */
/* help.circularo.com serves an Arabic locale; keep the same behaviour here. */
html[dir="rtl"] .Header__logo {
  margin: 0 0 0 .8rem;
}