/**
 * Atom: Inputs
 * Booking form fields, labels, hints, validation states
 */

label.booking-label {
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	line-height: 20px;
	padding-left: var(--space-1);
	display: block;
	color: var(--gray-500);
}

.booking-wrapper {
	position: relative;
	margin-bottom: var(--space-5);
}

.booking-input {
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-lg);
	background: var(--white);
	padding: 0 var(--space-4);
	height: 46px;
	display: block;
	width: 100%;
	resize: none;
	font-size: var(--text-lg);
	font-weight: var(--font-medium);
	line-height: 46px;
	color: var(--black);
	transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

textarea.booking-input {
	height: auto;
	padding: var(--space-3) var(--space-4);
	line-height: 22px;
}

.booking-input::placeholder {
	color: var(--gray-400);
	font-weight: var(--font-normal);
	font-style: italic;
	font-size: var(--text-md);
}

.booking-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}

/* Only show validation errors after form submission attempt */
.form-attempted .booking-input:invalid,
.booking-input.is-invalid {
	border: 1px solid var(--red);
}

/* Phone field uses explicit classes only, not browser validation */
#phone.booking-input:invalid,
#phone.booking-input:valid {
	border: 1px solid var(--gray-300);
}

.form-attempted #phone.booking-input:invalid {
	border: 1px solid var(--gray-300);
}

#phone.booking-input.is-invalid {
	border: 1px solid var(--red);
}

#phone.booking-input.is-valid {
	border: 1px solid var(--green);
}

.booking-input-invalid {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	font-size: var(--text-2xs);
	font-weight: var(--font-normal);
	line-height: 16px;
	padding-left: var(--space-1);
	color: var(--red);
}

.form-attempted .booking-input:invalid ~ .booking-input-invalid,
.booking-input.is-invalid ~ .booking-input-invalid {
	display: block;
}

.booking-input.is-valid {
	border: 1px solid var(--green);
}

.booking .iti {
	display: block;
}

.booking-input-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
}

/* Shift field hint down when validation error is visible */
.form-attempted .booking-wrapper:has(.booking-input:invalid) + .field-hint,
.booking-wrapper:has(.booking-input.is-invalid) + .field-hint {
	padding-top: 12px;
}

/* Field hints */
.field-hint {
	font-size: var(--text-xs);
	color: var(--gray-500);
	margin-top: -16px;
	margin-bottom: var(--space-4);
	padding-left: var(--space-4);
	line-height: 1.4;
}

.field-hint.mt-1 {
	margin-top: var(--space-1);
}

/* Close button for input fields */
.booking-wrapper .close {
	position: absolute;
	right: 5px;
	top: 50% !important;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: var(--text-base);
	color: var(--gray-500);
	line-height: 1;
	border: none;
	background: var(--gray-100);
	padding: 0;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition-fast);
}

.booking-wrapper .close:hover {
	background: var(--gray-200);
}

/* Field spacing overrides */
.transfer-flight-field {
	margin-top: var(--space-2);
}

.comments-textarea-wrapper {
	margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 768px) {
	label.booking-label {
		font-size: var(--text-sm);
		padding-left: 2px;
	}

	.booking-input {
		font-size: var(--text-lg);
		height: 44px;
		padding: 0 var(--space-3);
		line-height: 44px;
	}

	textarea.booking-input {
		height: auto;
		padding: var(--space-2-5) var(--space-3);
		line-height: 22px;
	}

	.field-hint {
		font-size: var(--text-2xs);
		padding-left: 2px;
		margin-top: -14px;
		margin-bottom: var(--space-3);
	}
}