/* Site-wide SVG icon system (replaces emoji / text symbols) */

.site-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  color: inherit;
}

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

.site-icon-box {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.site-icon--star {
  color: #f59e0b;
}

.site-icon-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.site-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Feature lists — check icon via CSS mask */
.site-list-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.site-list-check li::before {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12rem;
  flex-shrink: 0;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.package-features.site-list-check li::before,
.plan-features.site-list-check li::before {
  margin-top: 0.2rem;
}

.about-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.about-check .site-icon {
  color: var(--color-primary);
}

.service-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.service-feature-item .site-icon {
  color: var(--color-primary);
  margin-top: 0.1rem;
}

.marquee-dot-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35rem;
  color: var(--color-primary);
}

.blog-empty-icon,
.portal-notif-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 16px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.portfolio-star-empty .site-icon {
  opacity: 0.25;
}

html[data-theme="dark"] .site-icon-box,
html[data-theme="dark"] .blog-empty-icon,
html[data-theme="dark"] .portal-notif-empty-icon {
  background: color-mix(in srgb, var(--color-primary) 16%, #000000);
  border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
  color: var(--color-primary);
}