/* =========================================================
   MEHFARO - UNIFIED CART + CHAT
   FULL REPLACEMENT
   css/customer-chat-compact.css
========================================================= */


/* =========================================================
   REMOVE OLD SEPARATE WEBSITE CHAT UI

   IMPORTANT:
   Google / Guest identity system remains.
   WhatsApp support remains.
========================================================= */

.mf-customer-chat-fab,
.mf-customer-chat-overlay,
.mf-order-chat-launcher {
  display: none !important;
}


.mobile-bottom-nav [data-mf-mobile-chat] {
  display: none !important;
}


/* =========================================================
   MOBILE NAV BACK TO 4 ITEMS
========================================================= */

.mobile-bottom-nav {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    ) !important;
}


/* =========================================================
   UNIFIED CART DRAWER
========================================================= */

.cart-drawer.mf-unified-cart-chat {
  width:
    min(
      520px,
      100%
    ) !important;

  max-width:
    520px;

  height:
    100dvh !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  background:
    #f6f5f0 !important;

  box-shadow:
    -22px
    0
    70px
    rgba(9, 20, 24, .20);
}


/* =========================================================
   CART HEADER
========================================================= */

.mf-unified-cart-chat
.cart-header {
  flex:
    0
    0
    auto;

  min-height:
    74px;

  padding:
    13px
    16px !important;

  border-bottom:
    1px solid
    rgba(23, 32, 37, .09) !important;

  background:
    #172025;

  color:
    #ffffff;
}


.mf-unified-cart-chat
.cart-header small {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #78d5c8 !important;

  font-size:
    7px !important;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.mf-unified-cart-chat
.cart-header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    19px;

  line-height:
    1.05;
}


.mf-unified-cart-chat
#closeCart {
  width:
    36px !important;

  height:
    36px !important;

  flex:
    0
    0
    36px;

  display:
    grid;

  place-items:
    center;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    rgba(255, 255, 255, .11) !important;

  color:
    #ffffff !important;

  font-size:
    15px;

  cursor:
    pointer;
}


.mf-unified-cart-chat
#closeCart:hover {
  background:
    rgba(255, 255, 255, .18) !important;
}


/* =========================================================
   PRODUCT LIST AREA
========================================================= */

.mf-unified-cart-chat
.cart-items {
  flex:
    0
    1
    auto !important;

  min-height:
    0;

  max-height:
    31dvh;

  overflow-y:
    auto !important;

  padding:
    8px
    14px
    4px !important;

  background:
    #f8f7f2;
}


/* =========================================================
   COMPACT PRODUCT ROW
========================================================= */

.mf-unified-cart-chat
.cart-item {
  position:
    relative;

  display:
    grid !important;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    auto !important;

  align-items:
    start;

  gap:
    9px !important;

  margin-bottom:
    7px;

  padding:
    8px !important;

  border:
    1px solid
    rgba(23, 32, 37, .08) !important;

  border-radius:
    14px;

  background:
    #ffffff;
}


.mf-unified-cart-chat
.cart-item:last-child {
  margin-bottom:
    0;
}


.mf-unified-cart-chat
.cart-item img {
  width:
    52px !important;

  height:
    52px !important;

  min-width:
    52px;

  object-fit:
    cover;

  border-radius:
    10px !important;

  background:
    #f3f4f2;
}


.mf-unified-cart-chat
.cart-item-info {
  min-width:
    0;
}


.mf-unified-cart-chat
.cart-item-info h4 {
  margin:
    0
    0
    3px !important;

  overflow:
    hidden;

  color:
    #172025;

  font-size:
    11px !important;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mf-unified-cart-chat
.cart-item-info p {
  margin:
    0 !important;

  color:
    #138d83 !important;

  font-size:
    9px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   PRODUCT OPTIONS / META
========================================================= */

.mf-unified-cart-chat
.cart-item-info small,
.mf-unified-cart-chat
.cart-item-info .cart-item-options {
  display:
    block;

  margin-top:
    2px;

  color:
    #7d8785;

  font-size:
    7px;

  line-height:
    1.35;
}


/* =========================================================
   QUANTITY
========================================================= */

.mf-unified-cart-chat
.quantity-controls {
  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    0 !important;

  overflow:
    hidden;

  margin-top:
    6px !important;

  border:
    1px solid
    #d8e1de;

  border-radius:
    999px;

  background:
    #ffffff;
}


.mf-unified-cart-chat
.quantity-controls button {
  width:
    28px !important;

  height:
    28px !important;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color:
    #172025;

  font-size:
    15px;

  font-weight:
    900;

  cursor:
    pointer;
}


.mf-unified-cart-chat
.quantity-controls button:hover {
  background:
    #e8f5f2 !important;
}


.mf-unified-cart-chat
.quantity-controls span {
  min-width:
    30px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border-left:
    1px solid
    #e1e7e5;

  border-right:
    1px solid
    #e1e7e5;

  color:
    #138d83;

  font-size:
    10px;

  font-weight:
    900;
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.mf-unified-cart-chat
.remove-item {
  width:
    27px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    9px;

  background:
    #fff2ef !important;

  color:
    #cb5c46 !important;

  font-size:
    11px;

  cursor:
    pointer;
}


/* =========================================================
   EMPTY CART
========================================================= */

.mf-unified-cart-chat
.empty-cart {
  flex:
    0
    0
    auto !important;

  min-height:
    96px;

  padding:
    12px;

  border-bottom:
    1px solid
    rgba(23, 32, 37, .07);

  background:
    #f8f7f2;
}


.mf-unified-cart-chat
.empty-cart .empty-icon {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  margin:
    0
    auto
    5px;

  border-radius:
    10px;

  background:
    #dff1ed;

  color:
    #138d83;

  font-size:
    9px;

  font-weight:
    900;
}


.mf-unified-cart-chat
.empty-cart h3 {
  margin:
    0;

  color:
    #172025;

  font-size:
    12px;
}


.mf-unified-cart-chat
.empty-cart p {
  margin:
    3px
    0
    0;

  color:
    #77817f;

  font-size:
    8px;
}


/* =========================================================
   CART SUMMARY
========================================================= */

.mf-unified-cart-chat
.cart-summary {
  flex:
    0
    0
    auto;

  padding:
    9px
    14px !important;

  border-top:
    1px solid
    rgba(23, 32, 37, .07);

  border-bottom:
    1px solid
    rgba(23, 32, 37, .08);

  background:
    #ffffff;
}


.mf-unified-cart-chat
.cart-summary > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    32px;

  padding:
    0
    2px;
}


.mf-unified-cart-chat
.cart-summary > div span {
  color:
    #77817f;

  font-size:
    9px;
}


.mf-unified-cart-chat
.cart-summary > div strong {
  color:
    #172025;

  font-size:
    14px;
}


.mf-unified-cart-chat
.cart-summary > p {
  margin:
    3px
    0
    8px !important;

  color:
    #87908e;

  font-size:
    7px !important;

  line-height:
    1.4;
}


.mf-unified-cart-chat
.checkout-btn {
  width:
    100%;

  min-height:
    38px !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    #138d83 !important;

  color:
    #ffffff !important;

  font-size:
    9px !important;

  font-weight:
    900;

  cursor:
    pointer;
}


.mf-unified-cart-chat
.checkout-btn:hover {
  background:
    #0f7c73 !important;
}


/* =========================================================
   UNIFIED CHAT
========================================================= */

.mf-unified-chat {
  flex:
    1
    1
    auto;

  min-height:
    220px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    #eef3f1;
}


/* =========================================================
   CHAT HEADER
========================================================= */

.mf-unified-chat-head {
  flex:
    0
    0
    auto;

  min-height:
    47px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    8px
    14px;

  border-bottom:
    1px solid
    rgba(23, 32, 37, .08);

  background:
    #f8faf9;
}


.mf-unified-chat-head > div {
  min-width:
    0;
}


.mf-unified-chat-head small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    #c48617;

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.mf-unified-chat-head strong {
  display:
    block;

  color:
    #172025;

  font-size:
    11px;
}


.mf-unified-chat-head
[data-mf-chat-identity] {
  max-width:
    50%;

  overflow:
    hidden;

  padding:
    4px
    7px;

  border-radius:
    999px;

  background:
    #dff3ef;

  color:
    #0b756c;

  font-size:
    7px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CHAT MESSAGES
========================================================= */

.mf-unified-chat-messages {
  flex:
    1
    1
    auto;

  min-height:
    100px;

  overflow-y:
    auto;

  padding:
    11px
    12px;

  background:
    linear-gradient(
      180deg,
      #edf3f1,
      #f4f6f5
    );
}


/* =========================================================
   MESSAGE ROWS
========================================================= */

.mf-unified-message {
  display:
    flex;

  margin-bottom:
    6px;
}


.mf-unified-message.owner {
  justify-content:
    flex-start;
}


.mf-unified-message.customer {
  justify-content:
    flex-end;
}


.mf-unified-message.system {
  justify-content:
    center;
}


/* =========================================================
   WHATSAPP STYLE BUBBLES
========================================================= */

.mf-unified-bubble {
  width:
    fit-content;

  max-width:
    78%;

  padding:
    7px
    9px;

  border-radius:
    12px;

  font-size:
    9px;

  line-height:
    1.42;

  white-space:
    pre-line;

  word-break:
    break-word;
}


.mf-unified-message.owner
.mf-unified-bubble {
  border-bottom-left-radius:
    4px;

  background:
    #ffffff;

  color:
    #263034;

  box-shadow:
    0
    3px
    10px
    rgba(18, 31, 35, .06);
}


.mf-unified-message.customer
.mf-unified-bubble {
  border-bottom-right-radius:
    4px;

  background:
    #138d83;

  color:
    #ffffff;
}


.mf-unified-message.system
.mf-unified-bubble {
  max-width:
    90%;

  padding:
    5px
    8px;

  background:
    #dde6e3;

  color:
    #687270;

  font-size:
    7px;

  text-align:
    center;
}


/* =========================================================
   QUICK CHAT ACTIONS
========================================================= */

.mf-unified-chat-actions {
  flex:
    0
    0
    auto;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  padding:
    7px
    10px
    0;

  background:
    #ffffff;
}


.mf-unified-chat-actions:empty {
  display:
    none;
}


.mf-unified-chat-actions button {
  min-height:
    31px;

  padding:
    0
    10px;

  border:
    1px solid
    #d9e2df;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #273135;

  font-size:
    8px;

  font-weight:
    850;

  cursor:
    pointer;
}


.mf-unified-chat-actions
button.primary {
  border-color:
    #138d83;

  background:
    #138d83;

  color:
    #ffffff;
}


/* =========================================================
   CHAT COMPOSER
========================================================= */

.mf-unified-chat-composer {
  flex:
    0
    0
    auto;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    end;

  gap:
    7px;

  padding:
    8px
    10px
    10px;

  border-top:
    1px solid
    rgba(23, 32, 37, .07);

  background:
    #ffffff;
}


.mf-unified-chat-composer
[data-mf-unified-field] {
  min-width:
    0;
}


/* =========================================================
   FIELD LABEL
========================================================= */

.mf-unified-field-label {
  display:
    block;
}


.mf-unified-field-label > span {
  display:
    block;

  margin:
    0
    0
    4px
    2px;

  color:
    #65706e;

  font-size:
    7px;

  font-weight:
    800;
}


/* =========================================================
   INPUTS
========================================================= */

.mf-unified-chat-composer input,
.mf-unified-chat-composer select,
.mf-unified-chat-composer textarea {
  width:
    100%;

  min-height:
    38px;

  padding:
    8px
    11px;

  border:
    1px solid
    #d8e0de;

  border-radius:
    12px;

  outline:
    none;

  background:
    #f8faf9;

  color:
    #172025;

  font-family:
    inherit;

  font-size:
    9px;
}


.mf-unified-chat-composer textarea {
  min-height:
    54px;

  resize:
    none;
}


.mf-unified-chat-composer input:focus,
.mf-unified-chat-composer select:focus,
.mf-unified-chat-composer textarea:focus {
  border-color:
    #138d83;

  box-shadow:
    0
    0
    0
    3px
    rgba(19, 141, 131, .09);
}


/* =========================================================
   SEND / CONTINUE BUTTON
========================================================= */

.mf-unified-chat-composer
[data-mf-unified-send] {
  min-width:
    68px;

  min-height:
    38px;

  padding:
    0
    11px;

  border:
    0;

  border-radius:
    12px;

  background:
    #172025;

  color:
    #ffffff;

  font-size:
    8px;

  font-weight:
    900;

  cursor:
    pointer;
}


.mf-unified-chat-composer
[data-mf-unified-send]:hover {
  background:
    #263237;
}


/* =========================================================
   DESKTOP HEADER SAFETY
   Cart must not fight hamburger/search buttons.
========================================================= */

@media (min-width: 981px) {

  .header-actions {
    position:
      relative;

    z-index:
      10;
  }


  .header-actions
  .menu-toggle {
    display:
      none !important;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (
  min-width: 781px
)
and
(
  max-width: 1100px
) {

  .cart-drawer.mf-unified-cart-chat {
    width:
      min(
        470px,
        100%
      ) !important;

    max-width:
      470px;
  }


  .mf-unified-cart-chat
  .cart-items {
    max-height:
      29dvh;
  }


  .mf-unified-bubble {
    max-width:
      82%;
  }

}


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

@media (max-width: 780px) {

  /* ---------------------------------------------------------
     Full screen cart/chat
  --------------------------------------------------------- */

  .cart-drawer.mf-unified-cart-chat {
    top:
      0 !important;

    right:
      -100% !important;

    bottom:
      auto !important;

    left:
      auto !important;

    width:
      100% !important;

    max-width:
      none !important;

    height:
      100dvh !important;

    padding:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;
  }


  .cart-drawer.mf-unified-cart-chat.open {
    right:
      0 !important;
  }


  /* ---------------------------------------------------------
     Hide store header behind cart
  --------------------------------------------------------- */

  body.mf-cart-chat-open
  .site-header,
  body.mf-cart-chat-open
  header.header {
    visibility:
      hidden;
  }


  /* ---------------------------------------------------------
     Cart header
  --------------------------------------------------------- */

  .mf-unified-cart-chat
  .cart-header {
    position:
      relative;

    z-index:
      10;

    min-height:
      61px;

    padding:
      calc(
        8px +
        env(
          safe-area-inset-top
        )
      )
      11px
      8px !important;
  }


  .mf-unified-cart-chat
  .cart-header h2 {
    font-size:
      16px;
  }


  .mf-unified-cart-chat
  #closeCart {
    width:
      34px !important;

    height:
      34px !important;
  }


  /* ---------------------------------------------------------
     Product section compact
  --------------------------------------------------------- */

  .mf-unified-cart-chat
  .cart-items {
    max-height:
      26dvh;

    padding:
      6px
      9px
      2px !important;
  }


  .mf-unified-cart-chat
  .cart-item {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      auto !important;

    gap:
      7px !important;

    margin-bottom:
      5px;

    padding:
      6px !important;

    border-radius:
      11px;
  }


  .mf-unified-cart-chat
  .cart-item img {
    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px;
  }


  .mf-unified-cart-chat
  .cart-item-info h4 {
    font-size:
      10px !important;
  }


  .mf-unified-cart-chat
  .cart-item-info p {
    font-size:
      8px !important;
  }


  .mf-unified-cart-chat
  .quantity-controls {
    margin-top:
      4px !important;
  }


  .mf-unified-cart-chat
  .quantity-controls button {
    width:
      25px !important;

    height:
      25px !important;

    font-size:
      13px;
  }


  .mf-unified-cart-chat
  .quantity-controls span {
    min-width:
      27px;

    height:
      25px;

    font-size:
      9px;
  }


  .mf-unified-cart-chat
  .remove-item {
    width:
      25px;

    height:
      25px;
  }


  /* ---------------------------------------------------------
     Summary
  --------------------------------------------------------- */

  .mf-unified-cart-chat
  .cart-summary {
    padding:
      6px
      9px !important;
  }


  .mf-unified-cart-chat
  .cart-summary > div {
    min-height:
      26px;
  }


  .mf-unified-cart-chat
  .cart-summary > div strong {
    font-size:
      12px;
  }


  .mf-unified-cart-chat
  .cart-summary > p {
    display:
      none;
  }


  .mf-unified-cart-chat
  .checkout-btn {
    min-height:
      34px !important;

    font-size:
      8px !important;
  }


  /* ---------------------------------------------------------
     Chat gets remaining space
  --------------------------------------------------------- */

  .mf-unified-chat {
    min-height:
      0;

    flex:
      1
      1
      auto;
  }


  .mf-unified-chat-head {
    min-height:
      39px;

    padding:
      6px
      9px;
  }


  .mf-unified-chat-head strong {
    font-size:
      10px;
  }


  .mf-unified-chat-head
  [data-mf-chat-identity] {
    max-width:
      48%;

    font-size:
      6px;
  }


  .mf-unified-chat-messages {
    min-height:
      70px;

    padding:
      8px
      9px;
  }


  .mf-unified-bubble {
    max-width:
      84%;

    padding:
      6px
      8px;

    font-size:
      8px;

    line-height:
      1.38;
  }


  .mf-unified-message.system
  .mf-unified-bubble {
    font-size:
      6px;
  }


  .mf-unified-chat-actions {
    gap:
      5px;

    padding:
      5px
      8px
      0;
  }


  .mf-unified-chat-actions button {
    min-height:
      29px;

    padding:
      0
      9px;

    font-size:
      7px;
  }


  .mf-unified-chat-composer {
    gap:
      5px;

    padding:
      6px
      8px
      calc(
        7px +
        env(
          safe-area-inset-bottom
        )
      );
  }


  .mf-unified-chat-composer input,
  .mf-unified-chat-composer select,
  .mf-unified-chat-composer textarea {
    min-height:
      35px;

    padding:
      7px
      9px;

    border-radius:
      10px;

    font-size:
      8px;
  }


  .mf-unified-chat-composer textarea {
    min-height:
      46px;
  }


  .mf-unified-chat-composer
  [data-mf-unified-send] {
    min-width:
      59px;

    min-height:
      35px;

    padding:
      0
      8px;

    border-radius:
      10px;

    font-size:
      7px;
  }


  /* ---------------------------------------------------------
     Mobile bottom nav remains 4 items
  --------------------------------------------------------- */

  .mobile-bottom-nav {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;
  }


  /*
    Hide bottom navigation only while unified cart is open.
    Prevents it from covering chat composer.
  */

  body.mf-cart-chat-open
  .mobile-bottom-nav {
    display:
      none !important;
  }

}


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

@media (max-width: 430px) {

  .mf-unified-cart-chat
  .cart-items {
    max-height:
      24dvh;
  }


  .mf-unified-cart-chat
  .cart-item {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      auto !important;
  }


  .mf-unified-cart-chat
  .cart-item img {
    width:
      40px !important;

    height:
      40px !important;

    min-width:
      40px;
  }


  .mf-unified-cart-chat
  .cart-item-info h4 {
    max-width:
      180px;
  }


  .mf-unified-bubble {
    max-width:
      88%;
  }


  .mf-unified-chat-head
  [data-mf-chat-identity] {
    max-width:
      43%;
  }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 360px) {

  .mf-unified-cart-chat
  .cart-header h2 {
    font-size:
      15px;
  }


  .mf-unified-cart-chat
  .cart-items {
    max-height:
      22dvh;
  }


  .mf-unified-cart-chat
  .cart-item {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      24px !important;
  }


  .mf-unified-cart-chat
  .cart-item img {
    width:
      36px !important;

    height:
      36px !important;

    min-width:
      36px;
  }


  .mf-unified-cart-chat
  .cart-item-info h4 {
    max-width:
      145px;

    font-size:
      9px !important;
  }


  .mf-unified-chat-head
  [data-mf-chat-identity] {
    display:
      none;
  }


  .mf-unified-chat-composer
  [data-mf-unified-send] {
    min-width:
      54px;
  }

}
/* =========================================================
   FIX: HIDE CART + CHAT COMPLETELY WHEN CLOSED
========================================================= */

.cart-drawer.mf-unified-cart-chat {
  right: 0 !important;

  transform:
    translateX(105%) !important;

  transition:
    transform .35s ease !important;
}


.cart-drawer.mf-unified-cart-chat.open {
  right: 0 !important;

  transform:
    translateX(0) !important;
}


/* MOBILE */
@media (max-width: 780px) {

  .cart-drawer.mf-unified-cart-chat {
    right: 0 !important;

    transform:
      translateX(105%) !important;
  }


  .cart-drawer.mf-unified-cart-chat.open {
    right: 0 !important;

    transform:
      translateX(0) !important;
  }

}
/* =========================================================
   CHECKOUT FULL SCROLL FIX
========================================================= */

#mfUnifiedCheckout {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  max-height:
    calc(100dvh - 120px) !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  padding-bottom:
    120px !important;

  scrollbar-gutter:
    stable;
}


/* Keep checkout top controls visible */

#mfUnifiedCheckout .mfco-head {
  position:
    sticky;

  top:
    0;

  z-index:
    20;

  padding:
    8px 0;

  background:
    #f8fafc;
}


/* Mobile */

@media (max-width: 780px) {

  #mfUnifiedCheckout {
    max-height:
      calc(100dvh - 70px) !important;

    padding-bottom:
      calc(
        130px +
        env(safe-area-inset-bottom)
      ) !important;
  }

}
/* =========================================================
   MEHFARO CHECKOUT - COMPACT PREMIUM LOOK
========================================================= */

/* Checkout open ho to chat bilkul hide */
.mf-unified-chat[hidden] {
  display: none !important;
}


/* Checkout open hone ke baad old proceed button hide */
.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.checkout-btn {
  display: none !important;
}


/* Product area visible rakho */
.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-items {
  flex: 0 0 auto !important;
  min-height: 76px !important;
  max-height: 145px !important;
  overflow-y: auto !important;

  padding:
    7px
    10px !important;

  background: #f7f8f6;
}


/* Product card cleaner */
.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item {
  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto !important;

  gap: 8px !important;

  padding: 7px !important;

  margin-bottom: 5px !important;

  border-radius: 12px !important;
}


.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item img {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}


/* Top cart subtotal compact */
.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-summary {
  padding:
    5px
    10px !important;
}


.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-summary > div {
  min-height: 24px !important;
}


.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-summary > p {
  display: none !important;
}


/* Main checkout card */
#mfUnifiedCheckout {
  margin:
    0
    8px
    8px !important;

  padding:
    10px
    12px
    28px !important;

  max-height:
    calc(100dvh - 205px) !important;

  border:
    1px solid
    #dde5e2 !important;

  border-radius:
    16px !important;

  background:
    #ffffff !important;

  box-shadow:
    0
    8px
    24px
    rgba(15, 23, 42, .06);

  overflow-y:
    auto !important;
}


