/*Oauth ikonok*/
/* Ikonok kép alapú verzióhoz */
.loginbutton {
  width: 60px;
  height: 60px;
  border: 1px ridge #fff;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* a képek tényleg töltsék ki a 60x60-as kört */
.loginbutton img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* nem vágja le, arányosan igazít */
}

/* fókusz és hover effektek */
.loginbutton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(0, 229, 255, .35), 0 0 20px #00ffd1;
}

@media (max-width: 480px) {
  .loginbutton { width: 56px; height: 56px; }
}

.loginbutton.google:hover   { box-shadow: 0 0 20px #EA4335; }
.loginbutton.github:hover   { box-shadow: 0 0 20px #fff; }
.loginbutton.facebook:hover { box-shadow: 0 0 20px #1877F2; }

/* Akció gombok (kiemelt) – maradhatnak */
.btn-primary {
  background: linear-gradient(135deg, #00e5ff, #0077ff);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
  transition: all 0.25s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #00ffd1, #0099ff);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}


/*Ghost Button-ok formázása*/

.btn-outline-primary {
    color: gray;
    border-color: #2a394d;
    background: transparent;
}

.btn-outline-primary:hover {
    border-color: #00ffd1;    
    background: linear-gradient(135deg, #00ffd1, #0099ff);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
    transform: translateY(-1px);
}

.btn-outline-primary:active {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}