/**
 * Moneysworth Toolkit — rental date picker
 *
 * Mobile-first: sized for a 390px screen and allowed to grow, rather than a
 * desktop layout squeezed down. Loaded only where [mt_dates_picker] renders.
 *
 * Rollback: remove the shortcode from the page.
 */

.mt-dp {
	max-width: 520px;
	margin: 0 auto;
	text-align: left;
	font-size: 16px;
	color: #1c2b3a;
}

.mt-dp__heading {
	font-size: 25px !important;
	line-height: 1.15;
	font-weight: 700;
	color: #1c2b3a !important;
	margin: 0 0 16px !important;
	text-wrap: balance;
}

.mt-dp__group {
	border: 1px solid #d5dde5;
	border-radius: 4px;
	padding: 14px 16px;
	margin: 0 0 12px;
	min-width: 0;
}

.mt-dp__legend {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: #7b8794;
	padding: 0 4px;
	margin: 0;
}

/* --- destination ------------------------------------------------------ */

.mt-dp__places {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.mt-dp__place {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.mt-dp__place input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.mt-dp__place span {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 48px;
	padding: 8px 10px;
	border: 1px solid #ccd3da;
	border-radius: 3px;
	background: #fff;
	color: #3d4854;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.mt-dp__place input:checked + span {
	background: #15467b;
	border-color: #15467b;
	color: #fff;
}

.mt-dp__place input:focus-visible + span {
	outline: 3px solid #15467b;
	outline-offset: 2px;
}

/* --- dates ------------------------------------------------------------ */

.mt-dp__dates {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.mt-dp__field {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	margin: 0;
}

.mt-dp__field > span {
	display: block;
	font-size: 12.5px;
	color: #5a6672;
	margin-bottom: 4px;
}

.mt-dp__field input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 10px;
	border: 1px solid #9aa4b0;
	border-radius: 3px;
	background: #fff;
	color: #1c2b3a;
	font-family: inherit;
	/* 16px keeps iOS from zooming the page when the field takes focus. */
	font-size: 16px;
}

.mt-dp__field input:focus {
	border-color: #15467b;
	outline: 2px solid #15467b;
	outline-offset: 1px;
}

.mt-dp__error {
	margin: 10px 0 0 !important;
	font-size: 14px;
	font-weight: 600;
	color: #9d2f24;
}

/* --- the disclosure that used to live at checkout step 2 -------------- */

/* The markup ships with empty fields so the page stays cacheable; JS fills
   them and marks the form ready. Until then the calculation box would be an
   empty grey bar, so it is held back rather than flashed.

   The controls are deliberately NOT gated on that flag. An earlier version
   greyed the button and set pointer-events:none until JS marked the form
   ready — which meant a slow, cached or failed script left the form
   permanently unusable. Hiding a summary is safe; disabling the input is not. */
.mt-dp:not([data-mt-ready="1"]) .mt-dp__calc { display: none; }

.mt-dp__calc {
	background: #f2f6fa;
	border: 1px solid #dfe6ed;
	border-radius: 4px;
	padding: 13px 16px;
	margin: 0 0 16px;
}

.mt-dp__calc strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #15467b;
	font-variant-numeric: tabular-nums;
}

.mt-dp__calc strong:empty { display: none; }

.mt-dp__calc span {
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #5a6672;
}

/* --- actions ---------------------------------------------------------- */

.mt-dp__go {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	background: #15467b;
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 700;
	cursor: pointer;
}

.mt-dp__go:hover { background: #0f3560; }

.mt-dp__go:disabled {
	background: #c9cfd6;
	color: #5a6672;
	cursor: not-allowed;
}

.mt-dp__browse {
	text-align: center;
	margin: 14px 0 0 !important;
}

.mt-dp__browse a {
	display: inline-block;
	padding: 10px 4px;
	min-height: 44px;
	font-size: 14.5px;
	font-weight: 600;
	color: #15467b !important;
	text-decoration: underline;
}

/* --- narrow phones ---------------------------------------------------- */

@media (max-width: 400px) {
	.mt-dp__heading { font-size: 22px !important; }
	.mt-dp__dates { gap: 8px; }
	.mt-dp__group { padding: 12px 13px; }
	.mt-dp__place span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.mt-dp * { transition: none !important; }
}

/* --- saved confirmation ------------------------------------------------
 * Saving dates on a page that already lists that location's inventory does
 * not navigate anywhere; it confirms here and moves them down the page.
 * -------------------------------------------------------------------- */

.mt-dp__saved {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0 !important;
	padding: 11px 14px;
	background: #eaf6f2;
	border: 1px solid #b9ddd3;
	border-radius: 3px;
	font-size: 14.5px;
	font-weight: 600;
	color: #1c5040;
}

.mt-dp__saved::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: no-repeat center/16px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217f6c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.mt-dp__saved[hidden] { display: none; }