/* ============================================================
   SankaCloud — Language Selector
   ============================================================ */

.lang-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-md);
  background: var(--col-surface2); border: 1px solid var(--col-border2);
  color: var(--col-text2); font-family: var(--font-body);
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.lang-btn:hover { border-color: var(--col-accent); color: var(--col-text); }
.lang-btn__flag { font-size: 1rem; line-height: 1; }
.lang-btn__code { text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
.lang-btn__arrow {
  width: 14px; height: 14px; transition: transform .2s;
  opacity: .6;
}
.lang-selector.is-open .lang-btn__arrow { transform: rotate(180deg); }
.lang-selector.is-open .lang-btn { border-color: var(--col-accent); color: var(--col-text); }

/* Dropdown */
.lang-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--col-surface);
  border: 1px solid var(--col-border2);
  border-radius: var(--r-xl);
  padding: 8px;
  min-width: 220px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--col-border2) transparent;
}
.lang-dropdown::-webkit-scrollbar { width: 4px; }
.lang-dropdown::-webkit-scrollbar-track { background: transparent; }
.lang-dropdown::-webkit-scrollbar-thumb { background: var(--col-border2); border-radius: 2px; }

.lang-selector.is-open .lang-dropdown { display: block; animation: dropdown-in .15s ease; }
@keyframes dropdown-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* Grid 2 colonnes */
.lang-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}

.lang-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--col-text2); text-decoration: none;
  font-size: .8rem; font-weight: 600; transition: all .15s;
}
.lang-option:hover { background: var(--col-surface2); color: var(--col-text); }
.lang-option.is-active {
  background: rgba(124,106,247,.12);
  border: 1px solid rgba(124,106,247,.25);
  color: var(--col-accent2);
}
.lang-option__flag { font-size: .95rem; flex-shrink: 0; }
.lang-option__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* RTL support */
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .header__nav { flex-direction: row-reverse; }
[dir="rtl"] .hero__content { text-align: right; }