/* Da Villa Juanita — compact, mobile-first booking flow.
 * This stylesheet is only enqueued on quick-booking accommodation pages
 * and date-only availability result pages. Existing booking logic remains intact.
 */

/* Quick-booking page: remove technical clutter but keep pricing logic in the DOM. */
body.dvj-quickbook .extra_items_row,
body.dvj-quickbook .price_breakdown_row,
body.dvj-quickbook .toggle_breakdown {
	display: none !important;
}

body.dvj-quickbook .booking_form_controls_holder,
body.dvj-quickbook .price_row,
body.dvj-quickbook .dates_row,
body.dvj-quickbook .booking-commands {
	width: 100% !important;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

body.dvj-quickbook .booking_form_controls_holder {
	padding: 20px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(11, 19, 43, .08);
}

body.dvj-quickbook .dvj-quickbook-intro {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 8px;
	background: #f6f8fb;
	color: #263746;
}

body.dvj-quickbook .dvj-quickbook-intro strong {
	display: block;
	margin-bottom: 4px;
	color: #0b132b;
	font-size: 17px;
}

body.dvj-quickbook.dvj-quickbook-ready .booking_terms,
body.dvj-quickbook.dvj-quickbook-ready .calendar-colors,
body.dvj-quickbook.dvj-quickbook-ready .row.calendar {
	display: none !important;
}

body.dvj-quickbook .price_row > p {
	margin-bottom: 12px;
}

body.dvj-quickbook .booking_form_adults_div,
body.dvj-quickbook .booking_form_children_div {
	box-sizing: border-box;
}

body.dvj-quickbook .booking_form_adults_div select,
body.dvj-quickbook .booking_form_children_div select,
body.dvj-quickbook .booking_form_adults_div .selector,
body.dvj-quickbook .booking_form_children_div .selector {
	width: 100% !important;
	min-height: 46px;
}

body.dvj-quickbook table.summary {
	width: 100% !important;
	margin: 8px 0 0;
	table-layout: fixed;
}

body.dvj-quickbook table.summary th,
body.dvj-quickbook table.summary td {
	padding: 10px 8px;
	vertical-align: middle;
}

body.dvj-quickbook table.summary th {
	width: 58%;
	color: #4b5b68;
	font-weight: 600;
}

body.dvj-quickbook table.summary td {
	width: 42%;
	text-align: right;
	font-weight: 600;
}

body.dvj-quickbook table.summary tfoot th,
body.dvj-quickbook table.summary tfoot td {
	padding-top: 14px;
	border-top: 1px solid #dbe2e8;
	color: #0b132b;
	font-size: 18px;
	font-weight: 800;
}

body.dvj-quickbook .booking-commands {
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

body.dvj-quickbook.dvj-quickbook-ready .booking-commands {
	display: flex !important;
}

body.dvj-quickbook .booking-commands .book-accommodation-proceed {
	order: 1;
	float: none !important;
	flex: 1 1 100%;
	width: 100% !important;
	min-height: 50px;
	margin: 0 !important;
	text-align: center;
}

body.dvj-quickbook .booking-commands .book-accommodation-reset {
	order: 2;
	float: none !important;
	flex: 1 1 100%;
	width: 100% !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	background: transparent !important;
	color: #1769aa !important;
	box-shadow: none !important;
	text-align: center;
	text-decoration: underline;
}

body.dvj-quickbook .dvj-multi-room-note {
	display: none !important;
}

/* Date-only search: let the available stays be the focus. */
body.dvj-date-search #secondary.left-sidebar,
body.dvj-date-search aside.left-sidebar {
	display: none !important;
}

body.dvj-date-search .main .three-fourth,
body.dvj-date-search .main .two-third,
body.dvj-date-search .main .content {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	body.home .hero-sidebar .widget-search .block {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body.home .hero-sidebar .widget-search .filter {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		margin: 0 !important;
	}

	body.home .hero-sidebar .widget-search .filter-type-submit {
		grid-column: 1 / -1;
	}

	body.home .hero-sidebar .widget-search input[type="submit"] {
		width: 100% !important;
		min-height: 48px;
	}
}

@media (max-width: 767px) {
	body.home .hero-sidebar .widget-search .block {
		grid-template-columns: 1fr;
	}

	body.home .hero-sidebar .byt-widget-search-inner {
		padding: 14px !important;
		box-sizing: border-box;
	}

	body.home .hero-sidebar .widget-search .select,
	body.home .hero-sidebar .widget-search .select .selector,
	body.home .hero-sidebar .widget-search .datepicker-wrap,
	body.home .hero-sidebar .widget-search select,
	body.home .hero-sidebar .widget-search input[type="text"],
	body.home .hero-sidebar .widget-search input[type="submit"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.home .hero-sidebar .widget-search select,
	body.home .hero-sidebar .widget-search input[type="text"],
	body.home .hero-sidebar .widget-search input[type="submit"] {
		min-height: 48px;
		font-size: 16px;
	}

	/*
		 * Use the native accommodation select on phones. BookYourTravel's
		 * Uniform select is transparent and can fail hit-testing in Android
		 * Chrome, leaving a visible field that will not open.
		 */
		body.home .hero-sidebar .filter-type-accommodation-name-select div.selector {
			height: auto !important;
			min-height: 0 !important;
			padding: 0 !important;
			border: 0 !important;
			background: transparent !important;
			overflow: visible !important;
		}

		body.home .hero-sidebar .filter-type-accommodation-name-select div.selector > span {
			display: none !important;
		}

		body.home .hero-sidebar .filter-type-accommodation-name-select select,
		body.home .hero-sidebar .filter-type-accommodation-name-select .dvj-native-stay-select,
		body.home .hero-sidebar .filter-type-accommodation-name-select div.selector > select {
			position: relative !important;
			inset: auto !important;
			display: block !important;
			width: 100% !important;
			height: 48px !important;
			min-height: 48px !important;
			padding: 0 42px 0 18px !important;
			opacity: 1 !important;
			visibility: visible !important;
			pointer-events: auto !important;
			z-index: 20 !important;
			border: 1px solid rgba(0,0,0,.2) !important;
			border-radius: 18px !important;
			background: #fff !important;
			color: #454545 !important;
			-webkit-appearance: auto !important;
			appearance: auto !important;
			touch-action: manipulation;
		}

		/* Safe mobile select override: preserve the original widget geometry. */
		body.home .hero-sidebar .filter-type-accommodation-name-select div.selector {
			position: relative !important;
			height: 48px !important;
			min-height: 48px !important;
			padding-left: 15px !important;
			border: 1px solid rgba(0,0,0,.2) !important;
			background: #fff !important;
			overflow: hidden !important;
		}

		body.home .hero-sidebar .filter-type-accommodation-name-select div.selector > span {
			display: flex !important;
			height: 48px !important;
			min-height: 48px !important;
			align-items: center !important;
		}

		body.home .hero-sidebar .filter-type-accommodation-name-select div.selector > select {
			position: absolute !important;
			inset: 0 !important;
			display: block !important;
			width: 100% !important;
			height: 48px !important;
			min-height: 48px !important;
			padding: 0 !important;
			opacity: .01 !important;
			visibility: visible !important;
			pointer-events: auto !important;
			z-index: 30 !important;
			border: 0 !important;
			background: transparent !important;
			-webkit-appearance: none !important;
			appearance: none !important;
			touch-action: manipulation;
		}

		#ui-datepicker-div {
		width: calc(100vw - 24px) !important;
		max-width: 420px !important;
		left: 12px !important;
		right: auto !important;
		box-sizing: border-box;
	}

	body.dvj-quickbook #post-gallery {
		display: none !important;
	}

	body.dvj-quickbook .inner-nav {
		display: none !important;
	}

	body.dvj-quickbook #availability {
		display: block !important;
		width: 100% !important;
	}

	body.dvj-quickbook #availability > article > h2 {
		margin-bottom: 10px;
	}

	body.dvj-quickbook #availability > article > .text-wrap {
		margin-bottom: 14px;
	}

	body.dvj-quickbook .booking_form_controls_holder {
		padding: 15px;
		border-radius: 8px;
	}

	body.dvj-quickbook .price_row .row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body.dvj-quickbook .booking_form_adults_div,
	body.dvj-quickbook .booking_form_children_div {
		width: 100% !important;
		margin: 0 !important;
	}

	body.dvj-quickbook .booking_form_datepicker,
	body.dvj-quickbook .ui-datepicker-multi,
	body.dvj-quickbook .ui-datepicker-multi-2 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.dvj-quickbook .booking_form_datepicker .ui-datepicker-group {
		float: none !important;
		width: 100% !important;
	}

	body.dvj-quickbook .booking_form_datepicker .ui-datepicker-group + .ui-datepicker-group {
		margin-top: 12px;
	}

	body.dvj-quickbook table.summary,
	body.dvj-quickbook table.summary tbody,
	body.dvj-quickbook table.summary tfoot,
	body.dvj-quickbook table.summary tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	body.dvj-quickbook table.summary tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		align-items: center;
	}

	body.dvj-quickbook table.summary th,
	body.dvj-quickbook table.summary td {
		display: block;
		width: auto !important;
		box-sizing: border-box;
	}

	body.dvj-date-search .accommodation_item.one-third,
	body.dvj-date-search article.accommodation_item {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.dvj-date-search .accommodation_item .actions .gradient-button {
		display: block;
		width: 100%;
		min-height: 46px;
		box-sizing: border-box;
		text-align: center;
	}

	body.dvj-date-search .accommodation_item figure img {
		width: 100%;
		height: auto;
	}
}

