/* Kiegészítő animációk és dizájn-elemek — az eredeti Divi-stílus FÖLÖTT, azt nem módosítva */

/* Görgetésre megjelenő tartalmi sorok */
.kp-x-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.kp-x-reveal.kp-x-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .kp-x-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* A kitöltött hátterű Divi-gombokhoz NEM adunk saját hover-effektet — a natív Divi-viselkedés
   (ami az élő oldalon is fut, ismerten sima) marad érvényben, hogy ne ütközzön semmivel. */

/* Az átlátszó/körvonalas ("ghost") gomboknak — pl. a kezdőlapi "Részletek" — külön, biztonságos
   hover-visszajelzés kell, mert egyébként semmi nem jelzi, hogy kattinthatók. Csak háttérszín-beúszás,
   nincs elmozdulás/árnyék, tehát nem tud "rángatózni". A JS jelöli meg ezeket .kp-x-ghost-btn osztállyal. */
.kp-x-ghost-btn {
  transition: background-color .45s ease !important;
}
.kp-x-ghost-btn:hover {
  background-color: rgba(190, 27, 4, 0.09) !important;
}

/* Kép hover finom nagyítás — a dekoratív elválasztó-képeket a JS kizárja (.kp-x-no-hover) */
.et_pb_image .et_pb_image_wrap {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}
.et_pb_image img {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.et_pb_image:not(.kp-x-no-hover):hover img {
  transform: scale(1.04);
}

/* Fejléc finom árnyék, amint elgörgetünk alóla */
#main-header {
  transition: box-shadow .25s ease;
}
#main-header.kp-x-scrolled {
  box-shadow: 0 4px 18px rgba(74, 52, 40, 0.1);
}

/* Vissza a tetejére gomb */
.kp-x-top-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #be1b04;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(74, 30, 15, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  text-decoration: none;
}
.kp-x-top-btn.kp-x-show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.kp-x-top-btn:hover { background: #8f1503; transform: translateY(-3px); }
@media (max-width: 640px) {
  .kp-x-top-btn { width: 44px; height: 44px; bottom: 18px; right: 18px; }
}

/* Fejléc "Időpontfoglalás" gomb — szívdobbanás-szerű pulzálás, KIZÁRÓLAG hoverre */
@keyframes kp-x-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.07); }
  30% { transform: scale(1); }
  45% { transform: scale(1.07); }
  65% { transform: scale(1); }
}
.kp-x-header-cta:hover {
  transform: none;
  box-shadow: none;
  animation: kp-x-heartbeat 1.1s ease-in-out;
}


/* Mobilos "Hívás / Foglalás" sáv az oldal alján — helyi szolgáltatásnál mobilon sokan
   inkább egy koppintással hívnak, mint online foglalnak; ez mindkettőt egyformán elérhetővé teszi. */
.kp-x-call-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  box-shadow: 0 -4px 18px rgba(74, 52, 40, 0.16);
}
.kp-x-call-bar-inner {
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.kp-x-call-bar a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  font-family: 'Andika', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.kp-x-call-bar-call {
  background: #f6f1ea;
  color: #4a3428;
}
.kp-x-call-bar-book {
  background: #be1b04;
  color: #fff;
}
.kp-x-call-bar svg { flex-shrink: 0; }
@media (max-width: 780px) {
  .kp-x-call-bar { display: block; }
  body { padding-bottom: 58px; }
  .kp-x-top-btn { bottom: 76px; }
}
@media (max-width: 640px) {
  .kp-x-top-btn { bottom: 68px; }
}