/**
 * Presale — Product Page Mini Timer & Responsive
 */

@media (max-width: 767px) {
  #presale-section { padding: 2rem 1rem; }
  .presale-title { font-size: 1.75rem; }
  .presale-subtitle { font-size: 1rem; }
  .production-timer-display { font-size: 1.5rem; }
  .production-timer-display strong { font-size: 2rem; }
  .phase-discount-badge { font-size: 1.25rem; }
  .phase-roadmap { flex-direction: column; gap: 0.5rem; }
  .phase-roadmap-arrow { transform: rotate(90deg); }
}

.presale-product-timer {
  background: rgba(11, 17, 23, 0.5);
  border: 1px solid rgba(240, 196, 214, 0.3);
  margin-bottom: 1.5rem;
}

.presale-product-timer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.presale-product-timer-label { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

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

.presale-product-discount { font-size: 1.125rem; font-weight: 800; color: #f0c4d6; text-shadow: 0 0 8px rgba(240, 196, 214, 0.4); }
.presale-product-timer-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.75rem; flex-wrap: wrap; }
.presale-product-progress-track { width: 100%; height: 8px; background: rgba(11, 17, 23, 0.9); border-radius: 999px; overflow: hidden; border: 1px solid rgba(240, 196, 214, 0.2); }
.presale-product-progress-bar { height: 100%; background: linear-gradient(90deg, #f0c4d6, #cbd2ff); border-radius: 999px; transition: width 1s linear; box-shadow: 0 0 10px rgba(240, 196, 214, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .presale-title, .discount-icon { animation: none; }
  .production-timer-card, .phase-timer-card { transition: none; }
}