/**
 * Styles pour le widget Button TechVibes
 */

.tvb-custom-button {
  position: relative !important;
  background-color: var(--btn-bg, transparent) !important;
  color: var(--btn-text, white) !important;
  border: 1px solid var(--btn-border, var(--btn-border-color, #C1C8CF)) !important;
  border-radius: 0 !important;
  padding: 8px 30px 8px 15px !important;
  font-weight: var(--btn-weight, 400) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: border 0.3s !important;
  text-decoration: none !important;
}

.tvb-custom-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 18px;
  width: 10px;
  height: 10px;
  background-color: var(--btn-main-color, #ff4500) !important;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.7s cubic-bezier(.77,0,.18,1) !important;
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.tvb-custom-button:hover::after {
  transform: translate(-50%, -50%) scale(var(--btn-spread, 35));
}

.tvb-custom-button:not(:hover)::after {
  transition: transform 0.25s cubic-bezier(.77,0,.18,1) !important;
}

.tvb-custom-button .tvb-button-dot {
  width: 10px !important;
  height: 10px !important;
  background-color: var(--btn-main-color, #ff4500) !important;
  border-radius: 50% !important;
  transition: background-color 0.2s ease !important;
  z-index: 2 !important;
  flex-shrink: 0;
}

.tvb-custom-button:hover .tvb-button-dot {
  background-color: var(--btn-dot-hover, white) !important;
}

.tvb-custom-button .tvb-button-text {
  position: relative !important;
  z-index: 2 !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}

.tvb-custom-button:hover .tvb-button-text {
  color: var(--btn-hover-text, white) !important;
}

.tvb-custom-button:hover {
  border-color: var(--btn-main-color, #ff4500) !important;
  text-decoration: none !important;
}

/* Variantes de style */
.tvb-custom-button.is-dark {
  --btn-bg: transparent;
  --btn-text: white;
  --btn-border: var(--btn-border-color);
  --btn-weight: 300;
  --btn-hover-text: white;
  --btn-dot-hover: white;
  --btn-spread: 35;
}

.tvb-custom-button.is-light {
  --btn-bg: white;
  --btn-text: black;
  --btn-border: var(--btn-border-color);
  --btn-weight: 600;
  --btn-hover-text: white;
  --btn-dot-hover: white;
  --btn-spread: 95;
}

/* Responsive */
@media (max-width: 1024px) {
  .tvb-custom-button { 
    font-size: 13px !important; 
  }
}

@media (max-width: 767px) {
  .tvb-custom-button {
    font-size: 12px !important;
    padding: 8px 10px 8px 15px !important;
  }
}