/* ===== Timeline Tracking History Styles — improved wrapping to avoid overflow on mobile =====
   Tweak only the variables in :root for micro adjustments.
*/

/* CSS variables */
:root{
  /* thickness of the green bar */
  --fst-bar-width: 12px;
  /* diameter of large final circle */
  --fst-final-size: 44px;
  /* diameter of small white dot inside bar */
  --fst-dot-size: 6px;
  /* gap between final circle edge and content */
  --fst-offset-gap: 20px;
  /* default green color used for the bar and final marker */
  --fst-color: #15893a;
  --fst-dot-shadow: rgba(0,0,0,0.04);

  /* safe min/max for padding-left so content doesn't overlap the timeline */
  --fst-padding-min: 72px;   /* minimum left padding for very small screens */
  --fst-padding-max: 220px;  /* maximum left padding for very large screens */
}

/* Base box-sizing for the plugin area to avoid overflow surprises */
.fst-tracking-box, .fst-tracking-box * {
  box-sizing: border-box;
}

/* Ensure tracking box content will wrap and not overflow parent */
.fst-tracking-box {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Calculate padding-left so final circle doesn't overlap text:
   Preferred padding-left = barCenter + final-radius + offset gap
   We expose the padding as --fst-padding-left so we can compute the bar's left edge
*/
.fst-timeline{
  position: relative;
  --fst-padding-left: clamp(var(--fst-padding-min), calc(48px + (var(--fst-final-size) / 2) + var(--fst-offset-gap)), var(--fst-padding-max));
  padding-left: var(--fst-padding-left);
  margin: 18px 0 28px 0;
  font-family: inherit;
  z-index: 0;
}

/* vertical green bar
   The bar center (x) = calc(var(--fst-padding-left) - (var(--fst-final-size)/2) - var(--fst-offset-gap))
   We position the left edge of the bar by subtracting half the bar width.
*/
.fst-timeline::before{
  content: "";
  position: absolute;
  left: calc(var(--fst-padding-left) - (var(--fst-final-size) / 2) - var(--fst-offset-gap) - (var(--fst-bar-width) / 2));
  top: 8px;
  bottom: 8px;
  width: var(--fst-bar-width);
  background: var(--fst-color);
  border-radius: 10px;
  z-index: 1;
}

/* timeline row */
.fst-timeline-item{
  position: relative;
  margin: 18px 0;
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  min-height: 36px;
}

/* small white dot (non-final rows) centered inside the green bar
   The dot is positioned relative to the .fst-timeline-item, but its horizontal offset is constant:
   left = -(final-radius + offset-gap) so it always lines up with the vertical bar regardless of the padding-left.
*/
.fst-timeline-marker{
  position: absolute;
  left: calc(-1 * ((var(--fst-final-size) / 2) + var(--fst-offset-gap)));
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--fst-dot-size);
  height: var(--fst-dot-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px var(--fst-dot-shadow);
  z-index: 3;
  border: 0px solid rgba(0,0,0,0.02);
}

/* final filled marker: centered on bar and above bar
   For final marker we use the same left calc so it stays centered with the bar
*/
.fst-timeline-marker.final{
  width: var(--fst-final-size);
  height: var(--fst-final-size);
  left: calc(-1 * ((var(--fst-final-size) / 2) + var(--fst-offset-gap)));
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--fst-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

/* final marker variants (colors for specific final statuses) */
.fst-timeline-marker.final.final-on-hold { background: #e2231a; }       /* red */
.fst-timeline-marker.final.final-delayed { background: #F39C12; }       /* orange */
.fst-timeline-marker.final.final-delivered { background: #27AE60; }     /* green */
/* default variant keeps plugin's default green color (var(--fst-color)) */

/* ensure icon in final marker is white and centered */
.fst-timeline-marker.final .dashicons {
  display: inline-block;
  color: #fff !important;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}

/* hide icons in non-final markers */
.fst-timeline-marker:not(.final) .dashicons { display: none; }

/* content area */
.fst-timeline-content {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding-right: 8px;
}

/* labels and text */
.fst-timeline-status-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.fst-timeline-desc-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 6px;
  line-height: 1.1;
}
.fst-timeline-date {
  font-size: 0.86rem;
  color: #666;
  font-weight: 600;
}

/* responsive adjustments: tune sizes and padding-left for narrower screens */
@media (max-width: 900px) {
  .fst-timeline{
    --fst-padding-left: clamp(var(--fst-padding-min), calc(40px + (var(--fst-final-size) / 2) + var(--fst-offset-gap)), 180px);
  }
  :root {
    --fst-final-size: 40px;
    --fst-dot-size: 6px;
    --fst-offset-gap: 16px;
  }
  .fst-timeline::before { left: calc(var(--fst-padding-left) - (var(--fst-final-size) / 2) - var(--fst-offset-gap) - (var(--fst-bar-width) / 2)); }
  .fst-timeline-marker { width: var(--fst-dot-size); height: var(--fst-dot-size); }
  .fst-timeline-marker.final { width: var(--fst-final-size); height: var(--fst-final-size); }
}

/* tighter mobile layout and center shipment facts content */


/* ===== Remaining plugin styles (unchanged) ===== */

/* Shipment facts */
.fst-shipment-fact {
  background: #fff;
  border-radius: 14px;
  border: none;
  box-shadow: none;
  padding: 0 0 24px 0;
  max-width: 700px;
  margin: 0 auto 28px auto;
}
.fst-facts-bar {
  font-weight: bold;
  background: #4d148c;
  color: #fff;
  text-align: left;
  padding: 18px 0 14px 32px;
  border-radius: 14px 14px 0 0;
  font-size: 1.35em;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  width: 97%;
  max-width: 700px;
  box-sizing: border-box;
}

/* Always side-by-side columns */
.fst-facts-columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0;
  padding: 0 32px;
  width: 100%;
}
.fst-facts-col {
  width: 48%;
  min-width: 140px;
}
.fst-facts-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
  gap: 0;
}
.fst-facts-label {
  font-size: 1.08em;
  font-weight: bold;
  color: #222;
  margin-top: 12px;
  margin-bottom: 1px;
  letter-spacing: 0;
  display: block;
}
.fst-facts-bold {
  font-size: 1.08em;
  font-weight: normal;
  color: #222;
  margin-bottom: 14px;
  margin-top: 1px;
  word-break: break-word;
  display: block;
}
.fst-facts-col .fst-facts-label,
.fst-facts-col .fst-facts-bold {
  text-align: left;
}
.fst-facts-columns .fst-facts-col:last-child .fst-facts-label,
.fst-facts-columns .fst-facts-col:last-child .fst-facts-bold {
  text-align: right;
}
/* Ensure always side by side on mobile */
@media (max-width: 650px) {
  .fst-facts-bar {
    padding: 16px 0 12px 14px;
    font-size: 1.15em;
    width: 99%;
  }
  .fst-facts-columns {
    flex-direction: row !important;
    gap: 2vw;
    padding: 0 4vw;
  }
  .fst-facts-col {
    width: 48%;
    min-width: 0;
    margin-bottom: 0;
  }
  .fst-facts-col .fst-facts-label,
  .fst-facts-col .fst-facts-bold {
    text-align: left !important;
  }
  .fst-facts-columns .fst-facts-col:last-child .fst-facts-label,
  .fst-facts-columns .fst-facts-col:last-child .fst-facts-bold {
    text-align: right !important;
  }
}

/* Tracking box & header */
.fst-tracking-box { background: #fff; border-radius: 8px; border: 1px solid #ececec; max-width: 700px; margin: 0 auto 40px auto; padding: 22px 22px 30px 22px; box-shadow: 0 3px 16px 0 rgba(77,20,140,0.08); }
.fst-header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.fst-header h2 { margin: 0 0 7px 0; font-size: 1.25em; }
.fst-status-label { display: inline-block; color: #fff; font-weight: bold; padding: 3px 14px; border-radius: 11px; font-size: 0.93em; vertical-align: middle; margin-bottom: 7px; }
.fst-status-desc { margin: 0 0 6px 0; font-size: 1em; }
.fst-alert { background: #ffdfdf; color: #b40000; padding: 6px 13px; border-radius: 3px; margin: 7px 0 0 0; font-weight: bold; }
.fst-shipment-dates { display: flex; gap: 30px; margin: 10px 0 18px 0; font-size: 1em; }
.fst-shipment-dates > div { font-weight: normal; }
.fst-trackpkg-outer { background: #fff; border-radius: 8px; border: 1px solid #ececec; max-width: 530px; margin: 0 auto 40px auto; padding: 25px 22px 30px 22px; box-shadow: 0 3px 16px 0 rgba(77,20,140,0.08); }
.fst-trackpkg-form { display: flex; flex-direction: column; gap: 19px; }
.fst-trackpkg-input { border: 1px solid #bdbdbd; border-radius: 4px; padding: 13px 12px; font-size: 1.18em; outline: none; transition: border-color 0.18s; }
.fst-trackpkg-input:focus { border-color: #4d148c; }
.fst-trackpkg-btn { display: block; margin: 18px auto 0 auto; background: #4d148c !important; color: #fff !important; font-weight: bold; border: none; border-radius: 5px; padding: 11px 34px; cursor: pointer; font-size: 1.06em; transition: background 0.18s; }
.fst-trackpkg-btn:hover { background: #3a0969 !important; }
.fst-error { background: #ffeaea; color: #b40000; padding: 12px 18px; border-radius: 6px; margin-bottom: 18px; font-weight: bold; }