/* ═══════════════════════════════════════════════════
   SANGANEB LIMO — Icon System
   Usage: <svg class="icon icon-md"><use href="/icons.svg#icon-plane"/></svg>
   No emoji. No icon font. No CDN. Self-hosted SVG sprite.
═══════════════════════════════════════════════════ */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Sizes ── */
.icon-xs  { width: 14px; height: 14px; }
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 40px; height: 40px; }
.icon-3xl { width: 48px; height: 48px; }

/* ── Colour variants ── */
.icon-gold     { color: var(--gold); }
.icon-gold-dk  { color: var(--gold-dk); }
.icon-muted    { color: var(--ink-3); }
.icon-ink      { color: var(--ink); }
.icon-white    { color: var(--white); }
.icon-on-dark  { color: rgba(255,255,255,.55); }

/* ── Icon in a container box (service cards, why cards, etc.) ── */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  color: var(--gold-dk);
  transition: background .2s, border-color .2s, color .2s;
}
.icon-box-sm  { width: 36px; height: 36px; }
.icon-box-md  { width: 44px; height: 44px; }
.icon-box-lg  { width: 52px; height: 52px; }
.icon-box-xl  { width: 60px; height: 60px; }

/* Hover state when icon-box is inside a card with :hover */
.svc-card:hover    .icon-box,
.fleet-card:hover  .icon-box,
.value-card:hover  .icon-box,
.why-item:hover    .icon-box {
  background: var(--gold-faint);
  border-color: rgba(184,154,90,.3);
  color: var(--gold);
}

/* ── Inline icon alongside text (trust strips, channel rows, etc.) ── */
.icon-inline {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.icon-inline .icon { flex-shrink: 0; }

/* ── Review star row ── */
.star-row {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--gold);
}
.star-row .icon { width: 14px; height: 14px; }

/* ── Channel icon (contact page) ── */
.channel-icon-wrap {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  color: var(--gold-dk);
  transition: background .2s, border-color .2s;
}
.channel:hover .channel-icon-wrap {
  background: var(--gold-faint);
  border-color: rgba(184,154,90,.3);
}

/* ── Breadcrumb separator ── */
.breadcrumb-sep {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: rgba(255,255,255,.3);
  vertical-align: middle;
  margin: 0 .1rem;
}

/* ── Form field prefix icon ── */
.field-icon-wrap {
  position: relative;
}
.field-icon-wrap .icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  z-index: 1;
}
.field-icon-wrap input,
.field-icon-wrap select {
  padding-left: 2.6rem;
}

/* ── Filled star (reviews) — overrides stroke-based default ── */
.icon-star-filled {
  fill: currentColor;
  stroke: none;
}