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

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

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 {
    width: auto;
    margin: 0;
    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-white-01) !important;
    text-decoration: underline 2px var(--ecomm-color-secondary-02) !important;
}

/* ADD COUPON FORM */

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

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

@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%;
    }

}

/* ADD COUPON INPUT */

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-container.error .slds-input {
    border-color: var(--ecomm-color-error-01);
}

commerce_builder-cart-promotions commerce_cart-apply-coupon .coupon-input-container.error .slds-input:hover {
    border-color: var(--ecomm-color-error-01);
    outline-color: var(--ecomm-color-error-01) !important;
}

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-error-01);
    outline-color: var(--ecomm-color-error-01) !important;
}

/* 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 var(--ecomm-transition-color),
        border-color var(--ecomm-transition-border-color),
        background-color var(--ecomm-transition-background-color),
        box-shadow var(--ecomm-transition-box-shadow) !important;
}

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-button-brand-disabled-color) !important;
    border-color: var(--ecomm-button-brand-disabled-color) !important;
    background-color: var(--ecomm-button-brand-disabled-background-color) !important;
}

/* APPLY COUPON ERROR MESSAGE */

commerce_builder-cart-promotions commerce_cart-apply-coupon .slds-text-color_error {
    margin: 0;
    color: var(--ecomm-color-error-01);
}

/* 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: var(--ecomm-form-icon-clear-white);
    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;
}