/* ---------- base ---------- */
::selection { background: #CBAE2D; color: #14213D; }
:focus-visible { outline: 2px solid #CBAE2D; outline-offset: 2px; }
html { scroll-behavior: smooth; }

/* ---------- waybill stub (hero signature element) ---------- */
.waybill {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20,33,61,.06), 0 20px 45px -20px rgba(20,33,61,.35);
}

.waybill::before, .waybill::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  background: #F5F6F8;
  border-radius: 999px;
  transform: translateY(-50%);
  z-index: 2;
}
.waybill::before { left: -13px; }
.waybill::after { right: -13px; }

.waybill-perf {
  border-left: 2px dashed #DADFE6;
  border-right: none;
}
@media (min-width: 768px) {
  .waybill-perf { border-left: 2px dashed #DADFE6; }
}

.barcode {
  height: 42px;
  background-image: repeating-linear-gradient(
    90deg, #14213D 0px, #14213D 2px, transparent 2px, transparent 4px,
    #14213D 4px, #14213D 5px, transparent 5px, transparent 9px,
    #14213D 9px, #14213D 12px, transparent 12px, transparent 14px
  );
  opacity: .85;
}

/* ---------- route strip: dashed path with moving parcel dot ---------- */
.route-strip { position: relative; height: 3px; background: transparent; }
.route-strip .route-line {
  position: absolute; inset: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background-image: repeating-linear-gradient(90deg, #DADFE6 0 8px, transparent 8px 14px);
}
.route-strip .route-dot {
  position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: #CBAE2D; border-radius: 999px; box-shadow: 0 0 0 4px rgba(203,174,45,.18);
  animation: travel 6s linear infinite;
}
@keyframes travel {
  0% { left: 0%; }
  100% { left: 100%; }
}

/* ---------- progress timeline ---------- */
.timeline-track { position: relative; }
.timeline-track .fill {
  transition: width 700ms ease;
}

.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: .55;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.7); opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- ticket cut edge for cards ---------- */
.ticket-notch {
  -webkit-mask-image: radial-gradient(circle 7px at 0 50%, transparent 7px, black 7.5px),
                       radial-gradient(circle 7px at 100% 50%, transparent 7px, black 7.5px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .route-dot { animation: none !important; left: 50% !important; }
  .pulse-dot::after { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- utility ---------- */
.tracking-input {
  letter-spacing: .08em;
}
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #DADFE6; border-radius: 999px; }