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

/* ============================================================
   THEME-CONFLICT HARDENING
   Some themes (e.g. Motta) apply global button/input/typography resets
   with high specificity that leak into third-party widgets. Everything
   in this block is scoped to .tpp-wrap only — it never touches anything
   outside the plugin's own markup — but uses !important where needed so
   a theme's global selectors can't silently win.
   ============================================================ */
.tpp-wrap,
.tpp-wrap * {
  box-sizing: border-box !important;
}

.tpp-wrap button {
  -webkit-appearance: none !important;
  appearance:         none !important;
  margin:              0 !important;
  text-shadow:         none !important;
  box-shadow:          none !important;
  text-transform:      none;
  line-height:         normal !important;
}

.tpp-wrap input {
  -webkit-appearance: none !important;
  appearance:         none !important;
  box-shadow:          none !important;
  margin:              0 !important;
}

.tpp-wrap input:focus,
.tpp-wrap button:focus {
  outline: none !important;
}

.tpp-wrap p,
.tpp-wrap h1, .tpp-wrap h2, .tpp-wrap h3 {
  margin: 0;
  padding: 0;
}

/* ---- CSS Variable Fallback Defaults ---- */
:root {
  --tpp-primary:          #004b87;
  --tpp-primary-hover:    #00365f;
  --tpp-btn-text-color:   #ffffff;
  --tpp-btn-padding:      14px 28px;
  --tpp-btn-radius:       4px;
  --tpp-input-radius:     4px;
  --tpp-card-radius:      6px;
  --tpp-card-padding:     28px;
  --tpp-font-size:        15px;
  --tpp-font-family:      'Archivo', system-ui, -apple-system, sans-serif;
  --tpp-card-bg:          #ffffff;
  --tpp-input-bg:         #ffffff;
  --tpp-input-border:     #cfcfcf;
  --tpp-input-focus:      #004b87;
  --tpp-text:             #14171a;
  --tpp-muted:            #6b6b6b;
  --tpp-success:          #0f8a4c;
  --tpp-step-done:        #e31837;
  --tpp-step-active:      #004b87;
  --tpp-step-inactive:    #d9d9d9;
  --tpp-timeline-bg:      #f7f7f7;
  --tpp-accent-stripe:    linear-gradient(90deg, #004b87 0%, #004b87 34%, #ffffff 34%, #ffffff 66%, #e31837 66%, #e31837 100%);
}

/* ============================================================
   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 */
}

/* ============================================================
   TOP BAR — wordmark + reset link
   ============================================================ */
.tpp-topbar {
  display:         flex !important;
  flex-direction:  row !important;
  flex-wrap:       nowrap;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             12px;
  width:           100%;
  margin-bottom:   14px;
  padding:         0 2px;
}

.tpp-wordmark {
  font-weight:    800;
  font-size:      18px;
  letter-spacing: -0.01em;
  color:          var(--tpp-primary);
  white-space:    nowrap;
}

.tpp-reset-link {
  display:        inline-block !important;
  width:          auto !important;
  background:     transparent !important;
  border:         0 !important;
  padding:        0 !important;
  font-family:    var(--tpp-font-family);
  font-size:      12.5px;
  font-weight:    600;
  color:          var(--tpp-primary);
  cursor:         pointer;
  opacity:        0 !important;
  pointer-events: none !important;
  transition:     opacity .2s;
  white-space:    nowrap;
  flex-shrink:    0;
}

.tpp-reset-link.tpp-visible {
  opacity:        1 !important;
  pointer-events: auto !important;
}

/* ============================================================
   FORM CARD
   ============================================================ */
.tpp-form-card {
  background:    var(--tpp-card-bg);
  border-radius: var(--tpp-card-radius);
  padding:       var(--tpp-card-padding);
  box-shadow:    0 1px 3px rgba(0,0,0,.06);
  border:        1px solid #e0e0e0;
  margin-bottom: 20px;
  position:      relative !important;
  overflow:      hidden !important;
}

.tpp-form-card::before {
  content:  '' !important;
  display:  block !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height:   5px !important;
  background: var(--tpp-accent-stripe, var(--tpp-primary)) !important;
}

.tpp-field-label {
  font-size:      11.5px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--tpp-muted);
  margin:         6px 0 8px;
}

/* ============================================================
   INPUT GROUP  (flex row — input beside the Track button)
   ============================================================ */
.tpp-input-group {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      nowrap;
  gap:            10px;
  width:          100%;
}

/* 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 {
  flex:          1;
  min-width:     0;
  padding:       15px;
  background:    var(--tpp-input-bg);
  border:        2px 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  (sits beside the input)
   ============================================================ */
.tpp-track-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            8px;
  flex-shrink:    0;
  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;
  position:       relative;
  overflow:       hidden;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.tpp-track-btn:hover {
  background:  var(--tpp-primary-hover);
}

