/* Auto Cash Title Loans — "Listen" text-to-speech widget. */

.act-listen-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

.act-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  font: 600 15px/1 inherit;
  font-family: inherit;
  color: #2b2b3a;
  background: #f7f7fb;
  border: 1px solid #dcdce6;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.act-listen:hover { background: #eef0f7; border-color: #c7c7d6; }

.act-listen:focus-visible,
.act-listen__speed:focus-visible,
.act-listen__voice:focus-visible {
  outline: 2px solid #1a5632;
  outline-offset: 2px;
}

.act-listen__icon { display: inline-flex; align-items: center; color: #3a3a52; }

/* Play/pause icon swap driven by .is-playing on the button. */
.act-listen .act-i-pause { display: none; }
.act-listen.is-playing .act-i-play { display: none; }
.act-listen.is-playing .act-i-pause { display: inline; }

.act-listen.is-playing { background: #e8f5e9; border-color: #a5d6a7; color: #0f3d22; }
.act-listen.is-playing .act-listen__icon { color: #1a5632; }

.act-listen__label { white-space: nowrap; }

/* Speed toggle — compact pill matching the Listen button. */
.act-listen__speed {
  padding: 7px 12px;
  min-width: 44px;
  font: 600 14px/1 inherit;
  font-family: inherit;
  color: #3a3a52;
  background: #f7f7fb;
  border: 1px solid #dcdce6;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s ease, border-color .15s ease;
}
.act-listen__speed:hover { background: #eef0f7; border-color: #c7c7d6; }

/* Voice picker — quiet select styled to match. */
.act-listen__voice {
  max-width: 190px;
  padding: 7px 28px 7px 12px;
  font: 500 14px/1 inherit;
  font-family: inherit;
  color: #3a3a52;
  background: #f7f7fb;
  border: 1px solid #dcdce6;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%233a3a52' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
.act-listen__voice:hover { background-color: #eef0f7; border-color: #c7c7d6; }

/* Word currently being spoken. */
.act-w--on {
  background: rgba(26, 86, 50, 0.18);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(26, 86, 50, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  .act-listen, .act-listen__speed, .act-listen__voice { transition: none; }
}