/* ==========================================================================
pdr-forms-theme.css (v1, 10 Oct 2026)
Payam Data Recovery: one calm, CRM-matching look for the website forms.
Submit a job (all devices), approve a quote, decline a quote, pay an invoice,
the job number lookup, the device chooser and the partnership form.
Source of every colour, size and radius: CRM assets/css/payam-theme.css:9-57.
Read FORMS-THEME-SPEC.md for the full design, the red-to-token table and the
reasons behind each rule.
CSS ONLY. No class, id, name or DOM change is needed. The JavaScript and the
CRM keep working exactly as before.
LOAD ORDER
inc/pdr-forms-theme.php enqueues this file on form pages only, after
job-form-css and the theme (wpex-style), with a filemtime version, and adds
the pdr-forms body class there. The four Poppins files sit in css/fonts/
(from the CRM: assets/crm2/fonts/). If they are missing the forms fall back
to Helvetica Neue / Arial with no other change.
SCOPE (nothing outside these containers changes)
.custom-job-form job forms, approve and decline pages, pay-invoice forms
.custom-payment-form every plugin form (also partnership, update-card, NZ)
.pdr-job-lookup /pay-invoice/ job number lookup
.type-of-device /submit-a-new-job/ device chooser
body.pdr-forms OPTIONAL body class (grey page background only)
!important IS USED ONLY WHERE IT MUST BEAT AN EXISTING !important OR AN
INLINE style="" ATTRIBUTE. Each one carries a "beats ..." comment. Full list:
1. Section headings h2: job_form.css:75-82, 260-267, 452-457 and
Total-child/style.css:608-620, 760-762 use !important.
2. Step number circle (h2 span): Total-child/style.css:616-620, 760-762.
3. Tier headings h3: job_form.css:228-229 (.green/.blue !important),
.no-margin/.no-padding utility classes (job_form.css:242-247).
4. Sub-headings #recovery-info h3: job_form.css:234-235.
5. Radio overlays: job_form.css:106, 278, 369 (height:100% !important),
736, 740 (payment option overlay 150px wide, 44px tall).
6. Inline style="" colours and backgrounds: discount box (rgb 194,2,1),
Pay Now / Submit (#279312), "Before you go" box (#cc0000), pay-invoice
lookup button and messages (#cb0019), card element box, address box,
.check top:10px, terms checkbox width/height:auto, read-only inputs,
attempt-fee and mobile option colours, JS hints (#cb0019, #b00, red).
7. .border-error (job_form.css:921) and LiveValidation borders
(livevalidation_css.css:28-44) already use !important.
8. .price-options-content > p margin (job_form.css:160, 422). More: 15, 16.
Browser floor: Safari 13.4+, Chrome, Edge, Firefox. No :is(), :where(),
:has(), flex gap or accent-color. :focus-visible is used only in its own
rules, so older Safari simply keeps the :focus ring.
========================================================================== */
/* --------------------------------------------------------------------------
0. Poppins, self-hosted (same files and weights as the CRM,
CRM assets/crm2/fonts/poppins.css:1-29). font-display: swap means text
shows at once in the fallback font.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Poppins Regular"), local("Poppins-Regular"),
url("fonts/poppins-latin-400.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Poppins Medium"), local("Poppins-Medium"),
url("fonts/poppins-latin-500.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: local("Poppins SemiBold"), local("Poppins-SemiBold"),
url("fonts/poppins-latin-600.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Poppins Bold"), local("Poppins-Bold"),
url("fonts/poppins-latin-700.woff2") format("woff2");
}
@-webkit-keyframes pdr-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes pdr-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
/* --------------------------------------------------------------------------
1. Tokens. Copied from CRM payam-theme.css:9-50 (names kept), set only on
the form containers so nothing else on the site changes.
Three form-only additions are marked "form".
-------------------------------------------------------------------------- */
.custom-job-form,
.custom-payment-form,
.pdr-job-lookup,
.type-of-device {
--c-bg: #f6f6f6;
--c-surface: #ffffff;
--c-surface-2: #f3f6f9;
--c-border: #e6eaef;
--c-divider: #ebedf3;
--c-text: #172b4c;
--c-text-2: #5C607B;
--c-text-3: #b5b5c3;
--c-accent: #3d6fd8;
--c-accent-hover: #2f5fc4;
--c-accent-text: #2f5fc4;
--c-accent-container: #e7f1fd;
--c-on-accent-container: #174ea6;
--tier-emergency: #e24b4b;
--tier-priority: #3d6fd8;
--tier-economy: #2f9e62;
--s-neutral-bg: #f1f3f4; --s-neutral-fg: #3c4043; --s-neutral-dot: #80868b;
--s-info-bg: #e8f0fe; --s-info-fg: #174ea6; --s-info-dot: #1a73e8;
--s-warn-bg: #fef7e0; --s-warn-fg: #8a4b00; --s-warn-dot: #f9ab00;
--s-ok-bg: #e6f4ea; --s-ok-fg: #0d652d; --s-ok-dot: #1e8e3e;
--s-alert-bg: #fce8e6; --s-alert-fg: #a50e0e; --s-alert-dot: #d93025;
--c-danger: #d93025; /* errors only */
--font: "Poppins", "Helvetica Neue", Arial, sans-serif;
--radius: 10px;
--radius-chip: 5px;
--shadow-1: 0 3px 5px 1px rgba(0, 0, 0, .05);
--shadow-2: 0 8px 24px rgba(23, 43, 76, .08);
/* form: control outline. #e6eaef is 1.2:1 on white, too faint for a field
edge; #7e8299 (CRM dark --c-text-3, Argus --crm-gray-600) is 3.8:1. */
--pdr-control-border: #7e8299;
/* form: 16px stops iPhone zoom; 44px (desktop) and 48px (phone) targets. */
--pdr-control-fs: 16px;
--pdr-control-h: 44px;
--pdr-focus-ring: 0 0 0 1px var(--c-accent), 0 0 0 4px rgba(61, 111, 216, .3);
/* form: tier fills, from CRM payam-option-a.css:242-247 */
--tier-emergency-bg: #fdecea;
--tier-priority-bg: #e7f1fd;
--tier-economy-bg: #e7f6ee;
/* Point the Total theme's own variables at the CRM accent inside forms, so
theme buttons and links there are blue, not #c80219. */
--wpex-accent: #3d6fd8;
--wpex-accent-alt: #3d6fd8;
--wpex-link-color: #2f5fc4;
--wpex-hover-link-color: #2f5fc4;
--wpex-hover-heading-link-color: #2f5fc4;
--wpex-hover-btn-bg: #2f5fc4;
--wpex-btn-border-radius: 10px;
--wpex-input-font-size: 16px;
--wpex-input-border-radius: 10px;
--wpex-red-error: #d93025;
--wpex-body-font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
--wpex-heading-font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
}
@media (max-width: 767px) {
.custom-job-form,
.custom-payment-form,
.pdr-job-lookup,
.type-of-device {
--pdr-control-h: 48px;
}
}
/* --------------------------------------------------------------------------
2. Page and card
-------------------------------------------------------------------------- */
/* Optional: add "pdr-forms" to on form pages (body_class filter) for
the CRM grey page. Without it the white theme page stays. */
/* FX-THEME: body.pdr-forms sets only this grey. It used to carry every token,
including --wpex-body-font-family and --wpex-accent, which re-fonted and
re-coloured the header, menu and footer on form pages. */
body.pdr-forms #main,
body.pdr-forms #content-wrap,
body.pdr-forms .site-main {
background-color: #f6f6f6;
}
.custom-job-form,
.custom-payment-form,
.pdr-job-lookup {
font-family: var(--font);
color: var(--c-text);
font-size: 16px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* The outer wrapper on job, approve and decline pages becomes the grey page
panel. On pay-invoice the form carries both classes, so it is excluded. */
body .custom-job-form:not(.custom-payment-form) {
background-color: var(--c-bg);
border-radius: var(--radius);
padding-top: 16px;
padding-bottom: 8px;
}
/* Every plugin form is a white card. */
body .custom-payment-form {
background-color: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius);
box-shadow: var(--shadow-1) !important; /* beats job_form.css:440 (box-shadow:none!important) */
padding: 8px 8px 24px;
margin: 0 0 24px;
box-sizing: border-box;
}
.custom-job-form *,
.custom-payment-form * {
box-sizing: border-box;
}
/* Text elements use Poppins. The theme forces DM Sans / Titillium Web on some
headings with !important; those are handled in section 3. */
.custom-job-form h1, .custom-job-form h2, .custom-job-form h3,
.custom-job-form h4, .custom-job-form h5, .custom-job-form h6,
.custom-job-form p, .custom-job-form label, .custom-job-form li,
.custom-job-form td, .custom-job-form th, .custom-job-form small,
.custom-job-form input, .custom-job-form select, .custom-job-form textarea,
.custom-job-form button,
.custom-payment-form h1, .custom-payment-form h2, .custom-payment-form h3,
.custom-payment-form h4, .custom-payment-form h5, .custom-payment-form h6,
.custom-payment-form p, .custom-payment-form label, .custom-payment-form li,
.custom-payment-form td, .custom-payment-form th, .custom-payment-form small,
.custom-payment-form input, .custom-payment-form select, .custom-payment-form textarea,
.custom-payment-form button,
.pdr-job-lookup h2, .pdr-job-lookup p, .pdr-job-lookup label,
.pdr-job-lookup input, .pdr-job-lookup button {
font-family: var(--font);
}
.custom-job-form a,
.custom-payment-form a,
.pdr-job-lookup a {
color: var(--c-accent-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.custom-job-form a:hover,
.custom-payment-form a:hover,
.pdr-job-lookup a:hover {
color: var(--c-accent-hover);
}
/* "See Terms and Conditions" link (class text-red) */
body .custom-payment-form a.text-red,
body .custom-job-form a.text-red {
color: var(--c-accent-text);
}
/* Grid: same columns as job_form.css:213-227 and 339-347, but stacked on
phones up to 599px (the old stack point was 479px). Only the width changes:
the columns stay floated, because the floated labels and inputs inside
them (job_form.css:533-536) need a floated parent to hold them. */
@media (max-width: 599px) {
body .custom-payment-form .col-sm-3,
body .custom-payment-form .col-sm-4,
body .custom-payment-form .col-sm-6,
body .custom-payment-form .col-sm-8,
body .custom-payment-form .col-sm-9,
body .custom-job-form .custom-payment-form .col-sm-6,
body .custom-job-form .custom-payment-form .col-sm-4 {
width: 100%;
}
body .custom-payment-form {
padding: 4px 0 20px;
}
body .custom-job-form:not(.custom-payment-form) {
padding-left: 8px;
padding-right: 8px;
}
}
/* --------------------------------------------------------------------------
3. Section headings ("1 Your contact details", "Payment details" ...)
Old: pink band, 5px red bar, red text, or a solid red bar (pay pages).
New: navy text on white, a thin divider and a soft blue step number.
-------------------------------------------------------------------------- */
body .custom-job-form #user-info > h2,
body .custom-job-form #recovery-info > h2,
body .custom-job-form .row-block > h2,
body .custom-job-form .custom-payment-form h2,
body .custom-payment-form h2 {
float: left;
width: 100%;
display: block;
background: transparent !important; /* beats job_form.css:79, 264, 449 */
background-color: transparent !important;
color: var(--c-text) !important; /* beats job_form.css:80, 265 */
border: 0 !important; /* beats job_form.css:76, 261 */
border-bottom: 1px solid var(--c-divider) !important;
border-radius: 0 !important;
font-family: var(--font) !important; /* beats job_form.css:82, 267, 452 */
font-size: 20px !important; /* beats job_form.css:75, 260, 453; Total-child/style.css:612 */
font-weight: 600 !important; /* beats job_form.css:83, 268, 454 */
line-height: 32px !important; /* beats Total-child/style.css:613 */
letter-spacing: 0;
text-transform: none;
margin: 28px 0 18px !important; /* beats job_form.css:78, 263, 456 and inline margin-top */
padding: 0 15px 12px !important; /* beats job_form.css:77, 262, 457; Total-child/style.css:614 */
}
body .custom-job-form #user-info > h2:first-of-type,
body .custom-payment-form h2:first-child {
margin-top: 12px !important;
}
body .custom-payment-form h2 span,
body .custom-job-form .custom-payment-form h2 span {
float: left;
display: block;
width: 32px !important; /* beats Total-child/style.css:617 */
height: 32px !important; /* beats Total-child/style.css:618 */
line-height: 32px !important; /* beats Total-child/style.css:619 */
margin: 0 12px 0 0 !important; /* beats Total-child/style.css:761 */
border-radius: 50%;
background: var(--c-accent-container);
color: var(--c-on-accent-container);
font-size: 15px;
font-weight: 600;
text-align: center;
}
body .custom-payment-form h2 small {
display: block;
margin: 2px 0 0 44px;
font-size: 14px;
line-height: 1.45;
font-weight: 400;
color: var(--c-text-2);
}
@media (max-width: 599px) {
body .custom-job-form #user-info > h2,
body .custom-job-form #recovery-info > h2,
body .custom-job-form .row-block > h2,
body .custom-job-form .custom-payment-form h2,
body .custom-payment-form h2 {
font-size: 18px !important;
}
}
/* Step indicator, CSS only. Step 1 forms and the step 2 payment form get a
short "Step x of 2" line with a progress bar. Free quotes finish at step 1. */
body .custom-payment-form.form-step-1::before,
body #payment-info > .custom-payment-form::before {
content: "Step 1 of 2 \2022 Your details";
display: block;
margin: 8px 15px 0;
padding: 0 0 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
color: var(--c-text-2);
background-image: linear-gradient(to right, var(--c-accent) 0, var(--c-accent) 50%, var(--c-border) 50%, var(--c-border) 100%);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 4px;
border-radius: 2px;
}
body #payment-info > .custom-payment-form::before {
content: "Step 2 of 2 \2022 Payment";
background-image: linear-gradient(to right, var(--c-accent) 0, var(--c-accent) 100%);
}
body .custom-payment-form.form-step-1[onsubmit*="approveQuote"]::before {
content: "Step 1 of 2 \2022 Your choices";
}
body .custom-payment-form.form-step-1[onsubmit*="payInvoice"]::before {
content: "Step 1 of 2 \2022 Delivery details";
}
/* --------------------------------------------------------------------------
4. Questions, sub-headings, body text, help text
-------------------------------------------------------------------------- */
body .custom-payment-form h3,
body .custom-payment-form h4,
body .custom-job-form .row-block h3,
body .custom-job-form #recovery-info h3 {
color: var(--c-text);
font-family: var(--font) !important; /* beats job_form.css:235 */
font-weight: 600;
letter-spacing: 0;
}
body .custom-job-form .row-block h3,
body .custom-job-form #recovery-info h3 {
font-size: 18px !important; /* beats job_form.css:234 */
}
body .custom-payment-form h3 { font-size: 18px; line-height: 1.4; margin: 18px 0 10px; }
body .custom-payment-form h4 { font-size: 17px; line-height: 1.45; margin: 16px 0 10px; }
body .custom-payment-form h5 { font-size: 16px; line-height: 1.5; color: var(--c-text); }
body .custom-payment-form h3 small {
font-size: 15px;
font-weight: 500;
color: var(--c-text);
}
body .custom-payment-form p,
body .custom-payment-form li {
font-size: 15px;
line-height: 1.55;
color: var(--c-text);
}
/* Help text and descriptions */
body .custom-payment-form small.note,
body .custom-payment-form .price-options-content p,
body .custom-payment-form .note {
color: var(--c-text-2);
font-size: 14px;
line-height: 1.5;
}
/* "* indicates a required field that must be filled in." */
body .custom-job-form #braintree-form > h4.label-red,
body .custom-job-form > #braintree-form > h4 {
color: var(--c-text-2);
font-size: 14px;
font-weight: 400;
margin: 0 15px 12px;
}
/* .label-red is used for totals, notes and pending steps. None of them are
errors, so it is navy here. Real errors use section 8. */
body .custom-job-form .label-red,
body .custom-payment-form .label-red,
body .custom-job-form .price-options h4 span,
body .custom-payment-form .price-options h4 span {
color: var(--c-text);
}
/* Amount lines: "Amount to be charged including GST ...: $150.00" */
body .custom-payment-form .amount-total,
body .custom-payment-form .amount-grand-total,
body .custom-payment-form .discount-total,
body .custom-payment-form .amount-additional-devices {
color: var(--c-text);
font-weight: 600;
white-space: nowrap;
}
body .custom-payment-form h3 .amount-total,
body .custom-payment-form h4 .amount-grand-total {
color: var(--c-accent-text);
}
/* Notes such as "Please send this device to us ..." and the EFT notes */
body .custom-payment-form h5.label-red,
body .custom-payment-form h4.label-red,
body .custom-payment-form .text-covid-warning strong.label-red {
color: var(--s-warn-fg);
font-weight: 500;
}
body .custom-payment-form .option-bank-transfer h4.label-red:not(.text-center) {
color: var(--c-text); /* "Our bank account details are:" is a heading */
font-weight: 600;
}
body .custom-payment-form .option-bank-transfer h4.label-red.text-center,
body .custom-payment-form .option-cash h4.label-red.text-center {
clear: both; /* FX-THEME review: the tint painted behind the floated column above */
background: var(--s-warn-bg);
border-radius: var(--radius);
padding: 10px 14px;
font-size: 15px;
text-align: left;
}
/* Bank details box (inline grey background) */
body .custom-payment-form p[style*="rgba(200,200,200,0.2)"] {
background-color: var(--c-surface-2) !important; /* beats inline style */
border: 1px solid var(--c-border);
border-radius: var(--radius) !important; /* beats inline style */
padding: 12px 16px !important; /* beats inline style */
}
/* Pay-invoice "If this is not your name or job with us ..." (inline #cb0019) */
body .custom-payment-form h3.note[style*="cb0019"] {
color: var(--s-warn-fg) !important; /* beats inline style, pay-invoice-v3.php:249 */
font-size: 15px !important;
font-weight: 500;
background: var(--s-warn-bg);
border-radius: var(--radius);
padding: 10px 14px;
margin: 12px 0 0;
}
/* Mobile form options Standard / Extreme (inline green and red, mobile.php:812, 827) */
body .custom-payment-form .pay-full label h5[style*="#009933"],
body .custom-payment-form .pay-full label h5[style*="#cb0019"] {
color: var(--c-text) !important; /* beats inline style */
}
/* Required marker: the * tags (colour attribute has
no specificity, so no !important is needed). Future markup: span.req */
body .custom-payment-form font[color="red"],
body .custom-job-form font[color="red"],
body .custom-payment-form .req,
body .custom-job-form .req {
color: var(--c-accent-text);
font-weight: 600;
margin-left: 2px;
}
/* Customer summary tables (approve and pay pages) */
body .custom-payment-form table.tabel,
body .custom-payment-form table.table-bordered {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--c-border) !important; /* beats inline border:0 */
border-radius: var(--radius);
overflow: hidden;
background: var(--c-surface);
margin: 6px 0 4px;
}
body .custom-payment-form table.tabel th,
body .custom-payment-form table.tabel td {
border: 0;
border-bottom: 1px solid var(--c-divider);
padding: 10px 14px;
font-size: 15px;
text-align: left;
vertical-align: top;
}
body .custom-payment-form table.tabel tr:last-child th,
body .custom-payment-form table.tabel tr:last-child td {
border-bottom: 0;
}
body .custom-payment-form table.tabel th {
color: var(--c-text-2);
font-weight: 500;
background: var(--c-surface-2);
}
@media (max-width: 599px) {
body .custom-payment-form table.tabel th { width: 38% !important; } /* beats inline width:200px */
}
/* --------------------------------------------------------------------------
5. Labels and text controls
-------------------------------------------------------------------------- */
body .custom-payment-form .form-group {
padding-top: 6px;
}
body .custom-payment-form .form-group > [class*="col-sm-"] {
margin-bottom: 14px;
}
body .custom-payment-form label {
display: block;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
color: var(--c-text);
margin: 0 0 6px;
}
/* Text-like inputs. Specificity (0,2,2) beats job_form.css (0,2,1) but stays
below the phone box rule in intlTelInput.css (0,3,1), so the flag keeps its
52px padding. */
body .custom-payment-form input[type="text"],
body .custom-payment-form input[type="email"],
body .custom-payment-form input[type="tel"],
body .custom-payment-form input[type="number"],
body .custom-payment-form input[type="password"],
body .custom-payment-form input[type="search"],
body .custom-payment-form input[type="url"],
body .custom-payment-form input:not([type]),
body .custom-payment-form select,
body .custom-payment-form textarea,
body .pdr-job-lookup input[type="text"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-height: var(--pdr-control-h);
height: var(--pdr-control-h);
padding: 0 14px;
margin: 0;
font-family: var(--font);
font-size: var(--pdr-control-fs);
line-height: 1.4;
color: var(--c-text);
background-color: var(--c-surface);
border: 1px solid var(--pdr-control-border);
border-radius: var(--radius);
box-shadow: none;
-webkit-transition: border-color .15s ease, box-shadow .15s ease;
transition: border-color .15s ease, box-shadow .15s ease;
}
body .custom-payment-form textarea {
height: auto;
min-height: 112px;
padding: 12px 14px;
resize: vertical;
}
/* Selects get a chevron (the native arrow is removed above for a consistent look) */
body .custom-payment-form select {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C607B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
cursor: pointer;
}
body .custom-payment-form select::-ms-expand { display: none; }
/* Placeholder */
body .custom-payment-form ::-webkit-input-placeholder { color: var(--c-text-2); opacity: 1; }
body .custom-payment-form ::-moz-placeholder { color: var(--c-text-2); opacity: 1; }
body .custom-payment-form :-ms-input-placeholder { color: var(--c-text-2); }
body .custom-payment-form ::placeholder { color: var(--c-text-2); opacity: 1; }
/* Hover and focus: accent border and a soft accent ring */
body .custom-payment-form input[type="text"]:hover,
body .custom-payment-form input[type="email"]:hover,
body .custom-payment-form input[type="tel"]:hover,
body .custom-payment-form input[type="number"]:hover,
body .custom-payment-form input:not([type]):hover,
body .custom-payment-form select:hover,
body .custom-payment-form textarea:hover {
border-color: var(--c-text-2);
}
body .custom-payment-form input[type="text"]:focus,
body .custom-payment-form input[type="email"]:focus,
body .custom-payment-form input[type="tel"]:focus,
body .custom-payment-form input[type="number"]:focus,
body .custom-payment-form input[type="password"]:focus,
body .custom-payment-form input:not([type]):focus,
body .custom-payment-form select:focus,
body .custom-payment-form textarea:focus,
body .pdr-job-lookup input[type="text"]:focus {
border-color: var(--c-accent) !important; /* beats inline border on #pdr-job-input */
box-shadow: var(--pdr-focus-ring);
outline: 2px solid transparent; /* still visible in Windows high contrast */
outline-offset: 0;
}
/* Phone box (intl-tel-input): keep the flag space and its inline-block
display (intlTelInput.css), which keeps it below the floated label. */
body .custom-payment-form .intl-tel-input .selected-flag {
border-radius: var(--radius) 0 0 var(--radius);
}
/* Read-only look for the prefilled job number and surname
(approve-quote-v3.php:323, 327 use inline pointer-events:none; background:#eee) */
body .custom-payment-form input[style*="pointer-events: none"],
body .custom-payment-form input[readonly] {
background-color: var(--c-surface-2) !important; /* beats inline background */
color: var(--c-text-2);
border-style: dashed;
cursor: default;
}
/* Number and code fields: keep the text readable on small phones */
body .custom-payment-form input[name="transaction[billing][postal_code]"],
body .custom-payment-form input[name="transaction[shipping_address_completed_job][postcode]"],
body .custom-payment-form input[name="transaction[custom_fields][discount_code]"] {
letter-spacing: .02em;
}
/* --------------------------------------------------------------------------
6. Choice cards: radios
The pages already put an invisible radio over each whole option
(job_form.css:104-116, 276-292, 367-379, 734-743). Here that same radio
becomes the visible card outline. It stays on top, so a tap anywhere on
the card picks it, exactly as now. Text shows through (transparent fill).
-------------------------------------------------------------------------- */
body .custom-payment-form .price-options input[type="radio"],
body .custom-job-form .price-options input[type="radio"],
body .custom-payment-form .payment-options input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
opacity: 1;
position: absolute;
z-index: 11;
top: 0;
left: 0;
width: 100% !important; /* beats job_form.css:740 (150px) */
height: 100% !important; /* beats job_form.css:736 (44px) */
min-width: 0;
min-height: 48px;
margin: 0;
padding: 0;
background: transparent;
background-color: transparent;
border: 1px solid var(--pdr-control-border);
border-radius: var(--radius);
box-shadow: none;
cursor: pointer;
-webkit-transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body .custom-payment-form .price-options input[type="radio"]:hover,
body .custom-job-form .price-options input[type="radio"]:hover,
body .custom-payment-form .payment-options input[type="radio"]:hover {
border-color: var(--c-accent);
}
body .custom-payment-form .price-options input[type="radio"]:checked,
body .custom-job-form .price-options input[type="radio"]:checked,
body .custom-payment-form .payment-options input[type="radio"]:checked {
border-color: var(--c-accent);
background-color: rgba(61, 111, 216, .06);
box-shadow: inset 0 0 0 1px var(--c-accent);
}
body .custom-payment-form .price-options input[type="radio"]:focus,
body .custom-job-form .price-options input[type="radio"]:focus,
body .custom-payment-form .payment-options input[type="radio"]:focus {
outline: 2px solid transparent;
box-shadow: var(--pdr-focus-ring-offset);
}
body .custom-payment-form .price-options input[type="radio"]:checked:focus,
body .custom-job-form .price-options input[type="radio"]:checked:focus,
body .custom-payment-form .payment-options input[type="radio"]:checked:focus {
box-shadow: inset 0 0 0 1px var(--c-accent), var(--pdr-focus-ring-offset);
}
/* Mouse and touch: no ring (browsers that know :focus-visible; others keep it) */
body .custom-payment-form .price-options input[type="radio"]:focus:not(:focus-visible),
body .custom-job-form .price-options input[type="radio"]:focus:not(:focus-visible),
body .custom-payment-form .payment-options input[type="radio"]:focus:not(:focus-visible) {
box-shadow: none;
}
body .custom-payment-form .price-options input[type="radio"]:checked:focus:not(:focus-visible),
body .custom-job-form .price-options input[type="radio"]:checked:focus:not(:focus-visible),
body .custom-payment-form .payment-options input[type="radio"]:checked:focus:not(:focus-visible) {
box-shadow: inset 0 0 0 1px var(--c-accent);
}
body .custom-payment-form .payment-options input[type="radio"]:disabled {
cursor: not-allowed;
border-style: dashed;
background-color: rgba(92, 96, 123, .08); /* see-through: the radio sits over its label (z-index 11 over 9) */
}
/* 6a. Yes/No and option rows (.pay-full): approve, decline, pay-invoice,
data destruction, mobile. The row is the card. */
body .custom-payment-form .pay-full {
position: relative;
display: block;
min-height: 48px;
margin: 0 0 10px;
padding: 12px 16px 12px 52px;
}
body .custom-payment-form .pay-full > label {
position: static;
display: block;
float: none;
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 400;
color: var(--c-text);
z-index: auto;
}
body .custom-payment-form .pay-full > label h4,
body .custom-payment-form .pay-full > label h5 {
margin: 0;
color: var(--c-text);
}
body .custom-payment-form .pay-full > label h4 { font-size: 17px; font-weight: 600; line-height: 1.45; }
body .custom-payment-form .pay-full > label h5 { font-size: 16px; line-height: 1.5; }
body .custom-payment-form .pay-full > p,
body .custom-payment-form .pay-full > h5.label-red {
margin: 6px 0 0;
font-size: 14px;
}
body .custom-payment-form .pay-full > br { display: none; }
/* Mobile "Data Extraction Options" (mobile.php:432-580): each option div is
itself the positioned box, so it becomes the card. Its own inline
display:none/block (shown by brand) is left alone. */
body .custom-payment-form .price-options.data-extraction-options {
position: relative;
min-height: 48px;
margin: 0 0 10px;
padding: 12px 16px 12px 52px;
}
body .custom-payment-form .price-options.data-extraction-options > label {
float: none;
margin: 0;
padding: 0;
}
body .custom-payment-form .price-options.data-extraction-options > br { display: none; }
body .custom-payment-form .price-options.data-extraction-options > p {
margin: 6px 0 0;
padding: 0 !important; /* beats inline padding-bottom:12px */
font-size: 14px;
color: var(--c-text-2);
}
body .custom-payment-form .price-options.data-extraction-options > .check {
left: 16px;
top: 13px !important; /* beats inline style="top:10px;" */
}
/* Text box inside an option row ("Please let us know your reason here..")
sits above the overlay so it can be typed in. */
body .custom-payment-form .pay-full > input[type="text"] {
position: relative;
z-index: 12;
}
.custom-payment-form .feedback-something-else .pay-full {
padding-left: 0;
min-height: 0;
}
/* 6b. Two-column options on the job forms ("Free assessment and quote" /
"$150 Urgent quote") */
body .custom-payment-form .price-options > .col-sm-6,
body .custom-payment-form .price-options > .col-sm-6.price-option-urgent-quote-fee {
position: relative;
padding: 14px 18px 14px 58px;
margin-bottom: 12px;
min-height: 72px;
}
body .custom-payment-form .price-options > .col-sm-6 > input[type="radio"],
body .custom-payment-form .price-options .price-option-urgent-quote-fee-inner > input[type="radio"] {
left: 6px;
width: calc(100% - 12px) !important; /* beats job_form.css width rules; leaves a gap between cards */
}
body .custom-payment-form .price-options > .col-sm-6 > label,
body .custom-payment-form .price-options .price-option-urgent-quote-fee-inner > label {
float: none;
margin: 0;
padding: 0;
font-size: 16px;
}
body .custom-payment-form .price-options > .col-sm-6 h4,
body .custom-payment-form .price-options .price-option-urgent-quote-fee-inner h4 {
margin: 0;
font-size: 17px;
font-weight: 600;
line-height: 1.45;
color: var(--c-text);
}
body .custom-payment-form .price-options-content {
float: none;
clear: both;
display: flow-root; /* holds floats like overflow:hidden, without clipping focus rings */
}
body .custom-payment-form .price-options-content > p {
float: none;
margin: 6px 0 0 !important; /* beats job_form.css:160, 422 */
}
body .custom-payment-form .price-options .text-covid-warning {
float: none !important; /* beats inline float:left (main.js:9) */
margin-top: 8px;
}
/* The radio dot (.check). Old: 3px black ring with a pure red dot. */
body .custom-payment-form .price-options .check,
body .custom-job-form .price-options .check,
body .custom-payment-form .payment-options .check {
position: absolute;
z-index: 5;
width: 22px;
height: 22px;
border: 2px solid var(--c-text-2);
border-radius: 50%;
background: var(--c-surface);
-webkit-transition: border-color .15s ease;
transition: border-color .15s ease;
}
body .custom-payment-form .pay-full > .check {
left: 16px;
top: 13px !important; /* beats inline style="top:10px;" */
}
body .custom-payment-form .price-options > .col-sm-6 > .check,
body .custom-payment-form .price-options .price-option-urgent-quote-fee-inner > .check {
left: 22px;
top: 16px;
}
body .custom-payment-form .price-options .check::before,
body .custom-job-form .price-options .check::before,
body .custom-payment-form .payment-options .check::before {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 10px;
height: 10px;
margin: 0;
border-radius: 50%;
background: transparent;
}
body .custom-payment-form .price-options input[type="radio"]:checked ~ .check,
body .custom-job-form .price-options input[type="radio"]:checked ~ .check,
body .custom-payment-form .payment-options input[type="radio"]:checked ~ .check {
border-color: var(--c-accent);
}
body .custom-payment-form .price-options input[type="radio"]:checked ~ .check::before,
body .custom-job-form .price-options input[type="radio"]:checked ~ .check::before,
body .custom-payment-form .payment-options input[type="radio"]:checked ~ .check::before,
body .custom-job-form .custom-payment-form .pay-full input[type="radio"]:checked ~ .check::before {
background: var(--c-accent);
width: 10px;
height: 10px;
left: 4px;
top: 4px;
}
/* Checked text a touch stronger */
body .custom-payment-form .price-options input[type="radio"]:checked ~ label h5 {
font-weight: 500 !important; /* beats inline font-weight:normal */
}
/* 6c. Approve / mobile service tiers. Old: green "Not Urgent", blue "Urgent",
red "Super Urgent!" text. New: CRM tier tags (tint, 4px tier bar, navy
text). Emergency stays red, Priority blue, Economy green. */
body .custom-payment-form .price-options .bordered,
body .custom-job-form .price-options .bordered {
border: 0;
padding: 0;
min-height: 0 !important; /* beats inline min-height */
background: transparent;
}
body .custom-payment-form .price-options .col-sm-4 > h3,
body .custom-job-form #recovery-info .price-options .col-sm-4 > h3,
body .custom-job-form #recovery-info .price-options .col-sm-4 > h3.green,
body .custom-job-form #recovery-info .price-options .col-sm-4 > h3.blue {
display: block;
float: none;
width: auto;
margin: 0 0 8px !important; /* beats .no-margin, job_form.css:246 */
padding: 6px 12px 6px 16px !important; /* beats .no-padding, job_form.css:243 */
border-radius: var(--radius-chip);
font-size: 13px !important; /* beats job_form.css:234 */
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left !important; /* beats .text-center, job_form.css:240 */
color: var(--c-text) !important; /* beats .green/.blue, job_form.css:228-229 */
background: var(--tier-emergency-bg);
box-shadow: inset 4px 0 0 var(--tier-emergency);
}
body .custom-payment-form .price-options .col-sm-4 > h3.green,
body .custom-job-form #recovery-info .price-options .col-sm-4 > h3.green {
background: var(--tier-economy-bg);
box-shadow: inset 4px 0 0 var(--tier-economy);
}
body .custom-payment-form .price-options .col-sm-4 > h3.blue,
body .custom-job-form #recovery-info .price-options .col-sm-4 > h3.blue {
background: var(--tier-priority-bg);
box-shadow: inset 4px 0 0 var(--tier-priority);
}
/* Tier card outline keeps a tier hint on the left when picked */
body .custom-payment-form .price-options .col-sm-4 input.economy-price:checked { box-shadow: inset 4px 0 0 var(--tier-economy), inset 0 0 0 1px var(--c-accent); }
body .custom-payment-form .price-options .col-sm-4 input.priority-price:checked { box-shadow: inset 4px 0 0 var(--tier-priority), inset 0 0 0 1px var(--c-accent); }
body .custom-payment-form .price-options .col-sm-4 input.emergency-price:checked { box-shadow: inset 4px 0 0 var(--tier-emergency), inset 0 0 0 1px var(--c-accent); }
body .custom-payment-form .price-options .col-sm-4 .pay-full {
min-height: 0;
}
body .custom-job-form .price-options .col-sm-4.first,
body .custom-job-form .price-options .col-sm-4.last {
padding-left: 15px;
padding-right: 15px;
}
/* Three tiers side by side need about 280px each; below 1024px they stack. */
@media (max-width: 1023px) {
body .custom-payment-form .price-options .col-sm-4 {
width: 100%;
}
}
/* Attempt-fee breakdown: inline green, blue and red labels (functions.php:4130-4144) */
body .custom-payment-form .container-attempt-fee-calculations strong[style*="009933"],
body .custom-payment-form .container-attempt-fee-calculations strong[style*="0066cc"],
body .custom-payment-form .container-attempt-fee-calculations strong[style*="cb0019"] {
color: var(--c-text) !important; /* beats inline style */
}
body .custom-payment-form .container-attempt-fee-calculations strong[style*="009933"]::before,
body .custom-payment-form .container-attempt-fee-calculations strong[style*="0066cc"]::before,
body .custom-payment-form .container-attempt-fee-calculations h5 strong[style*="cb0019"]::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 8px;
border-radius: 50%;
vertical-align: 1px;
background: var(--tier-emergency);
}
body .custom-payment-form .container-attempt-fee-calculations strong[style*="009933"]::before { background: var(--tier-economy); }
body .custom-payment-form .container-attempt-fee-calculations strong[style*="0066cc"]::before { background: var(--tier-priority); }
body .custom-payment-form .container-attempt-fee-calculations .pay-full {
padding-left: 16px;
min-height: 0;
border: 0;
}
/* 6d. Payment method choice (Pay Online / EFT / pay at office) */
body .custom-payment-form .payment-options {
position: relative;
float: left;
padding: 0 6px;
margin: 0 0 10px;
cursor: pointer;
}
body .custom-payment-form .payment-options > input[type="radio"] {
left: 6px !important; /* beats job_form.css:737 */
top: 0 !important; /* beats job_form.css:742 */
width: calc(100% - 12px) !important; /* beats job_form.css:740 */
}
body .custom-payment-form .payment-options label,
body .custom-payment-form .payment-options:hover label {
display: block;
float: none;
width: auto !important; /* beats job_form.css:712 */
min-height: 48px;
margin: 0;
padding: 13px 14px 13px 48px;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--c-text); /* old hover turned it red, job_form.css:776-778 */
word-wrap: break-word;
overflow-wrap: break-word; /* "Card(Preferred/Recommended)" has no space: breaks only when it cannot fit */
word-break: normal;
}
body .custom-payment-form .payment-options .check {
left: 20px;
top: 13px;
}
body .custom-payment-form .payment-options input[type="radio"]:disabled + label {
color: var(--c-text-2);
}
/* --------------------------------------------------------------------------
7. Checkboxes (terms, consents, "Tell us what data you are looking for")
Custom 22px box. Safari 13.4 cannot resize a native checkbox.
-------------------------------------------------------------------------- */
body .custom-payment-form input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
float: none !important; /* beats inline float:left on the terms boxes */
width: 24px !important; /* beats inline width:auto; 24px = WCAG 2.2 target minimum */
height: 24px !important; /* beats inline height:auto */
min-height: 0;
margin: 0 10px 0 0 !important; /* beats inline margin */
padding: 0 !important;
vertical-align: -6px;
border: 2px solid var(--c-text-2);
border-radius: 5px;
background-color: var(--c-surface);
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
cursor: pointer;
flex-shrink: 0;
}
body .custom-payment-form input[type="checkbox"]:checked {
border-color: var(--c-accent);
background-color: var(--c-accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body .custom-payment-form input[type="checkbox"]:focus {
outline: 2px solid transparent;
box-shadow: var(--pdr-focus-ring-offset);
}
body .custom-payment-form input[type="checkbox"]:focus:not(:focus-visible) {
box-shadow: none;
}
/* The terms row and other consent rows */
body .custom-payment-form .free-quote-terms .col-sm-12,
body .custom-payment-form .option-card .form-group .col-sm-12,
body .custom-payment-form .form-group.option-card .col-sm-12 {
font-size: 15px;
line-height: 1.5;
}
/* "Tell us what data ..." list: each line is a 44px row */
body .custom-payment-form ul.no-margin.no-padding li {
display: block;
min-height: 44px;
padding: 10px 0;
font-size: 15px;
line-height: 1.5;
border-bottom: 1px solid var(--c-divider);
}
/* --------------------------------------------------------------------------
8. Errors (always text plus an icon, never colour alone) and success
--c-danger #d93025 is used only here.
-------------------------------------------------------------------------- */
/* Field with an error. .border-error: job_form.css:920-922 (!important) */
body .custom-payment-form .border-error,
body .custom-payment-form [aria-invalid="true"],
body .custom-payment-form input.LV_invalid_field,
body .custom-payment-form textarea.LV_invalid_field,
body .custom-payment-form select.LV_invalid_field {
border: 2px solid var(--c-danger) !important; /* beats job_form.css:921, livevalidation_css.css:41 */
border-radius: var(--radius) !important; /* beats livevalidation_css.css:44 */
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23d93025'/%3E%3Cpath d='M12 7v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px 18px;
}
body .custom-payment-form textarea.border-error,
body .custom-payment-form textarea[aria-invalid="true"] {
background-position: right 12px top 12px;
}
body .custom-payment-form select.border-error {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93025' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Error text under a field. .pdr-field-error is the element the field fixes
add (FORM-FIELD-FIXES.md). The other selectors are messages the current
JavaScript already writes. */
body .custom-payment-form .pdr-field-error,
body .custom-payment-form .tooltip-files-type,
body .custom-payment-form .suburb-state-hint,
body .custom-payment-form .validation-error-msg,
body .custom-payment-form .error-invalid-mobile-number,
body .custom-payment-form .LV_validation_message.LV_invalid,
body .custom-payment-form .error_msg,
body .custom-payment-form .pdr-phone-err,
body .custom-payment-form .devices-price-options-err,
body .pdr-job-lookup .pdr-job-msg,
body .pdr-job-lookup .pdr-job-msg-server {
display: block;
clear: both; /* starts below the floated field (job_form.css:533-536) */
position: relative;
max-width: none;
margin: 6px 0 0;
padding: 0 0 0 24px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--c-danger) !important; /* beats inline colours: main.js:548 (#cb0019), :1146 (red), pay-invoice-v3.php:200-208 */
font-size: 14px !important; /* beats inline font-size:13px (main.js:548), livevalidation_css.css:13 */
font-weight: 500;
line-height: 1.45;
text-align: left;
}
body .custom-payment-form .pdr-field-error::before,
body .custom-payment-form .tooltip-files-type::before,
body .custom-payment-form .suburb-state-hint::before,
body .custom-payment-form .validation-error-msg::before,
body .custom-payment-form .error-invalid-mobile-number::before,
body .custom-payment-form .LV_validation_message.LV_invalid::before,
body .custom-payment-form .error_msg::before,
body .custom-payment-form .pdr-phone-err::before,
body .custom-payment-form .devices-price-options-err::before,
body .pdr-job-lookup .pdr-job-msg::before,
body .pdr-job-lookup .pdr-job-msg-server::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 17px;
height: 17px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23d93025'/%3E%3Cpath d='M12 7v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.4' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 17px 17px;
}
/* The "select at least one" hint keeps its own show/hide: its inline
style="display:none" (hdd.php:297) still wins over display:block above. */
/* Error boxes: .label-error (Total-child/style.css:644-650), written by
main.js into #response-errors, and the Stripe #payment-message. */
body .custom-job-form .label-error,
body .custom-payment-form .label-error,
body #braintree-form .label-error,
body #payment-info .label-error {
position: relative;
margin: 0 0 16px;
padding: 12px 14px 12px 44px;
border: 0;
border-left: 4px solid var(--c-danger);
border-radius: var(--radius);
background: var(--s-alert-bg);
color: var(--s-alert-fg);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
body .custom-job-form .label-error::before,
body .custom-payment-form .label-error::before,
body #braintree-form .label-error::before,
body #payment-info .label-error::before {
content: "";
position: absolute;
left: 14px;
top: 13px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23d93025'/%3E%3Cpath d='M12 7v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.4' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
/* Stripe message box. main.js showMessage() sets the colour inline:
#cb0019 (error) is serialised as rgb(203, 0, 25), #0faf1cff as rgb(15, 175, 28). */
body .custom-payment-form #payment-message {
position: relative;
clear: both; /* FX-THEME review: the row above holds only floats; without this the box covered Pay Now and Back */
float: none !important; /* beats inline float:left */
margin: 12px 0 !important; /* beats inline margin */
padding: 12px 14px 12px 44px !important; /* beats inline padding */
border: 0 !important; /* beats inline border:1px solid */
border-left: 4px solid var(--c-danger) !important;
border-radius: var(--radius) !important;
background: var(--s-alert-bg);
color: var(--s-alert-fg) !important; /* beats the inline colour main.js:4527 */
font-size: 15px;
font-weight: 500 !important;
}
body .custom-payment-form #payment-message::before {
content: "";
position: absolute;
left: 14px;
top: 13px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23d93025'/%3E%3Cpath d='M12 7v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.4' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
body .custom-payment-form #payment-message[style*="rgb(15, 175, 28)"] {
border-left-color: var(--s-ok-dot) !important;
background: var(--s-ok-bg);
color: var(--s-ok-fg) !important;
}
body .custom-payment-form #payment-message[style*="rgb(15, 175, 28)"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231e8e3e'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Discount status line (inline colours from main.js) */
body .custom-payment-form #discount_check_status span[style*="cb0019"] {
color: var(--c-danger) !important; /* beats inline #cb0019 */
}
body .custom-payment-form #discount_check_status span[style*="E86300"],
body .custom-payment-form #discount_check_status span[style*="e86300"] {
color: var(--s-warn-fg) !important; /* beats inline #E86300 */
}
/* Success */
body .custom-job-form .label-success,
body .custom-payment-form .label-success,
body .custom-payment-form .alert-success {
position: relative;
margin: 0 0 16px;
padding: 12px 14px 12px 44px;
border: 0;
border-left: 4px solid var(--s-ok-dot);
border-radius: var(--radius);
background: var(--s-ok-bg);
color: var(--s-ok-fg);
font-size: 15px;
font-weight: 500;
}
body .custom-job-form .label-success::before,
body .custom-payment-form .label-success::before,
body .custom-payment-form .alert-success::before {
content: "";
position: absolute;
left: 14px;
top: 13px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231e8e3e'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
body .custom-payment-form .LV_valid_field {
border-color: var(--s-ok-dot) !important; /* beats livevalidation_css.css:28 */
border-radius: var(--radius) !important;
}
/* Warnings */
body .custom-payment-form .alert-warning {
border: 0;
border-left: 4px solid var(--s-warn-dot);
border-radius: var(--radius);
background: var(--s-warn-bg);
color: var(--s-warn-fg);
}
/* Email typo hint "Did you mean ...?" (mu-plugins/pdr-email-guard.js:17, inline #b00).
It is a suggestion, not an error: info colours. */
body .custom-payment-form .pdr-eg-hint {
color: var(--s-info-fg) !important; /* beats inline color:#b00 */
font-size: 14px !important;
margin-top: 6px !important;
}
/* --------------------------------------------------------------------------
9. Buttons
Primary: CRM accent fill. Secondary: white with a navy outline.
Old: red #ca0014, black, green #279312 with 3.8:1 text.
-------------------------------------------------------------------------- */
body .custom-job-form #btnSubmit,
body .custom-payment-form #btnSubmit,
body .custom-job-form .btn-red-custom,
body .custom-payment-form .btn-submit-stripe-v3,
body .custom-payment-form .btn-approve-bank-transfer,
body .custom-payment-form .partnership_submission,
body .custom-payment-form input[type="submit"],
body .pdr-job-lookup button[type="submit"] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
min-height: var(--pdr-control-h);
height: auto;
padding: 0 24px;
border: 0 !important; /* beats inline border on the lookup button */
border-radius: var(--radius) !important; /* beats inline border-radius:4px / 3px */
background: var(--c-accent) !important; /* beats inline #279312 (approve-quote-v3.php:443, 574, 599; pay-invoice-v3.php:546) and #cb0019 (pay-invoice-v3.php:207) */
background-color: var(--c-accent) !important;
color: #ffffff !important; /* beats inline #f9f9f9 */
font-family: var(--font);
font-size: 16px;
font-weight: 600;
line-height: var(--pdr-control-h);
text-align: center;
text-decoration: none;
text-shadow: none;
letter-spacing: 0;
white-space: nowrap;
width: auto; /* job_form.css:179; .form-group input (job_form.css:348) would make it 100% */
box-shadow: none;
cursor: pointer;
-webkit-transition: background-color .15s ease, box-shadow .15s ease;
transition: background-color .15s ease, box-shadow .15s ease;
}
body .custom-payment-form .btn-approve-bank-transfer {
padding: 0 24px !important; /* beats inline padding 8px 24px */
line-height: var(--pdr-control-h);
}
body .custom-payment-form .btn-approve-bank-transfer strong {
font-weight: 600;
color: #ffffff;
}
body .custom-job-form #btnSubmit:hover,
body .custom-payment-form #btnSubmit:hover,
body .custom-job-form .btn-red-custom:hover,
body .custom-payment-form .btn-submit-stripe-v3:hover,
body .custom-payment-form .btn-approve-bank-transfer:hover,
body .custom-payment-form .partnership_submission:hover,
body .custom-payment-form input[type="submit"]:hover,
body .pdr-job-lookup button[type="submit"]:hover {
background: var(--c-accent-hover) !important;
background-color: var(--c-accent-hover) !important;
color: #ffffff !important;
}
body .custom-job-form #btnSubmit:focus,
body .custom-payment-form #btnSubmit:focus,
body .custom-payment-form .btn-submit-stripe-v3:focus,
body .custom-payment-form .btn-approve-bank-transfer:focus,
body .custom-payment-form input[type="submit"]:focus,
body .pdr-job-lookup button[type="submit"]:focus {
outline: 2px solid transparent;
box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-accent);
}
body .custom-job-form #btnSubmit:disabled,
body .custom-payment-form #btnSubmit:disabled,
body .custom-payment-form .btn-submit-stripe-v3:disabled,
body .custom-payment-form input[type="submit"][style*="pointer-events: none"] {
opacity: .6;
cursor: progress;
}
/* Secondary: Back, Apply */
body .custom-job-form .btn-back,
body .custom-payment-form .btn-back,
body .custom-job-form [name="apply_discount"],
body .custom-payment-form [name="apply_discount"],
body .custom-payment-form .input-apple-lockdown-files {
display: inline-block;
min-height: var(--pdr-control-h);
line-height: calc(var(--pdr-control-h) - 2px) !important; /* beats inline line-height:24px on Apply */
padding: 0 22px !important; /* beats inline padding on Back and Apply */
margin-top: 10px;
border: 1px solid var(--c-text) !important;
border-radius: var(--radius) !important;
background: var(--c-surface) !important; /* beats job_form.css:313, :680, :715 */
color: var(--c-text) !important;
font-family: var(--font) !important; /* beats job_form.css:312 */
font-size: 16px !important; /* beats job_form.css:309 (20px) */
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
opacity: 1;
}
body .custom-job-form .btn-back:hover,
body .custom-payment-form .btn-back:hover,
body .custom-job-form [name="apply_discount"]:hover,
body .custom-payment-form [name="apply_discount"]:hover {
background: var(--c-accent-container) !important;
color: var(--c-on-accent-container) !important;
border-color: var(--c-accent) !important;
opacity: 1;
}
body .custom-job-form .btn-back:focus,
body .custom-payment-form .btn-back:focus,
body .custom-payment-form [name="apply_discount"]:focus {
outline: 2px solid transparent;
box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-accent);
}
@media (max-width: 599px) {
/* Full-width buttons on phones. Pay Now carries an inline
"margin-right: 15px !important" (approve-quote-v3.php:443,
pay-invoice-v3.php:546), which no stylesheet can beat, so it gets a
width that leaves room for that margin. */
body .custom-payment-form #btnSubmit,
body .custom-payment-form .btn-approve-bank-transfer,
body .custom-payment-form input[type="submit"] {
width: 100%;
}
body .custom-payment-form .btn-submit-stripe-v3 {
width: calc(100% - 15px);
}
body .custom-payment-form .btn-back {
width: 100%;
margin-left: 0 !important; /* beats inline margin-left:12px (approve-quote-v3.php:577, 602) */
margin-right: 0 !important; /* beats inline margin-right on the approve Back links */
}
}
/* Discount box. Old: solid red panel rgb(194,2,1) inline. New: soft grey panel. */
body .custom-payment-form .discount-area {
background: var(--c-surface-2) !important; /* beats inline background (hdd.php:384, functions.php:4161, 4185, 4640) */
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: 16px !important; /* beats inline padding:20px */
}
body .custom-payment-form .discount-area [name="apply_discount"] {
width: 100% !important;
margin: 10px 0 0 !important; /* beats inline margin:20px 0 0 */
}
/* --------------------------------------------------------------------------
10. Card fields (Stripe). The Payment Element look is set in JavaScript
through the appearance API (see FORMS-THEME-SPEC.md section 13).
Here only the boxes that hold them.
-------------------------------------------------------------------------- */
body .custom-payment-form #card-element {
min-height: var(--pdr-control-h);
padding: 13px 14px !important; /* beats inline padding:10px (hdd.php:513) */
border: 1px solid var(--pdr-control-border) !important;/* beats inline border #ccc */
border-radius: var(--radius) !important; /* beats inline 6px */
background: var(--c-surface);
}
body .custom-payment-form #card-element.StripeElement--focus {
border-color: var(--c-accent) !important;
box-shadow: var(--pdr-focus-ring);
}
body .custom-payment-form #payment-element {
margin: 4px 0 8px;
}
body .custom-payment-form #payment-request-button.hidden {
display: none;
}
/* "Loading payment options..." (inline GIF 50px) becomes a CSS spinner */
body .custom-payment-form #payment-loader {
color: var(--c-text-2);
}
body .custom-payment-form #payment-loader img,
body .custom-payment-form .ajax-loader > img,
body .custom-payment-form .loader-content > img {
display: block;
width: 40px !important; /* beats inline width:50px */
height: 40px !important; /* beats inline height:50px */
margin: 0 auto 12px;
padding: 0;
border: 4px solid var(--c-accent-container);
border-top-color: var(--c-accent);
border-radius: 50%;
object-fit: none;
object-position: -999px -999px; /* hides the old GIF inside the ring */
-webkit-animation: pdr-spin .8s linear infinite;
animation: pdr-spin .8s linear infinite;
}
/* --------------------------------------------------------------------------
11. Loading overlay and the "Processing" steps
Old: black scrim, GIF, and every waiting step in red with a "!" icon.
New: navy scrim, white card, spinner. Waiting = grey circle,
done = green tick. Red appears only if something really fails.
-------------------------------------------------------------------------- */
body .custom-payment-form .ajax-loader {
background: rgba(255, 255, 255, .78);
border-radius: var(--radius);
}
body .custom-payment-form .ajax-loader > img {
margin-top: 20%;
}
body .custom-payment-form .ajax-loader h3.grey,
body .custom-payment-form .loader-content h3.grey {
color: var(--c-text);
font-size: 18px;
font-weight: 600;
}
body .custom-payment-form .ajax-loader-final {
background: rgba(23, 43, 76, .55);
}
body .custom-payment-form .ajax-loader-final .loader-content {
max-width: 560px;
margin: 0 auto; /* the 16px side gutter is on the overlay, section 15f */
width: auto;
box-sizing: border-box;
padding: 32px 28px;
background: var(--c-surface);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
text-align: left;
}
body .custom-payment-form .ajax-loader-final .loader-content > img { margin: 0 0 16px; }
body .custom-payment-form .ajax-loader-final .loader-content h4.label-red {
color: var(--s-warn-fg);
background: var(--s-warn-bg);
border-radius: var(--radius);
padding: 10px 14px;
font-size: 15px;
font-weight: 500;
}
body .custom-payment-form .response-steps ul {
margin: 8px 0 0;
padding: 0;
list-style: none;
}
body .custom-payment-form .response-steps li {
position: relative;
padding: 8px 0 8px 30px;
font-size: 15px;
line-height: 1.5;
border-bottom: 1px solid var(--c-divider);
}
body .custom-payment-form .response-steps li:last-child { border-bottom: 0; }
body .custom-payment-form .response-steps li .fa {
position: absolute;
left: 2px;
top: 11px;
width: 18px;
font-size: 18px;
text-align: center;
}
/* Waiting steps (class label-red): grey text, empty circle icon (FA 4 \f10c) */
body .custom-payment-form .response-steps li.label-red {
color: var(--c-text-2);
}
body .custom-payment-form .response-steps li.label-red .fa-exclamation-circle::before {
content: "\f10c";
}
body .custom-payment-form .response-steps li.label-red .fa {
color: var(--pdr-control-border); /* 3.8:1; --c-text-3 was 2.0:1 */
}
/* Done steps (class green, job_form.css:228 uses !important) */
body .custom-payment-form .response-steps li.green {
color: var(--s-ok-fg) !important; /* beats .green !important */
}
body .custom-payment-form .response-steps li.green .fa {
color: var(--s-ok-dot);
}
body .custom-payment-form .response-steps .blur {
opacity: 1; /* old .45 fade (job_form.css:705-707) made text 2.6:1 */
}
/* Small step spinner (the 15px GIF next to the active step) */
body .custom-payment-form .response-steps li img.loader {
display: inline-block;
width: 14px !important; /* beats inline width:15px */
height: 14px;
margin-left: 6px;
vertical-align: -2px;
border: 2px solid var(--c-accent-container);
border-top-color: var(--c-accent);
border-radius: 50%;
object-fit: none;
object-position: -999px -999px;
-webkit-animation: pdr-spin .8s linear infinite;
animation: pdr-spin .8s linear infinite;
}
body .custom-payment-form .response-steps .blur .loader { display: none; }
/* Job number shown when it is created */
body .custom-payment-form .response-steps li strong.label-red {
color: var(--c-accent-text);
font-weight: 600;
}
/* --------------------------------------------------------------------------
12. Page-specific pieces
-------------------------------------------------------------------------- */
/* Decline page: "Before you go..." (inline red border and heading,
approve-quote-v3.php:245, 247) */
body .custom-job-form .offer-decline-quote {
background: transparent !important; /* beats inline #f1f1f1 */
}
body .custom-job-form .before-you-go-wrapper {
border: 1px solid var(--c-border) !important; /* beats inline rgb(204 0 0) border */
border-radius: var(--radius) !important;
background: var(--c-surface) !important;
box-shadow: inset 4px 0 0 var(--c-accent), var(--shadow-1);
padding: 20px 22px !important;
color: var(--c-text);
}
body .custom-job-form .before-you-go-wrapper h2 {
color: var(--c-text) !important; /* beats inline color:#cc0000 */
font-family: var(--font);
font-size: 20px;
font-weight: 600;
margin: 0 0 10px !important;
}
body .custom-job-form .before-you-go-wrapper h4 {
font-family: var(--font);
font-size: 16px;
font-weight: 600;
color: var(--c-text);
margin-bottom: 2px;
}
/* Pay-invoice: saved delivery address box (inline #e2dddd) */
body .custom-payment-form .delivery-type-self div[style*="#e2dddd"] {
background: var(--c-surface-2) !important; /* beats inline background */
border: 1px solid var(--c-border);
border-radius: var(--radius) !important;
color: var(--c-text);
padding: 12px 16px !important;
}
/* Decline: "For example" address block */
body .custom-payment-form .paid-delivery-content pre {
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: var(--radius);
color: var(--c-text);
font-family: var(--font);
font-size: 14px;
white-space: normal;
}
/* /pay-invoice/ job number lookup (all inline styles, pay-invoice-v3.php:194-211) */
body .pdr-job-lookup {
background: var(--c-surface) !important; /* beats inline #f7f7f7 */
border: 1px solid var(--c-border);
border-radius: var(--radius) !important;
box-shadow: var(--shadow-1);
color: var(--c-text);
}
body .pdr-job-lookup h2 {
font-family: var(--font);
font-size: 22px;
font-weight: 600;
color: var(--c-text);
}
body .pdr-job-lookup #pdr-job-input {
max-width: 320px !important; /* beats inline 260px */
height: var(--pdr-control-h);
padding: 0 14px !important;
border: 1px solid var(--pdr-control-border) !important;/* beats inline #ccc */
border-radius: var(--radius) !important;
font-size: 18px !important;
}
body .pdr-job-lookup button[type="submit"] {
margin-top: 4px;
padding-top: 0 !important; /* beats inline padding:11px 26px, which made it 70px tall on phones */
padding-bottom: 0 !important;
}
body .pdr-job-lookup #pdr-job-input:focus {
border-color: var(--c-accent) !important; /* beats the id-level border above */
}
/* Device chooser /submit-a-new-job/: Option A, equal white cards (W9b, approved by the owner, 12 Oct 2026).
Scoped to body .type-of-device; CSS only, the page markup stays as it is. 11 matching line icons
(images/device-icon-*.svg, 24px grid, 1.75 stroke) are CSS masks, so one colour rule paints them all:
dark at rest, site red #c80219 on hover and keyboard focus. Browsers without mask support keep the old
PNGs (Total-child/style.css:686-774). 6 per row on desktop, 3 on tablets, 2 on phones.
Keyboard: Total-child/custom.js gives each tile tabindex 0, role link and its label as name; the
:focus-visible ring below shows. job_form.css:924-927 still hides MacBook, iMac and Surface. */
body .type-of-device {
--dev-red: #c80219;
--dev-gap: 16px;
--dev-cols: 6;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--dev-gap);
float: none;
overflow: visible;
box-sizing: border-box;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 4px 0 32px;
border-radius: 0;
background: none;
text-align: center;
}
body .type-of-device .item-device {
position: relative;
float: none;
box-sizing: border-box;
flex: 0 0 calc((100% - (var(--dev-cols) - 1) * var(--dev-gap)) / var(--dev-cols));
width: auto;
max-width: none;
margin: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
}
body .type-of-device .item-device p { margin: 0; padding: 0; }
body .type-of-device .item-device input { display: none; }
body .type-of-device .item-device label {
float: none;
display: block;
width: auto;
margin: 0;
padding: 0;
cursor: pointer;
text-transform: none;
letter-spacing: 0;
}
body .type-of-device .item-device .custom-icon-v2 {
position: relative;
float: none;
display: block;
flex: none;
bottom: auto;
font-size: 0;
line-height: 0;
overflow: hidden;
}
body .type-of-device .item-device:focus-visible {
outline: 2px solid var(--dev-red);
outline-offset: 3px;
}
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
body .type-of-device .item-device .custom-icon-v2 {
background-image: none;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
body .type-of-device .item-device .custom-icon-v2.hdd { -webkit-mask-image: url("../images/device-icon-hdd.svg"); mask-image: url("../images/device-icon-hdd.svg"); }
body .type-of-device .item-device .custom-icon-v2.ssd { -webkit-mask-image: url("../images/device-icon-ssd.svg"); mask-image: url("../images/device-icon-ssd.svg"); }
body .type-of-device .item-device .custom-icon-v2.raid { -webkit-mask-image: url("../images/device-icon-raid.svg"); mask-image: url("../images/device-icon-raid.svg"); }
body .type-of-device .item-device .custom-icon-v2.mobile { -webkit-mask-image: url("../images/device-icon-mobile.svg"); mask-image: url("../images/device-icon-mobile.svg"); }
body .type-of-device .item-device .custom-icon-v2.memory-card { -webkit-mask-image: url("../images/device-icon-memory-card.svg"); mask-image: url("../images/device-icon-memory-card.svg"); }
body .type-of-device .item-device .custom-icon-v2.usb { -webkit-mask-image: url("../images/device-icon-usb.svg"); mask-image: url("../images/device-icon-usb.svg"); }
body .type-of-device .item-device .custom-icon-v2.apple-macbook { -webkit-mask-image: url("../images/device-icon-apple-macbook.svg"); mask-image: url("../images/device-icon-apple-macbook.svg"); }
body .type-of-device .item-device .custom-icon-v2.apple-imac { -webkit-mask-image: url("../images/device-icon-apple-imac.svg"); mask-image: url("../images/device-icon-apple-imac.svg"); }
body .type-of-device .item-device .custom-icon-v2.corrupt-itunes-backup { -webkit-mask-image: url("../images/device-icon-corrupt-itunes-backup.svg"); mask-image: url("../images/device-icon-corrupt-itunes-backup.svg"); }
body .type-of-device .item-device .custom-icon-v2.microsoft-surface { -webkit-mask-image: url("../images/device-icon-microsoft-surface.svg"); mask-image: url("../images/device-icon-microsoft-surface.svg"); }
body .type-of-device .item-device .custom-icon-v2.data-destruction { -webkit-mask-image: url("../images/device-icon-data-destruction.svg"); mask-image: url("../images/device-icon-data-destruction.svg"); }
}
@media (max-width: 1023px) {
body .type-of-device { --dev-cols: 3; }
}
@media (max-width: 599px) {
body .type-of-device { --dev-cols: 2; --dev-gap: 12px; }
}
/* A. White cards of one size, icon above, label below, soft shadow.
Icon dark at rest, site red on hover and keyboard focus. */
body .type-of-device { font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif; }
body .type-of-device .item-device {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 160px;
padding: 26px 12px 20px;
border: 1px solid #e3e6eb;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);
color: #1f2430;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body .type-of-device .item-device > p { width: 100%; }
body .type-of-device .item-device .custom-icon-v2 {
width: 44px;
height: 44px;
margin: 0 auto 16px;
color: #1f2430;
transition: color .15s ease;
}
body .type-of-device .item-device label {
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
min-height: 4.05em; /* 3 lines: the iTunes label, so both rows match */
color: #1f2430;
text-align: center;
}
@media (hover: hover) {
body .type-of-device .item-device:hover {
border-color: rgba(200, 2, 25, .5);
background-color: #ffffff;
box-shadow: 0 8px 22px rgba(16, 24, 40, .10);
color: #1f2430;
transform: translateY(-2px);
}
body .type-of-device .item-device:hover .custom-icon-v2 { color: var(--dev-red); }
body .type-of-device .item-device:hover label { color: #1f2430; }
}
body .type-of-device .item-device:focus-visible .custom-icon-v2 { color: var(--dev-red); }
body .type-of-device .item-device:active { transform: none; }
@media (max-width: 599px) {
body .type-of-device .item-device { min-height: 136px; padding: 20px 10px 16px; border-radius: 12px; }
body .type-of-device .item-device .custom-icon-v2 { width: 38px; height: 38px; margin-bottom: 12px; }
body .type-of-device .item-device label { font-size: 14px; min-height: 2.7em; }
}
@media (max-width: 374px) {
body .type-of-device .item-device label { min-height: 4.05em; }
}
/* Last, so it also beats the hover rules above. */
/* W9b: Windows high contrast repaints mask fills, which hid the icons; draw them in the system text colour there. */
@media (forced-colors: active) {
body .type-of-device .item-device .custom-icon-v2 { forced-color-adjust: none; background-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
body .type-of-device .item-device,
body .type-of-device .item-device:hover,
body .type-of-device .item-device .custom-icon-v2 { transition: none; transform: none; }
}
/* --------------------------------------------------------------------------
13. Desktop width. Forms read best at about 860px wide. The theme container
is 1200px; this keeps the card centred without touching the theme.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
body .custom-job-form:not(.custom-payment-form) > #braintree-form,
body .custom-job-form:not(.custom-payment-form) > #payment-info,
body .custom-job-form:not(.custom-payment-form) > .offer-decline-quote {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
/* --------------------------------------------------------------------------
14. Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.custom-payment-form *,
.custom-job-form *,
.type-of-device * {
-webkit-transition: none !important; /* user setting wins */
transition: none !important;
}
body .custom-payment-form #payment-loader img,
body .custom-payment-form .ajax-loader > img,
body .custom-payment-form .loader-content > img,
body .custom-payment-form .response-steps li img.loader {
-webkit-animation-duration: 2.4s;
animation-duration: 2.4s;
}
}
/* --------------------------------------------------------------------------
15. Devices pass (10 Oct 2026): phones 320 to 430px, tablets, iOS Safari,
dark mode, Windows high contrast and keyboard focus. Added at the end
so every line number above stays the same.
-------------------------------------------------------------------------- */
/* 15a. Light only, the focus ring with a gap, and long words that wrap.
The forms are designed and contrast-checked in light colours. "only" stops
Chrome's auto dark theme and Android web views from recolouring them, and
keeps native pickers and autofill light. Browsers that do not know "only"
keep the plain "light" line. */
.custom-job-form,
.custom-payment-form,
.pdr-job-lookup,
.type-of-device {
color-scheme: light;
color-scheme: light only;
/* Solid accent ring with a white gap: 4.7:1 on white, 4.3:1 on the grey
page. Used for cards, tick boxes and service tiers. */
--pdr-focus-ring-offset: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent);
/* Long words and web addresses wrap instead of running off a 320px screen
(the terms address in the late payment text, live
submit_a_job_mobile.html:1904). */
word-wrap: break-word;
overflow-wrap: break-word;
}
/* 15b. Keyboard focus on the picked service tier. The tier rules
(section 6c) set box-shadow on :checked with the same weight as the focus
rule and come later, so a keyboard user saw no focus at all on the tier
cards. These put the ring back. */
body .custom-payment-form .price-options .col-sm-4 input.economy-price:checked:focus { box-shadow: inset 4px 0 0 var(--tier-economy), inset 0 0 0 1px var(--c-accent), var(--pdr-focus-ring-offset); }
body .custom-payment-form .price-options .col-sm-4 input.priority-price:checked:focus { box-shadow: inset 4px 0 0 var(--tier-priority), inset 0 0 0 1px var(--c-accent), var(--pdr-focus-ring-offset); }
body .custom-payment-form .price-options .col-sm-4 input.emergency-price:checked:focus { box-shadow: inset 4px 0 0 var(--tier-emergency), inset 0 0 0 1px var(--c-accent), var(--pdr-focus-ring-offset); }
/* Mouse and touch: no ring (own rules, so older Safari keeps the ring) */
body .custom-payment-form .price-options .col-sm-4 input.economy-price:checked:focus:not(:focus-visible) { box-shadow: inset 4px 0 0 var(--tier-economy), inset 0 0 0 1px var(--c-accent); }
body .custom-payment-form .price-options .col-sm-4 input.priority-price:checked:focus:not(:focus-visible) { box-shadow: inset 4px 0 0 var(--tier-priority), inset 0 0 0 1px var(--c-accent); }
body .custom-payment-form .price-options .col-sm-4 input.emergency-price:checked:focus:not(:focus-visible) { box-shadow: inset 4px 0 0 var(--tier-emergency), inset 0 0 0 1px var(--c-accent); }
/* 15c. Phones and tablets keep the last tapped element in :hover. Undo the
hover looks there, so an option card or the Back and Apply buttons do not
look stuck or picked after a tap. (hover: none) is touch-only screens. */
@media (hover: none) {
body .custom-payment-form .price-options input[type="radio"]:hover:not(:checked),
body .custom-job-form .price-options input[type="radio"]:hover:not(:checked),
body .custom-payment-form .payment-options input[type="radio"]:hover:not(:checked) {
border-color: var(--pdr-control-border);
}
body .custom-job-form .btn-back:hover,
body .custom-payment-form .btn-back:hover,
body .custom-job-form [name="apply_discount"]:hover,
body .custom-payment-form [name="apply_discount"]:hover {
background: var(--c-surface) !important; /* beats the section 9 hover, which beats job_form.css */
color: var(--c-text) !important;
border-color: var(--c-text) !important;
}
}
/* 15d. "I will pay at your office" when it cannot be picked (main.js:93-94):
no blue outline on hover, and readable grey text instead of the old 40%
fade (job_form.css:887-895). The dashed outline and grey fill show it is off. */
body .custom-payment-form .payment-options input[type="radio"]:disabled,
body .custom-payment-form .payment-options input[type="radio"]:disabled:hover {
border-color: var(--pdr-control-border);
}
body .custom-payment-form .payment-options input[type="radio"]:disabled + label {
opacity: 1;
}
/* 15e. Processing steps. main.js adds .blur to every step that is not running
(for example main.js:1251-1255), so with the fade gone the step that is
running needs its own look: navy, a little bolder. Waiting steps stay grey
with a circle, done steps green with a tick (section 11). */
body .custom-payment-form .response-steps li.label-red:not(.blur) {
color: var(--c-text);
font-weight: 500;
}
/* 15f. Full-screen "Processing" overlay on phones. It is position:fixed with
50px top padding and no scrolling (job_form.css:598-608, 649-666), so on a
short screen (iPhone SE 568px, any phone turned sideways) the last steps sat
below the screen with no way to reach them, and below 592px wide the white
card touched both screen edges. Now the overlay scrolls, keeps a 16px side
gutter, and respects the iPhone safe areas if viewport-fit=cover is ever
added (the site's viewport tag has no viewport-fit today). */
body .custom-payment-form .ajax-loader-final {
padding: 24px 16px;
padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
@media (max-width: 599px) {
body .custom-payment-form .ajax-loader-final .loader-content {
padding: 24px 20px;
}
}
/* 15g. The mobile and iTunes job forms put the service tiers in a .row with
-15px sides (mobile.php:599, itunes-backup-file.php:343) inside a form that
has no side padding on phones, so the tier cards sat off centre (16px gap on
the left, 46px on the right at 320px). */
body .custom-payment-form .form-group.price-options.row {
margin-left: 0;
margin-right: 0;
}
/* 15h. The whole row becomes the tap target once FORM-FIELD-FIXES.md wraps
each "Tell us what data" tick box in a