/* Lucide icons — shared across Test Switch pages */
.site-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
  color: currentColor;
}
.site-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  display: block;
}

.site-icon.inline { margin: 0 2px; }
.site-icon.white { color: #fff; }
.site-icon.pink { color: var(--pink-hot, #ec4899); }
.site-icon.purple { color: var(--purple, #9333ea); }
.site-icon.blue { color: #0088cc; }
.site-icon.green { color: var(--green, #10b981); }
.site-icon.amber { color: #d97706; }
.site-icon.indigo { color: #4f46e5; }
.site-icon.muted { color: var(--muted, #6b7280); }

/* Tinted icon wells — icon fills the inner area */
.icon-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #fdf2f8, #f3e8ff);
  color: #9333ea;
}
.icon-well > .site-icon,
.icon-well > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.icon-well.sm {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4f46e5;
}
.icon-well.md {
  width: 38px;
  height: 38px;
  padding: 9px;
}
.icon-well.lg {
  width: 52px;
  height: 52px;
  padding: 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(4px);
}
.icon-well.xl {
  width: 72px;
  height: 72px;
  padding: 14px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.15);
}

.icon-well.pink { background: linear-gradient(145deg, #fce7f3, #fdf2f8); color: #db2777; }
.icon-well.green { background: linear-gradient(145deg, #d1fae5, #ecfdf5); color: #059669; }
.icon-well.blue { background: linear-gradient(145deg, #dbeafe, #eff6ff); color: #2563eb; }
.icon-well.amber { background: linear-gradient(145deg, #fef3c7, #fffbeb); color: #d97706; }

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flow-trust-icon,
.flow-intro-icon,
.flow-section-art,
.flow-step-icon,
.flow-tip-left-icon,
.flow-telegram-box-icon,
.fb-icon,
.pt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.flow-trust-item .icon-well { margin-top: 1px; }

.flow-trust-bottom-item .icon-well {
  width: 44px;
  height: 44px;
  padding: 10px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fdf2f8, #ede9fe);
  color: #9333ea;
}

.flow-detail-icon-wrap {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3e8ff;
  color: #9333ea;
  flex-shrink: 0;
  line-height: 0;
}
.flow-detail-icon-wrap > .site-icon,
.flow-detail-icon-wrap > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.flow-plan-icon > .site-icon,
.flow-plan-icon > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.flow-pay-trust-cell .icon-well {
  width: 38px;
  height: 38px;
  padding: 9px;
  margin: 0 auto 6px;
  border-radius: 10px;
}

.btn-flow-next .site-icon,
.btn-next .site-icon,
.activate-tg-btn .site-icon {
  flex-shrink: 0;
}

.flow-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plan-footer-item,
.plan-trial-box,
.hint-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.plan-select-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.flow-sub-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-order-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.telegram-required-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.flow-secure,
.flow-pay-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.activate-urgency,
.activate-urgency-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.activate-urgency-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.banner-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}