/* Overlay */
.newsletter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 99999;
}

/* Popup */
.newsletter-popup {
    background: #0E0D0C;
    max-width: 500px;
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    position: relative;
    box-sizing: border-box;
    color: #fff;
}

/* Close Button */
.newsletter-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent !important;
    border: none;
    font-size: 24px !important;
    color: #fff !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

@media (max-width: 480px) {
    .newsletter-popup {
      max-width: 100%;
    }
}
      
      /* FORM WRAPPER */
.newsletter-form {
  display: block;
}

/* INPUTS */
.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 8px 0;
  margin-bottom: 20px;
  background: transparent;
  color: #fff;
  border: 0;
  border-bottom: 1px solid #f67017;
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s ease;
}

/* PLACEHOLDERS */
.newsletter-form input[type="text"]::placeholder,
.newsletter-form input[type="email"]::placeholder {
  color: #fff;
  opacity: 1;
}

/* Older browser placeholder support */
.newsletter-form input[type="text"]::-webkit-input-placeholder,
.newsletter-form input[type="email"]::-webkit-input-placeholder {
  color: #fff;
}

.newsletter-form input[type="text"]:-ms-input-placeholder,
.newsletter-form input[type="email"]:-ms-input-placeholder {
  color: #fff;
}

.newsletter-form input[type="text"]::-ms-input-placeholder,
.newsletter-form input[type="email"]::-ms-input-placeholder {
  color: #fff;
}

/* BUTTON */
.newsletter-form button {
  width: 100%;
  padding: 13px 32px;
  border: 1px solid #f67017;
  border-radius: 4px;
  cursor: pointer;
  background: #f67017;
  color: #fff;
  font-weight: 600;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* BUTTON HOVER */
.newsletter-form button:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.newsletter-form {
    display: block;
    margin: 30px;
}
@media(max-width:580px){
    .newsletter-form {
        display: block;
        margin: auto auto 30px;
    }
}

 /* Shake animation */
      @keyframes shake {
        0% { transform: rotate(0deg); }
        20% { transform: rotate(-15deg); }
        40% { transform: rotate(15deg); }
        60% { transform: rotate(-10deg); }
        80% { transform: rotate(10deg); }
        100% { transform: rotate(0deg); }
      }
      .shake {
        animation: shake 0.6s;
      }

.spin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 99998;
}

/* POPUP WRAPPER */
.spin-popup {
    background: #0E0D0C;
    max-width: 420px;
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    position: relative;
    box-sizing: border-box;
    color: #fff;
}

.spin-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent!important;
    border: none!important;
    font-size: 26px!important;
    color: #fff!important;
    cursor: pointer!important;
    line-height: 1;
}

/* WHEEL CONTAINER */
.spin-popup .container {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SPIN BUTTON */
.spinBtn {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #333;
    border: 4px solid rgba(0,0,0,0.75);
    cursor: pointer;
}

.spinBtn::before {
    content: '';
    position: absolute;
    top: -28px;
    width: 20px;
    height: 30px;
    background: #fff;
    clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
}

/* WHEEL */
.wheel {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 
        0 0 0 5px #682d06, 
        0 0 0 15px #f67017, 
        0 0 0 18px #fdb559;
    transition: transform 5s ease-in-out;
}

/* WHEEL SECTIONS */
.number {
    position: absolute;
    width: 50%;
    height: 50%;
    background: var(--clr);
    transform-origin: bottom right;
    transform: rotate(calc(45deg * var(--i)));
    clip-path: polygon(0 0, 56% 0, 100% 100%, 0 56%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.number span {
    transform: rotate(45deg);
    font-size: 2.2em;
    font-weight: 700;
    color: #000;
}

.number span::after {
    content: ' Free Spins';
    display: block;
    font-size: .5em;
    font-weight: 600;
    margin-top: -10px;
}

/* REWARD POPUP IMAGE */
.reward-popup img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* REWARD POPUP MESSAGE */

.spin-popup.reward-popup {
  max-width: 400px;
  text-align: center;
}
.reward-popup p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}
.spin-popup.reward-popup img {
  width: 250px;
}
/* CLAIM REWARD BUTTON (ANCHOR) */
.reward-btn {
    display: block!important;
    margin: 0 auto!Important;
    padding: 15px 32px!Important;
    border-radius: 5px!Important;
    background-image: linear-gradient(180deg, #FFCC00 0%, #FF9900 100%)!Important;
    color: #000 !important;
    font-weight: 600!Important;
    font-size: 20px!Important;
    text-align: center;
    text-decoration: none !important;
    max-width: 100%!Important;
    width:300px!Important;
}
#spinTrigger{
  display:block!Important;
  margin:15px auto!Important;
  background:linear-gradient(180deg,#ffcc00,#ff9900)!Important;
  color:#000!Important;
  font-weight:bold!Important;
  border:none!Important;
  border-radius:6px!Important;
  padding:12px 30px!Important;
  cursor:pointer!Important;
  font-size:16px!Important;
}

/* MOBILE */
@media (max-width: 480px) {
    .spin-popup {
        max-width: 100%;
    }
    .spin-popup .container {
        width: 270px;
        height: 270px;
    }
}