/* TOOLTIP TYPOGRAPHY VARIANTS - 5 Distinct Visual Styles */
/* Each variant has unique font, size, and styling but applies consistently to ALL tooltips */

/* Typography 1: Classic Terminal */
.typography-1 {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  background: #f8f8f0;
  border: 1px dashed #333;
  color: #333;
  letter-spacing: 0.5px;
}

.typography-1 button {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  border: 1px dashed #333;
}

/* Typography 2: Vintage Typewriter */
.typography-2 {
  font-family: 'American Typewriter', 'Courier', monospace;
  font-size: 11px;
  line-height: 1.3;
  background: #fffef5;
  border: 2px double #444;
  color: #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.typography-2 button {
  font-family: 'American Typewriter', 'Courier', monospace;
  font-size: 11px;
  border: 1px solid #444;
  text-transform: uppercase;
}

/* Typography 3: Retro LCD Display */
.typography-3 {
  font-family: 'Lucida Console', 'Monaco', monospace;
  font-size: 10px;
  line-height: 1.5;
  background: #e8f4e8;
  border: 3px ridge #556b2f;
  color: #2d4a2d;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  font-weight: bold;
}

.typography-3 button {
  font-family: 'Lucida Console', 'Monaco', monospace;
  font-size: 10px;
  border: 2px groove #556b2f;
  font-weight: bold;
}

/* Typography 4: Hacker Terminal */
.typography-4 {
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  font-size: 13px;
  line-height: 1.3;
  background: #0c0c0c;
  border: 1px solid #00ff00;
  color: #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5), inset 0 0 20px rgba(0, 255, 0, 0.1);
  text-shadow: 0 0 3px #00ff00;
}

.typography-4 button {
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  font-size: 13px;
  border: 1px solid #00ff00;
  background: #1a1a1a;
  color: #00ff00;
  text-shadow: 0 0 3px #00ff00;
}

.typography-4 button:hover {
  background: #00ff00;
  color: #0c0c0c;
  text-shadow: none;
}

/* Typography 5: 90s OS Window */
.typography-5 {
  font-family: 'MS Sans Serif', 'Geneva', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  color: #000;
  box-shadow: 1px 1px 0 #000;
}

.typography-5 button {
  font-family: 'MS Sans Serif', 'Geneva', sans-serif;
  font-size: 11px;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  background: #c0c0c0;
  color: #000;
}

.typography-5 button:active {
  border: 1px inset #e0e0e0;
  background: #d0d0d0;
}

/* Shared button styles for all typography variants */
.typography-1 button,
.typography-2 button,
.typography-3 button,
.typography-4 button,
.typography-5 button {
  cursor: pointer;
  padding: 2px 6px;
  margin: 1px;
}

/* Dark variants get light text */
.typography-4 {
  color: #00ff00;
}

.typography-4 input,
.typography-4 select {
  background: #444;
  color: #00ff00;
  border: 1px solid #00ff00;
  font-family: inherit;
}

/* Light variants get dark text */
.typography-1,
.typography-2,
.typography-3,
.typography-5 {
  color: #333;
}

.typography-1 input,
.typography-1 select,
.typography-2 input,
.typography-2 select,
.typography-3 input,
.typography-3 select,
.typography-5 input,
.typography-5 select {
  background: #fff;
  color: #333;
  border: 1px solid #333;
  font-family: inherit;
  font-size: inherit;
}

/* Ensure ALL typography styles are properly inherited */
.typography-1, .typography-2, .typography-3, .typography-4, .typography-5 {
  /* Force inheritance to all children */
}

.typography-1 *, .typography-2 *, .typography-3 *, .typography-4 *, .typography-5 * {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Typography 3 specific overrides */
.typography-3 {
  color: #2d4a2d !important;
}

.typography-3 * {
  color: #2d4a2d !important;
}

/* Typography 4 specific overrides */
.typography-4 {
  background: #0c0c0c !important;
}

.typography-4 * {
  color: #00ff00 !important;
}

/* Typography 5 specific overrides */
.typography-5 * {
  color: #000 !important;
}

/* Typography-specific cart item hover effects */
.cart-item:hover {
  background: rgba(51, 51, 51, 0.1);
}

.typography-4 .cart-item:hover {
  background: rgba(0, 255, 0, 0.1);
}

.typography-5 .cart-item:hover {
  background: rgba(255, 255, 255, 0.5);
}