/* =============================================================================
   118-buyruq: ZONA BATAFSIL PANELI uslubi (spec 8).
   Pastdan chiqadigan karta; xarita navigatsiyasini to'smaydi (pastki panel ustida).
   ============================================================================= */
.dp-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;                 /* pastki paneldan (60) yuqori, lekin modal emas */
  display: flex;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.dp-host[hidden] { display: none; }

.dp-panel {
  pointer-events: auto;
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 -6px 28px rgba(20, 25, 40, .22);
  padding: 14px 16px 16px;
  animation: dp-in .18s ease-out;
}

@keyframes dp-in {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dp-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.dp-flame { font-size: 22px; line-height: 1; }
.dp-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-title b { font-size: 15.5px; font-weight: 900; color: #B3182A; letter-spacing: .2px; }
.dp-sub { font-size: 12.5px; font-weight: 600; color: #79808B; }
.dp-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #F1F3F6;
  color: #2A2F37;
  font-size: 15px;
  cursor: pointer;
  flex: 0 0 auto;
}
.dp-close:active { background: #E6E9EE; }

.dp-body { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.dp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: #F6F8FA;
}
.dp-label { font-size: 13.5px; font-weight: 600; color: #5E646E; }
.dp-value { display: flex; align-items: baseline; gap: 6px; }
.dp-value b { font-size: 15px; font-weight: 800; color: #14130F; }
.dp-hint { font-style: normal; font-size: 11px; font-weight: 700; color: #8A9099; }

.dp-bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: 12px;
  background: #F0FBF4;
  border: 1px solid #CFEEDB;
  margin-bottom: 8px;
}
.dp-bonus .dp-label { color: #15803D; }
.dp-bonus b { font-size: 17px; font-weight: 900; color: #15803D; }

.dp-note { margin: 0 0 10px; font-size: 11.5px; color: #79808B; line-height: 1.4; }
.dp-predicted { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #5E646E; }

.dp-actions { display: flex; gap: 9px; }
.dp-btn {
  flex: 1 1 0;
  min-height: 46px;
  border: 1px solid #E6E9EE;
  border-radius: 13px;
  background: #fff;
  color: #14130F;
  font: inherit;
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
}
.dp-btn.is-primary { background: #FFD21F; border-color: #F2C400; }
.dp-btn:active { transform: scale(.98); }

/* Tungi rejim */
@media (prefers-color-scheme: dark) {
  .dp-panel { background: #1D2128; box-shadow: 0 -6px 28px rgba(0, 0, 0, .5); }
  .dp-row { background: #252A33; }
  .dp-label { color: #A5ADBA; }
  .dp-value b { color: #F4F6F8; }
  .dp-close { background: #252A33; color: #E4E7EB; }
  .dp-bonus { background: #16301F; border-color: #1E4A2E; }
  .dp-btn { background: #252A33; border-color: #313846; color: #F4F6F8; }
  .dp-btn.is-primary { background: #FFD21F; color: #14130F; }
}

/* Harakatni kamaytirish */
@media (prefers-reduced-motion: reduce) {
  .dp-panel { animation: none; }
  .dp-btn:active { transform: none; }
}

/* Planshet va kattaroq ekran — panel o'ng tomonda turadi */
@media (min-width: 760px) {
  .dp-host { justify-content: flex-end; padding-right: 18px; padding-bottom: 18px; }
  .dp-panel { max-width: 360px; }
}