/**
 * Touch-first date picker.
 *
 * Sizing is the whole point: every tappable cell is at least 44px, which is the
 * smallest target a thumb hits reliably. That is why the grid is generous
 * rather than compact — a calendar that fits in less space is a calendar people
 * mis-tap.
 *
 * Colours come from whatever page hosts it: the quote form sets --smq-* tokens,
 * the admin panel sets its own. Fallbacks keep it usable if neither is present.
 */

.dp { position: relative; }

.dp__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  font: 600 16px/1.3 var(--dp-font, var(--smq-body, Inter, system-ui, sans-serif));
  text-align: left;
  color: var(--dp-text, var(--smq-ink, #0f0f0f));
  background: var(--dp-field, var(--smq-field, #fff));
  border: 1.5px solid var(--dp-line, var(--smq-line, #e2e2e2));
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dp__trigger:hover { border-color: var(--dp-accent, var(--smq-accent, #ef207a)); }
.dp__trigger svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--dp-accent, var(--smq-accent, #ef207a));
}
.dp__ph { color: var(--dp-muted, var(--smq-muted, #6b6b6b)); font-weight: 400; }
.dp__val { font-weight: 700; }

/* Expands IN FLOW rather than floating. The quote form's card clips overflow
   to keep its rounded corners, which sliced the bottom off an absolutely
   positioned popover — and on a phone a panel that pushes content down is
   easier to scroll than one that hovers over it anyway. */
.dp__pop {
  margin-top: 8px;
  padding: 14px;
  background: var(--dp-surface, var(--smq-surface, #fff));
  border: 1.5px solid var(--dp-line, var(--smq-line, #e2e2e2));
  border-radius: 14px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------- quick */

.dp__quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--dp-line, var(--smq-line, #e2e2e2));
}
.dp__chip {
  min-height: 44px;
  padding: 10px 12px;
  font: 600 14px/1.25 var(--dp-font, var(--smq-body, Inter, system-ui, sans-serif));
  color: var(--dp-text, var(--smq-ink, #0f0f0f));
  background: var(--dp-chip, var(--smq-field, #f5f5f6));
  border: 1.5px solid var(--dp-line, var(--smq-line, #e2e2e2));
  border-radius: 9px;
  cursor: pointer;
}
.dp__chip:hover {
  border-color: var(--dp-accent, var(--smq-accent, #ef207a));
  color: var(--dp-accent, var(--smq-accent, #ef207a));
}

/* ------------------------------------------------------------------ head */

.dp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}
.dp__head strong {
  font: 700 16px/1.2 var(--dp-font, var(--smq-body, Inter, system-ui, sans-serif));
  color: var(--dp-text, var(--smq-ink, #0f0f0f));
}
.dp__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--dp-line, var(--smq-line, #e2e2e2));
  border-radius: 10px;
  color: var(--dp-text, var(--smq-ink, #0f0f0f));
  cursor: pointer;
}
.dp__nav svg { width: 18px; height: 18px; }
.dp__nav:disabled { opacity: 0.3; cursor: default; }
.dp__nav:not(:disabled):hover { border-color: var(--dp-accent, var(--smq-accent, #ef207a)); }

/* ------------------------------------------------------------------ grid */

.dp__dows,
.dp__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.dp__dows {
  padding-bottom: 6px;
}
.dp__dows span {
  text-align: center;
  font: 700 11px/1 var(--dp-font, var(--smq-body, Inter, system-ui, sans-serif));
  letter-spacing: 0.08em;
  color: var(--dp-muted, var(--smq-muted, #6b6b6b));
}

.dp__pad { aspect-ratio: 1; }

.dp__day {
  aspect-ratio: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  font: 600 15px/1 var(--dp-font, var(--smq-body, Inter, system-ui, sans-serif));
  color: var(--dp-text, var(--smq-ink, #0f0f0f));
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.dp__day:hover:not(:disabled) { background: var(--dp-chip, var(--smq-field, #f2f2f4)); }
.dp__day:disabled { opacity: 0.24; cursor: default; }
.dp__day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--dp-line-2, var(--smq-line, #c9c9cf));
}
.dp__day.is-sel {
  background: var(--dp-accent, var(--smq-accent, #ef207a));
  color: #fff;
  box-shadow: none;
}

@media (max-width: 420px) {
  .dp__quick { grid-template-columns: 1fr; }
  .dp__pop { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp * { transition: none !important; }
}