/*
 * Published-form language switcher (v2 UI).
 *
 * Replaces the legacy language-dropdown.css for forms whose markup uses the
 * jfLangDd-* structure emitted by for-form-render's getLanguageDropDown() and
 * cardform-fields' Translation field. Visually mirrors the form-builder stage
 * dropdown (@jotforminc/form-builder .formLanguage-*): a rounded trigger of
 * flag + language name + chevron, opening a white rounded panel whose rows show
 * flag + name with an #EDF8FF hover and #343C6A text.
 *
 * Stable JS hooks kept for formTranslation.js / formTranslation.v2.js:
 *   #langDd, #langList, li[data-lang], #input_language, .dn,
 *   .cont / .jfTranslation (wrapper), .only-nation / .only-flag (showStatus).
 */

.jfLangDd {
  position: relative;
  /* Classic (block) form layouts right-align via float. Modern/themed layouts
     wrap the form in a column flex whose default align-items:stretch would
     stretch this wrapper full-width (pushing the trigger to the left while the
     panel detaches to the right); align-self keeps it content-sized and pinned
     to the end (right in LTR, left in RTL). margin-inline-start covers row-flex
     layouts. */
  float: right;
  align-self: flex-end;
  margin-inline-start: auto;
  /* Breathing room so the trigger/panel aren't flush against the form's top
     edge / header (block) or its right edge (inline), matching the
     form-builder spacing. */
  margin-block: 12px;
  margin-inline-end: 24px;
  max-width: 100%;
  z-index: 10;
}

/* ---- Trigger ---- */
/* Borderless, background-less text button that blends into the form: it adopts
   the form's font-family and only renders flag + name + caret (no box). */
.jfLangDd .jfLangDd-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* Pack flag + name + caret together at the start; overrides any legacy
     `.language-dd { justify-content: space-between }` that would otherwise pin
     the caret to the far edge and leave a big gap after the language name. */
  justify-content: flex-start;
  gap: 8px;
  height: 20px;
  /* Size to the active language name (so "English (United States)" isn't
     truncated); only ellipsize if it would exceed the form width. */
  max-width: 100%;
  margin: 0;
  padding: 0 2px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Builder metrics; font-family inherits the form's typeface. */
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0;
  color: #343c6a;
}

.jfLangDd .jfLangDd-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Shrink to the flag + name content (allow shrinking for truncation, but do
     NOT grow) so the caret hugs the label instead of being pushed to the far
     edge — matching the form-builder trigger. */
  flex: 0 1 auto;
  min-width: 0;
}

/* Legacy form CSS pads this node by descendant selector
   (`.cont .language-dd .dd-placeholder { padding: 0 32px }`, specificity 0,3,0),
   which beats the class rule above and inserts a large gap between the language
   name and the caret. Neutralize it via the trigger id (`#langDd`, higher
   specificity) so the caret hugs the name like the form-builder trigger. */
#langDd .jfLangDd-current {
  padding: 0;
}

/* Card-form (and some classic) default stylesheets render a native-style
   dropdown arrow on the language trigger — via a right-aligned background image
   and/or an ::after/::before triangle — which appears as a SECOND chevron next
   to our inline `.jfLangDd-caret`. Suppress it (the #langDd id beats those
   legacy class selectors) so only our single inline caret renders. */
#langDd.jfLangDd-trigger,
#langDd .jfLangDd-current {
  background-image: none;
}

#langDd.jfLangDd-trigger::before,
#langDd.jfLangDd-trigger::after,
#langDd .jfLangDd-current::before,
#langDd .jfLangDd-current::after {
  content: none;
  display: none;
}

.jfLangDd .jfLangDd-flag {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 12px;
  border-radius: 0;
  overflow: hidden;
}

.jfLangDd .jfLangDd-flag svg,
.jfLangDd .jfLangDd-flag img {
  display: block;
  width: 16px;
  height: 12px;
}

.jfLangDd .jfLangDd-current.lang-emp .jfLangDd-flag {
  display: none;
}

.jfLangDd .jfLangDd-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0;
  color: #343c6a;
}

.jfLangDd .jfLangDd-caret {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: #6c73a8;
}

/* ---- Panel ---- */
.jfLangDd .jfLangDd-list {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  /* Builder panel is a fixed 194px; long names truncate rather than widen it. */
  width: 194px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #c8ceed;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(37, 45, 91, 0.04), 0 4px 8px rgba(84, 95, 111, 0.16);
  z-index: 10000;
}

.jfLangDd .jfLangDd-list.dn {
  display: none;
}

/* ---- Rows ---- */
.jfLangDd .jfLangDd-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  /* Cancel the panel's 8px padding so the hover highlight spans the full panel
     width, then re-add inner padding (matches the form-builder list row). */
  margin: 0 -8px;
  padding: 0 12px 0 9px;
  border-radius: 0;
  cursor: pointer;
  color: #343c6a;
  transition: background-color 0.2s ease-in-out;
}

.jfLangDd .jfLangDd-item:hover {
  background-color: #edf8ff;
}

/* The active language is shown in the trigger, so hide it from the list — the
   menu lists only the other languages, exactly like the form-builder dropdown.
   The scripts keep aria-selected in sync on every switch, so this updates live. */
.jfLangDd .jfLangDd-item[aria-selected="true"] {
  display: none;
}

/* ---- showStatus: Text Only (hide flags) ---- */
.jfLangDd.only-nation .jfLangDd-flag {
  display: none;
}

/* ---- showStatus: Flag Only (hide labels) ---- */
.jfLangDd.only-flag .jfLangDd-label {
  display: none;
}

.jfLangDd.only-flag .jfLangDd-trigger,
.jfLangDd.only-flag .jfLangDd-list {
  width: auto;
  min-width: auto;
}

.jfLangDd.only-flag .jfLangDd-current,
.jfLangDd.only-flag .jfLangDd-item {
  justify-content: center;
}

/* ---- RTL ---- */
.form-all[dir="rtl"] .jfLangDd,
[dir="rtl"] .jfLangDd {
  float: left;
}

[dir="rtl"] .jfLangDd .jfLangDd-list {
  right: auto;
  left: 0;
}

/* ---- Mobile / user-avatar offset (legacy parity) ---- */
body.hasFormUserAvatar .jfLangDd {
  margin-right: 42px;
}

[dir="rtl"] body.hasFormUserAvatar .jfLangDd,
body.hasFormUserAvatar [dir="rtl"] .jfLangDd {
  margin-right: 0;
  margin-left: 42px;
}