/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

// Fonts from local scss files which import the raw font files.

@import 'fonts/satoshi';
@import 'fonts/montserrat';
@import 'fonts/bossa';
@import 'fonts/inter';

@import "~polipop/src/sass/core";
@import "~polipop/src/sass/default";
/* You can override the default Infima variables here. */
:root {
  --ifm-link-decoration: underline

  // NOTE: FOR FONTS IN THIS SECTION, THIS WILL JUST MODIFY THE TITLE TEXT SECTIONS.
  // TO MODIFY BODY TEXT FONTS, GO TO THIS OTHER SECTION TO MODIFY: 
  // body, html {
  //   font-family: <font_family_name>, Roboto;
  // }

  // // Fonts imported from satoshi.scss which calls raw font files like: woff2, woff and truetype
  // --ifm-font-family-base: 'Satoshi-Bold', sans-serif;

  // // Font test Montserrat
  // --ifm-font-family-base: 'Montserrat-Bold', sans-serif;

  // Font test Bossa
  --ifm-font-family-base: 'Bossa-Medium', sans-serif;

  // Main text color.
  --ifm-font-color-base: #ffffff;

  // Primary brand text color for titles. 
  --ifm-color-primary: #FF8FDA;

  // Secondary brand color for other parts of the webpage. 
  --ifm-color-secondary: #32FE6B;
 
  // // GitBook color testing
  // --ifm-color-primary: #8e81d7;

  // // Brand color testing
  // --ifm-color-primary: #49EDED;

  // // Custom color testing
  // --ifm-color-primary: #00bbff;

  // // Custom color testing
  // --ifm-color-primary: #260079;

  // // Custom color testing
  // --ifm-color-primary: #6b6399;

  --ifm-code-font-size: 95%;

  --ifm-border-color: rgba(255, 255, 255, 0.30)

  // --ifm-color-primary-dark: #707070;
  // --ifm-color-primary-darker: #606060;
  // --ifm-color-primary-darkest: #505050;

  // --ifm-color-primary-light: #909090;
  // --ifm-color-primary-lighter: #A0A0A0;
  // --ifm-color-primary-lightest: #B0B0B0;

  --ifm-menu-color: #E5E5E5;

  --ifm-blockquote-border-color: rgba(255, 255, 255, 0.30);
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,1)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');

  --ifm-alert-background-color: #191919;
  --ifm-alert-border-color: rgba(255, 255, 255, 0.30);

}

html[data-theme='dark'] { /* Overriding root Infima variables */
  background: #000000;
  --ifm-link-decoration: underline
  // // Brand color testing
  // --ifm-background-color: #3700ff;
  // --ifm-background-surface-color: #3700ff;

  // // Custom color testing
  // --ifm-background-color: #260079;
  // --ifm-background-surface-color: #260079;

  // // GitBook Colors
  // --ifm-background-color: #1f1f22;
  // --ifm-background-surface-color: #1f1f22;

  // Rebrand image color testing
  --ifm-color-cyan: #49EDED;
  --ifm-background-color: #0d0d0d;
  --ifm-background-surface-color: #191919;

  --ifm-color-scheme: light;
  --ifm-border-color: rgba(255, 255, 255, 0.30);
  --ifm-blockquote-border-color: rgba(255, 255, 255, 0.30);
}

[data-theme='light'] { /* Overriding root Infima variables */

  // // Brand color testing
  // --ifm-color-primary: #3700ff;
  // --ifm-background-color: #49EDED;
  // --ifm-background-surface-color: #49EDED;

  // Primary title text color
  --ifm-color-primary: #FF8FDA;
  // Background color based on operating system theme
  --ifm-background-color: #0d0d0d;
  --ifm-background-surface-color: #191919;

  // /* Force light text */
  // --ifm-font-color-base: #ffffff; /* Base text color */
  // --ifm-color-content: #ffffff; /* Content text color */
  // --ifm-color-secondary: #e0e0e0; /* Secondary text color */

  // Add styling for inline code blocks in light mode
  .markdown p code, .markdown li code {
    background-color: rgba(0, 0, 0, 0);
    color: #FFFFFF;
  }

}

// Forces background (HTML object "docMainContainer_TBSr" or "docMainContainer") color for dark and light themes. 
main[class^='docMainContainer'] {
  background-color: #000000;
}

