/* Base style */
.progress-bar{
    background-color: #fe7e03;
    border-radius: 0;
}

.progress_reward_bar {
  height: 15px;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  border-left: 0;
  border-right: 0;
  box-shadow: unset !important;
  width: 100%;
}

/* First bar: Remove right border, keep left for glow */
.day:first-child .progress_reward_bar {
  border-left: 3px solid white; /* default fallback */
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

/* Last bar: Remove left border, keep right for glow */
.day:last-child .progress_reward_bar {
  border-right: 3px solid white; /* default fallback */
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

/* Glow state */
.progress_reward_bar.glow {
  background-color: white;
  border-color: #fe7e03;
}

/* Ensure glow borders apply correctly */
.day:first-child .progress_reward_bar.glow {
  border-left: 3px solid #00a54b;
}

.day:last-child .progress_reward_bar.glow {
  border-right: 3px solid #00a54b;
}
/* Day circle with overlay cut */
.day_circle {
  position: relative;
  z-index: 2; /* above progress bar */
}

/* White cut line over progress bar */
.day_circle.active::before {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  width: 130%;
  transform: translate(-50%, -50%);
  height: 9px;
  background: linear-gradient(
  to right,
  white 0%,         /* solid white start */
  white 20%,        /* keep white until 20% */
  transparent 50%,  /* center becomes transparent */
  white 80%,   
  white 100%        /* back to white (or exaggerated if needed) */
);

  z-index: 1; /* below the text, above the bar */
}

.day_circle.active{
  box-shadow: unset;
  animation: unset;
  border-color: #fe7e03;
}

@media (max-width: 768px) {
  .progress_reward_bar {
    height: 8px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    width: 105%;
  }

  .day_circle.active::before {
    height: 5px; /* or match it closer to visible bar height */
  }

  /* Optional: Adjust glow border width */
  .day:first-child .progress_reward_bar.glow,
  .day:last-child .progress_reward_bar.glow {
    border-left-width: 1px;
    border-right-width: 1px;
  }
}




.table-responsive .rules-table, .term_conditions {
    display: none
}

.table-responsive::after {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    background-image: url(https://pgk365reward.com/img/pgk365reward_com/rules2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 650px;
    aspect-ratio: 16 / 9;
    margin-top: 20px;
}

.total_section {
  background-image: url('https://pgk365reward.com/img/pgk365reward_com/total_deposit_bg-2.webp');
  background-size: 100% 100%;       /* Fills the box, cropping if needed */
  background-repeat: no-repeat;
  background-position: center;  /* Centers the image */
  background-color: unset;
  float: right;
  margin-top: -12%;
  padding: 20px 0 25px 0;
  box-shadow: none;
}
.total_section h2{
  text-align: center;
}
.progress-container{
    clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 5% 100%);
    width: 80%;
    background-color: rgb(163 163 163 / 50%);
    border-radius: 0px;
}
.reward-img img{
width: 120px
}
.reward-img p,.down-arrow{
display: none;
}
.reward_table td {
    padding: 10px 0;
}
.exchange{display: none;}

.day_circle_title_cn {
    display: block;
    position: absolute;
    color: white;
    font-size: 12px;
    bottom: -15px;
    text-align: center;
    width: 100%;
}
.day_circle_title_eng {
    display: block;
    position: absolute;
    color: white;
    font-size: 12px;
    bottom: -30px;
    text-align: center;
    width: 100%;
}
.sign-in-box{margin-top: 30px;}
@media only screen and (max-width: 600px) {

    .progress-container{height: 15px;margin-top: 5px;}
    .progress-text {font-size: 10px;}
    .total_section {padding: 15px 0;max-width: 60%;min-width: unset;margin-top: -15%;}
    .total_section h2{font-size: 12px;}
    .float-right-top{margin-top: 10%;}
    .day_circle {
        width: 30px;
        height: 30px;
        line-height: 25px;
        font-size: 12px;
     }
     .reward_table td {
        padding: 5px 0;
     }
    .reward-img{
       width: 100%
       max-width: 50px;
       overflow: visible;
       display: flex;
      justify-content: center;
    }
    .reward-img img{width: 60px;}

}