/* Compact header */
#mfUnifiedCheckout .mfco-head {
  margin:
    0
    0
    8px !important;

  padding:
    3px
    0
    8px !important;

  border-bottom:
    1px solid
    #edf1ef;

  background:
    #ffffff !important;
}


#mfUnifiedCheckout .mfco-head small {
  font-size:
    8px !important;
}


#mfUnifiedCheckout .mfco-head h3 {
  font-size:
    15px !important;
}


#mfUnifiedCheckout .mfco-head p {
  margin-top:
    2px !important;

  font-size:
    9px !important;
}


/* Small back button */
#mfUnifiedCheckout .mfco-back {
  height:
    30px !important;

  padding:
    0
    10px !important;

  border-radius:
    9px !important;

  font-size:
    10px !important;
}


/* Delivery summary compact */
#mfUnifiedCheckout .mfco-summary {
  gap:
    4px !important;

  padding:
    8px
    10px !important;

  margin-bottom:
    9px !important;

  border-radius:
    11px !important;
}


#mfUnifiedCheckout .mfco-row {
  font-size:
    10px !important;
}


/* Form tighter */
#mfUnifiedCheckout .mfco-grid {
  gap:
    7px
    8px !important;
}


#mfUnifiedCheckout .mfco-field {
  gap:
    3px !important;
}


#mfUnifiedCheckout .mfco-field span {
  font-size:
    9px !important;
}


/* Name + phone side by side */
@media (min-width: 621px) {

  #mfUnifiedCheckout
  .mfco-grid
  > .mfco-field.full:nth-child(1),

  #mfUnifiedCheckout
  .mfco-grid
  > .mfco-field.full:nth-child(2) {
    grid-column:
      auto !important;
  }

}


/* Inputs smaller + premium */
#mfUnifiedCheckout input,
#mfUnifiedCheckout select,
#mfUnifiedCheckout textarea {
  min-height:
    36px !important;

  padding:
    7px
    9px !important;

  border:
    1px solid
    #d9e2df !important;

  border-radius:
    10px !important;

  background:
    #fbfcfc !important;

  font-size:
    11px !important;
}


/* Address box */
#mfUnifiedCheckout textarea {
  min-height:
    58px !important;

  max-height:
    74px !important;
}


/* COD box compact */
#mfUnifiedCheckout .mfco-cod {
  margin-top:
    9px !important;

  padding:
    8px
    10px !important;

  border-radius:
    11px !important;
}


/* Confirm button */
#mfUnifiedCheckout .mfco-confirm {
  min-height:
    38px !important;

  margin-top:
    8px !important;

  border-radius:
    11px !important;

  font-size:
    10px !important;
}


/* Bottom note */
#mfUnifiedCheckout .mfco-note {
  margin:
    5px
    0
    0 !important;

  font-size:
    8px !important;
}


/* Mobile */
@media (max-width: 620px) {

  #mfUnifiedCheckout {
    margin:
      0
      5px
      5px !important;

    padding:
      9px
      9px
      26px !important;

    max-height:
      calc(100dvh - 180px) !important;
  }


  #mfUnifiedCheckout .mfco-head p {
    display:
      none;
  }


  .mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
  .cart-items {
    max-height:
      120px !important;
  }

}
/* =========================================================
   CHECKOUT - ULTRA COMPACT PRODUCT LIST
========================================================= */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-items {
  flex: 0 0 auto !important;

  min-height: 0 !important;
  max-height: 145px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 5px 7px !important;

  scrollbar-width: thin;
}


/* PRODUCT ROW */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item {
  grid-template-columns:
    36px
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  gap: 6px !important;

  min-height: 46px !important;

  margin-bottom: 4px !important;

  padding: 4px 5px !important;

  border-radius: 9px !important;
}


/* PRODUCT IMAGE */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;

  border-radius: 7px !important;
}


