/* === Amidcode service-page quiz (cost calculator) ===
 * Mirrors the shop-landing calculator layout, recolored to Amidcode:
 *   #0D1344 navy (primary), #CC2929 red (accent), #d9d9e3 light borders.
 * Markup: .popup--calc > .wrap-calc > .steps-title (.row-steps-title: .title-calc + .quiz-steps)
 *          + CF7 form (.step.step__N) + .calculator_bottom (.prev-step / .next-step). */

.popup--calc {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 24px auto;
	background: #fff;
	border-radius: 24px;
	padding: 48px 56px;
	box-shadow: 0 24px 70px rgba(13, 19, 68, .14);
}

/* title — centered descriptive heading (like landing) */
.popup--calc .title-calc {
	text-align: center;
	font-size: 21px;
	line-height: 1.45;
	font-weight: 700;
	color: #0D1344;
	max-width: 760px;
	margin: 0 auto 28px;
}
.popup--calc .title-calc b,
.popup--calc .title-calc span { color: #CC2929; }

/* step indicators — centered pills with arrows between them */
.popup--calc .quiz-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 28px;
	margin-bottom: 32px;
}
.popup--calc .quiz-step {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 11px 26px;
	border: 1px solid #d9d9e3;
	border-radius: 30px;
	color: #b6b6c4;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: color .2s, border-color .2s, box-shadow .2s;
}
.popup--calc .quiz-step.active {
	color: #0D1344;
	border-color: #0D1344;
	box-shadow: 0 0 0 1px #0D1344;
}
.popup--calc .quiz-step:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -24px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 10px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' stroke='%23c9c9d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* hide the question-steps header (title + pills) on the final contacts step */
.popup--calc .wrap-calc.active-last .row-steps-title { display: none; }

/* form steps */
.popup--calc .step { display: none; }
.popup--calc .step.active { display: block; animation: amidQuizFade .3s ease; }
@keyframes amidQuizFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* question */
.popup--calc .title-question p,
.popup--calc .title-question h2 {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: #0D1344;
	margin-bottom: 20px;
}

/* theme decorates .wpcf7-form-control-wrap with a 1px vertical line (::before) — kill it inside the quiz */
.popup--calc .wpcf7-form-control-wrap::before,
.popup--calc .wpcf7-form-control-wrap::after { content: none !important; display: none !important; }

/* options — clean rows (no card box), custom square check control (landing style) */
.popup--calc .check-row .wpcf7-list-item { display: block; width: 100%; margin: 0 0 14px; }
.popup--calc .check-row .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	line-height: 1.3;
	color: #2b2b3a;
	font-size: 15px;
}
.popup--calc .check-row input[type="radio"],
.popup--calc .check-row input[type="checkbox"],
.popup--calc .messengers-grid input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px;
	max-width: 24px;
	flex: 0 0 24px;
	box-sizing: border-box;
	padding: 0 !important;
	margin: 0;
	/* 2026-09-09: the unchecked control was invisible — fill #eef0f5 gave 1.14:1 against the
	   popup's white ground and the border #d9d9e3 gave 1.40:1, where a control needs 3:1. The chip
	   around it is drawn in the same #d9d9e3, so nothing carried the shape. #4E5468 is the site's
	   own focus-ring colour (7.52:1) — no new colour introduced.

	   WIDTH STAYS 1px, and that is load-bearing. The :checked rule below overrides only the colour
	   and the background, never the width, so a 2px base leaks into the checked state: the inner
	   box shrinks 22px -> 20px while the tick is pinned at left:8px, and its gaps go from 8/8 to
	   8/6. Measured before this shipped. Radius and the 24px size are untouched for the same
	   reason — 24px is exactly the touch-target threshold, and the 50% on radios depends on the
	   order of the rules below. */
	border: 1px solid #4E5468;
	border-radius: 6px;
	background: #fff;
	position: relative;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.popup--calc .check-row input:hover,
