/* =========================================================
   QTECH FORM PAGES
   ========================================================= */

.qtech-form-section {
    width: 100%;
}

.qtech-form-wrap {
    width: 100%;
    max-width: 900px;
}

.qtech-form-title {
    margin: 0 0 8px !important;
}

.qtech-form-title .elementor-heading-title {
    margin: 0 !important;

    color: var(--qtech-heading) !important;

    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: -.02em !important;
}

.qtech-form-description {
    max-width: 720px;

    margin: 0 0 30px !important;
}

.qtech-form-description,
.qtech-form-description p {
    color: var(--qtech-text) !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
}

.qtech-form-description p {
    margin: 0 !important;
}


/* =========================================================
   GRAVITY FORMS — RESET / SHELL
   ========================================================= */

.qtech-form {
    width: 100%;
}

.qtech-form .gform_wrapper,
.qtech-form .gfield {
    margin: 0 !important;
}

.qtech-form .gform_fields {
    row-gap: 24px !important;
}

.qtech-form .gform_wrapper,
.qtech-form .gform_body,
.qtech-form .gform_fields,
.qtech-form .gfield {
    width: 100%;
}


/* =========================================================
   FIELD LABELS
   ========================================================= */

.qtech-form .gfield_label,
.qtech-form .gform-field-label {
    margin: 0 0 8px !important;

    color: var(--qtech-heading) !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

.qtech-form .gfield_required {
    color: var(--qtech-red) !important;

    font-size: .9em !important;
}


/* =========================================================
   FIELD DESCRIPTIONS / HELP TEXT
   ========================================================= */

.qtech-form .gfield_description,
.qtech-form .gform-field-label--type-sub {
    color: var(--qtech-text-muted) !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
}

.qtech-form .gfield_description {
    margin-top: 7px !important;
}

.qtech-form .gform-field-label--type-sub {
    margin-top: 6px !important;
}


/* =========================================================
   TEXT INPUTS / EMAIL / NUMBER / URL / TEL
   ========================================================= */

.qtech-form input[type="text"],
.qtech-form input[type="email"],
.qtech-form input[type="number"],
.qtech-form input[type="url"],
.qtech-form input[type="tel"],
.qtech-form input[type="password"],
.qtech-form input[type="date"],
.qtech-form input[type="time"] {
    width: 100% !important;
    min-height: 46px !important;

    padding: 10px 13px !important;

    background: var(--qtech-input-bg) !important;
    border: 1px solid var(--qtech-input-border) !important;
    border-radius: 6px !important;

    color: var(--qtech-input-text) !important;

    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.35 !important;

    box-shadow: none !important;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}


/* =========================================================
   SELECTS
   ========================================================= */

.qtech-form select {
    width: 100% !important;
    min-height: 46px !important;

    padding: 10px 38px 10px 13px !important;

    background-color: var(--qtech-input-bg) !important;
    border: 1px solid var(--qtech-input-border) !important;
    border-radius: 6px !important;

    color: var(--qtech-input-text) !important;

    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.35 !important;

    box-shadow: none !important;

    cursor: pointer;
}


/* =========================================================
   TEXTAREAS
   ========================================================= */

.qtech-form textarea {
    width: 100% !important;

    min-height: 140px !important;

    padding: 12px 13px !important;

    resize: vertical;

    background: var(--qtech-input-bg) !important;
    border: 1px solid var(--qtech-input-border) !important;
    border-radius: 6px !important;

    color: var(--qtech-input-text) !important;

    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.5 !important;

    box-shadow: none !important;
}


/* =========================================================
   FOCUS STATES
   ========================================================= */

.qtech-form input:focus,
.qtech-form select:focus,
.qtech-form textarea:focus {
    outline: none !important;

    border-color: var(--qtech-red) !important;

    box-shadow:
        0 0 0 3px rgba(204, 0, 0, .10) !important;
}


/* =========================================================
   PLACEHOLDERS
   ========================================================= */

.qtech-form ::placeholder {
    color: var(--qtech-input-placeholder) !important;
    opacity: 1;
}


/* =========================================================
   CHECKBOXES / RADIOS
   ========================================================= */

.qtech-form .gfield_checkbox,
.qtech-form .gfield_radio {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;
}

.qtech-form .gchoice {
    display: flex !important;
    align-items: flex-start !important;

    gap: 9px !important;
}

.qtech-form input[type="checkbox"],
.qtech-form input[type="radio"] {
    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    margin: 2px 0 0 !important;

    accent-color: var(--qtech-red);
}

.qtech-form .gchoice label {
    margin: 0 !important;

    color: var(--qtech-text) !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* Gravity Forms — radio "Other" option */

.qtech-form .gchoice input[type="text"] {
    width: auto !important;
    min-width: 220px !important;
    max-width: 360px !important;

    margin: -8px 0 0 8px !important;

    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

.qtech-form .gchoice:has(input[type="text"]) {
    align-items: center !important;
    flex-wrap: wrap !important;
}


/* =========================================================
   FILE UPLOADS
   ========================================================= */

.qtech-form input[type="file"] {
    width: 100% !important;

    padding: 10px !important;

    background: var(--qtech-surface-soft) !important;
    border: 1px solid var(--qtech-input-border) !important;
    border-radius: 6px !important;

    color: var(--qtech-text) !important;

    font-family: inherit !important;
    font-size: 14px !important;
}


/* =========================================================
   FIELDSETS / GROUPED FIELDS
   ========================================================= */

.qtech-form fieldset {
    padding: 0 !important;

    border: 0 !important;
}

.qtech-form legend {
    margin-bottom: 8px !important;

    color: var(--qtech-heading) !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.qtech-form .gfield_error input,
.qtech-form .gfield_error select,
.qtech-form .gfield_error textarea {
    border-color: var(--qtech-error-text) !important;
}

.qtech-form .validation_message,
.qtech-form .gfield_validation_message {
    margin-top: 7px !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    color: var(--qtech-error-text) !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

.qtech-form .gform_validation_errors {
    margin: 0 0 28px !important;
    padding: 16px 18px !important;

    background: var(--qtech-error-bg) !important;
    border: 1px solid var(--qtech-error-border) !important;
    border-radius: 8px !important;

    box-shadow: none !important;
}

.qtech-form .gform_validation_errors h2 {
    margin: 0 !important;

    color: var(--qtech-error-text) !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}


/* =========================================================
   CAPTCHA
   ========================================================= */

.qtech-form .ginput_recaptcha {
    margin-top: 4px !important;
}


/* =========================================================
   FOOTER / SUBMIT
   ========================================================= */

.qtech-form .gform_footer,
.qtech-form .gform_page_footer {
    margin: 30px 0 0 !important;
    padding: 0 !important;
}

.qtech-form input[type="submit"],
.qtech-form button[type="submit"],
.qtech-form .gform_button {
    min-height: 46px !important;

    margin: 0 !important;
    padding: 11px 22px !important;

    background: var(--qtech-red) !important;

    border: 1px solid var(--qtech-red) !important;
    border-radius: 6px !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.qtech-form input[type="submit"]:hover,
.qtech-form button[type="submit"]:hover,
.qtech-form .gform_button:hover {
    background: var(--qtech-red-hover) !important;
    border-color: var(--qtech-red-hover) !important;
}

.qtech-form input[type="submit"]:focus-visible,
.qtech-form button[type="submit"]:focus-visible,
.qtech-form .gform_button:focus-visible {
    outline: 3px solid rgba(204, 0, 0, .18) !important;
    outline-offset: 3px !important;
}


/* =========================================================
   CONFIRMATION MESSAGE
   ========================================================= */

.qtech-form .gform_confirmation_message {
    padding: 22px 24px !important;

    background: var(--qtech-success-bg) !important;
    border: 1px solid var(--qtech-success-border) !important;
    border-radius: 8px !important;

    color: var(--qtech-success-text) !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .qtech-form-wrap {
        max-width: none;
    }

    .qtech-form-title .elementor-heading-title {
        font-size: 24px !important;
    }

    .qtech-form-description {
        margin-bottom: 24px !important;
    }

    .qtech-form .gform_fields {
        row-gap: 20px !important;
    }

    .qtech-form input[type="text"],
    .qtech-form input[type="email"],
    .qtech-form input[type="number"],
    .qtech-form input[type="url"],
    .qtech-form input[type="tel"],
    .qtech-form input[type="password"],
    .qtech-form input[type="date"],
    .qtech-form input[type="time"],
    .qtech-form select,
    .qtech-form textarea {
        font-size: 16px !important;
    }

    .qtech-form input[type="submit"],
    .qtech-form button[type="submit"],
    .qtech-form .gform_button {
        width: 100% !important;
    }
}

.qtech-form .gsection {
    margin: 36px 0 18px !important;
    padding: 0 0 12px !important;

    border-bottom: 1px solid var(--qtech-border) !important;
}

.qtech-form .gsection_title {
    margin: 0 !important;

    color: var(--qtech-heading) !important;

    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    letter-spacing: -.015em !important;
}

/* =========================================================
   FORM INTRO CALLOUT
   ========================================================= */

.qtech-form-intro {
    width: 100%;
    margin: 0 !important;
    padding: 38px 0 10px !important;
    background: var(--qtech-light) !important;
}

/*
 * Leave Elementor's boxed container geometry alone.
 * Its left edge already matches the form section below.
 */
.qtech-form-intro > .e-con-inner {
    position: relative;
    padding-top: 4px !important;
    padding-bottom: 22px !important;
    padding-left: 28px !important;
}

/* One continuous red rule */
.qtech-form-intro > .e-con-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;
    background: var(--qtech-red);
}

/* Keep the callout no wider than the form */
.qtech-form-intro-title,
.qtech-form-intro-text {
    width: 100% !important;
    max-width: 872px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.qtech-form-intro-title {
    margin-bottom: 8px !important;
}

.qtech-form-intro-title .elementor-heading-title {
    margin: 0 !important;
    color: var(--qtech-heading) !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.qtech-form-intro-text p {
    margin: 0 !important;
    color: var(--qtech-text) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media (max-width: 767px) {
    .qtech-form-intro {
        padding-top: 30px !important;
    }

    .qtech-form-intro > .e-con-inner {
        padding-left: 22px !important;
    }

    .qtech-form-intro-title,
    .qtech-form-intro-text {
        max-width: 100% !important;
    }
}

/* =========================================================
   FORMS
========================================================= */

/*
 * Standard form accents use the brighter Questrom red
 * in dark mode. Form surfaces, text, validation and status
 * colors are already controlled by semantic tokens.
 */


/* Required markers */

html[data-qtech-theme="dark"]
.qtech-form .gfield_required {
    color: var(--qtech-red-hover) !important;
}


/* Field focus */

html[data-qtech-theme="dark"]
.qtech-form input:focus,
html[data-qtech-theme="dark"]
.qtech-form select:focus,
html[data-qtech-theme="dark"]
.qtech-form textarea:focus {
    border-color: var(--qtech-red-hover) !important;

    box-shadow:
        0 0 0 3px rgba(197, 34, 63, .18) !important;
}


/* Native checkbox / radio accent */

html[data-qtech-theme="dark"]
.qtech-form input[type="checkbox"],
html[data-qtech-theme="dark"]
.qtech-form input[type="radio"] {
    accent-color: var(--qtech-red-hover);
}


/* Form intro callout */

html[data-qtech-theme="dark"]
.qtech-form-intro > .e-con-inner::before {
    background: var(--qtech-red-hover);
}