// Forces background (HTML object "docRoot" or "docRoot_UBD9") color for dark and light themes. 
[class^='docRoot'] {
  background-color: #000000;
}

// Note: Admonition styling is handled in src/theme/Admonition/styles.module.scss
// This keeps the styling modular and avoids conflicts with Docusaurus defaults

body, html {
  padding: 0;
  margin: 0;
  // font-family: Satoshi-Variable, Roboto;
  // font-family: Montserrat-Medium, Roboto;
  // font-family: Bossa-Medium, Roboto;
  font-family: Inter-Medium, Roboto;

}

footer.footer {
  display: none;
}

hr {
  background-color: var(--ifm-border-color);
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .react-daterange-picker__button svg {
  stroke: white;
}

[data-theme='dark'] .faucetItem {
border:  1px solid white;
}

[data-theme='dark'] .react-daterange-picker__inputGroup__input {

color: white;
}

.react-calendar__month-view__weekdays__weekday {
    color: black;
}

.navbar.navbar--fixed-top {
  box-shadow: none;
}

// Navbar logo scale down 75% by using transform()
.navbar__logo img {
  margin-left: -13px;
  transform: scale(0.80); /* Adjust percentage (0.75 = 75%) */
  transform-origin: center; /* Ensures scaling from the center */
}

// Add space between sidebar and body 
.theme-doc-sidebar-container {
  background-color: var(--ifm-navbar-background-color);
  margin-right: 15px; /* Adjust spacing between sidebar and body */
  color: var(--ifm-color-inactive-link);
}

.breadcrumbs {
  padding: 10px 0px;
}

.breadcrumbs > .breadcrumbs__item:nth-child(2) > .breadcrumbs__link {
  font-family: 'Bossa-medium', sans-serif;
  text-transform: uppercase;
  color: var(--ifm-color-primary);
  background: none;
}

.breadcrumbs > .breadcrumbs__item:nth-child(3) > .breadcrumbs__link:hover {
  color: #FF7B69;
  background: rgba(203, 64, 46, 0.2);
}

.breadcrumbs__item--active > .breadcrumbs__link {
  color: #FF7B69;
  background: rgba(203, 64, 46, 0.2);
}


.theme-doc-sidebar-item-link-level-1 > .menu__link,
.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible > .menu__link {
  font-family: var(--ifm-font-family-base);
  text-transform: uppercase;
  font-size: 14px;
}

.theme-doc-sidebar-item-link-level-3,
.theme-doc-sidebar-item-link-level-2 {
  color: var(--ifm-font-color-base);
  font-size: 14px;
}

.theme-doc-sidebar-item-link-level-2 > .menu__link,
.theme-doc-sidebar-item-link-level-2 > .menu__list-item {
  color: var(--ifm-font-color-base)
}

.theme-doc-sidebar-item-link-level-2 > .menu__link--active,
.theme-doc-sidebar-item-link-level-2 > .menu__list-item--active {
  color: #FF7B69;
  background: none;
}

.theme-doc-sidebar-item-link-level-3 > .menu__link,
.theme-doc-sidebar-item-link-level-3 > .menu__list-item {
  color: var(--ifm-font-color-base)
}

.theme-doc-sidebar-item-link-level-3 > .menu__link--active,
.theme-doc-sidebar-item-link-level-3 > .menu__list-item--active {
  color: #FF7B69;
  background: none;
}


.menu__link.menu__link--sublist:hover {
  color: var(--ifm-font-color-base)
}

.menu__link--active::after {
  filter: brightness(0) saturate(100%) invert(69%) sepia(62%) saturate(1002%) hue-rotate(289deg) brightness(111%) contrast(106%) !important;
}

.menu__link::after {
  filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(1095%) hue-rotate(166deg) brightness(91%) contrast(80%);
}

.menu__link:hover::after {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(7%) hue-rotate(141deg) brightness(102%) contrast(104%) !important
}

.menu__link--active:hover::after {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(7%) hue-rotate(141deg) brightness(102%) contrast(104%) !important;
}

.clean-btn.menu__caret:hover {
  background: none;
}

.menu__list-item-collapsible > .clean-btn.menu__caret::before {
  filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(1095%) hue-rotate(166deg) brightness(91%) contrast(80%);
}

.menu__list-item-collapsible--active > .clean-btn.menu__caret::before {
  filter: brightness(0) saturate(100%) invert(69%) sepia(62%) saturate(1002%) hue-rotate(289deg) brightness(111%) contrast(106%) !important;
}

//
.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link--active {
  color: var(--ifm-menu-color);
}

.theme-doc-sidebar-item-category-level-2:hover > .menu__list-item-collapsible > .menu__link--active {
  color: var(--ifm-font-color-base)
}

.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible--active > .menu__link--active {
  color: var(--ifm-menu-color-active);
}

.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible--active:hover > .menu__link--active {
  color: var(--ifm-font-color-base)
}

.menu__list-item-collapsible:hover > .clean-btn.menu__caret::before {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(7%) hue-rotate(141deg) brightness(102%) contrast(104%) !important;
}

// .menu__list-item-collapsible > .clean-btn[aria-expanded="true"]::before {
//   filter: brightness(0) saturate(100%) invert(69%) sepia(62%) saturate(1002%) hue-rotate(289deg) brightness(111%) contrast(106%) !important;
// }

.menu.thin-scrollbar {
  padding: 10px;
}

.theme-doc-markdown {
  padding-left: 10px; /* Adds spacing to the body */
}

.theme-doc-markdown.markdown {
  background: #000000;
  padding: 20px 70px 100px
}

.table-of-contents__left-border {
  border-left: 1px solid var(--ifm-menu-color);
  color: var(--ifm-menu-color);
}

.toc-highlight {
  color: var(--ifm-menu-color);
}

.table-of-contents__left-border:hover > * > .toc-highlight {
  color: white;
}

.table-of-contents__left-border:hover > * > .table-of-contents__link--active {
  color: var(--ifm-color-cyan)
}

.markdown > * {
  font-family: "Inter Medium", sans-serif;
}

.toc-highlight:hover {
  color: var(--ifm-color-cyan) !important
}

.pagination > * > span, p, .pagination-link {
  color: var(--ifm-menu-color);
  margin: 0;
  text-decoration: none !important;
  font-size: 13px;
}

.pagination-right > * > p,
.pagination-left > * > p {
  font-family: var(--ifm-font-family-base);
  text-transform: uppercase;
}

.pagination-right:hover > * > span,
.pagination-left:hover > * > span {
  color: white
}

.pagination-right:hover > * > p,
.pagination-left:hover > * > p {
  color: white
}

.pagination-right:active > * > span,
.pagination-left:active > * > span,
.pagination-right:active > * > p,
.pagination-left:active > * > p {
  color: var(--ifm-color-primary)
}

.chevron-arrow-left {
  display: inline-block;
  border-right: 2px solid var(--ifm-menu-color);
  border-bottom: 2px solid var(--ifm-menu-color);
  width: 10px; height: 10px;
  transform: rotate(-225deg);
}

.chevron-arrow-right {
  display: inline-block;
  border-right: 2px solid var(--ifm-menu-color);
  border-bottom: 2px solid var(--ifm-menu-color);
  width: 10px; height: 10px;
  transform: rotate(-45deg);
}

.pagination-right:hover > .chevron-arrow-right,
.pagination-left:hover > .chevron-arrow-left {
  border-right: 2px solid white !important;
  border-bottom: 2px solid white !important;
}

.pagination-right:active > .chevron-arrow-right,
.pagination-left:active > .chevron-arrow-left {
  border-right: 2px solid var(--ifm-color-primary) !important;
  border-bottom: 2px solid var(--ifm-color-primary) !important;
}

.pagination-right,
.pagination-left {
  background: var(--ifm-navbar-background-color);
  border-radius: 10px;
  flex-grow: 1;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px
}

.pagination-right {
  justify-content: flex-end;
  text-align: end;
}

.table-of-contents__left-border:hover {
  border-left: 1px solid var(--ifm-border-color);
  opacity: 1;
}


.markdown h1:first-child {
  display: none;
}

.markdown h2 {
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 40px;
  font-family: "Bossa", sans-serif;
}

.markdown p {
  font-size: 18px;
  font-family: 'Inter-Regular', sans-serif;
  font-weight: 400;
}

.markdown p > a {
  color: var(--ifm-menu-color);
  text-decoration: underline;
}

.markdown > ul {
  font-family: 'Inter Medium', sans-serif;
  color: var(--ifm-menu-color);
  font-size: 18px;
}

.markdown p > a:hover {
  color: #49EDED;
  text-decoration: underline;
}

.prism-code {
  background: var(--ifm-background-surface-color) !important;
}

.prism-code .token.function {
  color: #49EDED !important;
}

.prism-code .token.comment {
  color: rgba(206, 245, 100, 1) !important;
}

.prism-code .token.string {
  color: #FF8FDA !important
}

// Table styling 
.theme-doc-markdown table {
  table-layout: fixed !important;
  width: 100%;
  min-height: 200px; /* Prevents table from shrinking */
  display: table !important; /* Ensures correct rendering */
}

.theme-doc-markdown table td, .theme-doc-markdown table th {
  height: 50px !important; /* Set a fixed row height */
  vertical-align: middle !important;
  overflow: hidden !important;
}

table th, table td {
  border-top: none;
  border-left: none;
  border-right: none
}

.theme-back-to-top-button {
  display: none;
}

table td a {
  color: var(--ifm-font-color-base) !important;
  text-decoration: underline
}

td strong.row-name {
  color: #49eded;
  font-family: var(--ifm-font-family-base);
  text-transform: uppercase;
}

table td a:hover {
  color: var(--ifm-font-color-base) !important;
  text-decoration: underline
}

table thead tr {
  border-bottom: unset;
  border-top: unset;
}

td > h4 > a {
  color: var(--ifm-color-cyan) !important;
  font-weight: 500;
}

table[data-view="cards"] {
  border-collapse: separate;
  border-spacing: 8px;
}

table[data-view="cards"] td {
  position: relative;
  border: 1px solid var(--ifm-border-color) !important;
  border-radius: 10px;
  background: black;
  overflow: hidden;
  z-index: 2;
  text-align: start;
  padding: 0;
}

table[data-view="cards"] td > a {
  padding: 30px;
  gap: 2px;
  cursor: pointer;
  background: transparent;
  font-size: inherit;
  border: none;
  color: var(--ifm-font-color-base);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: flex-end;
  text-align: start;
  text-decoration: none;
}

table[data-view="cards"] td > a > strong {
  font-family: var(--ifm-font-family-base);
  font-size: 24px
}

table[data-view="cards"] td:hover::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -2;
  border-radius: 10px;
  opacity: 0.7;
  background: linear-gradient(135deg, yellow, orange, purple, blue);
}

