/* ==========================================================================
   Website forms (inc/forms): the live site's forms in the design language.
   Kept in its own file, loaded after components.css, so edits to components.css
   (e.g. through Timer Pro Studio) cannot drop it. Base field styles are in theme.css (.tp-form).
   ========================================================================== */
.tp-form__hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.tp-form__group { font-family: var(--tp-display); font-size: var(--tp-h5); line-height: 1; text-transform: uppercase; margin: 8px 0 16px; padding-top: 16px; border-top: 1px solid var(--tp-black); }
.tp-form__group:first-of-type { border-top: 0; padding-top: 0; }
.tp-form__choices { border: 0; padding: 0; margin: 0 0 18px; }
.tp-form__choices legend { font-family: var(--tp-mono); font-size: .8125rem; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.tp-form__choices legend span, .tp-form label span[aria-hidden] { color: var(--tp-red); }
.tp-form .tp-form__choice { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 8px 0; font-family: var(--tp-body); font-size: 1rem; text-transform: none; }
.tp-form .tp-form__check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-family: var(--tp-body); font-size: 1rem; text-transform: none; }
.tp-form .tp-form__check span { color: var(--tp-black); }
.tp-form input[type="radio"], .tp-form input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tp-blue); border-radius: 0; }
.tp-form__errors { border: 3px solid var(--tp-red); padding: 12px 16px; margin-bottom: 20px; }
.tp-form__errors p { margin: 0; color: var(--tp-black); }
/* Error text stays black for contrast; the red square carries the signal. */
.tp-form label .tp-form__err, .tp-form .tp-form__err { display: block; position: relative; margin-top: 6px; padding-left: 16px; font-family: var(--tp-body); font-size: .875rem; text-transform: none; color: var(--tp-black); }
.tp-form .tp-form__err::before { content: ''; position: absolute; left: 0; top: .35em; width: 8px; height: 8px; background: var(--tp-red); }
.tp-form--done .tp-form__success { margin-bottom: 1.25rem; }
.tp-form--done .tp-btn { margin-top: 0; }

/* ----- Country picker (inc/forms/countries.php, assets/js/country-picker.js) -----
   A popup list under the field: square, 1px Track Black rule, Flash White ground; the
   highlighted country is Electric Blue with reversed type, as interactive elements are
   on light sections. No shadow - the rule separates it from the form beneath. */
.tp-form label.tp-country { position: relative; }
.tp-country__list { position: absolute; left: 0; right: 0; z-index: 30; display: block; max-height: 264px; overflow-y: auto; margin-top: -1px; background: var(--tp-white); border: 1px solid var(--tp-black); }
.tp-country__list[hidden] { display: none; }
.tp-form .tp-country__opt, .tp-form .tp-country__none { display: block; padding: 10px 14px; font-family: var(--tp-body); font-size: 1rem; line-height: 1.4; letter-spacing: .01em; text-transform: none; color: var(--tp-black); cursor: pointer; }
.tp-form .tp-country__opt + .tp-country__opt { border-top: 1px solid rgba(10, 10, 10, .12); }
.tp-form .tp-country__opt:hover, .tp-form .tp-country__opt[aria-selected="true"] { background: var(--tp-blue); color: var(--tp-white); }
.tp-form .tp-country__none { cursor: default; }

/* ----- Contact page (#message): a wide, horizontal form -----
   The form spans the full 12 columns directly beneath the Call Direct / Global HQ squares,
   sharing their 1px Track Black rule so the three read as one block. Its paired rows
   dissolve into one 4-column grid, so the fields run four across (two on tablets, one on
   phones). The yes/no question takes half a row and the "heard about" options run on one
   line across the full width; comments, the consent tick, the button and the note run
   full width beneath. */
#message { margin-top: 0; }
#message .fp-leadgrid > div { grid-column: 1 / -1; }
#message .fp-contact__formcopy:not(:has(*)) { display: none; }
#message .tp-form { margin-top: -1px; }
#message .tp-form form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; align-items: end; }
#message .tp-form__row { display: contents; }
#message .tp-form form label { margin-bottom: 0; }
#message .tp-form__choices { grid-column: span 2; align-self: start; margin: 8px 0 0; }
#message .tp-form__choices ~ .tp-form__choices { grid-column: 1 / -1; margin-top: 0; }
#message .tp-form__choices ~ .tp-form__choices .tp-form__choice { margin-right: 26px; white-space: nowrap; }
#message .tp-form__full, #message .tp-form__check, #message .tp-form form > .tp-btn, #message .tp-form__note { grid-column: 1 / -1; }
#message .tp-form .tp-form__check { margin: 0; }
#message .tp-form form > .tp-btn { justify-self: start; margin-top: 0; }
#message .tp-form__note { margin: 0; }
@media (max-width: 900px) {
	#message .tp-form form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#message .tp-form__choices { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	#message .tp-form form { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Client download (page-client-download.php) ----- */
.tp-clientdl__msg { padding: 12px 16px; margin-bottom: 20px; border: 3px solid var(--tp-black); color: var(--tp-black); }
.tp-clientdl__msg.is-error { border-color: var(--tp-red); }
.tp-clientdl__msg.is-note { border-color: var(--tp-blue); }
.tp-clientdl__msg.is-ok { border-color: var(--tp-black); background: var(--tp-black); color: var(--tp-yellow); font-family: var(--tp-display); text-transform: uppercase; font-size: 1.25rem; }
.tp-clientdl__help { display: inline-block; margin: -6px 0 18px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9375rem; color: var(--tp-blue); }
.tp-clientdl__extra { border: 0; border-top: 1px solid var(--tp-black); margin: 8px 0 8px; padding: 18px 0 0; }
.tp-clientdl__extra legend { font-family: var(--tp-display); font-size: var(--tp-h5); text-transform: uppercase; padding: 0 12px 0 0; }
.tp-clientdl input[readonly] { background: rgba(124, 129, 135, .08); }
.tp-clientdl .tp-btn[disabled] { opacity: .6; cursor: progress; }