/* SVG icon system — LEGION */
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.icon-flag {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Header navigation */
.header-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.header-nav .nav-ico {
  display: inline-flex;
  line-height: 0;
  opacity: 0.75;
  transition: opacity 0.15s, color 0.15s;
}

.header-nav a:hover .nav-ico,
.header-nav a.nav-active .nav-ico {
  opacity: 1;
}

.header-nav .nav-ico .icon {
  width: 14px;
  height: 14px;
}

.header-nav a.nav-cup .nav-ico .icon {
  color: #f0b429;
}

.header-nav a.nav-active .nav-ico .icon {
  color: var(--brand-light);
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.lang-flag {
  display: inline-flex;
  line-height: 0;
}

.lang-chevron {
  display: inline-flex;
  line-height: 0;
  opacity: 0.6;
}

.lang-chevron .icon {
  width: 10px;
  height: 10px;
}

.lang-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-menu .icon-flag {
  flex-shrink: 0;
}

.header-wallet-topup {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.header-wallet-topup .icon {
  width: 12px;
  height: 12px;
  color: #c9a227;
}

.header-profile-menu a,
.header-profile-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-profile-menu .icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Buttons */
.btn-play-wrap,
.btn-play,
.btn-play-card {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.btn-play-wrap .icon-play,
.btn-play .icon-play,
.btn-play-card .icon-play {
  width: 14px;
  height: 14px;
  color: var(--brand-light);
}

.btn-fill .btn-play-wrap .icon-play {
  color: #fff;
}

.btn-icon-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-copy .icon {
  width: 18px;
  height: 18px;
}

.btn-icon-copy.copied .icon {
  color: var(--brand-light);
}

/* Hero scroll */
.hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.hero-scroll-icon .icon {
  width: 14px;
  height: 14px;
  color: var(--brand-light);
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

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

/* Page heroes */
.page-hero--with-icon {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.page-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 0;
}

.page-hero-icon .icon {
  width: 26px;
  height: 26px;
  color: var(--brand-light);
}

.page-hero-icon--gold {
  background: rgba(240, 180, 41, 0.1);
  border-color: rgba(240, 180, 41, 0.25);
}

.page-hero-icon--gold .icon {
  color: #f0b429;
}

/* Search fields */
.search-field-icon {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
}

.search-field-icon .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.search-field:focus-within .search-field-icon .icon {
  color: var(--brand-light);
}

/* Shop search */
.shop-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shop-search-icon {
  position: absolute;
  left: 0.55rem;
  display: inline-flex;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.shop-search-icon .icon {
  width: 14px;
  height: 14px;
  color: #666;
}

.shop-search:focus-within .shop-search-icon .icon {
  color: #e8882e;
}

/* Page sidebar (FAQ) */
.page-sidebar a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.page-sidebar-ico {
  display: inline-flex;
  line-height: 0;
  opacity: 0.65;
}

.page-sidebar a.is-active .page-sidebar-ico,
.page-sidebar a:hover .page-sidebar-ico {
  opacity: 1;
}

.page-sidebar-ico .icon {
  width: 18px;
  height: 18px;
}

.page-sidebar a.is-active .page-sidebar-ico .icon {
  color: var(--brand-light);
}

/* Features / FAQ */
.feature-icon .icon {
  width: 28px;
  height: 28px;
  color: var(--brand);
}

.faq-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--brand);
}

.faq-chevron .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron .icon {
  transform: rotate(90deg);
}

.clan-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.clan-card-meta .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.data-table th .table-cell-ico .icon {
  width: 14px;
  height: 14px;
}

/* Cabinet nav */
.cabinet-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.cabinet-nav-ico {
  display: inline-flex;
  line-height: 0;
  opacity: 0.7;
}

.cabinet-nav-btn.is-active .cabinet-nav-ico,
.cabinet-nav-btn:hover .cabinet-nav-ico {
  opacity: 1;
}

.cabinet-nav-ico .icon {
  width: 18px;
  height: 18px;
}

.cabinet-nav-btn.is-active .cabinet-nav-ico .icon {
  color: var(--brand-light);
}

.cabinet-nav-btn--promo .cabinet-nav-ico .icon {
  color: #c9a227;
}

.cabinet-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.cabinet-modal-close .icon {
  width: 20px;
  height: 20px;
}

/* Top-up modal icons */
.topup-section-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.topup-section-label > span:first-child {
  display: inline-flex;
  line-height: 0;
}

.topup-section-label .icon {
  width: 16px;
  height: 16px;
  color: var(--topup-teal, #2dd4bf);
}

.topup-pay-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topup-pay-icon-wrap .icon {
  width: 22px;
  height: 22px;
}

.topup-pay-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.topup-pay-hint > span:first-child {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.topup-pay-hint .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.topup-summary dt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.topup-summary dt > span {
  display: inline-flex;
  line-height: 0;
}

.topup-summary dt .icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.topup-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.topup-submit > span:first-child {
  display: inline-flex;
  line-height: 0;
}

.topup-submit .icon {
  width: 18px;
  height: 18px;
}

.topup-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.topup-modal-close .icon {
  width: 20px;
  height: 20px;
}