/* ==========================================================================
   Language switch — shared by every page (see assets/js/i18n.js?v=3e558c8e86)
   A pill with the current language's flag and code that opens the list of
   languages, each with its flag and its own name, as in the Zalico app. It is a
   <details> element, so it opens and its links work without JavaScript too.
   Placement inside each header lives in home.css / components.css.
   ========================================================================== */

/* Root pages hide their English copy for the moment it takes to switch to the
   visitor's language (set by the inline script in <head>, cleared by i18n.js). */
html[data-lang-pending] body {
  visibility: hidden;
}

/* Arabic letters join: letter-spacing would pull them apart. */
:lang(ar) {
  letter-spacing: 0 !important;
}

.lang-switch {
  --lang-ink: #103943;
  --lang-muted: #4c666d;
  --lang-brand: #087b82;
  --lang-soft: #eaf5f3;
  --lang-line: #cedfdf;
  --lang-surface: #fff;
  --lang-hover: #f2f6f4;

  position: relative;
  flex: none;
}

.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding-block: 4px;
  padding-inline: 5px 8px;
  color: var(--lang-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  list-style: none;
  background: var(--lang-surface);
  border: 1px solid var(--lang-line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.lang-switch__button::-webkit-details-marker {
  display: none;
}

.lang-switch__button:focus-visible {
  outline: 3px solid #6b45bb;
  outline-offset: 3px;
}

.lang-switch__button:hover,
.lang-switch[open] > .lang-switch__button {
  background: var(--lang-soft);
  border-color: #b6d6d2;
}

/* "Language:" is read before the code but not shown. */
.lang-switch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lang-switch__chevron {
  flex: none;
  fill: none;
  stroke: var(--lang-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

.lang-switch[open] .lang-switch__chevron {
  transform: rotate(180deg);
}

.lang-switch__list {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--lang-surface);
  border: 1px solid var(--lang-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgb(16 57 67 / 14%);
}

.lang-switch__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  color: var(--lang-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-decoration: none;
  border-radius: 10px;
}

.lang-switch__option:hover {
  background: var(--lang-hover);
}

.lang-switch__option:focus-visible {
  outline: 2px solid #6b45bb;
  outline-offset: -2px;
}

.lang-switch__option[aria-current="true"] {
  color: var(--lang-brand);
  background: var(--lang-soft);
}

.lang-switch__name {
  flex: 1;
}

.lang-switch__option:lang(ar) .lang-switch__name {
  font-size: 16px;
}

.lang-switch__short {
  color: var(--lang-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* The chosen language shows a check instead of its code. */
.lang-switch__option[aria-current="true"] .lang-switch__short {
  width: 16px;
  height: 16px;
  overflow: hidden;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23087b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Flags are drawn round, with a hairline edge so white bands keep their shape. */
.lang-flag {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background: center / cover no-repeat;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(16 57 67 / 18%);
}

.lang-flag[data-flag="us"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath fill='%23B22234' d='M0 0h24v1.846H0zM0 3.692h24v1.846H0zM0 7.385h24v1.846H0zM0 11.077h24v1.846H0zM0 14.769h24v1.846H0zM0 18.462h24v1.846H0zM0 22.154h24v1.846H0z'/%3E%3Crect width='12.5' height='12.923' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='2.5' cy='2.4' r='.75'/%3E%3Ccircle cx='6' cy='2.4' r='.75'/%3E%3Ccircle cx='9.5' cy='2.4' r='.75'/%3E%3Ccircle cx='4.25' cy='5.2' r='.75'/%3E%3Ccircle cx='7.75' cy='5.2' r='.75'/%3E%3Ccircle cx='2.5' cy='8' r='.75'/%3E%3Ccircle cx='6' cy='8' r='.75'/%3E%3Ccircle cx='9.5' cy='8' r='.75'/%3E%3Ccircle cx='4.25' cy='10.8' r='.75'/%3E%3Ccircle cx='7.75' cy='10.8' r='.75'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-flag[data-flag="ar"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%2374ACDF'/%3E%3Crect y='8' width='24' height='8' fill='%23fff'/%3E%3Cpath fill='%23F6B40E' d='M12 8.6l.6 1.7 1.7-.7-.7 1.7 1.7.6-1.7.6.7 1.7-1.7-.7-.6 1.7-.6-1.7-1.7.7.7-1.7-1.7-.6 1.7-.6-.7-1.7 1.7.7z'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23F6B40E' stroke='%2385340A' stroke-width='.35'/%3E%3C/svg%3E");
}

.lang-flag[data-flag="br"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23009C3B'/%3E%3Cpath fill='%23FFDF00' d='M12 3.2L22.6 12 12 20.8 1.4 12z'/%3E%3Ccircle cx='12' cy='12' r='5.2' fill='%23002776'/%3E%3Cpath d='M6.95 10.9Q12 9.4 17.05 12.9' fill='none' stroke='%23fff'/%3E%3C/svg%3E");
}

.lang-flag[data-flag="it"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='8' height='24' fill='%23009246'/%3E%3Crect x='8' width='8' height='24' fill='%23fff'/%3E%3Crect x='16' width='8' height='24' fill='%23CE2B37'/%3E%3C/svg%3E");
}

.lang-flag[data-flag="de"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='8'/%3E%3Crect y='8' width='24' height='8' fill='%23DD0000'/%3E%3Crect y='16' width='24' height='8' fill='%23FFCE00'/%3E%3C/svg%3E");
}

/* Arabic: the United Arab Emirates flag (no single country speaks for the
   language; this one is common in Gulf-facing sites and carries no text). */
.lang-flag[data-flag="ae"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='8' fill='%2300732F'/%3E%3Crect y='8' width='24' height='8' fill='%23fff'/%3E%3Crect y='16' width='24' height='8'/%3E%3Crect width='7' height='24' fill='%23FF0000'/%3E%3C/svg%3E");
}

@media print {
  .lang-switch {
    display: none;
  }
}