.date-field {
    position: relative;
}

.date-field__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.date-field.has-value .date-field__placeholder {
    opacity: 0;
    visibility: hidden;
}

.date-field input[type="date"] {
    position: relative;
    z-index: 2;
    width: 100%;
    cursor: pointer;
    color-scheme: light;
}

.date-field:not(.has-value) input[type="date"] {
    color: transparent;
}

.date-field.has-value input[type="date"] {
    color: inherit;
}

.date-field:not(.has-value) input[type="date"]::-webkit-date-and-time-value {
    opacity: 0;
}

.date-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.date-field--form-input .date-field__placeholder {
    font-family: var(--font-hebrew);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
}

.date-field--form-input.has-value input[type="date"] {
    color: #000000;
}

.date-field--save-dj .date-field__placeholder {
    justify-content: flex-start;
    padding: 11px 14px;
    font-family: var(--font-hebrew);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.45);
}

.date-field--save-dj.has-value input[type="date"] {
    color: #000000;
    font-weight: 600;
}

.date-field--gal .date-field__placeholder {
    font-family: var(--font-hebrew);
    font-size: 1.02rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

.date-field--gal.has-value input[type="date"] {
    color: #000000;
}

.date-field--coming-soon .date-field__placeholder {
    font-family: var(--font-hebrew);
    font-size: max(16px, 1rem);
    font-weight: 500;
    color: #7a8799;
    text-align: center;
    padding-inline: 0.75rem 2.25rem;
}

.date-field--coming-soon.has-value input[type="date"] {
    color: #0a1018;
}