/*
 * BetLab Icon System — Lucide SVG Sprite
 * ========================================
 * Usage:
 *   <svg class="icon icon-sm icon-primary">
 *     <use href="/assets/templates/basic/images/lucide-sprite.svg#lc-home"></use>
 *   </svg>
 *
 * Available IDs: lc-home, lc-search, lc-bell, lc-user, lc-settings,
 *   lc-logout, lc-deposit, lc-withdraw, lc-bet, lc-trophy,
 *   lc-chart-line, lc-chart-bar, lc-wallet, lc-coins, lc-credit-card,
 *   lc-lock, lc-shield, lc-check-circle, lc-x-circle, lc-alert-triangle,
 *   lc-info, lc-arrow-right, lc-arrow-left, lc-arrow-up, lc-arrow-down,
 *   lc-chevron-right, lc-chevron-left, lc-chevron-up, lc-chevron-down,
 *   lc-menu, lc-x, lc-plus, lc-minus, lc-edit, lc-trash, lc-copy,
 *   lc-download, lc-upload, lc-share, lc-eye, lc-eye-off, lc-star,
 *   lc-heart, lc-globe, lc-mail, lc-phone, lc-calendar, lc-clock,
 *   lc-filter, lc-sort, lc-grid, lc-list, lc-refresh, lc-sun, lc-moon,
 *   lc-zap, lc-fire, lc-gift, lc-percent, lc-trending-up, lc-trending-down
 */

/* ─── BASE ICON ELEMENT ─── */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
  width: 20px;
  height: 20px;
  /* Ensure SVG fills the element */
  overflow: visible;
}

.icon svg,
.icon use {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}

/* When the icon IS the svg element */
svg.icon {
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
  overflow: visible;
}

/* ─── SIZE VARIANTS ─── */

.icon-xs,
svg.icon-xs  { width: 14px; height: 14px; }

.icon-sm,
svg.icon-sm  { width: 16px; height: 16px; }

/* .icon / svg.icon = 20px (default, already set above) */

.icon-md,
svg.icon-md  { width: 24px; height: 24px; }

.icon-lg,
svg.icon-lg  { width: 28px; height: 28px; }

.icon-xl,
svg.icon-xl  { width: 32px; height: 32px; }

.icon-2xl,
svg.icon-2xl { width: 40px; height: 40px; }

.icon-3xl,
svg.icon-3xl { width: 48px; height: 48px; }

/* ─── COLOR VARIANTS ─── */

.icon-primary  { color: var(--prem-primary); }
.icon-accent   { color: var(--prem-accent); }
.icon-muted    { color: var(--prem-text-muted); }
.icon-secondary { color: var(--prem-text-secondary); }
.icon-danger   { color: var(--prem-danger); }
.icon-warning  { color: var(--prem-warning); }
.icon-info     { color: var(--prem-info); }
.icon-success  { color: var(--prem-accent); }
.icon-white    { color: #fff; }
.icon-gold     { color: var(--prem-warning); }
.icon-gradient {
  /* For use inside a gradient-text context */
  background: var(--prem-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── ICON BUTTON ─── */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--prem-radius-sm);
  background: var(--prem-surface-3);
  border: 1px solid var(--prem-border);
  color: var(--prem-text-secondary);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  outline: none;
  padding: 0;
  font-size: 0; /* hide any text fallback */
  position: relative;
  overflow: hidden;
}

.icon-btn:hover {
  background: var(--prem-surface-4);
  border-color: var(--prem-primary);
  color: var(--prem-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.icon-btn:active {
  transform: scale(0.95);
  box-shadow: none;
}

.icon-btn:focus-visible {
  outline: 2px solid var(--prem-primary-light);
  outline-offset: 2px;
}

.icon-btn:disabled,
.icon-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon button size modifiers */
.icon-btn--xs { width: 26px; height: 26px; border-radius: 5px; }
.icon-btn--sm { width: 30px; height: 30px; border-radius: 6px; }
.icon-btn--md { width: 40px; height: 40px; border-radius: 9px; }
.icon-btn--lg { width: 48px; height: 48px; border-radius: var(--prem-radius); }

/* Icon button color variants */
.icon-btn--primary {
  background: var(--prem-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--prem-shadow-primary);
}
.icon-btn--primary:hover {
  box-shadow: 0 6px 20px rgba(124,58,237,0.5);
  border-color: transparent;
  color: #fff;
}

.icon-btn--accent {
  background: var(--prem-gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--prem-shadow-accent);
}
.icon-btn--accent:hover {
  box-shadow: 0 6px 20px rgba(16,185,129,0.4);
  border-color: transparent;
  color: #fff;
}

.icon-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--prem-text-muted);
}
.icon-btn--ghost:hover {
  background: var(--prem-surface-2);
  border-color: var(--prem-border-light);
  color: var(--prem-text);
}

.icon-btn--danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--prem-danger-light);
}
.icon-btn--danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: var(--prem-danger);
  color: #fff;
}

/* Rounded icon button */
.icon-btn--round {
  border-radius: var(--prem-radius-full);
}

/* ─── ICON + TEXT PAIRING ─── */

.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--prem-text-secondary);
}

.icon-label .icon { flex-shrink: 0; }

/* ─── ICON BADGE (notification dot) ─── */

.icon-wrap {
  position: relative;
  display: inline-flex;
}

.icon-wrap .icon-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prem-danger);
  border: 1.5px solid var(--prem-surface-2);
}

.icon-wrap .icon-dot--accent {
  background: var(--prem-accent);
  box-shadow: 0 0 5px var(--prem-accent);
}

.icon-wrap .icon-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  background: var(--prem-danger);
  border: 1.5px solid var(--prem-surface-2);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ─── ICON SPIN & ANIMATION ─── */

.icon-spinning { animation: spin 1s linear infinite; }
.icon-pulse    { animation: premPulse 1.5s ease-in-out infinite; }

/* ─── ICON IN SPECIFIC CONTEXTS ─── */

/* Inside form inputs */
.input-icon-wrap {
  position: relative;
}
.input-icon-wrap .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--prem-text-muted);
}
.input-icon-wrap .icon--left  { left: 12px; }
.input-icon-wrap .icon--right { right: 12px; }
.input-icon-wrap .prem-input.has-icon-left  { padding-left: 40px; }
.input-icon-wrap .prem-input.has-icon-right { padding-right: 40px; }

/* Inside buttons — align with text */
.btn .icon,
.btn--base .icon,
.btn--primary .icon,
.btn--secondary .icon {
  vertical-align: middle;
}

/* Nav links */
.nav-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--prem-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.18s ease;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--prem-radius-sm);
}
.nav-icon-link:hover { color: var(--prem-text); background: var(--prem-surface-2); }
.nav-icon-link.active { color: var(--prem-primary-light); background: rgba(124,58,237,0.08); }

/* ─── ICON LIST ─── */

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--prem-text-secondary);
  line-height: 1.5;
}
.icon-list li .icon { flex-shrink: 0; margin-top: 2px; }
.icon-list--check li .icon { color: var(--prem-accent); }
.icon-list--x     li .icon { color: var(--prem-danger); }