/*
 * CroatiaRentalCars - mobile fixes (loaded on every page, after custom.css, crc-mobile.css and crc-premium.css).
 *
 * 1. Booking form: no zoom when a field is tapped (iOS zooms any field under 16px, then the page stays zoomed).
 * 2. Content area: nothing wider than the screen.
 * 3. Icons sit level with their heading (guide tables, why-book cards, driving highlights).
 * 4. Stats counters (4.8/5 Rating, 1000+ Suppliers ...) smaller on phones.
 * 5. Compact spacing on every page.
 * 6. "Find the Best Car Rental Deal" floating button hidden on search / booking / manage-booking pages.
 * 7. Booking form (form7) styled like vipcars.com.
 */

/* ---------- 1. Booking form: stop focus zoom ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 1024px) {
	/* 16px is the size at which iOS Safari stops zooming on focus. */
	#bookingengine input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
	#bookingengine select,
	#bookingengine textarea,
	.calentim-container-mobile input,
	.calentim-container-mobile select,
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="search"], input[type="password"], input[type="date"], input[type="url"],
	select, textarea {
		font-size: 16px !important;
	}
	#bookingengine input,
	#bookingengine select,
	#bookingengine button,
	#bookingengine label { touch-action: manipulation; }
	/* Nothing else here touches #bookingengine: the booking engine (search results, booking steps) has its
	   own responsive layout, and theme sizing rules inside it broke that layout. */
}

