/* ============================================================================
   FORM: the inquiry form (inc/forms.php, assets/js/form.js) in a white rounded panel. Rounded
   fields with a soft fill, large touch targets, a 2 px red focus ring with an offset, errors
   under each field, an error summary and a success panel on the page. Contact Form 7's own
   message box is replaced by those two.
   ============================================================================ */

.ts-inquiry{margin-top:34px}
.ts-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.ts-field{min-width:0;margin:0}
.ts-field:not(.ts-field--half){grid-column:1 / -1}
.ts-field[hidden]{display:none}
/* the name starts a row, so name and company, email and phone stay paired when the procedure field is hidden */
.ts-field--start{grid-column-start:1}
.ts-field > label,.ts-field > [data-ts-proc-label]{display:block;margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.ts-req{font-weight:400;color:var(--muted)}
.ts-hint{margin:-2px 0 10px;font-size:15px;line-height:1.45;color:var(--text)}

/* text fields, selects, the textarea */
.ts-form input[type="text"],.ts-form input[type="email"],.ts-form input[type="tel"],.ts-form select,.ts-form textarea{
  display:block;width:100%;min-height:54px;margin:0;padding:13px 16px;border:2px solid var(--rule-2);border-radius:var(--r-sm);background-color:var(--soft);
  font:inherit;font-size:17px;line-height:1.4;color:var(--ink);box-shadow:none;-webkit-appearance:none;appearance:none}
.ts-form textarea{min-height:150px;resize:vertical}
.ts-form select{padding-right:44px;cursor:pointer;
  background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.ts-form input:hover,.ts-form select:hover,.ts-form textarea:hover{border-color:var(--muted)}
.ts-form input:focus,.ts-form select:focus,.ts-form textarea:focus{outline:2px solid var(--red);outline-offset:2px;border-color:var(--ink);background-color:var(--white)}
.ts-form .wpcf7-not-valid{border-color:var(--red)}

/* the file field. With scripts: a button and the chosen file's name in a dashed box, and the real
   input transparent over the whole box, so a click, a tap or a dropped file goes straight to it.
   Without scripts: the browser's own control (it is the only one that can show the chosen file). */
.ts-file{display:block}
.ts-file-btn,.ts-file-name{display:none}
.js .ts-file{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:54px;padding:8px 16px 8px 8px;border:2px dashed var(--rule-2);border-radius:var(--r-sm);background:var(--soft)}
.js .ts-file input[type="file"]{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.js .ts-file input[type="file"]::file-selector-button{cursor:pointer}
.js .ts-file-btn{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:2px solid var(--ink);border-radius:var(--pill);background:var(--white);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
.js .ts-file-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* the name goes under the button when fewer than about 200 px are left beside it (phones) */
.js .ts-file-name{display:block;flex:1 1 200px;min-width:0;padding:2px 0;font-size:16px;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.js .ts-file-name b{font-weight:700;color:var(--ink)}
/* hover only where there is one: on touch screens it would stick after the tap that opens the picker */
@media (hover:hover){
  .js .ts-file:hover{border-color:var(--muted)}
  .js .ts-file:hover .ts-file-btn{background:var(--ink);color:var(--white)}
}
.js .ts-file.is-chosen{border-style:solid;border-color:var(--muted)}
.js .ts-file:focus-within{outline:2px solid var(--red);outline-offset:2px;border-style:solid;border-color:var(--ink)}
.js .ts-file:has(.wpcf7-not-valid){border-color:var(--red)}
.ts-form input[type="file"]{display:block;width:100%;min-height:54px;padding:10px;border:2px dashed var(--rule-2);border-radius:var(--r-sm);background:var(--soft);font:inherit;font-size:16px;color:var(--text);cursor:pointer}
.ts-form input[type="file"]::file-selector-button{margin-right:14px;padding:8px 18px;border:2px solid var(--ink);border-radius:var(--pill);background:var(--white);font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.ts-form input[type="file"]:hover::file-selector-button{background:var(--ink);color:var(--white)}
.ts-form input[type="file"]:focus{outline:2px solid var(--red);outline-offset:2px;border-style:solid;border-color:var(--ink)}

/* the consent box: 24 px with small rounded corners, the whole label clickable */
.ts-consent{font-size:16px;line-height:1.5;color:var(--text)}
.ts-consent .wpcf7-list-item{display:inline;margin:0}
.ts-consent label{display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer}
.ts-consent input[type="checkbox"]{flex:none;width:24px;height:24px;margin:0;border:2px solid var(--ink);border-radius:var(--r-xs);background:var(--white);-webkit-appearance:none;appearance:none;cursor:pointer}
.ts-consent input[type="checkbox"]:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
.ts-consent input[type="checkbox"]:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ts-consent .wpcf7-not-valid-tip{margin-left:36px}
.ts-consent a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* errors under each field */
.ts-form .wpcf7-form-control-wrap{display:block}
.ts-form .wpcf7-not-valid-tip{display:block;margin-top:8px;padding-left:24px;position:relative;font-size:15px;font-weight:700;line-height:1.4;color:var(--red-deep,var(--red))}
.ts-form .wpcf7-not-valid-tip::before{content:"!";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;background:var(--red);color:var(--white);font-size:12px;line-height:16px;text-align:center}

.ts-actions{grid-column:1 / -1;margin-top:6px}
.ts-submit{min-width:240px}
.ts-form .wpcf7-spinner{margin:0 0 0 14px;vertical-align:middle}

/* the honeypot: off screen, out of the tab order and hidden from screen readers */
.ts-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Contact Form 7's own message box and screen-reader list: the summary and the success panel
   below do that work (the fields still point at the list items for their errors) */
.ts-inquiry .wpcf7-response-output,.ts-inquiry .screen-reader-response{display:none!important}

/* error summary */
.ts-form-alert{margin:0 0 26px;padding:20px 22px;border:2px solid var(--red);border-left-width:6px;border-radius:var(--r-md);background:var(--white)}
.ts-form-alert:focus{outline:3px solid var(--focus);outline-offset:3px}
.ts-form-alert-title{margin:0;font-size:17px;font-weight:700;line-height:1.45;color:var(--ink)}
.ts-form-alert ul{margin:10px 0 0;padding:0 0 0 20px}
.ts-form-alert li{margin:6px 0;font-size:16px;line-height:1.45}
.ts-form-alert a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ts-form-alert a:hover{color:var(--red)}

/* success panel */
.ts-form-done{padding:28px 30px;border-radius:var(--r-md);background:var(--soft);font-size:18px;line-height:1.55;color:var(--text)}
.ts-form-done:focus{outline:3px solid var(--focus);outline-offset:3px}
.ts-form-done p{margin:0}
.ts-form-done p + p{margin-top:12px}
.ts-form-done-title{font-family:var(--ts-font-display);font-size:26px;font-weight:800;line-height:1.2;color:var(--ink)}
.ts-form-done a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the form panel (the quote page, the inquiry band of the service pages): white, rounded, with
   the red top bar clipped to its corners */
.ts-form-panel{position:relative;overflow:hidden;padding:40px 40px 44px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.ts-form-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--red)}
.ts-form-panel .hp-h2{margin:0;font-size:clamp(28px,2.6vw,36px)}
.ts-form-panel .hp-text{margin-top:12px;font-size:17px;color:var(--text)}
.qp-form{scroll-margin-top:calc(var(--mh-compact,72px) + 24px)}
/* #ts-form ("send another enquiry" on the page after a send without JavaScript) arrives below the
   header: the full one without JavaScript; with it the compact one, and the section nav docked
   under it on the service pages */
.ts-inquiry{scroll-margin-top:calc(var(--mh-h,116px) + 24px)}
.js .ts-inquiry{scroll-margin-top:calc(var(--mh-compact,68px) + 24px)}
.js .ip-hero--nav ~ * .ts-inquiry{scroll-margin-top:calc(var(--mh-compact,68px) + var(--ip-nav-h) + 24px)}
/* the quote page: the form starts close under the compact hero; one rounded photo under the steps */
.hp-sec.qp-sec{padding-top:40px}
.qp-photo{position:relative;margin-top:34px;overflow:hidden;border-radius:var(--r-lg);box-shadow:0 32px 64px -40px rgba(var(--ink-rgb),.5)}
.qp-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

@media (max-width:767px){
  /* the longest request type fits the select on a phone (16 px: no zoom on focus in iOS) */
  .ts-form select{padding-right:36px;padding-left:14px;font-size:16px;background-position:right 10px center}
  .ts-form-grid{grid-template-columns:1fr;gap:20px}
  .ts-field--half{grid-column:1 / -1}
  .ts-submit{width:100%}
  .ts-form-panel{padding:28px 20px 30px}
  .hp-sec.qp-sec{padding-top:36px}
}