/* ============================================================
   TPP Tracking — Public UI CSS (Modern Redesign v2)
   All values driven by CSS custom properties injected by PHP
   ============================================================ */

/* ---- CSS Variable Fallback Defaults ---- */
:root {
  --tpp-primary:          #6366f1;
  --tpp-primary-hover:    #4f46e5;
  --tpp-btn-text-color:   #ffffff;
  --tpp-btn-padding:      14px 28px;
  --tpp-btn-radius:       12px;
  --tpp-input-radius:     12px;
  --tpp-card-radius:      16px;
  --tpp-card-padding:     28px;
  --tpp-font-size:        15px;
  --tpp-font-family:      'Inter', system-ui, -apple-system, sans-serif;
  --tpp-card-bg:          #ffffff;
  --tpp-input-bg:         #f8f9fc;
  --tpp-input-border:     #e2e5ef;
  --tpp-input-focus:      #6366f1;
  --tpp-text:             #0f172a;
  --tpp-muted:            #64748b;
  --tpp-success:          #10b981;
  --tpp-step-done:        #10b981;
  --tpp-step-active:      #6366f1;
  --tpp-step-inactive:    #e2e8f0;
  --tpp-timeline-bg:      #f8f9fc;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.tpp-wrap {
  font-family: var(--tpp-font-family);
  font-size:   var(--tpp-font-size);
  color:       var(--tpp-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* max-width applied by injected CSS if set */
}

/* ============================================================
   FORM CARD
   ============================================================ */
.tpp-form-card {
  background:    var(--tpp-card-bg);
  border-radius: var(--tpp-card-radius);
  padding:       var(--tpp-card-padding);
  box-shadow:    0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  border:        1px solid rgba(0,0,0,.05);
  margin-bottom: 20px;
}

/* ============================================================
   INPUT GROUP  (flex column — input on top, button below)
   ============================================================ */
.tpp-input-group {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* Icon sits inside the relative wrapper div */
.tpp-input-icon {
  position:        absolute;
  left:            15px;
  top:             50%;
  transform:       translateY(-50%);
  color:           var(--tpp-muted);
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  transition:      color .2s;
  z-index:         1;
}

/* Focus: tint icon */
.tpp-input:focus ~ .tpp-input-icon,
.tpp-input:focus + .tpp-input-icon { color: var(--tpp-primary); }

/* ---- INPUT ---- */
.tpp-input {
  width:         100%;
  padding:       15px 15px 15px 46px;
  background:    var(--tpp-input-bg);
  border:        1.5px solid var(--tpp-input-border);
  border-radius: var(--tpp-input-radius);
  font-family:   var(--tpp-font-family);
  font-size:     var(--tpp-font-size);
  color:         var(--tpp-text);
  outline:       none;
  transition:    border-color .2s, box-shadow .2s, background .2s;
  letter-spacing: .3px;
  box-sizing:    border-box;
}

.tpp-input:focus {
  border-color: var(--tpp-input-focus);
  background:   #fff;
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--tpp-input-focus) 15%, transparent);
}

.tpp-input::placeholder { color: #b0bec5; }

.tpp-input.tpp-shake {
  animation:    tppShake .35s ease;
  border-color: #ef4444 !important;
}

@keyframes tppShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  60%     { transform: translateX(6px); }
}

/* ============================================================
   TRACK BUTTON  (full width, below input)
   ============================================================ */
.tpp-track-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            8px;
  width:          100%;
  padding:        var(--tpp-btn-padding);
  background:     var(--tpp-primary);
  color:          var(--tpp-btn-text-color);
  border:         none;
  border-radius:  var(--tpp-btn-radius);
  font-family:    var(--tpp-font-family);
  font-size:      var(--tpp-font-size);
  font-weight:    700;
  cursor:         pointer;
  transition:     background .2s, transform .15s, box-shadow .2s;
  box-shadow:     0 4px 14px color-mix(in srgb, var(--tpp-primary) 45%, transparent);
  position:       relative;
  overflow:       hidden;
  letter-spacing: .2px;
}

