/* ============================================
   GOMB STÍLUS – ZOHO BEÉPÍTETT GOMB TESTRESZABÁSA
   Használat: Add meg a gomb "CSS Class" mezőjében:
     - alap: glow-on-hover
     - balra: glow-on-hover align-left
     - jobbra: glow-on-hover align-right
     - teljes szélesség: glow-on-hover full-width
============================================ */

/* --- ALAPSTÍLUS --- */
.glow-on-hover {
  display: inline-block;
  padding: 14px 32px;
  color: #ffffff;
  background-color: #111111;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  z-index: 0;
  transition: transform 0.2s ease;
}

/* Hover effekt */
.glow-on-hover:hover {
  transform: scale(1.02);
}

/* Külső aura (színes fény körülötte) */
.glow-on-hover::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background: linear-gradient(
    45deg,
    #d92332,
    #f25c05,
    #a833ff,
    #d92332
  );
  background-size: 300%;
  filter: blur(6px);
  border-radius: 14px;
  z-index: -1;
  animation: glowing 10s ease-in-out infinite;
  opacity: 1;
}

/* Háttérréteg */
.glow-on-hover::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #111111;
  border-radius: 12px;
  z-index: -1;
}

/* Aktív kattintás */
.glow-on-hover:active {
  transform: scale(0.98);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.4);
  color: #000000;
}
.glow-on-hover:active::after {
  background: #000000;
}

/* Aura mozgása */
@keyframes glowing {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- IGAZÍTÁS OPCIÓK --- */

/* Középre igazítás (alapértelmezett) */
.glow-on-hover {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Balra igazított */
.align-left.glow-on-hover {
  margin-left: 0;
  margin-right: auto;
}

/* Jobbra igazított */
.align-right.glow-on-hover {
  margin-left: auto;
  margin-right: 0;
}

/* Teljes szélességű gomb */
.full-width.glow-on-hover {
  width: 100%;
  text-align: center;
}