/* PRODUCT NAME */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item-info h4 {
  margin: 0 0 1px !important;

  font-size: 9px !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* PRICE */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item-info p {
  margin: 0 !important;

  font-size: 8px !important;
  line-height: 1.1 !important;
}


/* OPTIONS / SKU */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item-info small,
.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item-options {
  margin-top: 1px !important;

  font-size: 6px !important;
  line-height: 1.1 !important;
}


/* QUANTITY */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.quantity-controls {
  margin-top: 2px !important;
}


.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.quantity-controls button {
  width: 20px !important;
  height: 20px !important;

  font-size: 10px !important;
}


.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.quantity-controls span {
  min-width: 21px !important;
  height: 20px !important;

  font-size: 7px !important;
}


/* REMOVE BUTTON */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.remove-item {
  width: 21px !important;
  height: 21px !important;

  font-size: 10px !important;
}


/* EACH LAST ITEM */

.mf-unified-cart-chat:has(#mfUnifiedCheckout:not([hidden]))
.cart-item:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   ACTIVE ORDER CHAT - INSIDE CART DRAWER
========================================================= */

#mfUnifiedCartChat.mf-active-order-chat
> .mf-unified-chat-messages,

#mfUnifiedCartChat.mf-active-order-chat
> .mf-unified-chat-composer {
  display: none !important;
}


#mfUnifiedOrderChatDock {
  width: 100%;
  min-height: 0;
  background: #f5f7f6;
}


/* old floating launcher never show here */

#mfUnifiedOrderChatDock
.mf-order-chat-launcher {
  display: none !important;
}


/* overlay becomes normal drawer content */

#mfUnifiedOrderChatDock
.mf-order-chat-overlay {
  position: static !important;
  inset: auto !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  padding: 0 !important;

  background: transparent !important;

  backdrop-filter: none !important;

  overflow: visible !important;
}


/* old popup shell becomes embedded */

#mfUnifiedOrderChatDock
.mf-order-chat-shell {
  width: 100% !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* duplicate popup header not needed */

#mfUnifiedOrderChatDock
.mf-order-chat-header {
  display: none !important;
}


/* force one-column inside Cart drawer */

#mfUnifiedOrderChatDock
.mf-order-chat-layout {
  display: block !important;

  width: 100% !important;

  min-height: 0 !important;

  overflow: visible !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-left {
  width: 100% !important;

  overflow: visible !important;

  padding: 8px !important;

  border-right: 0 !important;
}


/* use compact product cards */

#mfUnifiedOrderChatDock
.mf-order-chat-table-wrap {
  display: none !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-items {
  display: block !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card {
  margin-bottom: 8px !important;

  padding: 10px !important;

  border-radius: 13px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head {
  margin-bottom: 8px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head h3 {
  font-size: 13px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-item {
  margin-bottom: 6px !important;

  padding: 9px !important;

  border-radius: 11px !important;
}


/* summary */

#mfUnifiedOrderChatDock
.mf-order-chat-summary {
  gap: 0 !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-summary > div {
  padding: 8px 5px !important;
}


/* REAL CHAT */

#mfUnifiedOrderChatDock
.mf-order-chat-right {
  width: auto !important;

  min-height: 360px !important;

  margin: 0 8px 12px !important;

  overflow: hidden !important;

  border: 1px solid #dce4e1 !important;
  border-radius: 14px !important;

  background: #eef3f1 !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-conversation-head {
  padding: 10px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  min-height: 230px !important;
  max-height: 340px !important;

  overflow-y: auto !important;

  padding: 10px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: sticky !important;

  bottom: 0 !important;

  padding: 8px !important;

  background: #ffffff !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-bubble {
  max-width: 88% !important;
}


/* drawer itself remains scrollable */

.mf-unified-cart-chat:has(
  #mfUnifiedOrderChatDock
  .mf-order-chat-docked
) {
  overflow-y: auto !important;
}
/* =========================================================
   ACTIVE ORDER CHAT - COMPACT FIXED LAYOUT
========================================================= */

/* Drawer full height, internal sections controlled */
#mfUnifiedCartChat.mf-active-order-chat {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  overflow: hidden !important;
}


/* Agar cart empty hai to useless empty-cart area hata do */
#mfUnifiedCartChat.mf-active-order-chat:has(.empty-cart)
.cart-items,

#mfUnifiedCartChat.mf-active-order-chat:has(.empty-cart)
.cart-summary {
  display: none !important;
}


/* Old checkout button bhi empty cart par hide */
#mfUnifiedCartChat.mf-active-order-chat:has(.empty-cart)
.checkout-btn {
  display: none !important;
}


/* Existing Order & Chat heading sirf compact header rahe */
#mfUnifiedCartChat.mf-active-order-chat
.mf-unified-chat {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}


#mfUnifiedCartChat.mf-active-order-chat
.mf-unified-chat-head {
  min-height: 40px !important;
  padding: 6px 10px !important;
}


/* Real order-chat remaining space le */
#mfUnifiedOrderChatDock {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
}


/* Popup shell -> internal app */
#mfUnifiedOrderChatDock
.mf-order-chat-overlay {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}


/* Main order/chat layout */
#mfUnifiedOrderChatDock
.mf-order-chat-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}


/* =========================================================
   TOP ORDER DETAILS - SMALL SCROLLABLE AREA
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-left {
  flex: 0 0 auto !important;

  width: 100% !important;
  max-height: 245px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 6px !important;

  border: 0 !important;

  background: #f6f8f7 !important;

  scrollbar-width: thin;
}


/* Compact cards */
#mfUnifiedOrderChatDock
.mf-order-chat-card {
  margin-bottom: 5px !important;

  padding: 8px !important;

  border-radius: 11px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head {
  margin-bottom: 6px !important;
  gap: 6px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head h3 {
  font-size: 12px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head small {
  margin-top: 1px !important;
  font-size: 7px !important;
}


/* Product compact */
#mfUnifiedOrderChatDock
.mf-order-chat-mobile-item {
  margin-bottom: 4px !important;

  padding: 7px !important;

  border-radius: 9px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-item h4 {
  margin: 0 0 5px !important;

  font-size: 10px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-grid {
  gap: 4px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-field {
  padding: 5px !important;

  border-radius: 7px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-field span {
  font-size: 6px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-mobile-field strong {
  font-size: 8px !important;
}


/* Quantity compact */
#mfUnifiedOrderChatDock
.mf-order-chat-mobile-qty {
  margin-top: 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-qty button {
  width: 24px !important;
  height: 24px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-qty span {
  min-width: 25px !important;
  font-size: 8px !important;
}


/* Totals compact */
#mfUnifiedOrderChatDock
.mf-order-chat-summary > div {
  padding: 6px 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-summary span {
  font-size: 6px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-summary strong {
  font-size: 9px !important;
}


/* Delivery fields compact */
#mfUnifiedOrderChatDock
.mf-order-chat-address-grid {
  gap: 4px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address-grid > div {
  padding: 6px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address-grid span {
  font-size: 6px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address-grid strong,
#mfUnifiedOrderChatDock
.mf-order-chat-address-grid p {
  font-size: 8px !important;
}


/* Action buttons smaller */
#mfUnifiedOrderChatDock
.mf-order-chat-actions {
  gap: 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-action {
  min-height: 31px !important;

  padding: 0 8px !important;

  font-size: 7px !important;
}


/* =========================================================
   CHAT - GETS MOST OF THE SPACE
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-right {
  flex: 1 1 auto !important;

  width: auto !important;
  min-height: 0 !important;

  margin: 5px 6px 6px !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border-radius: 11px !important;
}


/* Chat title */
#mfUnifiedOrderChatDock
.mf-order-chat-conversation-head {
  flex: 0 0 auto !important;

  padding: 7px 9px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-conversation-head strong {
  font-size: 10px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-conversation-head small {
  font-size: 6px !important;
}


/* Messages use available space */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  flex: 1 1 auto !important;

  min-height: 100px !important;
  max-height: none !important;

  overflow-y: auto !important;

  padding: 8px !important;

  scrollbar-width: thin;
}


/* Message bubbles compact */
#mfUnifiedOrderChatDock
.mf-order-chat-bubble {
  max-width: 86% !important;

  padding: 6px 8px !important;

  border-radius: 10px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-bubble p {
  margin: 0 !important;

  font-size: 8px !important;
  line-height: 1.35 !important;
}


/* =========================================================
   MESSAGE BOX - ALWAYS VISIBLE AT BOTTOM
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: relative !important;

  flex: 0 0 auto !important;

  bottom: auto !important;

  margin: 0 !important;

  padding:
    6px
    7px
    calc(6px + env(safe-area-inset-bottom))
    !important;

  background: #ffffff !important;

  border-top:
    1px solid
    #dfe7e4 !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-form input[type="text"] {
  min-height: 35px !important;

  padding: 7px 9px !important;

  font-size: 8px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-form button {
  min-height: 35px !important;

  font-size: 8px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-attach-button {
  width: 35px !important;
  min-width: 35px !important;
  height: 35px !important;

  font-size: 14px !important;
}

/* =========================================================
   CUSTOMER POST-ORDER - FINAL COMPACT TABLE DESIGN
========================================================= */

/* Active order ho to empty cart / Rs.0 / checkout button hide */
#mfUnifiedCartChat.mf-active-order-chat
.cart-items,

#mfUnifiedCartChat.mf-active-order-chat
.cart-summary {
  display: none !important;
}


/* Order details ko aur chota */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  max-height: 205px !important;
  padding: 5px !important;
}


/* Card compact */
#mfUnifiedOrderChatDock
.mf-order-chat-card {
  margin-bottom: 4px !important;
  padding: 6px !important;
  border-radius: 9px !important;
}


/* Description text hatao, order number rahe */
#mfUnifiedOrderChatDock
.mf-order-chat-card-head
> div
> small {
  display: none !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head {
  align-items: center !important;
  margin-bottom: 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-card-head h3 {
  font-size: 10px !important;
}


/* =========================================================
   PRODUCT TABLE
========================================================= */

/* Mobile cards hatao */
#mfUnifiedOrderChatDock
.mf-order-chat-mobile-items {
  display: none !important;
}


/* Actual table show karo */
#mfUnifiedOrderChatDock
.mf-order-chat-table-wrap {
  display: block !important;

  overflow-x: auto !important;

  border-radius: 8px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-table {
  width: 100% !important;
  min-width: 0 !important;

  table-layout: fixed !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-table th {
  padding: 4px 5px !important;

  font-size: 6px !important;

  white-space: nowrap !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-table td {
  padding: 5px !important;

  font-size: 8px !important;

  vertical-align: middle !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-table th:first-child,
#mfUnifiedOrderChatDock
.mf-order-chat-table td:first-child {
  width: 38% !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-product-name {
  font-size: 8px !important;

  line-height: 1.15 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-product-sku {
  margin-top: 1px !important;

  font-size: 6px !important;
}


/* Customer ko sirf quantity number */
#mfUnifiedOrderChatDock
.mf-order-chat-qty-static {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 24px !important;
  height: 22px !important;

  padding: 0 6px !important;

  border: 1px solid #dce4e1 !important;
  border-radius: 999px !important;

  background: #f4f8f7 !important;

  color: #172025 !important;

  font-size: 8px !important;
}


/* =========================================================
   TOTALS
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-summary {
  margin-top: 5px !important;

  border-radius: 8px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-summary > div {
  padding: 4px 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-summary span {
  font-size: 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-summary strong {
  margin-top: 1px !important;

  font-size: 8px !important;
}


/* =========================================================
   DELIVERY DETAILS - ONE TABLE-LIKE ROW
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-address {
  overflow-x: auto !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address-grid {
  display: flex !important;

  align-items: stretch !important;

  gap: 0 !important;

  min-width: 100% !important;

  overflow: hidden !important;

  border: 1px solid #e0e7e4 !important;
  border-radius: 8px !important;

  background: #ffffff !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address-grid
> div {
  flex: 1 1 0 !important;

  min-width: 65px !important;

  padding: 4px 5px !important;

  border-radius: 0 !important;
  border-right: 1px solid #e6ebe9 !important;

  background: #ffffff !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address-grid
> div:last-child {
  border-right: 0 !important;
}


/* Address ko thori zyada width */
#mfUnifiedOrderChatDock
.mf-order-chat-address-grid
.full {
  grid-column: auto !important;

  flex: 1.8 1 130px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address span {
  margin: 0 !important;

  font-size: 5px !important;

  white-space: nowrap !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-address strong,
#mfUnifiedOrderChatDock
.mf-order-chat-address p {
  margin: 2px 0 0 !important;

  font-size: 7px !important;
  line-height: 1.2 !important;
}


/* =========================================================
   CUSTOMER ACTIONS - ONE LINE
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-actions {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr))
    !important;

  gap: 4px !important;

  margin-top: 5px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-action {
  width: 100% !important;

  min-height: 27px !important;

  padding: 0 4px !important;

  font-size: 6px !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-action.danger {
  grid-column: auto !important;
}


/* Chat ko aur jagah */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  margin-top: 3px !important;
}
/* =========================================================
   FIX ACTIVE ORDER LAYOUT + ALWAYS VISIBLE CHAT COMPOSER
========================================================= */

/* Active order ke waqt old empty cart area hide */
.cart-drawer.mf-unified-cart-chat:has(
  #mfUnifiedCartChat.mf-active-order-chat
)
> .cart-items,

.cart-drawer.mf-unified-cart-chat:has(
  #mfUnifiedCartChat.mf-active-order-chat
)
> .cart-summary {
  display: none !important;
}


/* Order & Chat section remaining full height le */
#mfUnifiedCartChat.mf-active-order-chat {
  flex: 1 1 auto !important;

  min-height: 0 !important;
  height: auto !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}


/* Order dock full remaining space */
#mfUnifiedOrderChatDock {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}


/* Product + delivery details sirf chota upper area */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  flex: 0 0 auto !important;

  max-height: 170px !important;

  overflow-y: auto !important;

  padding: 5px !important;
}


/* Chat remaining jagah use kare */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  margin: 4px 5px 5px !important;

  overflow: hidden !important;
}


/* Messages scroll hon */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  flex: 1 1 auto !important;

  min-height: 80px !important;
  max-height: none !important;

  overflow-y: auto !important;
}


/* Send area hamesha bottom par visible */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  flex: 0 0 auto !important;

  display: grid !important;

  grid-template-columns:
    35px
    minmax(0, 1fr)
    58px !important;

  align-items: center !important;

  gap: 5px !important;

  padding: 6px !important;

  position: relative !important;

  bottom: auto !important;

  background: #ffffff !important;
}


/* File name next row */
#mfUnifiedOrderChatDock
.mf-order-chat-selected-file {
  grid-column: 1 / -1 !important;
}


/* Input */
#mfUnifiedOrderChatDock
.mf-order-chat-form
[data-chat-input] {
  width: 100% !important;

  min-width: 0 !important;
  min-height: 35px !important;
}


/* Send */
#mfUnifiedOrderChatDock
.mf-order-chat-form
button[type="submit"] {
  width: 58px !important;

  min-height: 35px !important;
}

/* =========================================================
   FINAL CUSTOMER CONFIRM + CHAT LAYOUT
========================================================= */

/* Separate Chat with MEHFARO heading nahi */
#mfUnifiedOrderChatDock
.mf-order-chat-conversation-head {
  display: none !important;
}


/* Confirm + Cancel only */
#mfUnifiedOrderChatDock
.mf-order-chat-actions {
  grid-template-columns:
    repeat(2, minmax(0, 1fr))
    !important;
}


/* Message area directly order ke neeche */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  margin-top: 3px !important;
}


/* Attach | Message | Send | WhatsApp */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  grid-template-columns:
    35px
    minmax(0, 1fr)
    52px
    66px
    !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-whatsapp-send {
  width: 66px !important;
  min-height: 35px !important;

  padding: 0 5px !important;

  border: 1px solid #21a366 !important;
  border-radius: 9px !important;

  background: #ffffff !important;
  color: #168653 !important;

  font-size: 7px !important;
  font-weight: 800 !important;
}


/* Customer side par item status text hide */
#mfUnifiedOrderChatDock
.mf-order-chat-item-status {
  display: none !important;
}


/* =========================================================
   CUSTOMER CHAT - FINAL SUPPORT LAYOUT
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-empty {
  display: none !important;
}


/* attach | message | send */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  grid-template-columns:
    35px
    minmax(0, 1fr)
    58px
    !important;
}


/* WhatsApp separate line */
#mfUnifiedOrderChatDock
.mf-order-chat-whatsapp-send {
  grid-column: 1 / -1 !important;

  width: 100% !important;
  min-height: 31px !important;

  margin-top: 3px !important;

  border: 1px solid #20a764 !important;
  border-radius: 8px !important;

  background: #ffffff !important;
  color: #168653 !important;

  font-weight: 800 !important;
}


#mfUnifiedOrderChatDock
.mf-order-chat-selected-file {
  grid-column: 1 / -1 !important;
}


/* =========================================================
   FINAL ORDER + CHAT SINGLE PANEL
========================================================= */

/* Extra Order & Chat heading remove */
#mfUnifiedCartChat.mf-active-order-chat
.mf-unified-chat-head {
  display: none !important;
}

/* Single clean panel */
#mfUnifiedOrderChatDock {
  background: #ffffff !important;
}

/* Order details top */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  margin: 0 5px !important;
  border: 1px solid #dfe6e3 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #ffffff !important;
}

/* Chat directly connected below order */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  margin: 0 5px 5px !important;
  border: 1px solid #dfe6e3 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  background: #f3f7f5 !important;
}

/* Confirm Order + Cancel Order inside same panel */
#mfUnifiedOrderChatDock
.mf-order-chat-right
> .mf-order-chat-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 6px !important;
  border-top: 1px solid #e4eae7 !important;
  border-bottom: 1px solid #e4eae7 !important;
  background: #ffffff !important;
}

#mfUnifiedOrderChatDock
.mf-order-chat-right
> .mf-order-chat-actions
button {
  min-height: 32px !important;
}

/* No WhatsApp button inside order/chat */
#mfUnifiedOrderChatDock
[data-order-whatsapp],
#mfUnifiedOrderChatDock
.mf-order-chat-whatsapp-send {
  display: none !important;
}

/* Messages directly after order buttons */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  margin: 0 !important;
  border: 0 !important;
}


/* =========================================================
   ORDER CARD IS A REAL CHAT MESSAGE
========================================================= */

/* Old separate order column completely gone */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  display: none !important;
}


/* Real conversation fills full drawer */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #eef3f1 !important;
}


/* Messages are the main area */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  flex: 1 1 auto !important;

  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;

  padding: 10px 8px !important;
}


/* Composer permanently bottom */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  flex: 0 0 auto !important;

  position: sticky !important;
  bottom: 0 !important;

  z-index: 20 !important;

  background: #ffffff !important;

  border-top:
    1px solid #dce5e1 !important;
}


/* Order message aligns like customer message */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer
.order-card-bubble {
  width: 96% !important;
  max-width: 96% !important;

  padding: 5px !important;

  background: #dff3ee !important;
}


/* Main card */
.mf-chat-order-card {
  width: 100% !important;

  overflow: hidden !important;

  border:
    1px solid #cddfd9 !important;

  border-radius:
    11px !important;

  background:
    #ffffff !important;
}


.mf-chat-order-card-head {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 8px !important;

  padding: 7px 8px !important;

  background:
    #f3f8f6 !important;
}


.mf-chat-order-card-head strong {
  font-size: 9px !important;
}


.mf-chat-order-card-head span {
  font-size: 6px !important;
}


/* Product table */
.mf-chat-order-card-table {
  overflow-x: auto !important;
}


.mf-chat-order-card-table table {
  width: 100% !important;

  border-collapse:
    collapse !important;

  table-layout:
    fixed !important;
}


.mf-chat-order-card-table th {
  padding: 4px !important;

  font-size: 5px !important;

  text-align: left !important;

  background:
    #f7f9f8 !important;
}


.mf-chat-order-card-table td {
  padding: 5px 4px !important;

  border-top:
    1px solid #edf1ef !important;

  font-size: 7px !important;
}


.mf-chat-order-card-table td:first-child {
  width: 42% !important;
}


.mf-chat-order-card-table td small {
  display: block !important;

  margin-top: 1px !important;

  font-size: 5px !important;
}


/* Totals */
.mf-chat-order-totals {
  display: grid !important;

  grid-template-columns:
    repeat(3, 1fr) !important;

  border-top:
    1px solid #e4ebe8 !important;
}


.mf-chat-order-totals span {
  padding: 5px !important;

  font-size: 5px !important;
}


.mf-chat-order-totals strong {
  display: block !important;

  margin-top: 2px !important;

  font-size: 7px !important;
}


/* Address as one compact table row */
.mf-chat-order-address {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr))
    2fr !important;

  border-top:
    1px solid #e4ebe8 !important;
}


.mf-chat-order-address span {
  min-width: 0 !important;

  padding: 5px !important;

  border-right:
    1px solid #edf1ef !important;
}


.mf-chat-order-address span:last-child {
  border-right: 0 !important;
}


.mf-chat-order-address small {
  display: block !important;

  font-size: 5px !important;
}


.mf-chat-order-address strong {
  display: block !important;

  margin-top: 2px !important;

  font-size: 6px !important;

  overflow-wrap:
    anywhere !important;
}


/* Confirm is part of the order message */
.mf-chat-order-card-actions {
  display: grid !important;

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

  gap: 5px !important;

  padding: 6px !important;

  border-top:
    1px solid #e4ebe8 !important;
}


.mf-chat-order-card-actions button {
  min-height: 31px !important;

  border-radius:
    7px !important;

  font-size:
    7px !important;

  font-weight:
    800 !important;
}


.mf-chat-order-card-actions
.confirm {
  border: 0 !important;

  background:
    #26978e !important;

  color:
    #ffffff !important;
}


.mf-chat-order-card-actions
.cancel {
  border:
    1px solid #efaaa0 !important;

  background:
    #fff7f5 !important;

  color:
    #b43d30 !important;
}


/* Remove old order/chat headings */
#mfUnifiedOrderChatDock
.mf-order-chat-conversation-head,

#mfUnifiedCartChat.mf-active-order-chat
.mf-unified-chat-head {
  display: none !important;
}


/* Top empty cart area disappears when order chat exists */
.cart-drawer:has(
  #mfUnifiedOrderChatDock
  .mf-order-chat-docked
)
.cart-items,

.cart-drawer:has(
  #mfUnifiedOrderChatDock
  .mf-order-chat-docked
)
.cart-summary {
  display: none !important;
}


/* =========================================================
   RESTORE PURCHASED ORDER DETAILS
========================================================= */

#mfUnifiedOrderChatDock
.mf-order-chat-left {
  display: block !important;

  flex: 0 0 auto !important;

  width: 100% !important;
  max-height: 210px !important;

  overflow-y: auto !important;

  margin: 0 !important;
  padding: 6px !important;

  background: #ffffff !important;

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


/* Chat stays directly below order */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  background: #eef3f1 !important;
}


/* Message area scroll */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  overflow-y: auto !important;
}


/* Input always bottom */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  flex: 0 0 auto !important;

  position: sticky !important;
  bottom: 0 !important;

  background: #ffffff !important;
}
/* =========================================================
   CHAT COMPOSER - ALWAYS AT BOTTOM
========================================================= */

#mfUnifiedOrderChatDock {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  padding-bottom: 58px !important;
}

#mfUnifiedOrderChatDock
.mf-order-chat-right {
  height: 100% !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  overflow-y: auto !important;
  padding-bottom: 15px !important;
}

/* WhatsApp jaisa bottom composer */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  z-index: 999 !important;

  margin: 0 !important;
  padding: 7px !important;

  background: #ffffff !important;
  border-top: 1px solid #dce5e1 !important;
}

/* =========================================================
   MEHFARO COLORFUL CHAT + READ RECEIPTS
========================================================= */

/* Chat background */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  background:
    linear-gradient(
      180deg,
      #edf8f5 0%,
      #f8f5ec 100%
    ) !important;
}


/* Customer message */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer
.mf-order-chat-bubble {
  background: #d8f3ec !important;

  border:
    1px solid #a9dcd2 !important;

  color: #14272a !important;

  box-shadow:
    0 3px 10px
    rgba(22, 93, 86, 0.08)
    !important;
}


/* MEHFARO / owner reply */
#mfUnifiedOrderChatDock
.mf-order-chat-message.owner
.mf-order-chat-bubble {
  background: #fff7df !important;

  border:
    1px solid #e5c873 !important;

  color: #272319 !important;

  box-shadow:
    0 3px 10px
    rgba(159, 118, 28, 0.08)
    !important;
}


/* System messages */
#mfUnifiedOrderChatDock
.mf-order-chat-message.system
.mf-order-chat-bubble {
  background: #edf1f2 !important;
  color: #566166 !important;
}


/* Time + tick same line */
#mfUnifiedOrderChatDock
.mf-order-chat-bubble
> small {
  display: flex !important;

  justify-content: flex-end !important;
  align-items: center !important;

  gap: 4px !important;

  margin-top: 3px !important;
}


/* Single tick */
#mfUnifiedOrderChatDock
.mf-chat-receipt {
  display: inline-block !important;

  min-width: 13px !important;

  font-size: 11px !important;
  font-weight: 900 !important;

  line-height: 1 !important;
}


/* Sent */
#mfUnifiedOrderChatDock
.mf-chat-receipt.sent {
  color: #71817d !important;
}


/* Owner has seen message */
#mfUnifiedOrderChatDock
.mf-chat-receipt.read {
  color: #168fe5 !important;
}


/* Bottom composer */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  background: #ffffff !important;

  border-top:
    2px solid #228f87 !important;

  box-shadow:
    0 -5px 16px
    rgba(16, 47, 51, 0.08)
    !important;
}


/* Message input */
#mfUnifiedOrderChatDock
[data-chat-input] {
  border:
    1px solid #b8d8d2 !important;

  background: #ffffff !important;

  color: #14272a !important;
}


/* Attachment button - MEHFARO gold */
#mfUnifiedOrderChatDock
.mf-order-chat-attach-button {
  border:
    1px solid #d6b257 !important;

  background: #fff8e6 !important;

  color: #9d741d !important;
}


/* Send - MEHFARO teal */
#mfUnifiedOrderChatDock
.mf-order-chat-form
button[type="submit"] {
  border: 0 !important;

  background: #228f87 !important;

  color: #ffffff !important;

  font-weight: 800 !important;
}


/* =========================================================
   FINAL CART & CHAT SCROLL FIX
   Whole drawer scrolls + composer stays at bottom
========================================================= */

/* Main Cart & Chat drawer */
#mfUnifiedCartChat {
  height: 100dvh !important;
  max-height: 100dvh !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}


/* Active order area must never lock scrolling */
#mfUnifiedOrderChatDock {
  position: relative !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;

  padding-bottom: 0 !important;
}


/* Order details remain compact */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  height: auto !important;
  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;
}


/* Conversation */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  position: relative !important;

  height: auto !important;
  min-height: 260px !important;
  max-height: none !important;

  overflow: visible !important;

  display: flex !important;
  flex-direction: column !important;
}


/* Messages */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  height: auto !important;
  min-height: 170px !important;
  max-height: none !important;

  overflow: visible !important;

  padding-bottom: 8px !important;
}


/* Message composer stays at bottom while drawer scrolls */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: sticky !important;

  left: auto !important;
  right: auto !important;
  bottom: 0 !important;

  width: 100% !important;

  z-index: 1000 !important;

  flex: 0 0 auto !important;

  margin: 0 !important;

  background: #ffffff !important;

  border-top:
    2px solid #228f87 !important;
}


/* Prevent any parent order-chat block from trapping wheel scroll */
#mfUnifiedCartChat
.mf-order-chat-docked,
#mfUnifiedCartChat
.mf-active-order-chat {
  overflow: visible !important;
}


/* =========================================================
   FINAL ROOT DRAWER SCROLL
   ORDER + CHAT SCROLL TOGETHER
========================================================= */

/* Asal Cart & Chat drawer hi scroll kare */
.cart-drawer.mf-unified-cart-chat {
  height: 100dvh !important;
  max-height: 100dvh !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;

  scroll-behavior: smooth !important;
}


/* Header WhatsApp ki tarha top par rahe */
.cart-drawer.mf-unified-cart-chat
.cart-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;

  flex: 0 0 auto !important;
}


/* Active order ke waqt empty cart / Rs.0 area hata do */
.cart-drawer.mf-unified-cart-chat:has(
  #mfUnifiedCartChat.mf-active-order-chat
)
.cart-items,

.cart-drawer.mf-unified-cart-chat:has(
  #mfUnifiedCartChat.mf-active-order-chat
)
.cart-summary {
  display: none !important;
}


/* Inner chat khud scroll lock na kare */
#mfUnifiedCartChat {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Order + chat ek hi continuous document hain */
#mfUnifiedOrderChatDock {
  position: relative !important;

  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;

  padding-bottom: 0 !important;
}


