/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-cart-promotions.css?{ versionKey }"/> */
/* 
    This component is used on the "Cart" page
*/

commerce_builder-cart-promotions:not(:empty) {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ecomm-color-white-06);
}

commerce_builder-cart-promotions commerce_builder-cart-apply-coupon + section:has(ul:empty) {
    margin: 0;
}

commerce_builder-cart-promotions commerce_cart-apply-coupon > div {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
}

/* ADD COUPON LINK */

commerce_builder-cart-promotions commerce_cart-apply-coupon dxp_base-button a.slds-button {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: underline 2px transparent !important;
    text-underline-offset: 6px !important;
    box-shadow: unset !important;
    transition: color 0.1s, text-decoration-color 0.1s;
}

commerce_builder-cart-promotions commerce_cart-apply-coupon dxp_base-button a.slds-button:hover,
commerce_builder-cart-promotions commerce_cart-apply-coupon dxp_base-button a.slds-button:focus {
    color: var(--ecomm-color-primary-02);
    text-decoration: underline 2px var(--ecomm-color-secondary-01) !important;
}

/* ADD COUPON FORM */

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-form {
    flex-wrap: nowrap !important;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-bottom: 0 !important;
}

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-form commerce_cart-apply-coupon-button {
    flex-grow: unset;
    margin-top: 24px;
}

@media (max-width: 479.98px), (min-width: 1024px) and (max-width: 1299.98px) {

    commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-form {
        flex-wrap: wrap !important;
    }

    commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-form .coupon-input-container,
    commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-form commerce_cart-apply-coupon-button {
        width: 100%;

        margin-top: 0;
    }

}

/* ADD COUPON INPUT */

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-container.error .slds-input {
    border-color: rgba(167, 5, 2, 1);
}

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-container.error .slds-input:hover {
    border-color: var(--ecomm-color-secondary-02);
    box-shadow:
        -2px -2px 0px 0px var(--ecomm-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-color-box-shadow-01),
        inset -1px -1px 0 0 var(--ecomm-color-error-01),
        inset 1px -1px 0 0 var(--ecomm-color-error-01),
        inset -1px 1px 0 0 var(--ecomm-color-error-01),
        inset 1px 1px 0 0 var(--ecomm-color-error-01);
}

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-container.error .slds-input:focus,
commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-container.error .slds-input:active {
    border-color: var(--ecomm-color-secondary-02);
    box-shadow:
        -2px -2px 0px 0px var(--ecomm-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-color-box-shadow-01),
        inset -1px -1px 0 0 var(--ecomm-color-error-01),
        inset 1px -1px 0 0 var(--ecomm-color-error-01),
        inset -1px 1px 0 0 var(--ecomm-color-error-01),
        inset 1px 1px 0 0 var(--ecomm-color-error-01);
}

/* APPLY COUPON BUTTON */

commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button .slds-button {
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s !important;
}

commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button .slds-button:hover,
commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button .slds-button:focus,
commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button .slds-button:active {
    color: var(--ecomm-color-white-01) !important;
    border-color: var(--ecomm-color-primary-02) !important;
    background-color: var(--ecomm-color-primary-02) !important;
}

commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button .slds-button:focus {
    box-shadow: var(--ecomm-button-box-shadow-focus);
}

commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button commerce-action-button:has(.slds-button:disabled) {
    pointer-events: none !important;
}

commerce_builder-cart-promotions commerce_cart-apply-coupon commerce_cart-apply-coupon-button .slds-button:disabled {
    color: var(--ecomm-color-gray-04) !important;
    border-color: var(--ecomm-color-white-06) !important;
    background-color: var(--ecomm-color-white-01) !important;
}

/* APPLY COUPON ERROR MESSAGE */

commerce_builder-cart-promotions commerce_cart-apply-coupon .slds-text-color_error {
    color: rgba(200, 33, 39, 1);
}

/* LIST OF APPLIED COUPONS */

commerce_builder-cart-promotions > div > section {
    margin-top: 1rem;
}

commerce_builder-cart-promotions > div > section li.dxp-list-item {
    margin-bottom: 0;
}

commerce_builder-cart-promotions > div > section li.dxp-list-item + li.dxp-list-item {
    margin-top: 1rem;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-promotion-details-popover {
    display: none;
}

/* APPLIED COUPON */

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill {
   width: 100%;
   overflow: unset;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column-gap: 0.5rem;
    padding: 0;
    border: 0;
    min-height: unset;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill .slds-pill__label {
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
    min-height: unset;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill lightning-button-icon,
commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill lightning-button-icon .slds-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: unset;
    padding: 0;
    border: 0;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill lightning-button-icon .slds-button::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34308 6.84332L11.9999 12.5001M11.9999 12.5001L17.6568 18.157M11.9999 12.5001L17.6567 6.84326M11.9999 12.5001L6.34302 18.157' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.1s;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill lightning-button-icon .slds-button:hover::after,
commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill lightning-button-icon .slds-button:focus::after {
    opacity: 0.8;
}

commerce_builder-cart-promotions commerce-cart-applied-promotion .promotion-information commerce-pill .slds-pill lightning-button-icon .slds-button lightning-primitive-icon {
    opacity: 0;
}