table[data-view="cards"] td:hover::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: -1;
  border-radius: 10px;
  background: black;
}

table[data-view="cards"] th:hover, 
table[data-view="cards"] td:hover {
  border-width: 2px;
  border-color: transparent !important;
}

button[aria-label="Collapse sidebar"] {
  background-color: var(--ifm-navbar-background-color);
  border-right: none;
  border-left: none;
  border-bottom: none;
  border-top: 1px solid var(--ifm-border-color);
}

div[aria-label="Expand sidebar"] {
  background-color: var(--ifm-navbar-background-color);
}

button[aria-label="Collapse sidebar"]:hover,
div[aria-label="Expand sidebar"]:hover {
  background-color: var(--ifm-menu-color-background-hover);
}

button[aria-label="Collapse sidebar"] > svg,
div[aria-label="Expand sidebar"] > svg,
button[aria-label="Collapse sidebar"] > svg > g,
div[aria-label="Expand sidebar"] > svg > g {
  stroke: var(--ifm-menu-color);
  fill: var(--ifm-menu-color);
}

@media (min-width: 997px) {
  .navbar_item_1 {
    padding-left: 150px;
  }
  .container.padding-top--md.padding-bottom--lg > .row > .col {
    // max-width: unset !important;
    padding-left: 0;
  }
  .theme-doc-sidebar-container {
    border-right-width: 0 !important
  }
}

