/* ================================================================
   LANGUAGE & CURRENCY SWITCHER
   ================================================================ */

/* — Row layout — */
.switcher-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .625rem;
  padding-inline:  .625rem;
  padding-block:   .3125rem;
}

.switcher-row-label {
  display:        flex;
  align-items:    center;
  gap:            .3125rem;
  font-size:      var(--app-fs-xs);
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--app-ink-tertiary);
  white-space:    nowrap;
  flex-shrink:    0;
}

/* — Chip group (languages) — */
.chip-group {
  display:         flex;
  flex-wrap:       wrap;
  gap:             .25rem;
  justify-content: flex-end;
}

/* — Chip base — */
.switcher-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          1.375rem;
  padding-inline:  .5625rem;
  border-radius:   var(--app-radius-full, 999px);
  font-size:       var(--app-fs-xs);
  font-weight:     600;
  letter-spacing:  .02em;
  white-space:     nowrap;
  flex-shrink:     0;
  color:           var(--app-ink-secondary);
  background:      var(--app-surface-2);
  border:          1px solid var(--app-border);
  text-decoration: none;
  cursor:          pointer;
  transition:
    background-color var(--app-dur-fast) var(--app-ease-smooth),
    color            var(--app-dur-fast) var(--app-ease-smooth),
    border-color     var(--app-dur-fast) var(--app-ease-smooth);
}

.switcher-chip:hover:not(.active) {
  background:      var(--app-surface-3);
  border-color:    var(--app-border-strong);
  color:           var(--app-ink-primary);
  text-decoration: none;
}

.switcher-chip.active {
  background:     var(--bs-primary-bg-subtle);
  border-color:   var(--bs-primary-border-subtle);
  color:          var(--app-ink-accent);
  cursor:         default;
  pointer-events: none;
}

.switcher-chip:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 2px;
  box-shadow:     none !important;
}

/* dark mode */
[data-bs-theme="dark"] .switcher-chip {
  background:   var(--app-surface-2);
  border-color: var(--app-border);
  color:        var(--app-ink-secondary);
}
[data-bs-theme="dark"] .switcher-chip:hover:not(.active) {
  background:   var(--app-hover-dark);
  border-color: var(--app-border-strong);
  color:        var(--app-ink-primary);
}
[data-bs-theme="dark"] .switcher-chip.active {
  background:   var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color:        var(--app-ink-accent);
}

/* — Currency trigger button — */
.currency-trigger-wrap {
  position: relative;
}

.currency-trigger-btn {
  background:  transparent;
  border:      1px solid var(--bs-primary-border-subtle);
  display:     inline-flex;
  align-items: center;
  gap:         .3125rem;
  cursor:      pointer;
}

/* — Currency hover submenu — */
.currency-submenu {
  position:           absolute;
  inset-inline-end:   0;
  inset-block-start:  calc(100% + .375rem);
  inset-block-end:    auto;
  width:              11rem;
  max-height:         12rem;
  overflow-y:         auto;
  background:         var(--app-vibrancy-thin-fallback);
  border:             1px solid var(--app-border);
  border-radius:      var(--app-radius-card);
  box-shadow:         var(--app-shadow-float);
  padding:            .375rem;
  z-index:            9999;
  display:            flex;
  flex-direction:     column;
  gap:                .125rem;
  scrollbar-width:    thin;
  scrollbar-color:    var(--app-ink-tertiary) transparent;

  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transform:      translateY(-.25rem);
  transition:
    opacity    var(--app-dur-base) var(--app-ease-smooth),
    transform  var(--app-dur-base) var(--app-ease-smooth),
    visibility var(--app-dur-base);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .currency-submenu {
    background:              var(--app-vibrancy-thin-bg);
    backdrop-filter:         var(--app-vibrancy-thin-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-thin-blur);
  }
}

.currency-submenu::-webkit-scrollbar       { width: 3px; }
.currency-submenu::-webkit-scrollbar-track { background: transparent; }
.currency-submenu::-webkit-scrollbar-thumb { background: var(--app-ink-tertiary); border-radius: 2px; }

/* يظهر عند hover */
.currency-trigger-wrap:hover .currency-submenu {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateY(0);
}

/* عناصر القائمة عمودية وتمتد بالكامل */
.currency-submenu .switcher-chip {
  width:           100%;
  justify-content: flex-start;
  height:          auto;
  padding-block:   .3125rem;
  border-radius:   var(--app-radius-sm, 8px);
}