/* CareCute Shipping — Frontend CSS */

/* ── Free Shipping Bar ─────────────────────────────────────── */
.carecute-free-bar {
  background: linear-gradient(135deg, #f0f4ff, #f8f0ff);
  border: 1px solid #e0deff;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 20px;
  transition: all .3s ease;
}
.carecute-free-bar.is-free {
  background: linear-gradient(135deg, #f0fff4, #e8f5e9);
  border-color: #c8f0d4;
}
.carecute-bar-text {
  font-size: .85rem;
  color: #444;
  text-align: center;
  margin: 0 0 8px;
  font-weight: 500;
}
.carecute-free-bar.is-free .carecute-bar-text {
  color: #2e7d32;
  font-weight: 700;
}
.carecute-bar-track {
  background: #e0e0f0;
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
}
.carecute-bar-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #6c63ff, #a855f7);
  transition: width .5s ease;
  position: relative;
  overflow: hidden;
}
.carecute-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: carecute-shimmer 2s infinite;
}
@keyframes carecute-shimmer {
  0%  { left: -100%; }
  100%{ left: 100%; }
}
.carecute-free-bar.is-free .carecute-bar-fill {
  background: linear-gradient(90deg, #43e97b, #38f9d7);
  width: 100% !important;
}
.carecute-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: .7rem;
  color: #888;
}
.carecute-bar-current {
  color: #6c63ff;
  font-weight: 700;
}
.carecute-free-bar.is-free .carecute-bar-current {
  color: #2e7d32;
}

/* ── Order Tracking Box ───────────────────────────────────── */
.carecute-order-tracking-box {
  background: #f8f9fa;
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 24px;
}
.carecute-order-tracking-box h3 {
  font-size: .95rem;
  font-weight: 700;
  color: #1a1a2a;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8f0;
}
.carecute-tracking-status {
  margin-bottom: 14px;
}
.carecute-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
}
.carecute-status-shipping {
  background: #fff3e0;
  color: #e65100;
}
.carecute-status-delivered {
  background: #e8f5e9;
  color: #2e7d32;
}
.carecute-status-processing {
  background: #e3f2fd;
  color: #1565c0;
}
.carecute-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.carecute-tracking-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.carecute-carrier-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carecute-carrier-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  letter-spacing: .5px;
}
.carecute-carrier-dpd     { background: #dc0032; }
.carecute-carrier-post_at { background: #FFCC00; color: #333; }
.carecute-carrier-fedex   { background: #4d148c; }
.carecute-carrier-gls     { background: #009cde; }
.carecute-carrier-dhl     { background: #FFCC00; color: #333; }
.carecute-carrier-free    { background: #43e97b; color: #1a1a2a; }

.carecute-tracking-label {
  font-size: .68rem;
  color: #888;
}
.carecute-tracking-number {
  font-family: monospace;
  font-size: .82rem;
  color: #333;
  font-weight: 600;
}
.carecute-track-btn {
  background: #6c63ff !important;
  color: white !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.carecute-track-btn:hover {
  background: #5a52d5 !important;
  color: white !important;
}
.carecute-not-shipped {
  font-size: .82rem;
  color: #888;
  margin: 0;
}

/* ── Orders list tracking link ────────────────────────────── */
.carecute-track-link {
  font-size: .75rem !important;
  padding: 4px 10px !important;
  background: #6c63ff !important;
  color: white !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .carecute-tracking-info { flex-direction: column; align-items: flex-start; }
  .carecute-track-btn { width: 100%; text-align: center; }
}