/* ============================================================
   SeeMeHired — Zoho Desk Help Center custom CSS
   Theme assumed: "Elegant" (Zoho default)
   Paste into: Setup > Channels > Help Center > [portal]
               > Customize > [theme] > CSS  ->  Preview  ->  Publish

   STEP 1: Replace the values in :root below with your real
           brand tokens from seemehired.com (see chat for how).
   Everything else inherits from these variables.
   ============================================================ */

:root {
  /* --- REPLACE THESE WITH YOUR REAL VALUES --- */
  --smh-primary:        #9240c7;   /* main button / link / accent  <-- replace */
  --smh-primary-hover:  #059669;   /* darker shade for hover       <-- replace */
  --smh-secondary:      #059669;
  --smh-heading:        #9240c7;   /* heading + strong text colour <-- replace */
  --smh-body:           #059669;   /* body text colour             <-- replace */
  --smh-bg:             #ffffff;   /* page background              <-- replace */
  --smh-surface:        #9240c7;   /* cards / form panel background<-- replace */
  --smh-border:         #9240c7;   /* input + card borders         <-- replace */
  --smh-font: Poppins,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;  /* <-- replace stack */
  --smh-radius:         8px;       /* button / input rounding      <-- replace */
  /* ------------------------------------------- */
}

/* --- Global type --- */
body,
.kbBody,
.HomePage {
  font-family: var(--smh-font);
  color: var(--smh-body);
  background: var(--smh-bg);
}

h1, h2, h3, h4,
.Header__name,
.title,
.kbTitle {
  font-family: var(--smh-font);
  color: var(--smh-heading);
}

a,
.kbLink {
  color: var(--smh-primary);
}
a:hover {
  color: var(--smh-primary-hover);
}

/* --- Header / top bar --- */
.Header,
.headerWrapper {
  background: var(--smh-bg);
  border-bottom: 1px solid var(--smh-border);
}

.Header__logo img {
  max-height: 5rem;
  max-width: 10rem;
}

.Icon__brand, .Icon__icon {
  color: var(--smh-secondary);
}

.Header__globalSearchAlt {
  width: 65%;
}

/* Hide the text company name if your logo already carries the brand
   (matches the pattern Zoho documents for the Elegant theme).
   Delete this rule if you want the name shown. */
/*
.Header__name {
  display: none;
}
*/

