/* =========================================================
   MEHFARO PURCHASE FLOW V2
   CLEAN CART / CHAT SEPARATION
========================================================= */

/*
  Undo old experimental desktop grid.
  Drawer is one clean panel again.
*/
#cartDrawer.mf-purchase-flow-v2 {
  display: flex !important;
  flex-direction: column !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;

  width: min(520px, 100%) !important;
  max-width: 520px !important;

  height: 100dvh !important;
  max-height: 100dvh !important;

  overflow: hidden !important;
}


/* =========================================================
   CART / CHAT SWITCH
========================================================= */

#mfPurchaseTabs {
  flex: 0 0 auto !important;

  display: grid !important;
  grid-template-columns:
    1fr 1fr !important;

  gap: 6px !important;

  padding: 7px 10px !important;

  background: #fffaf0 !important;

  border-bottom:
    1px solid #ead8ad !important;
}

#mfPurchaseTabs button {
  min-height: 38px !important;

  border:
    1px solid #d9e4e0 !important;

  border-radius:
    11px !important;

  background:
    #ffffff !important;

  color:
    #17343a !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  cursor:
    pointer !important;
}

#mfPurchaseTabs button span {
  margin-right:
    5px !important;
}

#mfPurchaseTabs button.active {
  border-color:
    #158e83 !important;

  background:
    linear-gradient(
      135deg,
      #15958a,
      #0f6f69
    ) !important;

  color:
    #ffffff !important;
}


/* =========================================================
   INLINE CHECKOUT IS RETIRED
========================================================= */

#mfUnifiedCheckout {
  display: none !important;
}


/*
  Old success modal is no longer shown.
  Successful order moves customer to Chat.
*/
#orderSuccessModal {
  display: none !important;
}


/* =========================================================
   CART VIEW
========================================================= */

#cartDrawer.mf-purchase-view-cart
#cartItems {
  display: block !important;

  flex:
    1 1 auto !important;

  max-height:
    none !important;

  overflow-y:
    auto !important;
}

#cartDrawer.mf-purchase-view-cart
#emptyCart {
  display:
    block !important;
}

#cartDrawer.mf-purchase-view-cart
.cart-summary {
  display:
    block !important;

  flex:
    0 0 auto !important;
}


/*
  No chat/order history inside Cart.
*/
#cartDrawer.mf-purchase-view-cart
#mfUnifiedCartChat,

#cartDrawer.mf-purchase-view-cart
#mfUnifiedOrderChatDock {
  display:
    none !important;
}


/* =========================================================
   CHAT VIEW
========================================================= */

/*
  Cart products and subtotal are completely
  separate from Chat.
*/
#cartDrawer.mf-purchase-view-chat
#cartItems,

#cartDrawer.mf-purchase-view-chat
#emptyCart,

#cartDrawer.mf-purchase-view-chat
.cart-summary {
  display:
    none !important;
}


#cartDrawer.mf-purchase-view-chat
#mfUnifiedCartChat {
  display:
    flex !important;

  flex-direction:
    column !important;

  flex:
    1 1 auto !important;

  width:
    100% !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  overflow:
    hidden !important;

  margin:
    0 !important;
}


#cartDrawer.mf-purchase-view-chat
#mfUnifiedOrderChatDock {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  margin:
    0 !important;
}


/* =========================================================
   ORIGINAL SEPARATE CHECKOUT MODAL
========================================================= */

#checkoutModal.open {
  display:
    flex !important;

  z-index:
    99999 !important;
}


/*
  Checkout should scroll independently.
*/
#checkoutModal
.checkout-shell {
  max-height:
    92dvh !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  #cartDrawer.mf-purchase-flow-v2 {
    width:
      100% !important;

    max-width:
      100% !important;
  }

  #mfPurchaseTabs {
    padding:
      6px 8px !important;
  }

}