/**
 * WooCommerce enquiry panel styles for EKTIMO.
 *
 * Mirrors the presentation of the legacy site's product page: a grey panel per acquisition
 * mode, a bold cyan "from" price, and a pill-shaped call to action.
 *
 * Kept as hand-written CSS rather than Tailwind utilities because these rules style
 * WooCommerce's own markup, which the theme does not control.
 */

:root {
	--ektimo-enquiry-primary: #29a3dc;
	--ektimo-enquiry-heading: #0b3c5d;
	--ektimo-enquiry-panel: #f4f4f4;
	--ektimo-enquiry-border: #dcdcde;
	--ektimo-enquiry-error: #d63638;
}

/* -- Panel -------------------------------------------------------------------------- */

.ektimo-enquiry {
	margin: 2rem 0;
}

.ektimo-enquiry__heading {
	color: var(--ektimo-enquiry-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.ektimo-enquiry__intro {
	color: #4a5568;
	margin: 0 0 1.5rem;
}

.ektimo-enquiry__box {
	background: #eef6fd;
	border: 1px solid #c8e2f5;
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/*
 * The card and the form inside it must not be sized by their contents.
 *
 * Every rule on the date fields themselves was already correct — display, width: 100%,
 * max-width: 100%, min-width: 0, box-sizing: border-box — yet the inputs still painted past the
 * card's right edge. The reason is one level up: `.ektimo-enquiry__form` had no rule at all, so a
 * child reporting a large intrinsic width (which a date control does) could widen the form, and
 * the form widened past the card's padding box. The inputs were faithfully filling 100% of a
 * parent that was itself too wide.
 *
 * Pinning both boxes to their parent's width means "100%" on the input now resolves against the
 * card's real content width, so the field cannot exceed it whatever intrinsic width the control
 * reports.
 */
.ektimo-enquiry__box,
.ektimo-enquiry__form {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ektimo-enquiry__price {
	color: var(--ektimo-enquiry-heading);
	font-size: 1.125rem;
	font-weight: 500;
	margin: 0 0 1.25rem;
}

.ektimo-enquiry__label {
	font-weight: 700;
}

.ektimo-enquiry__amount {
	color: var(--ektimo-enquiry-primary);
	font-weight: 700;
}

/*
 * Shown in place of a figure when no price is set (or it is 0.00). Deliberately quieter than
 * a real amount: the accent colour and bold weight exist to make a dollar value stand out,
 * and applying them to a sentence would read as emphasis the copy does not warrant.
 */
.ektimo-enquiry__amount--on-enquiry {
	color: var(--ektimo-enquiry-heading);
	font-weight: 500;
}

/* -- Rows and quantity -------------------------------------------------------------- */

.ektimo-enquiry__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.ektimo-enquiry__qty-label {
	color: var(--ektimo-enquiry-heading);
	font-weight: 600;
	font-size: 0.9375rem;
}

.ektimo-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ektimo-enquiry-border);
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.ektimo-qty__btn {
	background: #e9e9ea;
	border: 0;
	color: var(--ektimo-enquiry-heading);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	padding: 0 0.85rem;
	transition: background 0.15s ease;
}

.ektimo-qty__btn:hover,
.ektimo-qty__btn:focus-visible {
	background: #dcdcde;
}

.ektimo-qty__input {
	border: 0;
	width: 3.5rem;
	text-align: center;
	padding: 0.6rem 0.25rem;
	font-size: 1rem;
	/* Hide the native spinner so only the custom buttons are used. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.ektimo-qty__input::-webkit-outer-spin-button,
.ektimo-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -- Rental dates ------------------------------------------------------------------- */

.ektimo-enquiry__dates {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

/*
 * Each field shares the row and shrinks to fit its parent, wrapping onto a second line when two
 * cannot sit side by side. See the notes inside for why no min-width floor is used.
 */
.ektimo-enquiry__date {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	/*
	 * `flex-basis: 10rem` gives each field a sensible starting size, but the basis must be allowed
	 * to shrink below it — hence no min-width here.
	 *
	 * A `min-width: 9.5rem` floor was the cause of the iPhone overflow: two 152px wrappers plus
	 * the 16px gap and the 14px arrow come to 334px, inside a Rent card that is only 302px wide at
	 * 390px viewport. A min-width is a hard floor that flexbox cannot violate, so the row was
	 * forced wider than its parent and spilled out to the right. Wrapping could not rescue it,
	 * because the floor applies before wrap resolves.
	 *
	 * The fields now shrink to fit and wrap onto two lines when they genuinely cannot sit side by
	 * side, which is what keeps everything inside the card at every width.
	 */
	flex: 1 1 10rem;
	min-width: 0;
	/* Never exceed the parent, whatever the flex basis computes to. */
	max-width: 100%;

	/*
	 * Restored: this was dropped when the rule was rewritten, which left the absolutely
	 * positioned calendar glyph (::after) resolving against a distant ancestor instead of this
	 * wrapper — so the icon was placed relative to the wrong box.
	 */
	position: relative;
}

.ektimo-enquiry__date label {
	color: var(--ektimo-enquiry-heading);
	font-size: 0.875rem;
	font-weight: 600;
}

/*
 * `appearance` is deliberately NOT set: leaving the input in its native rendering is what keeps
 * the browser's own calendar button present and clickable on desktop, iOS Safari and Android.
 */
.ektimo-enquiry__date input[type='date'] {
	border: 1px solid var(--ektimo-enquiry-border);
	border-radius: 4px;
	padding: 0.55rem 0.65rem;
	font-size: 0.9375rem;
	background: #fff;
	width: 100%;
	/*
	 * No min-width floor here either. `width: 100%` with `box-sizing: border-box` and
	 * `max-width: 100%` is what keeps the input exactly inside its wrapper — a floor could push it
	 * past the Rent card's padding, which is what produced the overflow on iPhone.
	 */
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	/*
	 * `overflow` is deliberately NOT set here: the calendar indicator is laid out inside the
	 * input's content box, and clipping it is exactly what must not happen.
	 */
	/* A fixed line-height stops iOS zooming/reflowing the field and squeezing the indicator. */
	line-height: 1.4;

	/*
	 * An explicit colour, not the inherited one.
	 *
	 * Tailwind's preflight sets `color: inherit` on every input, and nothing between this field
	 * and the document root sets a text colour — so the date text resolved to whatever the
	 * document default happened to be. Blink renders its placeholder in a dimmed shade of that
	 * regardless, which is why desktop looked fine; iOS Safari renders the datetime sub-fields
	 * with the inherited colour directly, so on the device the "dd-mm-yyyy" was effectively
	 * invisible against the white field.
	 *
	 * -webkit-text-fill-color is set alongside `color` because WebKit gives it precedence when
	 * painting form-control text, and it is what actually inks the datetime sub-fields on iOS.
	 */
	color: var(--ektimo-enquiry-heading);
	-webkit-text-fill-color: var(--ektimo-enquiry-heading);
	/* Matches the other fields in the panel so the placeholder is never washed out. */
	opacity: 1;
}

/*
 * Make the placeholder sub-fields legible on iOS Safari.
 *
 * An empty <input type="date"> is drawn by WebKit as ::-webkit-datetime-edit containing separate
 * day/month/year sub-fields. Those inherit the fill colour above; these rules only guarantee they
 * are painted at full opacity and are not collapsed, so "dd-mm-yyyy" reads at the same strength
 * as the other inputs in the panel.
 *
 * Nothing here alters the value, the format or the parsing — it is purely how the existing
 * sub-fields are inked. Chrome and Edge support the same pseudo-elements and render identically,
 * so desktop is unchanged.
 */
/*
 * Colour only. These rules must not constrain the edit region's size.
 *
 * An earlier attempt added `min-width: 0`, `max-width: 100%` and `overflow: hidden` here to try to
 * cap the input's width. That is what made the "dd-mm-yyyy" disappear on iPhone: clipping the edit
 * region collapses the sub-fields that render the date text, so the field went blank while the
 * calendar icon (a sibling in the shadow DOM) stayed visible. Reverted.
 */
.ektimo-enquiry__date input[type='date']::-webkit-datetime-edit,
.ektimo-enquiry__date input[type='date']::-webkit-datetime-edit-fields-wrapper {
	color: var(--ektimo-enquiry-heading);
	-webkit-text-fill-color: var(--ektimo-enquiry-heading);
	opacity: 1;
	padding: 0;
}

.ektimo-enquiry__date input[type='date']::-webkit-datetime-edit-text,
.ektimo-enquiry__date input[type='date']::-webkit-datetime-edit-day-field,
.ektimo-enquiry__date input[type='date']::-webkit-datetime-edit-month-field,
.ektimo-enquiry__date input[type='date']::-webkit-datetime-edit-year-field {
	color: var(--ektimo-enquiry-heading);
	-webkit-text-fill-color: var(--ektimo-enquiry-heading);
	opacity: 1;
}

/*
 * A single colour serves both the empty placeholder and a selected date.
 *
 * WebKit exposes no reliable hook for "this sub-field is still empty" — :placeholder-shown does
 * not apply to date inputs, and attribute selectors are not honoured on these pseudo-elements —
 * so dimming only the unfilled state is not achievable in CSS without guessing. The navy above
 * is used throughout: it matches the field labels, so "dd-mm-yyyy" reads clearly and a chosen
 * date reads identically, which is what the requirement asked for.
 */

/*
 * Keep the native indicator visible and interactive where the browser draws one.
 *
 * Chrome, Edge and Android Chrome render ::-webkit-calendar-picker-indicator — a real calendar
 * glyph inside the field. This rule only guarantees nothing in the cascade (WooCommerce, Gravity
 * Forms, Tailwind preflight) can collapse or fade it. No custom icon is drawn here.
 */
.ektimo-enquiry__date input[type='date']::-webkit-calendar-picker-indicator {
	display: block;
	opacity: 1;
	visibility: visible;
	width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.35rem;
	flex-shrink: 0;
	cursor: pointer;
	/* Sits above the wrapper's fallback icon so only one glyph is ever visible. */
	position: relative;
	z-index: 1;
}

/* -- Calendar affordance on iOS Safari ---------------------------------------------- *
 *
 * iOS Safari does NOT implement ::-webkit-calendar-picker-indicator. It renders no icon at all:
 * the whole field is the tap target, and tapping anywhere opens the native wheel picker. There
 * is therefore no element to un-hide, and no CSS reset was suppressing it — the previous rules
 * were a no-op on iOS by design, which is why the icon never appeared on the device.
 *
 * The fix paints a calendar glyph on the WRAPPER as a background image, positioned where the
 * native indicator sits on other browsers. The input stays fully native and transparent over the
 * top, so:
 *   - the whole field remains tappable and opens the iOS wheel picker,
 *   - no custom date picker is introduced,
 *   - date parsing, validation and the min attribute are untouched.
 *
 * The glyph is applied unconditionally here and removed again in the @supports block below, for
 * the browsers that draw their own indicator. See that block for why the positive feature query
 * is the safe direction.
 *
 * The SVG is inlined as a data URI so it needs no HTTP request and cannot 404.
 * ---------------------------------------------------------------------------------- */
.ektimo-enquiry__date {
	position: relative;
}

.ektimo-enquiry__date input[type='date'] {
	/* Room for the glyph so a long value never runs underneath it. */
	padding-right: 2.25rem;

	/*
	 * THE FIX for the iPhone overflow.
	 *
	 * WebKit renders input[type="date"] as a *native control*, and native controls size
	 * themselves from their internal shadow layout — the date text plus the picker button. CSS
	 * `width: 100%` is treated as advisory: the control refuses to shrink below that intrinsic
	 * width, which is why the field kept spilling past the Rent card no matter what width,
	 * max-width, min-width, box-sizing or flex/block rules were applied to it or its ancestors.
	 * (Chrome measured clean because Blink honours the CSS width; the bug is WebKit-only, which
	 * is exactly why it only ever appeared on iPhone.)
	 *
	 * `-webkit-appearance: none` opts the input out of native rendering, so it becomes an ordinary
	 * CSS box and `width: 100%` + `box-sizing: border-box` are honoured precisely.
	 *
	 * It is scoped INSIDE this block deliberately. This block only applies where the browser does
	 * not draw its own indicator — i.e. iOS Safari, where we already supply the ::after calendar
	 * glyph. Blink matches the @supports rule below, never reaches this declaration, and keeps its
	 * native control and native indicator untouched.
	 *
	 * The date picker itself is unaffected: appearance only changes how the control is *painted*.
	 * The input remains type="date", so tapping it still opens the native iOS wheel picker, and
	 * the value, format, min attribute and validation are all unchanged.
	 */
	-webkit-appearance: none;
	appearance: none;

	/*
	 * With native rendering off, WebKit no longer vertically centres the date text for us, and it
	 * no longer applies its own intrinsic height. These keep the field looking identical to the
	 * other inputs in the panel and keep "dd-mm-yyyy" on the baseline it had before.
	 */
	min-height: 2.55rem;
	text-align: left;
}

/*
 * Keep the date text left-aligned and full width inside the de-nativised control.
 *
 * ::-webkit-datetime-edit is the element that actually holds "dd-mm-yyyy". Once the input is no
 * longer a native control it is laid out as a normal inline box, so it is pinned to the start and
 * allowed to fill the available width — which is what keeps the placeholder visible rather than
 * drifting or being pushed under the calendar glyph.
 */
.ektimo-enquiry__date input[type='date']::-webkit-date-and-time-value {
	text-align: left;
}

/* -- "dd-mm-yyyy" hint for the de-nativised control -------------------------------- *
 *
 * `-webkit-appearance: none` (set above, on the same branch as the fallback icon) is what lets
 * WebKit honour `width: 100%` and keeps the field inside the Rent card. Its side effect is that
 * the native control no longer paints anything when the field is empty — the empty-state
 * "dd-mm-yyyy" is drawn BY that native rendering, so switching it off leaves the field blank.
 *
 * The hint is therefore supplied as generated content on the wrapper. Crucially this cannot
 * duplicate the date text the way an earlier attempt did on macOS Safari: it sits on the same
 * branch as `appearance: none`, so any engine that renders this hint has had its native text
 * switched off. At most one string is ever painted.
 *
 * `:has(input:valid)` removes the hint the moment a date is chosen — the inputs are `required`,
 * so an empty field is :invalid and a filled one is :valid. No JavaScript involved.
 * ---------------------------------------------------------------------------------- */
/*
 * Restricted to touch devices, which is what fixes the doubled text on MacBook Safari.
 *
 * The two Safari variants behave differently under `-webkit-appearance: none`, which I had
 * assumed they shared:
 *
 *   iOS Safari   de-nativised field renders BLANK  -> the hint is the only text, and is needed
 *   macOS Safari de-nativised field STILL paints its own "dd-mm-yyyy" -> the hint duplicated it
 *
 * `@supports selector(::-webkit-calendar-picker-indicator)` cannot separate them: both Safaris
 * fail that test identically, so the hint reached macOS too. A pointer query does separate them —
 * macOS has a fine pointer with hover, iOS has neither — and it targets exactly the right
 * condition, because a blank empty field is the touch-device behaviour.
 *
 * Desktop Chrome/Edge never reach this rule anyway: the @supports block below already sets
 * `content: none` for engines that draw their own indicator.
 */
@media (hover: none) and (pointer: coarse) {
	.ektimo-enquiry__date::before {
		content: "dd-mm-yyyy";
		position: absolute;
		left: 0.7rem;
		/* Matches the ::after glyph so hint and icon share an optical baseline. */
		bottom: 0.62rem;
		font-size: 0.9375rem;
		line-height: 1.4;
		color: #6b7f8c;
		/* Taps must reach the input beneath, which opens the native picker. */
		pointer-events: none;
	}
}

/* A chosen date replaces the hint. */
.ektimo-enquiry__date:has( input[type='date']:valid )::before,
/* While focused the field shows the picker's own state, so the hint stands down. */
.ektimo-enquiry__date:has( input[type='date']:focus )::before {
	content: none;
}

.ektimo-enquiry__date::after {
	content: "";
	position: absolute;
	right: 0.65rem;
	/* Aligns with the input, clearing the label stacked above it. */
	bottom: 0.7rem;
	width: 1.15rem;
	height: 1.15rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3c5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	/* Decorative: taps must reach the input underneath, which opens the native picker. */
	pointer-events: none;
}

/* -- "dd-mm-yyyy" hint on iOS Safari ------------------------------------------------ *
 *
 * An <input type="date"> has NO placeholder — the attribute is ignored by the spec, and the
 * "dd-mm-yyyy" seen on desktop is Chrome's own rendering of the empty datetime sub-fields.
 * iOS Safari deliberately renders an empty date field completely blank, so there is no text for
 * CSS to colour: the earlier ::-webkit-datetime-edit colour rules were a no-op on the device.
 *
 * The hint therefore has to be real text, added by the wrapper's ::before. It is decorative only:
 *
 *   - `pointer-events: none` so taps pass through and open the native iOS picker,
 *   - `aria-hidden` is unnecessary because generated content is not exposed as a form value,
 *   - the input keeps no `value` attribute, so nothing is submitted or parsed differently.
 *
 * `:valid` is the switch that hides it. The inputs are `required`, so an empty field is :invalid
 * and a chosen date makes it :valid — meaning the hint disappears the moment a date is picked,
 * with no JavaScript. The sibling combinator reads the input's state from the wrapper.
 * ---------------------------------------------------------------------------------- */
/*
 * The "dd-mm-yyyy" hint is deliberately NOT rendered by default.
 *
 * Safari — desktop and iOS — does not match `@supports selector(::-webkit-calendar-picker-indicator)`.
 * An earlier attempt added the "dd-mm-yyyy" hint on that basis alone, which duplicated the text on
 * macOS Safari: the hint rendered *and* Safari drew its own date text.
 *
 * That is no longer possible. The hint is now paired with `-webkit-appearance: none`, which
 * switches the native text off on the very branch that renders the hint — so exactly one string is
 * painted on Safari, and the @supports block below removes both for Blink.
 */

/*
 * Blink draws its own indicator, so it needs neither the fallback icon nor the hint.
 */
@supports selector(::-webkit-calendar-picker-indicator) {
	.ektimo-enquiry__date::after {
		display: none;
	}

	/*
	 * The hint goes with it. This branch restores `appearance: auto` below, so the browser paints
	 * its own empty-state text — leaving the hint in place would show two strings, which is the
	 * duplicate reported earlier on desktop.
	 */
	.ektimo-enquiry__date::before {
		content: none;
	}

	.ektimo-enquiry__date input[type='date'] {
		/* The native indicator provides its own spacing, so the extra room is not needed. */
		padding-right: 0.65rem;

		/*
		 * Native rendering restored for engines that draw their own indicator.
		 *
		 * The `appearance: none` set earlier is what lets WebKit honour `width: 100%` on iPhone,
		 * but it must not reach Blink: without native rendering Chrome/Edge lose their own
		 * calendar button. Resetting it here keeps desktop exactly as it was — native control,
		 * native indicator, no fallback glyph.
		 */
		-webkit-appearance: auto;
		appearance: auto;

		/* Native control supplies its own metrics again. */
		min-height: 0;
	}
}


.ektimo-enquiry__date input[type='date']:focus-visible {
	outline: 2px solid var(--ektimo-enquiry-primary);
	outline-offset: 1px;
}

/*
 * The arrow sits between the two fields and must not compete with them for space: it keeps its
 * intrinsic width and is the last thing to influence the layout, so the fields get the room.
 */
.ektimo-enquiry__arrow {
	color: #8a8a8e;
	font-size: 1.25rem;
	padding-bottom: 0.65rem;
	flex: 0 0 auto;
}

/*
 * A tighter row-gap than the 1rem column-gap, so when the fields do wrap onto two lines they sit
 * closer together vertically than they would side by side.
 */
.ektimo-enquiry__dates {
	row-gap: 0.75rem;
}

.ektimo-enquiry__error {
	background: #fcf0f1;
	border-left: 3px solid var(--ektimo-enquiry-error);
	color: var(--ektimo-enquiry-error);
	font-size: 0.875rem;
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
}

/* -- Submit ------------------------------------------------------------------------- */

.ektimo-enquiry__submit {
	background: var(--ektimo-enquiry-primary);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.85rem 2rem;
	transition: background 0.15s ease;
}

.ektimo-enquiry__submit:hover,
.ektimo-enquiry__submit:focus-visible {
	background: #1f8bbd;
}

/*
 * While an AJAX add is in flight the button is disabled, so it needs to read as busy rather
 * than simply broken.
 */
.ektimo-enquiry__submit:disabled,
.ektimo-enquiry__submit.is-loading {
	cursor: progress;
	opacity: 0.65;
}

/*
 * Loading spinner.
 *
 * A pseudo-element rather than injected markup, so assets/js/woocommerce.js only toggles a
 * class and never touches the button's children — the label swap it performs uses textContent,
 * which would discard an inserted <span>.
 *
 * inline-flex keeps the spinner and the "Adding…" label on one line and centred, matching the
 * button's normal text alignment. The button keeps its own padding and border-radius, so its
 * size and shape do not change while loading.
 */
.ektimo-enquiry__submit.is-loading {
	align-items: center;
	display: inline-flex;
	gap: 0.55rem;
	justify-content: center;
}

.ektimo-enquiry__submit.is-loading::before {
	content: "";
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	border: 2px solid rgb(255 255 255 / 0.4);
	/* One opaque edge is what makes the rotation legible. */
	border-top-color: #fff;
	border-radius: 50%;
	animation: ektimo-enquiry-spin 0.6s linear infinite;
}

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

/*
 * Respect a reduced-motion preference: the spinner still marks the button as busy, it simply
 * does not rotate.
 */
@media (prefers-reduced-motion: reduce) {
	.ektimo-enquiry__submit.is-loading::before {
		animation: none;
	}
}

/* -- Action row --------------------------------------------------------------------- */

/* "Add to enquiry" and "View Enquiry" sit side by side, wrapping on narrow panels. */
.ektimo-enquiry__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * Confirmation written by assets/js/woocommerce.js after a successful AJAX add. Since the page
 * no longer reloads, this is the visitor's only feedback that the add worked.
 */
.ektimo-enquiry__status {
	color: #14612f;
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0.25rem 0 0;
}

.ektimo-enquiry__status[hidden] {
	display: none;
}

/* The button ships hidden; this beats the inline-flex/display rules that would override it. */
.ektimo-enquiry__view[hidden] {
	display: none;
}

.ektimo-enquiry__view {
	background: var(--ektimo-enquiry-primary);
	border-radius: 999px;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.7rem 1.6rem;
	text-decoration: none;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.ektimo-enquiry__view:hover,
.ektimo-enquiry__view:focus-visible {
	background: #1f8bbd;
	color: #fff;
}

/* -- Feature bullet list ------------------------------------------------------------ */

.ektimo-enquiry__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ektimo-enquiry__bullet {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: #4a5568;
	line-height: 1.5;
}

.ektimo-enquiry__bullet-icon {
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--ektimo-enquiry-primary);
}

/* -- Checkout notice ---------------------------------------------------------------- */

.ektimo-enquiry-notice {
	background: #f0f6fc;
	border-left: 3px solid var(--ektimo-enquiry-primary);
	margin-bottom: 1.5rem;
	padding: 0.85rem 1.15rem;
}

.ektimo-enquiry-notice p {
	margin: 0;
	color: var(--ektimo-enquiry-heading);
}

/* -- Shared footer blocks on product views ------------------------------------------ */

/*
 * The partner logo marquee and the contact form are shared blocks printed at the foot of the
 * product templates, so they must look identical to the home page.
 *
 * WooCommerce's own stylesheet only loads on shop views, and it sizes images inside the
 * `.woocommerce` wrapper for product galleries (width:100%). That rule also lands on the
 * marquee logos, which then stretch to their container instead of honouring the h-8/sm:h-10
 * utilities — the oversized, clipped logo. Restoring the intended sizing here keeps the fix in
 * the theme rather than editing the plugin.
 */
.woocommerce .ek-marquee__item img,
.ek-marquee__item img {
	height: 2rem;
	margin: 0;
	object-fit: contain;
	width: auto;
}

@media (min-width: 640px) {
	.woocommerce .ek-marquee__item img,
	.ek-marquee__item img {
		height: 2.5rem;
	}
}

/* -- Small screens ------------------------------------------------------------------ */

@media (max-width: 640px) {
	/*
	 * Below 640px the two fields stack one per line, so the arrow between them is meaningless.
	 */
	.ektimo-enquiry__arrow {
		display: none;
	}

	/*
	 * The date row becomes a real block-level stack rather than a wrapping flex row.
	 *
	 * This is the fix for the iPhone overflow. A date input reports an intrinsic min-content
	 * width to its flex parent (the widest rendering of its sub-fields plus the picker control),
	 * and a *flex item* is sized to at least that intrinsic width — `width: 100%`, `max-width`
	 * and `min-width: 0` on the item do not override it, which is why every attempt to cap the
	 * input from the outside failed. The field stayed at its intrinsic width and painted past
	 * the Rent card's padding.
	 *
	 * Taking the fields out of flex layout removes that intrinsic floor entirely: as ordinary
	 * block boxes they resolve `width: 100%` against the container and cannot exceed it.
	 */
	.ektimo-enquiry__dates {
		display: block;
	}

	.ektimo-enquiry__date {
		display: block;
		/* The flex shorthand no longer applies; reset it so nothing lingers. */
		flex: none;
		width: 100%;
		max-width: 100%;
	}

	.ektimo-enquiry__date + .ektimo-enquiry__date {
		margin-top: 0.75rem;
	}

	/* The label stacked above the input, as the flex column previously produced. */
	.ektimo-enquiry__date label {
		display: block;
		margin-bottom: 0.35rem;
		margin-top: 5px;
	}

	.ektimo-enquiry__date input[type='date'] {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	/* Both actions go full width and stack, so neither is cramped on a phone. */
	.ektimo-enquiry__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ektimo-enquiry__submit {
		width: 100%;
	}

	.ektimo-enquiry__view {
		text-align: center;
		width: 100%;
	}
}

/* -- Product gallery + hover zoom ---------------------------------------------------- *
 *
 * Markup from template-parts/woocommerce/product-gallery.php. The stage holds the main
 * image; the lens is a magnified copy of it, positioned by assets/js/woocommerce.js.
 *
 * Hand-written rather than Tailwind utilities to match the rest of this file, and because
 * the magnifier needs real custom properties (--ektimo-zoom-*) that JS writes at runtime.
 * ------------------------------------------------------------------------------------ */

.ektimo-gallery__stage {
	align-items: center;
	background: #fff;
	border: 1.5px solid #c8d2db;
	border-radius: 0.75rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 2rem;
	position: relative;
	/* The magnified region is a rectangle, so the crosshair reads more accurately than a
	   magnifier cursor, which implies a click-to-zoom that is not what this does. */
	cursor: crosshair;
}

.ektimo-gallery__image {
	display: block;
	height: auto;
	max-height: 460px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/*
 * The lens. background-image, -size and -position are all set from JS via custom
 * properties; until then it has nothing to show and stays hidden.
 */
.ektimo-gallery__lens {
	background-color: #fff;
	background-image: var(--ektimo-zoom-image, none);
	background-position: var(--ektimo-zoom-position, center);
	background-repeat: no-repeat;
	background-size: var(--ektimo-zoom-size, auto);
	border: 1px solid var(--ektimo-enquiry-border);
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	height: var(--ektimo-zoom-height, 180px);
	left: var(--ektimo-zoom-left, 0);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: var(--ektimo-zoom-top, 0);
	transition: opacity 150ms ease;
	width: var(--ektimo-zoom-width, 180px);
	z-index: 5;
}

.ektimo-gallery__stage.is-zooming .ektimo-gallery__lens {
	opacity: 1;
}

/* -- Thumbnails --------------------------------------------------------------------- */

.ektimo-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.ektimo-gallery__thumb-item {
	margin: 0;
}

.ektimo-gallery__thumb {
	background: #fff;
	border: 1.5px solid var(--ektimo-enquiry-border);
	border-radius: 0.5rem;
	cursor: pointer;
	display: block;
	overflow: hidden;
	padding: 0;
	transition: border-color 150ms ease;
	width: 84px;
}

.ektimo-gallery__thumb img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.ektimo-gallery__thumb:hover,
.ektimo-gallery__thumb:focus-visible {
	border-color: var(--ektimo-enquiry-primary);
}

.ektimo-gallery__thumb.is-active {
	border-color: var(--ektimo-enquiry-primary);
	border-width: 2px;
}

/*
 * Touch and small screens: there is no hover, so the magnifier never applies. Suppressing it
 * here also stops a tap from leaving the lens stuck open.
 */
@media (hover: none), (max-width: 640px) {
	.ektimo-gallery__lens {
		display: none;
	}

	.ektimo-gallery__stage {
		cursor: zoom-in;
	}
}

/*
 * Guards against WooCommerce's own stylesheet, which loads on every product view.
 *
 * Woo sizes gallery images with `div.product div.images img { width:100% }` and floats
 * `.flex-control-thumbs li` at 25%. This gallery uses its own class names so those selectors
 * do not match today — but the markup sits inside the `.woocommerce`/`div.product` wrapper
 * that `wc_product_class()` prints, so these explicit values keep the layout correct even if
 * Woo widens its selectors or the wrapper markup changes.
 */
.woocommerce div.product .ektimo-gallery__image {
	height: auto;
	max-height: 460px;
	width: auto;
}

.woocommerce div.product .ektimo-gallery__thumbs li {
	float: none;
	list-style: none;
	margin: 0;
	width: auto;
}

.woocommerce div.product .ektimo-gallery__thumb img {
	box-shadow: none;
	width: 100%;
}

/* -- Enquiry received (thank-you) screen -------------------------------------------- *
 *
 * Styles WooCommerce's own order-received markup, which the theme does not template:
 *
 *   ul.woocommerce-order-overview        the ORDER NUMBER / DATE / TOTAL meta list
 *   table.woocommerce-table--order-details  the line-item table
 *   .woocommerce-customer-details        the billing address block
 *
 * WooCommerce ships these as a bare <ul> and an unstyled table, which inherit almost nothing
 * from the theme — hence the stacked, cramped labels. Rules are scoped under .woocommerce-order
 * so they cannot leak into the cart, checkout or any other Woo view.
 * ---------------------------------------------------------------------------------- */

/*
 * The thank-you screen renders inside page.php's prose wrapper (.ek-prose.max-w-3xl), which
 * caps content at a 48rem reading measure. That is right for body copy and too narrow for the
 * details table, so the measure is released here — the padded .ek-container around it still
 * provides the page gutters, which is what keeps the content off the viewport edge on mobile.
 *
 * Scoped to the order-received body class so no other page using the prose wrapper is affected.
 */
.woocommerce-order-received .entry-content,
.woocommerce-order-received .ek-prose {
	max-width: none;
}

.woocommerce-order {
	margin: 0 auto;
	max-width: 62rem;
	/* Belt and braces: nothing inside may force the page wider than the viewport. */
	overflow-wrap: break-word;
}

/*
 * The prose wrapper styles descendant tables for editorial content. The details table has its
 * own presentation below, so those inherited rules are reset rather than fought.
 */
.woocommerce-order-received .ek-prose table {
	display: table;
	margin: 0;
}

/* -- Success notice ---------------------------------------------------------------- */

.woocommerce-order .woocommerce-notice--success {
	background: var(--ektimo-enquiry-panel);
	border-left: 3px solid var(--ektimo-enquiry-primary);
	border-radius: 0.5rem;
	color: var(--ektimo-enquiry-heading);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 2.5rem;
	padding: 1.15rem 1.4rem;
}

/* -- Meta cards: ENQUIRY NUMBER / DATE / TOTAL -------------------------------------- */

/*
 * The fix for the overlapping labels. WooCommerce emits each item as a bare text node followed
 * by a <strong>, inside a <ul> it styles as a float row at some breakpoints — which collapses
 * awkwardly in a narrower theme container. Grid gives each item a real column, and making the
 * <li> a column flex box puts the label above its value instead of running into it.
 */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.woocommerce-order .woocommerce-order-overview li,
.woocommerce-order ul.order_details li {
	background: #fff;
	border: 1px solid var(--ektimo-enquiry-border);
	border-radius: 0.625rem;
	/*
	 * grow to share the row, never shrink below a readable width, and use a basis that fits
	 * three cards on a desktop row and wraps to two (then one) as space runs out.
	 */
	flex: 1 1 190px;
	min-width: 0;
	/* Label sits above the value; both left-aligned. */
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	/* Woo's own stylesheet floats these and adds borders/margins — all reset here. */
	float: none;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 1rem 1.15rem;
	text-transform: uppercase;
	border-right: 1px solid var(--ektimo-enquiry-border);
	color: #6b7280;
	white-space: normal;
	width: auto;
}

.woocommerce-order .woocommerce-order-overview li strong,
.woocommerce-order ul.order_details li strong {
	color: var(--ektimo-enquiry-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
	/* Long values (an email address) must not push the card wide. */
	overflow-wrap: break-word;
}

/* -- Section titles ---------------------------------------------------------------- */

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order h2 {
	color: var(--ektimo-enquiry-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

/* -- Enquiry details table --------------------------------------------------------- */

.woocommerce-order .woocommerce-table--order-details {
	border: 1px solid var(--ektimo-enquiry-border);
	border-collapse: separate;
	border-radius: 0.625rem;
	border-spacing: 0;
	margin: 0 0 2.5rem;
	overflow: hidden;
	width: 100%;
}

.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td {
	border: 0;
	border-bottom: 1px solid var(--ektimo-enquiry-border);
	padding: 0.9rem 1.15rem;
	text-align: left;
	vertical-align: top;
}

.woocommerce-order .woocommerce-table--order-details thead th {
	background: var(--ektimo-enquiry-panel);
	color: var(--ektimo-enquiry-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Totals column reads as a figure, so it aligns right. */
.woocommerce-order .woocommerce-table--order-details td.product-total,
.woocommerce-order .woocommerce-table--order-details th.product-total,
.woocommerce-order .woocommerce-table--order-details tfoot td:last-child,
.woocommerce-order .woocommerce-table--order-details tfoot th:last-child {
	text-align: right;
	white-space: nowrap;
}

/*
 * Exception: the customer Note row is prose, not a figure.
 *
 * The rule above right-aligns and nowraps every tfoot value cell so money columns line up.
 * The Note row's value is a sentence, so it inherited both and rendered right-aligned on one
 * unbreakable line that overflowed the table.
 *
 * WooCommerce gives that row no class, so it is identified structurally instead (see
 * templates/order/order-details.php): the totals rows the loop emits carry <th scope="row">,
 * the Actions row carries th.order-actions--heading, and the Note row is the only one whose
 * <th> has neither. Targeting `tfoot tr:last-child td` would be wrong — the Actions row is
 * output AFTER the Note row whenever the order has any available actions.
 *
 * Kept as its own rule rather than folded into the selector list above: a browser without
 * :has() support drops this rule alone and simply keeps the old alignment, instead of
 * invalidating the whole money-column rule with it.
 *
 * body.woocommerce-order-received confines it to the Thank You page; this stylesheet is also
 * loaded on cart, checkout and the product views, and .woocommerce-order markup additionally
 * appears on the My Account "view order" screen.
 */
body.woocommerce-order-received .woocommerce-order .woocommerce-table--order-details tfoot tr:has(> th:not([scope]):not(.order-actions--heading)) td {
	text-align: left;
	white-space: normal;
}

.woocommerce-order .woocommerce-table--order-details tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-order .woocommerce-table--order-details a {
	color: var(--ektimo-enquiry-heading);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-order .woocommerce-table--order-details a:hover {
	color: var(--ektimo-enquiry-primary);
}

.woocommerce-order .woocommerce-table--order-details .product-quantity {
	color: #6b7280;
	font-weight: 500;
}

/* Per-line meta ("Type: Purchase", rental dates) — secondary to the product name. */
.woocommerce-order .woocommerce-table--order-details .wc-item-meta {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
}

.woocommerce-order .woocommerce-table--order-details .wc-item-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-size: 0.8125rem;
	margin: 0;
}

.woocommerce-order .woocommerce-table--order-details .wc-item-meta p,
.woocommerce-order .woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
	color: #6b7280;
	display: inline;
	font-size: 0.8125rem;
	margin: 0;
}

.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-order .woocommerce-table--order-details tfoot td {
	background: #fcfdfe;
	font-weight: 600;
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	color: var(--ektimo-enquiry-heading);
	font-size: 1.0625rem;
	font-weight: 700;
}

/* -- Billing address card ---------------------------------------------------------- */

.woocommerce-order .woocommerce-customer-details {
	margin: 0;
}

.woocommerce-order .woocommerce-customer-details address {
	background: #fff;
	border: 1px solid var(--ektimo-enquiry-border);
	border-radius: 0.625rem;
	font-style: normal;
	line-height: 1.7;
	padding: 1.15rem 1.4rem;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 0.5rem 0 0;
	overflow-wrap: break-word;
}

/* Woo renders the addresses in a 2-col grid; with shipping removed one column is empty. */
.woocommerce-order .woocommerce-columns--addresses {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.woocommerce-order .woocommerce-columns--addresses:has(.col-2) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.woocommerce-order .woocommerce-columns--addresses .col-1,
.woocommerce-order .woocommerce-columns--addresses .col-2 {
	float: none;
	padding: 0;
	width: auto;
}

/* -- Tablet and below -------------------------------------------------------------- *
 *
 * The meta cards and the details table are the two things that break on narrow viewports:
 * three cards cannot share a row, and a two-column table with a long product name and a
 * nowrap total forces horizontal overflow. Below 768px the cards go full width and the table
 * becomes a stacked list, each row a small card with its column heading as an inline label.
 * ---------------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* One card per row — 190px basis would otherwise pair them awkwardly at ~600px. */
	.woocommerce-order .woocommerce-order-overview li,
	.woocommerce-order ul.order_details li {
		flex: 1 1 100%;
	}

	/*
	 * Stack the table. WooCommerce's order-details templates print no data-label attributes
	 * (unlike the cart table), so the row labels below are supplied from the cell classes
	 * instead — the <thead> is hidden, and each cell states what it is.
	 */
	.woocommerce-order .woocommerce-table--order-details {
		border: 0;
		border-radius: 0;
	}

	.woocommerce-order .woocommerce-table--order-details thead {
		/* Visually hidden rather than display:none so the table keeps its semantics. */
		border: 0;
		clip-path: inset( 50% );
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.woocommerce-order .woocommerce-table--order-details tr {
		background: #fff;
		border: 1px solid var(--ektimo-enquiry-border);
		border-radius: 0.625rem;
		display: block;
		margin-bottom: 0.75rem;
		padding: 0.35rem 0.25rem;
	}

	.woocommerce-order .woocommerce-table--order-details th,
	.woocommerce-order .woocommerce-table--order-details td {
		border-bottom: 1px solid var(--ektimo-enquiry-border);
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: space-between;
		padding: 0.6rem 0.9rem;
		text-align: right;
		width: auto;
	}

	.woocommerce-order .woocommerce-table--order-details tr > *:last-child {
		border-bottom: 0;
	}

	/*
	 * Row labels. data-label is used when a table does provide it (the cart table does), and
	 * the totals rows fall back to their own <th>, which WooCommerce already renders as the
	 * label cell — so only the line-item total needs naming explicitly.
	 */
	.woocommerce-order .woocommerce-table--order-details td[data-label]::before,
	.woocommerce-order .woocommerce-table--order-details td.product-total::before {
		color: #6b7280;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		margin-right: 0.75rem;
		text-align: left;
		text-transform: uppercase;
	}

	.woocommerce-order .woocommerce-table--order-details td[data-label]::before {
		content: attr( data-label );
	}

	/*
	 * The line-item total has no data-label. "Total" is the column heading being hidden above,
	 * and it is already relabelled to "Indicative total" by the gettext map — but CSS content
	 * cannot read a translated string, so this stays literal. Suppressed when data-label is
	 * present so the label is never printed twice.
	 */
	.woocommerce-order .woocommerce-table--order-details td.product-total:not( [data-label] )::before {
		content: 'Indicative total';
	}

	/* The totals <th> is the label for its row, so it reads as one. */
	.woocommerce-order .woocommerce-table--order-details tfoot th {
		color: #6b7280;
		font-size: 0.75rem;
		font-weight: 700;
		justify-content: flex-start;
		letter-spacing: 0.08em;
		text-align: left;
		text-transform: uppercase;
	}

	/* The product name stays left-aligned and takes the full width of its row. */
	.woocommerce-order .woocommerce-table--order-details td.product-name {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.woocommerce-order .woocommerce-table--order-details tfoot th,
	.woocommerce-order .woocommerce-table--order-details tfoot td {
		background: transparent;
	}

	/*
	 * Release the desktop nowrap on totals. In the stacked layout the cell shares its row with
	 * an uppercase label, and an unbreakable figure there is the one thing that can still push
	 * the row past the viewport.
	 */
	.woocommerce-order .woocommerce-table--order-details td.product-total,
	.woocommerce-order .woocommerce-table--order-details tfoot td:last-child,
	.woocommerce-order .woocommerce-table--order-details tfoot th:last-child {
		white-space: normal;
	}

	.woocommerce-order .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

/* -- Small screens ----------------------------------------------------------------- */

@media (max-width: 640px) {
	.woocommerce-order .woocommerce-table--order-details th,
	.woocommerce-order .woocommerce-table--order-details td {
		padding: 0.55rem 0.75rem;
	}

	.woocommerce-order .woocommerce-notice--success {
		font-size: 1rem;
		padding: 1rem 1.15rem;
	}

	.woocommerce-order .woocommerce-customer-details address {
		padding: 1rem 1.15rem;
	}
}

/* -- Product archive: sort control ---------------------------------------------------- *
 *
 * Hides the "Sort:" dropdown on the Products & Equipment archive. The markup stays in
 * woocommerce/archive-product.php so the control can be restored by deleting this rule; the
 * catalogue keeps its default A–Z ordering, and an ?orderby= URL still works.
 *
 * !important is required: the select carries Tailwind utility classes whose display value
 * would otherwise win.
 * ------------------------------------------------------------------------------------ */

label[for="ek-sort-select"],
#ek-sort-select {
	display: none !important;
}


/*
 * The label and select share a `flex items-center gap-2` wrapper (the markup uses Tailwind
 * utilities, so there is no class to target it by). With both children hidden that wrapper
 * still renders and its column-gap leaves a stray gap in the toolbar, so it is collapsed too.
 *
 * :has() is progressive enhancement — where it is unsupported the control is still hidden and
 * only the empty wrapper remains, which is harmless.
 */
div:has( > #ek-sort-select ) {
	display: none !important;
}

/* -- Mini cart: hidden price wrapper -------------------------------------------------- *
 *
 * ektimo_wc_filter_cart_item_price_display() (includes/woocommerce.php) blanks the price
 * string for a purchase-mode cart line whose product has allow_purchase disabled. The
 * mini-cart-for-woocommerce plugin still prints its .whmc-item-price wrapper regardless,
 * so this collapses it rather than leaving an empty gap in the cart item row.
 * ------------------------------------------------------------------------------------ */

.whmc-item-price:empty {
	display: none;
}