/* A transparent native indicator covers the input, preserving a native
   fallback even when showPicker() is restricted in an embedded browser. */
input:is([type="date"], [type="time"], [type="datetime-local"]):not(.date-overlay) {
  position: relative;
}
input:is([type="date"], [type="time"], [type="datetime-local"]):not(.date-overlay)::-webkit-calendar-picker-indicator {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
input:is([type="date"], [type="datetime-local"]):not(.date-overlay) {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93ac' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: right 10px center;
}
input[type="time"]:not(.date-overlay) {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93ac' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: right 10px center;
}
.time-wrap input[type="time"] { background-image: none; }