/* WPCargo, restyled as Pet Path tracking.
   Targets the plugin's real markup so it survives plugin updates: no template
   files are edited, only presentation. Layout follows the approved reference:
   dark ground, centred form, large white result card, then summary, timeline,
   parties, information grid and history tables. */

/* ---------- Tracking form ---------- */
.pp-track-embed{
  background:var(--pp-dark);
  padding-top:0!important;
  padding-bottom:clamp(80px,10vw,140px)!important;
}
#pp-track-hero{padding-bottom:clamp(24px,3vw,40px)!important}

.wpcargo-track.wpcargo{max-width:640px;margin:0 auto}
.wpcargo-track form{margin:0}
.wpcargo-track table.track_form_table{
  width:100%;border:0;background:transparent;margin:0;border-collapse:separate;border-spacing:0;
}
.wpcargo-track table.track_form_table tr,
.wpcargo-track table.track_form_table td,
.wpcargo-track table.track_form_table th{
  border:0;background:transparent;padding:0;vertical-align:middle;
}
/* The plugin's own form heading duplicates the page hero heading. */
.wpcargo-track .track_form_th{display:none}

.wpcargo-track .track_form_tr{display:flex;gap:10px;flex-wrap:wrap}
.wpcargo-track .track_form_td{flex:1 1 auto}
.wpcargo-track .track_form_td.submit-track{flex:0 0 auto}

.wpcargo-track input.input_track_num{
  width:100%;
  background:#fff;
  border:1px solid transparent;
  border-radius:var(--pp-r-pill);
  padding:1.05em 1.5em;
  font-family:var(--pp-font);
  font-size:var(--pp-fs-body);
  color:var(--pp-ink);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
.wpcargo-track input.input_track_num::placeholder{color:var(--pp-ink-faint)}
.wpcargo-track input.input_track_num:focus{
  outline:none;border-color:var(--pp-accent-soft);box-shadow:var(--pp-ring);
}

.wpcargo-track input#submit_wpcargo,
.wpcargo-track .wpcargo-btn-primary{
  appearance:none;-webkit-appearance:none;
  background:var(--pp-accent);color:#fff;
  border:0;border-radius:var(--pp-r-pill);
  padding:1.05em 2em;
  font-family:var(--pp-font);font-weight:600;font-size:var(--pp-fs-sm);
  letter-spacing:0;cursor:pointer;white-space:nowrap;
  transition:background-color var(--pp-dur-fast) var(--pp-ease-out),
             transform var(--pp-dur-fast) var(--pp-ease-out),
             box-shadow var(--pp-dur) var(--pp-ease-out);
}
.wpcargo-track input#submit_wpcargo:hover{background:var(--pp-accent-hover);transform:translateY(-1px);box-shadow:var(--pp-shadow-md)}
.wpcargo-track input#submit_wpcargo:active{background:var(--pp-accent-active);transform:translateY(1px)}
.wpcargo-track input#submit_wpcargo:focus-visible{outline:none;box-shadow:var(--pp-ring)}

.pp-track-hint{
  color:var(--pp-on-dark-muted);font-size:var(--pp-fs-xs);
  margin:14px 0 0;text-align:left;
}

/* ---------- Result card ---------- */
#wpcargo-result-wrapper{
  max-width:1000px;margin:0 auto;
  padding:0 var(--pp-gutter);
}
.wpcargo-result.wpcargo{
  background:#fff;
  border-radius:var(--pp-r-lg);
  box-shadow:var(--pp-shadow-xl);
  padding:clamp(20px,3vw,36px);
  color:var(--pp-ink);
  /* Lifts over the dark ground above it, the one breakout in the design. */
  margin-top:calc(-1 * clamp(40px,6vw,90px));
  position:relative;z-index:2;
}
.wpcargo-result.wpcargo h3{color:var(--pp-ink)}

.pp-track-actions{display:flex;justify-content:flex-start;margin-bottom:18px}
.pp-print{padding:.7em 1.2em;font-size:var(--pp-fs-xs)}

#wpcargo-result-print{padding:0}

