/* =========================
   VerbaSpeak — Premium (scaled)
   ========================= */

.vb-verbaspeak-mfa-widget{
  width: 100%;
  max-width: 1100px;
  margin: 24px auto;

  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);

  padding: 32px 36px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Phrase */
.vbvsmfa-sentence{
  background: transparent;
  border: none;
  padding: 0;
  margin: 4px 0 22px;

  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;

  font-size: clamp(1.4rem, 2.1vw, 2.2rem);
  color: #111;
}

/* NEW: Guide "Réponds : ..." */
.vbvsmfa-hint{
  margin: -10px auto 18px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.vbvsmfa-hint-label{
  margin-right: 6px;
  opacity: 0.9;
}

.vbvsmfa-hint-text{
  color: #111;
}

/* Zone boutons */
.vbvsmfa-controls{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
}

/* Boutons — base */
.vbvsmfa-record-btn,
.vbvsmfa-stop-btn,
.vbvsmfa-demo-btn,
.vbvsmfa-prev-btn,
.vbvsmfa-next-btn{
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;

  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Écouter */
.vbvsmfa-demo-btn{
  color: #fff;
  background: linear-gradient(135deg, #12d18e 0%, #0ea96f 100%);
}

/* Enregistrer */
.vbvsmfa-record-btn{
  color: #fff;
  background: linear-gradient(135deg, #2a7bff 0%, #1a73d9 100%);
}

/* Stop masqué */
.vbvsmfa-stop-btn{
  display: none !important;
}

/* Hover / active */
.vbvsmfa-demo-btn:not(:disabled):hover,
.vbvsmfa-record-btn:not(:disabled):hover,
.vbvsmfa-prev-btn:not(:disabled):hover,
.vbvsmfa-next-btn:not(:disabled):hover{
  filter: brightness(1.04);
}

.vbvsmfa-demo-btn:not(:disabled):active,
.vbvsmfa-record-btn:not(:disabled):active,
.vbvsmfa-prev-btn:not(:disabled):active,
.vbvsmfa-next-btn:not(:disabled):active{
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}

/* Disabled */
.vbvsmfa-demo-btn:disabled,
.vbvsmfa-record-btn:disabled,
.vbvsmfa-prev-btn:disabled,
.vbvsmfa-next-btn:disabled{
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

/* Status */
.vbvsmfa-status{
  margin-top: 18px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #111;
  min-height: 1.2em;
}

/* Résultat */
.vbvsmfa-result{
  margin-top: 10px;
  text-align: center;
  font-size: 0.95rem;
}

.vbvsmfa-success,
.vbvsmfa-retry,
.vbvsmfa-error{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 600;
}

.vbvsmfa-success{
  background: rgba(14,169,111,0.10);
  color: #0b7b52;
}

.vbvsmfa-retry{
  background: rgba(229,57,53,0.10);
  color: #b3261e;
}

.vbvsmfa-error{
  background: rgba(211,47,47,0.10);
  color: #d32f2f;
}

/* Navigation */
.vb-verbaspeak-mfa-widget .vbvsmfa-nav{
  flex-basis: 100%;
  width: 100%;
  margin-top: 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Nav buttons — ultra spécifique pour écraser Elementor */
.vb-verbaspeak-mfa-widget .vbvsmfa-nav button.vbvsmfa-prev-btn,
.vb-verbaspeak-mfa-widget .vbvsmfa-nav button.vbvsmfa-next-btn{
  background: #F6F9FE !important;
  border: 1px solid #D0D7E2 !important;
  border-radius: 12px !important;

  padding: 10px 18px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;

  color: #374151 !important;

  box-shadow: none !important;
  text-decoration: none !important;
  min-height: 0 !important;
}

/* Hover sobre (pas de bleu) */
.vb-verbaspeak-mfa-widget .vbvsmfa-nav button.vbvsmfa-prev-btn:not(:disabled):hover,
.vb-verbaspeak-mfa-widget .vbvsmfa-nav button.vbvsmfa-next-btn:not(:disabled):hover{
  background: #EEF3FC !important;
  color: #111 !important;
  filter: none !important;
}

/* Active sobre */
.vb-verbaspeak-mfa-widget .vbvsmfa-nav button.vbvsmfa-prev-btn:not(:disabled):active,
.vb-verbaspeak-mfa-widget .vbvsmfa-nav button.vbvsmfa-next-btn:not(:disabled):active{
  transform: translateY(1px);
  box-shadow: none !important;
}

/* Mobile */
@media (max-width: 720px){
  .vb-verbaspeak-mfa-widget{
    padding: 22px 16px;
    border-radius: 18px;
  }

  .vbvsmfa-demo-btn,
  .vbvsmfa-record-btn{
    width: 100%;
    max-width: 480px;
  }

  .vbvsmfa-status{
    font-size: 1.05rem;
  }
}