/* Advanced Language Selector - Guru modules */
.guru-language-selector {
  --guru-ls-text: inherit;
  --guru-ls-bg: transparent;
  --guru-ls-border: currentColor;
  --guru-ls-hover-text: inherit;
  --guru-ls-hover-bg: rgba(0, 0, 0, .05);
  --guru-ls-dropdown-bg: #fff;
  --guru-ls-dropdown-text: #232323;
  --guru-ls-dropdown-border: rgba(0, 0, 0, .12);
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  clear: none !important;
  margin: var(--guru-ls-margin-top, 0) var(--guru-ls-margin-right, 0) var(--guru-ls-margin-bottom, 0) var(--guru-ls-margin-left, 0);
  font-size: var(--guru-ls-font-size, 14px);
  font-weight: var(--guru-ls-font-weight, 500);
  line-height: 1.2;
  color: var(--guru-ls-text);
  overflow: visible !important;
  pointer-events: none;
}

.guru-language-selector--position-left {
  float: left !important;
  justify-content: flex-start;
}

.guru-language-selector--position-right {
  float: right !important;
  justify-content: flex-end;
}

/* Centering needs the available hook/container width. Left/right deliberately stay shrink-to-fit
   so the selector can share one row with legacy Bootstrap pull-right modules. */
.guru-language-selector--position-center {
  float: none !important;
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Compatibility with legacy PrestaShop themes (e.g. Rubix/Viscar) that place social, language
   and currency selectors next to each other using Bootstrap 3 pull-right floats. */
.social-nav-block > .guru-language-selector--position-left,
.social-nav-block > .guru-language-selector--position-right {
  display: inline-flex !important;
  width: auto !important;
  max-width: calc(100% - 1px);
}


.guru-language-selector *,
.guru-language-selector *::before,
.guru-language-selector *::after {
  box-sizing: border-box;
}

.guru-language-selector__box {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  overflow: visible !important;
  z-index: 20;
  pointer-events: auto;
}

.guru-language-selector.is-open .guru-language-selector__box,
.guru-language-selector__box:hover,
.guru-language-selector__box:focus-within {
  z-index: 2147483000;
}

.guru-language-selector__trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--guru-ls-gap, 7px);
  margin: 0;
  padding: var(--guru-ls-padding-top, 6px) var(--guru-ls-padding-right, 8px) var(--guru-ls-padding-bottom, 6px) var(--guru-ls-padding-left, 8px);
  border: var(--guru-ls-border-width, 0) solid var(--guru-ls-border);
  border-radius: var(--guru-ls-border-radius, 4px);
  background: var(--guru-ls-bg);
  color: var(--guru-ls-text);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.guru-language-selector__trigger:hover,
.guru-language-selector__trigger:focus-visible,
.guru-language-selector.is-open .guru-language-selector__trigger {
  background: var(--guru-ls-hover-bg);
  color: var(--guru-ls-hover-text);
}

.guru-language-selector__trigger:focus-visible,
.guru-language-selector__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.guru-language-selector__content,
.guru-language-selector__link {
  display: flex;
  align-items: center;
  gap: var(--guru-ls-gap, 7px);
}

.guru-language-selector__flag {
  display: block;
  flex: 0 0 auto;
  width: var(--guru-ls-flag-width, 24px);
  height: auto;
  max-width: none;
  border-radius: var(--guru-ls-flag-radius, 2px);
  object-fit: cover;
}

.guru-language-selector__label {
  display: inline-block;
  white-space: nowrap;
}

