@charset "UTF-8";
/* CSS Document */


.text-gradient {
  display: inline-block;
  color: #5CA17C; /*non-webkit fallback*/
  background: -webkit-linear-gradient(135deg, #f8722e, #f8722e);
	background: linear-gradient(135deg, #f8722e, #f8722e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-orange {
    color: #f56600;
}
.text-dark-blue {
    color: #00333d;
}

.bg-main-orange {
    background-color: #f56600;
}
.bg-main-dark-blue {
    background-color: #00333d;
}

.bg-main-footer {
    background-color: #e5eaed;
}

.bg-main-footer-dark {
    background-color: #0a333e;
}

.bg-main-section-light {
    background-color: #f0f2f4;
}

.section-hero-kereso {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin-top: -240px; /* alapértelmezett asztali */
}

/* Tablet: 768px-től 991px-ig */
@media (max-width: 991px) {
  .section-hero-kereso {
    margin-top: -280px;
  }
}

/* Mobil: 767px alatt */
@media (max-width: 767px) {
  .section-hero-kereso {
    margin-top: -150;
  }
}

.tf-dropdown-sort.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.section-hero-kereso .finder-dropdown > .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

.disabled-button-tf {
    pointer-events: none;
    opacity: 0.5;
}

/* kezdőlapi két box */
/* Asztali (lg és felette) */
.custom-margin-top {
  margin-top: 115px;
}

/* Tablet (md: 768px – 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .custom-margin-top {
    margin-top: 300px; /* köztes érték */
  }
}

/* Mobil (xs–sm: max 767.98px) */
@media (max-width: 767.98px) {
  .custom-margin-top {
    margin-top: 170px;
  }
}

/* Boxok közötti távolság mobilon */
.tf-content-wrap {
  margin-bottom: 1rem;
}

/* Asztali nézetben visszaállítjuk az eredeti margót */
@media (min-width: 768px) {
  .tf-content-wrap {
    margin-bottom: 0;
  }
}

.hero-kereso {
  position: relative;
  z-index: 2;
  padding: 20px; /* mobil */
}

/* md-től felfelé (≥768px) */
@media (min-width: 768px) {
  .hero-kereso {
    padding: 50px;
  }
}

.bg-alap-szurke {
    background-color: #f0f2f4;
}

.category-box {
  background-color: #fff;
  border-radius: 12px;
  transition: 0.2s;
}

.category-box:hover {
  transform: translateY(-3px);
}

.category-box .divider {
  height: 1px;
  background-color: #ddd;
  width: 60%;
  margin: 0 auto;
}


/* box hover color */
.category-box {
  border: 1px solid #DDDDDD;
  transition: all 0.3s ease;
}

.category-box:hover {
  border: 1px solid #f56600;
}


/* header sticky top animation */
.header-bottom.is-sticky {
    transform: translateY(0);
    animation: slideDown 1.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.search-suggests-results {
    position: absolute;
    background: #fff;
    width: 100%;
    z-index: 999;
    border: 1px solid #ddd;
}

.search-result-item {
    display: block;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.search-result-item:hover {
    background: #f5f5f5;
}

.meta-variant-main-green {
  display: inline-block;
  border: 1px solid #25692e;
  color: #25692e;
  background-color: #25692e1a; /* halvány zöld (kb. 10%) */
  border-radius: 999px;
  padding: 4px 10px;
}

.meta-variant-main-red {
  display: inline-block;
  border: 1px solid #d98a45;
  color: #d98a45;
  background-color: #d98a451a; /* halvány narancssárga (kb. 10%) */
  border-radius: 999px;
  padding: 4px 10px;
}

.card-product-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* nem vágja le, arányt tart */
}

.card-product.grid .card-product-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    overflow: hidden;
}

.card-product.grid .img-product,
.card-product.grid .img-hover {
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

/* ========================================= SWEETALERTS2 ========================================= */
.swal-title-fix {
  line-height: 0 !important;
}
/* ========================================= SWEETALERTS2 ========================================= */

/* ========================================= SIMPLEPAY ========================================= */
/* ===============================
   FLIP BUTTON BASE
=================================*/
.flip-btn {
    position: relative;
    perspective: 1000px;
    width: 100%;
    height: 48px;
    transform-style: preserve-3d;
}

.flip-btn a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* ===============================
   FRONT / BACK
=================================*/
.flip-btn .front {
    background: #2b2e3a;
    color: white;
    transform: rotateX(0deg) translateZ(1px);
}

.flip-btn .back {
    background: #00a651;
    transform: rotateX(180deg) translateZ(1px);
}

.flip-btn .front,
.flip-btn .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ===============================
   FLIP STATE
=================================*/
.flip-btn.flipped .front {
    transform: rotateX(-180deg);
}

.flip-btn.flipped .back {
    transform: rotateX(0deg);
    box-shadow: 0 10px 30px rgba(0, 166, 81, 0.3);
    animation: applePulse 2s infinite;
}

/* ===============================
   INNER (scale anim külön layer)
=================================*/
.flip-btn .back .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.flip-btn.flipped .back .inner {
    animation: appleBreath 2s infinite;
}

/* ===============================
   SHINE EFFECT (csak SimplePay)
=================================*/
.flip-btn a::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.12),
        transparent
    );
    transform: rotate(25deg);
    opacity: 0;
}

.flip-btn.flipped .back::after {
    opacity: 1;
    animation: shine 2.5s infinite;
}

/* ===============================
   ANIMATIONS
=================================*/
@keyframes shine {
    0% { left: -75%; }
    100% { left: 130%; }
}

@keyframes appleBreath {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes applePulse {
    0%   { box-shadow: 0 0 0 rgba(0, 166, 81, 0); }
    50%  { box-shadow: 0 0 25px rgba(0, 166, 81, 0.5); }
    100% { box-shadow: 0 0 0 rgba(0, 166, 81, 0); }
}
/* ========================================= SIMPLEPAY ========================================= */
.product-sticker-svg {
  height: 38px;
}

.tf-product-info-price .product-sticker-svg {
  transform: translateY(-8px);
}

@media (max-width: 575.98px) {
  .tf-product-info-price .product-sticker-svg {
    transform: translateY(-5px);
  }
}

#gallery-swiper-started {
  height: 800px;
  min-height: 800px;
  max-height: 800px;
}

#gallery-swiper-started .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 800px;
  padding: 24px;
}

#gallery-swiper-started .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobil */
@media (max-width: 767.98px) {
  #gallery-swiper-started {
    height: auto;
    min-height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  #gallery-swiper-started .item {
    height: auto;
    padding: 16px;
  }
}

.btn-straight-to-buy {
    background-color: #f8864a !important;
    border-color: #f8864a !important;
}

.btn-straight-to-buy:hover {
    background-color: #f1671f !important;
    border-color: #f1671f !important;
}