/**
 * VPR 7 - Task 11: RGB Color Model
 * Специфичные стили для задания 11 (Цветовая модель RGB)
 */

/* Импорт общих стилей */
@import url("vpr7-common.css");

/* ============================================
   Task Type Badge
   ============================================ */
.task-type {
  display: inline-block;
  background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ============================================
   Options Grid
   ============================================ */
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 15px 0;
}

.option-btn {
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.option-btn:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.option-btn.selected {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.2);
}

.option-btn.correct {
  border-color: #38ef7d;
  background: rgba(17, 153, 142, 0.3);
}

.option-btn.incorrect {
  border-color: #f45c43;
  background: rgba(235, 51, 73, 0.3);
}

/* ============================================
   Color Mixer
   ============================================ */
.color-mixer {
  background: #f0f4f8;
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
}

.mixer-display {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.mixer-color-box {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  border: 3px solid #333;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mixer-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-label {
  min-width: 100px;
  font-size: 0.85rem;
  font-weight: 500;
}

.slider-label.red {
  color: #e74c3c;
}
.slider-label.green {
  color: #27ae60;
}
.slider-label.blue {
  color: #3498db;
}

.slider-input {
  flex: 1;
  height: 8px;
  -webkit-appearance: none;
  border-radius: 4px;
  outline: none;
}

.slider-input.red {
  background: linear-gradient(to right, #000, #e74c3c);
}
.slider-input.green {
  background: linear-gradient(to right, #000, #27ae60);
}
.slider-input.blue {
  background: linear-gradient(to right, #000, #3498db);
}

.slider-value {
  min-width: 35px;
  text-align: right;
  font-weight: bold;
}

.mixer-info {
  text-align: center;
  margin-top: 10px;
}

.rgb-value {
  font-family: "Consolas", monospace;
  font-size: 0.9rem;
  color: #555;
}

.color-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

/* ============================================
   Basic Colors Table
   ============================================ */
.basic-colors {
  margin-top: 15px;
}

.basic-colors h6 {
  color: #333;
  margin-bottom: 10px;
}

.color-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.color-table th,
.color-table td {
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.color-table th {
  background: #667eea;
  color: white;
}

.color-table td {
  background: white;
}

.color-cell {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  border: 1px solid #333;
}