/* ============================================================
   SoBotz Shipping Estimates — front end.
   Design tokens with fallbacks, so it still looks right if the
   SoBotz theme is not the active theme.
   ============================================================ */

.sbs-estimate{
  margin:22px 0;
  padding:16px 18px;
  background:var(--bg-1, #f7f7f7);
  border:1px solid var(--line-soft, rgba(12,30,35,.08));
  border-left:3px solid var(--teal, #19c6c9);
  border-radius:var(--r, 10px);
}
.sbs-estimate .sbs-label{
  display:block;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint, #5a6d72);
  margin-bottom:6px;
}
.sbs-estimate .sbs-range{
  margin:0; font-size:17px; line-height:1.35;
  color:var(--text, #1a1a1a);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.sbs-estimate .sbs-range strong{ font-weight:600; }
.sbs-estimate .sbs-where{ font-size:13.5px; color:var(--text-dim, #666); }
.sbs-estimate .sbs-dates{ margin:5px 0 0; font-size:14px; color:var(--text-dim, #666); }
.sbs-estimate .sbs-dates b{ color:var(--text, #1a1a1a); font-weight:600; }
.sbs-estimate .sbs-note{ margin:8px 0 0; font-size:12.5px; color:var(--text-faint, #888); }

.sbs-estimate .sbs-packing{ margin:6px 0 0; font-size:13.5px; color:var(--text-dim, #666); }

/* pickup reads as a place, not a countdown */
.sbs-estimate.sbs-pickup{ border-left-color:var(--amber, #f0a93d); }

/* ---------- the progress track on an order ---------- */
.sbs-timeline .sbs-rail{
  position:relative; height:3px; border-radius:3px;
  background:var(--line-soft, rgba(12,30,35,.10));
  /* no side margin: the rail has to span exactly the same box as the step grid,
     or the fill percentage lands a few pixels off its own dot */
  margin:18px 0 0;
}
.sbs-timeline .sbs-rail > span{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--teal-deep, #0c9499), var(--teal, #19c6c9));
  /* width is set inline, per order */
}
.sbs-timeline .sbs-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
}
/* an unpaid / bank-transfer order carries an extra "Payment" bubble */
.sbs-timeline .sbs-steps--5{ grid-template-columns:repeat(5, 1fr); }
/* the grid gap must stay 0: the fill is a percentage of the RAIL, while the
   dots are centred in grid columns — any gap moves them apart and the line
   stops short of (or past) its own dot. Breathing room comes from the padding. */
.sbs-timeline .sbs-steps li{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  margin:0; padding:0 4px;
}
.sbs-timeline .sbs-dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--bg-2, #e7eded); border:2px solid var(--line-soft, rgba(12,30,35,.10));
  margin-top:-8px; /* sits on the rail */
  transition:.2s ease;
}
/* Three states, deliberately different shapes as well as colours, because
   colour alone was not telling people where the order actually was:
     passed   — small solid teal dot
     now      — larger teal dot with a halo (this is where you are)
     upcoming — hollow grey ring  */
.sbs-timeline li.is-done .sbs-dot{ background:var(--teal, #19c6c9); border-color:var(--teal, #19c6c9); }
.sbs-timeline li.is-now .sbs-dot{
  width:17px; height:17px; margin-top:-10px;
  background:var(--teal, #19c6c9); border-color:var(--teal, #19c6c9);
  box-shadow:0 0 0 5px var(--teal-glow, rgba(25,198,201,.18));
}
.sbs-timeline li.is-now .sbs-step-name{ font-weight:600; }
/* waiting on the customer: amber, and it must not read as "done" */
.sbs-timeline li.is-waiting .sbs-dot{
  background:var(--bg-1, #fff); border-color:var(--amber, #f0a93d);
  box-shadow:0 0 0 5px rgba(240,169,61,.16);
}
/* the amber used for the dot is too light to read as TEXT on a pale page, so
   the label gets a darker one (4.6:1) while the dot keeps the bright colour */
.sbs-timeline li.is-waiting .sbs-step-name,
.sbs-timeline li.is-waiting .sbs-step-date{ color:#8a5500; }
@media (prefers-color-scheme: dark){
  .sbs-timeline li.is-waiting .sbs-step-name,
  .sbs-timeline li.is-waiting .sbs-step-date{ color:var(--amber, #f0a93d); }
}
html[data-theme="dark"] .sbs-timeline li.is-waiting .sbs-step-name,
html[data-theme="dark"] .sbs-timeline li.is-waiting .sbs-step-date{ color:var(--amber, #f0a93d); }
html[data-theme="light"] .sbs-timeline li.is-waiting .sbs-step-name,
html[data-theme="light"] .sbs-timeline li.is-waiting .sbs-step-date{ color:#8a5500; }
.sbs-timeline li.is-failed .sbs-dot{
  background:var(--danger, #ff6b5e); border-color:var(--danger, #ff6b5e);
  box-shadow:0 0 0 5px rgba(255,107,94,.16);
}
.sbs-timeline li.is-failed .sbs-step-name,
.sbs-timeline li.is-failed .sbs-step-date{ color:var(--danger, #c0392b); }
.sbs-timeline .sbs-step-name{
  font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint, #888); line-height:1.25;
}
.sbs-timeline li.is-done .sbs-step-name,
.sbs-timeline li.is-now .sbs-step-name{ color:var(--text, #1a1a1a); }
.sbs-timeline .sbs-step-date{ font-size:12.5px; color:var(--text-dim, #666); line-height:1.3; }
.sbs-timeline .sbs-packing, .sbs-timeline .sbs-note{ margin-top:14px; }

/* phones: the four columns become a vertical ladder, which reads better than
   four 70px columns of wrapped text */
@media (max-width:560px){
  .sbs-timeline .sbs-rail{ display:none; }
  .sbs-timeline .sbs-steps{ grid-template-columns:1fr; gap:0; margin-top:14px; }
  .sbs-timeline .sbs-steps li{
    flex-direction:row; align-items:baseline; text-align:left; gap:12px;
    position:relative; padding:0 0 14px 24px;
  }
  .sbs-timeline .sbs-steps li:not(:last-child)::before{
    content:''; position:absolute; left:5px; top:12px; bottom:0; width:2px;
    background:var(--line-soft, rgba(12,30,35,.10));
  }
  .sbs-timeline .sbs-steps li.is-done:not(:last-child)::before{ background:var(--teal, #19c6c9); }
  .sbs-timeline .sbs-dot{ position:absolute; left:0; top:4px; margin:0; }
  .sbs-timeline .sbs-step-date{ margin-left:auto; }
}

/* the extra row in the cart / checkout totals table (classic templates) */
.sbs-totals-row td small{ display:block; color:var(--text-faint, #888); font-size:12px; margin-top:2px; }

/* the same panel injected into the Cart / Checkout blocks — it sits inside
   WooCommerce's own totals column, so it has to be tighter than the standalone
   version and must not inherit the block's centred/right-aligned text */
.sbs-estimate.sbs-block{
  margin:12px 0; padding:12px 14px; text-align:left;
}
.sbs-estimate.sbs-block .sbs-range{ font-size:15px; }
.sbs-estimate.sbs-block .sbs-dates{ font-size:13px; }
.sbs-estimate.sbs-block .sbs-note{ font-size:12px; }

/* the note under the pickup option in the shipping method list */
.sbs-pickup-note{
  display:block; margin:4px 0 2px; padding-left:2px;
  font-size:12.5px; line-height:1.45; color:var(--text-dim, #666);
}
.sbs-pickup-note b{ display:block; color:var(--text, #1a1a1a); font-weight:600; }

/* [sobotz_shipping_times] */
.sbs-table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
.sbs-table th{
  text-align:left; padding:0 12px 10px;
  font-family:var(--mono, ui-monospace, monospace); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint, #5a6d72);
  border-bottom:1px solid var(--line-strong, rgba(12,148,153,.30));
}
.sbs-table td{ padding:10px 12px; border-bottom:1px solid var(--line-soft, rgba(12,30,35,.08)); color:var(--text-read, #2c3b41); }
.sbs-table tr.sbs-group th{ padding-top:22px; border-bottom:none; color:var(--teal-text, #19c6c9); }
.sbs-table tr.sbs-default td{ font-style:italic; color:var(--text-dim, #666); }