/* === MAS: 4-Step Tracking (Amazon-style) === */
:root{
  --mas-accent:#21b36b;      /* set to your status green */
  --mas-rail:#dcdcdc;
  --mas-card-border:#e6e6e6;
  --mas-card-radius:8px;
}

/* Card */
.mas-op.card-like{
  border:1px solid var(--mas-card-border);
  border-radius:var(--mas-card-radius);
  padding:18px 22px;
  background:#fff;
  margin:18px 0 22px;
  width:100%;
  box-sizing:border-box;
}
.mas-op-title{margin:0 0 10px;font-size:20px;line-height:1.25;font-weight:700}

/* Steps (dot + centered label) */
.mas-op-steps{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin:12px 0 8px;
  position:relative;
}
.mas-op-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  flex:1 1 0;
  min-width:44px;
}

/* Connector to next step (centered through dot) */
.mas-op-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:9px;
  transform:translateY(-50%);
  left:50%;
  width:100%;
  height:4px;
  background:var(--mas-rail);
  border-radius:9999px;
  z-index:0;
}

/* Dot */
.mas-op-step .dot{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--mas-rail);
  position:relative;z-index:1;
}
.mas-op-step.is-complete .dot,
.mas-op-step.is-current .dot{
  background:var(--mas-accent);
  border-color:var(--mas-accent);
}
/* Completed connector becomes green */
.mas-op-step.is-complete:not(:last-child)::after{ background:var(--mas-accent); }

/* Label */
.mas-op-step .label{margin-top:6px;font-size:14px;color:#666;white-space:nowrap}
.mas-op-step.is-current .label{color:#111;font-weight:700}

/* Caption & meta */
.mas-op-caption{margin:8px 0 0;font-size:13px;color:#777}
.mas-op-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:14px;font-size:14px}

/* Track package button theme override */
.woocommerce a.button.track,
.woocommerce button.button.track,
.woocommerce .button.track {
  background: #ffb106 !important;   /* <-- change to your color */
  border-color: #ffb106 !important;
  color: #ffffff !important;         /* text color */
}

/* Hover/focus */
.woocommerce a.button.track:hover,
.woocommerce button.button.track:hover,
.woocommerce .button.track:hover,
.woocommerce a.button.track:focus,
.woocommerce button.button.track:focus,
.woocommerce .button.track:focus {
  background: #000000 !important;   /* darker hover */
  border-color: #000000 !important;
  color: #ffffff !important;
}

.track{
    margin-left: 10px;
}


/* Responsive */
@media (max-width: 768px){
  .mas-op-title{font-size:18px}
  .mas-op-step .dot{width:16px;height:16px}
  .mas-op-step .label{font-size:12px}
}
@media (max-width: 480px){
  .mas-op-title{font-size:16px}
  .mas-op-step{min-width:0}
  .mas-op-step .label{font-size:11.5px}
  .mas-op-meta{grid-template-columns:1fr}
}