/**
 * Toolkit MS - Circular Button with CSS Variables
 * @since 0.7.2
 */

/* Variables CSS par défaut */
.tkms-circular-button-wrapper {
  --tkms-cb-size: 150px;
  --tkms-cb-bg: #f25c54;
  --tkms-cb-text-color: #ffffff;
  --tkms-cb-arrow-color: #ffffff;
  --tkms-cb-speed: 20s;
  --tkms-cb-shift: 10px;
}

/* Conteneur pour alignement (reçoit les styles inline) */
.tkms-circular-button-wrapper-container {
  display: block;
  width: 100%;
}

/* Conteneur principal du bouton */
.tkms-circular-button-wrapper {
  display: inline-flex;
  width: var(--tkms-cb-size);
  height: var(--tkms-cb-size);
}

.circular-button {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tkms-cb-bg) !important;
  border-radius: 50%;
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.circular-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Effet de décalage au survol (combiné avec scale) */
.circular-button--shift:hover {
  transform: translateY(calc(var(--tkms-cb-shift) * -1)) scale(1.05);
}

/* Bouton central avec flèche/icône */
.center-btn {
  position: absolute;
  width: 40%;
  height: 40%;
  min-width: 40px;
  min-height: 40px;
  background-color: transparent;
  color: var(--tkms-cb-arrow-color) !important;
  font-size: clamp(24px, 33%, 50px);
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease;
}

.circular-button:hover .center-btn {
  transform: scale(1.1);
}

/* Support des icônes (Font Awesome, Divi, etc.) */
.center-btn i,
.center-btn .et-pb-icon {
  font-size: inherit;
  color: inherit;
}

/* Texte circulaire (SVG) */
.circular-text {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  animation: rotateText var(--tkms-cb-speed) linear infinite;
  pointer-events: none;
}

.circular-text text {
  font-size: 16px;
  letter-spacing: 0.2rem;
  font-weight: bold;
  text-transform: uppercase;
  fill: var(--tkms-cb-text-color) !important;
}

/* Animation de rotation */
@keyframes rotateText {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Pause animation au survol (optionnel) */
/* Garder la rotation au hover (suppression de la pause) */
/* .circular-button:hover .circular-text {
  animation-play-state: paused;
} */

/* Responsive */
@media (max-width: 768px) {
  .tkms-circular-button-wrapper {
    --tkms-cb-size: 120px;
  }
  
  .circular-text text {
    font-size: 14px;
    letter-spacing: 0.15rem;
  }
}

@media (max-width: 480px) {
  .tkms-circular-button-wrapper {
    --tkms-cb-size: 100px;
  }
  
  .circular-text text {
    font-size: 12px;
    letter-spacing: 0.1rem;
  }
}

/* Accessibilité */
.circular-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Support du mode sombre */
@media (prefers-color-scheme: dark) {
  .circular-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Réduction des mouvements */
@media (prefers-reduced-motion: reduce) {
  .circular-text {
    animation: none;
  }
  
  .circular-button,
  .center-btn {
    transition: none;
  }
}