/* =============================================================================
   ISHCHI EKRANI uslublari (worker.js bilan birga).

   Qoidalar:
     - mavjud dizayn tokenlaridan foydalanadi (--mbx-*, sariq #FFD21F akcent);
     - tugmalar >= 48px (ishchi qo'lqop bilan bosadi), kontrast AA;
     - tungi rejim: [data-theme="dark"] · html.mbx-dark · prefers-color-scheme;
     - prefers-reduced-motion: animatsiyalar o'chadi;
     - ekran xarita ustida turadi, lekin yopiq holatda hech narsani to'smaydi.
   ========================================================================== */

.mbxw {
  --mbxw-accent: var(--mbx-color-accent, #ffd21f);
  --mbxw-on-accent: var(--mbx-on-accent, #111417);
  --mbxw-brand: var(--mbx-color-brand, #ff6a00);
  --mbxw-bg: var(--mbx-color-surface, #ffffff);
  --mbxw-soft: var(--mbx-color-surface-muted, #f0f2f5);
  --mbxw-ink: var(--mbx-color-ink, #101418);
  --mbxw-muted: var(--mbx-color-ink-muted, #626b76);
  --mbxw-line: var(--mbx-color-line, #e1e5ea);
  --mbxw-danger: var(--mbx-color-danger, #c43131);
  --mbxw-success: var(--mbx-color-success, #16834a);
  --mbxw-radius: var(--mbx-radius-lg, 18px);
  --mbxw-shadow: var(--mbx-shadow-lg, 0 18px 55px rgb(16 20 24 / 13%));
  --mbxw-target: 48px;

  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 470px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--mbxw-bg);
  color: var(--mbxw-ink);
  border-radius: var(--mbxw-radius) var(--mbxw-radius) 0 0;
  border-top: 1px solid var(--mbxw-line);
  box-shadow: var(--mbxw-shadow);
  font: 500 15px/1.4 var(--mbx-font-body, Inter, system-ui, sans-serif);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.mbxw[hidden] { display: none !important; }

.mbxw *,
.mbxw *::before,
.mbxw *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- yuqori panel */

.mbxw-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.mbxw-online-wrap { display: grid; gap: 3px; min-width: 0; }

.mbxw-online {
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid var(--mbxw-line);
  border-radius: 16px;
  background: var(--mbxw-soft);
  color: var(--mbxw-ink);
  font: 800 17px/1.1 inherit;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
}

.mbxw-online.is-on {
  background: var(--mbxw-success);
  border-color: var(--mbxw-success);
  color: #ffffff;
}

.mbxw-online-hint { color: var(--mbxw-muted); font-size: 12px; }

.mbxw-stat { display: grid; justify-items: end; gap: 2px; }
.mbxw-stat-val { font-size: 17px; font-weight: 800; white-space: nowrap; }
.mbxw-stat-key { color: var(--mbxw-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

.mbxw-icon {
  width: var(--mbxw-target);
  height: var(--mbxw-target);
  min-width: var(--mbxw-target);
  border: 0;
  border-radius: 14px;
  background: var(--mbxw-soft);
  color: var(--mbxw-ink);
  font-size: 18px;
  cursor: pointer;
}

/* --------------------------------------------------------------- belgilar */

.mbxw-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.mbxw-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 12px/1.2 inherit;
  border: 1px solid transparent;
}

.mbxw-badge[hidden] { display: none !important; }
.mbxw-badge-danger { background: #fdecec; color: #8d1f1f; border-color: #f3c3c3; }
.mbxw-badge-warn { background: #fff6d6; color: #7a5600; border-color: #f0dfa6; }
.mbxw-badge-pause { background: #e8eefb; color: #23406f; border-color: #c9d7f0; }

/* ----------------------------------------------------------------- taklif */

.mbxw-offer {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid var(--mbxw-accent);
  background: var(--mbx-color-accent-soft, #fff8d6);
}

.mbxw-offer[hidden] { display: none !important; }
.mbxw-offer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mbxw-offer-title { font-size: 17px; font-weight: 800; }
.mbxw-offer-info { margin: 0; font-size: 15px; }

.mbxw-timer {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 54px;
  border-radius: 50%;
  background: var(--mbxw-accent);
  color: var(--mbxw-on-accent);
  font: 800 22px/1 inherit;
  animation: mbxw-pulse 1s ease-in-out infinite;
}

@keyframes mbxw-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* --------------------------------------------------------------- buyurtma */

.mbxw-order {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--mbxw-line);
  background: var(--mbxw-soft);
}

.mbxw-order[hidden] { display: none !important; }
.mbxw-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mbxw-addr { font-size: 17px; font-weight: 800; }

.mbxw-chip {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mbxw-bg);
  border: 1px solid var(--mbxw-line);
  font: 700 12px/1.2 inherit;
}

.mbxw-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--mbxw-muted); font-size: 13px; }

.mbxw-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbxw-step {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--mbxw-bg);
  border: 1px solid var(--mbxw-line);
  color: var(--mbxw-muted);
  font: 700 11.5px/1.2 inherit;
}

.mbxw-step.is-done { color: var(--mbxw-muted); border-style: dashed; }
.mbxw-step.is-now {
  background: var(--mbxw-accent);
  border-color: var(--mbxw-accent);
  color: var(--mbxw-on-accent);
}

/* -------------------------------------------------------- harakat rejimi */

.mbxw-minimal {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--mbxw-ink);
  color: #ffffff;
}

.mbxw-minimal[hidden] { display: none !important; }
.mbxw-maneuver { font-size: 20px; font-weight: 800; }
.mbxw-eta { font-size: 15px; opacity: .92; }

/* ---------------------------------------------------------------- tugmalar */

.mbxw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbxw-actions[hidden] { display: none !important; }
.mbxw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mbxw-btn {
  min-height: var(--mbxw-target);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--mbxw-line);
  background: var(--mbxw-bg);
  color: var(--mbxw-ink);
  font: 800 16px/1.2 inherit;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.mbxw-btn:active { transform: scale(.985); }
.mbxw-btn[disabled] { opacity: .55; cursor: not-allowed; }

.mbxw-btn-primary {
  min-height: 56px;
  background: var(--mbxw-accent);
  border-color: var(--mbxw-accent);
  color: var(--mbxw-on-accent);
  font-size: 17px;
}

.mbxw-btn-ok { background: var(--mbxw-success); border-color: var(--mbxw-success); color: #ffffff; }
.mbxw-btn-ghost { background: var(--mbxw-soft); }
.mbxw-btn-soft { background: var(--mbxw-soft); font-size: 15px; }

.mbxw-btn:focus-visible,
.mbxw-online:focus-visible,
.mbxw-sos:focus-visible,
.mbxw-icon:focus-visible {
  outline: 3px solid var(--mbxw-brand);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- SOS */

.mbxw-sos {
  position: sticky;
  bottom: 0;
  justify-self: stretch;
  min-height: 60px;
  border: 0;
  border-radius: 16px;
  background: var(--mbxw-danger);
  color: #ffffff;
  font: 900 20px/1 inherit;
  letter-spacing: .12em;
  cursor: pointer;
}

.mbxw-sos.is-sent { background: #7a1414; }
.mbxw-sos[aria-pressed="true"] { animation: mbxw-sos-blink .9s steps(2, start) infinite; }

@keyframes mbxw-sos-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.mbxw-status { margin: 0; min-height: 18px; color: var(--mbxw-muted); font-size: 13px; }

/* --------------------------------------------------------------- tungi rejim */

[data-theme="dark"] .mbxw,
html.mbx-dark .mbxw {
  --mbxw-bg: var(--mbx-color-surface, #151a20);
  --mbxw-soft: var(--mbx-color-surface-muted, #1d232b);
  --mbxw-ink: var(--mbx-color-ink, #f3f5f7);
  --mbxw-muted: var(--mbx-color-ink-muted, #aeb8c3);
  --mbxw-line: var(--mbx-color-line, #303944);
}

[data-theme="dark"] .mbxw-badge-danger,
html.mbx-dark .mbxw-badge-danger { background: #3b181b; color: #ffb4b4; border-color: #5a2a2e; }

[data-theme="dark"] .mbxw-badge-warn,
html.mbx-dark .mbxw-badge-warn { background: #3d3014; color: #f3d68a; border-color: #5a4720; }

[data-theme="dark"] .mbxw-badge-pause,
html.mbx-dark .mbxw-badge-pause { background: #142b49; color: #a9c9ff; border-color: #2b4670; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not(.mbx-light) .mbxw {
    --mbxw-bg: var(--mbx-color-surface, #151a20);
    --mbxw-soft: var(--mbx-color-surface-muted, #1d232b);
    --mbxw-ink: var(--mbx-color-ink, #f3f5f7);
    --mbxw-muted: var(--mbx-color-ink-muted, #aeb8c3);
    --mbxw-line: var(--mbx-color-line, #303944);
  }

  html:not([data-theme="light"]):not(.mbx-light) .mbxw-badge-danger { background: #3b181b; color: #ffb4b4; border-color: #5a2a2e; }
  html:not([data-theme="light"]):not(.mbx-light) .mbxw-badge-warn { background: #3d3014; color: #f3d68a; border-color: #5a4720; }
  html:not([data-theme="light"]):not(.mbx-light) .mbxw-badge-pause { background: #142b49; color: #a9c9ff; border-color: #2b4670; }
}

/* ------------------------------------------------- kichik ekran va harakat */

@media (max-width: 380px) {
  .mbxw { padding: 12px 10px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mbxw-top { grid-template-columns: 1fr auto; row-gap: 6px; }
  .mbxw-stat { grid-column: span 1; justify-items: start; }
  .mbxw-actions, .mbxw-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mbxw-timer,
  .mbxw-sos[aria-pressed="true"] { animation: none !important; }
  .mbxw-btn { transition: none !important; }
  .mbxw-btn:active { transform: none !important; }
}