/*
 * HubSpot form styles.
 *
 * Loaded on the page (for raw HTML forms) and injected into the HubSpot
 * iframe by js/hubspot-forms.js, so selectors can't rely on theme wrappers –
 * each form is scoped by the cssClass passed to towmateHubspotForm().
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

/* Only applies inside the HubSpot iframe (class added by js/hubspot-forms.js) */
.towmate-enquiry-form-frame,
.towmate-enquiry-form-frame body,
.towmate-newsletter-form-frame,
.towmate-newsletter-form-frame body,
.towmate-download-form-frame,
.towmate-download-form-frame body {
    background: transparent !important;
    margin: 0;
    padding: 0;
}

.hs-form.towmate-enquiry-form,
.hs-form.towmate-newsletter-form,
.hs-form.towmate-download-form {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hs-form.towmate-enquiry-form *,
.hs-form.towmate-newsletter-form *,
.hs-form.towmate-download-form * {
    box-sizing: border-box;
}

.hs-form.towmate-enquiry-form fieldset,
.hs-form.towmate-newsletter-form fieldset,
.hs-form.towmate-download-form fieldset {
    max-width: none !important;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.hs-form.towmate-enquiry-form fieldset .hs-form-field,
.hs-form.towmate-newsletter-form fieldset .hs-form-field,
.hs-form.towmate-download-form fieldset .hs-form-field {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

.hs-form.towmate-enquiry-form .input,
.hs-form.towmate-newsletter-form .input,
.hs-form.towmate-download-form .input {
    margin: 0 !important;
}

.hs-form.towmate-enquiry-form ul.inputs-list,
.hs-form.towmate-enquiry-form ul.hs-error-msgs,
.hs-form.towmate-newsletter-form ul.inputs-list,
.hs-form.towmate-newsletter-form ul.hs-error-msgs,
.hs-form.towmate-download-form ul.inputs-list,
.hs-form.towmate-download-form ul.hs-error-msgs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-form.towmate-enquiry-form .hs-field-desc,
.hs-form.towmate-newsletter-form .hs-field-desc,
.hs-form.towmate-download-form .hs-field-desc {
    font-size: 12px;
    margin: 0 0 4px;
}

/* ---------------------------------------------------------------------------
 * Enquiry form (contact page)
 * ------------------------------------------------------------------------ */

.hs-form.towmate-enquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 16px;
    color: #0C0D10;
}

/* Everything spans the full width, except single input fields which sit two to a row */
.hs-form.towmate-enquiry-form > * {
    grid-column: 1 / -1;
}

/* .towmate-half is added by js/hubspot-forms.js to rows containing a text input, select or textarea */
.hs-form.towmate-enquiry-form > .towmate-half {
    grid-column: auto;
}

@media (max-width: 480px) {
    .hs-form.towmate-enquiry-form {
        grid-template-columns: 1fr;
    }
}

.hs-form.towmate-enquiry-form label:not(.hs-error-msg):not(.hs-form-booleancheckbox-display):not(.hs-form-checkbox-display):not(.hs-form-radio-display) {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #0C0D10;
    margin: 0 0 4px;
}

.hs-form.towmate-enquiry-form .hs-form-required {
    font-size: 0;
    margin-left: 2px;
}

.hs-form.towmate-enquiry-form .hs-form-required::after {
    content: '(Required)';
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    color: #c02b0a;
}

.hs-form.towmate-enquiry-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form.towmate-enquiry-form select.hs-input,
.hs-form.towmate-enquiry-form textarea.hs-input {
    display: block;
    width: 100% !important;
    height: 39px;
    margin: 0;
    padding: 9px 15px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #555253;
    background-color: #fff;
    border: 1px solid #bababa;
    border-radius: 5px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.hs-form.towmate-enquiry-form .hs-input:focus {
    border-color: #85B725 !important;
}

.hs-form.towmate-enquiry-form .hs-input::placeholder {
    color: #bababa;
    opacity: 1;
}

.hs-form.towmate-enquiry-form select.hs-input {
    padding-right: 45px;
    background-image: url(../images/select-arrow-grey.svg);
    background-position: right 15px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Placeholder-style colour until an option is chosen */
.hs-form.towmate-enquiry-form select.hs-input.is-placeholder {
    color: #bababa;
}

.hs-form.towmate-enquiry-form select.hs-input option {
    color: #0C0D10;
}

.hs-form.towmate-enquiry-form textarea.hs-input {
    height: 93px;
    min-height: 93px;
    padding: 12px 15px;
    resize: vertical;
}

.hs-form.towmate-enquiry-form .hs-input.invalid.error {
    border-color: #c02b0a;
}

.hs-form.towmate-enquiry-form .hs-error-msgs label,
.hs-form.towmate-enquiry-form .hs-error-msg {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #c02b0a;
}

.hs-form.towmate-enquiry-form .hs_error_rollup {
    display: none;
}

.hs-form.towmate-enquiry-form .legal-consent-container,
.hs-form.towmate-enquiry-form .hs-richtext {
    font-size: 13px;
    line-height: 1.5;
    color: #555253;
}

.hs-form.towmate-enquiry-form .legal-consent-container a,
.hs-form.towmate-enquiry-form .hs-richtext a {
    color: #0C0D10;
}

.hs-form.towmate-enquiry-form .hs-form-booleancheckbox-display,
.hs-form.towmate-enquiry-form .hs-form-checkbox-display,
.hs-form.towmate-enquiry-form .hs-form-radio-display {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hs-form.towmate-enquiry-form .hs-form-booleancheckbox-display > span,
.hs-form.towmate-enquiry-form .hs-form-checkbox-display > span,
.hs-form.towmate-enquiry-form .hs-form-radio-display > span {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5;
}

.hs-form.towmate-enquiry-form .hs-form-booleancheckbox-display input,
.hs-form.towmate-enquiry-form .hs-form-checkbox-display input,
.hs-form.towmate-enquiry-form .hs-form-radio-display input {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 3px 0 0;
    accent-color: #85B725;
}

.hs-form.towmate-enquiry-form .hs_submit {
    text-align: center;
    padding-top: 8px;
}

.hs-form.towmate-enquiry-form .hs-button {
    display: inline-block;
    position: static;
    min-width: 133px;
    margin: 0;
    padding: 10px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #0C0D10;
    background: #85B725;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s, color 0.2s;
}

.hs-form.towmate-enquiry-form .hs-button:hover,
.hs-form.towmate-enquiry-form .hs-button:focus {
    background: #ec5c20;
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * Newsletter form (footer)
 * ------------------------------------------------------------------------ */

.hs-form.towmate-newsletter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 12px;
    color: #fff;
}

/* Everything spans the full width, except first/last name (if present) which sit side by side */
.hs-form.towmate-newsletter-form > * {
    grid-column: 1 / -1;
}

.hs-form.towmate-newsletter-form > .hs_firstname,
.hs-form.towmate-newsletter-form > .hs_lastname {
    grid-column: auto;
}

/* Labels are visually hidden – the label text is shown as a placeholder instead */
.hs-form.towmate-newsletter-form .hs-form-field > label:not(.hs-error-msg) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hs-form.towmate-newsletter-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form.towmate-newsletter-form select.hs-input {
    display: block;
    width: 100% !important;
    height: 42px;
    margin: 0;
    padding: 11px 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    color: #555253;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.hs-form.towmate-newsletter-form .hs-input::placeholder {
    color: #727272;
    opacity: 1;
}

.hs-form.towmate-newsletter-form .hs-input:focus {
    border-color: #85B725 !important;
}

.hs-form.towmate-newsletter-form .hs-input.invalid.error {
    border-color: #ff6b5b;
}

.hs-form.towmate-newsletter-form .hs-error-msgs label,
.hs-form.towmate-newsletter-form .hs-error-msg {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #ff6b5b;
}

.hs-form.towmate-newsletter-form .hs_error_rollup {
    display: none;
}

.hs-form.towmate-newsletter-form .legal-consent-container,
.hs-form.towmate-newsletter-form .hs-richtext {
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
}

.hs-form.towmate-newsletter-form .hs-richtext p {
    margin: 0 0 8px;
}

.hs-form.towmate-newsletter-form .legal-consent-container a,
.hs-form.towmate-newsletter-form .hs-richtext a {
    color: #85B725;
}

.hs-form.towmate-newsletter-form .legal-consent-container .hs-form-booleancheckbox {
    margin: 0 0 8px;
}

/* Round dot checkbox: black, green with a white ring when ticked */
.hs-form.towmate-newsletter-form .hs-form-booleancheckbox-display,
.hs-form.towmate-newsletter-form .hs-form-checkbox-display {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    cursor: pointer;
}

.hs-form.towmate-newsletter-form .hs-form-booleancheckbox-display > span,
.hs-form.towmate-newsletter-form .hs-form-checkbox-display > span {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.hs-form.towmate-newsletter-form .hs-form-booleancheckbox-display input,
.hs-form.towmate-newsletter-form .hs-form-checkbox-display input {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 3px 0 0;
    background: #000;
    border: 1px solid #000;
    border-radius: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.4s, border-color 0.4s;
}

.hs-form.towmate-newsletter-form .hs-form-booleancheckbox-display input:checked,
.hs-form.towmate-newsletter-form .hs-form-checkbox-display input:checked {
    background: #85B725;
    border-color: #fff;
}

.hs-form.towmate-newsletter-form .hs-form-booleancheckbox-display input:focus-visible,
.hs-form.towmate-newsletter-form .hs-form-checkbox-display input:focus-visible {
    outline: 2px solid #85B725;
    outline-offset: 2px;
}

.hs-form.towmate-newsletter-form .hs-form-required {
    display: none;
}

.hs-form.towmate-newsletter-form .hs_submit {
    padding-top: 4px;
}

.hs-form.towmate-newsletter-form .hs-button {
    display: inline-block;
    position: static;
    min-width: 97px;
    margin: 0;
    padding: 10px 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    color: #fff;
    background: #85B725;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s;
}

.hs-form.towmate-newsletter-form .hs-button:hover,
.hs-form.towmate-newsletter-form .hs-button:focus {
    background: #ec5c20;
}

/* ---------------------------------------------------------------------------
 * Download form (downloads popup)
 * ------------------------------------------------------------------------ */

.hs-form.towmate-download-form {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 15px;
    color: #0C0D10;
}

/* Text fields use the label as a placeholder; selects keep a visible label */
.hs-form.towmate-download-form .hs-form-field:not(.hs-fieldtype-select):not(.hs-fieldtype-booleancheckbox):not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) > label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hs-form.towmate-download-form .hs-form-field > label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #0C0D10;
    margin: 4px 0 10px;
}

.hs-form.towmate-download-form .hs-form-required {
    font-size: 0;
    margin-left: 2px;
}

.hs-form.towmate-download-form .hs-form-required::after {
    content: '(Required)';
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    color: #c02b0a;
}

.hs-form.towmate-download-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form.towmate-download-form select.hs-input,
.hs-form.towmate-download-form textarea.hs-input {
    display: block;
    width: 100% !important;
    height: 35px;
    margin: 0;
    padding: 6px 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #0C0D10;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.hs-form.towmate-download-form .hs-input:focus {
    border-color: #85B725 !important;
}

.hs-form.towmate-download-form .hs-input::placeholder {
    color: #bababa;
    font-weight: 300;
    opacity: 1;
}

.hs-form.towmate-download-form select.hs-input {
    padding-right: 35px;
    background-image: url(../images/select-arrow-grey.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.hs-form.towmate-download-form textarea.hs-input {
    height: 93px;
    resize: vertical;
}

.hs-form.towmate-download-form .hs-input.invalid.error {
    border-color: #c02b0a;
}

.hs-form.towmate-download-form .hs-error-msgs label,
.hs-form.towmate-download-form .hs-error-msg {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #c02b0a;
}

.hs-form.towmate-download-form .hs_error_rollup {
    display: none;
}

.hs-form.towmate-download-form .legal-consent-container,
.hs-form.towmate-download-form .hs-richtext {
    font-size: 12px;
    line-height: 1.5;
    color: #555253;
}

.hs-form.towmate-download-form .hs-richtext p {
    margin: 0 0 8px;
}

.hs-form.towmate-download-form .legal-consent-container a,
.hs-form.towmate-download-form .hs-richtext a {
    color: #0C0D10;
}

.hs-form.towmate-download-form .legal-consent-container .hs-form-booleancheckbox {
    margin: 0 0 8px;
}

.hs-form.towmate-download-form .hs-form-booleancheckbox-display,
.hs-form.towmate-download-form .hs-form-checkbox-display,
.hs-form.towmate-download-form .hs-form-radio-display {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #0C0D10;
    cursor: pointer;
}

.hs-form.towmate-download-form .hs-form-booleancheckbox-display > span,
.hs-form.towmate-download-form .hs-form-checkbox-display > span,
.hs-form.towmate-download-form .hs-form-radio-display > span {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.hs-form.towmate-download-form .hs-form-booleancheckbox-display input,
.hs-form.towmate-download-form .hs-form-checkbox-display input,
.hs-form.towmate-download-form .hs-form-radio-display input {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 3px 0 0;
    accent-color: #85B725;
}

.hs-form.towmate-download-form .hs_submit {
    padding-top: 4px;
}

.hs-form.towmate-download-form .hs-button {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    color: #fff;
    background: #85B725;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s;
}

.hs-form.towmate-download-form .hs-button:hover,
.hs-form.towmate-download-form .hs-button:focus {
    background: #ec5c20;
}

/* Thank-you message shown after submit (the form is removed, so scope by the frame class) */
.towmate-enquiry-form-frame .submitted-message,
.towmate-newsletter-form-frame .submitted-message,
.towmate-download-form-frame .submitted-message {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.towmate-enquiry-form-frame .submitted-message,
.towmate-download-form-frame .submitted-message {
    color: #0C0D10;
    text-align: center;
}

.towmate-newsletter-form-frame .submitted-message {
    color: #fff;
}