div[data-view="cards"] {
  flex-direction: column;
  gap: 10px
}

div[data-view="cards"] > a > strong {
  font-size: 14px;
}

div[data-view="cards"] > a > span {
  font-family: var(--ifm-font-family-base);
  font-size: 16px
}

div[data-view="cards"] > a {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 10px;
  background: black;
  overflow: hidden;
  z-index: 2;
  text-align: start;
  padding: 0;
  position: relative;
  padding: 16px;
  gap: 2px;
  cursor: pointer;
  background: transparent;
  font-size: inherit;
  border: none;
  color: var(--ifm-font-color-base);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: flex-end;
  text-align: start;
  -webkit-text-decoration: none;
  text-decoration: none;
}

div[data-view="cards"] a::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -2;
  border-radius: 10px;
  opacity: 0.7;
  background: linear-gradient(135deg, yellow, orange, purple, blue);
}

div[data-view="cards"] a::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: -1;
  border-radius: 9px;
  background: black;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

//
@media (max-width: 1250px) {
  table[data-view="cards"] {
    display: none !important;
  }
  div[data-view="cards"] {
    display: flex !important;
  }
}

@media (min-width: 1251px) {
  div[data-view="cards"] {
    display: none !important;
  }
}

@media (max-width: 1436px) {
  table#language-table[data-view="cards"] {
    display: none !important;
  }
  div#language-table[data-view="cards"] {
    display: flex !important;
  }
}