/* Your Order poora root ke sath scroll kare */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Conversation bhi isi scroll ka part */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  position: relative !important;

  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 260px !important;
  max-height: none !important;

  overflow: visible !important;

  display: flex !important;
  flex-direction: column !important;
}


/* Messages ka separate scrollbar band */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;

  overflow: visible !important;

  padding-bottom: 10px !important;
}


/* Message box bottom par sticky rahe */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: sticky !important;

  left: auto !important;
  right: auto !important;
  bottom: 0 !important;

  z-index: 1500 !important;

  width: 100% !important;

  margin: 0 !important;

  background: #ffffff !important;

  border-top: 2px solid #228f87 !important;
}


/* =========================================================
   FINAL NATURAL ORDER + CHAT SCROLL
========================================================= */

/*
  Drawer flex layout band.
  Ab poora drawer normal vertical document ki tarha behave karega.
*/
#cartDrawer.mf-unified-cart-chat {
  display: block !important;

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

  padding: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}


/* Header top par rahe */
#cartDrawer.mf-unified-cart-chat
.cart-header {
  position: sticky !important;
  top: 0 !important;

  z-index: 5000 !important;

  background: #142329 !important;

  padding: 14px 12px !important;
}


/*
  Active order ke waqt old empty cart,
  cart items aur Rs.0 checkout area hata do.
*/
#cartDrawer:has(#mfUnifiedOrderChatDock)
#emptyCart,

#cartDrawer:has(#mfUnifiedOrderChatDock)
#cartItems,

#cartDrawer:has(#mfUnifiedOrderChatDock)
.cart-summary {
  display: none !important;
}


/* Unified area natural height */
#mfUnifiedCartChat {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Order + messages same scroll document */
#mfUnifiedOrderChatDock {
  display: block !important;

  position: relative !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;

  padding-bottom: 58px !important;
}


/* Your Order / Delivery */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Conversation */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 250px !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Messages separate scroll nahi karenge */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  display: block !important;

  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;

  overflow: visible !important;

  padding: 8px 8px 15px !important;
}


/* Message box bottom par */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: sticky !important;

  left: auto !important;
  right: auto !important;
  bottom: 0 !important;

  width: 100% !important;

  z-index: 4000 !important;

  margin: 0 !important;

  background: #ffffff !important;

  border-top: 2px solid #228f87 !important;
}
/* ===============================
   MEHFARO COLORFUL CHAT THEME
   =============================== */

#mfUnifiedOrderChatDock {
  background: linear-gradient(180deg, #f8f5ef 0%, #eef6f3 100%) !important;
  border-left: 1px solid #e4d7b2 !important;
  box-shadow: -8px 0 24px rgba(0,0,0,0.08) !important;
}

