:root {
    /*! put your custom css here */
    --sfpp-input-invalid-border: 1px solid #f43c3c;
    --sfpp-input-invalid-box-shadow: #f43c3c20 0 0 0 3px;
    --sfpp-input-focus-border: 1px solid #4E73F8;
    --sfpp-input-focus-box-shadow: #4E73F820 0 0 0 3px;
    --sfpp-form-label-font-size: 12px;



    /* Override SLDS input default */
    .slds-input {
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        color: #5A6474;
        line-height: 20px;
        border-radius: 8px;
        border: 1px solid #E1E3E6;
        padding: 12px 16px;
        background: white;
    }

    /* My Profile Page */
    commerce-my-account-profile lightning-input.slds-form-element div[part="input-text"] {
        min-height: 54px;
        border: var(--dxp-s-form-element-width-border) solid var(--dxp-s-form-element-color-border);
        border-radius: var(--dxp-s-form-element-radius-border);
    }

    commerce-my-account-profile lightning-input.slds-form-element.slds-has-error .slds-input:not(:focus-within),
    commerce-my-account-password lightning-input.slds-form-element.slds-has-error .slds-input:not(:focus-within),
    commerce-my-account-profile lightning-input.slds-form-element .slds-input,
    commerce-my-account-password lightning-input.slds-form-element .slds-input,
    commerce-my-account-profile lightning-input.slds-form-element div[part="input-container"],
    commerce-my-account-password lightning-input.slds-form-element div[part="input-container"] {
        border-radius: 8px;
        height: 100%;
    }

    lightning-input.slds-form-element div[part="input-text"][populated] .slds-form-element__label {
        font-size: 12px;
    }

    commerce_unified_checkout-multi-country-phone-field .slds-form-element .slds-form-element__control .slds-combobox_container:has(button.slds-has-focus) {
        display: none;
    }

    commerce_unified_checkout-multi-country-phone-field .slds-form-element .slds-form-element__control .slds-combobox__input.slds-has-focus,
    commerce-my-account-profile commerce_unified_checkout-multi-country-phone-field .slds-form-element .slds-form-element__control div[part="input-text"] {
        border-radius: 8px;
    }

    commerce_unified_checkout-multi-country-phone-field .slds-form-element .slds-form-element__control .slds-input {
        border-left: 1px;
    }

    /* Icon position */
    .slds-input__icon-group_right {
        right: 5px;
    }

    /* Caption text style */
    .slds-form-element__label {
        font-family: 'DM Sans', sans-serif;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        color: #757D8A;
    }

    lightning-input.slds-form-element div[part="input-text"] .slds-form-element__label, 
    lightning-input.slds-form-element div[part="input-text"]:focus-within .slds-form-element__label,
    lightning-combobox [part="combobox"] label.slds-form-element__label, lightning-combobox::part(label),
    lightning-lookup-address.slds-form-element:focus-within .slds-form-element__label,
    lightning-lookup-address.slds-form-element .slds-form-element__label {
        top: 10px;
        font-size: 12px;
    }

    /* Focus state */
    lightning-input.slds-form-element div[part="input-text"]:focus-within,
    lightning-combobox [part="combobox"] lightning-base-combobox .slds-combobox__form-element:has(.slds-input:focus),
    lightning-combobox [part="combobox"] lightning-base-combobox .slds-combobox__form-element:has(button.slds-combobox__input:focus),
    lightning-combobox.slds-has-error [part="combobox"] lightning-base-combobox .slds-combobox__form-element:has(.slds-input:focus),
    lightning-combobox::part(input):focus,
    lightning-combobox::part(input-button):focus,
    lightning-combobox.slds-has-error::part(input):focus,
    lightning-input.slds-form-element div[part="input-text"]:focus-within,
    lightning-lookup-address.slds-form-element div[part="input-text"]:focus-within,
    lightning-input.slds-form-element::part(input-text):focus-within,
    .Input--empty:focus {
        border: 4px solid #4E73F820;
        outline: 1px solid #4E73F8;
        outline-offset: -4px;
    }

    lightning-input.slds-form-element:not(.slds-has-error),
    lightning-textarea.slds-form-element:not(.slds-has-error),
    lightning-combobox.slds-form-element:not(.slds-has-error),
    lightning-lookup-address.slds-form-element:not(.slds-has-error) {
        padding-bottom: 1rem;
        padding-top: 2px;
    }

    /* Error state */

    lightning-input.slds-form-element.slds-has-error div[part="input-text"],
    lightning-input.slds-form-element[invalid] div[part="input-text"],
    lightning-combobox.slds-has-error [part="combobox"] lightning-base-combobox .slds-combobox__form-element,
    lightning-combobox.slds-has-error::part(input-button),
    lightning-lookup-address.slds-form-element.slds-has-error div[part="input-text"],
    lightning-lookup-address.slds-form-element[invalid] div[part="input-text"] {
        border: 4px solid #f43c3c20;
        outline: 1px solid #f44c3c;
        outline-offset: -4px;
        border-radius: 8px;
    }

    /* Error state 
    .slds-has-error .slds-form-element__control {
        border-radius: 12px;
        border: 4px #ff59591f solid;
        outline: 1px solid red;
        outline-offset: -4px;
        margin: 0px;
    }
*/
    .slds-form-element__help {
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        color: #F43C3C;
    }

    /* Success state if manually added */
    .slds-input.success {
        border-color: #08B295;
        box-shadow: 0 0 0 4px rgba(8, 178, 149, 0.2);
    }

    /* Disabled */
    .slds-input:disabled {
        background: #F8F8F8;
        color: #C3C7CE;
        border-color: #E1E3E6;
    }

    /* Save Button Hover */
    [kx-scope=button-brand]:hover:before {
        background: unset;
    }
}