/* UECF.NET Universal Bible Version / Language selector */

.bible-version-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 22rem;
}

.bible-version-field label {
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold, #C79A3D);
  white-space: nowrap;
}

.bible-version-field select {
  min-height: 44px;
  min-width: 0;
  width: 16rem;
  max-width: 22rem;
  border-radius: 12px;
  border: 1px solid var(--line, #E2D8C0);
  background: var(--card-bg, var(--paper, #FBF8F1));
  color: var(--text, #1B2437);
  padding: 0 32px 0 12px;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold, #C79A3D) 50%),
    linear-gradient(135deg, var(--gold, #C79A3D) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.bible-version-field select:hover {
  border-color: var(--gold, #C79A3D);
}

.bible-version-field select:focus-visible {
  outline: 3px solid var(--gold, #C79A3D);
  outline-offset: 2px;
}

html[data-theme="dark"] .bible-version-field select {
  background-color: #1c2538;
  color: #FFFFFF;
  border-color: #2C384C;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-soft, #E4C685) 50%),
    linear-gradient(135deg, var(--gold-soft, #E4C685) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .bible-toolbar .toolbar-inner {
    flex-wrap: wrap !important;
    align-items: center;
  }

  .bible-version-field {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    order: -1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bible-version-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .bible-version-field select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto;
  }

  body[data-view="read"] .selects,
  body[data-view="read"] .chapter-nav,
  body[data-view="read"] .toolbar-actions {
    order: 1;
  }

  html {
    --toolbar-h: 104px;
  }
}

@media print {
  .bible-version-field {
    display: none !important;
  }
}