/* ============================================
   Custom Date Picker Calendar - Modern Red Theme
   ============================================ */

/* Hide default calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Remove default date controls */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}

/* ============================================
   Calendar Popup Customization (Chromium)
   ============================================ */

/* Main calendar container */
::-webkit-datetime-edit {
  padding: 0;
}

/* Hide default text when empty */
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
  color: transparent;
}

/* Calendar popup background */
::-webkit-calendar-picker-indicator:focus {
  outline: none;
}

/* Keep datetime edit hidden */
input[type="date"]::-webkit-datetime-edit {
  color: transparent !important;
}

input[type="date"]:valid::-webkit-datetime-edit,
input[type="date"]:invalid::-webkit-datetime-edit,
input[type="date"]:focus::-webkit-datetime-edit {
  color: transparent !important;
}

/* Enhanced focus effect */
input[type="date"]:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}

/* Remove all default styling */
input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
}

/* ============================================
   Global Calendar Styles (When Opened)
   Note: Limited cross-browser support
   ============================================ */

/* For Webkit browsers (Chrome, Edge, Safari) */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  cursor: pointer;
}