/* ============================================================
   TPP Tracking — Frontend asset CSS
   Stacked with public/css/ui.css — handles animations +
   the input icon layout fix for the redesigned UI
   ============================================================ */

/* Input icon wrapper — position fix */
.tpp-input-group {
  position: relative;
}

.tpp-input-icon {
  position: absolute;
  left: 16px;
  top: 20px; /* top of input row */
  color: #a0aec0;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.tpp-wrap:has(#tpp-tracking-input:focus) .tpp-input-icon {
  color: var(--tpp-primary, #6366f1);
}

/* Loading shimmer on result */
.tpp-loading-shimmer {
  border-radius: var(--tpp-card-radius, 16px);
  overflow: hidden;
  background: #f8f9fc;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.tpp-shimmer-line {
  height: 14px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 400% 100%;
  border-radius: 8px;
  margin-bottom: 12px;
  animation: tppShimmer 1.4s ease infinite;
}

.tpp-shimmer-line.tpp-sl-sm  { width: 40%; }
.tpp-shimmer-line.tpp-sl-md  { width: 65%; }
.tpp-shimmer-line.tpp-sl-lg  { width: 90%; }
.tpp-shimmer-line.tpp-sl-xl  { width: 100%; }

@keyframes tppShimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}

/* Staggered animation delay helpers */
.tpp-event-card:nth-child(1) { animation-delay: 0s;   }
.tpp-event-card:nth-child(2) { animation-delay: .06s; }
.tpp-event-card:nth-child(3) { animation-delay: .12s; }
.tpp-event-card:nth-child(4) { animation-delay: .18s; }
.tpp-event-card:nth-child(5) { animation-delay: .24s; }
.tpp-event-card:nth-child(6) { animation-delay: .30s; }

/* Success pop */
.tpp-success-pop {
  animation: tppSlideUp 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes tppSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PRINT BAR — Desktop display fix
   Overrides any theme overflow:hidden or display:none on parent
   ============================================================ */
#tpp-wrap .tpp-print-bar,
.tpp-wrap .tpp-print-bar {
  display:   flex !important;
  visibility:visible !important;
  opacity:   1 !important;
  overflow:  visible !important;
  clip:      auto !important;
  clip-path: none !important;
}

#tpp-wrap .tpp-print-btn,
.tpp-wrap .tpp-print-btn {
  display:     inline-flex !important;
  visibility:  visible !important;
  opacity:     1 !important;
  background:  none !important;
  box-shadow:  none !important;
  color:       #94a3b8 !important;
  font-size:   13px !important;
  font-weight: 400 !important;
  padding:     8px 14px !important;
  border:      none !important;
}

#tpp-wrap .tpp-print-btn:hover,
.tpp-wrap .tpp-print-btn:hover {
  background:  none !important;
  color:       #64748b !important;
  transform:   none !important;
  box-shadow:  none !important;
}

/* Ensure result wrapper never clips children */
#tpp-result,
.tpp-result {
  overflow:  visible !important;
  clip:      auto !important;
  clip-path: none !important;
}

.tpp-result-card {
  overflow: visible !important;
}