.wavypopup-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}


.wavypopup-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.wavypopup-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.wavypopup-banner-content {
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    position: relative;
   
}

.wavypopup-banner-inner {
  overflow: hidden;
}

.wavypopup-banner-inner img {
  width: 100%;
}

.wavypopup-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.wavypopup-banner-content .wavypopup-close {
    color: #aaa;
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.wavypopup-close:hover {
    color: #000;
}

#wavypopup-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ====== Fade In ====== */
.animation-fadeIn {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== Zoom In ====== */
.animation-zoomIn {
    animation: zoomIn 1s ease-out;
}
@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ====== Slide Up ====== */
.animation-slideUp {
    animation: slideUp 1s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ====== Flip In ====== */
.animation-flipIn {
    animation: flipIn 1s ease-out;
    transform-origin: top;
}
@keyframes flipIn {
    from { transform: rotateX(-90deg); opacity: 0; }
    to { transform: rotateX(0); opacity: 1; }
}

/* ====== Bounce In ====== */
.animation-bounceIn {
    animation: bounceIn 1s ease-out;
}
@keyframes bounceIn {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ====== Style 1 ====== */
.style1.wavypopup-modal {
    color: black;
}
.style1 .wavypopup-content {
    background: rgba(21, 20, 20, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    -webkit-backdrop-filter: blur(5.8px);
    border: 1px solid rgba(21, 20, 20, 0.3);
}

.style1 .wavypopup-content::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 30px;
    height: 10px;
    border-radius: 10px;
    transition: 0.5s;
    background-color: rgb(244, 177, 9);
    box-shadow: 0 0 5px rgb(244, 177, 9), 0 0 15px rgb(244, 177, 9), 0 0 30px rgb(244, 177, 9), 0 0 60px rgb(244, 177, 9);
    z-index: -100;
}

.style1 .wavypopup-content:hover::before{
    bottom: 0;
    height: 100%;
    width: 100%;
    border-radius: 30px;
    transition-delay: 0.3s;
}

.style1 .wavypopup-content::after{
    content: '';
    position: absolute;
    left: 50%;
    top: -5px;
    transform: translateX(-50%);
    width: 30px;
    height: 10px;
    border-radius: 10px;
    transition: 0.5s;
    background-color: rgb(244, 177, 9);
    box-shadow: 0 0 5px rgb(244, 177, 9), 0 0 15px rgb(244, 177, 9), 0 0 30px rgb(244, 177, 9), 0 0 60px rgb(244, 177, 9);
    z-index: -100;
}

.style1 .wavypopup-content:hover::after{
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 30px;
    transition-delay: 0.3s;
}

/* ====== Style 2 ====== */
.style2 .wavypopup-content {
    background: rgba(21, 20, 20, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    -webkit-backdrop-filter: blur(5.8px);
    border: 1px solid rgba(21, 20, 20, 0.3);
}
.style2 .wavypopup-content::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  transform: translateZ(0);
  filter: blur(15px);
  background: linear-gradient(to left, #ff5770, #e4428d, #c42da8, #9e16c3, #6501de, #9e16c3, #c42da8, #e4428d, #ff5770);
  background-size: 200% 200%;
  -webkit-animation: wavyStyle2-animateGlow 1.25s linear infinite;
          animation: wavyStyle2-animateGlow 1.25s linear infinite;
}

@-webkit-keyframes wavyStyle2-animateGlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes wavyStyle2-animateGlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* ====== Style 3 ====== */

.style3 .wavypopup-content {
  filter: drop-shadow(10px 10px 200px rgb(244, 177, 9)) drop-shadow(-10px -10px 50px rgb(244, 177, 9));
}

/* ====== Style 4 ====== */

.style4 .wavypopup-content {
  filter: drop-shadow(10px 10px 200px rgb(5, 124, 171)) drop-shadow(-10px -10px 50px rgb(5, 124, 171));
}

/* ====== Style 5 ====== */

.style5 .wavypopup-content {
    background: #174385;
    color: white;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    text-align: center;
    transform: rotate(-3deg);
    transition: transform 0.4s ease-in-out;
}

.style5 .wavypopup-content:hover {
    transform: rotate(0deg); 
}

.style5 .wavypopup-content .shape {
      position: absolute;
    }

.style5 .wavypopup-content .triangle {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 25px solid #ffc107;
    }

.style5 .wavypopup-content .circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 3px solid #174385;
    }

    /* Animations */
    @keyframes float-up-down {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-25px); }
    }

    @keyframes float-left-right {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(20px); }
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Shape positions + randomized animations */
.style5 .wavypopup-content .s1 {
      top: -40px; left: 10px; 
      border-bottom-color: #ffc107;
      animation: float-up-down 6s ease-in-out infinite, spin 12s linear infinite;
    }
.style5 .wavypopup-content .s2 {
      top: -30px; right: 20px; 
      border-bottom-color: #174385;
      animation: float-left-right 7s ease-in-out infinite alternate, spin 9s linear infinite reverse;
    }
.style5 .wavypopup-content .s3 {
      bottom: -40px; left: 20px; 
      border-bottom-color: #174385;
      animation: float-up-down 5s ease-in-out infinite alternate, spin 15s linear infinite;
    }
.style5 .wavypopup-content .s4 {
      bottom: -50px; right: 10px; 
      border-color: #ffc107;
      animation: float-left-right 8s ease-in-out infinite, spin 20s linear infinite reverse;
    }
.style5 .wavypopup-content .s5 {
      top: -30px; right: 50%; 
      border-color: #174385;
      animation: float-up-down 10s ease-in-out infinite alternate, spin 18s linear infinite;
    }

/* ====== Style 6 ====== */

.style6 .wavypopup-content {
  color: white;
}

.style6 .wavypopup-content .wavypopup-close{
  color: white;
  z-index: 100;
}

.style6 .wavypopup-content .wavypopup-content-inner {
  z-index: 99;
  position: relative;
  padding: 20px;
}
.style6 .wavypopup-content .bg-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    border-radius: 6px;
  }

.style6 .wavypopup-content .bg-red {
    background: #f5364c;
    z-index: 1;
    transform: translateX(-50%) rotate(-6deg);
  }
.style6 .wavypopup-content .bg-yellow {
    background: #ffcc00;
    z-index: 2;
    transform: translateX(-50%) rotate(5deg);
  }
.style6 .wavypopup-content .bg-black {
    background: #000;
    z-index: 3;
    transform: translateX(-50%) rotate(-1deg);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4) inset;
  }

