select[data-slim-select]:not([data-slim-select-initialized]) {
    opacity: 0;
    visibility: hidden;
}

.hide-until-ready {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.hide-until-ready.ready {
    opacity: 1;
    visibility: visible;
}

.hide-until-ready[data-ready="true"] {
    opacity: 1;
    visibility: visible;
}

.ss-main-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.ss-main {
    opacity: 1 !important;
    visibility: visible !important;
}

#language-select + .ss-main {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-inline-start: 32px;
  border-radius: 0.375rem !important;
  border: 1px solid #ced4da !important;
  font-size: 0.8rem;
}

#countrySelect + .ss-main {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-inline-start: 32px;
  border-radius: 0.375rem !important;
  border: 1px solid #ced4da !important;
  font-size: 0.8rem;
  width: auto;
  min-width: 150px !important;
}


#language-select + .ss-main.ss-open-below {
  border-radius: 0.375rem !important;
}

#language-select + .ss-main .ss-option {
  justify-content: center;
}

/* Highlighted option */
#language-select + .ss-main .ss-content .ss-list .ss-option:hover,
#language-select + .ss-main .ss-content .ss-list .ss-option.ss-highlighted {
  text-align: center !important;
}

/* Globe icon (still global because it’s your manual <i> element) */
#language-switch-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
  font-size: 1rem;
  color: #6c757d;
}

/* Responsive behavior */
@media (max-width: 480px) {
  #countrySelect + .ss-main,
  #language-select + .ss-main {
    min-height: 37.5px;
    overflow: hidden;
    min-width: 0px !important;
  }

  #countrySelect + .ss-main .ss-values,
  #language-select + .ss-main .ss-values {
    display: none !important;
  }

  #countrySelect + .ss-main .ss-single-selected .ss-arrow,
  #language-select + .ss-main .ss-single-selected .ss-arrow {
    display: inline-block !important;
  }

  #language-switch-icon {
    font-size: 1.2rem;
  }

}

.ss-option:hover {
    background-color: #eff2f7 !important;
    color: #212529 !important;
}
.ss-option.ss-highlighted {
    background-color: #eff2f7 !important;
    color: #212529 !important;
}
.ss-option.ss-selected {
    background-color: #5bcfb3 !important;
    color: #ffffff !important;
}

.ss-main:focus {
  border: 2px solid #5bcfb3 !important;
  box-shadow: none !important;
  outline: none !important;
}

.ss-search input {
    box-shadow: none !important;
}