/* Enquiry modal styles — load AFTER bootstrap.css and site.css */
:root {
    --font-primary: 'Red Hat Display', system-ui, sans-serif;
}
/* All rules scoped to #contactModal so they don't affect the rest of your site */
#contactModal {
    --ot-orange: #f7791e;
    --ot-orange-hover: #e56a10;
    --ot-text: #1f1f1f;
    --ot-muted: #8a8a8a;
    --ot-border: #d9d9d9;
    --ot-error: #d93025;
    --bs-modal-width: 400px; /* Bootstrap 5.2+ modal width */
    --bs-modal-margin: 16px;
    font-family: var(--font-primary);
    color: var(--ot-text);
}

    #contactModal .modal-dialog {
        max-width: 400px;
    }
/* fallback for Bootstrap 5.0/5.1 */

/* Safety net: keep modal hidden until Bootstrap opens it
     (Bootstrap sets an inline display:block when opening, which overrides this) */
#contactModal {
    display: none;
}

    #contactModal .modal-content {
        border: 0;
        border-radius: 20px;
        padding: 24px 20px 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,.15);
    }

    #contactModal .enq-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    #contactModal .enq-title {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 18px;
        margin: 0;
        line-height: 1.2;
    }

    #contactModal .enq-close {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        background: #f2f2f2;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
    }

        #contactModal .enq-close:hover {
            background: #e6e6e6;
        }

    #contactModal .enq-field {
        margin-bottom: 20px;
        position: relative;
    }

    #contactModal .enq-input,
    #contactModal .enq-textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--ot-border);
        border-radius: 12px;
        padding: 13px 18px;
        font: 400 14px/1.4 "Red Hat Text", sans-serif;
        color: var(--ot-text);
        background: #fff;
        outline: none;
        box-shadow: none;
        transition: border-color .15s;
    }

    #contactModal .enq-input {
        height: 46px;
    }

    #contactModal .enq-textarea {
        height: 100px;
        resize: vertical;
    }

        #contactModal .enq-input::placeholder,
        #contactModal .enq-textarea::placeholder {
            color: var(--ot-muted);
        }

        #contactModal .enq-input:focus,
        #contactModal .enq-textarea:focus {
            border-color: var(--ot-orange);
        }

    #contactModal .has-error .enq-input,
    #contactModal .has-error .enq-textarea {
        border-color: var(--ot-error);
    }

    #contactModal .enq-error {
        display: none;
        color: var(--ot-error);
        font-size: 12px;
        line-height: 16px;
        margin-top: 6px;
        padding-left: 4px;
    }
    /* Field errors sit in the 20px gap below each field, so showing them never moves the
     Send button (a layout shift during the click made the click miss the button). */
    #contactModal .enq-field .enq-error {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 2px;
        white-space: nowrap;
    }

    #contactModal .has-error .enq-error {
        display: block;
    }

    /* Custom checkbox */
    #contactModal .enq-consent {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 22px;
        cursor: pointer;
    }

        #contactModal .enq-consent input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

    #contactModal .enq-checkbox {
        flex: 0 0 24px;
        height: 24px;
        border-radius: 5px;
        border: 1.5px solid var(--ot-border);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s, border-color .15s;
    }

        #contactModal .enq-checkbox svg {
            opacity: 0;
        }

    #contactModal .enq-consent input:checked + .enq-checkbox {
        background: var(--ot-orange);
        border-color: var(--ot-orange);
    }

        #contactModal .enq-consent input:checked + .enq-checkbox svg {
            opacity: 1;
        }

    #contactModal .enq-consent input:focus-visible + .enq-checkbox {
        outline: 2px solid var(--ot-orange);
        outline-offset: 2px;
    }

    #contactModal .enq-consent-text {
        font-size: 11.5px;
        line-height: 1.5;
        color: #333;
    }

        #contactModal .enq-consent-text a {
            color: inherit;
            font-weight: 700;
            text-decoration: none;
        }

            #contactModal .enq-consent-text a:hover {
                text-decoration: underline;
            }

    #contactModal .enq-captcha {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        min-height: 78px;
    }

        #contactModal .enq-captcha .enq-error {
            text-align: center;
        }

@media (max-width: 360px) {
    #contactModal #enqRecaptcha {
        transform: scale(.88);
        transform-origin: center;
    }
}

#contactModal .enq-submit {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: var(--ot-orange);
    color: #fff;
    font: 700 14px "Red Hat Display", sans-serif;
    cursor: pointer;
    transition: background .15s;
}

    #contactModal .enq-submit:hover {
        background: var(--ot-orange-hover);
    }

    #contactModal .enq-submit:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

#contactModal .enq-status {
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    min-height: 1em;
}

    #contactModal .enq-status.success {
        color: #188038;
    }

    #contactModal .enq-status.error {
        color: var(--ot-error);
    }