/* ══════════════════════════════════════════════════════
   datepicker.css — Custom Calendar & Date Input Styles
   Purple palette · Care Cloud 照家雲
   ══════════════════════════════════════════════════════ */

/* ── Global native date / datetime-local input upgrade ── */
input[type="date"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  color: #1E293B;
  background: #FAFAFF;
  border: 2px solid #E2E8F0;
  border-radius: .75rem;
  padding: .7rem 1.1rem;
  width: 100%;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  box-shadow: 0 1px 4px rgba(124,58,237,.05);
}
input[type="date"]:hover,
input[type="datetime-local"]:hover {
  border-color: #C4B5FD;
  background: #F5F3FF;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus {
  outline: none;
  border-color: #7C3AED;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124,58,237,.13);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 2px;
  opacity: .55;
  filter: invert(22%) sepia(80%) saturate(700%) hue-rotate(245deg) brightness(.9);
  transition: opacity .15s, transform .15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════
   Custom Inline Calendar Widget  .custom-cal
   ══════════════════════════════════════════════════════ */
.custom-cal {
  background: #fff;
  border-radius: 1.125rem;
  border: 1.5px solid #EDE9FE;
  box-shadow: 0 6px 32px rgba(124,58,237,.12);
  overflow: hidden;
  user-select: none;
  max-width: 320px;
}

/* ── Header bar (purple gradient) ── */
.custom-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #fff;
}
.cal-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.cal-nav-btn:hover {
  background: rgba(255,255,255,.38);
  transform: scale(1.1);
}
.cal-month-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
}

/* ── Weekday headers ── */
.custom-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: .75rem 1rem .45rem;
  background: #F5F3FF;
}
.custom-cal-weekdays span {
  text-align: center;
  font-size: .7rem;
  font-weight: 800;
  color: #6D28D9;
  letter-spacing: .04em;
}

/* ── Day grid ── */
.custom-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: .5rem .875rem .875rem;
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 500;
  border-radius: 50%;
  cursor: pointer;
  transition: all .15s;
  color: #1E293B;
  position: relative;
}

/* Hover state */
.cal-day:hover:not(.cal-other-month):not(.cal-selected):not(.cal-range-start):not(.cal-range-end) {
  background: #EDE9FE;
  color: #7C3AED;
  font-weight: 700;
}

/* Today indicator */
.cal-day.cal-today:not(.cal-selected) {
  color: #7C3AED;
  font-weight: 800;
}
.cal-day.cal-today:not(.cal-selected)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #7C3AED;
  border-radius: 50%;
}

/* Selected day — filled purple circle */
.cal-day.cal-selected {
  background: #7C3AED;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(124,58,237,.4);
}
.cal-day.cal-selected::after { display: none; }

/* Range highlight */
.cal-day.cal-in-range {
  background: #EDE9FE;
  color: #5B21B6;
  border-radius: 0;
  font-weight: 600;
}
.cal-day.cal-range-start {
  background: #7C3AED;
  color: #fff;
  border-radius: 50% 0 0 50%;
  box-shadow: 0 3px 10px rgba(124,58,237,.32);
}
.cal-day.cal-range-end {
  background: #7C3AED;
  color: #fff;
  border-radius: 0 50% 50% 0;
  box-shadow: 0 3px 10px rgba(124,58,237,.32);
}

/* Other month days (grayed out) */
.cal-day.cal-other-month {
  color: #D1D5DB;
  cursor: default;
  font-weight: 400;
}
.cal-day.cal-other-month:hover { background: none; }

/* ── Footer / action ── */
.custom-cal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem .875rem;
  border-top: 1px solid #F3F0FF;
  gap: .5rem;
}
.cal-today-btn {
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 700;
  color: #7C3AED;
  background: #F5F3FF;
  border: 1.5px solid #C4B5FD;
  border-radius: .5rem;
  padding: .35rem .9rem;
  cursor: pointer;
  transition: all .15s;
}
.cal-today-btn:hover { background: #EDE9FE; }
.cal-selected-display {
  font-size: .8125rem;
  color: #64748B;
  font-weight: 500;
}
.cal-selected-display strong {
  color: #7C3AED;
  font-weight: 800;
}

/* ── Services.html quick-search date field ── */
.sv-qs-input {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  color: #1E293B;
  background: #fff;
  border: 2px solid #E2E8F0;
  border-radius: .625rem;
  padding: .6rem .9rem;
  cursor: pointer;
  transition: all .18s;
}
.sv-qs-input:hover { border-color: #C4B5FD; background: #FAFAFF; }
.sv-qs-input:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.sv-qs-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(22%) sepia(80%) saturate(700%) hue-rotate(245deg) brightness(.9);
  opacity: .7;
}