/* ==========================================================================
   Kwezi Safaris: WPForms layout fixes, all pages (CHANGE 76)
   Loaded site-wide after the template CSS. Colours, fonts and borders stay
   with each template; this file only fixes layout:
   1. Name field (First / Last): side by side, full width. WPForms adds
      clearfix ::before/::after to .wpforms-field-row; when a template made
      that row a grid they became grid cells and pushed First/Last apart.
   2. Date dropdowns (Month / Day / Year): one row, readable widths, with a
      chevron so they read as selects (templates set appearance: none).
   3. Field size presets (small / medium) fill the column, so every input
      lines up and placeholders such as "Adults (15+ years)" are not cut off.
   ========================================================================== */

/* 1. Name field ---------------------------------------------------------- */
body .wpforms-container .wpforms-form .wpforms-field-name .wpforms-field-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px 16px !important;
	width: 100% !important;
	max-width: 100% !important;
	grid-template-columns: none !important;
}
body .wpforms-container .wpforms-form .wpforms-field-name .wpforms-field-row::before,
body .wpforms-container .wpforms-form .wpforms-field-name .wpforms-field-row::after {
	content: none !important;
	display: none !important;
}
body .wpforms-container .wpforms-form .wpforms-field-name .wpforms-field-row-block {
	flex: 1 1 180px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body .wpforms-container .wpforms-form .wpforms-field-name .wpforms-field-row-block input {
	width: 100% !important;
	max-width: none !important;
}

/* 2. Date dropdowns ------------------------------------------------------ */
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-field-row,
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-field-date-dropdown-wrap,
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-date-dropdown {
	width: 100% !important;
	max-width: 100% !important;
}
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-field-date-dropdown-wrap,
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-date-dropdown {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	margin: 0 !important;
}
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-field-date-dropdown-wrap select,
body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-date-dropdown select {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 76px !important;
	max-width: none !important;
	margin: 0 !important;
	min-height: 44px !important;
	padding-right: 30px !important;
	text-overflow: ellipsis;
}
body .wpforms-container .wpforms-form .wpforms-field-date-time select.wpforms-field-date-time-date-year {
	flex-grow: 1.3 !important;
}

/* Chevron for selects styled with appearance: none (templates remove the native arrow) */
body .wpforms-container .wpforms-form select:not([multiple]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b64' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 12px !important;
	padding-right: 34px !important;
}

/* 3. Field size presets fill the column ---------------------------------- */
body .wpforms-container .wpforms-form .wpforms-field input.wpforms-field-small,
body .wpforms-container .wpforms-form .wpforms-field input.wpforms-field-medium,
body .wpforms-container .wpforms-form .wpforms-field select.wpforms-field-small,
body .wpforms-container .wpforms-form .wpforms-field select.wpforms-field-medium,
body .wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-small,
body .wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-medium,
body .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-small,
body .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-medium {
	width: 100% !important;
	max-width: 100% !important;
}

@media (max-width: 480px) {
	body .wpforms-container .wpforms-form .wpforms-field-name .wpforms-field-row-block {
		flex-basis: 100% !important;
	}
	body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-field-date-dropdown-wrap select,
	body .wpforms-container .wpforms-form .wpforms-field-date-time .wpforms-date-dropdown select {
		min-width: 0 !important;
		padding-left: 10px !important;
	}
}