@media (min-width: 1437px) {
  div#language-table[data-view="cards"] {
    display: none !important;
  }
}

/* Make the search bar smaller on mobile */
@media (max-width: 768px) {
  .navbar__search-input {
    max-width: 90px !important; /* Reduce width */
    // font-size: 14px !important; /* Smaller font */
    // padding: 4px 8px !important; /* Adjust padding */
    height: 30px !important; /* Reduce height */
  }

  .theme-doc-markdown.markdown {
    padding: 20px;
  }

  .theme-doc-footer.docusaurus-mt-lg {
    margin-top: 16px;
  }

  .theme-doc-toc-mobile > div > ul {
    border: none !important
  }

  .markdown h2 {
    font-size: 30px;
  }

  .markdown hr {
    display: none;
  }

  .pagination-left > * > p,
  .pagination-right > * > P {
    display: none;
  }

  // Hide the search bar text on mobile
  .navbar__search-input::placeholder {
    color: transparent !important;
  }

  /* Reduce placeholder text size */
  .navbar__search-input::placeholder {
    font-size: 12px;
  }

  /* Make the search button smaller */
  .search-bar button {
    padding: 4px !important;
    font-size: 12px !important;
  }
}

a.hash-link {
  color: var(--ifm-color-cyan)
}

a.theme-edit-this-page {
  color: var(--ifm-font-color-base);
}

a.theme-edit-this-page:hover {
  color: var(--ifm-color-cyan);
}

.announcementBar_node_modules-\@docusaurus-theme-classic-lib-next-theme-AnnouncementBar-styles-module {
  height: 80px !important;
}
@media (max-width: 997px) {
  .announcementBar_node_modules-\@docusaurus-theme-classic-lib-next-theme-AnnouncementBar-styles-module {
    height: 200px !important;
  }
}

.navbar__item.navbar__link.navbar_item_2 > svg,
.navbar__item.navbar__link.navbar_item_1 > svg {
  display: none;
}

.navbar__item.navbar__link {
  font-family: var(--ifm-font-family-base);
}

.polipop_position_bottom-right {
  position: fixed;
  /* right: 50%; */
  bottom: 50%;
  /* display: flex; */
  /* justify-content: flex-end !important; */
  transform: translateX(-10%);
  width: 80%;
}

.polipop__notification-inner {
  text-align: center;
}

.polipop__notification-title {
  font-size: 18px;
  font-weight: 800;
}

.polipop_theme_default .polipop__notification-icon {
  margin: 0 12px 0 0;
  position: absolute;
}

#mypolipop > div.polipop__notifications > div {
  box-shadow: -1px 1px 2px 2px rgb(0 0 0 / 30%);
}

.pagination-nav__link {
  border-color: var(--ifm-border-color);
  color: var(--ifm-color-cyan);
}

.pagination-nav__link:hover {
  border-color: var(--ifm-color-cyan);
  color: var(--ifm-color-cyan);
}

.pagination-nav__sublabel {
  color: var(--ifm-menu-color);
}


// .navbar_item_1, .navbar_item_2  {
//   color: #FFFFFF;
// }

