/* ===============================================
   WORD COUNTER SPECIFIC STYLES
   Only styles specific to the word counter tool
   =============================================== */

/* ===============================================
   STATS SECTION - Word Counter Results
   =============================================== */
.stats-section {
  background: #fafafa;
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid #f0f0f0;
}

.stats-header {
  text-align: center;
  margin-bottom: 2rem;
}

.stats-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f0f0f;
  margin-bottom: 0.5rem;
}

.stats-subtitle {
  color: #525252;
  font-size: 14px;
}

/* ===============================================
   WORD COUNT DISPLAY - Main counter
   =============================================== */
.word-count-display {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem 0;
  background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

.main-count {
  font-size: 4rem;
  font-weight: 900;
  color: #0f0f0f;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-label {
  font-size: 1.25rem;
  color: #525252;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Additional stats removed - focusing only on word count */

/* ===============================================
   WORD COUNTER SPECIFIC RESPONSIVE DESIGN
   =============================================== */

/* Mobile adjustments for word counter - removed additional stats styles */
@media (max-width: 768px) {
  .main-count {
    font-size: 3rem;
  }

  .stats-section {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .main-count {
    font-size: 2.5rem;
  }
}

@media (max-width: 320px) {
  .main-count {
    font-size: 2rem;
  }

  .stats-section {
    padding: 1rem;
  }

  .word-count-display {
    padding: 1.5rem 0;
  }
}