/*
 * Yaqout.tn-style Language Selector
 * This CSS file styles the language selector to match the clean,
 * professional design of the yaqout.tn website.
 */

/* ====================================
   Base Container and Button
   ==================================== */
.language-selector {
  position: absolute;
  top: 45px;
  right: 250px;
  display: inline-block;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  cursor: pointer;
  /* Ensure a base font size for scaling */
  font-size: 14px;
}

/* The main button that shows the current language */
.language-selector > span {
  display: flex;
  align-items: center;
  background-color: white;
  color: transparent; /* Hides the text, leaving only the flag and icon */
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

/* The small arrow for the dropdown */
.language-selector > span::after {
  content: "▼";
  margin: 0 15px;
  font-size: 8px;
  color: #777; /* Set the color explicitly for the arrow */
  transition: transform 0.2s ease-in-out;
}

/* Open state: rotate the arrow */
.language-selector:hover > span::after {
  transform: rotate(180deg);
}

/* ====================================
       Dropdown Menu
       ==================================== */
.language-selector ul {
  position: absolute;
  top: 110%; /* Position below the button */
  left: 0; /* Aligned to the left edge of the button for a more compact feel */
  right: auto;
  background-color: white;
  border: 1px solid #d3dce0;
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  min-width: 100px; /* Reduced the minimum width */
}

/* Open state for the dropdown */
.language-selector:hover ul,
.language-selector ul:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ====================================
       List Items and Links
       ==================================== */
.language-selector li {
  margin: 4px 0; /* Adds vertical space between list items */
  padding: 0 8px; /* Horizontal padding for the list item */
}

.language-selector li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
}

/* Hover state for dropdown links */
.language-selector li a:hover {
  background-color: #f7f9fa;
  color: #000;
}

/* Current language item styling */
.language-selector li.current a {
  background-color: #f0f0f0; /* A neutral, selected color */
  font-weight: 600;
}

/* ====================================
       Flag Icons
       ==================================== */
/*
       IMPORTANT: To make the flags appear, you must add the class `with-flags`
       to your main `div` in your TPL file, like this:
       `<div class="language-selector with-flags" ...>`
    */

/* Flag for the main button */
.language-selector.with-flags > span:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 15px;
  background-size: cover;
  border-radius: 3px;
}

/* Flag for the dropdown items */
.language-selector.with-flags li [data-iso]:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 15px;
  background-size: cover;
  border-radius: 3px;
  margin-right: 8px; /* Adjust spacing for LTR */
}

/* Corrected flag URLs and data-iso values */
.language-selector.with-flags [data-iso="fr"]:before {
  background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/fr.svg");
}

.language-selector.with-flags [data-iso="ar"]:before {
  background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/tn.svg");
}

/* responsiveness of the language selector when is it set to arabic */

@media (max-width: 990px) {
  .language-selector {
    position: absolute;
    top: 11px;
    right: 123px;
  }
  .language-selector > span::after {
    margin: 0 7px;
  }
}

html[lang="ar-SA"] .language-selector {
  position: absolute;
  top: 40px;
  max-width: fit-content;
  right: 1020px;
}

@media (max-width: 1259px) {
  html[lang="ar-SA"] .language-selector {
    right: 945px;
  }
}
@media (max-width: 1200px) {
  html[lang="ar-SA"] .language-selector {
    right: 750px;
  }
}
@media (max-width: 993px) {
  html[lang="ar-SA"] .language-selector {
    position: absolute;
    right: 550px;
    top: 10px;
  }
}
@media (max-width: 768px) {
  html[lang="ar-SA"] .language-selector {
    right: 590px;
  }
}

@media (max-width: 755px) {
  html[lang="ar-SA"] .language-selector {
    right: 575px;
  }
}
@media (max-width: 737px) {
  html[lang="ar-SA"] .language-selector {
    right: 560px;
  }
}
@media (max-width: 722px) {
  html[lang="ar-SA"] .language-selector {
    right: 550px;
  }
}
@media (max-width: 710px) {
  html[lang="ar-SA"] .language-selector {
    right: 536px;
  }
}
@media (max-width: 697px) {
  html[lang="ar-SA"] .language-selector {
    right: 520px;
  }
}
@media (max-width: 678px) {
  html[lang="ar-SA"] .language-selector {
    right: 500px;
  }
}
@media (max-width: 656px) {
  html[lang="ar-SA"] .language-selector {
    right: 480px;
  }
}
@media (max-width: 640px) {
  html[lang="ar-SA"] .language-selector {
    right: 465px;
  }
}
@media (max-width: 623px) {
  html[lang="ar-SA"] .language-selector {
    right: 450px;
  }
}
@media (max-width: 610px) {
  html[lang="ar-SA"] .language-selector {
    right: 430px;
  }
}
@media (max-width: 588px) {
  html[lang="ar-SA"] .language-selector {
    right: 400px;
  }
}
@media (max-width: 551px) {
  html[lang="ar-SA"] .language-selector {
    right: 375px;
  }
}
@media (max-width: 530px) {
  html[lang="ar-SA"] .language-selector {
    right: 355px;
  }
}
@media (max-width: 513px) {
  html[lang="ar-SA"] .language-selector {
    right: 335px;
  }
}
@media (max-width: 493px) {
  html[lang="ar-SA"] .language-selector {
    right: 315px;
  }
}
@media (max-width: 475px) {
  html[lang="ar-SA"] .language-selector {
    right: 290px;
  }
}
@media (max-width: 450px) {
  html[lang="ar-SA"] .language-selector {
    right: 270px;
  }
}
@media (max-width: 430px) {
  html[lang="ar-SA"] .language-selector {
    right: 250px;
  }
}
@media (max-width: 410px) {
  html[lang="ar-SA"] .language-selector {
    right: 230px;
  }
}
@media (max-width: 390px) {
  html[lang="ar-SA"] .language-selector {
    right: 210px;
  }
}
@media (max-width: 368px) {
  html[lang="ar-SA"] .language-selector {
    right: 190px;
  }
}
@media (max-width: 350px) {
  html[lang="ar-SA"] .language-selector {
    right: 170px;
  }
}
@media (max-width: 330px) {
  html[lang="ar-SA"] .language-selector {
    right: 150px;
  }
}
@media (max-width: 310px) {
  html[lang="ar-SA"] .language-selector {
    right: 130px;
  }
}