.popup--calc .messengers-grid input:hover { border-color: #0D1344; } /* 2026-09-09: was #b9b9cc at 1.93:1 — hover was practically invisible */
.popup--calc .check-row input:checked,
.popup--calc .messengers-grid input:checked {
	border-color: #CC2929;
	background: #CC2929;
}
.popup--calc .check-row input:checked::after,
.popup--calc .messengers-grid input:checked::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* textarea + text/tel inputs */
.popup--calc textarea {
	width: 100%;
	border: 1.5px solid #d9d9e3;
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 15px;
	color: #0D1344;
	margin-bottom: 14px;
	box-sizing: border-box;
}
/* name + tel — pill inputs with icon (landing shape, Amidcode navy icons) */
.popup--calc .done__test input[type="text"],
.popup--calc .done__test input[type="tel"] {
	width: 100%;
	border: 1px solid #d9d9e3;
	border-radius: 26px;
	padding: 16px 18px 16px 58px;
	font-size: 15px;
	color: #0D1344;
	margin-bottom: 14px;
	box-sizing: border-box;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 28px 28px;
}
.popup--calc .done__test input.name { background-image: url("../img/quiz-icon-user.svg"); }
.popup--calc .done__test input.phone { background-image: url("../img/quiz-icon-phone.svg"); }

/* Attach-file capsule. The capsule itself is defined at the end of main.css for the main forms
   (62px, 50px radius, a 70px icon column ending in a divider, a 15px red paperclip). Inside the
   quiz none of that matches: fields here are 26px radius with a 28px navy icon at 16px and no
   divider, so the capsule read as a control borrowed from another form. Owner decision 08.09.2026. */
.popup--calc .done__test .file-wrap { margin-bottom: 14px; }
.popup--calc .done__test .file-label {
	border-color: #d9d9e3;
	border-radius: 26px;
	padding: 10px 18px 10px 58px;
}
.popup--calc .done__test .file-label__main { font-size: 15px; }
.popup--calc .done__test .file-label::after { content: none; }
.popup--calc .done__test .file-label::before {
	left: 16px;
	width: 28px;
	height: 28px;
	background-color: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	background-image: url("../img/quiz-icon-clip.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
}
/* focus turns the border navy here, like every other quiz field, not brand red */
.popup--calc .done__test .file-wrap:hover .file-label,
/* 2026-09-09: keyboard focus only — see the --kbd class in main.js. :focus-within also fires
   when the file was picked with the mouse, which tinted the border on an ordinary click. */
.popup--calc .done__test .file-wrap--kbd .file-label { border-color: #0D1344; }
.popup--calc .done__test .file-wrap--invalid .file-label { border-color: #f02b2b; }
/* the tip lines up with the capsule's own 58px text column */
.popup--calc .done__test .file-wrap .wpcf7-not-valid-tip { padding-left: 58px; }

/* focus: no double frame — kill the outline/box-shadow ring, focus shown by border turning navy */
.popup--calc input:focus, .popup--calc input:focus-visible,
.popup--calc textarea:focus, .popup--calc textarea:focus-visible { outline: none !important; box-shadow: none !important; }
.popup--calc .done__test input[type="text"]:focus,
.popup--calc .done__test input[type="tel"]:focus,
.popup--calc textarea:focus { border-color: #0D1344; }
.popup--calc textarea { min-height: 110px; resize: vertical; }
/* 2026-09-09: brand navy at 65%, same as the main forms — one placeholder colour site-wide.
   `:not(.select2)` is here for WEIGHT, not for filtering: the global
   `form input:not(.select2)::placeholder` in main.css is (0,1,2) and a plain
   `.popup--calc input::placeholder` at (0,1,1) loses to it. Measured: without this the name and
   phone fields kept the old #686767 while only the email field picked the new colour up. */
.popup--calc textarea::placeholder,
.popup--calc input:not(.select2)::placeholder { color: rgba(13, 19, 68, 0.65); }

/* (name/phone icons are bg-image on the inputs above — exact landing icons recolored navy) */

/* contacts step (last) -- targeted by .done__test, never by its step number: the number of
   question steps differs per service (Google Ads has six, the rest five), so a numbered
   selector would style the wrong step. */
.popup--calc .done__test { max-width: 518px; margin: 0 auto; }
.popup--calc .done__test .title-question { margin-bottom: 20px; }
.popup--calc .done__test .title-question h2 { text-align: center; }
.popup--calc .done__test .polyteka_brif { font-size: 13px; line-height: 1.5; color: #4e5468; text-align: center; margin-top: 12px; }
.popup--calc .done__test .polyteka_brif a { color: #CC2929; }
.popup--calc .messengers-grid { margin-top: 10px; }
/* width:100% is load-bearing: without it the grid shrinks to its content (256px inside a 518px
   step), the two columns come out 116px wide and the row ends ragged. */
.popup--calc .messengers-grid .wpcf7-checkbox { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; width: 100%; }
.popup--calc .messengers-grid .wpcf7-list-item { margin: 0; width: 100%; }
/* Each option sits in a box on the same 26px radius and #d9d9e3 border as the fields above it.
   Bare checkboxes made this the one part of the step that did not read as part of the form. */
.popup--calc .messengers-grid label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	color: #2b2b3a;
	font-size: 15px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 11px 18px;
	background: #fff;
	border: 1px solid #d9d9e3;
	border-radius: 26px;
	transition: border-color 0.15s ease;
}
.popup--calc .messengers-grid label:hover { border-color: #0D1344; }
/* the fifth option has no pair, so it takes the whole row and centres instead of hanging left */
.popup--calc .messengers-grid .wpcf7-list-item:nth-child(5) { grid-column: 1 / -1; }
.popup--calc .messengers-grid .wpcf7-list-item:nth-child(5) label { justify-content: center; }
/* Single column below 520px. The fifth option is centred only while it is a full-width box
   under a two-column row; once every option is full width there is nothing to centre against,
   and a lone centred label breaks the left edge the other four share. */
@media (max-width: 520px) {
	.popup--calc .messengers-grid .wpcf7-checkbox { grid-template-columns: 1fr; }
	.popup--calc .messengers-grid .wpcf7-list-item:nth-child(5) label { justify-content: flex-start; }
}

/* nav */
.popup--calc .calculator_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 30px;
}
/* The two nav controls were <div>s, so the quiz could not be completed with a keyboard:
   no tab stop, no Enter or Space. They are <button type="button"> since 2026-08-13,
   which needs the native button chrome reset — the rules below keep the previous look
   byte for byte. The next-step background and font-size are set later in this file
   and still win by source order. */
.popup--calc .steps-nav {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	line-height: inherit;
}

/* Keyboard focus must be visible on the quiz controls: this is the primary call
   to action on 18 service pages. */
.popup--calc .steps-nav:focus-visible {
	outline: 2px solid var(--color-first, #CC2929);
	outline-offset: 3px;
	border-radius: 30px;
}
.popup--calc .next-step {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #0D1344;
	color: #fff;
	padding: 14px 30px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 15px;
}
.popup--calc .next-step:hover { background: #1a224f; }
/* gated until the current radio step is answered (no more CF7 default: preselect) */
.popup--calc .next-step.is-locked { opacity: .45; pointer-events: none; }
.popup--calc .next-step svg { width: 7px; height: 12px; }
.popup--calc .prev-step { color: #0D1344; font-weight: 600; }
.popup--calc .prev-step svg path { stroke: #0D1344; }
.popup--calc .disabled-btn { display: none !important; }

/* CF7 submit on last step */
/* margin-top matches the 20px gap above the contact-method block so the button isn't cramped against it (collapses with the block's inline margin-bottom:15px -> 20px) */
.popup--calc .done__test .label-submit { display: block; margin-top: 20px; }
.popup--calc .done__test .btn,
.popup--calc .done__test input[type="submit"] {
	width: 100%;
	background: #CC2929;
	color: #fff;
	border: 0;
	padding: 16px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background .2s;
}
.popup--calc .done__test input[type="submit"]:hover,
.popup--calc .done__test .btn:hover { background: #b51f1f; }

/* responsive */
@media (max-width: 768px) {
	/* top padding leaves room for the close (X) button while keeping the title compact */
	.popup--calc { padding: 55px 18px 28px; border-radius: 18px; }
	.popup--calc .title-calc { font-size: 16px; line-height: 1.5; margin-bottom: 20px; padding: 0 6px; }
	.popup--calc .title-question p, .popup--calc .title-question h2 { font-size: 16px; line-height: 1.5; }
	.popup--calc .done__test .title-question h2 { font-size: 17px; }
	.popup--calc .quiz-steps { gap: 10px 18px; margin-bottom: 24px; }
	.popup--calc .quiz-step { padding: 9px 14px; font-size: 13px; }
	.popup--calc .quiz-step span { display: none; }
	.popup--calc .quiz-step:not(:last-child)::after { right: -16px; width: 12px; }
	.popup--calc .done__test input[type="text"], .popup--calc .done__test input[type="tel"] { font-size: 16px; }
}

/* quiz contact step: optional email field (2026-06-28) */
.popup--calc .done__test input[type="email"]{width:100%;border:1px solid #d9d9e3;border-radius:26px;padding:16px 18px 16px 58px;font-size:15px;color:#0D1344;margin-bottom:14px;box-sizing:border-box;background-color:#fff;background-repeat:no-repeat;background-position:16px center;background-size:28px 28px;background-image:url("../img/quiz-icon-mail.svg");}
.popup--calc .done__test input[type="email"]:focus{border-color:#0D1344;outline:none;box-shadow:none;}
.popup--calc .done__test input[type="email"]::placeholder{color:rgba(13, 19, 68, 0.65);}

/* quiz contact step: validation tips IN-FLOW so they fit between fields (2026-06-28) */
.popup--calc .done__test .wpcf7-form-control-wrapper > .wpcf7-form-control-wrap{display:flex;flex-direction:column;position:relative;}
.popup--calc .done__test input[type="text"],
.popup--calc .done__test input[type="tel"],
.popup--calc .done__test input[type="email"]{margin-bottom:0;}
.popup--calc .done__test > .wpcf7-form-control-wrapper{margin-bottom:16px;}
/* 2026-09-09: colour raised from #f02b2b (4.13:1 on the popup white ground - fails 4.5:1
   for 12px text) to the site own red #CC2929 (5.30:1). main.css switched
   .wpcf7-not-valid-tip on 08.09, but this selector is (0,3,0) against its (0,1,0) and kept
   the old value in all 27 quiz forms. Keep both in step: change one, change the other. */
.popup--calc .done__test .wpcf7-not-valid-tip{position:static !important;left:auto !important;bottom:auto !important;display:block !important;margin:6px 0 0 18px;font-size:12px;font-weight:600;color:#CC2929;}
/* end quiz tips */

/* quiz fields: use site font Montserrat (form controls do not inherit it) (2026-06-28) */
.popup--calc input, .popup--calc textarea, .popup--calc select{font-family:"Montserrat", MontserratHero, sans-serif;}

/* placeholder weight 500 (re) (2026-06-28) */
.popup--calc input::placeholder, .popup--calc textarea::placeholder{font-weight:500;}

/* quiz consent link: semibold navy + red underline hover (2026-06-28) */
.popup--calc .done__test a{color:#0D1344 !important;font-weight:600 !important;transition:color .2s ease;}
.popup--calc .done__test a:hover{color:#CC2929 !important;text-decoration:none !important;}

/* quiz back button hover: arrow slide + navy (2026-06-28) */
.popup--calc .btn_prev span{transition:color .2s ease;}
.popup--calc .btn_prev svg path{transition:stroke .2s ease;}
.popup--calc .btn_prev svg{transition:transform .25s ease;}
.popup--calc .btn_prev:hover span{color:#0D1344 !important;}
.popup--calc .btn_prev:hover svg path{stroke:#0D1344 !important;}
.popup--calc .btn_prev:hover svg{transform:translateX(-4px) !important;}

/* Keyboard focus on the quiz options (03.09.2026).
   The blanket ".popup--calc input:focus-visible { outline: none !important }" above was
   written for the text fields, which signal focus by turning their border navy. Radios and
   checkboxes got no such replacement, so with a real Tab press :focus-visible matched but
   outline-style computed to none and nothing was painted: the first step of the quiz was
   unreachable by keyboard. Same colour and offset as the site-wide focus ring in main.css. */
.popup--calc .check-row input[type="radio"]:focus-visible,
.popup--calc .check-row input[type="checkbox"]:focus-visible,
.popup--calc .messengers-grid input[type="checkbox"]:focus-visible {
	outline: 2px solid #4E5468 !important;
	outline-offset: 3px;
}

/* One choice versus several (03.09.2026).
   Radio and checkbox were drawn identically, a 24px rounded square with a tick, so on the
   step that accepts several answers nothing told the visitor they could pick more than one.
   The radio becomes a circle with a dot, the conventional shape for a single choice. */
.popup--calc .check-row input[type="radio"] { border-radius: 50%; }

/* 2026-09-10: the radio was inheriting the checkbox's filled-red :checked state and only swapping
   the tick for a white dot, so it rendered as a red doughnut. Every design system that fills the
   control makes the inner circle exactly half the diameter (Bootstrap 5, GOV.UK 20/40); ours was
   10 of 24 — 42% — and the ring read as too heavy at real size.

   Switched to the ring-and-dot pattern instead of just widening the hole: Material 3, GOV.UK,
   Carbon, Fluent and Ant all draw a single choice that way, and more importantly the checkbox in
   this same quiz IS a filled red square with a tick. Leaving the radio filled red as well let the
   two blur together at a glance, which is exactly what the 03.09 change above set out to prevent.
   Ring vs fill separates them reliably. #CC2929 on white is 5.36:1, against the 3:1 that
   WCAG 1.4.11 asks of a non-text indicator.

   The radio MAY change border-width where the checkbox may NOT: its dot is centred with
   translate(-50%, -50%), so a thicker ring cannot shift it. The checkbox tick is pinned at
   left:8px and would drift — see the note at the base rule near the top of this file. */
.popup--calc .check-row input[type="radio"]:checked {
	background: #fff;
	border-width: 2px;
}
.popup--calc .check-row input[type="radio"]:checked::after {
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: #CC2929;
	transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------------- *
 * Floating labels on the contacts step (10.09.2026)
 *
 * The quiz was the last place on the site where a field's only name lived in its placeholder and
 * vanished on the first keystroke - including the asterisk that marked it required, which is the
 * worst moment to lose it. The contacts step now goes through the same amidcode_cf7_floating_labels
 * filter as the other forms (its earlier steps do not: there the step's own question captions the
 * field, and a label would repeat it).
 *
 * Third geometry after the main form and the side widget, because this field is built differently
 * again: 52px tall, 26px radius, a 28px icon at 16px from the left and 58px of padding after it.
 * ------------------------------------------------------------------------- */
.popup--calc .done__test .field-label {
	left: 58px;
	/* 26px = half of the 52px FIELD, not 50% of the wrap. The quiz prints its validation tip in
	   the flow (position:static, set above in this file), so the wrap grows the moment a field is
	   flagged and a label centred on the wrap would slide below the middle of the field. Same trap
	   the side widget hit on 10.09; see the note at #amid-widget .amid-form .field-label. */
	top: 26px;
	transform: translateY(-50%);
	margin-left: -6px;
	padding: 0 6px;
	font-size: 15px;
	color: rgba(13, 19, 68, .65);
	max-width: calc(100% - 76px);
}

/* The lifted state. Separate rules on purpose: an unsupported selector cannot take the rest down. */
.popup--calc .done__test input:focus + .field-label {
	top: 0;
	left: 28px;
	margin-left: 0;
	font-size: 12px;
	color: #0D1344;
}

.popup--calc .done__test input:not(:placeholder-shown) + .field-label {
	top: 0;
	left: 28px;
	margin-left: 0;
	font-size: 12px;
}

/* Autofill is content, but Chrome keeps reporting :placeholder-shown until the visitor interacts. */
.popup--calc .done__test input:-webkit-autofill + .field-label {
	top: 0;
	left: 28px;
	margin-left: 0;
	font-size: 12px;
}

/* The note explaining the asterisk. Only its spacing is set here: size and colour come from
   .sub-text-form in main.css, so it reads identically to the note on the main form. It sits right
   above the submit button by the owner's decision of 10.09.2026 - WCAG technique H90 would put it
   before the first field instead, but that is a test of a technique, not of criterion 3.3.2, and
   W3C states on every technique page that techniques are examples rather than requirements. */
.popup--calc .done__test .sub-text-form {
	margin: 4px 0 0;
	text-align: center;
}

/* Same block, same class name as on every other form of the site - it used to carry an inline
   colour of its own (#666), which is now gone from all 27 quiz forms. */
.popup--calc .done__test .contact-method-title {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #0D1344;
}