/* Aqualoc – Site Functions: front-end styles. Breakpoints match Divi 5 (tablet ≤980px, phone ≤767px). */

/* Shared: thin white ring around the green tick, drawn as a stroke on the
   green circle itself (no separate ring, so no seam for the background to show through) */
.aq-tick { display: block; width: 100%; height: auto; overflow: visible; }
.aq-tick path { display: none; }
.aq-tick circle { stroke: #fff; stroke-width: 1.2px; }

/* ---------- "No More…" boxes ---------- */
.aq-flow-row { --aq-gap: 40px; --aq-vgap: 70px; }
.aq-flow { position: relative; overflow: visible !important; flex: 1 1 auto; }
/* Position the tick against the box, not Divi's inner text wrapper */
.aq-flow .et_pb_text_inner { position: static; }
/* Centred on the top edge, half overhanging */
.aq-flow__tick { position: absolute; top: 0; right: 6%; width: 84px; transform: translateY(-50%); z-index: 2; }

/* Arrow between boxes (left → right) */
.aq-flow--1::after, .aq-flow--2::after, .aq-flow--3::after {
	content: ""; position: absolute; z-index: 1;
	top: 50%; left: calc(100% + var(--aq-gap) / 2);
	width: 30px; height: 20px; transform: translate(-50%, -50%);
	background: url("arrow.svg") center / contain no-repeat;
}

@media (max-width: 980px) {
	/* 2 x 2 grid: no arrow from the end of the first line */
	.aq-flow--2::after { display: none; }
	.aq-cta-spacer { display: none !important; }
}

@media (max-width: 767px) {
	/* Stacked: arrows point down */
	.aq-flow--2::after { display: block; }
	.aq-flow--1::after, .aq-flow--2::after, .aq-flow--3::after {
		top: calc(100% + var(--aq-vgap) / 2); left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	.aq-flow__tick { width: 68px; }
}

/* ---------- "Ticks All The Boxes" banner ---------- */
.aq-ticks-banner { position: relative; overflow: visible !important; }
.aq-ticks { padding: 28px 150px 28px 0; }
.aq-ticks h2 { margin: 0; padding: 0; }
.aq-ticks__tick { position: absolute; top: 50%; right: -80px; width: 170px; transform: translateY(-50%); }

@media (max-width: 980px) {
	.aq-ticks { padding-right: 130px; }
	.aq-ticks__tick { right: -20px; width: 140px; }
}
@media (max-width: 767px) {
	.aq-ticks { padding: 22px 100px 22px 0; }
	.aq-ticks__tick { right: 6px; width: 96px; }
}

/* ---------- Order CTA ---------- */
/* The link sits on the heading; its ::after stretches over the whole green box so all of it is clickable */
.aq-cta-btn { position: relative; transition: filter .2s ease; }
.aq-cta-btn:hover { filter: brightness(1.08); }
.aq-cta .aq-cta__link { color: #fff; text-decoration: none; }
.aq-cta .aq-cta__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.aq-cta .aq-cta__link:focus-visible { outline: none; }
.aq-cta-btn:has(.aq-cta__link:focus-visible) { outline: 3px solid #24438e; outline-offset: 3px; }