/* "Your next steps" appointment form – date pop-up, time slots, inline errors, states (assets/js/appointments.js). */

form.si-appt-form .si-appt-date { cursor: pointer; caret-color: transparent; }
form.si-appt-form .si-appt-date::placeholder { color: var(--si-text-grey, #6b6b6b); }

/* time slots: a select that keeps the time field's classes (size, position, clock icon) */
form.si-appt-form select.si-appt-time {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	color: var(--si-black, #1b1b1b);
	padding-inline-end: 40px;
	text-overflow: ellipsis;
}
form.si-appt-form select.si-appt-time.is-empty { color: var(--si-text-grey, #6b6b6b); }
form.si-appt-form select.si-appt-time:disabled { cursor: not-allowed; opacity: 1; }
form.si-appt-form select.si-appt-time:focus-visible,
form.si-appt-form .si-appt-date:focus-visible { outline: 2px solid var(--si-royal-blue, #2b3a8f); outline-offset: 2px; }

/* invalid fields + messages (placed under the field; absolutely on the desktop Figma layout, see appointments.js) */
form.si-appt-form .si-appt-invalid { border-color: #b42318 !important; }
form.si-appt-form .si-appt-error {
	margin: 4px 0 0;
	font-family: var(--si-font-body, inherit);
	font-size: 12px;
	line-height: 16px;
	color: #b42318;
	letter-spacing: 0.2px;
	z-index: 1;
}
form.si-appt-form .si-appt-error[hidden] { display: none; }

/* calendar pop-up */
form.si-appt-form .si-cal {
	position: absolute;
	z-index: 30;
	box-sizing: border-box;
	padding: 14px 14px 10px;
	background: #fff;
	border: 1px solid rgba(114, 114, 114, 0.36);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(10, 18, 64, 0.18);
	font-family: var(--si-font-body, inherit);
	color: var(--si-black, #1b1b1b);
}
form.si-appt-form .si-cal[hidden] { display: none; }
form.si-appt-form .si-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
form.si-appt-form .si-cal__title { margin: 0; font-size: 14px; font-weight: 600; }
form.si-appt-form .si-cal__nav {
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent;
	font-size: 22px; line-height: 1; color: var(--si-navy, #0a1240); cursor: pointer;
}
form.si-appt-form .si-cal__nav:hover:not(:disabled) { background: #f1f1f2; }
form.si-appt-form .si-cal__nav:disabled { opacity: 0.3; cursor: default; }
form.si-appt-form .si-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
form.si-appt-form .si-cal__grid th { padding: 4px 0; font-size: 11px; font-weight: 500; color: var(--si-text-grey, #6b6b6b); text-align: center; border: 0; background: none; }
form.si-appt-form .si-cal__grid td { padding: 2px; border: 0; background: none; text-align: center; }
form.si-appt-form .si-cal__day {
	width: 100%; aspect-ratio: 1 / 1; max-height: 38px; padding: 0; border: 1px solid transparent; border-radius: 6px;
	background: #f1f1f2; color: var(--si-black, #1b1b1b); font: inherit; font-size: 13px; cursor: pointer;
}
form.si-appt-form .si-cal__day:hover:not(.is-off) { border-color: var(--si-royal-blue, #2b3a8f); }
form.si-appt-form .si-cal__day:focus-visible { outline: 2px solid var(--si-royal-blue, #2b3a8f); outline-offset: 1px; }
form.si-appt-form .si-cal__day.is-selected { background: var(--si-navy, #0a1240); color: #fff; }
form.si-appt-form .si-cal__day.is-off { background: transparent; color: #b3b3b8; text-decoration: line-through; cursor: not-allowed; }
form.si-appt-form .si-cal__hint { margin: 6px 0 0; font-size: 11px; line-height: 14px; color: var(--si-text-grey, #6b6b6b); }

/* states */
form.si-appt-form.si-appt-busy .si-submit,
form.si-appt-form.si-appt-busy button[type="submit"] { cursor: progress; opacity: 0.75; }
/* outcome messages: under the submit button, in the site blue (success, not-yet-confirmed and errors alike) */
form.si-appt-form [data-e-type="e-form-success-message"],
form.si-appt-form [data-e-type="e-form-error-message"] {
	box-sizing: border-box;
	margin-top: 4px;
	padding: 10px 14px;
	background: rgba(43, 58, 143, 0.06);
	border-left: 3px solid var(--si-royal-blue, #2b3a8f);
	border-radius: 4px;
	text-align: start;
}
form.si-appt-form [data-e-type="e-form-success-message"] p,
form.si-appt-form [data-e-type="e-form-error-message"] p {
	margin: 0;
	font-family: var(--si-font-body, inherit);
	font-size: 13px;
	line-height: 19px;
	color: var(--si-royal-blue, #2b3a8f) !important;
	text-align: start;
}
form.si-appt-form [data-e-type$="-message"]:focus { outline: none; }

/* drop-downs: dark, readable text for the options and the chosen value (all Site Core form selects) */
select.si-select option,
form.si-appt-form select option { color: var(--si-black, #1b1b1b); background-color: #fff; }
form.si-appt-form select.si-select,
select.si-select:has(option:checked:not([value=""])) { color: var(--si-black, #1b1b1b); }
form.si-appt-form select option[value=""] { color: var(--si-text-grey, #6b6b6b); }

/* honeypot + screen-reader text */
form.si-appt-form .si-appt-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.si-appt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
