/*
 * 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;
}

/* Classic (non-card) forms: formTranslation.js / .v2.js paint this wrapper with
   the first form element's background (setContainerBackground) so the dropdown
   reads as part of the form instead of a detached box. The background-color
   itself is set inline at runtime from the sampled element color.
   When filled, the wrapper stretches to a full-width band (dropping its
   content-sized float) with the trigger right-aligned, so the fill spans the
   whole form width — not just a chip around the dropdown. */
.jfLangDd.jfLangDd--match-form {
  float: none;
  width: 100%;
  box-sizing: border-box;
  margin-inline-start: 0;
  margin-inline-end: 0;
  /* Zero the base wrapper's vertical margins (margin-block: 12px): as a full-
     width band painted with the first element's color, any top/bottom margin
     reveals a strip of the (differently colored) .form-all background — reading
     as thin "lines" above the band and between the band and the first element.
     Flush margins + the band's own inner padding keep the trigger spaced without
     exposing the form background. */
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 24px;
  /* The band is a direct child of the rounded `.form-all`, so match its top
     corners to the form's radius and square the bottom — otherwise the band's
     corners poke past the form's rounded top corners. */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

[dir="rtl"] .jfLangDd.jfLangDd--match-form {
  /* Re-assert the band's non-floated full-width layout: the RTL `float: left`
     rules below have higher specificity than `.jfLangDd--match-form`, so without
     this they'd flip the band back to a float. */
  float: none;
  justify-content: flex-start;
}

/* The classic theme rounds the FIRST element's header top corners
   (`.form-section li:first-child .form-header-group { border-radius: 20px 20px 0 0 }`),
   leaving rounded "notches" directly under our full-width language band. When the
   filled band is present (the scripts add `.jfLangDd--match-form` only for classic
   forms), square that header's TOP corners so it connects flush to the band — the
   band already inherits the form's top radius and squares its own bottom. We mirror
   the exact selector the theme uses (`li:first-child .form-header-group`) and scope
   it to the band's presence via `.form-all:has(...)`, so forms without the band keep
   the theme's rounding untouched. `!important` guarantees the override regardless of
   theme load order. */
.form-all:has(.jfLangDd--match-form) .form-section > li:first-child .form-header-group {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* ---- 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;
  /* Adapts to the form background for legibility: the scripts set
     --jf-language-trigger-color (dark navy or white, whichever has higher WCAG
     contrast over the painted background). Falls back to the navy default. */
  color: var(--jf-language-trigger-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;
}

/* Card-form default theme (cardforms-default.css) renders the language trigger as
   a white pill (background + border + shadow on .language-dd / .dd-placeholder),
   which boxes the text and prevents the contrast-adapted color from reading
   against the real form background. Strip it via the #langDd id (beats those
   class selectors, no !important needed) so the trigger blends into the form like
   the builder and classic forms; formTranslation.v2.js then sets
   --jf-language-trigger-color from the actual background behind it. */
#langDd.jfLangDd-trigger,
#langDd .jfLangDd-current,
#langDd .jfLangDd-label {
  background: transparent;
  border: none;
  box-shadow: 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;
  /* Inherits the contrast-adapted trigger color (see .jfLangDd-trigger). */
  color: var(--jf-language-trigger-color, #343c6a);
}

.jfLangDd .jfLangDd-caret {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  /* Matches the contrast-adapted trigger color so the caret stays legible too. */
  fill: var(--jf-language-trigger-color, #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;
  /* Cap the panel so a long language list scrolls instead of growing past the
     form/modal edge and getting clipped. ~240px shows just over 6 rows, so the
     7th language peeks at the bottom — making it obvious there's more to
     scroll (rows are 35px; padding 16px + 2px border are included via
     border-box). */
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  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;
}