/* --- Primary buttons (Submit ticket, etc.) --- */
button.submit,
.btn-primary,
.zd_v2-helpcentertheme-button,
input[type="submit"] {
  background: var(--smh-primary) !important;
  border: 1px solid var(--smh-primary) !important;
  color: #ffffff !important;
  border-radius: var(--smh-radius) !important;
  font-family: var(--smh-font);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
button.submit:hover,
.btn-primary:hover,
.zd_v2-helpcentertheme-button:hover,
input[type="submit"]:hover {
  background: var(--smh-primary-hover) !important;
  border-color: var(--smh-primary-hover) !important;
}

/* --- Secondary / outline buttons --- */
.btn-secondary,
button.cancel {
  background: transparent !important;
  border: 1px solid var(--smh-border) !important;
  color: var(--smh-heading) !important;
  border-radius: var(--smh-radius) !important;
}

/* --- New-ticket form: inputs, selects, textareas --- */
.ticketForm input[type="text"],
.ticketForm input[type="email"],
.ticketForm textarea,
.ticketForm select,
.zd_v2-helpcentertheme-input,
.formField input,
.formField textarea,
.formField select {
  border: 1px solid var(--smh-border) !important;
  border-radius: var(--smh-radius) !important;
  background: var(--smh-bg) !important;
  color: var(--smh-body) !important;
  font-family: var(--smh-font);
}
.ticketForm input:focus,
.ticketForm textarea:focus,
.ticketForm select:focus,
.formField input:focus,
.formField textarea:focus {
  outline: none !important;
  border-color: var(--smh-primary) !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important; /* tweak rgba to match --smh-primary */
}

/* Field labels */
.formField label,
.ticketForm label {
  color: var(--smh-heading);
  font-weight: 600;
}

/* --- Cards / panels (KB tiles, form container) --- */
.card,
.kbCategory,
.ticketFormWrapper {
  background: var(--smh-surface);
  border: 1px solid var(--smh-border);
  border-radius: calc(var(--smh-radius) + 4px);
}

/* --- Search bar on the home/portal landing --- */
.searchBox input,
.globalSearch input {
  border: 1px solid var(--smh-border) !important;
  border-radius: var(--smh-radius) !important;
  font-family: var(--smh-font);
}

.Header__searchSection .Header__container {
    background: var(--smh-primary);
    padding: 2rem;
    max-width: 73.125rem;
    margin: 0 4rem;
    border-radius: 1rem;
    margin: 0 auto;
}

.MediaObject__mediaObject {
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.SearchContainer__searchIcon {
    background-color: var(--smh-secondary);
}

.SearchContainer__searchIcon .Icon__icon {
    color: var(--color-white);  
}

.SearchContainer__downArrow {
  border-color: transparent;
    border-bottom: 0;
    border-left: 5px solid rgba(194, 225, 245, 0);
    border-width: 5px 5px medium;
    border-right: 5px solid rgba(194, 225, 245, 0);
    border-top: 5px solid  var(--smh-primary);
    display: block;
    height: 0;
    margin: 8px 0 0;
    width: 0;
}

.Layout__oneColumn {
  max-width: 80rem;
  padding: 1rem 4rem;
}

.Header__searchTitle, .Header__description {
  color: var(--color-white);
}

.ContentBox__boxInnerHome, .KbCategory__box {
  border: solid;
  border-color: #9240c7;
  border-width: 2px 2px 6px;
  border-radius: 1rem;
  padding: 2rem 1rem;
}
.ContentBox__boxInnerHome {
  margin-left: 1rem;
}

.BreadCrumbs__breadcrumbsView ul li:last-child,
.BreadCrumbs__breadCrumbsLastLink {
  color: var(--color-white);
}

.commonStyle__zt3BrandBorder {
    border-color: var(--smh-primary);
}
.commonStyle__zt3Brand {
    color: var(--smh-primary);
}

.AvatarText__squareBg1 {
 border: 1px solid var(--smh-primary); 
}

.commonStyle__zt3BrandBg {
   border: 1px solid var(--smh-secondary);
   background-color: var(--smh-secondary);
}

.AppContainer__arrowShow .Icon__icon {
  color: var(--color-white);
}

.AppContainer__arrowShow:hover .Icon__icon {
  color: var(--smh-secondary);
}

.Header__homeNavbarFixed .Header__navbar .Header__tabsTab.Header__active, .Header__tabsTab.Header__active, .Header__tabsTab:hover {
  color: var(--smh-secondary);
}

.Header__homeNavbarFixed .Header__navbar .Header__tabsTab {
  color: var(--smh-primary);
}

.globalfixednav .globalSignin, .globalfixednav .globalSignup {
    color: var(--smh-primary);
}

.Header__homeNavbarFixed .Header__menu, .Header__homeNavbarFixed .Header__menu:after, .Header__homeNavbarFixed .Header__menu:before {
    background-color: var(--smh-primary);
}

.globalfixednav .globalSignin:hover, .globalfixednav .globalSignup:hover {
  color: var(--smh-secondary);
}

.commonStyle__zt3BrandBg:hover {
  background-color: #f8f8f8;
}


.Button__footerBtn {
    background: var(--smh-secondary);
    border: 1px solid transparent;
    border-radius: 1rem;
    color: var(--color-white);
    font-size: var(--size-base14);
    letter-spacing: normal;
    padding: .7rem 1rem;
    transition: all .15s ease;
}

.Button__footerBtn:hover {
  background: var(--smh-primary); 
}

.Badge__announcement, 
.TopicListRightContainer__countValue,
.Signin__userLink{
  color: var(--smh-primary);
}

#mainContainer {
  background: var(--color-white);
}

/* --- Footer --- */
.Footer,
.footerWrapper {
  background: var(--smh-surface);
  color: var(--smh-body);
  border-top: 1px solid var(--smh-border);
}

/* --- Apply changes only to logged-in users (optional) ---
   Wrap rules in .signedin to scope them to authenticated portal users.
   Example:
   .signedin .Header { background: var(--smh-surface); }
*/