/**
 * CF7 Fieldkit - Datepicker Styles
 *
 * @package CF7_Fieldkit
 */

/* ==========================================================================
   Datepicker Input
   ========================================================================== */

input.cf7fk-datepicker {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px 16px;
	padding-right: 35px;
}

input.cf7fk-datepicker:focus {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%230073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

/* ==========================================================================
   Native Datepicker Enhancements
   ========================================================================== */

input[type="date"].cf7fk-datepicker::-webkit-calendar-picker-indicator {
	opacity: 0;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Placeholder Styles
   ========================================================================== */

input.cf7fk-datepicker::placeholder {
	color: #999;
}

input.cf7fk-datepicker::-webkit-input-placeholder {
	color: #999;
}

input.cf7fk-datepicker::-moz-placeholder {
	color: #999;
}

input.cf7fk-datepicker:-ms-input-placeholder {
	color: #999;
}