/* ==========================================================================
   Rental "Pickup/Delivery Date" (Product Input Fields) — field + calendar.
   Matches the product form's select fields; themes the jQuery UI datepicker.
   Loaded on product pages only (inc/product-experience.php).
   ========================================================================== */

/* Field: its own full-width row, same look as Duration / Weight / Deposit. */
form.cart #alg-product-input-fields-table,
form.cart .alg-product-input-fields-table {
	display: block; width: 100%; margin: 4px 0 16px; border: 0; float: none; clear: both;
}
form.cart .alg-product-input-fields-table tbody,
form.cart .alg-product-input-fields-table tr { display: block; width: 100%; }
form.cart .alg-product-input-fields-table td { display: block; width: 100%; padding: 0; border: 0; background: none; }
form.cart .alg-product-input-fields-table td:first-child { margin-bottom: 6px; }
form.cart .alg-product-input-fields-table label {
	font-size: .95rem; font-weight: 600; color: var(--hdme-grey-700, #363e47); margin: 0;
}
form.cart .alg-product-input-fields-table input[display="date"],
form.cart .alg-product-input-fields-table input.datepicker {
	width: 100% !important; max-width: 100%; height: 46px; box-sizing: border-box;
	padding: 0 44px 0 12px !important; margin: 0;
	border: 1px solid var(--hdme-blue-200, #aecbef) !important; border-radius: 8px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233366ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 14px center / 20px 20px !important;
	font-size: 16px; color: var(--hdme-grey-800, #232a31);
	box-shadow: 0 1px 2px rgba(40, 81, 138, .06); cursor: pointer;
}
form.cart .alg-product-input-fields-table input[display="date"]::placeholder { color: var(--hdme-grey-500, #66727f); opacity: 1; }
form.cart .alg-product-input-fields-table input[display="date"]:focus {
	outline: none; border-color: var(--hdme-blue-500, #427ed1) !important;
	box-shadow: 0 0 0 3px rgba(66, 126, 209, .2);
}

/* Calendar ------------------------------------------------------------- */
#ui-datepicker-div.ui-datepicker {
	width: 304px; max-width: calc(100vw - 24px); box-sizing: border-box;
	padding: 12px; margin-top: 6px; z-index: 10050 !important;
	background: #fff; border: 1px solid var(--hdme-blue-100, #d6e5f7); border-radius: 14px;
	box-shadow: 0 18px 40px rgba(21, 43, 73, .18);
	font-family: inherit; font-size: 14px; color: var(--hdme-grey-800, #232a31);
}
#ui-datepicker-div .ui-widget-header,
#ui-datepicker-div .ui-datepicker-header {
	position: relative; display: flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 0 0 8px; background: none; border: 0; border-radius: 0; color: inherit;
}
#ui-datepicker-div .ui-datepicker-title {
	display: flex; align-items: center; gap: 6px; margin: 0 40px; line-height: 1;
	font-size: 15px; font-weight: 700; color: var(--hdme-blue-900, #152b49);
}
#ui-datepicker-div .ui-datepicker-title select {
	height: 32px; padding: 0 6px; margin: 0; font-size: 14px; font-weight: 600;
	border: 1px solid var(--hdme-grey-200, #d4dae1); border-radius: 8px; background: #fff; color: inherit; width: auto;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	position: absolute; top: 0; width: 34px; height: 34px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	border: 0 !important; background: none !important;
}
#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background: var(--hdme-blue-50, #eef4fc) !important; }
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon { display: none; }
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
	content: ""; width: 9px; height: 9px; border: solid var(--hdme-blue-700, #28518a); border-width: 0 0 2px 2px;
}
#ui-datepicker-div .ui-datepicker-prev::before { transform: translateX(2px) rotate(45deg); }
#ui-datepicker-div .ui-datepicker-next::before { transform: translateX(-2px) rotate(-135deg); }
#ui-datepicker-div .ui-state-disabled.ui-datepicker-prev::before,
#ui-datepicker-div .ui-state-disabled.ui-datepicker-next::before { border-color: var(--hdme-grey-300, #b3bdc7); }

#ui-datepicker-div table.ui-datepicker-calendar { width: 100%; margin: 0; border-collapse: collapse; border: 0; font-size: 14px; }
#ui-datepicker-div .ui-datepicker-calendar th {
	padding: 6px 0; border: 0; background: none; text-align: center;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hdme-grey-500, #66727f);
}
#ui-datepicker-div .ui-datepicker-calendar td { padding: 2px; border: 0; background: none; }
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
	display: flex; align-items: center; justify-content: center; height: 36px; padding: 0;
	border: 0 !important; border-radius: 50% !important; background: none !important;
	color: var(--hdme-grey-800, #232a31) !important; font-weight: 500; text-align: center; text-decoration: none;
}
#ui-datepicker-div .ui-datepicker-calendar td a:hover { background: var(--hdme-blue-50, #eef4fc) !important; color: var(--hdme-blue-800, #1e3d68) !important; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-highlight { box-shadow: inset 0 0 0 1.5px var(--hdme-blue-400, #5b93da); color: var(--hdme-blue-800, #1e3d68) !important; font-weight: 700; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active { background: var(--hdme-blue-600, #3366ad) !important; color: #fff !important; box-shadow: none; }
#ui-datepicker-div .ui-datepicker-unselectable span,
#ui-datepicker-div .ui-state-disabled span { color: var(--hdme-grey-300, #b3bdc7) !important; }
#ui-datepicker-div .ui-datepicker-other-month { visibility: hidden; }

@media (max-width: 480px) {
	#ui-datepicker-div .ui-datepicker-calendar td a,
	#ui-datepicker-div .ui-datepicker-calendar td span { height: 40px; }   /* bigger touch targets */
}