.style6 .wavypopup-content .circle {
      position: absolute;
      border-radius: 50%;
      z-index: 0;
      opacity: 0.9;
      animation: wavyfloat 6s infinite ease-in-out alternate;
    }

.style6 .wavypopup-content .circle.small { width: 8px; height: 8px; }
.style6 .wavypopup-content .circle.medium { width: 14px; height: 14px; }
.style6 .wavypopup-content .circle.large { width: 20px; height: 20px; }

.style6 .wavypopup-content .circle.red { background: #f5364c; }
.style6 .wavypopup-content .circle.yellow { background: #ffcc00; }

    /* Circle positions */
.style6 .wavypopup-content .c1 { top: -40px; left: 20%; animation-duration: 6s; }
.style6 .wavypopup-content .c2 { top: -30px; right: 20%; animation-duration: 8s; }
.style6 .wavypopup-content .c3 { bottom: -40px; left: 15%; animation-duration: 10s; }
.style6 .wavypopup-content .c4 { bottom: -30px; right: 15%; animation-duration: 7s; }
.style6 .wavypopup-content .c5 { top: 50px; left: -60px; animation-duration: 9s; }
.style6 .wavypopup-content .c6 { bottom: 70px; right: -50px; animation-duration: 11s; }
.style6 .wavypopup-content .c7 { top: 120px; left: 80%; animation-duration: 6s; }
.style6 .wavypopup-content .c8 { bottom: -60px; left: 45%; animation-duration: 8s; }
.style6 .wavypopup-content .c9 { top: -50px; right: 40%; animation-duration: 12s; }
.style6 .wavypopup-content .c10 { bottom: -80px; right: 25%; animation-duration: 10s; }

    /* Floating animation */
  @keyframes wavyfloat {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-15px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
  }

    /* Halftone dotted triangles */
.style6 .wavypopup-content .halftone {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: radial-gradient(currentColor 20%, transparent 20%);
      background-size: 8px 8px;
      opacity: 0.8;
      z-index: 4;
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

.style6 .wavypopup-content .halftone.red {
      color: #f5364c;
      top: 40px;
      left: -60px;
      transform: rotate(-10deg);
    }

.style6 .wavypopup-content .halftone.yellow {
      color: #ffcc00;
      top: 40px;
      right: -60px;
      transform: rotate(190deg);
    }

/* ====== Style 7 ====== */

.style7 .wavypopup-content {
  border-radius: 5px;
  box-shadow: 0 0 80px white;
}

/* ====== Style 8 ====== */

.style8 .wavypopup-content {
  border-radius: 5px;
  box-shadow: 0 0 80px black;
  background-color: #000;
  color: white;
}

/* ====== Style 9 ====== */

.style9 .wavypopup-content {
  border-radius: 5px;
  box-shadow: 0 0 80px black;
  background-color: #000;
  color: white;
}

/* ====== Style 9 ====== */

.style10 .wavypopup-content {
  border-radius: 5px;
  box-shadow: 0 0 80px black;
  background-color: #000;
  color: white;
}