/**
* Custom styles for alternatives hubspot input form.
*/

/* Hide the email label to prevent it from adding extra height to the input */
#label-email-d9c4bb2f-68d0-45a1-a6b5-20a264b0bead {
    display: none !important;
}

#hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem 16px;
    width: 100%;
}

/* HubSpot often sets a fixed inline width on fields — keep the email input fluid */
#hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead .hs_email,
#hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead .hs-form-field,
#hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead .input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

#hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead input[type='text'],
#hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead input[type='email'] {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    box-sizing: border-box;
}

.alternatives-hubspot-form-width {
    max-width: 552px;
}

.alternatives-email-input-width {
    width: 100%;
    max-width: 440px;
    container-type: inline-size;
    container-name: alternatives-email;
}

/* Stack when the form is too narrow for a usable side-by-side layout */
@container alternatives-email (width < 400px) {
    #hsForm_d9c4bb2f-68d0-45a1-a6b5-20a264b0bead {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hs_submit,
    .hs_submit .actions,
    .alternatives-submit-button {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

.hs_submit,
.hs_submit .actions {
    width: auto !important;
    height: 40px !important;
}

.hs_submit .actions input[type='submit'],
.alternatives-submit-button {
    width: auto !important;
    min-width: 120px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 1rem !important;
    line-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-weight: 600;
    font-size: 1rem;
}
