button.mfo_button {
  cursor: pointer;
  font-family:var(--fontFamily);
}

/*
  彈窗按鈕
  Primary
*/
button.mfo_button.popup {
  width: 257px;
  height: 50px;
  color: var( --colorOrange);
  background-color: white;
  border-radius: 25px;
  border: 1px solid var( --colorOrange);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.mfo_button.popup.wid_01{
  /*width: 148px;*/
  max-width: fit-content;
  min-width: 170px;
  min-height: 50px;
}
button.mfo_button.popup.wid_02{
  /*width: 184px;*/
  max-width: fit-content;
  min-width: 170px;
  min-height: 50px;
}
button.mfo_button.popup:hover {
  color: white;
  background-color: #F5AC86;
  border: 1px solid #F5AC86;
}
.mfo_button.reShopping{
  background-color: transparent;
  /*color: var(--colorBlue);*/
  color: var( --colorOrange);
  font-size: 20px;
  text-align: center;
  border: none;
  /*text-decoration: underline;*/
  width: 254px;
  height: 50px;
  border-radius: 100px;
  border: 2px solid var( --colorOrange);
}
.mfo_button.reShopping i{
  display: inline-block;
  background-image: url(../assets/icons/arrow_prev_step_orange.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  margin-right: 8px;
}
.mfo_button.reShopping:hover{
  box-shadow: var(--boxshadow);
}
.mfo_button.reShopping:active{
  font-weight: 700;
  box-shadow: var(--boxshadow);
}
button.mfo_button.popup:active {
  color: white;
  background-color: var( --colorOrange);
  border: 1px solid var( --colorOrange);
}
button.mfo_button.popup.orange {
  background: var( --colorOrange);
  border: 2px solid transparent;
  box-sizing: border-box;
  color: white;
}
button.mfo_button .loading{
  height: 20px;
  min-height: auto;
  margin-bottom: -4px;
}
button.mfo_button.popup.orange:hover {
  background: #F5AC86;
  border-color: #F5AC86;
}

button.mfo_button.popup.orange:active {
  box-shadow: var(--boxshadow);
  background: var( --colorOrange);
  border: none;
}

/*
  彈窗按鈕
  Secondary
*/
button.mfo_button.popup.secondary {
  width: 149px;
  height: 50px;
  color: #060B3F;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #060B3F;
}

button.mfo_button.popup.secondary:active {
  color: white;
  background-color: #060B3F;
  border: 1px solid #060B3F;
}

/*
  彈窗按鈕
  Tertiary
*/
button.mfo_button.popup.tertiary {
  width: 149px;
  height: 50px;
  color: white;
  background-color: var( --colorOrange);
  border-radius: 25px;
}
button.mfo_button.popup.tertiary.disabled {
  color: #979797;
  background-color: #EDEDED;
  border: 2px solid #D2D2D2;
  cursor: not-allowed;
}
button.mfo_button.popup.tertiary.disabled:hover{
  color: #979797 !important;
  background-color: #EDEDED !important;
  border: 2px solid #D2D2D2 !important;
  cursor: not-allowed;
}
button.mfo_button.popup.tertiary:active {
  color: white;
  background-color: #E44826;
  border: 1px solid #E44826;
}

/* 內有匡線按鈕 */
button.mfo_button.inner_border {
  height: 45px;
  font-weight: 500;
  font-size: 20px;
  border-radius: 22.5px;
  position: relative;
  background: #FF6900; 
  color: white;
  padding: 0 36px;
  border: none;
}

button.mfo_button.inner_border:hover {
  background: #F5AC86;
  box-shadow: var(--boxshadow);
}

button.mfo_button.inner_border::after {
  position: absolute;
  content: '';
  border: 1px solid white;
  width: calc(100% - 10px);
  height: 36px;
  border-radius: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button.mfo_button.inner_border:active {
  background-color: #CE2874;
}

button.mfo_button.inner_border:disabled {
  pointer-events: none;
  opacity: 0.4;
}

button.mfo_button.inner_border.icon {
  padding: 0 65px 0 36px;
}

button.mfo_button .arrowToRight {
  width: 15.64px;
  height: 13.58px;
  background-image: url('../assets/material/arrowToRight.svg');
  background-size: 100%;
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
}

/* Mobile 商品按鈕*/
button.mfo_button.product {
  width: 340px;
  height: 64px;
  border-radius: 33.5px;
  color: white;
  font-weight: 400;
  font-size: 20px;
  border: none;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
button.mfo_button.imgIcon img {
  margin: 0 8px;
}

button.mfo_button.product.orange {
  background: var( --colorOrange);
  border: 2px solid transparent;
  box-sizing: border-box;
}

button.mfo_button.product.orange:hover {
  background: #F5AC86;
  border-color: var( --colorOrange);
}

button.mfo_button.product.orange:active {
  box-shadow: var(--boxshadow);
  background: var( --colorOrange);
  border: none;
}

button.mfo_button.product.blue {
  background: #624BEE;
  border: 2px solid #624BEE;
}

button.mfo_button.product.blue:hover {
  background: #8773FF;
}
button.mfo_button.product.blue:active {
  box-shadow: var(--boxshadow);
  background: #624BEE;
}

button.mfo_button.product.pink {
  background: #CE2874;
}
button.mfo_button.product.pink:hover {
  background: #DD5298;
  border: 2px solid #CE2874;
}
button.mfo_button.product.pink:active {
  box-shadow: var(--boxshadow);
  background: #CE2874;
  border: none;
}

button.mfo_button.product.green {
  background: #0EAA7D;
}
button.mfo_button.product.green:hover {
  background: #34BF97;
  border: 2px solid #0EAA7D;
}
button.mfo_button.product.green:active {
  box-shadow: var(--boxshadow);
  background: #0EAA7D;
  border: none;
}

button.mfo_button.product.red {
  background: #F73603;
}
button.mfo_button.product.red:hover {
  background: #FB7B59;
  border: 2px solid #F73603;
}
button.mfo_button.product.red:active {
  box-shadow: var(--boxshadow);
  background: #F73603;
  border: none;
}

button.mfo_button.product.bell {
  background: #EDEDED;
  border: 2px solid #d2d2d2;
  color: #979797;
}
button.mfo_button.product.bell.green{
  background: #0EAA7D;
  color: #fff;
  border-color: #098979;;
}
button.mfo_button.product.bell.green:hover{
  background-color: #34BF97;
}
button.mfo_button.product.bell.green:active{
  border-color: #098979;
  background: #0EAA7D;
}
button.mfo_button.product:disabled,
button.mfo_button.product:disabled:hover {
  background: #EDEDED;
  border: 2px solid #d2d2d2;
  color: #979797;
  pointer-events: none;
}
button.mfo_button.sold_out:disabled,
button.mfo_button.sold_out:disabled:hover {
  background: #EDEDED;
  border: 2px solid #d2d2d2;
  color: #979797;
  pointer-events: none;
}
button.mfo_button.product .soldOut {
  width: 20.31px;
  height: 20px;
  background-image: url(../assets/icons/soldOut.svg);
  background-size: 100%;
  margin-right: 10px;
}
button.mfo_button.product .bid{
  width: 20px;
  height: 23px;
  background-image: url(../assets/icons/toBid.svg);
  background-size: 100%;
  margin-right: 10px;
}
button.mfo_button.product:disabled .bid{
  background-image: url(../assets/icons/toBidDisabled.svg);
}
button.mfo_button.product .discount{
  width: 24px;
  height: 23px;
  background-image: url(../assets/icons/buyShortEnjoyDiscounts.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 10px;
}
button.mfo_button.product .shoppingCart {
  width: 20.31px;
  height: 20px;
  background-image: url('../assets/icons/shoppingCart.svg');
  background-size: 100%;
  margin-right: 10px;
}

button.mfo_button.product:disabled .shoppingCart {
  background-image: url('../assets/icons/cartDisabled.svg');
}

button.mfo_button.product .contract {
  width: 29px;
  height: 29px;
  background-image: url('../assets/icons/contract.svg');
  background-size: 100%;
  margin-right: 10px;
}

button.mfo_button.product .buyDirect {
  width: 23.44px;
  height: 20.31px;
  background-image: url('../assets/icons/buyDirectly.svg');
  background-size: 100%;
  margin-right: 10px;
}
button.mfo_button.product:disabled .buyDirect {
  background-image: url('../assets/icons/buyDirectlyDisabled.svg');
}

button.mfo_button.product .bellRing {
  width: 24px;
  height: 24px;
  background-image: url('../assets/icons/bellRing.svg');
  background-size: 100%;
  margin-right: 10px;
}
button.mfo_button.product.sale_not_yet:disabled .alerm{
  background-image: url('../assets/icons/icon_alarm_white.svg');
  width: 28px;
  height: 28px;
  background-size: 100%;
  margin-right: 10px;
}
button.mfo_button .bellRing{
  width: 24px;
  height: 24px;
  background-image: url(../assets/icons/bellRing.svg);
  background-size: 100%;
  margin-right: 10px;
}
button.mfo_button .bill{
  width: 23px;
  height: 20px;
  background-image: url(../assets/icons/list_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 4px;
}
button.mfo_button.product.sale_not_yet:disabled, button.mfo_button.product.sale_not_yet:disabled:hover{
  color: #fff;
  background-color: var(--colorOrange);
  border: 2px solid var(--colorOrange);
}
@media (max-width: 768px) {
  button.mfo_button.popup.wid_02{
    /*height: 39px;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;*/
    min-width: auto;
    padding: 6px 15px;
    min-height: 39px;
  }
  button.mfo_button.popup.wid_01{
    /*height: 39px;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;*/
    min-width: auto;
    padding: 5px 15px;
    min-height: 39px;
  }
  
}
/* Mobile 彈窗按鈕*/
@media (max-width: 767px) {
  button.mfo_button.popup {
    /*max-width: 149px;*/
    min-width: 140px;
    max-width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
  }
  
}

/*
  方案卡片按鈕
  Primary
*/
button.mfo_button.plan {
  width: 195.49px;
  height: 50px;
  color: var( --colorOrange);
  background-color: white;
  border-radius:  var(--roundCornerSmall);
  border: 1px solid var( --colorOrange);
  font-size: 16px;
}

button.mfo_button.plan:active,button.mfo_button.plan.active {
  color: white;
  background-color: var( --colorOrange);
  border: 1px solid var( --colorOrange);
}
/* button.mfo_button.plan.active{
  cursor: not-allowed;
} */
button.mfo_button.plan:disabled{
  color: #979797;
  background-color: #EDEDED;
  border: 2px solid #D2D2D2;
  cursor: not-allowed;
}
/*
  方案卡片按鈕
  Secondary
*/
button.mfo_button.plan.secondary {
  width: 265.24px;
}




/* Mobile 方案卡片按鈕 */
@media (max-width: 767px) {
  button.mfo_button.plan {
    width: 149px;
  }
  button.mfo_button.plan.secondary {
    width: 209px;
  }
  button.mfo_button.inner_border {
    height: 26px;
    font-size: 12px;
    border-radius: 13px;
    background: #FF6900;
    padding: 0 19px;
    border: none;
  }
  button.mfo_button.inner_border::after {
    border: 1px solid white;
    width: calc(100% - 8px);
    height: 20px;
    border-radius: 10px;
  }
  button.mfo_button.inner_border.icon {
    padding: 0 34px 0 20px;
  }
  button.mfo_button .arrowToRight {
    width: 9.57px;
    height: 8.31px;
    right: 19px;
  }
  button.mfo_button.product {
    width: 160px;
    height: 48px;
    border-radius: 25.5px;
    font-size: 14px;
    border: none;
    margin: 10px;
  }
  button.mfo_button.popup{
    height: 38px;
  }
  button.mfo_button.popup.wid_01{
    width: 100px;
    flex: initial;
  }
  button.mfo_button.popup.wid_02{
    width: 210px;
    /*flex: initial;*/
    display: inline-flex;

  }
  .inline_container button.mfo_button.product{
    width: 280px;
  }
}



@media (max-width: 480px) {
  button.mfo_button.popup.wid_02{
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
    min-width: fit-content;    
    max-width: fit-content;
  }
}