/* календарь в поле «Сроки» (assets/datepicker.js) — макет «Б»: быстрый выбор слева, сетка месяца справа */
.dp { position:absolute; z-index:1000; display:grid; grid-template-columns:172px 1fr; width:520px; max-width:calc(100vw - 24px); overflow:hidden;
  border:1px solid rgba(245,245,245,.14); border-radius:14px; background:rgba(14,14,15,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 28px 60px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); color:#f5f5f5;
  font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; }
.dp[hidden] { display:none; }

/* ---- движение ---- */
/* открытие: попап раскрывается из поля (scale + blur → резко), пункты слева и дни справа выстраиваются волной */
.dp.in { animation:dp-pop .42s cubic-bezier(.16,1,.3,1) both; }
.dp.out { animation:dp-out .2s cubic-bezier(.4,0,1,1) both; pointer-events:none; }
@keyframes dp-pop { from { opacity:0; transform:translateY(-10px) scale(.96); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes dp-out { to { opacity:0; transform:translateY(-6px) scale(.98); filter:blur(4px); } }
.dp.in .dp-p { animation:dp-slide .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(70ms + var(--i) * 45ms); }
@keyframes dp-slide { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
.dp.in .dp-d { animation:dp-rise .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(120ms + var(--i) * 9ms); }
@keyframes dp-rise { from { opacity:0; transform:translateY(8px) scale(.85); } to { opacity:1; transform:none; } }
/* смена месяца: заголовок и сетка въезжают со стороны движения */
.dp.nav-f .dp-mn, .dp.nav-f .dp-gr { animation:dp-fwd .4s cubic-bezier(.16,1,.3,1) both; }
.dp.nav-b .dp-mn, .dp.nav-b .dp-gr { animation:dp-back .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes dp-fwd { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes dp-back { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
/* выбор: день «схлопывается» в кольцо и отдаёт круг волной; сводка сменяется с подъёмом */
.dp-d.sel { animation:dp-sel .45s cubic-bezier(.34,1.56,.64,1) backwards; }
.dp-d.sel::before { content:""; position:absolute; inset:0; border-radius:50%; animation:dp-ring .7s cubic-bezier(.2,.8,.2,1) backwards; pointer-events:none; }
@keyframes dp-sel { from { transform:scale(.6); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes dp-ring { from { box-shadow:0 0 0 0 rgba(245,245,245,.55); } to { box-shadow:0 0 0 12px rgba(245,245,245,0); } }
.dp-sum > span { animation:dp-text .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes dp-text { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.dp-p.on { animation:dp-on .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes dp-on { from { background:rgba(245,245,245,.0); box-shadow:inset 0 0 0 1px rgba(245,245,245,0); } }
/* сегодня: точка мягко пульсирует (как бейдж «Пульс») */
.dp-d.today::after { animation:dp-ping 2.4s ease-out infinite; }
@keyframes dp-ping { 0% { box-shadow:0 0 0 0 rgba(245,245,245,.55); } 70%, 100% { box-shadow:0 0 0 7px rgba(245,245,245,0); } }
.dp button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.dp button:focus-visible { outline:1px solid rgba(245,245,245,.6); outline-offset:1px; }

.dp-side { grid-row:1; padding:18px 10px 16px 14px; border-right:1px solid rgba(245,245,245,.1); }
.dp-sh { padding:2px 6px 10px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,245,245,.4); }
.dp-p { display:flex; justify-content:space-between; align-items:baseline; gap:6px; width:100%; padding:10px 8px; border-radius:8px; text-align:left; font-size:13.5px; font-weight:300; color:rgba(245,245,245,.85); transition:background .25s, transform .3s cubic-bezier(.16,1,.3,1); }
.dp-p small { font-size:11px; opacity:.45; white-space:nowrap; }
.dp-p:hover { background:rgba(245,245,245,.06); transform:translateX(2px); }
.dp-p.on { background:rgba(245,245,245,.08); box-shadow:inset 0 0 0 1px rgba(245,245,245,.35); color:#fff; }

.dp-main { padding:18px 16px 10px; }
.dp-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dp-mn { font-size:18px; font-weight:300; letter-spacing:-.01em; }
.dp-mn em { font-style:normal; opacity:.4; margin-left:4px; }
.dp-nv { display:flex; gap:6px; }
.dp-ar { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid rgba(245,245,245,.16) !important; border-radius:50%; transition:background .25s, border-color .25s; }
.dp-ar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.dp-ar:hover:not(:disabled) { background:rgba(245,245,245,.08); border-color:rgba(245,245,245,.4) !important; }
.dp-ar:disabled { opacity:.25; cursor:default; }
.dp-wd { display:grid; grid-template-columns:repeat(7,1fr); padding:4px 0 6px; text-align:center; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,245,.38); }
.dp-gr { display:grid; grid-template-columns:repeat(7,1fr); row-gap:2px; }
.dp-e { height:38px; }
.dp-d { position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:2px auto; border-radius:50%; font-size:13.5px; font-weight:300; transition:background .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.dp-d.we { color:rgba(245,245,245,.6); }
.dp-d.past { color:rgba(245,245,245,.22); cursor:default; }
.dp-d:hover:not(:disabled) { background:rgba(245,245,245,.08); transform:scale(1.1); }
.dp-d:active:not(:disabled) { transform:scale(.92); }
.dp-d.today::after { content:""; position:absolute; bottom:3px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor; }
.dp-d.sel { background:rgba(245,245,245,.1); box-shadow:inset 0 0 0 1px #f5f5f5; color:#f5f5f5; font-weight:400; }

.dp-sum { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 14px 18px; border-top:1px solid rgba(245,245,245,.1); font-size:13px; color:rgba(245,245,245,.6); }
.dp-sum b { color:#f5f5f5; font-weight:400; }
.dp-ok { padding:11px 18px; border:1px solid rgba(245,245,245,.55) !important; border-radius:9px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; transition:background .35s, color .35s; }
.dp-ok:hover, .dp-ok:focus-visible { background:#f5f5f5; color:#0a0a0b; }
.dp-typ { grid-column:1 / -1; padding:0 18px 14px; text-align:left; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,245,.5); text-decoration:underline; text-underline-offset:3px; }

.dp-bk { position:fixed; inset:0; z-index:999; background:rgba(0,0,0,.55); animation:dp-fade .3s ease both; }
.dp-bk.out { animation:dp-fade .2s ease reverse both; }
@keyframes dp-fade { from { opacity:0; } }
.dp-lock { overflow:hidden; }

/* телефон: нижняя шторка, быстрый выбор — лентой чипов сверху */
@media (max-width:560px) {
  .dp { position:fixed; left:0; right:0; bottom:0; top:auto !important; width:auto; max-width:none; grid-template-columns:1fr; max-height:88dvh; overflow:auto; border-radius:18px 18px 0 0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom); }
  .dp.in { animation-name:dp-sheet; animation-duration:.5s; }
  .dp.out { animation-name:dp-sheet-out; }
  @keyframes dp-sheet { from { opacity:0; transform:translateY(40px); filter:none; } to { opacity:1; transform:none; } }
  @keyframes dp-sheet-out { to { opacity:0; transform:translateY(40px); filter:none; } }
  .dp-side { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:16px 14px 12px; border-right:0; border-bottom:1px solid rgba(245,245,245,.1); }
  .dp-sh { display:none; }
  .dp-p { flex:none; width:auto; gap:8px; padding:9px 13px; border:1px solid rgba(245,245,245,.18); border-radius:99px; white-space:nowrap; }
  .dp-d { width:40px; height:40px; font-size:15px; }
  .dp-e { height:44px; }
}
@media (prefers-reduced-motion:reduce) { .dp, .dp *, .dp *::before, .dp *::after, .dp-bk { animation:none !important; transition:none !important; } }