/* Date input placeholder fix */
input[type="date"] {
    position: relative;
    color: transparent; /* Hide the native text */
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

input[type="date"].placeholder::before {
    content: attr(placeholder);
    color: #868e96;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}

/* Show the actual date when filled */
input[type="date"]:focus,
input[type="date"]:valid {
    color: #fff; /* Show the text when valid or focused */
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
    display: none;
}