.tpp-track-btn::before {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events:none;
}

.tpp-track-btn:hover {
  background:  var(--tpp-primary-hover);
  transform:   translateY(-1px);
  box-shadow:  0 6px 22px color-mix(in srgb, var(--tpp-primary) 55%, transparent);
}

.tpp-track-btn:active  { transform: translateY(0); }
.tpp-track-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.tpp-btn-text,
.tpp-btn-loading {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
}

/* spinner */
.tpp-spinner-icon { animation: tppSpin .7s linear infinite; }
@keyframes tppSpin { to { transform: rotate(360deg); } }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.tpp-trust-strip {
  display:         flex;
  justify-content: center;
  margin-top:      14px;
}

.tpp-trust-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   12px;
  color:       var(--tpp-muted);
  font-weight: 500;
}

.tpp-trust-item svg { color: var(--tpp-success); flex-shrink: 0; }

/* ============================================================
   RESULT CARD
   ============================================================ */
.tpp-result { transition: opacity .3s; }

.tpp-notice {
  border-radius: var(--tpp-card-radius);
  padding:       16px 20px;
  font-size:     14px;
  font-weight:   500;
  display:       flex;
  align-items:   center;
  gap:           10px;
}

.tpp-error {
  background: #fef2f2;
  color:      #b91c1c;
  border:     1px solid #fecaca;
}

.tpp-error::before { content: '⚠'; font-size: 16px; }

.tpp-result-card {
  background:    var(--tpp-card-bg);
  border-radius: var(--tpp-card-radius);
  border:        1px solid rgba(0,0,0,.05);
  box-shadow:    0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  overflow:      visible;
  animation:     tppSlideUp .4s cubic-bezier(.22,1,.36,1) both;
}



@keyframes tppSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   STATUS BANNER
   ============================================================ */
.tpp-status-banner {
  background:    linear-gradient(135deg, var(--tpp-primary) 0%, var(--tpp-primary-hover) 100%);
  padding:       22px 26px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           14px;
  flex-wrap:     wrap;
  border-radius: var(--tpp-card-radius) var(--tpp-card-radius) 0 0;
}

.tpp-status-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(255,255,255,.18);
  color:           #fff;
  border-radius:   100px;
  padding:         6px 16px 6px 10px;
  font-size:       13.5px;
  font-weight:     700;
  letter-spacing:  .2px;
  backdrop-filter: blur(4px);
}

.tpp-status-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #fff;
  flex-shrink:   0;
  animation:     tppPulse 1.6s ease-in-out infinite;
}

@keyframes tppPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  50%     { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}

.tpp-result-address {
  font-size:   13px;
  color:       rgba(255,255,255,.78);
  font-weight: 400;
  display:     flex;
  align-items: center;
  gap:         5px;
}

/* ============================================================
   PROGRESS STEPS
   ============================================================ */
.tpp-progress-wrap {
  padding:       24px 26px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.tpp-progress-label {
  font-size:      11px;
  font-weight:    700;
  color:          var(--tpp-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom:  18px;
}

.tpp-steps-track {
  display:     flex;
  align-items: flex-start;
}

.tpp-step-node {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex:           1;
  position:       relative;
}

/* connector */
.tpp-step-node:not(:last-child)::after {
  content:  '';
  position: absolute;
  top:      13px;
  left:     calc(50% + 14px);
  right:    calc(-50% + 14px);
  height:   2px;
  background: var(--tpp-step-inactive);
  z-index:  0;
  transition: background .4s;
}

.tpp-step-node.tpp-step-done:not(:last-child)::after,
.tpp-step-node.tpp-step-active:not(:last-child)::after {
  background: var(--tpp-step-done);
}

.tpp-step-circle {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  background:    var(--tpp-step-inactive);
  display:       flex;
  align-items:   center;
  justify-content:center;
  position:      relative;
  z-index:       1;
  transition:    background .3s, box-shadow .3s;
  flex-shrink:   0;
}

.tpp-step-node.tpp-step-done .tpp-step-circle { background: var(--tpp-step-done); }
.tpp-step-node.tpp-step-done .tpp-step-circle::after {
  content:    '';
  display:    block;
  width:      5px;
  height:     9px;
  border:     2px solid #fff;
  border-top: none;
  border-left:none;
  transform:  rotate(45deg) translate(-1px,-1px);
}

.tpp-step-node.tpp-step-active .tpp-step-circle {
  background: var(--tpp-step-active);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tpp-step-active) 25%, transparent);
}
.tpp-step-node.tpp-step-active .tpp-step-circle::after {
  content:       '';
  display:       block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #fff;
}

