/* ElTamarindo Header Language Switcher - Responsive UI
   Goal: keep top-bar language selector readable and compact on mobile/tablet,
   while maintaining desktop spacing. Theme remains the primary layout authority.
*/

/* Wrapper provided by widget output */
.et-header-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

/* Normalize common switcher outputs (TranslatePress & Polylang) */
.et-header-lang-switcher a,
.et-header-lang-switcher button,
.et-header-lang-switcher select {
  font-size: 14px;
  line-height: 1.2;
}

/* Dropdown/select should never overflow narrow headers */
.et-header-lang-switcher select {
  max-width: 160px;
  width: auto;
}

/* Make links tap-friendly without bloating desktop */
.et-header-lang-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
}

/* If theme supplies background/borders, we don't fight it.
   These are subtle defaults and should blend with most headers. */
.et-header-lang-switcher a {
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Images/flags */
.et-header-lang-switcher img {
  max-height: 14px;
  width: auto;
}

/* Tablet */
@media (max-width: 991px) {
  .et-header-lang-switcher a {
    padding: 6px 8px;
    border-radius: 9px;
  }
  .et-header-lang-switcher select {
    max-width: 140px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .et-header-lang-switcher {
    gap: 6px;
  }

  .et-header-lang-switcher a,
  .et-header-lang-switcher select {
    font-size: 13px;
  }

  /* Keep it compact; avoid pushing phone header into 2 lines when possible */
  .et-header-lang-switcher a {
    padding: 5px 7px;
  }

  .et-header-lang-switcher select {
    max-width: 120px;
  }
}

/* Very small devices */
@media (max-width: 390px) {
  .et-header-lang-switcher a,
  .et-header-lang-switcher select {
    font-size: 12px;
  }
  .et-header-lang-switcher select {
    max-width: 105px;
  }
}

/* Visibility helpers (Elementor-style breakpoints) */
@media (max-width: 767px) {
  .et-hide-mobile { display: none !important; }
  .et-show-desktop-only { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .et-hide-tablet-mobile { display: none !important; }
  .et-show-mobile-only { display: none !important; }
}
@media (min-width: 1025px) {
  .et-show-mobile-only { display: none !important; }
  .et-show-tablet-mobile { display: none !important; } /* tablet+mobile only */
}

/* Compact mode on mobile */
@media (max-width: 767px) {
  .et-compact-mobile a { padding: 4px 6px !important; }
  .et-compact-mobile select { max-width: 105px !important; }
}

/* Spanish toggle */
.et-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.et-lang-toggle--button {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.1;
}
.et-lang-toggle--inline {
  padding: 2px 0;
  border: 0;
  text-decoration: underline;
  font-size: 13px;
}
@media (max-width: 767px) {
  .et-lang-toggle--button { padding: 4px 8px; font-size: 12px; }
}