/* Basic Page Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif; /* Apply Montserrat to all text */
}

body {
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 2rem; /* Add gap between the wrappers */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Container for the bar and labels */
.progress-wrapper {
  width: 400px;
  text-align: center;
}

.stats-bar {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

/* Title or logo area */
.social-media-label {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #F5F5F5;
    font-family: Montserrat;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}   

/* Adjust layout for progress bar and info */
.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem; /* Add margin for spacing */
  margin-bottom: 2rem; /* Add margin for spacing */
}

.progress-info {
  margin-left: 1rem; /* Add spacing between bar and info */
  font-weight: bold;
}

/* The background track of the progress bar */
.progress-bar {
  position: relative;
  background: #2f2f2f;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}

/* Each colored segment in the bar */
.progress-fill {
  height: 100%;
  transition: width 1s ease; /* smooth animation */
  position: relative;
}
.orange {
    background: #ED4B00;
    width: 0%;          /* start from 0 */
}
.blue {
    background: linear-gradient(90deg, #02066F 0%, #040CD5 100%);
  width: 0%;           /* start from 0 */
}

/* Centered text inside progress-fill */
.progress-fill span {
  position: absolute;
  width: fit-content; /* Adjust width to fit content */
  left: 50%;          /* Center horizontally */
  transform: translateX(-50%); /* Adjust for centering */
  text-align: center;
  color: #fff;
  font-weight: bold;
  line-height: 30px; /* Matches the height of the progress bar */
  pointer-events: none; /* Prevent interaction */
  font-size: 14px;     /* Explicitly set font size */
  font-family: 'Montserrat', Arial, sans-serif; /* Ensure font family is applied */
  text-transform: none; /* Override potential text-transform from seguidores.css */
  margin: 0;           /* Reset margin that might be inherited */
  padding: 0;          /* Reset padding that might be inherited */
}

/* Make sure the progress percentage and labels are styled correctly */
.progress-percentage,
.progress-info span,
.progress-bar span {
  font-family: 'Montserrat', Arial, sans-serif;
  text-transform: none;
  opacity: 1;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

/* Percentage label under the bar */
.progress-percentage {
  margin-top: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
}

/* Additional specificity for the total label */
.progress-info span {
  font-weight: bold;
  color: #fff;
}

@media (max-width: 600px) {
  .progress-wrapper {
    width: 360px; /* 80% of original 400px */
    transform: scale(0.8);
  }
  
  .progress-bar {
    height: 24px; /* 80% of original 30px */
  }
  
  .progress-fill span {
    line-height: 24px; /* Match the new height */
    font-size: 11.2px; /* 80% of original 14px */
  }
  
  .progress-percentage {
    font-size: 0.8rem; /* 80% of original 1rem */
  }
  
  .progress-info span,
  .progress-bar span {
    font-size: 11.2px; /* 80% of original 14px */
  }
  
  .stats-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .progress-container {
    margin-top: 0.4rem; /* 80% of original 0.5rem */
    margin-bottom: 1.6rem; /* 80% of original 2rem */
  }
}