/* Modern Datepicker Styling */

/* jQuery UI Datepicker */
.ui-datepicker {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.15) !important;
  padding: 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.ui-datepicker-header {
  background: linear-gradient(135deg, rgba(240,160,48,.08), rgba(240,160,48,.04)) !important;
  border: 1px solid rgba(240,160,48,.2) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  color: rgba(0,0,0,.92) !important;
}

.ui-datepicker-title {
  color: rgba(0,0,0,.92) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.ui-datepicker-prev, .ui-datepicker-next {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.ui-datepicker-prev::before {
  content: '‹' !important;
  color: rgba(240,160,48,.6) !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
}

.ui-datepicker-next::before {
  content: '›' !important;
  color: rgba(240,160,48,.6) !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
  background: transparent !important;
}

.ui-datepicker-prev span, .ui-datepicker-next span {
  display: none !important;
}

.ui-datepicker-calendar {
  width: 100% !important;
}

.ui-datepicker th {
  background: rgba(240,160,48,.08) !important;
  color: rgba(0,0,0,.7) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 8px !important;
  font-size: .85rem !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.ui-datepicker td {
  padding: 8px 0 !important;
  border: none !important;
}

.ui-datepicker td a, .ui-datepicker td span {
  display: block !important;
  padding: 8px !important;
  text-align: center !important;
  color: rgba(0,0,0,.75) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all .2s !important;
  font-weight: 500 !important;
}

.ui-datepicker td a:hover {
  background: rgba(240,160,48,.15) !important;
  color: #000 !important;
}

.ui-datepicker-current-day a {
  background: rgba(240,160,48,.2) !important;
  color: #000 !important;
  font-weight: 600 !important;
}

.ui-datepicker-today a {
  background: #f0a030 !important;
  color: #000 !important;
  font-weight: 600 !important;
}

.ui-datepicker-today a:hover {
  background: #ffc46b !important;
}

.ui-datepicker .ui-state-disabled {
  color: rgba(0,0,0,.3) !important;
}

.ui-datepicker-buttonpane {
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  margin: 12px -12px -12px -12px !important;
  padding: 12px !important;
  display: flex !important;
  gap: 8px !important;
}

.ui-datepicker-buttonpane button {
  background: #f0a030 !important;
  color: #000 !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  transition: all .2s !important;
  flex: 1 !important;
}

.ui-datepicker-buttonpane button:hover {
  background: #ffc46b !important;
  box-shadow: 0 4px 12px rgba(240,160,48,.25) !important;
}

.ui-datepicker-buttonpane .ui-state-default {
  background: #f0a030 !important;
  color: #000 !important;
}

/* Fallback for other datepicker plugins */
.datepicker {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.15) !important;
}

.datepicker-calendar thead {
  background: rgba(240,160,48,.08) !important;
}

.datepicker-calendar td {
  border-color: rgba(0,0,0,.08) !important;
}

.datepicker-calendar a.active,
.datepicker-calendar a:hover {
  background: #f0a030 !important;
  color: #000 !important;
}

/* Ultimate Member specific */
.um-field-datepicker .hasDatepicker {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: rgba(0,0,0,.75) !important;
  font-size: 1rem !important;
}

.um-field-datepicker .hasDatepicker:focus {
  border-color: rgba(240,160,48,.4) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(240,160,48,.1) !important;
}

/* Ensure good contrast and readability */
.ui-widget {
  font-family: 'Inter', system-ui, sans-serif !important;
}

.ui-widget input,
.ui-widget textarea,
.ui-widget select {
  font-family: 'Inter', system-ui, sans-serif !important;
}