/* === TELUS DIGITAL — Final UI Styling === */

/* === Generic Links === */
a,
.zd-ticket-title a,
.nav-tabs .nav-link,
.breadcrumb a,
.zd-comment a,
.zd-header a,
.zd-footer a,
.language-dropdown a,
.zd-article-list-item a {
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 500;
}

a:hover,
.zd-ticket-title a:hover,
.nav-tabs .nav-link:hover,
.breadcrumb a:hover,
.zd-comment a:hover,
.zd-header a:hover,
.zd-footer a:hover,
.language-dropdown a:hover,
.zd-article-list-item a:hover {
  text-decoration: underline !important;
}

/* === Dropdowns and Select Menus === */
select,
.zd-select,
.dropdown-menu a {
  color: #000 !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
}

select:hover,
.zd-select:hover,
.dropdown-menu a:hover {
  background-color: #f5f5f5 !important;
}

/* === TELUS Purple Arrow for Custom Dropdown === */
.SearchContainer__downArrow {
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #4B286D !important;
  vertical-align: middle;
}

/* === Lookup Fields === */
input[type="search"],
input[type="text"],
input.lookup-field,
.zd-lookup-input,
.zd-autocomplete-input {
  color: #000 !important;
  border: 1px solid #ccc !important;
  background-color: #fff !important;
}

input[type="search"]:hover,
input[type="text"]:hover,
input.lookup-field:hover,
.zd-lookup-input:hover,
.zd-autocomplete-input:hover {
  border-color: #4B286D !important;
}

/* === Autocomplete Result List === */
.zd-autocomplete-results li,
.zd-suggestions-list li {
  color: #000 !important;
}

.zd-autocomplete-results li:hover,
.zd-suggestions-list li:hover {
  background-color: #f5f1f8 !important;
}

/* === Icons === */
.icon-ticket,
.icon-search,
.zd-ticket-icon,
.zd-icon {
  cursor: pointer;
  color: #4B286D !important; /* Default color for search and other icons */
}

.icon-ticket:hover,
.icon-search:hover,
.zd-ticket-icon:hover,
.zd-icon:hover {
  color: #4B286D !important; /* Prevent hover from turning black */
}

/* In case icon uses SVG */
.icon-search svg use,
.icon-search:hover svg use {
  fill: #4B286D !important;
}

/* === Dropdown Arrows === */
.dropdown-toggle::after {
  border-top-color: #000 !important;
}

/* === Upload (Paperclip) Icon & Label === */
.commonStyle__zt3BrandBorder {
  border-color: #4B286D !important;
  background-color: #fff !important;
}

.FileUpload__attachPin svg use,
.Icon__brand use {
  fill: #4B286D !important;
}

.FileUpload__userLink {
  color: #4B286D !important;
  font-weight: 600 !important;
}

.FileUpload__label:hover .commonStyle__zt3BrandBorder {
  border-color: #391E53 !important;
}

.FileUpload__label:hover svg use {
  fill: #391E53 !important;
}

/* === Scroll to Top Button === */
.AppContainer__backToTop {
  background-color: #4B286D !important;
  border: none !important;
  color: #fff !important;
}

.AppContainer__backToTop svg use {
  fill: #fff !important;
}

.AppContainer__backToTop:hover {
  background-color: #391E53 !important;
}

/* === Submit a Ticket Button === */
.Button__footerBtn {
  background-color: #4B286D !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
}

.Button__footerBtn:hover {
  background-color: #391E53 !important;
}

/* === Search Icon Button === */
.SearchContainer__searchIcon {
  background-color: #4B286D !important;
  transition: background-color 0.2s ease;
}

.SearchContainer__searchIcon:hover {
  background-color: #391E53 !important;
}

.SearchContainer__searchIcon svg use {
  fill: #fff !important;
}

.enduser_avatar,
.agent_avatar {
  color: rgb(51, 51, 51) !important;              /* Light black text */
  background-color: #fff !important;              /* White background */
  border: 1px solid rgb(51, 51, 51) !important;   /* Slightly thinner border */
  border-radius: 50% !important;                 /* Round shape */
}

.LoginDetail__profileBtn {
  background-color: #4B286D !important;  /* TELUS Purple background */
  color: #fff !important;                /* White text */
}

/* Also make sure the link inside gets correct color */
.LoginDetail__profileBtn a {
  color: #fff !important;                /* Ensure white text inside link */
  text-decoration: none !important;
}

/* Make the active tab background/text purple */
.ProfileTabs__activeTab {
  background-color: #f5f1f8 !important;     /* Optional: soft purple background */
  color: #4B286D !important;                /* Purple text */
}

/* Make sure icon inside the active tab is purple too */
.ProfileTabs__activeTab svg use {
  fill: #4B286D !important;
}