/**
 * Spots Design System — datepicker override (Blue + Red)
 * css/datepicker-blue-red.css
 *
 * bootstrap-datepicker1.js (js/bootstrap-datepicker1.js) generates the
 * .datepicker-dropdown popup used by every "#date" / ".datepicker" field
 * across the booking flow (productsp*.php, ftl.php, instantquote_*.php).
 * Its base skin, css/datepicker.css, is the unmodified Bootstrap 2 vendor
 * file — flat #0088cc/orange gradients, hardcoded greys, no relationship to
 * the design tokens.
 *
 * Load order (see header.php): after css/datepicker.css, which it overrides,
 * and after css/variables-blue-red.css, whose tokens it consumes. Declares
 * no new component structure — only repaints the vendor markup.
 */

.datepicker {
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--paper-white);
	font-family: var(--font-body);
	box-shadow: var(--shadow-md);
}

.datepicker-dropdown:before,
.datepicker-dropdown:after {
	display: none;
}

.datepicker table tr th {
	font-weight: var(--fw-semibold);
	color: var(--blue-ink);
}

.datepicker table tr th.datepicker-switch {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	color: var(--spots-blue);
}

.datepicker table tr th.prev,
.datepicker table tr th.next {
	color: var(--spots-blue);
	border-radius: var(--radius-sm);
}

.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tr th.datepicker-switch:hover {
	background: var(--blue-50);
}

.datepicker table tr th.dow {
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	color: var(--slate);
}

.datepicker table tr td {
	font-size: var(--text-sm);
	color: var(--blue-ink);
	border-radius: var(--radius-sm);
}

.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
	background: var(--blue-50);
	color: var(--spots-blue);
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new {
	color: var(--fog);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	background: none;
	color: var(--fog);
}

/* "Today" — a wash, not the vendor gradient, so it reads as a hint rather
   than a second selected state */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
	background: var(--blue-50);
	background-image: none;
	filter: none;
	border-color: var(--blue-200);
	color: var(--spots-blue);
	font-weight: var(--fw-semibold);
	text-shadow: none;
}

/* Selected / active day — flat brand blue, no gradient */
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
	background: var(--spots-blue);
	background-image: none;
	filter: none;
	border-color: var(--spots-blue);
	color: var(--paper-white);
	text-shadow: none;
}

.datepicker table tr td span {
	border-radius: var(--radius-sm);
}

.input-daterange .add-on {
	background: var(--surface-alt);
	border-color: var(--color-border);
	text-shadow: none;
}