/* ---------- 2. Content area: nothing wider than the screen ---------- */
@media (max-width: 781px) {
	html, body { overflow-x: clip; }
	/* :not(#bookingengine *) keeps these away from the booking engine's own markup. */
	.wp-block-post-content :is(img, iframe, video, figure):not(#bookingengine *) { max-width: 100%; height: auto; }
	.wp-block-post-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.wp-block-post-content .wp-block-columns { gap: 14px !important; }
	.wp-block-post-content .wp-block-column { min-width: 0; }
	.wp-block-post-content :is(p, li, td, th, h1, h2, h3, h4, h5, h6):not(#bookingengine *) { overflow-wrap: break-word; word-break: normal; }
}

/* ---------- 3. Icons level with their heading ---------- */
@media (max-width: 781px) {
	/* :not(#crc_) only raises specificity above the generic compact-table rule in crc-mobile.css. */
	/* Guide tables ("Driving Side", "Minimum Rental Age" ...): each heading row was 58px wider than the
	   screen (width 100% + padding) and its icon sat 15px above the text. */
	.wp-block-table.guide-table th:not(#crc_),
	.travel-guide table th:not(#crc_) {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 42px;
		padding: 10px 10px 10px 46px !important;
		display: flex !important;
		align-items: center;
		font-size: 14.5px !important;
		line-height: 1.3 !important;
	}
	.wp-block-table.guide-table td:not(#crc_),
	.travel-guide table td:not(#crc_) {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 8px 10px 10px !important;
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}
	.wp-block-table.guide-table th:not(#crc_)::before,
	.travel-guide table th:not(#crc_)::before {
		left: 8px !important;
		top: 50% !important;
		transform: translateY(-50%) scale(.8) !important;
		transform-origin: center center !important;
	}

	/* Why Book With Us cards: icon and title on one line. */
	.why-book .wp-block-group.why-book-box,
	body.crc-mobile .why-book-box {
		position: relative;
		padding: 12px 10px 12px 12px !important;
	}
	.why-book .wp-block-group.why-book-box::before {
		top: 10px !important;
		left: 8px !important;
		transform: scale(.75) !important;
		transform-origin: top left !important;
	}
	.why-book .wp-block-group.why-book-box > .wp-block-heading:first-of-type {
		box-sizing: border-box !important;
		min-height: 30px;
		display: flex !important;
		align-items: center;
		padding-left: 34px !important;
		margin: 0 0 4px !important;
		font-size: 14px !important;
		line-height: 1.25 !important;
	}
	.why-book .wp-block-group.why-book-box > p { margin: 0 !important; }

	/* Local driving highlights (130 km/h highway limit ...): icon centred on the heading line. */
	.local-driving-insights .is-layout-grid.section-highlights .wp-block-group::after {
		top: 0 !important;
		transform: scale(.75) !important;
		transform-origin: top left !important;
	}
	.local-driving-insights .is-layout-grid.section-highlights .wp-block-group > .wp-block-heading:first-child {
		min-height: 27px;
		display: flex;
		align-items: center;
		margin: 0 !important;
	}
}

/* ---------- 3b. More icon + heading pairs, and "Tips for this trip" ---------- */
@media (max-width: 781px) {
	/* "Tips for this trip" (flex group of three cards): one full-width card per row instead of three
	   ~120px columns with one word per line. */
	.wp-block-group.trip-tips:not(#crc_) {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
	}
	.wp-block-group.trip-tips > .journey-deals:not(#crc_),
	.wp-block-group.trip-tips > p:not(#crc_) {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 10px 12px 10px 50px !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
		min-height: 44px;
	}
	/* Icon level with the first line of text (line centre = 10px padding + 10.5px). */
	.wp-block-group.trip-tips > .journey-deals:not(#crc_)::after {
		top: 7px !important;
		left: 12px !important;
		transform: none !important;
	}

	/* Insights headings (title + subtitle beside a 50px icon tile): text block centred on the icon. */
	.insights-heading:not(#crc_) {
		min-height: 50px;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}
	.insights-heading:not(#crc_) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
	.insights-heading:not(#crc_) > * + * { margin-top: 2px !important; }

	/* Why-book grid cards (supplier pages): the icon tile was drawn on top of the title. Title now starts
	   after the tile and is centred on it (tile: 15px from top, 31px tall). */
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_) { padding: 15px 12px 12px !important; }
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_)::before { top: 15px !important; left: 12px !important; }
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_)::after { top: 17px !important; left: 14px !important; }
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_) > .wp-block-heading:first-child {
		box-sizing: border-box;
		min-height: 31px;
		display: flex !important;
		align-items: center;
		padding-left: 40px !important;
		margin: 0 0 6px !important;
	}

	/* Trip types (one-way / cross-border cards): icon tile level with the title row. */
	.trip-types-head:not(#crc_) > div:first-child {
		min-height: 35px;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px 8px;
	}
	.trip-types-head:not(#crc_)::before { top: 0 !important; }
	.trip-types-head:not(#crc_)::after { top: 2.5px !important; }

	/* FAQ question boxes: icon centred on the whole question box. */
	.faq-item > .wp-block-heading:not(#crc_) { position: relative; }
	.faq-item > .wp-block-heading:not(#crc_)::before {
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
}

/* ---------- 3c. Phones: icons that wrapped onto their own row, squeezed grids ---------- */
@media (max-width: 781px) {
	/* Driving tips list (homepage tabs): emoji icon beside the tip title, not on a row above it. */
	.tips-item:not(#crc_) {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 12px !important;
		padding: 12px 0 !important;
	}
	.tips-item:not(#crc_) > [class^="left-icon-sec"] {
		flex: 0 0 36px !important;
		width: 36px !important;
		height: 36px !important;
		min-height: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-size: 18px !important;
		margin: 0 !important;
	}
	.tips-item:not(#crc_) > .right-icon-sec { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
	.tips-item:not(#crc_) > .right-icon-sec > .wp-block-heading:first-child {
		min-height: 36px;
		display: flex;
		align-items: center;
		margin: 0 !important;
		font-size: 16px !important;
		line-height: 1.25 !important;
	}
	.tips-item:not(#crc_) > .right-icon-sec > p { margin: 4px 0 0 !important; }

	/* Blue note boxes (tab-note) and cross-border fact rows (flex-wrap with exactly icon + text): icon stays
	   left of the text. flex-wrap rows with more children are chip lists and keep wrapping. */
	.wp-block-group.tab-note.is-nowrap:not(#crc_),
	.wp-block-group.flex-wrap.is-nowrap:has(> :nth-child(2):last-child):not(#crc_) {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}
	.wp-block-group.tab-note.is-nowrap:not(#crc_) > :first-child,
	.wp-block-group.flex-wrap.is-nowrap:has(> :nth-child(2):last-child):not(#crc_) > :first-child { flex: 0 0 auto !important; margin: 0 !important; }
	.wp-block-group.tab-note.is-nowrap:not(#crc_) > :not(:first-child),
	.wp-block-group.flex-wrap.is-nowrap:has(> :nth-child(2):last-child):not(#crc_) > :not(:first-child) { flex: 1 1 0 !important; min-width: 0; margin: 0 !important; }

	/* One-way page steps: icon column beside the text column. */
	.wp-block-columns:has(> .wp-block-column.one-way-icon):not(#crc_) {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}
	.wp-block-columns:not(#crc_) > .wp-block-column.one-way-icon { flex: 0 0 42px !important; width: 42px !important; }
	.wp-block-columns:has(> .wp-block-column.one-way-icon):not(#crc_) > .wp-block-column:not(.one-way-icon) { flex: 1 1 0 !important; min-width: 0; }

	/* Car category tips (tips-tab with an icon heading in the first column): icon left, text right.
	   City/airport pages reuse .tips-tab for a different layout, so the :has() keeps this rule off them. */
	.tips-tab > .wp-block-columns:has(> .wp-block-column:first-child > .icon-basis):not(#crc_) {
		display: grid !important;
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 6px 12px !important;
		align-items: start;
	}
	.tips-tab > .wp-block-columns:has(> .wp-block-column:first-child > .icon-basis):not(#crc_) > .wp-block-column { width: auto !important; flex: none !important; margin: 0 !important; }
	.tips-tab > .wp-block-columns:has(> .wp-block-column:first-child > .icon-basis):not(#crc_) > .wp-block-column:nth-child(n + 3) { grid-column: 2; }

	.cat-card .card-top:not(#crc_) > .tag { font-size: 11px !important; line-height: 1.3 !important; }

	/* Category page "what fits" cards (route-breakdown): one per row instead of three 85px columns. */
	.route-breakdown .wp-block-group.is-layout-grid:not(#crc_) {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 10px !important;
	}
}

/* ---------- 3d. All widths: "We compare, you save" list emoji had a 0px column and sat on the number ---------- */
.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:first-child:has(> p:only-child):has(+ .wp-block-column > .wp-block-heading:first-child):not(#crc_) {
	flex: 0 0 26px !important;
	width: 26px !important;
	min-width: 26px;
}
.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:first-child:has(+ .wp-block-column > .wp-block-heading:first-child) > p:only-child {
	margin: 0 !important;
	font-size: 18px;
	line-height: 1.3;
	text-align: center;
}

/* ---------- 3d-2. All widths: car category cards keep icon and tag on one row (the tag wraps beside the icon) ---------- */
.cat-card .card-top:not(#crc_) { flex-wrap: nowrap !important; align-items: center; gap: 8px; }
.cat-card .card-top:not(#crc_) > .cat-icon { flex: 0 0 auto; }
.cat-card .card-top:not(#crc_) > .tag { flex: 0 1 auto; min-width: 0; white-space: normal; }

/* ---------- 3e. Desktop: icon tiles level with their heading ---------- */
/* Reference boxes and trip-type cards use the same fix on every width. */
.reference-group:not(#crc_) > :is(h3, h4, h5):first-child {
	min-height: 40px;
	display: flex !important;
	align-items: center;
	margin: 0 !important;
}
.reference-group:not(#crc_) > :is(h3, h4, h5):first-child + * { margin-top: 4px !important; }

@media (min-width: 782px) {
	/* Why Book With Us (homepage): 40px icon at the top of the title. */
	.why-book .wp-block-group.why-book-box:not(#crc_)::before { top: 12px !important; }
	.why-book .wp-block-group.why-book-box:not(#crc_) > .wp-block-heading:first-child {
		min-height: 40px;
		display: flex;
		align-items: center;
		margin-top: 0 !important;
	}

	/* Why-book grid (supplier / one-way pages): 40px tile at the box padding, title centred on it. */
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_)::before { top: 12px !important; }
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_)::after { top: 19px !important; }
	.wp-block-group.why-book-grid > .wp-block-group:not(#crc_) > .wp-block-heading:first-child {
		min-height: 40px;
		display: flex;
		align-items: center;
		margin-top: 0 !important;
	}

	/* Trip types: 45px tile, title row as tall as the tile. */
	.trip-types-head:not(#crc_) > div:first-child { min-height: 45px; align-items: center; }
	.trip-types-head:not(#crc_)::before { top: 0 !important; }
	.trip-types-head:not(#crc_)::after { top: 7.5px !important; }

	/* "Before you cross" cards (Valid ID or Passport ...): 44px icon level with the title. */
	.before-you-cross > .wp-block-group:not(#crc_)::after { top: 20px !important; }
	.before-you-cross > .wp-block-group:not(#crc_) > .wp-block-heading:first-child {
		min-height: 44px;
		display: flex;
		align-items: center;
		margin-top: 0 !important;
	}
}

/* ---------- 4. Stats counters smaller on phones ---------- */
@media (max-width: 781px) {
	.success-counters .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}
	.success-counters .is-layout-grid > .wp-block-group {
		padding: 8px 4px 11px !important;
		min-height: 0 !important;
		height: auto !important;
		gap: 0 !important;
		text-align: center;
		justify-content: flex-start !important;
	}
	.success-counters .is-layout-grid > .wp-block-group:hover { transform: none; }
	.success-counters .is-layout-grid > .wp-block-group > * { margin: 0 !important; max-width: 100% !important; }
	/* Number */
	.success-counters .is-layout-grid > .wp-block-group h2.wp-block-heading:not(#crc_) {
		font-size: 17px !important;
		line-height: 1.15 !important;
		padding-top: 0 !important;
	}
	.success-counters .is-layout-grid > .wp-block-group h2.wp-block-heading::before,
	.success-counters .is-layout-grid > .wp-block-group h2.wp-block-heading::after { display: none !important; }
	.success-counters .wp-block-heading sup:not(#crc_) { font-size: 10px !important; font-weight: 600; top: -.45em; }
	/* Label (Rating, Suppliers ...) */
	.success-counters .is-layout-grid > .wp-block-group :is(h3, h4, h5).wp-block-heading:not(#crc_) {
		padding-top: 0 !important;
		font-size: 11.5px !important;
		line-height: 1.2 !important;
		margin-top: 2px !important;
		font-weight: 700;
		hyphens: auto;
	}
	/* Description */
	.success-counters .is-layout-grid > .wp-block-group p:not(#crc_) {
		font-size: 9.5px !important;
		line-height: 1.3 !important;
		margin-top: 2px !important;
		opacity: .85;
	}
	.success-counters .is-layout-grid > .wp-block-group hr { width: calc(100% - 8px) !important; left: 4px; height: 2px; }
}
@media (max-width: 359px) {
	.success-counters .is-layout-grid > .wp-block-group p:not(#crc_) { display: none; }
}

/* ---------- 5. Compact spacing on every page ---------- */
@media (max-width: 781px) {
	.wp-block-post-content > .wp-block-group:not(.top-search-location),
	.wp-block-post-content > section.wp-block-group,
	.entry-content > .wp-block-group:not(.top-search-location) {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
		margin-top: 0 !important;
	}
	.wp-block-post-content h1.wp-block-heading { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.2 !important; }
	.wp-block-post-content h2.wp-block-heading { font-size: clamp(21px, 6vw, 25px) !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
	.wp-block-post-content h3.wp-block-heading { line-height: 1.3 !important; }
	.wp-block-post-content .wp-block-heading + p { margin-top: 4px !important; }
	.wp-block-post-content .wp-block-buttons { margin-top: 12px !important; }
	.wp-block-post-content .wp-block-button__link { padding: 10px 18px !important; font-size: 15px !important; }
	.faq-item .faq-answer, .faq-item .faq-answer p { font-size: 14px !important; line-height: 1.5 !important; }
	footer .wp-block-group.has-global-padding { padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* ---------- 6. Floating "Find the Best Car Rental Deal" button ---------- */
/* Backup for custom.js: never on search results, booking steps or manage booking. */
body.crc-booking-step .crc-deal-fab { display: none !important; }
@media (max-width: 781px) {
	.crc-deal-fab { right: 12px !important; bottom: 12px !important; width: auto !important; padding: 0 16px !important; }
}

/* ---------- 7. Booking form (form7) styled like vipcars.com ---------- */
/* Old custom.css rules were written for form6: they drew grey boxes inside the field boxes, pushed the
   "I live in" block to the far right (49% width) and added top margins under the fields. Scoped to
   #booking-form-section (the search-form shortcode), so the search-results page form is not touched. */
#booking-form-section #sc-box .sc-form7-wrapper {
	box-shadow: none !important;
	border-radius: 15px !important;
	row-gap: 20px;
}
/* Field values: plain text inside the outer field box, no inner box. */
#booking-form-section #sc-box .sc-form7-wrapper .pickUpLocInc input[type="text"],
#booking-form-section #sc-box .sc-form7-wrapper .dropOffLocInc input[type="text"] {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	height: auto !important;
	font-size: 16px !important;
	font-weight: 500;
	color: #222 !important;
	background: transparent !important;
	box-shadow: none !important;
}
#booking-form-section #sc-box .sc-form7-wrapper .sc-date-field button {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #222 !important;
	text-align: left;
}
#booking-form-section #sc-box .sc-form7-wrapper :is(.sc-pickup-time, .sc-dropoff-time) strong {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #222 !important;
}
/* Bottom row: Different drop-off / Driver's Age / I live in on one line, left-aligned. */
#booking-form-section #sc-box .sc-form7-wrapper .formToggleInc,
#booking-form-section #sc-box .sc-form7-wrapper .drv_age_check,
#booking-form-section #sc-box .sc-form7-wrapper .sc-field.half.liveInWrap {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	border: 0 !important;
	align-self: center;
}
#booking-form-section #sc-box .sc-form7-wrapper .sc-field.half.liveInWrap { width: auto !important; margin-left: 0 !important; }
#booking-form-section #sc-box .sc-form7-wrapper :is(.drv_age_check, .liveIn) label {
	color: #222 !important;
	font-size: 15px;
	font-weight: 500;
}
#booking-form-section #sc-box .sc-form7-wrapper .drv_age_check input {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 20px 0 0 !important; /* room for the dropdown arrow */
	background: transparent !important;
	box-shadow: none !important;
}
#booking-form-section #sc-box .sc-form7-wrapper .liveIn strong {
	color: #ee5300 !important; /* same orange as the driver's age value */
	font-size: 15px;
	font-weight: 600;
}
@media (min-width: 992px) {
	#booking-form-section #sc-box .sc-form7-wrapper .formToggleInc label { margin-right: 56px; }
	#booking-form-section #sc-box .sc-form7-wrapper .drv_age_check { margin-right: 56px !important; }
}