/* Content Container */
.content-container:has(.kb2b-quick-order) {
    display: flex;
    align-items: center;
}

/* Quick order card */
.kb2b-quick-order {
    padding: 20px !important;
    background:#FFF !important;
    border-radius: 12px !important;
    margin: 12px 12px 16px !important;
    min-width: 900px;

    /* Quick order card responsive width */
    @media only screen and (max-width: 1220px) {
        min-width: unset;
    }

    /* Step images */
    @media only screen and (max-width: 1024px) {
        .image-container {
            width: 35% !important;
        }
    }


    /* Desketop styles */
    @media only screen and (min-width: 1025px) {
        margin: 20px 30px 20px !important;
    }
    /* Title section space */
    webruntimedesign-component-wrapper.lwc-6jb05p8ont5-host.component-wrapper-spacer {
        margin-bottom: 0px !important;
    }
    /* Title */
    .kb2b-quick-order-title h1 {
        color: #002B4E;
        font-size: 24px;
        font-weight: 700;
        font-style: normal;
        line-height: 48.1px;
        padding-top: 60px !important;
        font-family: "League-Spartan-Bold";

        /* Tablet Styles */
        @media only screen and (min-width: 751px) {
            font-size: 37px;
        }
    }
    /* Subtitle */
    .kb2b-quick-order-subtitle p {
        font-size: 18px;
        font-weight: 400;
        color: #002B4E;
        font-style: normal;
        text-align: center;
        align-self: stretch;
        line-height: 30.8px;
        padding: 10px 0px !important;
        font-family: "PTSans-Regular" !important;

        /* Tablet Styles */
        @media only screen and (min-width: 751px) {
            font-size: 22px;
        }
    }
    /* How it works section - title */
    .kb2b-quick-order-steps summary { 
        gap: 10px;
        border-radius: 8px;
        background: #B0C8DC;
        padding: 8px !important;
        margin-bottom: 0px !important;

        /* Tablet Styles */
        @media only screen and (min-width: 751px) {
            font-size: 37px;
        }

        .lwc-6jb05p8ont5 h3 { 
            display: flex;
            color: #00213C;
            font-size: 18px;
            font-weight: 700;
            font-style: normal;
            line-height: 30.8px;
            float: inline-start;
            font-family: "PTSans-Bold" !important;

            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                font-size: 22px;
            }
        }
        .lwc-6jb05p8ont5 h3::before {
            content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2733%27%20height%3D%2733%27%20viewBox%3D%270%200%2033%2033%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M16.5%2023.1667V23.18M16.5%2018.5C16.4755%2018.0672%2016.5922%2017.6381%2016.8327%2017.2774C17.0732%2016.9166%2017.4244%2016.6438%2017.8333%2016.5C18.3345%2016.3084%2018.7843%2016.003%2019.1474%2015.608C19.5105%2015.2129%2019.777%2014.739%2019.9258%2014.2235C20.0746%2013.708%2020.1017%2013.1649%2020.005%2012.6372C19.9083%2012.1094%2019.6904%2011.6113%2019.3684%2011.182C19.0465%2010.7528%2018.6293%2010.4041%2018.1497%2010.1635C17.6701%209.92289%2017.1413%209.79687%2016.6047%209.79538C16.0681%209.79389%2015.5386%209.91697%2015.0577%2010.1549C14.5768%2010.3929%2014.1576%2010.7392%2013.8333%2011.1667M4.5%2016.5C4.5%2018.0759%204.81039%2019.6363%205.41345%2021.0922C6.0165%2022.5481%206.90042%2023.871%208.01472%2024.9853C9.12902%2026.0996%2010.4519%2026.9835%2011.9078%2027.5866C13.3637%2028.1896%2014.9241%2028.5%2016.5%2028.5C18.0759%2028.5%2019.6363%2028.1896%2021.0922%2027.5866C22.5481%2026.9835%2023.871%2026.0996%2024.9853%2024.9853C26.0996%2023.871%2026.9835%2022.5481%2027.5866%2021.0922C28.1896%2019.6363%2028.5%2018.0759%2028.5%2016.5C28.5%2014.9241%2028.1896%2013.3637%2027.5866%2011.9078C26.9835%2010.4519%2026.0996%209.12902%2024.9853%208.01472C23.871%206.90042%2022.5481%206.0165%2021.0922%205.41345C19.6363%204.81039%2018.0759%204.5%2016.5%204.5C14.9241%204.5%2013.3637%204.81039%2011.9078%205.41345C10.4519%206.0165%209.12902%206.90042%208.01472%208.01472C6.90042%209.12902%206.0165%2010.4519%205.41345%2011.9078C4.81039%2013.3637%204.5%2014.9241%204.5%2016.5Z%27%20stroke%3D%27%2311528F%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E');
            width: 32px;
            height: 32px;
            margin-right: 10px !important;
        }
        lightning-icon {
            width: 42px;
            padding-inline-end: unset !important;
        }
    }

    /* How it works section - dropdown steps */
    .kb2b-quick-order-steps {
        .lwc-4r1413ceuog.content {
            gap: 16px;
            overflow: hidden;
            background: #E6EDF4;
            padding: 18px !important;
            transform: translateY(-3px);
            border-radius: 0px 0px 8px 8px; 

            .kb2b-quick-order-steps-title h3 {
                font-size: 18px;
                color: #00213C;
                font-weight: 700;
                font-style: normal;
                line-height: 30.8px;
                font-family: "PTSans-Bold" !important;
                
                /* Tablet Styles */
                @media only screen and (min-width: 751px) {
                    font-size: 22px;
                }
            }
            .kb2b-quick-order-steps-text p {
                font-size: 16px;
                color: #00213C;
                font-weight: 400;
                line-height: 27px;
                font-style: normal;
                font-family: "PTSans-Regular" !important;

                /* Tablet Styles */
                @media only screen and (min-width: 751px) {
                    font-size: 18px;
                }
            }
        }
        dxp_layout-columns {
            margin-bottom: 10px; 
        }
    }

    /* Add products section */
    .kb2b-quick-order-products {
        commerce_builder-quick-order > div {
            padding: 20px !important;
        }
        /* Titles (Products(SKU) and Quantity) */
        .kb2b-quick-order-products-title h4.lwc-4rt99a8doqk {
            font-size: 18px;
            color: #002B4E;
            font-weight: 700;
            font-style: normal;
            line-height: 30.8px;
            font-family: "PTSans-Bold" !important;

            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                font-size: 22px;
            }
        }
        .quantity.lwc-786qlgaqej2 {
            padding: unset !important;
            margin-right: unset !important;
        }
        commerce-quick-order-item.lwc-786qlgaqej2 {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
        }
        /* Product Data */
        commerce-quick-order-item .lwc-3goeicp87lc.contents {
            font-size: 16px;   
            font-weight: 400;
            line-height: 27px; 
            font-style: normal;
            font-family: "PTSans-Regular" !important;
             
            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                font-size: 18px;
            }
        }
        /* Product Data Label */
         .slds-form-element__label{
            display: none;
         }
        /* Quantity selector */
        commerce-quantity-selector {
            width: 100%;
            display: flex;
            align-items: center;
            align-self: stretch;
            justify-content: center;
        }
        /* Number input and box */
        commerce-quantity-selector commerce-number-input input.number-input__input {
            max-width: 50px;
            font-size: 16px;
            font-weight: 400;
            line-height: 27px;
            border-radius: 4px;
            text-align: center;
            font-style: normal;
            color:#002B4E !important;
            background: #FFF !important;
            border: 1px solid #C7C7C7 !important;
            font-family: "PTSans-Regular" !important;

            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                max-width: 100%;
                font-size: 18px;
            }
        }
        /* Disabled quantity selector */
        commerce-quantity-selector *,
        commerce-quantity-selector *:disabled {
            border-color: #C7C7C7 !important;
        }
        /* Remove buton (X) */
        lightning-button-icon lightning-primitive-icon svg {
            gap: 4px;
            padding: 8px;
            display: none;
            align-items: center;
            justify-content: center;    
        }
        .remove-button lightning-primitive-icon {
            content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2233%22%20viewBox%3D%220%200%2032%2033%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M24%208.5L8%2024.5M8%208.5L24%2024.5%22%20stroke%3D%22%2311528F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
            width: 42px;
            height: 42px;
        }
        /* Input Field - Enter SKU */
        commerce-quick-order-item {
            display: flex;
            align-items: flex-start;
            place-items: anchor-center;
        }
        /* Input Field - Error message Styling */
        .slds-has-error .slds-input,
        .slds-has-error .slds-input:focus,
        .slds-has-error .slds-input:hover,
        .slds-has-error .slds-input:target,
        .slds-has-error .slds-input:active,
        .slds-has-error .slds-input:focus-within,
        .slds-has-error .slds-input:focus-visible, 
        .lwc-3goeicp87lc.contents .slds-has-error .slds-input {
            box-shadow: none !important;
            border-color: #E24B4B !important;
            border: 2px solid #E24B4B !important;
            background-color: #F4F4F4 !important;
        }
        /* Apply styles only when error message is active */
        .lwc-3goeicp87lc.contents .search-input.slds-has-error ~ .notifications {
            gap: 10px;
            padding: 8px;
            display: flex;
            font-weight: 400;
            line-height: 27px;
            font-style: normal;
            border-radius: 8px;
            align-items: center;
            margin: 10px 0px 0px;
            font-size: 16px !important;
            color: #5F2020 !important;
            background: #F6C7C7 !important;
            font-family: "PTSans-Regular" !important;

            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                font-size: 18px !important;
            }
        }
        /* Remove error message outline */
        .lwc-3goeicp87lc.contents .search-input.slds-has-error ~ .notifications:focus-visible {
            outline: none !important;
        }
        /* Label - Enter SKU */
        commerce-quick-order-item .lwc-3goeicp87lc.search-input label {
            font-size: 16px;   
            color: #787878;
            font-weight: 400;
            line-height: 27px; 
            font-style: normal;
            font-family: "PTSans-Regular" !important;

            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                font-size: 18px;
            }
        }
        /* Input Field - Enter SKU */
        commerce-quick-order-item .lwc-3goeicp87lc.search-input input {
            padding: 12px 16px !important;
            border-radius: 8px !important;
            border: 1px solid #002B4E !important;
            background:  #F4F4F4 !important;
        }
        /* + Add product */
        commerce-quick-order-display button.add-entry-button {
            font-size: 18px;
            color: #11528F;
            font-weight: 700;
            line-height: 27px;
            font-style: normal;
            padding-bottom: 20px !important;
            text-decoration: none !important;
            font-family: "PTSans-Bold" !important;
        } 
        commerce-quick-order-display button.add-entry-button:active, 
        commerce-quick-order-display button.add-entry-button:focus,
        commerce-quick-order-display button.add-entry-button:focus-visible,
        commerce-quick-order-display button.add-entry-button.slds-has-focus {
            border: unset !important;
            box-shadow: none !important;
            border-color: unset !important;
            background-color: unset !important;
            -webkit-box-shadow: none !important;
        } 
        /* + Add to cart button */
        commerce_product_details-add-to-cart-button button {
            gap: 8px;
            height: 60px;
            display: flex;
            color: #FFF;
            font-size: 20px;
            font-weight: 700;
            font-style: normal;
            align-items: center;
            line-height: 30.8px;
            border-radius: 999px;
            background: #11528F;
            justify-content: center;
            padding: 12px 20px 12px 16px;
            font-family: "PTSans-Bold" !important;

            /* Tablet Styles */
            @media only screen and (min-width: 751px) {
                font-size: 22px;
            }
        }
        /* Cart SVG */
        commerce_product_details-add-to-cart-button button::before {
            width: 24px;
            height: 24px;
            content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.5%2017C7.03043%2017%207.53914%2017.2107%207.91421%2017.5858C8.28929%2017.9609%208.5%2018.4696%208.5%2019C8.5%2019.5304%208.28929%2020.0391%207.91421%2020.4142C7.53914%2020.7893%207.03043%2021%206.5%2021C5.96957%2021%205.46086%2020.7893%205.08579%2020.4142C4.71071%2020.0391%204.5%2019.5304%204.5%2019C4.5%2018.4696%204.71071%2017.9609%205.08579%2017.5858C5.46086%2017.2107%205.96957%2017%206.5%2017ZM6.5%2017H17.5M6.5%2017V3H4.5M17.5%2017C18.0304%2017%2018.5391%2017.2107%2018.9142%2017.5858C19.2893%2017.9609%2019.5%2018.4696%2019.5%2019C19.5%2019.5304%2019.2893%2020.0391%2018.9142%2020.4142C18.5391%2020.7893%2018.0304%2021%2017.5%2021C16.9696%2021%2016.4609%2020.7893%2016.0858%2020.4142C15.7107%2020.0391%2015.5%2019.5304%2015.5%2019C15.5%2018.4696%2015.7107%2017.9609%2016.0858%2017.5858C16.4609%2017.2107%2016.9696%2017%2017.5%2017ZM6.5%205L12.5%205.429M19.638%2012.002L19.495%2013.002H6.495M15.5%206H21.5M18.5%203V9%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');

        }
    }
}