/* Header */
#mfUnifiedOrderChatDock .mf-order-chat-header,
#mfUnifiedOrderChatDock .mf-order-chat-top,
#mfUnifiedOrderChatDock .mf-order-chat-docked-top {
  background: linear-gradient(135deg, #0f2430 0%, #173445 100%) !important;
  color: #ffffff !important;
  border-bottom: 2px solid #d39a1f !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-top h2,
#mfUnifiedOrderChatDock .mf-order-chat-docked-top h2,
#mfUnifiedOrderChatDock .mf-order-chat-top h3,
#mfUnifiedOrderChatDock .mf-order-chat-docked-top h3 {
  color: #ffffff !important;
}

/* Order + delivery cards */
#mfUnifiedOrderChatDock .mf-order-chat-card,
#mfUnifiedOrderChatDock .mf-order-summary,
#mfUnifiedOrderChatDock .mf-delivery-details,
#mfUnifiedOrderChatDock .mf-order-panel,
#mfUnifiedOrderChatDock .mf-chat-order-card {
  background: #ffffff !important;
  border: 1px solid #ead8a2 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important;
}

/* Section titles */
#mfUnifiedOrderChatDock .mf-order-chat-card h3,
#mfUnifiedOrderChatDock .mf-order-summary h3,
#mfUnifiedOrderChatDock .mf-delivery-details h3,
#mfUnifiedOrderChatDock .mf-chat-order-card h3 {
  color: #0f2430 !important;
}

/* Customer bubble */
#mfUnifiedOrderChatDock .mf-order-message.owner,
#mfUnifiedOrderChatDock .mf-owner-message.customer,
#mfUnifiedOrderChatDock .mf-message.customer {
  background: linear-gradient(135deg, #daf4ee 0%, #c8eee5 100%) !important;
  border: 1px solid #7ecfbb !important;
  color: #18342d !important;
  border-radius: 16px 16px 4px 16px !important;
}

/* Store/owner bubble */
#mfUnifiedOrderChatDock .mf-order-message.customer,
#mfUnifiedOrderChatDock .mf-owner-message.owner,
#mfUnifiedOrderChatDock .mf-message.owner {
  background: linear-gradient(135deg, #fff4d8 0%, #f8e7b1 100%) !important;
  border: 1px solid #ddb24c !important;
  color: #4d3810 !important;
  border-radius: 16px 16px 16px 4px !important;
}

/* System/status message */
#mfUnifiedOrderChatDock .mf-order-status-message,
#mfUnifiedOrderChatDock .mf-system-message {
  background: #eef4f1 !important;
  color: #5e6b66 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

/* Message input area */
#mfUnifiedOrderChatDock .mf-order-chat-form {
  background: #fffdf8 !important;
  border-top: 2px solid #d39a1f !important;
  padding: 10px !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-form input,
#mfUnifiedOrderChatDock .mf-order-chat-form textarea {
  background: #ffffff !important;
  border: 2px solid #b7ddd3 !important;
  border-radius: 24px !important;
  color: #173445 !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-form input:focus,
#mfUnifiedOrderChatDock .mf-order-chat-form textarea:focus {
  border-color: #228f87 !important;
  box-shadow: 0 0 0 3px rgba(34,143,135,0.12) !important;
  outline: none !important;
}

/* Send button */
#mfUnifiedOrderChatDock .mf-order-chat-form button[type="submit"] {
  background: linear-gradient(135deg, #228f87 0%, #1f7c74 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 22px !important;
  font-weight: 700 !important;
  padding: 0 18px !important;
}

/* Confirm button */
#mfUnifiedOrderChatDock .mf-confirm-order-btn,
#mfUnifiedOrderChatDock .mf-order-confirm-btn {
  background: linear-gradient(135deg, #86c8bf 0%, #6db8ae 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* Cancel button */
#mfUnifiedOrderChatDock .mf-cancel-order-btn,
#mfUnifiedOrderChatDock .mf-order-cancel-btn {
  background: #fff8f6 !important;
  color: #ca6a5d !important;
  border: 1px solid #efb0a8 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* =========================================================
   MEHFARO WEBSITE CHAT - COLORFUL POLISH
   ========================================================= */

#mfUnifiedOrderChatDock {
  --mf-gold: #d4a017;
  --mf-gold-soft: #f7e7b2;
  --mf-green: #1f8a7a;
  --mf-green-soft: #dff6ef;
  --mf-deep: #0f3440;
  --mf-cream: #f8f5ec;
  --mf-ink: #18342d;
  font-size: 15px !important;
  color: var(--mf-ink) !important;
}

/* Main chat area background */
#mfUnifiedOrderChatDock .mf-unified-order-chat-main,
#mfUnifiedOrderChatDock .mf-order-chat-shell,
#mfUnifiedOrderChatDock .mf-order-chat-body,
#mfUnifiedOrderChatDock .mf-order-chat-messages {
  background: linear-gradient(180deg, #f8f5ec 0%, #edf7f3 100%) !important;
}

/* Header */
#mfUnifiedOrderChatDock .mf-order-chat-header,
#mfUnifiedOrderChatDock .mf-chat-header {
  background: linear-gradient(135deg, #0f3440 0%, #1f8a7a 58%, #d4a017 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-header *,
#mfUnifiedOrderChatDock .mf-chat-header * {
  color: #ffffff !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-header h1,
#mfUnifiedOrderChatDock .mf-order-chat-header h2,
#mfUnifiedOrderChatDock .mf-order-chat-header h3,
#mfUnifiedOrderChatDock .mf-chat-header h1,
#mfUnifiedOrderChatDock .mf-chat-header h2,
#mfUnifiedOrderChatDock .mf-chat-header h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

/* Order + delivery cards */
#mfUnifiedOrderChatDock .mf-order-card,
#mfUnifiedOrderChatDock .mf-order-summary,
#mfUnifiedOrderChatDock .mf-delivery-card,
#mfUnifiedOrderChatDock .mf-delivery-details,
#mfUnifiedOrderChatDock .mf-order-section,
#mfUnifiedOrderChatDock .mf-delivery-section,
#mfUnifiedOrderChatDock .mf-order-table-wrap {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid #e7cf8a !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(15, 52, 64, 0.06) !important;
}

/* Section headings */
#mfUnifiedOrderChatDock .mf-order-card h3,
#mfUnifiedOrderChatDock .mf-order-summary h3,
#mfUnifiedOrderChatDock .mf-delivery-card h3,
#mfUnifiedOrderChatDock .mf-delivery-details h3,
#mfUnifiedOrderChatDock .mf-order-section h3,
#mfUnifiedOrderChatDock .mf-delivery-section h3 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--mf-deep) !important;
}

/* Table / labels text bigger */
#mfUnifiedOrderChatDock table,
#mfUnifiedOrderChatDock th,
#mfUnifiedOrderChatDock td,
#mfUnifiedOrderChatDock label,
#mfUnifiedOrderChatDock small,
#mfUnifiedOrderChatDock .mf-meta,
#mfUnifiedOrderChatDock .mf-order-meta {
  font-size: 13px !important;
  color: var(--mf-ink) !important;
}

/* Confirm + cancel buttons */
#mfUnifiedOrderChatDock .mf-order-confirm-btn,
#mfUnifiedOrderChatDock .mf-confirm-order-btn {
  background: linear-gradient(135deg, #6fc8b4 0%, #1f8a7a 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1f8a7a !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

#mfUnifiedOrderChatDock .mf-cancel-order-btn,
#mfUnifiedOrderChatDock .mf-order-cancel-btn {
  background: #fff6f6 !important;
  color: #c46a5d !important;
  border: 1px solid #efb0a8 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* Message row general */
#mfUnifiedOrderChatDock .mf-order-message,
#mfUnifiedOrderChatDock .mf-chat-message,
#mfUnifiedOrderChatDock .mf-message {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Remove weird leading space in message text */
#mfUnifiedOrderChatDock .mf-order-message p,
#mfUnifiedOrderChatDock .mf-chat-message p,
#mfUnifiedOrderChatDock .mf-message p,
#mfUnifiedOrderChatDock .mf-order-message .mf-message-text,
#mfUnifiedOrderChatDock .mf-chat-message .mf-message-text,
#mfUnifiedOrderChatDock .mf-message .mf-message-text {
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  display: block !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* Customer bubble - warm golden */
#mfUnifiedOrderChatDock .mf-order-message.customer,
#mfUnifiedOrderChatDock .mf-chat-message.customer,
#mfUnifiedOrderChatDock .mf-message.customer {
  background: linear-gradient(135deg, #fff4c9 0%, #f7e7b2 100%) !important;
  border: 1px solid #dfbb59 !important;
  color: #5b4300 !important;
  border-radius: 18px 18px 18px 6px !important;
  padding: 12px 14px !important;
}

/* Owner/store bubble - green */
#mfUnifiedOrderChatDock .mf-order-message.owner,
#mfUnifiedOrderChatDock .mf-chat-message.owner,
#mfUnifiedOrderChatDock .mf-message.owner,
#mfUnifiedOrderChatDock .mf-order-message.store,
#mfUnifiedOrderChatDock .mf-chat-message.store,
#mfUnifiedOrderChatDock .mf-message.store {
  background: linear-gradient(135deg, #dff6ef 0%, #c9eee4 100%) !important;
  border: 1px solid #7fcab8 !important;
  color: #143730 !important;
  border-radius: 18px 18px 6px 18px !important;
  padding: 12px 14px !important;
}

/* System bubble */
#mfUnifiedOrderChatDock .mf-order-message.system,
#mfUnifiedOrderChatDock .mf-chat-message.system,
#mfUnifiedOrderChatDock .mf-message.system {
  background: #edf1f1 !important;
  border: 1px solid #d6dede !important;
  color: #506060 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

/* Time / ticks */
#mfUnifiedOrderChatDock .mf-message-time,
#mfUnifiedOrderChatDock .mf-order-message-time,
#mfUnifiedOrderChatDock .mf-chat-time {
  font-size: 12px !important;
  color: rgba(24, 52, 45, 0.68) !important;
}

#mfUnifiedOrderChatDock .mf-read-receipt,
#mfUnifiedOrderChatDock .mf-message-status,
#mfUnifiedOrderChatDock .mf-message-ticks {
  font-size: 12px !important;
}

/* Composer / input area */
#mfUnifiedOrderChatDock .mf-order-chat-form,
#mfUnifiedOrderChatDock .mf-chat-composer,
#mfUnifiedOrderChatDock .mf-message-composer {
  background: rgba(255,255,255,0.96) !important;
  border-top: 2px solid #1f8a7a !important;
  padding: 10px !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-form input[type="text"],
#mfUnifiedOrderChatDock .mf-order-chat-form textarea,
#mfUnifiedOrderChatDock .mf-chat-composer input[type="text"],
#mfUnifiedOrderChatDock .mf-chat-composer textarea,
#mfUnifiedOrderChatDock .mf-message-composer input[type="text"],
#mfUnifiedOrderChatDock .mf-message-composer textarea {
  border: 2px solid #8fd1c3 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: var(--mf-ink) !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

#mfUnifiedOrderChatDock .mf-order-chat-form input::placeholder,
#mfUnifiedOrderChatDock .mf-order-chat-form textarea::placeholder,
#mfUnifiedOrderChatDock .mf-chat-composer input::placeholder,
#mfUnifiedOrderChatDock .mf-chat-composer textarea::placeholder {
  color: #7f918c !important;
  font-size: 14px !important;
}

/* Send button */
#mfUnifiedOrderChatDock .mf-order-chat-form button[type="submit"],
#mfUnifiedOrderChatDock .mf-chat-composer button[type="submit"],
#mfUnifiedOrderChatDock .mf-message-composer button[type="submit"] {
  background: linear-gradient(135deg, #1f8a7a 0%, #0f3440 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 20px !important;
  min-width: 68px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Attachment button */
#mfUnifiedOrderChatDock .mf-order-chat-form .mf-attach-btn,
#mfUnifiedOrderChatDock .mf-chat-composer .mf-attach-btn,
#mfUnifiedOrderChatDock .mf-message-composer .mf-attach-btn {
  background: #fff7dc !important;
  border: 1px solid #dfbb59 !important;
  color: #8b6500 !important;
  border-radius: 50% !important;
}

/* Make text slightly bigger overall */
#mfUnifiedOrderChatDock .mf-order-message *,
#mfUnifiedOrderChatDock .mf-chat-message *,
#mfUnifiedOrderChatDock .mf-message *,
#mfUnifiedOrderChatDock .mf-order-card *,
#mfUnifiedOrderChatDock .mf-delivery-details * {
  letter-spacing: 0 !important;
}

/* Remove awkward top empty feeling */
#mfUnifiedOrderChatDock .mf-order-chat-messages,
#mfUnifiedOrderChatDock .mf-chat-messages,
#mfUnifiedOrderChatDock .mf-message-list {
  padding-top: 10px !important;
  padding-bottom: 12px !important;
}


/* =========================================================
   FINAL MESSAGE TEXT + WHITESPACE FIX
========================================================= */

/* Actual message bubble */
#mfUnifiedOrderChatDock
.mf-order-chat-message
.mf-order-chat-bubble {
  text-align: left !important;
  align-items: flex-start !important;
}

/* Sirf actual message text bara ho */
#mfUnifiedOrderChatDock
.mf-order-chat-message
.mf-order-chat-bubble > p {
  margin: 0 !important;
  padding: 0 !important;

  text-indent: 0 !important;
  text-align: left !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Time chota hi rahe */
#mfUnifiedOrderChatDock
.mf-order-chat-message
.mf-order-chat-bubble > small {
  display: block !important;

  margin-top: 3px !important;
  padding: 0 !important;

  font-size: 9px !important;
  line-height: 1 !important;

  text-align: right !important;
  opacity: 0.7 !important;
}

/* Customer / owner bubble comfortable padding */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer
.mf-order-chat-bubble,

#mfUnifiedOrderChatDock
.mf-order-chat-message.owner
.mf-order-chat-bubble {
  padding: 9px 11px !important;
}

/* Table/order ki numbering ko dobara chota normal karo */
#mfUnifiedOrderChatDock table,
#mfUnifiedOrderChatDock th,
#mfUnifiedOrderChatDock td,
#mfUnifiedOrderChatDock .mf-order-meta,
#mfUnifiedOrderChatDock .mf-meta {
  font-size: 10px !important;
}


/* =========================================================
   ACTIVE ORDER + NEW CURRENT CART
   Existing order/chat stays, new cart appears only if items exist
========================================================= */

/* Empty cart message active order ke sath kabhi na dikhao */
#cartDrawer:has(#mfUnifiedOrderChatDock)
#emptyCart {
  display: none !important;
}

