# Styling Guidelines for Amazon Extension

## Critical: CSS Override Strategy for Amazon Pages

When styling UI elements that will be injected into Amazon pages, **CSS files alone are NOT sufficient**. Amazon's stylesheets have high specificity and load after extension styles, overriding even `!important` rules.

### The Problem
- Amazon's CSS has higher specificity than extension CSS
- Amazon's stylesheets load after extension styles
- Even `!important` rules in CSS files can be overridden
- CSS variables defined in `:root` may not work on Amazon pages

### The Solution: Inline Styles via JavaScript

For critical visual styles (backgrounds, colors, borders, etc.), apply them directly via JavaScript using `element.style`:

```javascript
// ✅ CORRECT - Cannot be overridden by Amazon CSS
Object.assign(element.style, {
  background: '#0a0a0a',
  color: '#ffffff',
  padding: '2rem',
  borderRadius: '24px'
});

// ❌ WRONG - Will be overridden by Amazon CSS
// Relying only on CSS classes
element.className = 'my-styled-element';
```

### CSS Specificity Hierarchy (highest to lowest)
1. **Inline styles via JavaScript** (`element.style.property`) - HIGHEST
2. Inline styles in HTML (`style="..."`)
3. `!important` in CSS
4. ID selectors
5. Class selectors
6. Element selectors

### Implementation Pattern

Create helper methods in Manager classes:

```javascript
_applyInlineStyles(element) {
  Object.assign(element.style, {
    background: 'rgba(255, 255, 255, 0.05)',
    border: '1px solid rgba(255, 255, 255, 0.1)',
    borderRadius: '24px',
    // ... more styles
  });
}
```

### When to Use Inline Styles
- Container backgrounds and colors
- Text colors and fonts
- Borders and border-radius
- Padding and margins
- Any visual style that must be guaranteed

### When CSS Files Are Still Useful
- Animations and keyframes
- Pseudo-elements (::before, ::after)
- Media queries for responsive design
- Hover states (combine with JS event listeners)
- Complex selectors

### Example: Hover Effects with JavaScript

```javascript
element.addEventListener('mouseenter', () => {
  element.style.transform = 'translateY(-6px)';
  element.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.45)';
});

element.addEventListener('mouseleave', () => {
  element.style.transform = 'none';
  element.style.boxShadow = 'none';
});
```

## Design System Colors (for inline styles)

```javascript
const colors = {
  bgDark: '#0a0a0a',
  bgCard: 'rgba(255, 255, 255, 0.05)',
  bgCardHover: 'rgba(255, 255, 255, 0.08)',
  textPrimary: '#ffffff',
  textSecondary: '#e0e0e0',
  textMuted: '#a0a0a0',
  primary: '#ff9900',
  primaryGradient: 'linear-gradient(135deg, #ff9900 0%, #ff7700 100%)',
  border: 'rgba(255, 255, 255, 0.1)',
  borderHover: 'rgba(255, 255, 255, 0.2)',
  success: '#28a745',
  error: '#dc3545',
  link: '#74c0fc'
};
```