/* Лунный шарик — страница доставки.
   Все селекторы под .mb-dostavka, чтобы не задеть остальной сайт. */

.mb-dostavka{
	--mb-paper:#F4F6FA; --mb-surface:#FFF; --mb-ink:#1A2233; --mb-muted:#5E6B80;
	--mb-line:#D7DEE9; --mb-line-soft:#E8EDF4; --mb-brand:#4B3FA8; --mb-brand-soft:#EFEDFB;
	--mb-z1:#11A99A; --mb-z2:#57B989; --mb-z3:#DFA22C; --mb-z4:#E2743B; --mb-z5:#A08163;
	--mb-accent:#D42A5E;
	color:var(--mb-ink); font-size:17px; line-height:1.6;
}
.mb-dostavka *{box-sizing:border-box}
.mb-dostavka h1{font-size:clamp(25px,4.4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0 0 12px}
.mb-dostavka h2{font-size:clamp(19px,2.8vw,23px);font-weight:600;margin:46px 0 12px}
.mb-dostavka h3{font-size:16px;font-weight:600;margin:0 0 10px}
.mb-dostavka p{margin:0 0 14px}
.mb-lede{color:var(--mb-muted);max-width:60ch}

.mb-claims{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.mb-claims li{background:var(--mb-brand-soft);border-radius:999px;padding:7px 15px;font-size:15px}

/* карта и панель */
.mb-tool{display:grid;grid-template-columns:1fr 340px;gap:20px;margin-top:26px;align-items:start}
/* Полотно карты всегда тёмное: на белой странице так читаются
   и дороги, и река, и зональные кольца. */
.mb-mapbox{background:#101923;border:1px solid #101923;border-radius:10px;padding:8px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.mb-map{display:block;width:100%;height:auto}
.mb-bg{fill:#101923}
.mb-msk{fill:#8FA6C2;fill-opacity:.12;stroke:#2C3B4F}
.mb-city{font-size:13px;fill:#93A7BF;font-weight:600}
.mb-river{fill:none;stroke:#4A87CE;stroke-opacity:.85;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mb-road{fill:none;stroke:#8496AD;stroke-opacity:.6;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mb-rdlab{font-size:9px;fill:#93A7BF;opacity:.95}
.mb-ring{fill:none;stroke:#37475C;stroke-width:1;stroke-dasharray:3 4}
.mb-ring.mb-z1{fill:var(--mb-z1);fill-opacity:.20}
.mb-ring.mb-z2{fill:var(--mb-z2);fill-opacity:.13}
.mb-ring.mb-z3{fill:var(--mb-z3);fill-opacity:.09}
.mb-rlab{font-size:10px;fill:#93A7BF}
.mb-hub{fill:#fff}
.mb-hublab{font-size:12px;font-weight:600;fill:#fff;
	paint-order:stroke;stroke:#101923;stroke-width:3px;stroke-linejoin:round}
.mb-hit{fill:transparent;cursor:pointer}
.mb-dot{pointer-events:none}
.mb-pt.mb-z1 .mb-dot{fill:var(--mb-z1)} .mb-pt.mb-z2 .mb-dot{fill:var(--mb-z2)}
.mb-pt.mb-z3 .mb-dot{fill:var(--mb-z3)} .mb-pt.mb-z4 .mb-dot{fill:var(--mb-z4)}
.mb-pt.mb-z5 .mb-dot{fill:var(--mb-z5)}
.mb-ptlab{font-size:10.5px;fill:#fff;pointer-events:none;opacity:0;
	paint-order:stroke;stroke:#101923;stroke-width:3px;stroke-linejoin:round}
.mb-pt:hover .mb-ptlab,.mb-pt:focus .mb-ptlab,.mb-pt.is-on .mb-ptlab{opacity:1}
.mb-pt:focus{outline:none}
.mb-pt:focus .mb-dot,.mb-pt.is-on .mb-dot{r:7;stroke:#fff;stroke-width:2}
.mb-pt.is-dim{opacity:.3}
.mb-pt.is-on .mb-ptlab{font-weight:600}
.mb-undermap{margin:10px 2px 0;font-size:14px}
.mb-undermap a{color:var(--mb-muted)}
.mb-dot{stroke:#101923;stroke-width:1}
.mb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 2px 0;padding:0;list-style:none;font-size:13.5px;color:var(--mb-muted)}
.mb-legend li{display:flex;align-items:center;gap:7px}
.mb-zdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;margin-right:8px;vertical-align:baseline}
.mb-zdot.mb-z1{background:var(--mb-z1)} .mb-zdot.mb-z2{background:var(--mb-z2)}
.mb-zdot.mb-z3{background:var(--mb-z3)} .mb-zdot.mb-z4{background:var(--mb-z4)}
.mb-zdot.mb-z5{background:var(--mb-z5)}

.mb-panel{background:var(--mb-surface);border:1px solid var(--mb-line);border-radius:10px;padding:18px;position:sticky;top:14px}
.mb-panel label{display:block;font-size:14px;color:var(--mb-muted);margin-bottom:6px}
.mb-field{position:relative}
.mb-dostavka input[type=text]{width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--mb-ink);
	background:var(--mb-paper);border:1px solid var(--mb-line);border-radius:7px}
.mb-dostavka input[type=text]:focus{outline:2px solid var(--mb-brand);outline-offset:1px}
.mb-sug{position:absolute;z-index:9;left:0;right:0;top:calc(100% + 4px);background:var(--mb-surface);
	border:1px solid var(--mb-line);border-radius:7px;max-height:250px;overflow:auto;box-shadow:0 12px 28px rgba(20,30,50,.18)}
.mb-sug button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;
	border-bottom:1px solid var(--mb-line-soft);padding:10px 14px;font:inherit;font-size:15px;color:var(--mb-ink);cursor:pointer}
.mb-sug button:last-child{border-bottom:0}
.mb-sug button:hover,.mb-sug button:focus{background:var(--mb-paper);outline:none}
.mb-sug .mb-z{color:var(--mb-muted);font-size:13px;white-space:nowrap}
.mb-empty{padding:13px 14px;color:var(--mb-muted);font-size:15px}
.mb-time{margin-top:18px}
.mb-time-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mb-time-head label{margin:0}
.mb-time-val{font-size:17px;font-weight:600}
.mb-dostavka input[type=range]{width:100%;margin-top:8px;accent-color:var(--mb-brand)}

.mb-result{margin-top:18px;border-top:1px solid var(--mb-line);padding-top:16px}
.mb-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mb-head h4{margin:0;font-size:19px;font-weight:700}
.mb-badge{font-size:12px;padding:3px 10px;border-radius:999px;color:#fff;background:var(--mb-brand);white-space:nowrap}
.mb-km{color:var(--mb-muted);font-size:14px;margin:4px 0 0}
.mb-rows{margin:14px 0 0;padding:0;list-style:none}
.mb-rows li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--mb-line-soft);font-size:15px}
.mb-rows li:last-child{border-bottom:0}
.mb-lab{color:var(--mb-muted)}
.mb-total{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--mb-line)}
.mb-val{font-size:24px;font-weight:700;letter-spacing:-.02em}
.mb-warn{margin-top:12px;padding:12px 14px;border-radius:7px;background:var(--mb-paper);border-left:3px solid var(--mb-accent);font-size:14.5px}
.mb-cta{display:block;margin-top:14px;padding:13px;border-radius:7px;background:var(--mb-brand);
	color:#fff!important;font-weight:600;font-size:16px;text-align:center;text-decoration:none}
.mb-maplink{display:block;margin-top:10px;text-align:center;font-size:14.5px;color:var(--mb-muted);
	text-decoration:none;border:1px solid var(--mb-line);border-radius:7px;padding:10px}
.mb-maplink:hover{color:var(--mb-ink);border-color:var(--mb-muted)}
.mb-hint{color:var(--mb-muted);font-size:14.5px;margin-top:12px}

/* таблицы, шкала, списки */
.mb-scroll{overflow-x:auto;margin:14px 0 8px;border:1px solid var(--mb-line);border-radius:8px;background:var(--mb-surface)}
.mb-dostavka table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;margin:0}
.mb-dostavka th,.mb-dostavka td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--mb-line-soft)}
.mb-dostavka th{font-weight:500;color:var(--mb-muted);font-size:13px;background:none}
.mb-dostavka tr:last-child td{border-bottom:0}
.mb-num{white-space:nowrap;color:var(--mb-muted)}
.mb-ladder{display:flex;margin:14px 0 6px;border-radius:7px;overflow:hidden;border:1px solid var(--mb-line)}
.mb-ladder div{padding:9px 4px;text-align:center;font-size:13px;color:#fff}
.mb-std{background:var(--mb-line-soft);color:var(--mb-ink)}
.mb-s100{background:var(--mb-z1)} .mb-s300{background:var(--mb-z3)} .mb-s500{background:var(--mb-accent)}
.mb-ladder-ticks{display:flex;font-size:12px;color:var(--mb-muted)}
.mb-ladder-ticks span{text-align:center}
.mb-after-ladder{margin-top:16px}
.mb-zsec{background:var(--mb-surface);border:1px solid var(--mb-line);border-radius:8px;padding:16px 18px;margin-bottom:10px}
.mb-places{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px}
.mb-places li{color:var(--mb-muted)}
.mb-pn{color:var(--mb-ink)}
.mb-pk{font-size:13px}
.mb-p24{font-size:12px;color:var(--mb-z1)}
.mb-ppass{font-size:12px;color:var(--mb-z3)}
.mb-faq{background:var(--mb-surface);border:1px solid var(--mb-line);border-radius:8px;margin-bottom:9px}
.mb-faq summary{cursor:pointer;padding:13px 17px;font-weight:600;font-size:16px}
.mb-faq-body{padding:0 17px 15px;color:var(--mb-muted);font-size:15px}

@media (max-width:880px){ .mb-tool{grid-template-columns:1fr} .mb-panel{position:static} }
@media (max-width:600px){
	.mb-dostavka{font-size:16px}
	.mb-ladder div{font-size:11px;padding:7px 2px}
	.mb-ladder-ticks{font-size:10px}
	.mb-ptlab{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .mb-dostavka *{transition:none!important} }


/* --- Панель расчёта: тёмная, в тон карте --- */
.mb-panel{
	background:#16202C;
	border-color:#16202C;
	color:#E4EBF2;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.mb-panel label{color:#92A3B8}
.mb-panel input[type=text]{
	background:#0F1822;
	border-color:#2A3746;
	color:#E4EBF2;
}
.mb-panel input[type=text]::placeholder{color:#6C7D91}
.mb-panel input[type=text]:focus{outline-color:#9B8CF0}
.mb-panel input[type=range]{accent-color:#9B8CF0}
.mb-time-val{color:#fff}
.mb-sug{background:#16202C;border-color:#2A3746;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.mb-sug button{color:#E4EBF2;border-bottom-color:#232F3D}
.mb-sug button:hover,.mb-sug button:focus{background:#0F1822}
.mb-sug .mb-z{color:#92A3B8}
.mb-empty{color:#92A3B8}
.mb-result{border-top-color:#2A3746}
.mb-head h4{color:#fff}
.mb-km{color:#92A3B8}
.mb-rows li{border-bottom-color:#232F3D}
.mb-lab{color:#92A3B8}
.mb-total{border-top-color:#2A3746}
.mb-val{color:#fff}
.mb-warn{background:#0F1822;border-left-color:#FF5C86;color:#C7D3E0}
.mb-hint{color:#92A3B8}
.mb-maplink{border-color:#2A3746;color:#92A3B8}
.mb-maplink:hover{color:#fff;border-color:#4A5A6E}
.mb-cta{background:#6C5CE0}
.mb-cta:hover{background:#7C6DEB}

/* --- Тёмные карточки контента: таблица, шкала, списки, FAQ --- */
.mb-scroll{background:#16202C;border-color:#16202C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.mb-dostavka .mb-scroll table{color:#E4EBF2}
.mb-dostavka .mb-scroll th{color:#92A3B8;border-bottom-color:#2A3746}
.mb-dostavka .mb-scroll td{border-bottom-color:#232F3D}
.mb-dostavka .mb-scroll .mb-num{color:#A9B7C8}

.mb-ladder{border-color:#2A3746}
.mb-std{background:#24313F;color:#C7D3E0}

.mb-zsec{background:#16202C;border-color:#16202C;color:#E4EBF2;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.mb-zsec h3{color:#fff}
.mb-places li{color:#8C9CB0}
.mb-pn{color:#E4EBF2}
.mb-pk{color:#8C9CB0}

.mb-faq{background:#16202C;border-color:#16202C;color:#E4EBF2;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.mb-faq summary{color:#fff}
.mb-faq-body{color:#A9B7C8}

/* Genesis красит таблицы своим фоном и полосатыми строками — перебиваем адресно. */
.mb-dostavka .mb-scroll table,
.mb-dostavka .mb-scroll thead,
.mb-dostavka .mb-scroll tbody,
.mb-dostavka .mb-scroll tr,
.mb-dostavka .mb-scroll tr:nth-child(even),
.mb-dostavka .mb-scroll tr:nth-child(odd),
.mb-dostavka .mb-scroll th,
.mb-dostavka .mb-scroll td{
	background:transparent !important;
	background-color:transparent !important;
	color:#E4EBF2;
}
.mb-dostavka .mb-scroll th{color:#92A3B8 !important}
.mb-dostavka .mb-scroll td.mb-num{color:#A9B7C8 !important}
.mb-dostavka .mb-scroll th,
.mb-dostavka .mb-scroll td{border-bottom-color:#232F3D !important}
.mb-dostavka .mb-scroll tr:last-child td{border-bottom-color:transparent !important}

/* Плашки-тезисы: тема сбрасывает фон и радиусы у li — задаём явно. */
.mb-dostavka ul.mb-claims{list-style:none !important;margin:20px 0 0 !important;padding:0 !important}
.mb-dostavka ul.mb-claims li{
	background:#E9E4FB !important;
	border:1px solid #D6CEF6 !important;
	border-radius:999px !important;
	padding:8px 17px !important;
	margin:0 !important;
	color:#241C5C !important;
	font-size:15px;
	list-style:none !important;
}
.mb-dostavka ul.mb-claims li::before,
.mb-dostavka ul.mb-claims li::marker{content:none !important}
.mb-dostavka ul.mb-claims li b{color:#4B3FA8 !important;font-weight:600}

/* Иерархия внутри плашки: подпись приглушена, значение — тёмное и жирное. */
.mb-dostavka ul.mb-claims li{color:#6B6790 !important}
.mb-dostavka ul.mb-claims li b{color:#241C5C !important;font-weight:700 !important}

/* Заливка плашек: фон + дублирующая внутренняя тень.
   Тень красит элемент даже если background перебит темой или плагином. */
.mb-dostavka ul.mb-claims li{
	background-color:#E9E4FB !important;
	background-image:none !important;
	box-shadow:inset 0 0 0 999px #E9E4FB !important;
}

/* Плашки заливаем фирменным фиолетовым: бледный оттенок на белой странице
   визуально пропадал. Заодно совпадает с кнопкой «Оформить заказ». */
.mb-dostavka ul.mb-claims li{
	background-color:#4B3FA8 !important;
	box-shadow:inset 0 0 0 999px #4B3FA8 !important;
	border-color:#4B3FA8 !important;
	color:#CFC8F2 !important;
}
.mb-dostavka ul.mb-claims li b{color:#fff !important}