/* Base wrap and form */
.bng-wrap { max-width: 980px; margin: 0 auto; }
.bng-form { margin: 1rem 0 1.5rem; }
.bng-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem 1rem;
  margin-bottom: .75rem;
}
.bng-form label { display:block; font-weight:600; margin-bottom:.25rem; }
.bng-form input, .bng-form select { width:100%; padding:.5rem; }
.bng-btn { padding:.6rem 1.1rem; cursor:pointer; }
.bng-status { margin-top:.5rem; color:#444; }

/* Results grid: two cards per row on wider screens */
.bng-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

/* Card */
.bng-card {
  border:1px solid #e2e5ea;
  border-radius:12px;
  padding:1rem;
  background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Header line: Name + speaker + pronunciation */
.bng-card-head { margin-bottom:.5rem; }
.bng-name-line {
  display:flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
}
.bng-name {
  margin:0;
  font-size:1.2rem;
  font-weight:800;
  color:#0f4c81; /* distinct color */
  letter-spacing: .2px;
}

/* Speaker button placed right after the name */
.bng-speak {
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:1.05rem;
  line-height:1;
  color:#0f4c81;
  margin-left:.1rem;
}
.bng-speak:hover { color:#0c3c66; }
.bng-speak:focus { outline: 2px solid #9cc0ff; border-radius: 4px; }

/* Pronunciation immediately after speaker, italic */
.bng-pron {
  font-style: italic;
  color: #333;
}

/* Native spelling below header */
.bng-native { margin:.25rem 0 0; color:#222; }

/* Meta chips */
.bng-meta {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  margin:.35rem 0 .4rem;
  color:#333;
}

/* Meaning block */
.bng-meaning-title { font-weight:700; margin:.4rem 0 .15rem; }
.bng-meaning { margin:0; font-style:italic; }

/* Loading button */
.bng-btn.loading {
  position: relative;
  opacity: .85;
  pointer-events: none;
}
.bng-spinner {
  display:inline-block;
  width:1em; height:1em;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:currentColor;
  border-right-color:currentColor;
  margin-right:.5em;
  animation:bng-spin .6s linear infinite;
  vertical-align: -0.15em;
}
@keyframes bng-spin { to { transform: rotate(360deg); } }

/* Optional: ensure reCAPTCHA v3 badge is visible if your theme hides it */
.grecaptcha-badge { z-index: 99999; }