/* Language selector — the globe dropdown used on the login page and in the store header.
   Shared by the classic and basic themes. IE11-safe: no custom properties, no :focus-visible. */

.vs-language-selector {
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
  vertical-align: middle;
}

/* Collapsed control: soft white pill — globe, native name, chevron. */
.vs-language-selector__control {
  display: inline-block;
  padding: 6px 10px 6px 8px;
  background-color: #ffffff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  color: #1f2d4d;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.vs-language-selector__control:hover,
.vs-language-selector--open .vs-language-selector__control {
  border-color: #c9d6ea;
  background-color: #f8fafd;
}

.vs-language-selector__control:focus {
  outline: 2px solid #1b6ee8;
  outline-offset: 1px;
}

.vs-language-selector__globe {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  color: #2a4170;
}

.vs-language-selector__globe svg,
.vs-language-selector__chevron svg,
.vs-language-selector__check svg,
.vs-language-selector__option-globe svg {
  display: block;
}

.vs-language-selector__label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.vs-language-selector__chevron {
  display: inline-block;
  vertical-align: middle;
  color: #1f2d4d;
}

/* Open panel: rounded white card with a soft shadow, rows inset as rounded pills. */
.vs-language-selector__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  min-width: 150px;
  margin: 6px 0 0 0;
  padding: 6px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.vs-language-selector__panel li {
  margin: 0;
  padding: 0;
}

.vs-language-selector__panel li + li {
  margin-top: 2px;
}

.vs-language-selector__option {
  display: block;
  width: 100%;
  padding: 8px 14px 8px 8px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: #1f2d4d;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}

.vs-language-selector__option:hover {
  background-color: #f4f7fb;
}

.vs-language-selector__option:focus {
  outline: 2px solid #1b6ee8;
  outline-offset: -2px;
}

.vs-language-selector__option--active,
.vs-language-selector__option--active:hover {
  background-color: #e8f0fd;
  color: #1b5fc1;
}

/* Fixed-width slot so both labels line up whether or not the row carries the checkmark. */
.vs-language-selector__check {
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
  color: #1b6ee8;
}

.vs-language-selector__option-globe {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  color: #2f5aa8;
}

.vs-language-selector__option-label {
  display: inline-block;
  vertical-align: middle;
}

/* Header placement: the switcher sits with the other top-bar controls. */
.vs-language-selector--header {
  margin-left: 10px;
}

.vs-language-selector--header .vs-language-selector__control {
  padding: 4px 8px;
  font-size: 13px;
}

/* Login page: top-right of the form card, above the fields. */
.vs-language-selector--login {
  float: right;
  margin-bottom: 10px;
}

/* Login page header: outlined pill (neutral colours, same palette as the standard control) to the left of Support / Email. */
.vs-login-header-language {
  display: inline-block;
  vertical-align: middle;
  -ms-flex-item-align: center;
  align-self: center;
  margin-right: 28px;
}

.vs-language-selector--login-header .vs-language-selector__control {
  padding: 11px 14px;
  background-color: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  box-shadow: none;
  color: #1f2d4d;
  font-size: 15px;
  font-weight: 600;
}

.vs-language-selector--login-header .vs-language-selector__control:hover,
.vs-language-selector--login-header.vs-language-selector--open .vs-language-selector__control {
  border-color: #b8c4d6;
  background-color: #f8fafd;
}

.vs-language-selector--login-header .vs-language-selector__control:focus {
  outline: 2px solid #1b6ee8;
  outline-offset: 2px;
}

.vs-language-selector--login-header .vs-language-selector__globe {
  margin-right: 12px;
  color: #3a3f4a;
}

.vs-language-selector--login-header .vs-language-selector__label {
  margin-right: 14px;
}

.vs-language-selector--login-header .vs-language-selector__chevron {
  color: #1f2d4d;
}

/* Keep the Support / Email text centred against the taller login-header pill. */
.vs-login-header-language ~ .media-body {
  -ms-flex-item-align: center;
  align-self: center;
}

@media (max-width: 767px) {
  .vs-login-header-language {
    margin-right: 12px;
  }
  .vs-language-selector--login-header .vs-language-selector__control {
    padding: 8px 10px;
  }
}

/* Narrow viewports collapse the control to the globe alone so it never crowds the header. */
@media (max-width: 767px) {
  .vs-language-selector--compact .vs-language-selector__label {
    display: none;
  }
  .vs-language-selector--compact .vs-language-selector__globe {
    margin-right: 2px;
  }
}

/* The strip at the very top of the store header that holds the switcher. It is the one mount
   point for every header style, so it must not disturb the layout beneath it: no height when
   the control is hidden (checkout, unsupported theme, reseller without French). */
.vs-language-bar {
  text-align: right;
  line-height: 0;
}

.vs-language-bar:empty {
  display: none;
}

.vs-language-bar .vs-language-selector {
  line-height: 1.2;
  margin: 4px 12px 4px 0;
}