/* Reading Time Box - Glassmorphism Style */
.farjana-reading-progress-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 25px 0;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: fadeInFrpb 0.8s ease-in-out;
}

.frpb-hover-enabled:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.frpb-progress-percent {
  background: rgba(0, 0, 0, 0.05);
  color: inherit;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 700;
  transition: all 0.2s ease;
}

.frpb-finish-box {
  color: #64748b;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.03);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 400;
  margin-left: 5px;
}

/* Progress Bar Container */
#frpb-progress-bar-container {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.05);
}

#frpb-progress-bar {
  height: 100%;
  width: 0%;
  transition: width 0.2s ease-out;
}

/* Animation */
@keyframes fadeInFrpb {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .farjana-reading-progress-bar {
    padding: 8px 15px;
    font-size: 12px;
    flex-wrap: wrap;
  }
}

/* Reward Popup Styles */
#close-reward {
  position: relative;
  cursor: pointer;
  background: #fff;
  color: #333;
  border: none;
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: bold;
  margin-top: 10px;
}

.reward-icon {
  font-size: 50px;
  margin-bottom: 10px;
}

.reward-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: 5px;
  margin: 15px 0;
  font-size: 13px;
  display: inline-block;
}

@keyframes farjanaPop {
  from {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* ========================================
   PROGRESS BAR STYLES
   ======================================== */

/* Base Progress Bar */
.frpb-progress-bar {
  transition: all 0.3s ease !important;
}


.frpb-confetti {
  pointer-events: none;
  will-change: transform, top;
}

/* 2. Gradient Style */
.frpb-bar-gradient {
  background: linear-gradient(90deg, #2C3539, #42555C) !important;
}

/* 3. Striped Style */
.frpb-bar-striped {
  background: repeating-linear-gradient(45deg,
      #003870,
      #003870 10px,
      #0038A8 10px,
      #0038A8 20px) !important;
}

/* 4. Animated Style */
.frpb-bar-animated {
  background: linear-gradient(90deg, #0038A8, #003870) !important;
  background-size: 200% auto;
  animation: frpbShimmer 2s linear infinite;
}

@keyframes frpbShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* 5. Glow Style */
.frpb-bar-glow {
  box-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px currentColor !important;
}

/* ========================================
   ALTERNATE COLOR SCHEMES 
   (User can choose different colors)
   ======================================== */

/* Blue Gradient */
.frpb-bar-gradient.blue {
  background: linear-gradient(90deg, #0073aa, #00a0d2) !important;
}

/* Green Gradient */
.frpb-bar-gradient.green {
  background: linear-gradient(90deg, #28a745, #20c997) !important;
}

/* Purple Gradient */
.frpb-bar-gradient.purple {
  background: linear-gradient(90deg, #6f42c1, #9b59b6) !important;
}

/* Red Gradient */
.frpb-bar-gradient.red {
  background: linear-gradient(90deg, #dc3545, #e74c3c) !important;
}

/* Orange Gradient */
.frpb-bar-gradient.orange {
  background: linear-gradient(90deg, #fd7e14, #ff8c42) !important;
}