/**
 * Shared "Available For" cards — templates/parts/shared/available-for.php.
 *
 * The cards are looped from ACF, so they no longer carry the per-card Elementor ids that
 * the frozen post-CSS styled (white background, 32px radius, padding). Re-apply that here,
 * keyed on the grid container id the partial DOES keep (5f08dbc9) plus the `.h-box` class,
 * so it lands on exactly these cards and nothing else. Matches the live desktop card:
 * 189×145, white, radius 32, flex-column, padding 20/30, 6 across.
 */

.elementor-element-5f08dbc9 > .h-box {
	--display: flex;
	--flex-direction: column;
	--justify-content: space-between;
	--align-items: center;
	text-align: center;
	--gap: 20px 20px;
	--row-gap: 20px;
	--column-gap: 20px;
	--border-radius: 32px 32px 32px 32px;
	--padding-top: 20px;
	--padding-bottom: 20px;
	--padding-left: 30px;
	--padding-right: 30px;
	--background-transition: 0.3s;
	background-color: #FFFFFF;
}

/* Hover was also per-id: fill the card with the accent (the icon/label swap is already
   class-based via `.h-box:hover`). */
.elementor-element-5f08dbc9 > .h-box:hover {
	background-color: var( --e-global-color-accent );
}

/* When a card's icon comes from ACF it renders as <img> (a real file), not inline SVG, so the
   `.h-box:hover svg path{fill:#fff}` recolour can't reach it. Whiten the image on hover with a
   filter so an ACF-set icon behaves exactly like the built-in line-art on the accent card. */
.h-box:hover .elementor-icon img {
	filter: brightness( 0 ) invert( 1 );
}

/* Mobile: the card is a fixed-height flex COLUMN, and Elementor defaults it to flex-wrap:wrap
   — so with the icon + label taller than the box, the label wrapped into a second column and
   spilled off the right edge of the card. Force nowrap so the label sits under the icon, and
   trim the side padding so the label has room. */