/* Plugin header: logo, barcode, shipment number */
#wpcargo-track-header{text-align:center;padding:0 0 8px}
#wpcargo-track-header .comp_logo img{max-height:44px;width:auto;margin:0 auto 16px}
#wpcargo-track-header .comp_logo img[src=""]{display:none}
#wpcargo-track-header .b_code img{max-width:280px;margin:18px auto 6px}
#wpcargo-track-header .shipment-number .wpcargo-title{
  font-family:var(--pp-font);font-weight:700;
  font-size:var(--pp-fs-h4)!important;letter-spacing:.04em;color:var(--pp-ink);
}

/* ---------- Summary ---------- */
.pp-track-summary{
  border-top:1px solid var(--pp-border);
  margin-top:18px;padding-top:22px;
}
.pp-track-summary__top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.pp-track-summary__eyebrow{
  display:block;font-size:var(--pp-fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--pp-tr-label);color:var(--pp-ink-muted);
}
.pp-track-summary__pet{font-size:var(--pp-fs-h3);font-weight:700;letter-spacing:var(--pp-tr-head)}
.pp-badge--transit{background:var(--pp-accent-tint);color:var(--pp-accent)}
.pp-badge--delivered{background:var(--pp-success-bg);color:var(--pp-success)}
.pp-badge--delayed{background:var(--pp-warning-bg);color:var(--pp-warning)}

.pp-track-eta{margin-top:18px}
.pp-track-eta__label{
  display:block;font-size:var(--pp-fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--pp-tr-label);color:var(--pp-ink-muted);margin-bottom:4px;
}
.pp-track-eta__value{
  display:block;font-size:var(--pp-fs-h3);font-weight:700;
  letter-spacing:var(--pp-tr-head);color:var(--pp-accent);
}

/* Route */
.pp-route{
  display:flex;align-items:center;gap:18px;
  margin-top:24px;padding:20px;
  background:var(--pp-accent-tint);border-radius:var(--pp-r-md);
}
.pp-route__end{flex:1 1 0;min-width:0}
.pp-route__end--to{text-align:right}
.pp-route__label{
  display:block;font-size:var(--pp-fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--pp-tr-label);color:var(--pp-ink-muted);margin-bottom:4px;
}
.pp-route__place{display:block;font-weight:600;color:var(--pp-ink);line-height:1.35}
.pp-route__line{
  flex:0 0 34%;position:relative;height:2px;background:var(--pp-accent-tint-3);
  display:flex;align-items:center;justify-content:center;
}
.pp-route__line::before,.pp-route__line::after{
  content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--pp-accent);transform:translateY(-50%);
}
.pp-route__line::before{left:-4px}
.pp-route__line::after{right:-4px}
.pp-route__mode{
  background:#fff;border-radius:var(--pp-r-pill);padding:.35em 1em;
  font-size:var(--pp-fs-xs);font-weight:600;color:var(--pp-accent);
  border:1px solid var(--pp-accent-tint-3);position:relative;
}
.pp-track-handler{margin:16px 0 0;color:var(--pp-ink-muted);font-size:var(--pp-fs-sm)}
.pp-track-handler strong{color:var(--pp-ink)}

/* ---------- Timeline ---------- */
.pp-timeline{margin-top:32px;padding-top:26px;border-top:1px solid var(--pp-border)}
.pp-timeline__title{
  font-size:var(--pp-fs-h4);margin:0 0 18px;font-weight:700;letter-spacing:var(--pp-tr-head);
}
.pp-timeline__step{
  display:flex;gap:16px;position:relative;padding-bottom:22px;
}
.pp-timeline__step:last-child{padding-bottom:0}
.pp-timeline__step::before{
  content:"";position:absolute;left:8px;top:20px;bottom:-2px;width:2px;background:var(--pp-border);
}
.pp-timeline__step:last-child::before{display:none}
.pp-timeline__step.is-done::before{background:var(--pp-accent)}

.pp-timeline__node{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;margin-top:2px;
  border:2px solid var(--pp-border-strong);background:#fff;position:relative;z-index:1;
}
.pp-timeline__step.is-done .pp-timeline__node{background:var(--pp-accent);border-color:var(--pp-accent)}
.pp-timeline__step.is-active .pp-timeline__node{
  border-color:var(--pp-accent);background:#fff;box-shadow:0 0 0 4px var(--pp-accent-tint);
  animation:pp-pulse 2.4s var(--pp-ease-out) infinite;
}
@keyframes pp-pulse{
  0%,100%{box-shadow:0 0 0 4px var(--pp-accent-tint)}
  50%{box-shadow:0 0 0 9px rgba(91,46,157,.10)}
}
.pp-timeline__body{display:flex;flex-direction:column;gap:2px}
.pp-timeline__label{font-weight:600;color:var(--pp-ink)}
.pp-timeline__step.is-pending .pp-timeline__label{color:var(--pp-ink-faint)}
.pp-timeline__note{font-size:var(--pp-fs-sm);color:var(--pp-ink-muted)}
.pp-timeline__step.is-pending .pp-timeline__note{color:var(--pp-ink-faint)}

