/*
* Next Chapter Recovery - Google Translate Component Styles
* Version: 1.0
*/

/* Google Translate Container */
#google_translate_element {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

/* Style the Google Translate dropdown */
.goog-te-gadget {
  font-family: var(--font-primary), sans-serif !important;
  font-size: 14px !important;
  color: var(--color-gray-600) !important;
  margin: 0 !important;
}

.goog-te-gadget-simple {
  background-color: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: 4px !important;
  padding: 5px 8px !important;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center !important;
}

.goog-te-gadget-simple:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(255, 126, 62, 0.1);
}

/* Style the Google Translate text and icons */
.goog-te-gadget-simple .goog-te-menu-value {
  color: var(--color-gray-700) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
}

.goog-te-gadget-simple .goog-te-menu-value span {
  border-left: none !important;
  font-family: var(--font-primary), sans-serif !important;
  margin: 0 2px !important;
}

/* Hide the default Google Translate icon */
.goog-te-gadget-icon {
  display: none !important;
}

/* Hide the default Google Translate arrow */
.goog-te-gadget-simple .goog-te-menu-value span:last-child {
  display: none !important;
}

/* Add a custom arrow */
.goog-te-gadget-simple .goog-te-menu-value::after {
  content: "\f107"; /* Font Awesome down arrow */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 5px;
  color: var(--color-gray-600);
}

.goog-te-gadget-simple .goog-te-menu-value:hover {
  color: var(--color-primary) !important;
}

/* Style the Google Translate dropdown menu */
.goog-te-menu-frame {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
  max-width: 200px !important;
}

.goog-te-menu2 {
  background-color: var(--color-white) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 10px 0 !important;
  max-width: 100% !important;
}

.goog-te-menu2-item div {
  font-family: var(--font-primary), sans-serif !important;
  color: var(--color-gray-700) !important;
  padding: 8px 15px !important;
}

.goog-te-menu2-item:hover div {
  background-color: var(--color-gray-100) !important;
  color: var(--color-primary) !important;
}

/* Style the Google Translate banner */
.goog-te-banner-frame {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.skiptranslate {
  display: none !important;
}

body {
  top: 0 !important;
}

/* Add a language icon */
.language-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* Dark mode styles (when header is transparent) */
.transparent #google_translate_element .goog-te-gadget {
  color: var(--color-white) !important;
}

.transparent #google_translate_element .goog-te-gadget-simple {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.transparent #google_translate_element .goog-te-gadget-simple .goog-te-menu-value {
  color: var(--color-white) !important;
}

.transparent #google_translate_element .goog-te-gadget-simple .goog-te-menu-value::after {
  color: var(--color-white);
}

/* Mobile styles */
@media (max-width: 767px) {
  #google_translate_element {
    margin: 0;
  }
  
  .goog-te-gadget {
    width: auto;
  }
  
  .goog-te-gadget-simple {
    padding: 4px 6px !important;
  }
  
  .goog-te-menu-value span:first-child {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block !important;
  }
}

/* Medium devices and up */
@media (min-width: 768px) {
  #google_translate_element {
    margin-left: 15px;
  }
}