.calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: none;
  font-family: var(--font-sans);
}

.calendar-modal .calendar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,20,22,0.56);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: auto;
}

.calendar-modal .calendar-sheet {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 110%);
  width: min(448px, 96%);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background: var(--card);
  box-shadow: 0 -18px 40px rgba(10,20,40,0.18);
  transition: transform .36s cubic-bezier(.2,.9,.25,1), opacity .22s ease;
  opacity: 0;
  pointer-events: auto;
  overflow: hidden;
}

.calendar-modal.open .calendar-overlay { opacity: 1; }
.calendar-modal.open .calendar-sheet { transform: translate(-50%, 0%); opacity: 1; }

.calendar-sheet__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 20px 20px 6px;
}

.calendar-sheet__title {
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}

.calendar-sheet__close {
  background:transparent;
  border:0;
  font-size:22px;
  line-height:1;
  padding:8px;
  cursor:pointer;
  color:var(--text);
}

.calendar-sheet__body {
  padding: 0px 20px 40px;
  display:flex;
  flex-direction:column;
  gap:12px;



  max-height: 70vh;   /* высота модалки относительно экрана */
  overflow-y: auto;   /* вертикальный скролл */
  scroll-behavior: smooth;
}

.calendar-row {
  display:flex;
  align-items:center;
  gap:12px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--card-shadow-soft);
}

.calendar-label {
  flex: 0 0 36px;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  font-weight:500;
  color: var(--text);
  font-size:14px;
  margin: 10px 5px 10px;
}

.calendar-row input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  padding: 8px 6px;
  border-radius: 8px;
  flex: 1 1 auto;
  outline: none;
}

.calendar-row input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
}

.calendar-actions {
  display:flex;
  gap:12px;
  margin-top:10px;
  align-items:center;
  justify-content: space-between;
}

.calendar-apply {
  background: var(--panel);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10,20,40,0.12);
  transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
  padding: 14px 14px;
  width: 50%;
}

.calendar-cancel {
  background: var(--white);
  color: var(--muted);
  border: 1px solid var(--border-light);
  padding: 14px 14px;
  width: 50%;
  border-radius: 50px;
  font-weight:600;
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}

.calendar-apply:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,20,40,0.14); }
.calendar-cancel:hover { transform: translateY(-1px); }

.calendar-row.invalid { border-color: rgba(239,68,68,0.18); box-shadow: 0 4px 10px rgba(239,68,68,0.04); }
.calendar-row .hint { font-size:13px; color: rgba(255,0,0,0.8); margin-top:6px; }


@media (max-width: 420px) {
  .calendar-sheet { width: 100%; border-radius: 16px 16px 0 0; left: 50%; }
  .calendar-sheet__body { padding: 10px 14px 22px; }
  .calendar-row { padding: 10px; }
  .calendar-actions { flex-direction: column-reverse; gap:10px; align-items: stretch; }
  .calendar-apply, .calendar-cancel { width: 100%; }
}

.calendar-modal[aria-hidden="true"] { visibility: hidden; }
.calendar-modal[aria-hidden="false"] { visibility: visible; }