/* ==========================
  Search Input Field Styling
  These media queries target the actual search input field (.search-input)
  to set a consistent height and font size across all viewport sizes.
========================== */
@media (min-width: 2049px) {
  .search-input {
   height: 28px !important;
   font-size: 12px !important;
  }
}

@media (min-width: 1269px) and (max-width: 2048px) {
  .search-input {
   height: 28px !important;
   font-size: 12px !important;
  }
}

@media (min-width: 769px) and (max-width: 1268px) {
  .search-input {
   height: 28px !important;
   font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  .search-input {
   height: 28px !important;
   font-size: 12px !important;
  }
}

/* 
  The following media queries directly target the search bar container in the Docusaurus layout.
  They adjust the search bar's height, border-radius, and horizontal padding for different viewport widths.
  - For large screens (min-width: 1269px), the search bar is set to 50px height with rounded corners and left padding.
  - For medium screens (769px to 1268px), similar styling is applied to a slightly different DOM structure.
  - For small screens (max-width: 768px), two selectors are used to handle possible DOM variations:
    - One sets the search bar height to 40px.
    - The other sets it to 20px, both maintaining the rounded corners and left padding.
  Note: The use of deep descendant selectors and !important indicates specificity to override default styles.
*/
  #__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div {
    height: 40px !important;
    border-radius: 69px !important;
    padding-left: 20px !important;
    padding-right: 0px !important;
  }

@media (min-width: 769px) and (max-width: 1268px) {
  #__docusaurus > div:nth-child(2) > div:nth-child(2) > div {
    height: 50px !important;
    border-radius: 69px !important;
    padding-left: 20px !important;
    padding-right: 0px !important;
  }
}


@media (max-width: 768px) {
  #__docusaurus > div:nth-child(2) > div:nth-child(2) > div {
    height: 40px !important;
    border-radius: 69px !important;
    padding-left: 20px !important;
    padding-right: 0px !important;
  }
}


@media (max-width: 768px) {
  #__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div {
    height: 20px !important;
    border-radius: 69px !important;
    padding-left: 20px !important;
    padding-right: 0px !important;
  }
}


/* Responsive styling for the Docusaurus search button to match input fields */


@media (min-width: 2049px) {
  #__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button {
    height: 30px !important;
    font-size: 14px !important;
    border-radius: 69px !important;
    padding: 0 20px !important;
  }
}

@media (min-width: 1269px) and (max-width: 2048px) {
  #__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button {
    height: 30px !important;
    font-size: 13px !important;
    border-radius: 69px !important;
    padding: 0 20px !important;
  }
}

@media (min-width: 769px) and (max-width: 1268px) {
  #__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button {
    height: 30px !important;
    font-size: 12px !important;
    border-radius: 69px !important;
    padding: 0 20px !important;
  }
}

@media (max-width: 768px) {
  #__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button {
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 69px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 480px) {
  #__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button {
    height: 24px !important;
    font-size: 11px !important;
    border-radius: 69px !important;
    padding: 0 8px !important;
  }
}

/* Support for old selector pattern */
@media (min-width: 2049px) {
  #__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button {
    height: 30px !important;
    font-size: 14px !important;
    border-radius: 69px !important;
    padding: 0 20px !important;
  }
}

@media (min-width: 1269px) and (max-width: 2048px) {
  #__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button {
    height: 30px !important;
    font-size: 13px !important;
    border-radius: 69px !important;
    padding: 0 20px !important;
  }
}

@media (min-width: 769px) and (max-width: 1268px) {
  #__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button {
    height: 30px !important;
    font-size: 12px !important;
    border-radius: 69px !important;
    padding: 0 20px !important;
  }
}

@media (max-width: 768px) {
  #__docusaurus > div:nth-child(2) > div:nth-child(2) > div > div > form > button {
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 69px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 480px) {
  #__docusaurus > div:nth-child(2) > div:nth-child(2) > div > div > form > button {
    height: 24px !important;
    font-size: 11px !important;
    border-radius: 69px !important;
    padding: 0 8px !important;
  }
}

/* Super high tech hover effects: rotating orbitals with glow */
#__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button,
#__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button {
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* First orbital: solid, clockwise, orange glow */
#__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button::before,
#__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #ff8800cc;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 16px 4px #ff8800cc, 0 0 32px 8px #fff8f055;
  transition: opacity 0.2s;
  z-index: 0;
}

/* Second orbital: dashed, counterclockwise, white glow */
#__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button::after,
#__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px dashed #fff8f0cc;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 24px 8px #fff8f099, 0 0 48px 16px #ff880055;
  transition: opacity 0.2s;
  z-index: 0;
}

/* Show and animate orbitals on hover */
#__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button:hover::before,
#__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button:hover::before {
  opacity: 1;
  animation: orbit-cw 1.6s linear infinite, orbital-glow 1.2s ease-in-out infinite alternate;
}

#__docusaurus > div:nth-child(2) > div > div > div:nth-child(3) > div > form > button:hover::after,
#__docusaurus > div:nth-child(2) > div > div:nth-child(2) > div > div > form > button:hover::after {
  opacity: 1;
  animation: orbit-ccw 2.2s linear infinite, orbital-glow2 1.6s ease-in-out infinite alternate;
}

@keyframes orbit-cw {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes orbit-ccw {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotate(-360deg) scale(1.1); }
}
@keyframes orbital-glow {
  0% { box-shadow: 0 0 16px 4px #ff8800cc, 0 0 32px 8px #fff8f055; }
  100% { box-shadow: 0 0 32px 8px #ff8800ff, 0 0 48px 16px #fff8f099; }
}
@keyframes orbital-glow2 {
  0% { box-shadow: 0 0 24px 8px #fff8f099, 0 0 48px 16px #ff880055; }
  100% { box-shadow: 0 0 40px 16px #fff8f0ff, 0 0 64px 24px #ff880099; }
}

form {
  padding: 20px 0px 20px 0px;
  z-index: 0;
  margin-left: -20px;
}