.guru-language-selector__arrow {
  width: 7px;
  height: 7px;
  margin-left: 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.guru-language-selector.is-open .guru-language-selector__arrow {
  transform: translateY(2px) rotate(225deg);
}

.guru-language-selector__dropdown {
  position: absolute !important;
  top: calc(100% + var(--guru-ls-dropdown-offset, 6px)) !important;
  min-width: var(--guru-ls-dropdown-min-width, 150px);
  max-width: min(320px, calc(100vw - 24px));
  margin: 0 !important;
  padding: 5px !important;
  list-style: none !important;
  background: var(--guru-ls-dropdown-bg, #fff) !important;
  background-color: var(--guru-ls-dropdown-bg, #fff) !important;
  color: var(--guru-ls-dropdown-text, #232323) !important;
  border: 1px solid var(--guru-ls-dropdown-border, rgba(0, 0, 0, .12)) !important;
  border-radius: max(6px, var(--guru-ls-border-radius, 4px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 2147483646 !important;
  isolation: isolate;
  overflow: visible !important;
}

/* Invisible hover bridge: fills the configured gap between trigger and dropdown. */
.guru-language-selector__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--guru-ls-dropdown-offset, 6px) + 4px);
  background: transparent;
  pointer-events: auto;
}

.guru-language-selector--dropdown-left .guru-language-selector__dropdown { left: 0 !important; right: auto !important; }
.guru-language-selector--dropdown-right .guru-language-selector__dropdown { right: 0 !important; left: auto !important; }

.guru-language-selector--shadow .guru-language-selector__dropdown {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
}

.guru-language-selector.is-open .guru-language-selector__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .guru-language-selector[data-open-mode="hover"] .guru-language-selector__box:hover .guru-language-selector__dropdown,
  .guru-language-selector[data-open-mode="hover"] .guru-language-selector__box:focus-within .guru-language-selector__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.guru-language-selector__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative;
  z-index: 1;
}

.guru-language-selector__link {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--guru-ls-item-padding-y, 8px) var(--guru-ls-item-padding-x, 10px) !important;
  border-radius: max(4px, calc(var(--guru-ls-border-radius, 4px) - 1px));
  color: var(--guru-ls-dropdown-text, #232323) !important;
  background: transparent !important;
  text-decoration: none !important;
  cursor: pointer;
  pointer-events: auto !important;
  transition: background-color .14s ease, color .14s ease;
}

.guru-language-selector__link:hover,
.guru-language-selector__link:focus-visible,
.guru-language-selector__item.is-current .guru-language-selector__link {
  color: var(--guru-ls-hover-text) !important;
  background: var(--guru-ls-hover-bg) !important;
  text-decoration: none !important;
}

.guru-language-selector__check {
  margin-left: auto;
  padding-left: 12px;
  font-size: .88em;
  opacity: .7;
}

.guru-language-selector__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 767px) {
  .guru-language-selector__dropdown {
    max-width: calc(100vw - 16px);
  }
}


/* Mobile header integration (Viscar/Rubix and other PrestaShop themes using
   the native #_mobile_language_selector placeholder). The same DOM instance
   is moved here by front.js, so there are no duplicated IDs or event handlers. */
@media (max-width: 767px) {
  #_mobile_language_selector {
    position: relative;
    overflow: visible !important;
  }

  #_mobile_language_selector > .guru-language-selector {
    float: none !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    clear: both !important;
  }

  #_mobile_language_selector > .guru-language-selector--position-left {
    justify-content: flex-start !important;
  }

  #_mobile_language_selector > .guru-language-selector--position-center {
    justify-content: center !important;
  }

  #_mobile_language_selector > .guru-language-selector--position-right {
    justify-content: flex-end !important;
  }

  #_mobile_language_selector .guru-language-selector__box {
    float: none !important;
  }

  #_mobile_language_selector .guru-language-selector__dropdown {
    z-index: 2147483646 !important;
  }
}

/* 3.0.4: desktop/mobile presentation can be configured independently. */
.guru-language-selector .guru-language-selector__flag,
.guru-language-selector .guru-language-selector__name,
.guru-language-selector .guru-language-selector__code {
  display: none;
}

.guru-language-selector[data-display-mode="flag"] .guru-language-selector__flag,
.guru-language-selector[data-display-mode="flag_code"] .guru-language-selector__flag,
.guru-language-selector[data-display-mode="flag_name"] .guru-language-selector__flag {
  display: block;
}
.guru-language-selector[data-display-mode="name"] .guru-language-selector__name,
.guru-language-selector[data-display-mode="flag_name"] .guru-language-selector__name,
.guru-language-selector[data-display-mode="code"] .guru-language-selector__code,
.guru-language-selector[data-display-mode="flag_code"] .guru-language-selector__code {
  display: inline-block;
}
.guru-language-selector[data-show-arrow="0"] .guru-language-selector__arrow { display: none; }

