//- gradient-boarder - cssid- animated boarder-//

.gradient-border {
    position: relative;
    border: 1px solid #303030;
    border-radius: 12px;
    background: transparent;

    transition: border-color 3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* gradient layer */
.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    background: linear-gradient(
        0deg,
        rgb(255, 156, 141),
        rgb(214, 85, 165),
        rgb(96, 83, 203),
        rgb(255, 156, 141)
    );

    opacity: 0;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;

    transition: opacity 3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover shows border */
.gradient-border:hover {
    border-color: transparent;
}

.gradient-border:hover::before {
    opacity: 1;
    animation: rotateGradient 6s linear infinite;
}

/* rotation effect */
@keyframes rotateGradient {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

//
//
//- animated-bg - animated background for conteiner - //

/* Subtitle visible by default */
.animated-bg .card-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

/* Hide subtitle on hover */
.animated-bg:hover .card-subtitle {
    opacity: 0;
    transform: translateY(-15px);
}
// animated button //



// animated-line -///
/* --- ANIMATED LINE (FIXED VERSION) --- */

.animated-line {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.animated-line::before {
    content: "";
    position: absolute !important;
    display: block !important;

    left: 0 !important;
    right: 0 !important;

    /* Default settings */
    height: var(--line-height, 4px) !important;
    top: var(--line-top, 0) !important;
    bottom: var(--line-bottom, auto) !important;

    /* Gradient */
    background-image: linear-gradient(
        90deg,
        rgb(255, 156, 141),
        rgb(214, 85, 165),
        rgb(96, 83, 203),
        rgb(255, 156, 141)
    ) !important;

    /* Animation */
    background-size: 200% 100% !important;
    background-repeat: repeat-x !important;
    animation: moveGradient 3s linear infinite !important;

    /* Rounded corners */
    border-radius: inherit !important;

    /* Layer */
    z-index: 99 !important;
    pointer-events: none !important;
}

/* Smooth infinite movement */
@keyframes moveGradient {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: -200% 0%;
    }
}

////------ animated-bg ----/////

/* --- FINÁLNÍ VERZE PRO CUSTOM.CSS --- */

/* 1. Main container - forced clipping */
.elementor-element.animated-bg {
    position: relative !important;
    overflow: hidden !important;
}

/* 2. Background layer with zoom effect */
.elementor-element.animated-bg::after {
    content: "";
    position: absolute !important;
    inset: 0 !important;

    background-image: inherit !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: scale(1.2);
    transition: transform 1s ease-in-out !important;

    z-index: 0 !important;
    pointer-events: none !important;
}

.elementor-element.animated-bg:hover::after {
    transform: scale(1);
}

/* 3. Dark overlay */
.elementor-element.animated-bg::before {
    content: "";
    position: absolute !important;
    inset: 0 !important;

    background-color: rgba(0, 0, 0, 0.65) !important;
    transition: background-color 0.5s ease !important;

    z-index: 1 !important;
    pointer-events: none !important;
}

.elementor-element.animated-bg:hover::before {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

/* 4. Keep content above the background layers */
.elementor-element.animated-bg > .elementor-container,
.elementor-element.animated-bg > .elementor-widget-wrap,
.elementor-element.animated-bg > .e-con,
.elementor-element.animated-bg > .e-con-inner {
    position: relative !important;
    z-index: 2 !important;
}

 / --- ANIMOVANÝ RÁMEČEK PRO VNITŘNÍ ČÁST REFERENCE --- /
  / --- ANIMOVANÝ RÁMEČEK PRO TESTIMONIAL SWIPER (FIXNÍ SELEKTOR) --- /

  / Cílíme na vnitřní prvek reference uvnitř vašeho swiperu /
  .elementor-59 .elementor-element.elementor-element-216a3ee .elementor-main-swiper .swiper-slide .elementor-testimonial {
      position: relative !important;
      z-index: 1 !important;
      / Plynulý přechod původního rámečku /
      transition: border-color 0.4s ease !important;
      / Musí mít v Elementoru nastavené ohraničení (border) a zaoblení (radius) /
  }

  / Samotný animovaný rámeček /
  .elementor-59 .elementor-element.elementor-element-216a3ee .elementor-main-swiper .swiper-slide .elementor-testimonial::before {
      content: "" !important;
      position: absolute !important;

      / Inset musí být záporný, aby překryl původní okraj /
      top: -1px !important;
      left: -1px !important;
      right: -1px !important;
      bottom: -1px !important;
      padding: 1px !important; / Tloušťka rámečku /

      border-radius: inherit !important; / Přebírá rohy z nastavení karty /

      background: linear-gradient(
          0deg,
          rgb(255, 156, 141),
          rgb(214, 85, 165),
          rgb(96, 83, 203),
          rgb(255, 156, 141)
      ) !important;

      / Maska vytvoří efekt tenkého rámečku /
      -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;

      opacity: 0 !important;
      / Z-index 1 zajistí, že je to nad pozadím karty, ale pod textem /
      z-index: 1 !important; 
      pointer-events: none !important;
      transition: opacity 0.4s ease !important;
  }

  / Zvedneme obsah karty nad rámeček /
  .elementor-59 .elementor-element.elementor-element-216a3ee .elementor-main-swiper .swiper-slide .elementor-testimonial__content,
  .elementor-59 .elementor-element.elementor-element-216a3ee .elementor-main-swiper .swiper-slide .elementor-testimonial__footer {
      position: relative !important;
      z-index: 2 !important;
  }

  / Hover stav - aplikuje se při najetí na konkrétní slajd /
  .elementor-59 .elementor-element.elementor-element-216a3ee .elementor-main-swiper .swiper-slide .elementor-testimonial:hover {
      border-color: transparent !important;
  }

  .elementor-59 .elementor-element.elementor-element-216a3ee .elementor-main-swiper .swiper-slide .elementor-testimonial:hover::before {
      opacity: 1 !important;
      animation: rotateGlowSwiper 4s linear infinite !important;
  }

  @keyframes rotateGlowSwiper {
      0% { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
  }


//---Woocommerce products boarder__///

.woocommerce ul.products li.product {
    position: relative;
    border: 1px solid #303030;
    border-radius: 12px;
    background: transparent;
    padding: 15px;
    transition: border-color 3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.woocommerce ul.products li.product::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        0deg,
        rgb(255, 156, 141),
        rgb(214, 85, 165),
        rgb(96, 83, 203),
        rgb(255, 156, 141)
    );
    opacity: 0;
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce ul.products li.product:hover {
    border-color: transparent;
}

.woocommerce ul.products li.product:hover::before {
    opacity: 1;
    animation: rotateGradient 6s linear infinite;
}

@keyframes rotateGradient {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

//--Tabs boarder effect--//
 
body .tabs-boarder .e-n-tab-title,
body .tabs-boarder .e-n-tabs-content > .e-con {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    transition: all 3s ease !important;
    background: #000000 !important;
}

body .tabs-boarder .e-n-tab-title {
    border-radius: 20px 20px 0 0 !important;
}

body .tabs-boarder .e-n-tabs-content > .e-con {
    border-radius: 0 0 20px 20px !important;
    border: 1px solid #303030 !important;
}

body .tabs-boarder .e-n-tab-title::before,
body .tabs-boarder .e-n-tabs-content > .e-con::before {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    padding: 1px !important;
    background: linear-gradient(
        90deg,
        rgb(255, 156, 141),
        rgb(214, 85, 165),
        rgb(96, 83, 203),
        rgb(255, 156, 141)
    ) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 3s ease !important;
    pointer-events: none !important;
}

body .tabs-boarder .e-n-tab-title::before {
    border-radius: 20px 20px 0 0 !important;
}

body .tabs-boarder .e-n-tabs-content > .e-con::before {
    border-radius: 0 0 20px 20px !important;
}

body .tabs-boarder .e-n-tab-title:hover::before,
body .tabs-boarder .e-n-tab-title[aria-selected="true"]::before,
body .tabs-boarder .e-n-tabs-content > .e-con:hover::before {
    opacity: 1 !important;
    animation: rotateGlow 4s linear infinite !important;
}

@keyframes rotateGlow {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}