.tpp-step-label {
  margin-top:  7px;
  font-size:   10px;
  font-weight: 600;
  color:       var(--tpp-muted);
  text-align:  center;
  line-height: 1.3;
  max-width:   70px;
  word-break:  break-word;
}

.tpp-step-node.tpp-step-done .tpp-step-label   { color: var(--tpp-step-done); }
.tpp-step-node.tpp-step-active .tpp-step-label { color: var(--tpp-step-active); font-weight: 700; }

/* ============================================================
   TIMELINE EVENTS
   ============================================================ */
.tpp-timeline-wrap { padding: 22px 26px 26px; }

.tpp-timeline-label {
  font-size:      11px;
  font-weight:    700;
  color:          var(--tpp-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom:  14px;
}

.tpp-timeline-list { display: flex; flex-direction: column; gap: 10px; }

.tpp-event-card {
  background:    var(--tpp-timeline-bg);
  border-radius: calc(var(--tpp-card-radius) - 4px);
  padding:       14px 16px;
  border:        1px solid transparent;
  position:      relative;
  overflow:      hidden;
  transition:    border-color .2s, box-shadow .2s;
  animation:     tppFadeSlide .4s ease both;
}

.tpp-event-card:hover {
  border-color: color-mix(in srgb, var(--tpp-primary) 20%, transparent);
  box-shadow:   0 2px 8px rgba(0,0,0,.05);
}

@keyframes tppFadeSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tpp-event-card.tpp-event-latest {
  background:   color-mix(in srgb, var(--tpp-primary) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--tpp-primary) 22%, transparent);
}

.tpp-event-card.tpp-event-latest::before {
  content:        'Latest';
  position:       absolute;
  top:            9px;
  right:          13px;
  font-size:      10px;
  font-weight:    700;
  color:          var(--tpp-primary);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.tpp-event-status {
  font-weight:  700;
  font-size:    14px;
  color:        var(--tpp-text);
  margin-bottom:4px;
  display:      flex;
  align-items:  center;
  gap:          7px;
}

.tpp-event-status::before {
  content:       '';
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--tpp-primary);
  flex-shrink:   0;
}

.tpp-event-card.tpp-event-latest .tpp-event-status::before {
  background:  var(--tpp-step-active);
  box-shadow:  0 0 0 3px color-mix(in srgb, var(--tpp-step-active) 25%, transparent);
}

.tpp-event-meta {
  font-size:  12px;
  color:      var(--tpp-muted);
  margin-bottom:5px;
  display:    flex;
  align-items:center;
  gap:        10px;
  flex-wrap:  wrap;
}

.tpp-event-meta-item { display:inline-flex; align-items:center; gap:4px; }

.tpp-event-location {
  font-size:   13px;
  color:       var(--tpp-text);
  font-weight: 500;
  display:     flex;
  align-items: center;
  gap:         4px;
}

.tpp-event-message { font-size:13px; color:var(--tpp-muted); margin-top:3px; }

