/* =============================================================================
   117-buyruq: TALAB YORLIQLARI uslubi (ega suratiga mos).
   Kichik oq kartochka: sarlavha + bonus (yashil) + kutish vaqti (kulrang) + o'q.
   Eng katta talab zonasi — to'q qizil karta.
   ============================================================================= */
.dl-marker { z-index: 900 !important; }
.dl-holder {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-9999px, -9999px);   /* Leaflet o'lchamini oldini olish */
  pointer-events: none;
}

/* Kartochka markazdan chapga-yuqoriga suriladi (suratda shunday) */
.dl-holder > .dl-card {
  position: absolute;
  left: 8px;
  bottom: 10px;
  pointer-events: auto;
}

.dl-card {
  min-width: 150px;
  max-width: 210px;
  padding: 9px 11px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(20, 25, 40, .22);
  cursor: pointer;
  font: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
  /* Suratdagidek chapdan kichik cho'ziq (leader) chiziq */
}
.dl-card:active { transform: scale(.97); }

.dl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dl-head b {
  font-size: 14.5px;
  font-weight: 800;
  color: #14130F;
  line-height: 1.2;
}
.dl-chev { color: #B4BAC4; display: flex; }
.dl-chev svg { width: 16px; height: 16px; }

.dl-bonus {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  color: #15803D;                 /* yashil — daromad */
  line-height: 1.2;
}
.dl-wait {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: #79808B;
  line-height: 1.25;
}

/* Eng katta talab — qizil karta (suratdagi «Talab juda yuqori») */
.dl-card.is-top {
  background: #D81E32;
  box-shadow: 0 6px 20px rgba(216, 30, 50, .38);
}
.dl-card.is-top .dl-head b { color: #fff; font-size: 15px; }
.dl-card.is-top .dl-chev { color: rgba(255, 255, 255, .85); }
.dl-card.is-top .dl-bonus { color: #FFE9A8; }
.dl-card.is-top .dl-wait { color: rgba(255, 255, 255, .88); }

/* Ishonchsiz ma'lumot — xira (spec 3) */
.dl-card.is-weak { opacity: .62; }

/* Zonaga bog'lovchi kichik nuqta */
.dl-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #D81E32;
  box-shadow: 0 1px 4px rgba(20, 25, 40, .3);
  pointer-events: none;
}
.dl-card.is-top + .dl-dot { border-color: #D81E32; }

/* Tungi rejim (spec 15) */
@media (prefers-color-scheme: dark) {
  .dl-card { background: #1D2128; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
  .dl-head b { color: #F4F6F8; }
  .dl-wait { color: #A5ADBA; }
  .dl-card.is-top { background: #C41C2E; }
}

/* Harakatni kamaytirish (spec 15) */
@media (prefers-reduced-motion: reduce) {
  .dl-card { transition: none; }
  .dl-card:active { transform: none; }
}