/* ---------- Plugin tables and detail sections ---------- */
.wpcargo-result .detail-section{margin-top:30px;padding-top:26px;border-top:1px solid var(--pp-border)}
.wpcargo-result #wpcargo-track-header.detail-section{border-top:0;padding-top:0;margin-top:0}

.wpcargo-result h2,.wpcargo-result h4{
  font-size:var(--pp-fs-h4);font-weight:700;letter-spacing:var(--pp-tr-head);
  margin:0 0 14px;color:var(--pp-ink);
}

.wpcargo-result table{
  width:100%;border-collapse:collapse;margin:0 0 6px;
  font-size:var(--pp-fs-sm);
}
.wpcargo-result table th{
  text-align:left;background:var(--pp-accent-tint);color:var(--pp-ink);
  font-weight:600;font-size:var(--pp-fs-xs);text-transform:uppercase;
  letter-spacing:var(--pp-tr-label);
  padding:12px 14px;border:0;border-bottom:1px solid var(--pp-border);
}
.wpcargo-result table td{
  padding:12px 14px;border:0;border-bottom:1px solid var(--pp-border);
  color:var(--pp-ink-soft);vertical-align:top;
}
.wpcargo-result table tr:last-child td{border-bottom:0}
/* No zebra striping: hairline rows only. */
.wpcargo-result table tr:nth-child(odd){background:transparent}

.wpcargo-result .wpcargo-col-md-6,
.wpcargo-result .wpcargo-col-md-4,
.wpcargo-result .wpcargo-col-md-12{padding:0}

/* WPCargo's status band */
.wpcargo-result .shipment-status,
.wpcargo-result .wpcargo-status-bar{
  background:var(--pp-accent-tint);color:var(--pp-accent);
  font-weight:700;text-transform:uppercase;letter-spacing:var(--pp-tr-label);
  font-size:var(--pp-fs-xs);padding:12px 16px;border-radius:var(--pp-r-sm);
  text-align:center;margin:26px 0 0;
}

/* Map area */
.wpcargo-result #wpcargo-map,
.wpcargo-result .wpcargo-map,
.wpcargo-result .map-container{
  border-radius:var(--pp-r-md);overflow:hidden;border:1px solid var(--pp-border);
  margin-top:14px;min-height:280px;
}

/* No results */
.wpcargo-result h3[style*="red"]{
  color:var(--pp-ink)!important;background:var(--pp-accent-tint);
  border-radius:var(--pp-r-md);font-size:var(--pp-fs-body)!important;
  font-weight:500;line-height:1.6;padding:22px!important;text-align:left!important;
  max-width:620px;margin:0 auto!important;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .pp-route{flex-direction:column;align-items:flex-start;gap:14px}
  .pp-route__end--to{text-align:left}
  .pp-route__line{
    flex:0 0 auto;width:2px;height:40px;margin-left:5px;
  }
  .pp-route__line::before{left:-4px;top:0}
  .pp-route__line::after{right:auto;left:-4px;top:auto;bottom:-10px}
  .pp-route__mode{position:absolute;left:18px;white-space:nowrap}
}
@media (max-width:767px){
  .wpcargo-track .track_form_tr{flex-direction:column}
  .wpcargo-track .track_form_td.submit-track{width:100%}
  .wpcargo-track input#submit_wpcargo{width:100%;min-height:48px}
  .wpcargo-result.wpcargo{padding:20px 16px;border-radius:var(--pp-r-md);margin-top:-32px}
  #wpcargo-result-wrapper{padding:0 16px}
  /* Detail tables reflow to stacked rows rather than scrolling sideways. */
  .wpcargo-result table,
  .wpcargo-result table tbody,
  .wpcargo-result table tr,
  .wpcargo-result table td{display:block;width:100%}
  .wpcargo-result table thead{position:absolute;left:-9999px}
  .wpcargo-result table tr{
    border:1px solid var(--pp-border);border-radius:var(--pp-r-sm);
    padding:6px 10px;margin-bottom:10px;
  }
  .wpcargo-result table td{border-bottom:1px solid var(--pp-border);padding:9px 0}
  .wpcargo-result table tr td:last-child{border-bottom:0}
}

