/* ==========================================================================
   AML Watcher Custom HubSpot Form Styles (BULLETPROOF OVERRIDE VERSION)
   ========================================================================== */

/* 1. Base Reset & Spacing */
.aml-new-hbspt-form {
    --ink:          #0A2540;
    --line:         #E6E9EC;
    --mist:         #F8F8FE;
    --placeholder:  #9DA8B3;
    --purple:       #645BFF;
    --purple-400:   #C1BDFF;
    --paper:        #FFFFFF;
    --radius-sm:    10px;

    
}

.aml-new-hbspt-form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.aml-new-hbspt-form .hs-form-field {
    margin-bottom: 24px !important;
}

/* 2. Main Labels */
.aml-new-hbspt-form label:not(.hs-form-checkbox-display):not(.hs-form-booleancheckbox-display) {
    display: block !important;
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 7px !important;
    color: var(--ink) !important;
}

.aml-new-hbspt-form .hs-form-required {
    color: var(--purple) !important;
    margin-left: 2px !important;
}

/* 3. Text Inputs & Textarea */
.aml-new-hbspt-form .hs-input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
    width: 100% !important;
    background-color: var(--mist) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.aml-new-hbspt-form .hs-input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]):focus {
    outline: none !important;
    background-color: var(--paper) !important;
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 3px rgba(100, 91, 255, .18) !important;
}

.aml-new-hbspt-form textarea.hs-input {
    min-height: 96px !important;
    resize: vertical !important;
}

/* 4. Two-Column Layout */
.aml-new-hbspt-form .form-columns-2 {
    display: flex !important;
    gap: 14px !important;
}

.aml-new-hbspt-form .form-columns-2 .hs-form-field {
    flex: 1 !important;
    margin-bottom: 24px !important;
}

/* 5. Phone Field Styling */
.aml-new-hbspt-form .hs-fieldtype-intl-phone {
    display: flex !important;
    background: var(--mist) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
}

.aml-new-hbspt-form .hs-fieldtype-intl-phone:focus-within {
    background: var(--paper) !important;
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 3px rgba(100, 91, 255, .18) !important;
}

.aml-new-hbspt-form .hs-fieldtype-intl-phone select {
    width: auto !important;
    max-width: 140px !important;
    border: none !important;
    border-right: 1px solid var(--line) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 13px !important;
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    appearance: auto !important; /* Restores the dropdown arrow if the theme hid it */
}

.aml-new-hbspt-form .hs-fieldtype-intl-phone input {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 !important;
    padding: 12px 13px !important;
}

/* 6. Pill Buttons (Solutions & Volume) - FORCING VISIBILITY */
.aml-new-hbspt-form .inputs-list.multi-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 11px 0 0 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force the list items themselves to show up */
.aml-new-hbspt-form .inputs-list.multi-container li.hs-form-checkbox {
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide actual checkbox visually */
.aml-new-hbspt-form .inputs-list.multi-container input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.aml-new-hbspt-form .inputs-list.multi-container .hs-form-checkbox-display {
    margin: 0 !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.aml-new-hbspt-form .inputs-list.multi-container .hs-form-checkbox-display span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 8px !important;
    background-color: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}

.aml-new-hbspt-form .inputs-list.multi-container input[type="checkbox"]:checked + span {
    border-color: var(--purple) !important;
    background-color: #EFEFFF !important; 
    color: var(--purple) !important;
    font-weight: 500 !important;
}

/* 7. Bottom Agreement Checkbox */
.aml-new-hbspt-form .hs_facia_contact_us_agreement .inputs-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 0 0 !important;
}

.aml-new-hbspt-form .hs_facia_contact_us_agreement .hs-form-booleancheckbox-display {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.aml-new-hbspt-form .hs_facia_contact_us_agreement input[type="checkbox"] {
    margin-top: 1px !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--purple) !important;
}

.aml-new-hbspt-form .hs_facia_contact_us_agreement span {
    font-size: 14px !important;
    color: var(--ink) !important;
    line-height: 1.5 !important;
}

/* 8. Submit Button - OVERRIDING THEME BUTTON STYLES */
.aml-new-hbspt-form .hs-submit {
    margin-top: 26px !important;
}

.aml-new-hbspt-form input[type="submit"] {
    width: 100% !important;
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
    max-width: 100% !important;
}

.aml-new-hbspt-form input[type="submit"]:hover {
    background-color: #EFEFFF !important;
    border-color: var(--purple) !important;
    color: var(--purple) !important;
}

/* 9. Mobile Responsiveness */
@media (max-width: 560px) {
    .aml-new-hbspt-form .form-columns-2 {
        flex-direction: column !important;
        gap: 0 !important;
    }
}