/* Adding variables */
@import url("../../css/variables.css");

.hubspot-form__main-container {
    width: var(--width);
    padding: var(--padding);
    margin: 0 auto;
}

.hubspot-form__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--m-spacing);
    width: var(--full);
    max-width: 780px;
    padding: var(--xxxl-spacing) 0 calc(var(--xl-spacing) * 2);
    margin: 0 auto;
}

.hubspot-form__inner-container small {
    text-align: center;
}

/* HS Form Styles */
fieldset {
    padding: 0;
    border: none;
}

.hs-form-private {
    display: flex;
    flex-direction: column;
    gap: var(--m-spacing);
}

.form-columns-2 {
    display: flex;
    gap: var(--xl-spacing);
}

.form-columns-2 .hs-form-field {
    width: 50%;
}

.form-columns-1 .hs-form-field {
    width: 100%;
}

.hs-form-field .input {
    display: flex;
    outline: none;
    justify-content: center;
}

.hs-form-field [type="text"], .hs-form-field [type="email"], .hs-form-field [type="tel"], .hs-form-field [type="number"], .hs-form-field select {
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--s-spacing);
    font-weight: var(--regular);
    color: black;
    border-style: solid;
    border-width: 2px;
    border-color: var(--neopaleblue);
    border-radius: 0;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.09);
}

.hs-form-field textarea {
    width: 100%;
    max-width: 500px;
    min-height: 100px;
    padding: var(--s-spacing);
    font-weight: var(--regular);
    color: black;
    border-style: solid;
    border-width: 2px;
    border-color: var(--neopaleblue);
    border-radius: 0;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.09);
}

.hs-form-checkbox .hs-input {
    margin-right: 8px !important;
}

select.is-placeholder {
    color: #757579;
}

:focus-visible {
    outline: none !important;
    border-color: var(--neoblue);
}

.inputs-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.hs-form-booleancheckbox-display {
    display: flex;
    gap: var(--s-spacing);
    align-items: center;
}

.hs-form-booleancheckbox-display input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 26px;
    padding: 0.1rem;
    border: 2px solid var(--neopaleblue);
    border-radius: 0;
}

.hs-form-booleancheckbox-display input[type="checkbox"]::before {
    content: "";
    width: 26px;
    height: 26px;
    clip-path: polygon(
        10% 50%,
        20% 40%,
        40% 60%,
        80% 20%,
        90% 30%,
        40% 80%,
        10% 50%
    );
    transform: scale(0);
    background-color: var(--neoblue);
}

.hs-form-booleancheckbox-display input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.hs-form-booleancheckbox-display input[type="checkbox"]:hover {
    color: black;
}

.hs-form-booleancheckbox-display p {
    font-weight: var(--regular);
}

.actions {
    display: flex;
    justify-content: center;
}

.hs-submit .hs-button {
    display: inline-block;
    font-family: var(--racing);
    font-size: var(--buttonsmall);
    line-height: var(--lh-1);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neoblue);
    background: transparent;
    padding: calc(var(--s-spacing)* 3 / 4) var(--s-spacing);
    box-shadow: inset 0px 0px 0px 1px var(--neoblue);
    text-decoration: none;
    overflow: hidden;
    transition: color 0.4s;
    outline: none;
    border: none;
}

.hs-submit .hs-button:hover {
    color: white;
    background: var(--blue-gradient);
    box-shadow: inset 0px 0px 0px 1px transparent;
}

.hs-error-msgs li {
    margin-top: calc(var(--s-spacing) / 3);
    font-weight: var(--medium);
    color: #ef233c;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {

}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .hubspot-form__inner-container {
        max-width: 100%;
        padding: var(--xl-spacing) 0 var(--xxxl-spacing);
    }

    .form-columns-2 {
        gap: var(--l-spacing);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .form-columns-2 {
        flex-direction: column;
        gap: var(--m-spacing);
    }
    
    .form-columns-2 .hs-form-field {
        width: 100%;
    }
    
    .form-columns-1 .hs-form-field {
        width: 100%;
    }
    
    textarea {
        max-width: 100%;
    }
}