/* ═══════════════════════════════════════════════════════════════════════════
   КАЛЕНДАР ЗА ИЗБОР НА ДАТА

   Стои в отделен файл, за да може да се сваля само там, където е нужен, и
   да се пипа, без да се влиза в общия лист. Всички цветове идват от
   променливите на темата, затова смяната на палитрата преоблича и календара.
   ═══════════════════════════════════════════════════════════════════════════ */

.dp-input{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7488' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:17px;
  padding-right:38px;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.dp-input.is-bad{border-color:var(--danger);background-color:var(--danger-tint)}

.dp-pop{
  position:absolute;z-index:200;display:none;width:302px;padding:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-2);
  transform-origin:top left;
}
.dp-pop.is-open{display:block;animation:dpPop .22s var(--spring) both}
@keyframes dpPop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

/* ── Заглавна лента ── */
.dp-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.dp-nav{
  width:32px;height:32px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--r-sm);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.dp-nav:hover{background:var(--surface-2);border-color:var(--line)}
.dp-nav svg{width:17px;height:17px;fill:none;stroke:var(--ink-2);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dp-selects{flex:1;display:flex;gap:6px;min-width:0}
.dp-sel{
  flex:1;min-width:0;height:32px;padding:0 8px;margin:0;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;
}
.dp-sel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.dp-month{flex:1.5}

/* ── Дни от седмицата ── */
.dp-dows{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;
  padding-bottom:6px;border-bottom:1px solid var(--line);
}
.dp-dows span{
  text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ── Мрежата с дните ── */
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:6px}
.dp-day{
  height:36px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;border-radius:var(--r-sm);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);
  transition:background .14s var(--ease),color .14s var(--ease),transform .14s var(--spring);
}
.dp-day:hover:not(:disabled){background:var(--primary-tint);color:var(--primary)}
.dp-day:active:not(:disabled){transform:scale(.92)}
.dp-day.is-out{color:var(--ink-3);opacity:.45}
.dp-day.is-weekend:not(.is-sel){color:var(--danger)}

/* ── Празник ──
   Уикендът е червен по число; празникът има и фон, защото е ден, който по
   календар изглежда работен. Без фона човек го приема за случайно заключен. */
.dp-day.is-holiday:not(.is-sel){
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  font-weight:600;
}
/* ── Заключен ден ──
   Досега нямаше общо правило: недостъпните дни изглеждаха като достъпните и
   човек ги натискаше напразно. Сивото и зачеркнатият показалец го казват без
   думи.

   Правилото е СЛЕД празничното, за да го надделее: заключеният празник е
   първо заключен, после празник. */
.dp-day.is-off,
.dp-day:disabled{
  color:var(--ink-3);
  background:transparent;
  opacity:.4;
  cursor:not-allowed;
  font-weight:400;
}
.dp-day.is-off:hover,
.dp-day:disabled:hover{ background:transparent }

/* Празникът пази цвета си и заключен: така се вижда ЗАЩО не се избира. */
.dp-day.is-holiday.is-off{
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  opacity:.55;
}

/* ── Забранен от аптеката ──
   Зачеркнат, за да се различава от почивния: почивният ден е такъв за всички,
   забраненият е решение на аптеката и човек има право да се учуди.

   Правилото стои НАЙ-ОТДОЛУ и с „!important“ на фона, защото общото за
   заключените дни го нулира - а линията е нарисувана точно с фон.

   Наклонен градиент, не текстово зачеркване: така пресича самото число. */
.dp-day.is-blocked,
.dp-day.is-blocked:disabled{
  color:var(--danger);
  opacity:.62;
  cursor:not-allowed;
  background-image:linear-gradient(to top left,
    transparent calc(50% - 0.9px), currentColor calc(50% - 0.9px),
    currentColor calc(50% + 0.9px), transparent calc(50% + 0.9px)) !important;
  background-color:color-mix(in srgb, var(--danger) 7%, transparent) !important;
}
.dp-day.is-weekend.is-out{color:var(--danger);opacity:.3}
.dp-day.is-today{box-shadow:inset 0 0 0 1.5px var(--line-strong);font-weight:700}
.dp-day.is-sel{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-weight:700;box-shadow:0 4px 12px -4px rgba(13,42,74,.5);
}
.dp-day.is-sel.is-weekend{color:#fff}
.dp-day:disabled{opacity:.25;cursor:default}

/* ── Долен ред ── */
.dp-foot{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.dp-link{
  background:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--primary);padding:5px 9px;border-radius:var(--r-sm);
  transition:background .16s var(--ease);
}
.dp-link:hover{background:var(--primary-tint)}
.dp-clear{color:var(--ink-3)}
.dp-clear:hover{background:var(--surface-2);color:var(--danger)}

@media (max-width:400px){
  .dp-pop{width:calc(100vw - 24px)}
  .dp-day{height:40px}
}
@media (prefers-reduced-motion:reduce){
  .dp-pop.is-open,.dp-day{animation:none!important;transition:none!important}
}