.tpp-track-btn:active  { background: var(--tpp-primary-hover); }
.tpp-track-btn:disabled { opacity: .7; cursor: not-allowed; }

.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 #e0e0e0;
  box-shadow:    0 1px 3px rgba(0,0,0,.06);
  overflow:      hidden;
  animation:     tppSlideUp .4s cubic-bezier(.22,1,.36,1) both;
  position:      relative;
}

.tpp-result-card::before {
  content:  '';
  display:  block;
  height:   5px;
  background: var(--tpp-accent-stripe, var(--tpp-primary));
}



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

/* ============================================================
   STATUS BANNER
   ============================================================ */
.tpp-status-banner {
  background:    var(--tpp-primary);
  padding:       22px 26px;
  display:       flex;
  align-items:   center;
  gap:           14px;
}

.tpp-status-icon {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(255,255,255,.18);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           #fff;
}

.tpp-status-text p { margin: 0; }

.tpp-status-headline {
  font-size:   17px;
  font-weight: 700;
  color:       #fff;
}

.tpp-status-sub {
  font-size: 13px;
  color:     rgba(255,255,255,.82);
  margin-top: 2px !important;
}

/* ============================================================
   DETAILS GRID
   ============================================================ */
.tpp-details-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px 20px;
  padding:               20px 26px;
  border-bottom:         1px solid #eaeaea;
}

.tpp-detail-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--tpp-muted);
  margin:         0 0 4px;
}

.tpp-detail-value {
  font-size: 13.5px;
  color:     var(--tpp-text);
  margin:    0;
  word-break: break-word;
}

/* ============================================================
   TRACKING HISTORY  (checkmarked checklist)
   ============================================================ */
.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; }

.tpp-hist-item {
  display:   flex;
  gap:       14px;
  animation: tppFadeSlide .4s ease both;
}

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

.tpp-hist-rail {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex-shrink:    0;
}

.tpp-hist-dot {
  width:           16px;
  height:          16px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.tpp-hist-dot.done    { background: var(--tpp-hist-accent, var(--tpp-step-done)); }
.tpp-hist-dot.pending { background: var(--tpp-step-inactive); }

.tpp-hist-line {
  width:     2px;
  flex:      1;
  min-height: 22px;
  margin:    2px 0;
  background: var(--tpp-step-inactive);
}

.tpp-hist-line.done { background: var(--tpp-hist-accent, var(--tpp-step-done)); }

.tpp-hist-body { padding-bottom: 22px; }
.tpp-hist-item:last-child .tpp-hist-body { padding-bottom: 0; }

.tpp-hist-status {
  font-size:   13.5px;
  font-weight: 700;
  color:       var(--tpp-text);
  margin:      0 0 2px;
}

.tpp-hist-meta {
  font-size: 12px;
  color:     var(--tpp-muted);
  margin:    0;
}

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

.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-timeline-wrap    { padding: 16px 14px 20px; }
  .tpp-details-grid     { grid-template-columns: 1fr; }
}

/* Mobile: Track button sits BELOW the tracking input, full width.
   !important is required because the base .tpp-input-group rule forces
   flex-direction: row !important, which a normal rule cannot override. */
@media (max-width: 600px) {
  .tpp-input-group {
    flex-direction: column !important;
    gap:            12px;
  }
  .tpp-input-group .tpp-input {
    flex:   none;
    width:  100%;
  }
  .tpp-input-group .tpp-track-btn {
    width:      100%;
    min-height: 48px;   /* comfortable touch target */
  }
}

/* ============================================================
   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, 6px);
  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: 4px;
  margin-bottom: 20px;
  background:    linear-gradient(90deg, #004b87 0%, #4a7fb5 50%, #004b87 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-hist-item:nth-child(1) { animation-delay: 0.00s; }
.tpp-hist-item:nth-child(2) { animation-delay: 0.06s; }
.tpp-hist-item:nth-child(3) { animation-delay: 0.12s; }
.tpp-hist-item:nth-child(4) { animation-delay: 0.18s; }
.tpp-hist-item:nth-child(5) { animation-delay: 0.24s; }
.tpp-hist-item: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:             8px;
  padding:         11px 26px;
  background:      #fff;
  color:           var(--tpp-primary, #004b87);
  border:          2px solid var(--tpp-primary, #004b87);
  border-radius:   var(--tpp-btn-radius, 4px);
  font-family:     var(--tpp-font-family, 'Archivo', sans-serif);
  font-size:       13.5px;
  font-weight:     700;
  cursor:          pointer;
  transition:      background .18s, color .18s;
  letter-spacing:  .3px;
  width:           100%;
  max-width:       360px;
  justify-content: center;
}

.tpp-print-btn:hover {
  background: var(--tpp-primary, #004b87);
  color:      #fff;
}

.tpp-print-btn:active {
  background: var(--tpp-primary-hover, #00365f);
  border-color: var(--tpp-primary-hover, #00365f);
  color:      #fff;
}

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