/* Доставка на главной (core/_delivery_home.html, delivery-home.js), 27.10.2026.
   Белая карточка как у подбора форсунки: слева поле города, под ним — самое дешёвое и самое
   быстрое; справа — карта-чертёж: суша едва серая, границы тонкой линией, сетка параллелей,
   маршрут тёмной дугой. Без обводок блоков (правило 13.09.2026). */
.dlv{padding:var(--s8) 0}
.dlv-head{margin-bottom:var(--s5)}
.dlv-head h2{margin:0 0 var(--s2); font:var(--f-section); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.dlv-head p{margin:0; max-width:64ch; font:var(--f-desc); color:var(--muted)}

.dlv-card{display:grid; grid-template-columns:minmax(260px, 360px) minmax(0, 1fr); border-radius:var(--r-md);
  background:var(--panel); box-shadow:var(--sh-card); overflow:hidden}
.dlv-side{padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); min-width:0}

.dlv-label{font:var(--f-label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.dlv-field{position:relative}
.dlv-input{width:100%; height:var(--h-md, 40px); padding:0 var(--s3); border:0; border-radius:var(--r-md);
  background:var(--chip); font:var(--f-block); color:var(--ink)}
.dlv-input::placeholder{color:var(--faint); font:var(--f-small)}
.dlv-input:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.dlv-list{position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px); margin:0; padding:var(--s1);
  list-style:none; background:var(--panel); border-radius:var(--r-md); box-shadow:var(--sh-pop); max-height:300px; overflow:auto}
.dlv-list li{display:flex; align-items:baseline; gap:var(--s2); padding:9px var(--s3); border-radius:var(--r-sm); cursor:pointer}
.dlv-list li b{font:var(--f-name); color:var(--ink)}
.dlv-list li span{font:var(--f-hint); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dlv-list li[aria-selected="true"], .dlv-list li:hover{background:var(--chip)}
.dlv-list li.off b{color:var(--faint)}
.dlv-list .dlv-empty{cursor:default; font:var(--f-hint); color:var(--muted)}

.dlv-out{min-height:176px}
.dlv-idle, .dlv-msg{margin:0; font:var(--f-desc); color:var(--muted)}
.dlv-to{margin:0 0 var(--s3); font:var(--f-small); color:var(--muted)}
.dlv-to b{color:var(--ink); font-weight:600}
.dlv-wait{display:flex; flex-direction:column; gap:var(--s3)}
.dlv-bar{height:2px; background:var(--chip); border-radius:2px; overflow:hidden}
.dlv-bar i{display:block; height:100%; width:30%; background:var(--ink); animation:dlv-run 1.4s ease-in-out infinite}
@keyframes dlv-run{0%{transform:translateX(-100%)} 100%{transform:translateX(340%)}}

.dlv-best{display:grid; gap:var(--s2)}
.dlv-opt{padding:var(--s4); border-radius:var(--r-md); background:var(--chip); display:grid;
  grid-template-columns:1fr auto; gap:6px var(--s3); align-items:baseline;
  animation:dlv-in .45s cubic-bezier(.2,.7,.2,1) both}
.dlv-opt + .dlv-opt{animation-delay:.12s}
@keyframes dlv-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.dlv-k{font:var(--f-label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.dlv-price{grid-row:span 2; font:var(--f-price); color:var(--ink); white-space:nowrap}
.dlv-how{font:var(--f-name); color:var(--ink)}
.dlv-how s{text-decoration:none; color:var(--muted); font-weight:400}
.dlv-note{margin:var(--s3) 0 0; font:var(--f-hint); color:var(--muted)}
.dlv-parcel{margin:auto 0 0; font:var(--f-hint); color:var(--muted)}

.dlv-map{min-height:420px; border-radius:0}

@media (max-width:900px){
  .dlv-card{grid-template-columns:1fr}
  .dlv-map{min-height:300px}
  .dlv-out{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .dlv-bar i, .dlv-opt{animation:none}
}