// .navbar_item_1:hover, .navbar_item_2:hover  {
// color: #808080;
// }

// a[href="/faucetExplorer"], a[href="/networkHealth"]  {
//   display: none;
// }

.faucetContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.faucetItem {
  width: 20%;
  margin: 2%;
  padding: 5%;
      flex: 1 1 auto;
      text-align: center;
      min-height: 50px;
      min-width: 300px;
      flex-wrap: wrap;
      border: 1px solid black;
}

// a.navbar__item.navbar__link.navbar_item_button {
//     background-color: #808080;
//     color: white;
// }
//
// a.navbar__item.navbar__link.navbar_item_button:hover {
//     background-color: #808080;
//     color: white;
// }

.react-daterange-picker__inputGroup__input:invalid {
    background: none !important;
}

.alert--info {
  --ifm-alert-background-color: var(--ifm-background-surface-color);
  --ifm-alert-background-color-highlight: var(--ifm-menu-color-background-hover);
  --ifm-alert-foreground-color: var(--ifm-color-info-contrast-foreground);
  --ifm-alert-border-color: var(--ifm-border-color);
}


.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

[data-theme='light'] .DocSearch {
  /* --docsearch-primary-color: var(--ifm-color-primary); */
  /* --docsearch-text-color: var(--ifm-font-color-base); */
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(94, 100, 112, 0.7);
  /* Modal */
  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
  /* Search box */
  // --docsearch-searchbox-background: var(--ifm-color-secondary);
  --docsearch-searchbox-background: var(--ifm-color-black);
  // --docsearch-searchbox-focus-background: var(--ifm-color-white);  
  --docsearch-searchbox-focus-background: var(--ifm-color-black);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  // --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-active-color: var(--ifm-color-black);
  // --docsearch-hit-background: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-black);
  /* Footer */
  // --docsearch-footer-background: var(--ifm-color-white);
  --docsearch-footer-background: var(--ifm-color-black);
}

.footer {
  background-color: #191919 !important; /* Directly enforce the color */
}

[data-theme='dark'] .DocSearch {
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(0, 0, 0, 0.7);
  /* Modal */
  --docsearch-modal-background: var(--ifm-background-color);
  /* Search box */
  --docsearch-searchbox-background: var(--ifm-background-color);
  --docsearch-searchbox-focus-background: var(--ifm-color-black);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-black);
  --docsearch-hit-background: var(--ifm-color-emphasis-100);
  /* Footer */
  --docsearch-footer-background: var(--ifm-background-surface-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    var(--ifm-color-emphasis-200) 0%,
    var(--ifm-color-emphasis-100) 100%
  );
}

[data-theme='dark'] .buttonHighContrast {
  background-color: #00FF00;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

[data-theme='dark'] .buttonHighContrast:hover {
  background-color: #ffffff;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

[data-theme='light'] .buttonHighContrast {
  background-color: #FF0000;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

[data-theme='light'] .buttonHighContrast:hover {
  background-color: #000000;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

// Developer Guides CTA Highlighting - Target ONLY the specific class added by JavaScript

// Target ONLY the specific class added by JavaScript
.developer-guides-cta {
  background: transparent !important;
  color: var(--ifm-font-color-base) !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  padding: 12px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(135deg, #FF8FDA, #FF7B69);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  
  &:hover {
    color: var(--ifm-font-color-base) !important;
    transform: translateY(-1px) !important;
    
    &::before {
      background: linear-gradient(135deg, #FF7B69, #FF8FDA);
    }
  }
}

// Override Docusaurus's background: none rule for our specific element
.menu__list-item-collapsible .developer-guides-cta:hover {
  background: transparent !important;
  color: var(--ifm-font-color-base) !important;
  transform: translateY(-1px) !important;
}

// Show primary color when a child page is active
.menu__list-item-collapsible--active .developer-guides-cta,
.menu__list-item-collapsible:has(.menu__link--active) .developer-guides-cta {
  color: var(--ifm-color-primary) !important;
}

// Keep primary color on hover when active
.menu__list-item-collapsible--active .developer-guides-cta:hover,
.menu__list-item-collapsible:has(.menu__link--active) .developer-guides-cta:hover {
  color: var(--ifm-color-primary) !important;
}