/* Rudocode brand SVG icon system */
.rc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rc-icon-color, #BF1914);
  width: var(--rc-icon-size, 24px);
  height: var(--rc-icon-size, 24px);
  transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

.rc-icon svg,
.rc-icon .rc-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
}

.rc-icon-box {
  width: calc(var(--rc-icon-size, 24px) + 20px);
  height: calc(var(--rc-icon-size, 24px) + 20px);
  background: rgba(191, 25, 20, 0.08);
  border: 1px solid rgba(191, 25, 20, 0.15);
  border-radius: 12px;
}

.rc-icon-box:hover,
a:hover .rc-icon-box,
button:hover .rc-icon-box,
.mm-service-card:hover .rc-icon,
.srv-sub-item:hover .rc-icon,
.feature-card:hover .rc-icon-box,
.benefit-card:hover .rc-icon-box,
.whats-new-item:hover .rc-icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 8px rgba(191, 25, 20, 0.35));
  color: #E8281E;
}

.rc-icon--on-dark {
  color: #fff;
  --rc-icon-color: #fff;
}

.rc-icon--muted {
  color: var(--clr-muted);
  --rc-icon-color: var(--clr-muted);
}

.rc-icon--white {
  color: #fff;
  --rc-icon-color: #fff;
}

/* Context wrappers */
.srv-sub-icon .rc-icon,
.mm-sub-icon .rc-icon,
.mm-cat-icon .rc-icon,
.mm-service-icon .rc-icon,
.mm-panel-head-icon .rc-icon,
.srv-tab-icon .rc-icon {
  --rc-icon-size: 18px;
}

.mm-featured-icon .rc-icon {
  --rc-icon-size: 28px;
}

.srv-panel-icon .rc-icon,
.build-icon .rc-icon {
  --rc-icon-size: 32px;
}

.srv-icon-badge .rc-icon {
  --rc-icon-size: 40px;
}

.feature-icon-wrap .rc-icon {
  --rc-icon-size: 28px;
}

.benefit-card-icon .rc-icon,
.whats-new-item-icon .rc-icon {
  --rc-icon-size: 26px;
}

.service-detail-visual .rc-icon {
  --rc-icon-size: 56px;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

.process-step-icon .rc-icon {
  --rc-icon-size: 22px;
}

/* Fixed-size wrappers — prevent layout shift */
.cd-icon .rc-icon,
.qc-icon .rc-icon,
.perk-icon .rc-icon,
.value-icon .rc-icon,
.success-icon .rc-icon,
.file-upload-icon .rc-icon,
.whats-new-item-icon .rc-icon,
.stat-icon .rc-icon,
.build-icon .rc-icon,
.tech-card-icon .rc-icon,
.sub-related-icon .rc-icon,
.launch-badge .rc-icon,
.fintech-popup-badge .rc-icon {
  flex-shrink: 0;
}

/* Phase 2 card hover polish */
.value-card:hover .rc-icon-box,
.perk-card:hover .rc-icon-box,
.sub-related-card:hover .rc-icon-box,
.tech-card:hover .rc-icon-box,
.whats-new-item:hover .rc-icon-box,
.mm-service-card:hover .rc-icon-box,
.srv-sub-item:hover .rc-icon-box,
.feature-card:hover .rc-icon-box,
.benefit-card:hover .rc-icon-box {
  transform: scale(1.06);
  filter: drop-shadow(0 0 8px rgba(191, 25, 20, 0.35));
  color: var(--rc-icon-color-hover, #E8281E);
}

.value-card .rc-icon,
.perk-card .rc-icon,
.cd-icon .rc-icon,
.qc-icon .rc-icon {
  transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

.value-card:hover .rc-icon:not(.rc-icon-box),
.perk-card:hover .rc-icon:not(.rc-icon-box),
.cd-icon:hover .rc-icon,
.qc-icon:hover .rc-icon,
.industry-tag:hover .rc-icon {
  transform: scale(1.08);
  color: #E8281E;
  filter: drop-shadow(0 0 6px rgba(191, 25, 20, 0.3));
}

.launch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.marquee-item .rc-icon {
  --rc-icon-size: 16px;
}

.srv-emoji .rc-icon {
  --rc-icon-size: 48px;
}

.success-icon .rc-icon {
  --rc-icon-size: 48px;
}

.other-tech-icon .rc-icon {
  --rc-icon-size: 28px;
}

.feature-highlight-tag .rc-icon {
  --rc-icon-size: 12px;
}

/* Inline UI chrome (buttons, nav, meta) */
.btn .rc-icon,
.blog-read-more .rc-icon,
.mm-caret .rc-icon,
.srv-tab-arrow.rc-icon,
.back-to-top .rc-icon {
  --rc-icon-size: 16px;
}

.btn-primary .rc-icon,
.back-to-top .rc-icon {
  color: #fff;
  --rc-icon-color: #fff;
}

.feature-check .rc-icon {
  --rc-icon-size: 14px;
  color: #fff;
  --rc-icon-color: #fff;
}

.rc-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-brand-size, 16px);
  height: var(--rc-brand-size, 16px);
  flex-shrink: 0;
  color: inherit;
}

.rc-brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.social-btn .rc-brand-icon,
.social-btn .rc-icon {
  --rc-brand-size: 16px;
  --rc-icon-size: 16px;
  color: inherit;
}

.rc-icon-spin {
  animation: rc-icon-spin 1s linear infinite;
}

@keyframes rc-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .rc-icon-box {
    width: calc(var(--rc-icon-size, 24px) + 16px);
    height: calc(var(--rc-icon-size, 24px) + 16px);
  }
}