/* ============================================================
   Свой выбор даты (js/datepicker.js)
   ============================================================ */

input.field.dp-native { display: none; }

.dp-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  text-align: left; cursor: pointer;
  color: var(--text);
}
.dp-btn .dp-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--pink-deep); }
.dp-btn.dp-empty .dp-text { color: var(--muted); }
.dp-btn[aria-expanded="true"] { border-color: var(--pink-soft); background: var(--panel); }

.dp-pop {
  margin-top: -4px;
  padding: 10px 10px 8px;
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: dp-in var(--dur-fast) var(--ease-out);
}
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dp-month { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.dp-nav {
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: none; color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dp-nav svg { width: 18px; height: 18px; }
.dp-nav:active { background: var(--panel-soft); }

.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dow span { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.dp-grid { row-gap: 2px; }

.dp-day {
  width: 100%; max-width: 42px; aspect-ratio: 1; margin: 0 auto;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-press) var(--ease-out);
}
.dp-day:active { background: var(--panel-soft); }
.dp-day.dp-other { color: var(--muted-2); }
.dp-day.dp-today { box-shadow: inset 0 0 0 1.5px var(--pink-deep); color: var(--pink-deep); }
.dp-day.dp-sel { background: var(--pink-deep); color: var(--on-accent); box-shadow: none; }
.dp-day:disabled { opacity: 0.3; cursor: default; }

.dp-today-btn {
  display: block; margin: 4px auto 0; padding: 10px 16px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--pink-deep);
}

@media (prefers-reduced-motion: reduce) { .dp-pop { animation: none; } }