/* HubSpot Form Overrides — match existing leadFormOffre design */

/* Reset HubSpot default styles */
.hubspotFormBlock .hs-form {
    font-family: "Anuphan", sans-serif;
}

.hubspotFormBlock .hs-form fieldset {
    max-width: 100% !important;
}

/* Two-column rows (name fields side by side) */
.hubspotFormBlock .hs-form fieldset.form-columns-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.6666666667vw;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form fieldset.form-columns-2 {
        gap: 1.0416666667vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form fieldset.form-columns-2 {
        gap: 20px;
    }
}

.hubspotFormBlock .hs-form fieldset.form-columns-2 .hs-form-field {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: auto !important;
}

/* Field groups */
.hubspotFormBlock .hs-form .hs-form-field {
    margin-bottom: 2.6666666667vw;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form .hs-form-field {
        margin-bottom: 1.0416666667vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form .hs-form-field {
        margin-bottom: 20px;
    }
}

/* Hide HubSpot labels (use placeholders instead) */
.hubspotFormBlock .hs-form label:not(.hs-form-checkbox-display):not(.hs-form-booleancheckbox-display) {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Text inputs */
.hubspotFormBlock .hs-form input[type="text"],
.hubspotFormBlock .hs-form input[type="email"],
.hubspotFormBlock .hs-form input[type="tel"],
.hubspotFormBlock .hs-form input[type="number"],
.hubspotFormBlock .hs-form select,
.hubspotFormBlock .hs-form textarea {
    background-color: #fff;
    border: 1px solid #d5d0c5;
    border-radius: 1.3333333333vw;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Anuphan", sans-serif;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw;
    padding: 2.6666666667vw 3.2vw;
    width: 100% !important;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form input[type="text"],
    .hubspotFormBlock .hs-form input[type="email"],
    .hubspotFormBlock .hs-form input[type="tel"],
    .hubspotFormBlock .hs-form input[type="number"],
    .hubspotFormBlock .hs-form select,
    .hubspotFormBlock .hs-form textarea {
        border-radius: 0.2604166667vw;
        font-size: 0.8333333333vw;
        line-height: 1.0416666667vw;
        padding: 0.78125vw 1.0416666667vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form input[type="text"],
    .hubspotFormBlock .hs-form input[type="email"],
    .hubspotFormBlock .hs-form input[type="tel"],
    .hubspotFormBlock .hs-form input[type="number"],
    .hubspotFormBlock .hs-form select,
    .hubspotFormBlock .hs-form textarea {
        border-radius: 5px;
        font-size: 16px;
        line-height: 20px;
        padding: 15px 20px;
    }
}

.hubspotFormBlock .hs-form input:focus,
.hubspotFormBlock .hs-form select:focus,
.hubspotFormBlock .hs-form textarea:focus {
    border-color: #042e34;
    outline: none;
}

.hubspotFormBlock .hs-form input::placeholder,
.hubspotFormBlock .hs-form textarea::placeholder {
    color: #9b9687;
}

/* Checkbox / consent */
.hubspotFormBlock .hs-form .hs-form-booleancheckbox-display,
.hubspotFormBlock .hs-form .legal-consent-container .hs-form-booleancheckbox-display {
    color: #042e34;
    display: block;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw;
    position: relative;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form .hs-form-booleancheckbox-display,
    .hubspotFormBlock .hs-form .legal-consent-container .hs-form-booleancheckbox-display {
        font-size: 0.8333333333vw;
        line-height: 1.1458333333vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form .hs-form-booleancheckbox-display,
    .hubspotFormBlock .hs-form .legal-consent-container .hs-form-booleancheckbox-display {
        font-size: 16px;
        line-height: 22px;
    }
}

.hubspotFormBlock .hs-form .legal-consent-container .hs-form-booleancheckbox-display a {
    color: #042e34;
}

.hubspotFormBlock .hs-form .legal-consent-container .hs-form-booleancheckbox-display a:hover {
    color: #688285;
    text-decoration: none;
}

.hubspotFormBlock .hs-form .legal-consent-container {
    margin-bottom: 2.6666666667vw;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form .legal-consent-container {
        margin-bottom: 1.0416666667vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form .legal-consent-container {
        margin-bottom: 20px;
    }
}

/* Error messages */
.hubspotFormBlock .hs-form .hs-error-msgs {
    color: #e03748;
    font-size: 2.6666666667vw;
    line-height: 4vw;
    list-style: none;
    margin: 1.0666666667vw 0 0;
    padding: 0;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form .hs-error-msgs {
        font-size: 0.625vw;
        line-height: 0.8333333333vw;
        margin-top: 0.2604166667vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form .hs-error-msgs {
        font-size: 12px;
        line-height: 16px;
        margin-top: 5px;
    }
}

/* Submit button */
.hubspotFormBlock .hs-form .hs-submit {
    text-align: left;
}

.hubspotFormBlock .hs-form .hs-submit .hs-button,
.hubspotFormBlock .hs-form input[type="submit"] {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #dfffa4;
    border: 0.5333333333vw solid #dfffa4;
    border-radius: 18.6666666667vw;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #042e34;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: "Anuphan", sans-serif;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 5.3333333333vw;
    padding: 2.6666666667vw 5.3333333333vw;
    -webkit-transition: color 0.5s, background-color 0.5s, border-color 0.5s;
    transition: color 0.5s, background-color 0.5s, border-color 0.5s;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form .hs-submit .hs-button,
    .hubspotFormBlock .hs-form input[type="submit"] {
        border-radius: 3.6458333333vw;
        border-width: 0.1041666667vw;
        font-size: 0.8333333333vw;
        gap: 0.5208333333vw;
        line-height: 1.0416666667vw;
        padding: 1.0416666667vw 2.0833333333vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form .hs-submit .hs-button,
    .hubspotFormBlock .hs-form input[type="submit"] {
        border-radius: 70px;
        border-width: 2px;
        font-size: 16px;
        gap: 10px;
        line-height: 20px;
        padding: 20px 40px;
    }
}

.hubspotFormBlock .hs-form .hs-submit .hs-button:hover,
.hubspotFormBlock .hs-form input[type="submit"]:hover {
    background-color: #042e34;
    border-color: #042e34;
    color: #dfffa4;
}

/* Reset HubSpot list styles */
.hubspotFormBlock .hs-form ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide HubSpot required asterisks (already in placeholder) */
.hubspotFormBlock .hs-form .hs-form-required {
    display: none;
}

/* Reset fieldset borders/margins */
.hubspotFormBlock .hs-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* HubSpot rich text in consent */
.hubspotFormBlock .hs-form .legal-consent-container .hs-richtext {
    color: #042e34;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw;
    margin-bottom: 2.6666666667vw;
}
@media screen and (min-width: 980px) {
    .hubspotFormBlock .hs-form .legal-consent-container .hs-richtext {
        font-size: 0.8333333333vw;
        line-height: 1.1458333333vw;
        margin-bottom: 1.0416666667vw;
    }
}
@media screen and (min-width: 1920px) {
    .hubspotFormBlock .hs-form .legal-consent-container .hs-richtext {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 20px;
    }
}

/* Ensure inputs within HubSpot's .input div take full width */
.hubspotFormBlock .hs-form .input {
    margin-right: 0 !important;
}
