.daterangepicker {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  color: #0d1117 !important;
  border: 1px solid #e8ecf2 !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 16px 48px rgba(13, 17, 23, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  padding: 0.75rem !important;
  margin-top: 0.5rem !important;
  z-index: 1200 !important;
}

.daterangepicker::before,
.daterangepicker::after {
  display: none !important;
}

.daterangepicker .calendar-table {
  border: 0 !important;
  background: transparent !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  border: 0 !important;
  border-radius: 0.5rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  line-height: 2rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.daterangepicker .calendar-table thead th {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #8892a4 !important;
}

.daterangepicker .calendar-table thead tr:last-child th {
  padding-top: 0.5rem !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: #f7f9fc !important;
  color: #0d1117 !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background: transparent !important;
  color: #c5cad3 !important;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #c5cad3 !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
}

.daterangepicker td.today:not(.active) {
  box-shadow: inset 0 0 0 1.5px #c4694a !important;
  color: #c4694a !important;
  font-weight: 600 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #c4694a !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(196, 105, 74, 0.35) !important;
}

.daterangepicker td.in-range {
  background: #f6ebe5 !important;
  color: #0d1117 !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
  border-radius: 0.5rem !important;
}

.daterangepicker .drp-calendar {
  max-width: none !important;
  padding: 0 !important;
}

.daterangepicker .drp-calendar.left {
  padding-right: 0 !important;
}

.daterangepicker .drp-calendar.right {
  padding-left: 0 !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border-color: #4a5568 !important;
}

.daterangepicker .calendar-table .next:hover span,
.daterangepicker .calendar-table .prev:hover span {
  border-color: #c4694a !important;
}

.daterangepicker th.month {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #0d1117 !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  border: 1px solid #e8ecf2 !important;
  border-radius: 0.5rem !important;
  padding: 0.25rem 0.5rem !important;
  font-family: inherit !important;
  font-size: 0.8125rem !important;
  color: #0d1117 !important;
  background: #fff !important;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
  border-color: #c4694a !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196, 105, 74, 0.15) !important;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid #e8ecf2 !important;
  padding: 0.75rem 0 0 !important;
  margin-top: 0.5rem !important;
}

.daterangepicker .drp-selected {
  font-size: 0.8125rem !important;
  color: #8892a4 !important;
}

.daterangepicker .drp-buttons .btn {
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border: 1px solid #e8ecf2 !important;
  background: #fff !important;
  color: #4a5568 !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

.daterangepicker .drp-buttons .btn:hover {
  background: #f7f9fc !important;
  color: #0d1117 !important;
}

.daterangepicker .drp-buttons .applyBtn {
  background: #0d1117 !important;
  border-color: #0d1117 !important;
  color: #fff !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #fff !important;
}

.daterangepicker .drp-buttons .cancelBtn {
  margin-right: 0.5rem !important;
}

/* Booking modal — keep calendar inside viewport on small screens */
@media (max-width: 640px) {
  .daterangepicker {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
    top: auto !important;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(70dvh, 420px);
    overflow-y: auto;
  }

  .daterangepicker .drp-calendar {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .daterangepicker .drp-calendar.left,
  .daterangepicker .drp-calendar.right {
    padding: 0 !important;
  }

  .daterangepicker .drp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  .daterangepicker .drp-selected {
    width: 100%;
    margin-bottom: 0.25rem;
  }
}