@media (max-width: 767px) {
  #_mobile_language_selector > .guru-language-selector[data-guru-mobile-mounted="1"] {
    float: none !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;

    --guru-ls-flag-width: var(--guru-ls-mobile-flag-width) !important;
    --guru-ls-flag-radius: var(--guru-ls-mobile-flag-radius) !important;
    --guru-ls-font-size: var(--guru-ls-mobile-font-size) !important;
    --guru-ls-font-weight: var(--guru-ls-mobile-font-weight) !important;
    --guru-ls-gap: var(--guru-ls-mobile-gap) !important;
    --guru-ls-margin-top: var(--guru-ls-mobile-margin-top) !important;
    --guru-ls-margin-right: var(--guru-ls-mobile-margin-right) !important;
    --guru-ls-margin-bottom: var(--guru-ls-mobile-margin-bottom) !important;
    --guru-ls-margin-left: var(--guru-ls-mobile-margin-left) !important;
    --guru-ls-padding-top: var(--guru-ls-mobile-padding-top) !important;
    --guru-ls-padding-right: var(--guru-ls-mobile-padding-right) !important;
    --guru-ls-padding-bottom: var(--guru-ls-mobile-padding-bottom) !important;
    --guru-ls-padding-left: var(--guru-ls-mobile-padding-left) !important;
    --guru-ls-border-width: var(--guru-ls-mobile-border-width) !important;
    --guru-ls-border-radius: var(--guru-ls-mobile-border-radius) !important;
    --guru-ls-item-padding-y: var(--guru-ls-mobile-item-padding-y) !important;
    --guru-ls-item-padding-x: var(--guru-ls-mobile-item-padding-x) !important;
    --guru-ls-dropdown-offset: var(--guru-ls-mobile-dropdown-offset) !important;
    --guru-ls-dropdown-min-width: var(--guru-ls-mobile-dropdown-min-width) !important;
    --guru-ls-dropdown-bg: var(--guru-ls-mobile-dropdown-bg) !important;
    --guru-ls-dropdown-text: var(--guru-ls-mobile-dropdown-text) !important;
    --guru-ls-dropdown-border: var(--guru-ls-mobile-dropdown-border) !important;
  }

  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] {
    color: inherit !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] .guru-language-selector__trigger {
    color: inherit !important;
    background: transparent !important;
    border-color: currentColor !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] .guru-language-selector__trigger:hover,
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] .guru-language-selector__trigger:focus-visible,
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"].is-open .guru-language-selector__trigger {
    color: inherit !important;
    background: rgba(0, 0, 0, .05) !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] .guru-language-selector__link:hover,
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] .guru-language-selector__link:focus-visible,
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="0"] .guru-language-selector__item.is-current .guru-language-selector__link {
    color: var(--guru-ls-mobile-dropdown-text) !important;
    background: rgba(0, 0, 0, .05) !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-custom-colors="1"] {
    --guru-ls-text: var(--guru-ls-mobile-text) !important;
    --guru-ls-bg: var(--guru-ls-mobile-bg) !important;
    --guru-ls-border: var(--guru-ls-mobile-border) !important;
    --guru-ls-hover-text: var(--guru-ls-mobile-hover-text) !important;
    --guru-ls-hover-bg: var(--guru-ls-mobile-hover-bg) !important;
  }

  #_mobile_language_selector > .guru-language-selector[data-mobile-position="left"] { justify-content: flex-start !important; }
  #_mobile_language_selector > .guru-language-selector[data-mobile-position="center"] { justify-content: center !important; }
  #_mobile_language_selector > .guru-language-selector[data-mobile-position="right"] { justify-content: flex-end !important; }

  #_mobile_language_selector > .guru-language-selector[data-mobile-full-width="1"] .guru-language-selector__box,
  #_mobile_language_selector > .guru-language-selector[data-mobile-full-width="1"] .guru-language-selector__trigger {
    width: 100% !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-full-width="1"] .guru-language-selector__dropdown {
    width: 100% !important;
  }

  /* 3.0.5: when the mobile trigger fills the whole row, the selected mobile
     position must align the trigger content itself, not only the outer wrapper. */
  #_mobile_language_selector > .guru-language-selector[data-mobile-full-width="1"][data-mobile-position="left"] .guru-language-selector__trigger {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-full-width="1"][data-mobile-position="center"] .guru-language-selector__trigger {
    justify-content: center !important;
    text-align: center !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-full-width="1"][data-mobile-position="right"] .guru-language-selector__trigger {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  #_mobile_language_selector > .guru-language-selector[data-mobile-dropdown-align="left"] .guru-language-selector__dropdown {
    left: 0 !important;
    right: auto !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-dropdown-align="right"] .guru-language-selector__dropdown {
    right: 0 !important;
    left: auto !important;
  }

  #_mobile_language_selector > .guru-language-selector[data-mobile-dropdown-shadow="0"] .guru-language-selector__dropdown {
    box-shadow: none !important;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-dropdown-shadow="1"] .guru-language-selector__dropdown {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
  }

  /* Mobile display mode overrides the desktop mode after the DOM node is mounted. */
  #_mobile_language_selector > .guru-language-selector .guru-language-selector__flag,
  #_mobile_language_selector > .guru-language-selector .guru-language-selector__name,
  #_mobile_language_selector > .guru-language-selector .guru-language-selector__code {
    display: none;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="flag"] .guru-language-selector__flag,
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="flag_code"] .guru-language-selector__flag,
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="flag_name"] .guru-language-selector__flag {
    display: block;
  }
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="name"] .guru-language-selector__name,
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="flag_name"] .guru-language-selector__name,
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="code"] .guru-language-selector__code,
  #_mobile_language_selector > .guru-language-selector[data-mobile-display-mode="flag_code"] .guru-language-selector__code {
    display: inline-block;
  }

  #_mobile_language_selector > .guru-language-selector[data-mobile-show-arrow="0"] .guru-language-selector__arrow { display: none; }
  #_mobile_language_selector > .guru-language-selector[data-mobile-show-arrow="1"] .guru-language-selector__arrow { display: block; }
}
