/**
 * Presale — Production Timer Card
 */

.production-timer-card {
  background: rgba(11, 17, 23, 0.6); border: 1px solid rgba(125, 167, 244, 0.3);
  border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: all 0.3s ease;
}
.production-timer-card:hover { border-color: rgba(125, 167, 244, 0.5); box-shadow: 0 6px 30px rgba(125, 167, 244, 0.2); transform: translateY(-2px); }

.production-timer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.production-timer-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #7da7f4; }
.timer-icon { font-size: 1.25rem; }

.info-icon {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(125, 167, 244, 0.2);
  color: #7da7f4; font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: help; transition: all 0.2s ease; position: relative;
}
.info-icon:hover { background: rgba(125, 167, 244, 0.4); transform: scale(1.1); }
.info-icon:active { transform: scale(0.95); }

.production-timer-display { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 1rem; display: flex; align-items: baseline; gap: 0.5rem; }
.production-timer-display strong { font-size: 2.5rem; color: #7da7f4; }
.timer-small { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); margin-left: 0.5rem; }

.production-progress-wrapper { position: relative; }
.production-progress-track { width: 100%; height: 12px; background: rgba(11, 17, 23, 0.9); border-radius: 999px; overflow: hidden; border: 1px solid rgba(125, 167, 244, 0.2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.production-progress-bar { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 999px; transition: width 1s linear, background 0.5s ease; box-shadow: 0 0 20px rgba(16, 185, 129, 0.7); position: relative; }
.production-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; }
.production-percentage { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); }