/* Shared native-select styling for the public site and account forms. */
select.language,
.catalogue-controls select,
header select,
form select {
  -webkit-appearance: none;
  appearance: none;
  min-block-size: 44px;
  font-size: 1rem;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  padding-block: 9px;
  padding-inline: 12px 44px;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("/assets/icons/lucide/chevron-down.svg?v=d1dd77281c41");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 16px center;
  cursor: pointer;
  transition:
    border-color 0.18s,
    background-color 0.18s;
}
[dir="rtl"] select {
  background-position: left 16px center;
}
.catalogue-controls select {
  font-size: 1rem;
  min-inline-size: calc(9em + 56px);
  max-inline-size: none;
}
header > label {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Keep full option labels in the native picker; paint only the abbreviation
   over its closed value. The overlay never intercepts pointer or keyboard input. */
.language-control > select {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0;
  background-image: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.language-control > select option {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.language-abbreviation {
  /* Center the visible Shabnam letters, not just their line box. */
  transform: translateY(0.1em);
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.language-abbreviation:lang(ar) { transform: translateY(-0.15em); }
.language-control:has(select:disabled) .language-abbreviation { opacity: 0.6; }
form select {
  background-color: var(--white);
}
select:hover:not(:disabled) {
  border-color: var(--ink);
  background-color: var(--white);
}
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-color: var(--ink);
}
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 580px) {
  header > label {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  select.language,
  .catalogue-controls select {
    font-size: 1rem;
  }
  .catalogue-controls select {
    flex: 1 1 calc(9em + 56px);
    inline-size: 100%;
    min-inline-size: 0;
  }
}
@media (forced-colors: active) {
  select.language,
  .catalogue-controls select,
  header select,
  form select {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
    padding-inline: 12px;
    border-color: ButtonText;
    color: CanvasText;
    background-color: Canvas;
  }
  .language-control > select {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    forced-color-adjust: none;
  }
  .language-control > select option {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    background-color: Canvas;
  }
  .language-abbreviation { color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  select.language,
  .catalogue-controls select,
  header select,
  form select {
    transition: none;
  }
}