/* ============================================================
   PIGLIN SMP STORE – CSS ICON SYSTEM
   All icons are pure CSS + inline SVG. No emoji used.
   ============================================================ */

/* ── BASE ICON WRAPPER ── */
.sea-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.sea-icon svg {
  display: block;
  z-index: 1;
  position: relative;
}
.sea-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
  opacity: 0.08;
  z-index: 0;
}

/* ── KEY ICON SIZES ── */
.sea-icon-sm  { width: 36px;  height: 36px;  border-radius: 8px; }
.sea-icon-md  { width: 56px;  height: 56px;  border-radius: 12px; }
.sea-icon-lg  { width: 80px;  height: 80px;  border-radius: 18px; }
.sea-icon-xl  { width: 100px; height: 100px; border-radius: 22px; }

/* ── THEME VARIANTS (nether / piglin palette) ── */
.icon-ocean     { background: linear-gradient(135deg, #3d1208, #6b2010); border: 1px solid rgba(255,120,50,0.35); box-shadow: 0 0 20px rgba(255,80,20,0.22); }
.icon-coral     { background: linear-gradient(135deg, #5e1f0b, #8a3a0e); border: 1px solid rgba(255,120,60,0.35); box-shadow: 0 0 20px rgba(255,100,40,0.2); }
.icon-prismarine{ background: linear-gradient(135deg, #3d2800, #6b4800); border: 1px solid rgba(255,200,60,0.35); box-shadow: 0 0 20px rgba(255,180,40,0.22); }
.icon-abyssal   { background: linear-gradient(135deg, #2a0808, #4a1010); border: 1px solid rgba(220,60,60,0.35); box-shadow: 0 0 20px rgba(180,40,40,0.22); }
.icon-legendary { background: linear-gradient(135deg, #3d2900, #6b4800); border: 1px solid rgba(255,215,0,0.4); box-shadow: 0 0 24px rgba(255,215,0,0.25); }
.icon-seashell  { background: linear-gradient(135deg, #3a2010, #5c3018); border: 1px solid rgba(255,180,120,0.35); box-shadow: 0 0 20px rgba(255,140,80,0.15); }
.icon-coralrank { background: linear-gradient(135deg, #4e1a0e, #7a2d18); border: 1px solid rgba(255,140,105,0.35); box-shadow: 0 0 20px rgba(255,100,60,0.15); }
.icon-poseidon  { background: linear-gradient(135deg, #4a0a0a, #7a1515); border: 1px solid rgba(255,80,50,0.4); box-shadow: 0 0 20px rgba(255,60,30,0.22); }
.icon-mermaid   { background: linear-gradient(135deg, #3d0b20, #6a1535); border: 1px solid rgba(255,100,140,0.4); box-shadow: 0 0 20px rgba(220,60,100,0.2); }
.icon-mermaidp  { background: linear-gradient(135deg, #4a0b30, #7a1560); border: 1px solid rgba(255,120,180,0.4); box-shadow: 0 0 24px rgba(220,60,160,0.25); }
.icon-patron    { background: linear-gradient(135deg, #3d2a00, #6b4a00); border: 1px solid rgba(255,215,0,0.5); box-shadow: 0 0 28px rgba(255,215,0,0.3); }
.icon-unban     { background: linear-gradient(135deg, #1a3a1a, #2d5c2d); border: 1px solid rgba(80,200,120,0.35); box-shadow: 0 0 20px rgba(80,200,120,0.15); }
.icon-unmute    { background: linear-gradient(135deg, #3a1508, #5c2810); border: 1px solid rgba(255,140,80,0.35); box-shadow: 0 0 20px rgba(255,100,50,0.15); }
.icon-bundle-sm { background: linear-gradient(135deg, #2a1208, #3d1a0c); border: 1px solid rgba(255,150,50,0.3); box-shadow: 0 0 18px rgba(255,120,30,0.12); }
.icon-bundle-md { background: linear-gradient(135deg, #3a1808, #5c2810); border: 1px solid rgba(255,120,40,0.35); box-shadow: 0 0 22px rgba(255,100,30,0.18); }
.icon-bundle-lg { background: linear-gradient(135deg, #40330a, #5c4a0a); border: 1px solid rgba(255,215,0,0.4); box-shadow: 0 0 26px rgba(255,215,0,0.2); }

/* ── HOVER GLOW BOOST ── */
.product-card:hover .sea-icon,
.key-bundle-page-card:hover .sea-icon,
.rank-card:hover .sea-icon,
.punishment-card:hover .sea-icon {
  box-shadow: 0 0 36px rgba(255,140,50,0.2);
  transform: scale(1.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ── STEP CARD ALIGNMENT ── */
.step-card .sea-icon {
  margin: 0 auto 16px;
}