/* ---------- Print ---------- */
@media print{
  body *{visibility:hidden}
  #wpcargo-result-wrapper,#wpcargo-result-wrapper *{visibility:visible}
  #wpcargo-result-wrapper{position:absolute;left:0;top:0;width:100%;padding:0}
  .wpcargo-result.wpcargo{box-shadow:none;margin-top:0;border:1px solid var(--pp-border)}
  .pp-track-actions{display:none}
  .pp-timeline__step.is-active .pp-timeline__node{animation:none}
}

/* ---------- Journey map ---------- */
.pp-map-block{margin-top:26px}
.pp-map-current{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 12px;font-size:var(--pp-fs-sm);color:var(--pp-ink-muted);
}
.pp-map-current strong{color:var(--pp-ink);font-weight:600}
.pp-map-current__dot{
  width:9px;height:9px;border-radius:50%;background:var(--pp-accent);
  box-shadow:0 0 0 4px var(--pp-accent-tint);flex:0 0 auto;
}
.pp-map{
  height:340px;width:100%;
  border-radius:var(--pp-r-md);
  border:1px solid var(--pp-border);
  overflow:hidden;
  background:var(--pp-accent-tint);
  z-index:0; /* keep tiles under the sticky header */
}

/* Markers, drawn from the palette rather than image sprites */
.pp-pin{display:block;position:relative;width:26px;height:26px}
.pp-pin__dot{
  position:absolute;inset:6px;border-radius:50%;
  background:#fff;border:3px solid var(--pp-accent);
  box-shadow:0 2px 6px -2px rgba(69,33,122,.5);
}
.pp-pin__drop{
  position:absolute;left:3px;top:0;width:20px;height:26px;
  background:var(--pp-accent);
  border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  clip-path:path('M10 26C10 26 20 15.5 20 9.6A10 10 0 1 0 0 9.6C0 15.5 10 26 10 26Z');
  box-shadow:0 3px 8px -3px rgba(69,33,122,.6);
}
.pp-pin__drop::after{
  content:"";position:absolute;left:6px;top:5px;width:8px;height:8px;
  border-radius:50%;background:#fff;
}
.pp-pin.is-current .pp-pin__core{
  position:absolute;inset:7px;border-radius:50%;
  background:var(--pp-accent);border:3px solid #fff;
  box-shadow:0 2px 8px -2px rgba(69,33,122,.7);
}
.pp-pin__pulse{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(91,46,157,.28);
  animation:pp-map-pulse 2.4s var(--pp-ease-out) infinite;
}
@keyframes pp-map-pulse{
  0%{transform:scale(.55);opacity:.9}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
.pp-map--still .pp-pin__pulse{animation:none;opacity:.35;transform:scale(1)}

/* Leaflet chrome, themed */
.pp-map .leaflet-container{font-family:var(--pp-font);background:var(--pp-accent-tint)}
.pp-map .leaflet-control-zoom a{
  color:var(--pp-ink);border-radius:8px;border-color:var(--pp-border);
  font-weight:600;
}
.pp-map .leaflet-control-zoom a:hover{background:var(--pp-accent-tint);color:var(--pp-accent)}
.pp-map .leaflet-control-attribution{
  background:rgba(255,255,255,.86);font-size:10.5px;color:var(--pp-ink-muted);
  border-radius:6px 0 0 0;padding:2px 7px;
}
.pp-map .leaflet-control-attribution a{color:var(--pp-accent)}
.pp-map .leaflet-popup-content-wrapper{
  border-radius:var(--pp-r-sm);box-shadow:var(--pp-shadow-md);
}
.pp-map .leaflet-popup-content{
  font-family:var(--pp-font);font-size:var(--pp-fs-sm);
  line-height:1.5;color:var(--pp-ink);margin:11px 13px;
}
.pp-map .leaflet-popup-content strong{font-weight:700}

@media (max-width:767px){
  .pp-map{height:250px}
}
@media print{
  .pp-map{height:220px}
  .pp-map .leaflet-control-zoom{display:none}
}