/* ============================================================
   WRAPPER
============================================================ */
.ec-code-generator {
  margin: 20px 0;
  font-family: inherit;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

/* Label */
.ec-code-label {
  font-size: 18px;
  margin-bottom: 6px;
  font-weight: 600;
  display: block;
  text-transform: uppercase;
  font-family: inherit;
}

/* ============================================================
   SAVE BUTTON (identique à image uploader)
============================================================ */
.ec-save-button {
  width: 100%;
  padding: 12px 18px;
  background: #89a9ba;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.ec-save-button:hover {
  background: #6f8d9c;
}

.ec-save-button:focus,
.ec-save-button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   CODE BOX (identique à input gris pâle)
============================================================ */
.ec-code-box {
  width: 100%;
  min-height: 60px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Texte du code */
#ec-code-text {
  word-break: break-all;
  font-family: monospace;
  font-size: 14px;
}

/* Spinner + texte sur la même ligne */
#ec-code-spinner-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   SPINNER (premium)
============================================================ */
.ec-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #ccc;
  border-top-color: #89a9ba;
  border-radius: 50%;
  animation: ec-spin 0.8s linear infinite;
  display: none;
}

@keyframes ec-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   COPY BUTTON (identique au bouton bleu)
============================================================ */
.ec-copy-button {
  width: 100%;
  padding: 12px 18px;
  background: #89a9ba;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
}

.ec-copy-button:hover {
  background: #6f8d9c;
}

.ec-copy-button:focus,
.ec-copy-button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Texte d’attente (caché par défaut) */
#ec-code-wait {
  display: none;
  font-size: 14px;
  color: #666;
}

/* Bouton Copy Code en gris */
.ec-copy-button {
  background: #bebebe !important;
  color: #333 !important;
}

.ec-copy-button:hover {
  background: #a6a6a6 !important;
}


/* ============================================================
   COPY SUCCESS
============================================================ */
.ec-copy-success {
  margin-top: 10px;
  color: #4caf50;
  font-size: 14px;
  display: none;
  text-align: center;
}