/* ------------------------------------------------ */
/* KONVERTÁLÓ – EXTRA UI ELEMEK */
/* ------------------------------------------------ */


/* ================================================ */
/* PANEL ANIMÁCIÓ */
/* ================================================ */

.panel.visible {

  animation:
    panelFadeIn
    0.25s
    ease-out;

}


@keyframes panelFadeIn {

  from {

    opacity: 0;

    transform:
      scale(0.95);

  }

  to {

    opacity: 1;

    transform:
      scale(1);

  }

}


/* ================================================ */
/* TOOLTIP */
/* ================================================ */

.tooltip {

  margin-top:
    4px;

  text-align:
    center;

  opacity:
    0.85;

}


/* ================================================ */
/* EREDMÉNY HOVER */
/* ================================================ */

.result-box:hover {

  background:
    rgba(0, 255, 0, 0.08);

  transform:
    scale(1.02);

  transition:
    0.15s;

}


/* ================================================ */
/* RESET HOVER */
/* ================================================ */

.reset-btn:hover {

  background:
    rgba(0, 255, 0, 0.12);

  transform:
    scale(1.06);

}


/* ================================================ */
/* MEGLEPETÉS */
/* ================================================ */

#surpriseBtn {

  border-color:
    #b300ff;

  color:
    #d966ff;

  box-shadow:
    0 0 12px #b300ff,
    0 0 24px #b300ff;

  transition:
    0.2s;

}


#surpriseBtn:hover {

  background:
    rgba(179, 0, 255, 0.15);

  transform:
    scale(1.05);

}


/* ================================================ */
/* INPUT HIBA */
/* ================================================ */

input.error {

  animation:
    shakeError
    0.25s;

}


@keyframes shakeError {

  0% {
    transform:
      translateX(0);
  }

  25% {
    transform:
      translateX(-4px);
  }

  50% {
    transform:
      translateX(4px);
  }

  75% {
    transform:
      translateX(-4px);
  }

  100% {
    transform:
      translateX(0);
  }

}