.tpp-empty-timeline {
  text-align: center;
  padding:    32px;
  color:      var(--tpp-muted);
  font-size:  14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 520px) {
  .tpp-form-card        { padding: 20px 16px; }
  .tpp-status-banner    { padding: 18px; }
  .tpp-progress-wrap    { padding: 18px 14px 10px; }
  .tpp-timeline-wrap    { padding: 16px 14px 20px; }
  .tpp-step-label       { font-size: 9px; max-width: 52px; }
  .tpp-step-circle      { width: 22px; height: 22px; }
}

/* ============================================================
   DOT LOADER (replaces spinner)
   ============================================================ */
.tpp-dot-loader {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
}

.tpp-dot-loader span {
  display:       block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--tpp-btn-text-color, #fff);
  opacity:       0.9;
  animation:     tppDotPulse 1.2s ease-in-out infinite;
}

.tpp-dot-loader span:nth-child(1) { animation-delay: 0s;    }
.tpp-dot-loader span:nth-child(2) { animation-delay: 0.2s;  }
.tpp-dot-loader span:nth-child(3) { animation-delay: 0.4s;  }

@keyframes tppDotPulse {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.5; }
  40%           { transform: scale(1.15); opacity: 1;   }
}

/* ============================================================
   IMPROVED SHIMMER LOADER
   ============================================================ */
.tpp-loading-shimmer {
  background:    var(--tpp-card-bg, #fff);
  border-radius: var(--tpp-card-radius, 16px);
  padding:       24px;
  box-shadow:    0 4px 20px rgba(0,0,0,.08);
  border:        1px solid rgba(0,0,0,.05);
}

.tpp-shimmer-header {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-bottom: 20px;
}

.tpp-shimmer-circle {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 400% 100%;
  animation:     tppShimmer 1.4s ease infinite;
  flex-shrink:   0;
}

.tpp-shimmer-bar {
  height:        36px;
  border-radius: 10px;
  margin-bottom: 20px;
  background:    linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
  background-size: 400% 100%;
  animation:     tppShimmer 1.4s ease infinite;
  opacity:       .18;
}

.tpp-shimmer-line {
  border-radius: 6px;
  background:    linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 400% 100%;
  animation:     tppShimmer 1.4s ease infinite;
}

.tpp-sl-sm  { width: 35%; }
.tpp-sl-md  { width: 60%; }
.tpp-sl-lg  { width: 80%; }
.tpp-sl-xl  { width: 100%; }

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

/* Stagger animation delays on event cards */
.tpp-event-card:nth-child(1) { animation-delay: 0.00s; }
.tpp-event-card:nth-child(2) { animation-delay: 0.06s; }
.tpp-event-card:nth-child(3) { animation-delay: 0.12s; }
.tpp-event-card:nth-child(4) { animation-delay: 0.18s; }
.tpp-event-card:nth-child(5) { animation-delay: 0.24s; }
.tpp-event-card:nth-child(6) { animation-delay: 0.30s; }

/* ============================================================
   PRINT BUTTON BAR
   ============================================================ */
.tpp-print-bar {
  display:         flex !important;
  visibility:      visible !important;
  justify-content: center;
  align-items:     center;
  padding:         18px 0 4px;
  width:           100%;
  position:        relative;
  z-index:         20;
  /* Sits below the result card, not inside it */
}

.tpp-print-btn {
  display:         inline-flex !important;
  visibility:      visible !important;
  align-items:     center;
  gap:             6px;
  padding:         8px 14px;
  background:      none;
  color:           #94a3b8;
  border:          none;
  border-radius:   6px;
  font-family:     var(--tpp-font-family, 'Inter', sans-serif);
  font-size:       13px;
  font-weight:     400;
  cursor:          pointer;
  transition:      color .15s;
  letter-spacing:  .2px;
  box-shadow:      none;
  width:           auto;
  max-width:       none;
  justify-content: center;
}

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

.tpp-print-btn:active {
  transform:  none;
  box-shadow: none;
}

/* No icon — reset left padding to standard */
.tpp-input {
  padding-left: 15px;
}