/* ========================================
   4i4A Group - Step 3: ETH Component System
   Gradual Migration - ETH Panel Component
   ======================================== */

/* ===== COMPONENT VARIABLES ===== */
:root {
  /* Panel system variables */
  --panel-bg-primary: rgba(26, 26, 26, 0.8);
  --panel-bg-secondary: rgba(0, 0, 0, 0.5);
  --panel-border-primary: rgba(0, 255, 136, 0.4);
  --panel-border-secondary: rgba(255, 255, 255, 0.2);
  --panel-border-width: 2px;
  --panel-border-radius: 16px;
  --panel-padding: 16px;
  
  /* ETH specific variables */
  --eth-color-primary: #ffffff;
  --eth-color-secondary: var(--electric-cyan, #00ffff);
  --eth-font-size-main: 3rem;
  --eth-font-family: 'Share Tech Mono', monospace;
  --eth-text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  
  /* Panel shadows and effects */
  --panel-shadow-main: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 136, 0.2), inset 0 0 20px rgba(0, 255, 136, 0.1);
  --panel-backdrop-blur: blur(15px);
  --panel-hover-transform: translateY(-2px) scale(1.02);
  --panel-transition: all 0.3s ease;
}

/* ===== REUSABLE PANEL BASE CLASSES ===== */

/* Base panel component (reusable) */
.u-panel-base {
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: var(--panel-transition) !important;
}

.u-panel-crypto {
  background: var(--panel-bg-secondary) !important;
  border: var(--panel-border-width) solid var(--panel-border-primary) !important;
  border-radius: var(--panel-border-radius) !important;
  padding: var(--panel-padding) !important;
  box-shadow: var(--panel-shadow-main) !important;
  backdrop-filter: var(--panel-backdrop-blur) !important;
  -webkit-backdrop-filter: var(--panel-backdrop-blur) !important;
}

.u-panel-crypto:hover {
  transform: var(--panel-hover-transform) !important;
}

/* Panel content structure */
.u-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.u-panel-main {
  text-align: center !important;
  margin-bottom: 12px !important;
}

.u-panel-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ===== ETH SPECIFIC COMPONENT CLASSES ===== */

/* ETH price display */
.u-eth-price {
  font-size: var(--eth-font-size-main) !important;
  font-weight: 900 !important;
  color: var(--eth-color-primary) !important;
  text-shadow: var(--eth-text-shadow) !important;
  font-family: var(--eth-font-family) !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}

.u-eth-change {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.u-eth-change.positive {
  background: rgba(0, 255, 136, 0.1) !important;
  border-color: rgba(0, 255, 136, 0.3) !important;
  color: #00ff88 !important;
}

.u-eth-change.negative {
  background: rgba(255, 68, 68, 0.1) !important;
  border-color: rgba(255, 68, 68, 0.3) !important;
  color: #ff4444 !important;
}

/* ETH details grid */
.u-eth-details {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.u-eth-detail-item {
  text-align: center !important;
  padding: 6px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.u-eth-detail-label {
  color: var(--muted-blue, #bcd4ff) !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.u-eth-detail-value {
  color: var(--eth-color-secondary) !important;
  font-weight: 600 !important;
}

/* ===== CRYPTO PANEL VARIANTS ===== */

/* Solana variant */
.u-panel-solana {
  --panel-border-primary: #9945FF;
  --panel-shadow-main: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(153, 69, 255, 0.2), inset 0 0 20px rgba(153, 69, 255, 0.1);
}

/* DOGE variant */
.u-panel-doge {
  --panel-border-primary: #FFD700;
  --panel-shadow-main: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 215, 0, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.1);
}

/* News variant */
.u-panel-news {
  --panel-bg-primary: rgba(26, 26, 26, 0.8);
  --panel-border-primary: var(--electric-cyan, #00ffff);
  --panel-border-radius: 17px;
  --panel-padding: 22px;
}

/* ===== RESPONSIVE COMPONENT BEHAVIOR ===== */

@media (max-width: 768px) {
  .u-eth-price {
    font-size: 4rem !important;
  }
  
  .u-eth-details {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .u-panel-crypto {
    padding: 16px !important;
    margin: 0 8px !important;
  }
}

/* ===== ANIMATION ENHANCEMENTS ===== */

/* Smooth entry animation */
.u-panel-fade-in {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  animation: panelFadeIn 0.6s ease-out forwards !important;
}

@keyframes panelFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation for important values */
.u-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite !important;
}

@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.9), 0 0 40px rgba(0, 255, 255, 0.3);
  }
}

/* ===== STEP 3 COMPLETE - ETH COMPONENT SYSTEM READY ===== */