/**
 * Boat WhatsApp Booking — frontend form styles.
 * Scoped to .bwb-form so the theme/Elementor controls can override safely.
 */

.bwb-form {
	/* --bwb-gap-x: horizontal space between columns; --bwb-gap-y: vertical space between rows. */
	--bwb-gap-x: 18px;
	--bwb-gap-y: 18px;
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
}

.bwb-form *,
.bwb-form *::before,
.bwb-form *::after {
	box-sizing: border-box;
}

/* Field rows: flex-wrap grid driven by per-field width classes. */
.bwb-fields {
	display: flex;
	flex-wrap: wrap;
	margin: 0 calc( var( --bwb-gap-x ) / -2 ) calc( var( --bwb-gap-y ) * -1 );
}

.bwb-field {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 calc( var( --bwb-gap-x ) / 2 );
	margin-bottom: var( --bwb-gap-y );
}

/* Scoped under .bwb-form so the per-field width wins over theme/Elementor flex defaults. */
.bwb-form .bwb-field.bwb-col-100 { flex: 0 0 100%; max-width: 100%; }
.bwb-form .bwb-field.bwb-col-75 { flex: 0 0 75%; max-width: 75%; }
.bwb-form .bwb-field.bwb-col-66 { flex: 0 0 66.666%; max-width: 66.666%; }
.bwb-form .bwb-field.bwb-col-50 { flex: 0 0 50%; max-width: 50%; }
.bwb-form .bwb-field.bwb-col-33 { flex: 0 0 33.333%; max-width: 33.333%; }
.bwb-form .bwb-field.bwb-col-25 { flex: 0 0 25%; max-width: 25%; }

.bwb-field > label,
.bwb-field-legend {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	line-height: 1.3;
}

.bwb-req {
	color: #d63638;
}

.bwb-field input:not([type="checkbox"]):not([type="radio"]),
.bwb-field textarea,
.bwb-field select {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px; /* 16px avoids iOS zoom-on-focus */
	line-height: 1.4;
	border: 1px solid #cbd2d9;
	border-radius: 8px;
	background-color: #fff;
	color: #1f2933;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bwb-field select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.bwb-field textarea {
	resize: vertical;
	min-height: 110px;
}

.bwb-field input:focus,
.bwb-field textarea:focus,
.bwb-field select:focus {
	outline: none;
	border-color: #25d366;
	box-shadow: 0 0 0 3px rgba( 37, 211, 102, 0.18 );
}

.bwb-field.has-error input,
.bwb-field.has-error textarea,
.bwb-field.has-error select {
	border-color: #d63638;
}

/* Radio / checkbox / acceptance groups. */
.bwb-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bwb-option,
.bwb-acceptance {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.bwb-option input,
.bwb-acceptance input {
	margin: 2px 0 0;
	width: auto;
	flex: 0 0 auto;
}

.bwb-field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #d63638;
	min-height: 1em;
}

/* Honeypot. */
.bwb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Steps. */
.bwb-step[hidden] {
	display: none;
}

.bwb-progress {
	margin-bottom: 22px;
}

.bwb-progress-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
}

.bwb-progress-step {
	color: #8c8f94;
	transition: color 0.2s ease;
}

.bwb-progress-step.is-active {
	color: #25d366;
}

.bwb-progress-bar {
	height: 6px;
	border-radius: 999px;
	background-color: #e4e7eb;
	overflow: hidden;
}

.bwb-progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	background-color: #25d366;
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* Actions. */
.bwb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.bwb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1 1 auto;
	padding: 14px 22px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: #25d366;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.05s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bwb-prev {
	flex: 0 0 auto;
	background-color: #6b7280;
}

.bwb-btn:hover {
	opacity: 0.92;
}

.bwb-btn:active {
	transform: translateY( 1px );
}

.bwb-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.bwb-btn[hidden] {
	display: none;
}

.bwb-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: bwb-spin 0.7s linear infinite;
}

.bwb-form.is-loading .bwb-spinner {
	display: inline-block;
}

@keyframes bwb-spin {
	to {
		transform: rotate( 360deg );
	}
}

.bwb-message {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.4;
	min-height: 1em;
}

.bwb-message.is-success {
	color: #1a7f37;
}

.bwb-message.is-error {
	color: #d63638;
}

/* Responsive: stack columns and enlarge touch targets on small screens. */
@media ( max-width: 600px ) {
	.bwb-form .bwb-field[class*="bwb-col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.bwb-field input,
	.bwb-field textarea,
	.bwb-field select {
		padding: 13px 14px;
	}

	.bwb-btn {
		padding: 15px 22px;
	}
}