/* SVG icon system */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.feature-icon .icon,
.trust-icon .icon {
  width: 24px;
  height: 24px;
}

.feature-icon {
  font-size: 0;
}

.trust-icon {
  font-size: 0;
}

.trust-icon .icon {
  color: var(--primary);
}

.course-pill,
.card-meta span,
.meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.pill-icon {
  opacity: 0.85;
}

.badge-icon-only {
  padding: 0.5rem;
  line-height: 0;
}

.badge-icon-only .icon {
  color: inherit;
}

.btn .icon {
  margin-inline: -0.1em;
}

.link-arrow::after {
  content: '';
  width: 1em;
  height: 1em;
  background: currentColor;
  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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--transition);
}

[dir="rtl"] .link-arrow::after {
  transform: scaleX(-1);
}

.link-arrow:hover::after {
  transform: translateX(2px);
}

[dir="rtl"] .link-arrow:hover::after {
  transform: scaleX(-1) translateX(2px);
}

.btn-back .icon {
  margin-inline-end: 0.25em;
}

[dir="rtl"] .btn-back .icon {
  transform: scaleX(-1);
}

.faq-icon {
  font-size: 0;
}

.faq-icon .icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform var(--transition), color var(--transition);
}

.faq-item.open .faq-icon .icon {
  transform: rotate(45deg);
  color: var(--primary);
}

.instructor-stats li::before,
.assessment-benefits li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--primary);
  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%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  -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%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.assessment-benefits li::before {
  content: '';
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--primary-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  mask: none;
  -webkit-mask: none;
}

.feature-icon .icon {
  color: var(--primary);
}

.feature-icon-gold .icon {
  color: #92600a;
}

.feature-icon-navy .icon {
  color: #334155;
}

.btn-back,
.btn-next {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.btn-icon-only {
  padding: 0.5rem;
  line-height: 0;
}

.portal-hint-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--primary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.portal-hint-link:hover {
  text-decoration: underline;
}