/* Default: active order ke sath current cart hidden */
#cartDrawer:has(#mfUnifiedOrderChatDock)
#cartItems {
  display: none !important;
}

#cartDrawer:has(#mfUnifiedOrderChatDock)
.cart-summary {
  display: none !important;
}

/* Naya product add ho to Current Cart wapas show */
#cartDrawer:has(#mfUnifiedOrderChatDock)
#cartItems:has(.cart-item) {
  display: block !important;

  margin: 8px !important;
  padding: 8px !important;

  background: #fffdf7 !important;

  border: 1px solid #dfbb59 !important;
  border-radius: 14px !important;
}

/* Current Cart heading */
#cartDrawer:has(#mfUnifiedOrderChatDock)
#cartItems:has(.cart-item)::before {
  content: "Current Cart";

  display: block;

  margin: 0 0 7px 2px;

  color: #0f3440;

  font-size: 13px;
  font-weight: 800;
}

/* Products compact rakho */
#cartDrawer:has(#mfUnifiedOrderChatDock)
#cartItems:has(.cart-item)
.cart-item {
  margin-bottom: 5px !important;
}

/* Agar cart me product hai to subtotal + checkout bhi show */
#cartDrawer:has(#mfUnifiedOrderChatDock):has(#cartItems .cart-item)
.cart-summary {
  display: block !important;

  margin: 0 8px 10px !important;
  padding: 8px !important;

  background: #f4faf7 !important;

  border: 1px solid #9ad1c3 !important;
  border-radius: 12px !important;
}

/* Active order ke sath delivery note compact */
#cartDrawer:has(#mfUnifiedOrderChatDock):has(#cartItems .cart-item)
.cart-summary > p {
  margin: 4px 0 7px !important;
  font-size: 10px !important;
}


/* =========================================================
   ORDER / DELIVERY TABLE TEXT
========================================================= */

/* Table ka normal text */
#mfUnifiedOrderChatDock table td,
#mfUnifiedOrderChatDock .mf-order-card td,
#mfUnifiedOrderChatDock .mf-delivery-details td,
#mfUnifiedOrderChatDock .mf-order-table td {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Table headings */
#mfUnifiedOrderChatDock table th,
#mfUnifiedOrderChatDock .mf-order-card th,
#mfUnifiedOrderChatDock .mf-order-table th {
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

/* Product name thora strong */
#mfUnifiedOrderChatDock
.mf-order-card td:first-child,
#mfUnifiedOrderChatDock
.mf-order-table td:first-child {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Delivery detail values */
#mfUnifiedOrderChatDock
.mf-delivery-details strong,
#mfUnifiedOrderChatDock
.mf-delivery-section strong {
  font-size: 12px !important;
}

/* Chat 14px hi rahe */
#mfUnifiedOrderChatDock
.mf-order-chat-message
.mf-order-chat-bubble > p {
  font-size: 14px !important;
}


/* =========================================================
   FINAL CART + ORDER CHAT LAYOUT
   Current Cart fixed / Order + Chat scroll together
========================================================= */

/* Whole drawer itself does NOT scroll */
#cartDrawer.mf-unified-cart-chat {
  display: flex !important;
  flex-direction: column !important;

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

  overflow: hidden !important;
}


/* Cart & Chat top header fixed */
#cartDrawer.mf-unified-cart-chat
.cart-header {
  position: relative !important;
  top: auto !important;

  flex: 0 0 auto !important;

  z-index: 100 !important;
}


/* =========================================================
   CURRENT CART = SEPARATE FIXED AREA
========================================================= */

#cartDrawer:has(#mfUnifiedOrderChatDock)
#emptyCart {
  display: none !important;
}


/*
  Current Cart fixed rahega.
  Bohat products hon to sirf isi box ke andar scroll hoga.
*/
#cartDrawer.mf-purchase-view-cart:has(#mfUnifiedOrderChatDock)
#cartItems {
  display: block !important;

  flex: 1 1 0 !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 8px 10px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;
}


/* Current Cart title stays at top of its own box */
#cartDrawer.mf-purchase-view-cart:has(#mfUnifiedOrderChatDock)
#cartItems::before {
  display: none !important;
  content: none !important;
}


/* Empty current cart */
#cartDrawer:has(#mfUnifiedOrderChatDock)
#cartItems:empty::after {
  content: "No items selected yet";

  display: block !important;

  padding: 5px 3px !important;

  color: #7d8985 !important;

  font-size: 11px !important;
}


/* Subtotal + checkout also fixed */
#cartDrawer.mf-purchase-view-cart:has(#mfUnifiedOrderChatDock)
.cart-summary {
  flex: 0 0 auto !important;

  margin: 0 !important;
}


/* =========================================================
   YOUR ORDER + CHAT = ONE SCROLLING AREA
========================================================= */

#mfUnifiedCartChat {
  flex: 1 1 auto !important;

  width: 100% !important;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  overflow: hidden !important;
}


/*
  Ye actual scroll container hai:
  Your Order
  Delivery
  Status
  Messages
*/
#mfUnifiedOrderChatDock {
  display: block !important;

  position: relative !important;

  width: 100% !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;

  padding-bottom: 0 !important;
}


/* Order details also move with chat */
#mfUnifiedOrderChatDock
.mf-order-chat-left {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Conversation naturally continues below order */
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 250px !important;
  max-height: none !important;

  overflow: visible !important;
}


/* Messages ka separate nested scrollbar nahi */
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;

  overflow: visible !important;

  padding-bottom: 12px !important;
}


/* Type message + Send always bottom par */
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  position: sticky !important;

  left: auto !important;
  right: auto !important;
  bottom: 0 !important;

  width: 100% !important;

  z-index: 50 !important;

  margin: 0 !important;

  background: #ffffff !important;

  border-top: 2px solid #228f87 !important;
}


/* =========================================================
   CHECKOUT HEADER MUST SCROLL WITH CHECKOUT FORM
========================================================= */

#mfUnifiedCheckout .mfco-head {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;
  transform: none !important;

  z-index: auto !important;
}


/* =========================================================
   SMALL SCREEN — KEEP CURRENT VERTICAL LAYOUT
========================================================= */

@media (max-width: 699px) {

  #cartDrawer.mf-unified-cart-chat {
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: column !important;
  }

}


/* =========================================================
   MEHFARO CART - FINAL AUTHORITATIVE LAYOUT
   products use full space / checkout fixed bottom
========================================================= */

#cartDrawer.mf-purchase-flow-v2.mf-purchase-view-cart {
    display: flex !important;
    flex-direction: column !important;

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

    overflow: hidden !important;
}


/* Cart / Chat tabs stay at top */
#cartDrawer.mf-purchase-view-cart
.mf-purchase-tabs {
    flex: 0 0 auto !important;
}


/* PRODUCTS = all remaining available space */
#cartDrawer.mf-purchase-view-cart
#cartItems {
    flex: 1 1 0 !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
}


/* Remove old generated Current Cart box/title */
#cartDrawer.mf-purchase-view-cart
#cartItems::before,
#cartDrawer.mf-purchase-view-cart
#cartItems::after {
    display: none !important;
    content: none !important;
}


/* Product rows */
#cartDrawer.mf-purchase-view-cart
#cartItems .cart-item {
    width: 100% !important;

    height: auto !important;
    min-height: 72px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 10px 4px !important;

    border: 0 !important;
    border-bottom: 1px solid #dfe7e4 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
}


/* SUBTOTAL + CHECKOUT = always bottom */
#cartDrawer.mf-purchase-view-cart
.cart-summary {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 9px 10px 10px !important;

    background: #ffffff !important;

    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;

    border-top: 0 !important;

    box-shadow: none !important;

    z-index: 50 !important;
}



/* =========================================================
   MEHFARO COMPACT PRINT ORDER RECEIPT V1
========================================================= */

.mf-chat-order-receipt
.mf-chat-order-card-table {
  overflow-x: hidden !important;
}

