/* =============================================================
   Orion DS — Icon Utility Layer (Lucide Icons)
   Depends on: tokens.css, components.css
   CDN: https://unpkg.com/lucide@latest
   Usage: <i data-lucide="icon-name" class="icon"></i>
   ============================================================= */

/* =============================================================
   1. BASE ICON STYLES
   ============================================================= */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: middle;
  line-height: 1;
}

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

/* -------------------------------------------------------------
   1.1 Sizes
   ------------------------------------------------------------- */

.icon--xs {
  font-size: var(--icon-size-xs);
}

.icon--sm {
  font-size: var(--icon-size-sm);
}

.icon--md {
  font-size: var(--icon-size-md);
}

.icon--lg {
  font-size: var(--icon-size-lg);
}

.icon--xl {
  font-size: var(--icon-size-xl);
}

.icon--2xl {
  font-size: var(--icon-size-2xl);
}

/* -------------------------------------------------------------
   1.2 Colors
   ------------------------------------------------------------- */

.icon--accent {
  color: var(--text-accent);
}

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

.icon--secondary {
  color: var(--text-secondary);
}

.icon--success {
  color: var(--feedback-success-fg);
}

.icon--error {
  color: var(--feedback-error-fg);
}

.icon--warning {
  color: var(--feedback-warning-fg);
}

/* -------------------------------------------------------------
   1.3 Inline
   ------------------------------------------------------------- */

.icon--inline {
  display: inline-flex;
  vertical-align: -0.125em;
  margin-inline: 0.15em;
}

/* =============================================================
   2. COMPONENT ICON INTEGRATION
   ============================================================= */

/* -------------------------------------------------------------
   2.1 Button (.btn)
   ------------------------------------------------------------- */

.btn .icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.btn--sm .icon {
  width: 1em;
  height: 1em;
}

.btn--lg .icon {
  width: 1.5em;
  height: 1.5em;
}

/* Icon-only button */
.btn--icon-only {
  padding: var(--spacing-3);
  gap: 0;
}

.btn--icon-only.btn--sm {
  padding: var(--spacing-2);
}

.btn--icon-only.btn--lg {
  padding: var(--spacing-4);
}

/* -------------------------------------------------------------
   2.2 Card (.card)
   ------------------------------------------------------------- */

.card__title .icon {
  width: 1.25em;
  height: 1.25em;
  color: var(--text-accent);
  vertical-align: -0.1em;
  margin-right: var(--spacing-2);
}

/* -------------------------------------------------------------
   2.3 Badge (.badge)
   ------------------------------------------------------------- */

.badge .icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.badge--sm .icon {
  width: 0.875em;
  height: 0.875em;
}

/* -------------------------------------------------------------
   2.4 Input Group (.input-group)
   ------------------------------------------------------------- */

.input-wrap .icon {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 1;
  transition: color var(--duration-fast) var(--easing-default);
}

.input-wrap .icon--leading {
  left: var(--spacing-3);
}

.input-wrap .icon--trailing {
  right: var(--spacing-3);
}

.input-wrap:has(.icon--leading) .input {
  padding-left: calc(var(--spacing-3) + 1.25em + var(--spacing-2));
}

.input-wrap:has(.icon--trailing) .input {
  padding-right: calc(var(--spacing-3) + 1.25em + var(--spacing-2));
}

.input:focus ~ .icon,
.input-wrap:focus-within .icon {
  color: var(--text-accent);
}

/* -------------------------------------------------------------
   2.5 Navbar (.navbar)
   ------------------------------------------------------------- */

.navbar .icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.navbar__link .icon {
  margin-right: var(--spacing-1);
}

.navbar__toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* -------------------------------------------------------------
   2.6 Stat (.stat__icon)
   ------------------------------------------------------------- */

.stat__icon .icon {
  width: 2rem;
  height: 2rem;
  color: var(--text-accent);
}

/* -------------------------------------------------------------
   2.7 FAQ Toggle (.faq-item__toggle)
   ------------------------------------------------------------- */

.faq-item__toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-accent);
  transition: transform var(--duration-normal) var(--easing-default);
}

.faq-item.is-open .faq-item__toggle .icon {
  transform: rotate(180deg);
}

/* -------------------------------------------------------------
   2.8 Testimonial Rating (.testimonial__rating)
   ------------------------------------------------------------- */

.testimonial__rating .icon {
  width: 1em;
  height: 1em;
  color: var(--color-feedback-warning);
}

.testimonial__rating .icon--filled {
  fill: var(--color-feedback-warning);
}

/* -------------------------------------------------------------
   2.9 Pricing Feature (.pricing-plan__feature)
   ------------------------------------------------------------- */

.pricing-plan__feature .icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-top: 0.2em;
}

.pricing-plan__feature .icon--check {
  color: var(--text-accent);
}

.pricing-plan__feature--disabled .icon {
  color: var(--text-secondary);
  opacity: 0.4;
}

/* Hide the default ::before pseudo when using icon */
.pricing-plan__feature:has(.icon)::before {
  display: none;
}

/* -------------------------------------------------------------
   2.10 Footer Social (.footer__social)
   ------------------------------------------------------------- */

.footer__social-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* -------------------------------------------------------------
   2.11 Smart Form Submit (.smart-form__submit)
   ------------------------------------------------------------- */

.smart-form__submit .icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--easing-default);
}

.smart-form__submit:hover:not(:disabled) .icon {
  transform: translateX(2px);
}

.smart-form__submit--loading .icon {
  visibility: hidden;
}

/* =============================================================
   3. ICON FEATURE CLASSES
   ============================================================= */

/* -------------------------------------------------------------
   3.1 Spin (loading)
   ------------------------------------------------------------- */

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

.icon--spin {
  animation: icon-spin var(--duration-slow) linear infinite;
}

/* -------------------------------------------------------------
   3.2 Pulse
   ------------------------------------------------------------- */

@keyframes icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.icon--pulse {
  animation: icon-pulse calc(var(--duration-slow) * 3) var(--easing-default) infinite;
}

/* -------------------------------------------------------------
   3.3 Bounce (on hover)
   ------------------------------------------------------------- */

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.icon--bounce:hover {
  animation: icon-bounce var(--duration-normal) var(--easing-bounce);
}