/* ============================================================
   WCAG 2.1 Color Contrast Checker Styling - Scenic IT Solutions
   ============================================================ */

/* Score Header Box */
.cc-score-box {
  background: #0d0d12;
  border: 2px solid #26262e;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  margin-bottom: 30px;
}

.cc-ratio-val {
  font-size: 48px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

/* Compliance Badges Grid */
.cc-compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.cc-badge-card {
  background: #07070a;
  border: 1px solid #24242e;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.cc-badge-title {
  font-size: 13px;
  font-weight: 500;
  color: #aaaaaa;
  margin-bottom: 8px;
}

.cc-badge-status {
  font-size: 16px;
  font-weight: 700;
}

.cc-status-pass { color: #27ae60; }
.cc-status-fail { color: #e74c3c; }

/* Interactive Typography Preview Stage */
.cc-preview-stage {
  border-radius: 18px;
  padding: 35px;
  margin-bottom: 25px;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-preview-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.cc-preview-text {
  font-size: 16px;
  line-height: 1.6;
}

.cc-hex-input {
  margin-top: 10px !important;
}

.cc-target-label {
  font-size: 14px !important;
  color: #aaaaaa !important;
}