.mf-chat-order-receipt
table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.mf-chat-order-receipt
th {
  padding: 4px 5px !important;
  background: #fff8e8 !important;
  color: #8a620e !important;
  font-size: 5.5px !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.mf-chat-order-receipt
th:nth-child(1),
.mf-chat-order-receipt
td:nth-child(1) {
  width: 24% !important;
}

.mf-chat-order-receipt
th:nth-child(2),
.mf-chat-order-receipt
td:nth-child(2) {
  width: 58% !important;
}

.mf-chat-order-receipt
th:nth-child(3),
.mf-chat-order-receipt
td:nth-child(3) {
  width: 18% !important;
  text-align: right !important;
}

.mf-chat-order-receipt
td {
  padding: 5px !important;
  vertical-align: top !important;
  font-size: 7px !important;
  line-height: 1.2 !important;
}

.mf-receipt-product strong {
  display: block !important;
  font-size: 7.5px !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.mf-receipt-detail-grid {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 3px 8px !important;
}

.mf-receipt-detail {
  display: block !important;
  min-width: 0 !important;
  color: #263733 !important;
  font-size: 6.5px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.mf-receipt-detail b {
  display: block !important;
  margin-bottom: 1px !important;
  color: #8a620e !important;
  font-size: 5px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.mf-receipt-detail.sku {
  grid-column: 1 / -1 !important;
}

.mf-receipt-detail.qty {
  font-weight: 800 !important;
}

.mf-receipt-price strong {
  font-size: 7.5px !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.mf-chat-order-receipt
.mf-chat-order-card-head {
  padding: 6px 8px !important;
}



/* =========================================================
   MEHFARO PROFESSIONAL ORDER RECEIPT V2
========================================================= */

.mf-chat-order-card.mf-chat-order-receipt {
  overflow: hidden !important;

  border:
    1px solid rgba(198, 139, 19, .42) !important;

  border-radius:
    16px !important;

  background:
    #fffdfa !important;

  box-shadow:
    0 8px 24px rgba(14, 42, 43, .08) !important;
}


/* ---------------- HEADER ---------------- */

.mf-chat-order-receipt
.mf-chat-order-card-head {
  display: flex !important;

  align-items: center !important;

  justify-content:
    space-between !important;

  gap:
    10px !important;

  padding:
    10px 12px !important;

  background:
    #12383a !important;

  border:
    0 !important;

  border-bottom:
    2px solid #d89a12 !important;
}


.mf-chat-order-receipt
.mf-chat-order-card-head strong {
  color:
    #ffffff !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;
}


.mf-chat-order-receipt
.mf-chat-order-card-head span {
  flex-shrink:
    0 !important;

  padding:
    5px 8px !important;

  border-radius:
    999px !important;

  background:
    #f2b91f !important;

  color:
    #102f31 !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;
}


/* ---------------- PRODUCTS ---------------- */

.mf-chat-order-receipt
.mf-chat-order-card-table {
  overflow:
    visible !important;

  padding:
    10px !important;

  background:
    #f8f6f0 !important;
}


.mf-chat-order-receipt
table,
.mf-chat-order-receipt
tbody {
  display:
    block !important;

  width:
    100% !important;
}


.mf-chat-order-receipt
thead {
  display:
    none !important;
}


.mf-chat-order-receipt
tbody {
  display:
    grid !important;

  gap:
    9px !important;
}


.mf-chat-order-receipt
tbody tr {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr) auto !important;

  grid-template-areas:
    "product price"
    "details details" !important;

  gap:
    7px 10px !important;

  width:
    100% !important;

  padding:
    10px !important;

  border:
    1px solid #e5dfcf !important;

  border-radius:
    12px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 2px 7px rgba(16, 48, 49, .045) !important;
}


.mf-chat-order-receipt
tbody td {
  width:
    auto !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  text-align:
    left !important;
}


/* ---------------- PRODUCT NAME ---------------- */

.mf-chat-order-receipt
.mf-receipt-product {
  grid-area:
    product !important;

  align-self:
    center !important;
}


.mf-chat-order-receipt
.mf-receipt-product strong {
  display:
    block !important;

  color:
    #142b2c !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1.25 !important;

  overflow-wrap:
    anywhere !important;
}


/* ---------------- LINE PRICE ---------------- */

.mf-chat-order-receipt
.mf-receipt-price {
  grid-area:
    price !important;

  align-self:
    center !important;

  text-align:
    right !important;
}


.mf-chat-order-receipt
.mf-receipt-price strong {
  display:
    block !important;

  color:
    #087d73 !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;

  line-height:
    1.2 !important;

  white-space:
    nowrap !important;

  overflow-wrap:
    normal !important;
}


/* ---------------- DETAILS ---------------- */

.mf-chat-order-receipt
.mf-receipt-details {
  grid-area:
    details !important;

  padding-top:
    7px !important;

  border-top:
    1px solid #ece7da !important;
}


.mf-chat-order-receipt
.mf-receipt-detail-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    6px !important;
}


.mf-chat-order-receipt
.mf-receipt-detail {
  min-width:
    0 !important;

  padding:
    6px 7px !important;

  border-radius:
    8px !important;

  background:
    #f5f8f7 !important;

  color:
    #263839 !important;

  font-size:
    10.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.25 !important;

  overflow-wrap:
    anywhere !important;
}


.mf-chat-order-receipt
.mf-receipt-detail b {
  display:
    block !important;

  margin-bottom:
    3px !important;

  color:
    #83701d !important;

  font-size:
    7.5px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    .05em !important;

  text-transform:
    uppercase !important;
}


.mf-chat-order-receipt
.mf-receipt-detail.sku {
  grid-column:
    1 / -1 !important;

  background:
    #edf7f5 !important;

  color:
    #075f59 !important;
}


.mf-chat-order-receipt
.mf-receipt-detail.qty,
.mf-chat-order-receipt
.mf-receipt-detail.unit-price {
  background:
    #fff7df !important;
}


/* ---------------- TOTALS ---------------- */

.mf-chat-order-receipt
.mf-chat-order-totals {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap:
    0 !important;

  border-top:
    1px solid #dfd8c8 !important;

  border-bottom:
    1px solid #dfd8c8 !important;

  background:
    #ffffff !important;
}


.mf-chat-order-receipt
.mf-chat-order-totals span {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    4px !important;

  min-width:
    0 !important;

  padding:
    9px 8px !important;

  border-right:
    1px solid #e8e2d5 !important;

  color:
    #6e7472 !important;

  font-size:
    8px !important;

  line-height:
    1.1 !important;
}


.mf-chat-order-receipt
.mf-chat-order-totals span:last-child {
  border-right:
    0 !important;

  background:
    #e6f5f2 !important;
}


.mf-chat-order-receipt
.mf-chat-order-totals strong {
  margin:
    0 !important;

  color:
    #192d2e !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;

  line-height:
    1.2 !important;
}


.mf-chat-order-receipt
.mf-chat-order-totals span:last-child strong {
  color:
    #087d73 !important;
}


/* ---------------- CUSTOMER ---------------- */

.mf-chat-order-receipt
.mf-chat-order-address {
  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  background:
    #fffdfa !important;
}


.mf-chat-order-receipt
.mf-chat-order-address span {
  display:
    block !important;

  min-width:
    0 !important;

  padding:
    8px 9px !important;

  border-right:
    1px solid #ece5d7 !important;

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


.mf-chat-order-receipt
.mf-chat-order-address span:nth-child(2n) {
  border-right:
    0 !important;
}


.mf-chat-order-receipt
.mf-chat-order-address
.address {
  grid-column:
    1 / -1 !important;

  border-right:
    0 !important;

  border-bottom:
    0 !important;
}


.mf-chat-order-receipt
.mf-chat-order-address small {
  display:
    block !important;

  margin-bottom:
    3px !important;

  color:
    #9a7115 !important;

  font-size:
    7px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    .05em !important;

  text-transform:
    uppercase !important;
}


.mf-chat-order-receipt
.mf-chat-order-address strong {
  display:
    block !important;

  margin:
    0 !important;

  color:
    #243536 !important;

  font-size:
    10.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;

  overflow-wrap:
    anywhere !important;
}


/* ---------------- SMALL SCREEN ---------------- */

@media (max-width: 520px) {

  .mf-chat-order-receipt
  .mf-chat-order-card-table {
    padding:
      8px !important;
  }


  .mf-chat-order-receipt
  tbody tr {
    padding:
      9px !important;
  }


  .mf-chat-order-receipt
  .mf-receipt-detail-grid {
    gap:
      5px !important;
  }


  .mf-chat-order-receipt
  .mf-receipt-detail {
    padding:
      5px 6px !important;

    font-size:
      9.5px !important;
  }


  .mf-chat-order-receipt
  .mf-chat-order-totals strong {
    font-size:
      10.5px !important;
  }

}



/* =========================================================
   MEHFARO WHATSAPP CHAT ALIGNMENT V1
========================================================= */

/* Every message occupies row, bubble decides width */
#mfUnifiedOrderChatDock
.mf-order-chat-message {
  display: flex !important;
  width: 100% !important;
  margin: 6px 0 !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
}


/* CUSTOMER / OWN MESSAGE = RIGHT */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer {
  justify-content: flex-end !important;
}


/* MEHFARO / OTHER PERSON = LEFT */
#mfUnifiedOrderChatDock
.mf-order-chat-message.owner {
  justify-content: flex-start !important;
}


/* SYSTEM = CENTER */
#mfUnifiedOrderChatDock
.mf-order-chat-message.system {
  justify-content: center !important;
}


/* Normal bubble size */
#mfUnifiedOrderChatDock
.mf-order-chat-message
.mf-order-chat-bubble {
  width: fit-content !important;
  max-width: 82% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* Own/customer bubble */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer
.mf-order-chat-bubble {
  margin-left: auto !important;
  margin-right: 0 !important;

  border-radius:
    16px 16px 4px 16px !important;

  background:
    #d8f3ec !important;
}


/* Owner/MEHFARO bubble */
#mfUnifiedOrderChatDock
.mf-order-chat-message.owner
.mf-order-chat-bubble {
  margin-left: 0 !important;
  margin-right: auto !important;

  border-radius:
    16px 16px 16px 4px !important;

  background:
    #ffffff !important;
}


/* System/status */
#mfUnifiedOrderChatDock
.mf-order-chat-message.system
.mf-order-chat-bubble {
  max-width: 76% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Customer order card is also customer's sent item */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer
.order-card-bubble {
  width: 90% !important;
  max-width: 90% !important;

  margin-left: auto !important;
  margin-right: 0 !important;

  padding: 0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/* Order card itself fills only its bubble */
#mfUnifiedOrderChatDock
.order-card-bubble
.mf-chat-order-card {
  width: 100% !important;
  max-width: 100% !important;
}


/* Images/files stay on sender's side */
#mfUnifiedOrderChatDock
.mf-order-chat-attachment,
#mfUnifiedOrderChatDock
.mf-order-chat-attachment-link {
  max-width: 100% !important;
}


/* Time/ticks stay at bottom-right of own bubble */
#mfUnifiedOrderChatDock
.mf-order-chat-message.customer
.mf-order-chat-bubble > small {
  justify-content: flex-end !important;
  text-align: right !important;
}


/* Owner time remains right inside left bubble */
#mfUnifiedOrderChatDock
.mf-order-chat-message.owner
.mf-order-chat-bubble > small {
  justify-content: flex-end !important;
  text-align: right !important;
}


@media (max-width: 520px) {

  #mfUnifiedOrderChatDock
  .mf-order-chat-message
  .mf-order-chat-bubble {
    max-width: 86% !important;
  }


  #mfUnifiedOrderChatDock
  .mf-order-chat-message.customer
  .order-card-bubble {
    width: 94% !important;
    max-width: 94% !important;
  }

}



/* =========================================================
   MEHFARO MODERN MOBILE APP CHAT V1
   Approved UI direction
========================================================= */

#cartDrawer.mf-purchase-view-chat {
  --mf-app-teal: #075f5a;
  --mf-app-teal-2: #0b7770;
  --mf-app-mint: #eaf8f3;
  --mf-app-mint-2: #dff5ed;
  --mf-app-gold: #d8a02b;
  --mf-app-gold-soft: #fff5df;
  --mf-app-text: #15242b;
  --mf-app-muted: #758087;
  --mf-app-line: #e5e9e7;
  --mf-app-bg: #f7f8f6;

  background: var(--mf-app-bg) !important;
}


/* =========================================================
   TOP HEADER
========================================================= */

#cartDrawer.mf-purchase-view-chat
.cart-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;

  min-height: 72px !important;

  padding:
    14px
    16px !important;

  background:
    rgba(255,255,255,.98) !important;

  color:
    var(--mf-app-text) !important;

  border-bottom:
    1px solid var(--mf-app-line) !important;

  box-shadow:
    0 3px 18px rgba(18,44,42,.05) !important;
}


#cartDrawer.mf-purchase-view-chat
.cart-header small {
  color:
    var(--mf-app-teal-2) !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .12em !important;
}


#cartDrawer.mf-purchase-view-chat
.cart-header h2 {
  margin-top:
    3px !important;

  color:
    var(--mf-app-text) !important;

  font-size:
    18px !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;
}


#cartDrawer.mf-purchase-view-chat
#closeCart {
  width:
    36px !important;

  height:
    36px !important;

  border:
    1px solid #e3e8e6 !important;

  border-radius:
    50% !important;

  background:
    #f4f6f5 !important;

  color:
    #435052 !important;

  font-size:
    16px !important;
}


/* =========================================================
   CART / CHAT SEGMENTED TABS
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-purchase-tabs {
  position: sticky !important;

  top:
    72px !important;

  z-index:
    2900 !important;

  display:
    grid !important;

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

  gap:
    8px !important;

  padding:
    10px 12px !important;

  background:
    rgba(255,255,255,.97) !important;

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


#cartDrawer.mf-purchase-view-chat
.mf-purchase-tabs
button {
  min-height:
    46px !important;

  border:
    1px solid #e8e5dc !important;

  border-radius:
    24px !important;

  background:
    #fbf6ea !important;

  color:
    #263236 !important;

  box-shadow:
    none !important;

  font-size:
    13px !important;

  font-weight:
    750 !important;

  transition:
    .18s ease !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-purchase-tabs
button.active {
  border-color:
    var(--mf-app-teal) !important;

  background:
    linear-gradient(
      135deg,
      #0b6c66,
      #07544f
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 5px 14px rgba(7,95,90,.18) !important;
}


/* =========================================================
   CHAT BODY
========================================================= */

#cartDrawer.mf-purchase-view-chat
#mfUnifiedCartChat,
#cartDrawer.mf-purchase-view-chat
#mfUnifiedOrderChatDock,
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-right {
  background:
    #f8f9f7 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-right {
  margin:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-messages {
  padding:
    18px
    12px
    20px !important;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(7,95,90,.026) 0 18px,
      transparent 19px
    ),
    radial-gradient(
      circle at 86% 24%,
      rgba(216,160,43,.025) 0 14px,
      transparent 15px
    ),
    #f8f9f7 !important;
}


/* =========================================================
   WHATSAPP-LIKE MESSAGE ROWS
========================================================= */

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

  align-items:
    flex-end !important;

  width:
    100% !important;

  box-sizing:
    border-box !important;

  margin:
    7px 0 !important;

  padding:
    0 2px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.customer {
  justify-content:
    flex-end !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.owner {
  justify-content:
    flex-start !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.system {
  justify-content:
    center !important;
}


/* MEHFARO avatar */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.owner::before {
  content:
    "M";

  flex:
    0 0 34px !important;

  width:
    34px !important;

  height:
    34px !important;

  display:
    grid !important;

  place-items:
    center !important;

  margin:
    0 7px 2px 0 !important;

  border-radius:
    50% !important;

  background:
    linear-gradient(
      145deg,
      #073f3b,
      #0a625d
    ) !important;

  color:
    #e2b951 !important;

  font-family:
    Georgia,
    serif !important;

  font-size:
    18px !important;

  box-shadow:
    0 4px 12px rgba(4,56,52,.15) !important;
}


/* =========================================================
   NORMAL TEXT BUBBLES
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message
.mf-order-chat-bubble {
  width:
    fit-content !important;

  max-width:
    78% !important;

  margin:
    0 !important;

  padding:
    9px 11px !important;

  border:
    1px solid #e5e9e7 !important;

  border-radius:
    17px !important;

  box-shadow:
    0 3px 11px rgba(20,42,41,.055) !important;

  color:
    var(--mf-app-text) !important;

  font-size:
    13px !important;

  line-height:
    1.42 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.customer
.mf-order-chat-bubble:not(.order-card-bubble) {
  margin-left:
    auto !important;

  border-color:
    #ccecdf !important;

  border-radius:
    17px 17px 5px 17px !important;

  background:
    #dcf7e9 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.owner
.mf-order-chat-bubble {
  margin-right:
    auto !important;

  border-radius:
    17px 17px 17px 5px !important;

  background:
    #ffffff !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.system
.mf-order-chat-bubble {
  max-width:
    82% !important;

  padding:
    6px 10px !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    #ebefed !important;

  color:
    #65706f !important;

  font-size:
    10px !important;

  box-shadow:
    none !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-bubble > p {
  margin:
    0 !important;

  color:
    inherit !important;

  font-size:
    13px !important;

  font-weight:
    500 !important;

  line-height:
    1.42 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-bubble > small {
  display:
    flex !important;

  justify-content:
    flex-end !important;

  align-items:
    center !important;

  gap:
    4px !important;

  margin-top:
    5px !important;

  color:
    #8b9492 !important;

  font-size:
    8px !important;

  line-height:
    1 !important;
}


/* =========================================================
   ORDER CARD AS A CHAT ATTACHMENT
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.customer
.order-card-bubble {
  width:
    94% !important;

  max-width:
    94% !important;

  margin-left:
    auto !important;

  margin-right:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


#cartDrawer.mf-purchase-view-chat
.order-card-bubble
.mf-chat-order-card {
  width:
    100% !important;

  max-width:
    100% !important;

  overflow:
    hidden !important;

  border:
    1px solid #cdeadd !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      180deg,
      #e9fbf2 0%,
      #e2f7ec 100%
    ) !important;

  box-shadow:
    0 7px 22px rgba(9,90,80,.08) !important;
}


/* Order header */
#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card
.mf-chat-order-card-head {
  padding:
    11px 12px !important;

  border:
    0 !important;

  border-bottom:
    1px solid rgba(7,95,90,.10) !important;

  background:
    transparent !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-head strong {
  color:
    #173130 !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-head span {
  padding:
    5px 8px !important;

  border:
    1px solid #f0c865 !important;

  border-radius:
    999px !important;

  background:
    #fff0bd !important;

  color:
    #815b00 !important;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}


/* Products area */
#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-table {
  padding:
    8px !important;

  background:
    transparent !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-table
tbody {
  gap:
    8px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-table
tbody tr {
  padding:
    10px !important;

  border:
    1px solid #e2e8e5 !important;

  border-radius:
    13px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 2px 8px rgba(23,49,48,.04) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-product strong {
  color:
    #17292c !important;

  font-size:
    13px !important;

  font-weight:
    850 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-price strong {
  color:
    var(--mf-app-teal) !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;

  white-space:
    nowrap !important;
}


/* Product detail chips */
#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail-grid {
  gap:
    5px 7px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail {
  padding:
    5px 6px !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    #f5f7f6 !important;

  color:
    #263638 !important;

  font-size:
    9.5px !important;

  font-weight:
    650 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail b {
  margin-bottom:
    2px !important;

  color:
    #7b7160 !important;

  font-size:
    6.5px !important;

  font-weight:
    850 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail.sku {
  background:
    #ecf6f3 !important;

  color:
    #075f5a !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail.qty,
#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail.unit-price {
  background:
    #fff6de !important;
}


/* =========================================================
   TOTALS
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals {
  margin:
    0 8px 8px !important;

  overflow:
    hidden !important;

  border:
    1px solid rgba(7,95,90,.08) !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.74) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals span {
  padding:
    8px !important;

  border-color:
    #e5e9e6 !important;

  background:
    transparent !important;

  color:
    #727c7a !important;

  font-size:
    7.5px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals strong {
  color:
    #1e3132 !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals span:last-child {
  background:
    #d9f1eb !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals span:last-child strong {
  color:
    var(--mf-app-teal) !important;
}


/* =========================================================
   BUYER INFORMATION
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address {
  margin:
    0 8px 8px !important;

  overflow:
    hidden !important;

  border:
    1px solid rgba(7,95,90,.08) !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.82) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address span {
  padding:
    7px 8px !important;

  border-color:
    #e8ece9 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address small {
  color:
    #8b7644 !important;

  font-size:
    6.5px !important;

  font-weight:
    850 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address strong {
  color:
    #243638 !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   ATTACHMENTS
========================================================= */

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

  max-width:
    240px !important;

  width:
    100% !important;

  margin-bottom:
    5px !important;

  border-radius:
    12px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-attachment-link {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  padding:
    9px 10px !important;

  border:
    1px solid #dfe6e3 !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.78) !important;

  color:
    #1c3535 !important;

  text-decoration:
    none !important;
}


/* =========================================================
   MODERN BOTTOM COMPOSER
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form {
  position:
    sticky !important;

  bottom:
    0 !important;

  z-index:
    3000 !important;

  display:
    grid !important;

  grid-template-columns:
    40px
    minmax(0,1fr)
    44px !important;

  gap:
    7px !important;

  align-items:
    center !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    9px 10px
    calc(
      9px +
      env(safe-area-inset-bottom)
    ) !important;

  border:
    0 !important;

  border-top:
    1px solid #e5e9e7 !important;

  background:
    rgba(255,255,255,.98) !important;

  box-shadow:
    0 -5px 20px rgba(18,44,42,.06) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-attach-button {
  width:
    40px !important;

  min-width:
    40px !important;

  height:
    40px !important;

  padding:
    0 !important;

  border:
    1px solid #dce3e0 !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  color:
    #43595a !important;

  font-size:
    17px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
[data-chat-input] {
  width:
    100% !important;

  min-height:
    42px !important;

  padding:
    0 14px !important;

  border:
    1px solid #d9e1de !important;

  border-radius:
    23px !important;

  background:
    #ffffff !important;

  color:
    #233638 !important;

  font-size:
    13px !important;

  box-shadow:
    none !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
[data-chat-input]:focus {
  border-color:
    #82bdb4 !important;

  outline:
    none !important;

  box-shadow:
    0 0 0 3px rgba(11,119,112,.08) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
button[type="submit"] {
  width:
    44px !important;

  min-width:
    44px !important;

  height:
    44px !important;

  min-height:
    44px !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    linear-gradient(
      145deg,
      #0b716a,
      #07534f
    ) !important;

  color:
    transparent !important;

  font-size:
    0 !important;

  box-shadow:
    0 5px 13px rgba(7,95,90,.20) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
button[type="submit"]::before {
  content:
    "➤";

  display:
    block !important;

  color:
    #ffffff !important;

  font-size:
    19px !important;

  line-height:
    44px !important;

  text-align:
    center !important;

  transform:
    translateX(1px) !important;
}


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

@media (max-width: 520px) {

  #cartDrawer.mf-purchase-view-chat
  .mf-order-chat-message
  .mf-order-chat-bubble {
    max-width:
      82% !important;
  }


  #cartDrawer.mf-purchase-view-chat
  .mf-order-chat-message.customer
  .order-card-bubble {
    width:
      96% !important;

    max-width:
      96% !important;
  }


  #cartDrawer.mf-purchase-view-chat
  .mf-receipt-detail-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  #cartDrawer.mf-purchase-view-chat
  .mf-receipt-detail {
    font-size:
      9px !important;
  }

}



/* =========================================================
   MEHFARO PREMIUM APP CHAT V1
   Approved mobile-app visual direction
========================================================= */


/* =========================================================
   DRAWER
========================================================= */

#cartDrawer.mf-purchase-view-chat {
  background:
    #f7f8f6 !important;
}


/* =========================================================
   PREMIUM LIGHT HEADER
========================================================= */

#cartDrawer.mf-purchase-view-chat
.cart-header {
  position:
    relative !important;

  min-height:
    82px !important;

  padding:
    15px
    54px
    14px
    74px !important;

  border-bottom:
    1px solid
    #e9ece9 !important;

  background:
    rgba(
      255,
      255,
      255,
      .98
    ) !important;

  color:
    #182326 !important;

  box-shadow:
    0
    6px
    20px
    rgba(
      20,
      40,
      42,
      .06
    ) !important;
}


/* MEHFARO avatar */
#cartDrawer.mf-purchase-view-chat
.cart-header::before {
  content:
    "M";

  position:
    absolute;

  left:
    16px;

  top:
    50%;

  transform:
    translateY(-50%);

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #0b3c3b,
      #12302f
    );

  color:
    #e7b94a;

  font-family:
    Georgia,
    serif;

  font-size:
    23px;

  box-shadow:
    0
    5px
    14px
    rgba(
      12,
      58,
      57,
      .18
    );
}


#cartDrawer.mf-purchase-view-chat
.cart-header small {
  margin:
    0
    0
    4px !important;

  color:
    #1a8b79 !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .08em !important;
}


#cartDrawer.mf-purchase-view-chat
.cart-header h2 {
  margin:
    0 !important;

  color:
    #172124 !important;

  font-size:
    18px !important;

  font-weight:
    850 !important;

  line-height:
    1.05 !important;
}


#cartDrawer.mf-purchase-view-chat
#closeCart {
  position:
    absolute !important;

  top:
    20px !important;

  right:
    14px !important;

  width:
    38px !important;

  height:
    38px !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    #eef2f0 !important;

  color:
    #33413f !important;
}


/* =========================================================
   CART / CHAT PILLS
========================================================= */

#cartDrawer.mf-purchase-view-chat
#mfPurchaseTabs {
  gap:
    8px !important;

  padding:
    10px
    12px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    #eceeea !important;

  background:
    #ffffff !important;
}


#cartDrawer.mf-purchase-view-chat
#mfPurchaseTabs button {
  min-height:
    44px !important;

  border:
    1px solid
    #ece4d3 !important;

  border-radius:
    999px !important;

  background:
    #fbf4e8 !important;

  color:
    #263233 !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  box-shadow:
    none !important;
}


#cartDrawer.mf-purchase-view-chat
#mfPurchaseTabs
button.active {
  border-color:
    #0f6964 !important;

  background:
    linear-gradient(
      135deg,
      #0d716b,
      #075550
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0
    5px
    14px
    rgba(
      13,
      113,
      107,
      .18
    ) !important;
}


/* =========================================================
   CHAT BACKGROUND
========================================================= */

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

#cartDrawer.mf-purchase-view-chat
#mfUnifiedOrderChatDock
.mf-order-chat-right {
  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(15, 111, 105, .035)
      0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 85% 28%,
      rgba(207, 160, 55, .045)
      0 2px,
      transparent 3px
    ),
    #f8f9f7 !important;

  background-size:
    46px 46px,
    62px 62px,
    auto !important;
}


/* conversation spacing */
#cartDrawer.mf-purchase-view-chat
#mfUnifiedOrderChatDock
.mf-order-chat-messages {
  padding:
    16px
    12px
    22px !important;
}


/* =========================================================
   WHATSAPP-STYLE ROW ALIGNMENT
========================================================= */

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

  width:
    100% !important;

  align-items:
    flex-end !important;

  gap:
    7px !important;

  margin:
    8px 0 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.customer {
  justify-content:
    flex-end !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.owner {
  justify-content:
    flex-start !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.system {
  justify-content:
    center !important;
}


/* MEHFARO avatar on left replies */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.owner::before {
  content:
    "M";

  flex:
    0 0 32px;

  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #103d3b;

  color:
    #e4b748;

  font-family:
    Georgia,
    serif;

  font-size:
    16px;

  box-shadow:
    0
    3px
    9px
    rgba(
      15,
      61,
      59,
      .14
    );
}


/* =========================================================
   NORMAL MESSAGE BUBBLES
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message
.mf-order-chat-bubble {
  width:
    fit-content !important;

  max-width:
    78% !important;

  margin:
    0 !important;

  padding:
    10px
    12px !important;

  border:
    0 !important;

  font-size:
    13px !important;

  line-height:
    1.45 !important;

  box-shadow:
    0
    3px
    13px
    rgba(
      30,
      49,
      50,
      .08
    ) !important;
}


/* customer / sent */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.customer
.mf-order-chat-bubble {
  margin-left:
    auto !important;

  border-radius:
    17px
    17px
    5px
    17px !important;

  background:
    #dff8ec !important;

  color:
    #172927 !important;
}


/* MEHFARO */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.owner
.mf-order-chat-bubble {
  margin-right:
    auto !important;

  border-radius:
    17px
    17px
    17px
    5px !important;

  background:
    #ffffff !important;

  color:
    #202a2b !important;
}


/* system */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.system
.mf-order-chat-bubble {
  max-width:
    80% !important;

  padding:
    6px
    10px !important;

  border-radius:
    999px !important;

  background:
    #eaeeec !important;

  color:
    #66716e !important;

  box-shadow:
    none !important;
}


/* message text */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-bubble > p {
  margin:
    0 !important;

  color:
    inherit !important;

  font-size:
    13px !important;

  font-weight:
    500 !important;

  line-height:
    1.45 !important;
}


/* time + ticks */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-bubble > small {
  display:
    flex !important;

  justify-content:
    flex-end !important;

  align-items:
    center !important;

  gap:
    4px !important;

  margin-top:
    5px !important;

  color:
    #788482 !important;

  font-size:
    9px !important;

  opacity:
    .9 !important;
}


/* =========================================================
   ORDER CARD = LARGE SENT CHAT BUBBLE
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-order-chat-message.customer
.order-card-bubble {
  width:
    94% !important;

  max-width:
    94% !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* outer order receipt */
#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card.mf-chat-order-receipt {
  overflow:
    hidden !important;

  border:
    1px solid
    #cfebdf !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      #e9fff2,
      #f2fff7
    ) !important;

  box-shadow:
    0
    8px
    26px
    rgba(
      18,
      72,
      66,
      .10
    ) !important;
}


/* order title */
#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card
.mf-chat-order-card-head {
  padding:
    13px
    14px
    10px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(
      32,
      106,
      96,
      .10
    ) !important;

  background:
    transparent !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-head strong {
  color:
    #143f3c !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-card-head span {
  padding:
    5px
    8px !important;

  border-radius:
    999px !important;

  background:
    #fae8a7 !important;

  color:
    #77550b !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;
}


/* =========================================================
   PRODUCT CARDS INSIDE ORDER
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-chat-order-receipt
.mf-chat-order-card-table {
  padding:
    8px
    10px !important;

  background:
    transparent !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-receipt
tbody {
  display:
    grid !important;

  gap:
    8px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-receipt
tbody tr {
  padding:
    11px !important;

  border:
    1px solid
    #e4ece8 !important;

  border-radius:
    14px !important;

  background:
    rgba(
      255,
      255,
      255,
      .96
    ) !important;

  box-shadow:
    0
    3px
    11px
    rgba(
      24,
      49,
      49,
      .05
    ) !important;
}


/* product name */
#cartDrawer.mf-purchase-view-chat
.mf-receipt-product strong {
  color:
    #192728 !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;
}


/* product price */
#cartDrawer.mf-purchase-view-chat
.mf-receipt-price strong {
  color:
    #087970 !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;

  white-space:
    nowrap !important;
}


/* details */
#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap:
    5px
    7px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail {
  padding:
    5px
    6px !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    #f6f8f7 !important;

  color:
    #253433 !important;

  font-size:
    10px !important;

  font-weight:
    650 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail b {
  margin-bottom:
    2px !important;

  color:
    #78837f !important;

  font-size:
    7px !important;

  font-weight:
    850 !important;
}


/* SKU */
#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail.sku {
  grid-column:
    1 / -1 !important;

  background:
    #edf7f4 !important;

  color:
    #0c6860 !important;
}


/* Qty and unit price */
#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail.qty,

#cartDrawer.mf-purchase-view-chat
.mf-receipt-detail.unit-price {
  background:
    #fff9e8 !important;
}


/* =========================================================
   TOTALS
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals {
  margin:
    0
    10px
    8px !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    rgba(
      255,
      255,
      255,
      .82
    ) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals span {
  padding:
    9px !important;

  border:
    0 !important;

  border-right:
    1px solid
    #e8eeeb !important;

  color:
    #737d7a !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals
span:last-child {
  border-right:
    0 !important;

  background:
    #dff5ef !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals strong {
  color:
    #182a29 !important;

  font-size:
    12px !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-totals
span:last-child strong {
  color:
    #08756c !important;
}


/* =========================================================
   BUYER INFORMATION
========================================================= */

#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address {
  margin:
    0
    10px
    10px !important;

  overflow:
    hidden !important;

  border:
    1px solid
    #e8ece8 !important;

  border-radius:
    13px !important;

  background:
    rgba(
      255,
      255,
      255,
      .92
    ) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address span {
  padding:
    8px
    9px !important;

  border-color:
    #eef1ef !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address small {
  color:
    #8c9592 !important;

  font-size:
    7px !important;

  font-weight:
    850 !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-chat-order-address strong {
  color:
    #253332 !important;

  font-size:
    10.5px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   PREMIUM BOTTOM COMPOSER
========================================================= */

#cartDrawer.mf-purchase-view-chat
#mfUnifiedOrderChatDock
.mf-order-chat-form {
  gap:
    7px !important;

  padding:
    9px
    10px !important;

  border:
    0 !important;

  border-top:
    1px solid
    #e8ece9 !important;

  background:
    rgba(
      255,
      255,
      255,
      .98
    ) !important;

  box-shadow:
    0
    -6px
    20px
    rgba(
      29,
      51,
      51,
      .05
    ) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
[data-chat-input] {
  min-height:
    42px !important;

  padding:
    10px
    14px !important;

  border:
    1px solid
    #dfe5e2 !important;

  border-radius:
    999px !important;

  background:
    #fafbfa !important;

  color:
    #202b2c !important;

  font-size:
    13px !important;

  box-shadow:
    none !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
[data-chat-input]:focus {
  border-color:
    #78bbb1 !important;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      15,
      117,
      108,
      .08
    ) !important;
}


/* attachment circle */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
.mf-order-chat-attach-button,

#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
.mf-attach-btn {
  width:
    40px !important;

  height:
    40px !important;

  min-width:
    40px !important;

  padding:
    0 !important;

  border:
    1px solid
    #dfe5e2 !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  color:
    #22413f !important;
}


/* send */
#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
button[type="submit"] {
  width:
    44px !important;

  min-width:
    44px !important;

  height:
    44px !important;

  min-height:
    44px !important;

  overflow:
    hidden !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    linear-gradient(
      135deg,
      #0e746d,
      #07534e
    ) !important;

  color:
    #ffffff !important;

  font-size:
    0 !important;

  box-shadow:
    0
    5px
    14px
    rgba(
      10,
      100,
      94,
      .22
    ) !important;
}


#cartDrawer.mf-purchase-view-chat
.mf-order-chat-form
button[type="submit"]::before {
  content:
    "➤";

  font-size:
    17px !important;

  line-height:
    1 !important;
}


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

@media (max-width: 520px) {

  #cartDrawer.mf-purchase-view-chat
  .mf-order-chat-message
  .mf-order-chat-bubble {
    max-width:
      84% !important;
  }


  #cartDrawer.mf-purchase-view-chat
  .mf-order-chat-message.customer
  .order-card-bubble {
    width:
      96% !important;

    max-width:
      96% !important;
  }


  #cartDrawer.mf-purchase-view-chat
  .mf-receipt-detail-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }

}