body {
  
}

/* Popup overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup {
  background: linear-gradient(180deg, #000 0%, #111 100%);
  border-radius: 15px;
  padding: 40px 20px 40px 20px;
  width: 100%;
  max-width: 1000px;
  color: #fff;
  display: flex;           /* keep flex for left-right layout */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;     /* vertically center wheel and text */
  position: relative;
  overflow: hidden;
}
.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
/* WHEEL (Right half visible) */
.wheel-wrapper {
  width: 450px;
  height: 450px;
  position: relative;
  margin-right: 40px;      /* space between wheel and text */
}
.wheel-container {
  position: absolute;
  top: 0;
  left: -200px; /* hide left half */
  width: 450px;
  height: 450px;
  overflow: hidden;
}
.wheel {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Arrow on right */
.arrow_spin {
  position: absolute;
  top: 50%;
  right: 150px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 25px solid #fff;
  z-index: 2;
}
.text-section {
  margin-left: 0;           /* remove old margin */
  max-width: 400px;
  text-align: left;         /* keep text left-aligned */
}
h1 { font-weight: 800; font-size: 2rem; color: #fff; }
.highlight { color: #007bff; }
.btn-primary {
  background: #007bff;
  border: none;
  font-weight: 600;
  border-radius: 4px;
  width: 100%;
}
.btn-primary:hover { background: #0056b3; }
.skip { margin-top: 10px; color: #00bfff; cursor: pointer; }
.glow {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
  text-shadow: 0 0 15px #007bff;
}

 /* spin-wheel-popup-start  */

.spin-blk-frd-sale-modal .modal-dialog{
    min-width: 920px;
}
.spin-blk-frd-sale-modal .modal-body{
    padding-left: 0;
}
.spin-blk-frd-sale-modal .modal-content{
    border-radius: 10px;
    background: linear-gradient(157deg, #000 19%, #363232 85.31%);
    border: none;
}
.spin-blk-frd-sale-cnt-img{
    text-align: center;
}
.spin-blk-frd-sale-cnt-title {
    color: #FFF;
    font-family: "Luckiest Guy";
    font-size: 24px;
    font-weight: 400;
    line-height: 35px;
    margin: 10px 0;
}
.spin-blk-frd-sale-cnt-txt {
    color: #0E59F2;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 15px 0;
}
.spin-blk-frd-sale-cnt-main ul {
    margin-bottom: 25px;
}
.spin-blk-frd-sale-cnt-main ul li {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
}
.spin-blk-frd-frm-r2 {
    display: flex;
    margin: 10px 0;
    gap: 10px;
}
.spin-blk-frd-frm-r1 input, .spin-blk-frd-frm-r2 input {
    background: transparent;
    border: 1px solid #B2D7FF;
    color: #fff;
}
.spin-blk-frd-frm-r1 input::placeholder, .spin-blk-frd-frm-r2 input::placeholder {
    color: #4E4E4E;
}
.spin-blk-frd-sale-cnt-form .form-control:focus {
    border: 1px solid #fff;
    box-shadow: none;
    background: transparent;
    color: #fff;
}
.spin-blk-bdr-sale-cnt-btn a {
    width: 100%;
    text-align: center;
    margin: 10px 0 20px;
}
.spin-blk-bdr-close-btn a{
    background-color: transparent;
    color: #0E59F2;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    box-shadow: none;
}
.spin-blk-frd-sale-cnt-main {
    padding: 0 20px;
}
.spin-blk-frd-sale-cnt-form .form-control {
    margin: 10px 0;
}







 /* spin-wheel-popup-end  */