/**
 * Presale — Phase Timer Card & Roadmap
 */

.phase-timer-card {
  background: rgba(11, 17, 23, 0.6); border: 1px solid rgba(240, 196, 214, 0.3);
  border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: all 0.3s ease;
  position: relative; overflow: hidden;
}
.phase-timer-card:hover { border-color: rgba(240, 196, 214, 0.5); box-shadow: 0 6px 30px rgba(240, 196, 214, 0.2); transform: translateY(-2px); }
.phase-timer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(240, 196, 214, 0.5), transparent); }

.phase-timer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.presale-phase-number { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.75rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.5rem; }
.presale-phase-number.phase-1 { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.presale-phase-number.phase-2 { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.presale-phase-number.phase-3 { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.presale-phase-number::before { content: '⚡'; font-size: 1.125rem; }

.phase-discount-badge { font-size: 1.5rem; font-weight: 800; color: #f0c4d6; text-shadow: 0 0 10px rgba(240, 196, 214, 0.5); }
.phase-status { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.phase-days-passed { color: rgba(255, 255, 255, 0.5); }
.phase-days-left { color: #7da7f4; font-weight: 600; }
.phase-separator { opacity: 0.3; }

.phase-progress-track { width: 100%; height: 10px; background: rgba(11, 17, 23, 0.9); border-radius: 999px; overflow: hidden; border: 1px solid rgba(240, 196, 214, 0.2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); margin-bottom: 1rem; }
.phase-progress-bar { height: 100%; background: linear-gradient(90deg, #f0c4d6, #cbd2ff); border-radius: 999px; transition: width 1s linear; box-shadow: 0 0 15px rgba(240, 196, 214, 0.6); position: relative; }
.phase-progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent); border-radius: 999px 999px 0 0; }

.phase-roadmap { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; background: rgba(11, 17, 23, 0.4); border-radius: 12px; border: 1px solid rgba(125, 167, 244, 0.15); font-size: 0.875rem; }
.phase-roadmap-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: rgba(125, 167, 244, 0.1); color: rgba(255, 255, 255, 0.7); transition: all 0.2s ease; }
.phase-roadmap-item.active { background: rgba(125, 167, 244, 0.2); color: #7da7f4; border: 1px solid rgba(125, 167, 244, 0.3); font-weight: 600; }
.phase-roadmap-arrow { color: rgba(255, 255, 255, 0.3); font-size: 1rem; }