/* Smooth slide from right -> in, and back to right on leave */
.admin-modal-slide-enter { 
  opacity: 1; 
  transform: translateX(800px);    /* start off-screen to the right */
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.admin-modal-slide-enter-active { transition: all .2s ease; }
.admin-modal-slide-enter-to { 
  opacity: 1; 
  transform: translateX(0); 
}

.admin-modal-slide-leave { 
  opacity: 1; 
  transform: translateX(0); 
}
.admin-modal-slide-leave-active { transition: all .2s ease; }
.admin-modal-slide-leave-to { 
  opacity: 1; 
  transform: translateX(800px);    /* ← slide OUT to the right (was -500px) */
}





.modal-fade-enter { opacity:0; }
.modal-fade-enter-active { transition: all 1s ease; }
.modal-fade-enter-to { opacity:1;  }
.modal-fade-leave { opacity:1;  }
.modal-fade-leave-active { transition: all 1s ease; }
.modal-fade-leave-to { opacity:0; }

.fade-super-slow-enter { opacity:0; }
.fade-super-slow-enter-active { transition: all 2s ease-in-out; }
.fade-super-slow-enter-to { opacity:1; }
.fade-super-slow-leave { opacity:1; }
.fade-super-slow-leave-active { transition: all 2s ease-in-out; }
.fade-super-slow-leave-to { opacity:0; }


.fade-quick-enter { opacity:0; }
.fade-quick-enter-active { transition: all 1.5s ease; }
.fade-quick-enter-to { opacity:1; }
.fade-quick-leave { opacity:1; }
.fade-quick-leave-active { transition: all 1.5s ease; }
.fade-quick-leave-to { opacity:0; }


.fade-slow-enter { opacity:0; }
.fade-slow-enter-active { transition: all 2s ease; }
.fade-slow-enter-to { opacity:1; }
.fade-slow-leave { opacity:1; }
.fade-slow-leave-active { transition: all 2s ease; }
.fade-slow-leave-to { opacity:0; }


.modal-slide-enter { opacity:0; transform:translateX(500px); }
.modal-slide-enter-active { transition: all .4s ease-in-out; }
.modal-slide-enter-to { opacity:1; transform: translateX(0px); }
.modal-slide-leave { opacity:1; transform: translateX(0px); }
.modal-slide-leave-active { transition: all .4s ease-in-out; }
.modal-slide-leave-to { opacity:0;  transform: translateX(-500px); }


.move-ftop-enter { transform:translateY(300px) !important; opacity:0;}
.move-ftop-enter-active { transition: all 1s ease !important; }
.move-ftop-enter-to { transform:translateY(0px) !important; opacity:1; }
.move-ftop-leave { transform:translateY(0px) !important; opacity:1;}
.move-ftop-leave-active { transition: all 1s ease !important; }
.move-ftop-leave-to { transform:translateY(300px) !important; opacity:0;}


.cookie-cookie-fade-enter { opacity:0; }
.cookie-fade-enter-active { transition: opacity .5s ease-out; }
.cookie-fade-enter-to { opacity:1;}
.cookie-fade-leave { opacity:1; }
.cookie-fade-leave-active { transition: all .5s ease-in-out; }
.cookie-fade-leave-to { opacity:0; transform:translateY(200px);}


.cart-tab-enter {transform:translateX(100%); }
.cart-tab-enter-active {transition: all 0.4s ease; }
.cart-tab-enter-to {transform: translateX(0px); }
.cart-tab-leave {transform: translateX(0px); }
.cart-tab-leave-active {transition: all 0.4s ease; }
.cart-tab-leave-to {transform: translateX(100%); }


.slider-fade-enter { opacity:0;}
.slider-fade-enter-active { transition: opacity 2.0s ease-in-out; }
.slider-fade-enter-to { opacity:1; }
.slider-fade-leave { opacity:1;}
.slider-fade-leave-active { transition: opacity 2.0s ease-in-out; }
.slider-fade-leave-to { opacity:0; }


.pop-slide-enter { opacity:0; transform:translateX(200px) }
.pop-slide-enter-active { transition: all .4s ease-in-out; }
.pop-slide-enter-to { opacity:1; transform:translateX(0px) }
.pop-slide-leave { opacity:1; transform:translateX(-50px) }
.pop-slide-leave-active { transition: all .4s ease-in-out; }
.pop-slide-leave-to { opacity:0; transform:translateX(200px) }




.modal-fleft-tright-enter { transform:translateX(-400px);}
.modal-fleft-tright-enter-active { transition: all .5s ease; }
.modal-fleft-tright-enter-to { transform:translateX(0px);}
.modal-fleft-tright-leave { transform:translateX(0px); }
.modal-fleft-tright-leave-active { transition: all .5s ease; }
.modal-fleft-tright-leave-to { transform:translateX(-400px); }


.modal-fright-tleft-enter {transform: translateX(400px);}
.modal-fright-tleft-enter-active {transition: all 0.5s ease;}
.modal-fright-tleft-enter-to {transform: translateX(0px);}
.modal-fright-tleft-leave {transform: translateX(0px);}
.modal-fright-tleft-leave-active {transition: all 0.5s ease;}
.modal-fright-tleft-leave-to {transform: translateX(400px);}




.slide-fleft-tright-enter { transform:translateX(-400px);}
.slide-fleft-tright-enter-active { transition: all .5s ease; }
.slide-fleft-tright-enter-to { transform:translateX(0px);}
.slide-fleft-tright-leave { transform:translateX(0px); }
.slide-fleft-tright-leave-active { transition: all .5s ease; }
.slide-fleft-tright-leave-to { transform:translateX(-400px); }

.slide-fleft-tright-100-opacity-enter { transform:translateX(-500px);}
.slide-fleft-tright-100-opacity-enter-active { transition: all .5s ease; }
.slide-fleft-tright-100-opacity-enter-to { transform:translateX(0px);}
.slide-fleft-tright-100-opacity-leave { transform:translateX(0px);}
.slide-fleft-tright-100-opacity-leave-active { transition: all .5s ease; }
.slide-fleft-tright-100-opacity-leave-to { transform:translateX(-500px); }


.slide-fright-tleft-enter { transform:translateX(700px); }
.slide-fright-tleft-enter-active { transition: all 0.5s ease; }
.slide-fright-tleft-enter-to { transform:translateX(0px); }
.slide-fright-tleft-leave-active {
  transition: all 0.5s ease;
}

.slide-fright-tleft-leave-to {
  transform: translateX(700px); /* Slide out to the right */
  opacity: 1;
}

.slide-fright-tleft-leave {
  transform: translateX(0px); /* Start at normal position */
  opacity: 1;
}



.expand-stripe-ini{opacity:1; height:0px !important; transition:all 1s ease-in;}
.expand-stripe-end{opacity:1; height:100% !important; transition:all 1s ease-in;}

.fade-2-ini{opacity:0 !important; transition:all 1s ease-in;}
.fade-2-end{opacity:1 !important; transition:all 1s ease-in;}

.move-fbottom-ttop-ini{opacity:0 !important; transform:translateY(-300px); transition:all 1s ease-in;}
.move-fbottom-ttop-end{opacity:1 !important; transform:translateY(0px); transition:all 1s ease-in;}

.move-fleft-tright-ini{opacity:0 !important; transform:translateX(-300px); transition:all 1.5s ease-in;}
.move-fleft-tright-end{opacity:1 !important; transform:translateX(0px); transition:all 1.5s ease-in;}

.move-fright-tleft-ini{opacity:0 !important; transform:translateX(300px); transition:all 1.5s ease-in;}
.move-fright-tleft-end{opacity:1 !important; transform:translateX(0px); transition:all 1.5s ease-in;}

.reflection-ini{opacity:0 !important; transform:translateX(-300px); transition:all 0.5s ease;}
.reflection-end{opacity:1 !important; transform:translateX(0px); transition:all 0.5s ease;}

.scale-up-img-ini{transform:scale(0.8); transition:all 0.5s ease; opacity:0.7;}
.scale-up-img-end{transform:scale(1); transition:all 0.5s ease; opacity:1;}


/* Transition only on enter */
.fade-scale-up-img-enter-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Start state (before entering) */
.fade-scale-up-img-enter {
  transform: scale(0.7);
  opacity: 0.7;
}

/* End state (after entering) */
.fade-scale-up-img-enter-to {
  transform: scale(1);
  opacity: 1;
}

/* 🛠️ New fix: Keep scale after transition */
.persistent-scale {
  transform: scale(1);
  opacity: 1;
}

/* Prevent transitions when leaving */
.fade-scale-up-img-leave-active {
  transition: none !important;
}







.scale-up-ini{transform:scale(1); transition:all 0.5s ease;}
.scale-up-end{transform:scale(1.2); transition:all 0.5s ease;}

.fade-scale-up-ini{opacity:0 !important; transform:scale(1); transition:all 1s ease-in;}
.fade-scale-up-end{opacity:1 !important; transform:scale(1.2); transition:all 1s ease-in;}


/* Entry Animation */
.slide-fright-tleft-3-enter-active, 
.slide-fright-tleft-3-leave-active,
.slide-fleft-tright-3-enter-active, 
.slide-fleft-tright-3-leave-active {
  position: absolute; /* Ensures no shifting during transitions */
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Entering */
.slide-fright-tleft-3-enter, 
.slide-fleft-tright-3-enter {
  transform: translateY(20px); /* Starts slightly below */
  opacity: 0;
}

/* Entering to final position */
.slide-fright-tleft-3-enter-to, 
.slide-fleft-tright-3-enter-to {
  transform: translateY(0px);
  opacity: 1;
}

/* Leaving */
.slide-fright-tleft-3-leave, 
.slide-fleft-tright-3-leave {
  transform: translateY(0px);
  opacity: 1;
}

/* Leaving final position */
.slide-fright-tleft-3-leave-to, 
.slide-fleft-tright-3-leave-to {
  transform: translateY(-20px); /* Moves up slightly when leaving */
  opacity: 0;
}

.slide-fright-tleft-3-leave-to { transform:translateX(-200px); }


.slide-fleft-tright-3-enter { transform:translateX(200px); }
.slide-fleft-tright-3-enter-active { transition: all 0.5s ease; }
.slide-fleft-tright-3-enter-to { transform:translateX(0px); }
.slide-fleft-tright-3-leave { transform:translateX(0px); }
.slide-fleft-tright-3-leave-active { transition: all 0.5s ease; }
.slide-fleft-tright-3-leave-to { transform:translateX(200px); }



.slide-fright-tleft-2-enter { transform:translateX(-600px); }
.slide-fright-tleft-2-enter-active { transition: all 0.5s ease; }
.slide-fright-tleft-2-enter-to { transform:translateX(0px); }
.slide-fright-tleft-2-leave { transform:translateX(0px); }
.slide-fright-tleft-2-leave-active { transition: all 0.5s ease; }
.slide-fright-tleft-2-leave-to { transform:translateX(-600px); }


.slide-ftop-tbottom-enter {
  opacity: 1;
  transform: translateY(-300px);
}
.slide-ftop-tbottom-enter-active {
  transition: all 1s ease;
}
.slide-ftop-tbottom-enter-to {
  opacity: 1;
  transform: translateY(0px);
}
.slide-ftop-tbottom-leave {
  opacity: 1;
  transform: translateY(0px);
}
.slide-ftop-tbottom-leave-active {
  transition: all 1s ease;
}
.slide-ftop-tbottom-leave-to {
  opacity: 1;
  transform: translateY(-300px);
}


.location-ftop-tbottom-enter { opacity:1;transform:translateY(-500px); }
.location-ftop-tbottom-enter-active { transition: all 0.5s ease; }
.location-ftop-tbottom-enter-to { opacity:1; transform:translateY(0px); }
.location-ftop-tbottom-leave { opacity:1;transform:translateY(0px); }
.location-ftop-tbottom-leave-active { transition: all 0.5s ease; }
.location-ftop-tbottom-leave-to { opacity:1; transform:translateY(-500px);}


.slide-fbottom-ttop-enter {
  opacity: 1;
  transform: translateY(600px); /* start below */
}
.slide-fbottom-ttop-enter-active {
  transition: all 0.6s ease;
}
.slide-fbottom-ttop-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.slide-fbottom-ttop-leave {
  opacity: 1;
  transform: translateY(0);
}
.slide-fbottom-ttop-leave-active {
  transition: all 0.6s ease;
}
.slide-fbottom-ttop-leave-to {
  opacity: 1;
  transform: translateY(600px); /* slide down */
}



.scale-up-enter { transform:scale(0) !important; opacity:0 !important;}
.scale-up-enter-active { transition: all 2s ease-in-out !important;}
.scale-up-enter-to { transform:scale(2) !important; opacity:1 !important;}
.scale-up-leave { transform:scale(1); opacity:1;}
.scale-up-leave-active { transition: all 2s ease; }
.scale-up-leave-to { transform:scale(0); opacity:0;}


.scale-up-rotate-enter { transform:scale(0.2); transform: rotate(360deg);}
.scale-up-rotate-enter-active { transition: all 1s ease-in-out; transform-origin:center;}
.scale-up-rotate-enter-to { transform:scale(1.0); transform:rotate(0deg);}
.scale-up-rotate-leave { transform:scale(1); }
.scale-up-rotate-leave-active { transition: all 1s ease-in-out; }
.scale-up-rotate-leave-to { transform:scale(0.5); }

.slide-scale-up-rotate-enter { transform:scale(1.2); transform: rotate(-20deg);}
.slide-scale-up-rotate-enter-active { transition: all 1s ease-in-out; transform-origin:center;}
.slide-scale-up-rotate-enter-to { transform:scale(1); transform:rotate(0deg);}
.slide-scale-up-rotate-leave { transform:scale(1.2); transform: rotate(-20deg);}
.slide-scale-up-rotate-leave-active { transition: all 1s ease-in-out; transform-origin:center;}
.slide-scale-up-rotate-leave-to { transform:scale(1); }


.shadow-pulse{animation: shadow-pulse 1.5s infinite;}
@keyframes shadow-pulse
{
  0% {box-shadow: 0 0 0 0px rgba(0,0,0,0.5);}
  100% {box-shadow: 0 0 0 40px rgba(0,0,0,0);}
}


.pulse-enter { animation: pulse 2s;}
.pulse-enter-active { animation: pulse 2s;}
.pulse-enter-to { animation: pulse 2s;}
.pulse-leave { animation: pulse 2s reverse; }
.pulse-leave-active { animation: pulse 2s reverse; }
.pulse-leave-to { animation: pulse 2s reverse; }


@keyframes pulse {
  0% {transform: scale(0);}
  10% {transform: scale(0);}
  30% {transform: scale(0);}
  40% {transform: scale(0);}
  50% {transform: scale(1.7);}
  60% {transform: scale(1.9);}
  70% {transform: scale(2);}
  85% {transform: scale(1.2);}
  100% {transform: scale(1);}
}


.double-pulse-enter { animation: double-pulse 2s;}
.double-pulse-enter-active { animation: double-pulse 2s;}
.double-pulse-enter-to { animation: double-pulse 2s;}
.double-pulse-leave { animation: double-pulse 2s reverse; }
.double-pulse-leave-active { animation: double-pulse 2s reverse; }
.double-pulse-leave-to { animation: double-pulse 2s reverse; }


@keyframes double-pulse {
  0% {transform: scale(1);}
  10% {transform: scale(1);}
  20% {transform: scale(1.2);}
  30% {transform: scale(1.6);}
  40% {transform: scale(1.1);}
  50% {transform: scale(1);}
  60% {transform: scale(1.1);}
  70% {transform: scale(1.6);}
  80% {transform: scale(1.7);}
  90% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

.spin {animation: spin 8s linear infinite; transform-origin:center;}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.pulsating-zoom{animation:pulsating-zoom 2.3s infinite ease-in-out; transition: all .5s; transform-origin: 50% 50%;}
@keyframes pulsating-zoom {
    0% {
        -moz-transform: rotate(0) scale(.5) skew(1deg);
    }
    30% {
        -moz-transform: rotate(0) scale(.7) skew(1deg);
    }
    100% {
        -moz-transform: rotate(0) scale(1) skew(1deg);
    }
}

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.move-light {
  animation: move-light 15s ease;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes move-light {
  0% {
    transform-origin: bottom top;
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}


.move {
  animation: move 30s ease;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes move {
  0% {
    transform-origin: bottom top;
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


.ring {
  animation: ring 0.5s;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 0s;
  transform-origin:center;
}

@keyframes ring {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


.bounce_left{animation: bounceLeft 2s infinite;}
.bounce_right{animation: bounceRight 2s infinite;}

@-webkit-keyframes bounceLeft {
    0%,
    20%,
    50%,
    80%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    40% {
      -webkit-transform: translateX(30px);
      transform: translateX(30px);
    }
    60% {
      -webkit-transform: translateX(15px);
      transform: translateX(15px);
    }
  }
  @-moz-keyframes bounceLeft {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateX(0);
    }
    40% {
      transform: translateX(30px);
    }
    60% {
      transform: translateX(15px);
    }
  }
  @keyframes bounceLeft {
    0%,
    20%,
    50%,
    80%,
    100% {
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    40% {
      -ms-transform: translateX(18px);
      transform: translateX(18px);
    }
    60% {
      -ms-transform: translateX(5px);
      transform: translateX(5px);
    }
  }
  /* /left bounce */
  
  
  /* right bounce */
  @-webkit-keyframes bounceRight {
    0%,
    20%,
    50%,
    80%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    40% {
      -webkit-transform: translateX(-30px);
      transform: translateX(-30px);
    }
    60% {
      -webkit-transform: translateX(-15px);
      transform: translateX(-15px);
    }
  }
  @-moz-keyframes bounceRight {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateX(0);
    }
    40% {
      transform: translateX(-30px);
    }
    60% {
      transform: translateX(-15px);
    }
  }
  @keyframes bounceRight {
    0%,
    20%,
    50%,
    80%,
    100% {
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    40% {
      -ms-transform: translateX(-16px);
      transform: translateX(-17px);
    }
    60% {
      -ms-transform: translateX(-5px);
      transform: translateX(-5px);
    }
  }
  /* /right bounce */


.fade:hover{opacity:0.9;}
.invisible{opacity:0;}
.invisible_left{transform: translateX(-100px);}
.invisible_right{transform: translateX(100px);}
.invisible_right{transform: translateX(300px);}
.show_invisible{opacity:1; transform: translate(0, 0) !important; transition: all 2s ease-in-out;}
.invisible_slide_first{transform: translate(0, 150px);}
.invisible_slide_second{transform: translate(0, 100px);}
.invisible_slide_third{transform: translate(0, 50px);}
.hover_slide_right{position:relative;}
.hover_slide_right::before{content:""; width:0px; height:1px; background-color:var(--web_primary_color); position:absolute; left:0px; bottom:-3px; transition: all 500ms ease;}
.hover_slide_right:hover::before{width:100%;}
.hover_slide_center{position:relative;}
.hover_slide_center::before{content:""; width:0px; height:2px; background-color:var(--web_primary_color); position:absolute; left:50%; bottom:-3px; transition: all 500ms ease;}
.hover_slide_center:hover::before{width:100%; left:0px;}
.stagger-ini-slide{opacity:0; transform:translateY(-175px); transition:all 1s ease-in;}
.stagger-end-slide{opacity:1; transform:translateY(0px); transition:all 1s ease-in;}
@media only screen and (max-width: 736px) 
{
.stagger-ini-slide{opacity:0; transform:translateX(-175px); transition:all 1s ease-in;}
.stagger-end-slide{opacity:1; transform:translateX(0px); transition:all 1s ease-in;}
}