/* ABOUTME: Shared base styles for booking form components used by both homepage form and wizard. */
/* ABOUTME: Covers input fields, number spinners, checkboxes, form field layouts, and datepicker. */

/* ==========================================================================
   INPUT BASE STYLES
   ========================================================================== */

input,
textarea {
	border: 1px solid;
	border-radius: 3px;
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.1);
	padding: 0.3rem;
	font-size: 1.1rem;
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
	font-size: 1.1rem;
	max-width: 6ch;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
}

input[type="button"] {
	-webkit-appearance: button;
	cursor: pointer;
}

input[type="date"] {
	width: fit-content;
}

input[type="checkbox"] {
	margin: 0;
	width: 1.5rem;
	height: 1.5rem;
	accent-color: #13c3ce;
	box-shadow: unset;
}

/* ==========================================================================
   INPUT GROUPS (NUMBER SPINNERS)
   ========================================================================== */

.input-group {
	display: flex;
}

.input-group input[type="button"] {
	background-color: #eeeeee;
	border: 0px;
	box-shadow: none;
	transition: all 300ms ease;
	border-radius: 0px;
	aspect-ratio: 1;
	line-height: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.input-group input[type="number"] {
	border-radius: 0px;
}

.input-group .button-minus,
.input-group .button-plus {
	font-weight: bold;
	padding: 0;
}

.input-group .quantity-field {
	position: relative;
	text-align: center;
	z-index: 10;
	width: 5ch;
}

#buttonMinus {
	border-left: 1px solid;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	width: 44px;
}

#buttonPlus {
	border-right: 1px solid;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	width: 44px;
}

/* ==========================================================================
   FORM FIELD WRAPPERS
   ========================================================================== */

.form-field label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.form-field.form-field-checkbox {
	border: 1px solid;
	border-radius: 5px;
	padding: 0.3rem 0.5rem;
	display: flex;
	gap: 0.7rem;
}

.form-field.form-field-checkbox label {
	flex-direction: row-reverse;
	align-items: center;
}

.form-field-checkbox label span {
	width: 100%;
}

#form-field-conference {
	display: flex;
	gap: 1rem;
}

/* Checkbox label states */
label:has(input[type="checkbox"]:checked) {
	font-weight: bold;
}

label:has(input[disabled]:not(:checked)) span {
	color: #ccc;
}

/* ==========================================================================
   INLINE FORM LAYOUT
   ========================================================================== */

.inline-form-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.form-group-label {
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   DATEPICKER
   ========================================================================== */

.datepicker-container {
	position: relative;
}

wc-datepicker {
	position: absolute;
	top: calc(2 * 1.5rem + 15px);
	left: 0px;
	border: 1px solid #111;
	border-radius: 3px;
	z-index: 999;
}

#date_range {
	max-width: 25ch;
	font-size: 1.3rem;
	padding: 0.5rem 2rem 0.5rem 0.6rem;
	background-color: #e8fafb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16M7 14h.013m2.997 0h.005m2.995 0h.005m3 0h.005m-3.005 3h.005m-6.01 0h.005m2.995 0h.005'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.4rem center;
	background-size: 1.2rem;
}

.wc-datepicker__date--today {
	color: var(--color-dark-blue) !important;
}

.wc-datepicker__date {
	font-weight: bold;
}