/* Colorful icon tiles — feature, step, safety, campaign strips */

.feature-icon,
.step-icon,
.safety-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--icon-tile-bg, rgba(255, 204, 0, 0.16));
  color: var(--icon-tile-fg, #c99200);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.feature-icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  margin-bottom: 0.9rem;
}

.step-icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  margin-bottom: 1rem;
}

.safety-icon {
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 12px;
}

.feature-icon svg,
.step-icon svg,
.safety-icon svg {
  width: 100%;
  height: 100%;
}

/* Feature grid — 8-color rotation */
.features-grid .feature-card:nth-child(8n + 1) .feature-icon {
  --icon-tile-bg: rgba(255, 149, 0, 0.18);
  --icon-tile-fg: #e68600;
}

.features-grid .feature-card:nth-child(8n + 2) .feature-icon {
  --icon-tile-bg: rgba(52, 152, 219, 0.18);
  --icon-tile-fg: #2471a3;
}

.features-grid .feature-card:nth-child(8n + 3) .feature-icon {
  --icon-tile-bg: rgba(46, 204, 113, 0.18);
  --icon-tile-fg: #1e8449;
}

.features-grid .feature-card:nth-child(8n + 4) .feature-icon {
  --icon-tile-bg: rgba(155, 89, 182, 0.18);
  --icon-tile-fg: #7d3c98;
}

.features-grid .feature-card:nth-child(8n + 5) .feature-icon {
  --icon-tile-bg: rgba(231, 76, 60, 0.16);
  --icon-tile-fg: #c0392b;
}

.features-grid .feature-card:nth-child(8n + 6) .feature-icon {
  --icon-tile-bg: rgba(26, 188, 156, 0.18);
  --icon-tile-fg: #117a65;
}

.features-grid .feature-card:nth-child(8n + 7) .feature-icon {
  --icon-tile-bg: rgba(255, 204, 0, 0.22);
  --icon-tile-fg: #b8860b;
}

.features-grid .feature-card:nth-child(8n + 8) .feature-icon {
  --icon-tile-bg: rgba(236, 72, 153, 0.16);
  --icon-tile-fg: #be185d;
}

/* How-it-works steps */
.steps .step-card:nth-child(1) .step-icon {
  --icon-tile-bg: rgba(52, 152, 219, 0.2);
  --icon-tile-fg: #2471a3;
}

.steps .step-card:nth-child(2) .step-icon {
  --icon-tile-bg: rgba(255, 204, 0, 0.24);
  --icon-tile-fg: #b8860b;
}

.steps .step-card:nth-child(3) .step-icon {
  --icon-tile-bg: rgba(46, 204, 113, 0.2);
  --icon-tile-fg: #1e8449;
}

/* Safety list */
.safety-list li:nth-child(1) .safety-icon {
  --icon-tile-bg: rgba(52, 152, 219, 0.18);
  --icon-tile-fg: #2471a3;
}

.safety-list li:nth-child(2) .safety-icon {
  --icon-tile-bg: rgba(46, 204, 113, 0.18);
  --icon-tile-fg: #1e8449;
}

.safety-list li:nth-child(3) .safety-icon {
  --icon-tile-bg: rgba(155, 89, 182, 0.18);
  --icon-tile-fg: #7d3c98;
}

/* Smart photo campaign strip */
.smart-photo-strip__icon {
  background: rgba(255, 120, 0, 0.28);
  color: #c0392b;
  box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.35);
}

html[data-theme="light"] .feature-icon,
html[data-theme="light"] .step-icon,
html[data-theme="light"] .safety-icon {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .smart-photo-strip__icon {
  background: #ffd666;
  color: #d35400;
}

/* City download vehicle thumbs */
.city-download__icon--rider {
  background: rgba(255, 180, 0, 0.08);
  border-radius: 12px;
  padding: 0.35rem;
}

.city-download__icon--driver {
  background: rgba(41, 128, 185, 0.08);
  border-radius: 12px;
  padding: 0.35rem;
}