/*
 * Hard mobile safeguard for the booking summary.
 * BookYourTravel's responsive-table rules force nowrap and overflow below
 * 960px. On phones, render each summary row as a two-column grid so long
 * tax labels can wrap without ever colliding with the amount column.
 */
@media (max-width: 960px) {
	body.dvj-quickbook .dates_row {
			width: 100% !important;
			max-width: 100% !important;
			overflow-x: hidden !important;
			box-sizing: border-box !important;
		}

		body.dvj-quickbook table.summary.responsive {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: visible !important;
		table-layout: auto !important;
	}

	body.dvj-quickbook table.summary.responsive tbody,
	body.dvj-quickbook table.summary.responsive tfoot {
		display: block !important;
		width: 100% !important;
	}

	body.dvj-quickbook table.summary.responsive tr {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(88px, 30%) !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	body.dvj-quickbook table.summary.responsive th,
	body.dvj-quickbook table.summary.responsive td {
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow: hidden !important;
		overflow-wrap: anywhere !important;
		word-break: normal !important;
			font-size: clamp(12px, 3.4vw, 14px) !important;
			line-height: 1.3 !important;
		box-sizing: border-box !important;
	}

	body.dvj-quickbook table.summary.responsive th *,
	body.dvj-quickbook table.summary.responsive td * {
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	body.dvj-quickbook table.summary.responsive td {
		text-align: right !important;
	}
}

@media (max-width: 420px) {
	body.dvj-quickbook .price_row .row {
		grid-template-columns: 1fr;
	}
}

/* Final responsive booking-summary guard: prevents horizontal drift and text collision. */
@media (max-width: 960px) {
	body.dvj-quickbook .dates_row {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.dvj-quickbook table.summary.responsive {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 8px 0 0 !important;
		overflow: hidden !important;
		table-layout: auto !important;
		box-sizing: border-box !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
	}

	body.dvj-quickbook table.summary.responsive tbody,
	body.dvj-quickbook table.summary.responsive tfoot {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.dvj-quickbook table.summary.responsive tr {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(88px, 30%) !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	body.dvj-quickbook table.summary.responsive th,
	body.dvj-quickbook table.summary.responsive td {
		position: static !important;
		float: none !important;
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 9px 10px !important;
		white-space: normal !important;
		overflow: visible !important;
		overflow-wrap: anywhere !important;
		word-break: normal !important;
		box-sizing: border-box !important;
		font-size: clamp(12px, 3.2vw, 14px) !important;
		line-height: 1.3 !important;
	}

	body.dvj-quickbook table.summary.responsive th *,
	body.dvj-quickbook table.summary.responsive td * {
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: normal !important;
	}

	body.dvj-quickbook table.summary.responsive td {
		text-align: right !important;
	}

	body.dvj-quickbook table.summary.responsive tfoot th,
	body.dvj-quickbook table.summary.responsive tfoot td {
		font-size: clamp(14px, 3.6vw, 16px) !important;
		font-weight: 800 !important;
	}
}

/*
 * Definitive booking-summary layout.
 * Flex rows are more reliable than BookYourTravel's responsive-table rules
 * across Android Chrome, iPhone Safari and tablet widths.
 */
@media (max-width: 960px) {
	body.dvj-quickbook .booking_form_controls_holder,
	body.dvj-quickbook .dates_row,
	body.dvj-quickbook table.summary.responsive {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.dvj-quickbook .dates_row {
		overflow: hidden !important;
	}

	body.dvj-quickbook table.summary.responsive {
		display: block !important;
		width: 100% !important;
		margin: 8px 0 0 !important;
		overflow: hidden !important;
	}

	body.dvj-quickbook table.summary.responsive tbody,
	body.dvj-quickbook table.summary.responsive tfoot {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.dvj-quickbook table.summary.responsive tr {
		display: flex !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	body.dvj-quickbook table.summary.responsive th,
	body.dvj-quickbook table.summary.responsive td {
		position: static !important;
		float: none !important;
		display: flex !important;
		align-items: center !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 9px 10px !important;
		box-sizing: border-box !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
		overflow: hidden !important;
		font-size: clamp(12px, 3vw, 14px) !important;
		line-height: 1.3 !important;
	}

	body.dvj-quickbook table.summary.responsive th {
		flex: 1 1 auto !important;
		width: auto !important;
		font-weight: 600 !important;
	}

	body.dvj-quickbook table.summary.responsive td {
		flex: 0 0 clamp(92px, 30%, 150px) !important;
		width: auto !important;
		justify-content: flex-end !important;
		text-align: right !important;
		font-weight: 700 !important;
	}

	body.dvj-quickbook table.summary.responsive th *,
	body.dvj-quickbook table.summary.responsive td * {
		max-width: 100% !important;
		min-width: 0 !important;
		white-space: normal !important;
		overflow-wrap: break-word !important;
	}

	body.dvj-quickbook table.summary.responsive tfoot th,
	body.dvj-quickbook table.summary.responsive tfoot td {
		font-size: clamp(14px, 3.4vw, 16px) !important;
		font-weight: 800 !important;
	}
}

@media (max-width: 380px) {
	body.dvj-quickbook table.summary.responsive th,
	body.dvj-quickbook table.summary.responsive td {
		padding: 8px !important;
		font-size: 12px !important;
	}

	body.dvj-quickbook table.summary.responsive td {
		flex-basis: 88px !important;
	}

	body.dvj-quickbook table.summary.responsive tfoot th,
	body.dvj-quickbook table.summary.responsive tfoot td {
		font-size: 14px !important;
	}
}

/* WooCommerce checkout is the single guest-information step before Fygaro. */
body.dvj-booking-checkout .woocommerce {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

body.dvj-booking-checkout .dvj-checkout-intro {
	display: grid;
	gap: 4px;
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid #dce4eb;
	border-radius: 10px;
	background: #f6f8fb;
	color: #334553;
}

body.dvj-booking-checkout .dvj-checkout-intro strong {
	color: #0b132b;
	font-size: 18px;
}

body.dvj-booking-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

body.dvj-booking-checkout .woocommerce-billing-fields__field-wrapper .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

body.dvj-booking-checkout #billing_email_field,
body.dvj-booking-checkout #billing_phone_field,
body.dvj-booking-checkout #billing_country_field,
body.dvj-booking-checkout #billing_address_1_field,
body.dvj-booking-checkout #billing_city_field {
	grid-column: 1 / -1;
}

body.dvj-booking-checkout .woocommerce form .form-row input.input-text,
body.dvj-booking-checkout .woocommerce form .form-row textarea,
body.dvj-booking-checkout .woocommerce form .form-row select,
body.dvj-booking-checkout .select2-container .select2-selection--single {
	min-height: 48px;
	font-size: 16px;
	box-sizing: border-box;
}

body.dvj-booking-checkout #order_review,
body.dvj-booking-checkout #order_review_heading {
	width: 100% !important;
	float: none !important;
}

body.dvj-booking-checkout #place_order {
	width: 100% !important;
	min-height: 52px;
	font-size: 16px;
	font-weight: 700;
}

body.dvj-booking-checkout .woocommerce-checkout-payment {
	border-radius: 10px;
}

@media (max-width: 767px) {
	body.dvj-booking-checkout .woocommerce {
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
	}

	body.dvj-booking-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	body.dvj-booking-checkout .woocommerce-billing-fields__field-wrapper .form-row {
		grid-column: 1 !important;
	}

	body.dvj-booking-checkout .woocommerce-checkout #customer_details,
	body.dvj-booking-checkout .woocommerce-checkout .col2-set,
	body.dvj-booking-checkout .woocommerce-checkout .col-1,
	body.dvj-booking-checkout .woocommerce-checkout .col-2 {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}

	body.dvj-booking-checkout .woocommerce-checkout-review-order-table th,
	body.dvj-booking-checkout .woocommerce-checkout-review-order-table td {
		padding: 10px 6px;
		font-size: 14px;
	}

	body.dvj-booking-checkout .dvj-checkout-intro {
		padding: 14px;
	}
}

/* Direct Fygaro handoff: WooCommerce creates the order invisibly so the
 * customer enters identity/billing details only once, on Fygaro. */
body.dvj-direct-fygaro-checkout #customer_details,
body.dvj-direct-fygaro-checkout #order_review_heading,
body.dvj-direct-fygaro-checkout .woocommerce-checkout-review-order-table,
body.dvj-direct-fygaro-checkout .wc_payment_methods,
body.dvj-direct-fygaro-checkout .woocommerce-privacy-policy-text {
	display: none !important;
}

body.dvj-direct-fygaro-checkout .woocommerce {
	max-width: 640px;
}

body.dvj-direct-fygaro-checkout form.checkout {
	margin: 0 auto;
}

body.dvj-direct-fygaro-checkout #order_review {
	width: 100% !important;
	max-width: 640px;
	margin: 0 auto !important;
	float: none !important;
}

body.dvj-direct-fygaro-checkout .woocommerce-checkout-payment {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.dvj-direct-fygaro-checkout .place-order {
	padding: 0 !important;
	margin: 0 !important;
}

body.dvj-direct-fygaro-checkout .dvj-direct-fygaro-status {
	position: relative;
	padding-left: 58px;
}

body.dvj-direct-fygaro-checkout .dvj-direct-fygaro-status::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border: 2px solid #c5ced8;
	border-top-color: #0b132b;
	border-radius: 50%;
	animation: dvj-fygaro-spin .8s linear infinite;
}

body.dvj-direct-fygaro-checkout.dvj-auto-submitting #place_order {
	opacity: .45;
	pointer-events: none;
	cursor: wait;
}

body.dvj-direct-fygaro-checkout #place_order {
	display: block !important;
	width: 100% !important;
	min-height: 52px;
	margin-top: 12px !important;
}

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

@media (max-width: 767px) {
	body.dvj-direct-fygaro-checkout .woocommerce {
		max-width: none;
	}

	body.dvj-direct-fygaro-checkout .dvj-direct-fygaro-status {
		padding: 14px 14px 14px 52px;
	}

	body.dvj-direct-fygaro-checkout .dvj-direct-fygaro-status::before {
		left: 17px;
	}
}