@media ( max-width: 767px ) {
	.elementor-element-5f08dbc9 > .h-box {
		flex-wrap: nowrap !important;
		--flex-wrap: nowrap;
		--padding-left: 12px;
		--padding-right: 12px;
	}
	.elementor-element-5f08dbc9 > .h-box .stitle {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-element-5f08dbc9 > .h-box .stitle .elementor-heading-title {
		white-space: normal;
	}
}

/**
 * Shared "See the Difference" before/after carousel — templates/parts/shared/before-after.php.
 *
 * The slides loop from ACF, so they no longer carry the per-slide element ids. Those ids
 * carried two things that mattered: the widget width, and the divider's green line + arrow
 * geometry. Re-apply both class-based, scoped to the carousel, so every looped slide matches
 * the frozen original.
 */
.elementor-element-6da4801 .elementor-widget-wpr-before-after {
	width: 100.825%;
	max-width: 100.825%;
}

/**
 * Divider — the green vertical line + the arrow puck. Only the COLOUR was class-based in the
 * frozen CSS; the line width/position, the arrow size, and the divider offset were per-widget-id
 * (post-10911.css: `.elementor-element-19ffafa .wpr-ba-horizontal …`). Looping dropped the ids,
 * so the line and arrows disappeared. Reproduce them here, keyed on the carousel.
 */
.elementor-element-6da4801 .wpr-ba-divider-icons {
	background-color: var( --e-global-color-439e4d6 );
	border-color: var( --e-global-color-439e4d6 );
	border-style: none;
	border-radius: 0;
}
.elementor-element-6da4801 .wpr-ba-divider-icons:before,
.elementor-element-6da4801 .wpr-ba-divider-icons:after {
	background-color: var( --e-global-color-accent );
}
.elementor-element-6da4801 .wpr-ba-divider-icons .fa {
	color: var( --e-global-color-accent );
	font-size: 20px;
}
.elementor-element-6da4801 .wpr-ba-horizontal .wpr-ba-divider-icons:before {
	width: 2px;
	left: calc( 100px - 2px / 2 + 1px );
	bottom: calc( 50% + 1px + 40px / 2 - 0.7px );
}
.elementor-element-6da4801 .wpr-ba-horizontal .wpr-ba-divider-icons:after {
	width: 2px;
	left: calc( 100px - 2px / 2 + 1px );
	top: calc( 50% + 1px + 40px / 2 + 0.1px );
}
.elementor-element-6da4801 .wpr-ba-horizontal .wpr-ba-divider-icons .fa {
	width: 100px;
	height: 40px;
	line-height: 40px;
}
.elementor-element-6da4801 .wpr-ba-horizontal .wpr-ba-divider {
	margin-left: calc( -100px - 1px );
}

/**
 * Before / After labels — the light rounded pills. Royal's frontend.min.css ships a default
 * `.elementor-widget-wpr-before-after .wpr-ba-label > div` (solid purple) that, in our enqueue
 * order, loads after the frozen post-CSS and wins at equal specificity — so the labels showed
 * as purple boxes. Restore the pill with a selector one class more specific than Royal's.
 */
.elementor-element-6da4801 .elementor-widget-wpr-before-after .wpr-ba-label {
	align-items: flex-end;
	justify-content: flex-end;
}
.elementor-element-6da4801 .elementor-widget-wpr-before-after .wpr-ba-label > div {
	color: var( --e-global-color-text );
	background-color: #FFFFFFBF;
	border-color: #E8E8E8;
	font-size: 20px;
	border-style: none;
	padding: 8px 20px;
	border-radius: 50px;
	margin: 0;
}

/**
 * Blog detail page (single-post template 1427) — mobile spacing.
 *
 * Two tight spots on a phone:
 *  1) The header sits over the article (absolute), and the head container's top padding
 *     shrinks on mobile, so the H1 crowded the logo/hamburger. Give it more clearance.
 *  2) The post body (6de63ab) carries a NEGATIVE top margin (-10/-15px) from the frozen
 *     Elementor CSS, which pulled the first paragraph up so it merged with the bottom of
 *     the featured image. Replace it with a positive gap.
 *
 * Scoped to .elementor-1427 (blog detail only), mobile only — desktop is untouched.
 */

@media ( max-width: 767px ) {
	.elementor-1427 .elementor-element.elementor-element-6ce4c30 {
		--padding-top: 100px;
	}

	.elementor-1427 .elementor-element.elementor-element-6de63ab > .elementor-widget-container {
		margin-top: 26px !important;
	}
}

/**
 * Shared "Booking Steps" grid — templates/parts/shared/booking-steps.php.
 *
 * Keyed on the `.booking-step` class, never an element id, so the one partial renders the
 * same on the home, FAQs and landing pages even though each page's frozen post-CSS targets
 * different ids. The dashed connector line is class-based already
 * (`.booking-step .e-con-full.e-flex.e-con::before` in assets/frozen/inline-freeze.css).
 *
 * Matches the landing-page treatment: four steps across on desktop, and — crucially — a
 * 25px icon, so the dot's centre sits on the dashed line (top:16px). Home used a 35px icon,
 * which dropped the dot ~4px below the line. Mobile: two steps per row.
 */

.booking-step.hope-booking-steps {
	--display: grid;
	--e-con-grid-template-columns: repeat(4, 1fr);
	--e-con-grid-template-rows: repeat(1, 1fr);
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--grid-auto-flow: row;
	/* Top-align the columns so every dot lands on the dashed line (top:16px), whatever
	   its text length — grid would otherwise stretch each column to the tallest and, with
	   the icon-box centred, drop the shorter columns' dots below the line. */
	--align-items: start;
}

.booking-step.hope-booking-steps > .e-con-full.e-flex.e-con {
	--display: flex;
	--align-items: flex-start;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 50px;
}

/* The green dot. 25px puts its centre on the dashed line. */
.booking-step.hope-booking-steps .elementor-icon {
	font-size: 25px;
}

.booking-step.hope-booking-steps .elementor-icon-box-wrapper {
	text-align: center;
	gap: 15px;
}

.booking-step.hope-booking-steps .elementor-icon-box-title {
	font-family: "Satoshi-Regular", Sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	margin-block-end: 8px;
	color: var( --e-global-color-be8c13d, #FFFFFF );
}

.booking-step.hope-booking-steps .elementor-icon-box-description {
	font-family: "Satoshi-Regular", Sans-serif;
	font-weight: 400;
	color: var( --e-global-color-be8c13d, #FFFFFF );
}

/* Mobile: a single-column VERTICAL TIMELINE. One step per row, dot on the left with the
   title + copy to its right, and a vertical dashed line joining the dots. The icon-box is
   already row-on-mobile (elementor-mobile-position-inline-start), so it lays out dot-left /
   content-right on its own — we just stack the steps and draw the connector down the dots. */
@media ( max-width: 767px ) {
	.booking-step.hope-booking-steps {
		--e-con-grid-template-columns: repeat(1, 1fr);
		--gap: 0px;
		--row-gap: 0px;
		--column-gap: 0px;
		--align-items: normal;
	}

	.booking-step.hope-booking-steps > .e-con-full.e-flex.e-con {
		--align-items: flex-start;
		--padding-right: 0px;
		--padding-bottom: 28px;
		position: relative;
	}

	/* Vertical dashed connector, from each dot down to the next. The dot (25px icon) sits at
	   the left, centre ~x12; run the line there and stop it at the last step. */
	.booking-step.hope-booking-steps > .e-con-full.e-flex.e-con::before {
		display: block !important;
		content: "";
		border-top: 0 !important;
		border-left: 2px dashed #D5D5D5;
		position: absolute;
		left: 12px;
		top: 30px;
		height: 100%;
		width: 0;
	}
	.booking-step.hope-booking-steps > .e-con-full.e-flex.e-con:last-child::before {
		display: none !important;
	}

	/* Dot left, text left-aligned to its right (override the desktop centring). */
	.booking-step.hope-booking-steps .elementor-icon-box-wrapper {
		text-align: left;
		align-items: flex-start;
		gap: 14px;
	}
}

/**
 * Shared form fields — placeholder-colour parity + message-field height.
 *
 * The "Select Services" / "Location" dropdowns rendered in --e-global-color-be8c13d (white),
 * set by unified-selects.css with `.elementor-field-group .bootstrap-select …` selectors +
 * !important. The text inputs use Astra's --ast-form-field-color (#475569). So the select
 * placeholders looked different from every other field — and on the white-background forms
 * (contact, sidebar) the white was effectively invisible. Point the selects at the SAME
 * variable the inputs use so they match on every form; we mirror unified-selects' selectors
 * exactly and load later (shared glob runs after hope-unified-selects) to win the cascade.
 *
 * Also: the popup's "How can we help you?" textarea rendered ~40px (one line). Give it a
 * proper height. (The contact form's textarea is already taller; min-height leaves it alone.)
 */

/* Bootstrap-Select dropdowns (inline forms) — value + placeholder colour = the inputs' */
.elementor-field-group .bootstrap-select .filter-option-inner-inner,
.elementor-field-group .bootstrap-select > .dropdown-toggle,
.elementor-field-group .bootstrap-select .dropdown-toggle.bs-placeholder,
.elementor-field-group .bootstrap-select .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
	color: var( --ast-form-field-color, #475569 ) !important;
}

/* Native <select> (the popup form, where Bootstrap-Select isn't initialised) */
.elementor-widget-form .elementor-select-wrapper select {
	color: var( --ast-form-field-color, #475569 ) !important;
}

/* "How can we help" message field — was a single line */
.elementor-widget-form textarea.elementor-field,
.elementor-widget-form textarea {
	min-height: 80px !important;
}

/**
 * Shared "Partnerships" strip — templates/parts/shared/partnerships.php.
 *
 * Each logo sits in <figure class="swiper-slide-inner">, so Astra's single-post figure shadow
 * (`.ast-article-single figure { box-shadow: 0 0 30px rgba(0,0,0,.15) }` in inline-freeze.css)
 * lands on every logo — but only on pages that carry `.ast-article-single` (home, About, the
 * service/location pages), not on the canvas landing pages. That is why the logos looked
 * "shaded" everywhere except the landing pages. Clear it so the strip is clean on every page.
 */
.partner-logo .swiper-slide-inner {
	box-shadow: none !important;
}

/**
 * "Get Instant Quote" banner form (.homeform / .sel-box, Bootstrap-Select dropdowns).
 *
 * On a phone the two select buttons kept their desktop 222px width (so they didn't fill the
 * card) and the white card sat tight against the screen edges. Force full-width controls and
 * give the card comfortable padding + a little breathing room from the viewport edge. Mobile
 * only — the desktop banner layout is untouched.
 */

@media ( max-width: 767px ) {
	/* Card fills the width minus a 12px gap each side and stays centred. Using
	   width:100% together with side margins overflowed the container by 24px and
	   shoved the card off to the right, clipping its right edge. calc()+auto margins
	   keep it symmetric with no overflow. */
	.homeform {
		width: calc( 100% - 24px ) !important;
		max-width: calc( 100% - 24px ) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 18px 16px !important;
		box-sizing: border-box;
	}
	.homeform form {
		width: 100% !important;
		gap: 14px !important;
	}
	.sel-box {
		width: 100% !important;
	}
	.sel-box .locat,
	.sel-box .servi,
	.sel-box .locat button,
	.sel-box .servi button {
		width: 100% !important;
	}
	/* Align the "Get A Quote" button to the select boxes (same width + edges).
	   The button is a separate nested-template widget spanning the full hero — wider
	   than the card — pulled up over the card with a -90px top margin, so it rendered
	   wider than the selects and spilled past the card edges. The card is (hero − 24)
	   and the selects are (card − 20), so calc(100% - 44px) centred lands the button on
	   the exact select-box width at any viewport. Keep the -90px vertical pull. */
	.ban-get-quote {
		width: calc( 100% - 44px ) !important;
		max-width: calc( 100% - 44px ) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.ban-get-quote > .elementor-widget-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.ban-get-quote .elementor-button,
	.homeform form button {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/**
 * Service-page "Booking Steps" ("How To Book" — templates/parts/how-to-book.php,
 * the ul.service-book-step / .round-img structure) — desktop alignment.
 *
 * The frozen post-CSS left the dot SVGs at the LEFT of each grid column
 * (.round-img was block, so the 32px icon sat flush-left) and ran the dashed
 * connector line (::before, left:1% width:78%) across those left-aligned dots —
 * so the whole row hugged the left with a dead gap on the right. Every other page
 * that shows Booking Steps (home / FAQs / landing, the shared booking-steps.php)
 * CENTRES each dot in its column. This matches that: centre the dot in its cell and
 * shift the connector to span dot-centre to dot-centre. Keyed on the .service-book-step
 * class (not an id) so every service page renders identically.
 *
 * Desktop only — below 768px the section is a single-column vertical list with its
 * own frozen ::before geometry, which we must not disturb.
 */

@media ( min-width: 768px ) {
	body ul.service-book-step li .round-img {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Re-centre the dashed connector on the now-centred dots (was left:1%; width:78%,
	   tracking the old left-aligned dots). 11% / 78% spans dot-1's centre to dot-4's
	   centre across the four equal columns, symmetric on both edges. */
	body ul.service-book-step::before {
		left: 11% !important;
		width: 78% !important;
	}
}

/**
 * The three trust badges (Trusted Choice / 100% Satisfaction / Eco Friendly) that sit in a
 * row on the home, About and landing pages.
 *
 * They were sized by WIDTH, so "trusted-choice.svg" (viewBox 164×108, with a ribbon that
 * widens the box) rendered narrower and shorter-looking than the near-square Satisfaction /
 * Eco badges (112×108 / 112×105). Sizing all three to the same HEIGHT lined up the boxes, but
 * the Trusted Choice hexagon still reads a touch smaller because its ribbon eats vertical
 * space inside the box — so give that one a slightly LARGER height so the visible badges
 * match. Keyed on the image src, not an element id, so one rule covers every page.
 */

/* The two near-square badges. */
img[src*="Satisfaction.svg"],
img[src*="eco-friendly.svg"] {
	height: 108px !important;
	width: auto !important;
	max-width: 100%;
}

/* Trusted Choice — larger height to offset the ribbon padding so its hexagon matches. */
img[src*="trusted-choice.svg"] {
	height: 128px !important;
	width: auto !important;
	max-width: 100%;
}

/* Mobile: same relationship, sized to keep all three on one row. */
@media ( max-width: 767px ) {
	img[src*="Satisfaction.svg"],
	img[src*="eco-friendly.svg"] {
		height: 90px !important;
	}
	img[src*="trusted-choice.svg"] {
		height: 104px !important;
	}
}