.wow-card {
  background: linear-gradient(145deg, #0d1117, #161b22);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  padding: 20px;
  max-width: 350px;
  color: #c9d1d9;
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin: 20px auto;
  border: 1px solid #30363d;
  transition: all 0.3s ease-in-out;

  .wow-card-header {
    margin-bottom: 15px;
    position: relative;

    h2 {
      font-size: 24px;
      margin: 0;
      padding: 0;
      padding-bottom: 10px;
    }

    .faction-badge {
      position: absolute;
      top: 10px;
      right: 15px;
      padding: 5px 10px;
      background-color: #3b64a5; /* Blue for Alliance */
      color: white;
      border-radius: 8px;
      font-size: 12px;
      font-weight: bold;
    }
  }

  .wow-card-body {
    .race-class-info {
      margin-bottom: 15px;

      span {
        display: block;
        font-size: 18px;
        margin: 5px 0;
      }

      strong {
        color:  #c9d1d9;
      }

      i {
        margin-left: 5px;
      }
    }

    .level-progress {
      margin-top: 10px;
      span {
        display: block;
        font-size: 18px;
      }

      //.progress-bar {
      //  width: 100%;
      //  height: 10px;
      //  background-color: #3a3f44;
      //  border-radius: 5px;
      //  margin-top: 5px;
      //  overflow: hidden;
      //}

      //.progress {
      //  height: 100%;
      //  background-color: #58a6ff; /* Default color (Alliance) */
      //  border-radius: 5px;
      //}
    }
  }

  &.alliance {
    background: linear-gradient(145deg, #2e518b, #3b64a5);
    border: 1px solid #0077ff;

    h2 {
      color: #58a6ff;
    }

    .faction-badge {
      background-color: #0077ff;
    }

    //.progress-bar .progress {
    //  background-color: #58a6ff;
    //}
  }

  &.horde {
    background: linear-gradient(145deg, #7a0b0b, #a51b1b);
    border: 1px solid #ff4500;

    h2 {
      color: #ff6666;
    }

    .faction-badge {
      background-color: #ff4500;
    }

    //.progress-bar .progress {
    //  background-color: #ff6666;
    //}
  }

  &:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.02);
  }
}


.progress-bar {
  position: relative;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  transition: width 0.3s ease;
}

.progress-label {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-weight: bold;
}

.level-1-10 {
  height: 10px;
  background-color: #ffcccc; /* Light red */
}

.level-10-20 {
  height: 12px;
  background-color: #ff9999; /* Red */
}

.level-20-30 {
  height: 14px;
  background-color: #ffcc99; /* Light orange */
}

.level-30-40 {
  height: 16px;
  background-color: #ffb366; /* Orange */
}

.level-40-50 {
  height: 18px;
  background-color: #ffcc66; /* Yellow-orange */
}

.level-50-60 {
  height: 20px;
  background-color: #ffff99; /* Light yellow */
}

.level-60-70 {
  height: 22px;
  background-color: #ccffcc; /* Light green */
}

.level-70-80 {
  height: 24px;
  background-color: #99ff99; /* Green */
}

.level-80-90 {
  height: 26px;
  background-color: #66ff66; /* Darker green */
}

.level-90-100 {
  height: 28px;
  background-color: #99ccff; /* Light blue */
}
