/* =========================================================
   MEHFARO - CUSTOMER CONNECTION / CHAT / IDENTITY
   COMPLETE RESPONSIVE UI

   Includes:
   - Website Chat
   - Separate WhatsApp Support
   - Google / Guest first-shopping gate
   - Mobile Chat navigation
   - Cart products inside chat
========================================================= */


/* =========================================================
   OLD DUPLICATE SUPPORT LAUNCHERS
   Logic remains loaded, duplicate UI only stays hidden.
========================================================= */

.support-button {
  display: none !important;
}

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


/* =========================================================
   WEBSITE CHAT FLOATING BUTTON
========================================================= */

.mf-customer-chat-fab {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 2600;

  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 54px;

  padding:
    8px
    14px
    8px
    8px;

  border: 0;

  border-radius: 18px;

  background: #172025;

  color: #ffffff;

  box-shadow:
    0 18px 48px
    rgba(17, 28, 32, .24);

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.mf-customer-chat-fab:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 22px 58px
    rgba(17, 28, 32, .30);
}


.mf-cc-fab-mark {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  flex:
    0
    0
    38px;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #0b6d61,
      #15958a
    );

  color: #ffffff;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .08em;
}


.mf-customer-chat-fab > span:last-child {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.mf-customer-chat-fab strong {
  font-size: 13px;

  line-height: 1.1;
}


.mf-customer-chat-fab small {
  margin-top: 3px;

  color:
    rgba(255, 255, 255, .65);

  font-size: 8px;
}


/* =========================================================
   SEPARATE WHATSAPP SUPPORT BUTTON
========================================================= */

.mf-whatsapp-support-fab {
  position: fixed;

  right: 22px;
  bottom: 86px;

  z-index: 2590;

  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 49px;

  padding:
    7px
    13px
    7px
    7px;

  border: 0;

  border-radius: 17px;

  background: #25d366;

  color: #ffffff;

  box-shadow:
    0 16px 38px
    rgba(20, 110, 65, .24);

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.mf-whatsapp-support-fab:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 20px 46px
    rgba(20, 110, 65, .30);
}


.mf-whatsapp-icon {
  display: grid;

  place-items: center;

  width: 35px;
  height: 35px;

  flex:
    0
    0
    35px;

  border-radius: 11px;

  background:
    rgba(255, 255, 255, .18);

  color: #ffffff;

  font-size: 9px;

  font-weight: 950;

  letter-spacing: .03em;
}


.mf-whatsapp-copy {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.mf-whatsapp-copy strong {
  font-size: 11px;

  line-height: 1.05;
}


.mf-whatsapp-copy small {
  margin-top: 2px;

  color:
    rgba(255, 255, 255, .8);

  font-size: 7px;
}


/* =========================================================
   CUSTOMER CHAT OVERLAY
========================================================= */

.mf-customer-chat-overlay {
  position: fixed;

  inset: 0;

  z-index: 5000;

  display: none;

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

  padding: 22px;

  background:
    rgba(8, 17, 20, .60);

  backdrop-filter:
    blur(8px);
}


.mf-customer-chat-overlay.open {
  display: flex;
}


body.mf-customer-chat-open {
  overflow: hidden !important;
}


/* =========================================================
   CHAT SHELL
========================================================= */

.mf-customer-chat-shell {
  width:
    min(
      620px,
      100%
    );

  height:
    min(
      720px,
      calc(100dvh - 44px)
    );

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(20, 35, 40, .10);

  border-radius: 26px;

  background: #f8f6f1;

  box-shadow:
    0 32px 90px
    rgba(7, 15, 18, .32);
}


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

.mf-customer-chat-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    15px
    16px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .06);

  background: #172025;

  color: #ffffff;
}


.mf-customer-chat-brand {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;
}


.mf-customer-chat-mark {
  display: grid;

  place-items: center;

  width: 43px;
  height: 43px;

  flex:
    0
    0
    43px;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #0d7165,
      #15a093
    );

  color: #ffffff;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .07em;
}


.mf-customer-chat-brand small {
  display: block;

  margin-bottom: 3px;

  color:
    rgba(255, 255, 255, .55);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: .14em;
}


.mf-customer-chat-brand h2 {
  margin: 0;

  color: #ffffff;

  font-size: 18px;

  line-height: 1.05;
}


.mf-customer-chat-brand p {
  margin:
    4px
    0
    0;

  color:
    rgba(255, 255, 255, .65);

  font-size: 8px;
}


.mf-customer-chat-close {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  flex:
    0
    0
    38px;

  border: 0;

  border-radius: 12px;

  background:
    rgba(255, 255, 255, .10);

  color: #ffffff;

  cursor: pointer;
}


.mf-customer-chat-close:hover {
  background:
    rgba(255, 255, 255, .17);
}


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

.mf-customer-chat-body {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding: 18px;

  background:
    linear-gradient(
      180deg,
      #f8f6f1,
      #eef3f1
    );
}


/* =========================================================
   CUSTOMER IDENTITY STRIP INSIDE CHAT
========================================================= */

.mf-cc-identity-strip {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 14px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(19, 141, 131, .13);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, .78);
}


.mf-cc-identity-strip span {
  color: #74807e;

  font-size: 8px;

  font-weight: 700;
}


.mf-cc-identity-strip strong {
  max-width: 65%;

  overflow: hidden;

  color: #138d83;

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   CHAT BUBBLES
========================================================= */

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

  max-width: 84%;

  margin-bottom: 11px;

  padding:
    11px
    13px;

  border-radius: 17px;

  font-size: 11px;

  line-height: 1.55;

  white-space: pre-line;
}


.mf-cc-bubble.bot {
  margin-right: auto;

  border-bottom-left-radius: 5px;

  background: #ffffff;

  color: #202829;

  box-shadow:
    0 5px 18px
    rgba(20, 35, 40, .06);
}


.mf-cc-bubble.user {
  margin-left: auto;

  border-bottom-right-radius: 5px;

  background: #138d83;

  color: #ffffff;
}


/* =========================================================
   ACTIVE ORDER CARD
========================================================= */

.mf-cc-active-order {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(19, 141, 131, .16);

  border-radius: 16px;

  background: #e8f5f2;
}


.mf-cc-active-order div {
  min-width: 0;
}


.mf-cc-active-order small {
  display: block;

  margin-bottom: 3px;

  color: #5f7974;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .13em;
}


.mf-cc-active-order strong {
  display: block;

  overflow: hidden;

  color: #172025;

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.mf-cc-active-order button {
  min-height: 34px;

  flex: 0 0 auto;

  padding:
    0
    12px;

  border: 0;

  border-radius: 999px;

  background: #138d83;

  color: #ffffff;

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}


/* =========================================================
   PRODUCTS INSIDE CHAT
========================================================= */

.mf-cc-products {
  display: grid;

  gap: 8px;

  margin:
    5px
    0
    14px;
}


.mf-cc-product {
  display: grid;

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

  align-items: center;

  gap: 10px;

  padding: 7px;

  border:
    1px solid
    rgba(20, 35, 40, .08);

  border-radius: 15px;

  background: #ffffff;
}


.mf-cc-product img,
.mf-cc-product-mark {
  width: 52px;

  height: 52px;

  border-radius: 11px;
}


.mf-cc-product img {
  display: block;

  object-fit: cover;
}


.mf-cc-product-mark {
  display: grid;

  place-items: center;

  background: #edf3f1;

  color: #138d83;

  font-size: 10px;

  font-weight: 900;
}


.mf-cc-product > div:last-child {
  min-width: 0;
}


.mf-cc-product strong {
  display: block;

  overflow: hidden;

  color: #172025;

  font-size: 11px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.mf-cc-product span {
  display: block;

  margin-top: 4px;

  color: #6c7779;

  font-size: 9px;
}


.mf-cc-total {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    10px
    12px;

  border-radius: 14px;

  background: #172025;

  color: #ffffff;
}


.mf-cc-total span {
  color:
    rgba(255, 255, 255, .62);

  font-size: 9px;
}


.mf-cc-total strong {
  color: #ffffff;

  font-size: 13px;
}


/* =========================================================
   CHAT FOOTER
========================================================= */

.mf-customer-chat-footer {
  padding: 12px;

  border-top:
    1px solid
    rgba(20, 35, 40, .09);

  background: #ffffff;
}


.mf-cc-actions {
  display: grid;

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

  gap: 8px;
}


.mf-customer-chat-footer button {
  width: 100%;

  min-height: 42px;

  padding:
    0
    16px;

  border:
    1px solid
    #d8e0de;

  border-radius: 999px;

  background: #ffffff;

  color: #172025;

  font-size: 10px;

  font-weight: 850;

  cursor: pointer;
}


.mf-customer-chat-footer
.mf-cc-primary {
  border-color: #138d83;

  background: #138d83;

  color: #ffffff;
}


/* =========================================================
   FIRST SHOPPING IDENTITY GATE
========================================================= */

.mf-identity-gate-overlay {
  position: fixed;

  inset: 0;

  z-index: 8000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px;

  background:
    rgba(9, 18, 21, .66);

  backdrop-filter:
    blur(10px);
}


.mf-identity-gate-overlay.open {
  display: flex;
}


/* =========================================================
   IDENTITY CARD
========================================================= */

.mf-identity-gate-card {
  position: relative;

  width:
    min(
      430px,
      100%
    );

  padding:
    30px
    28px
    25px;

  border:
    1px solid
    rgba(20, 35, 40, .10);

  border-radius: 27px;

  background:
    linear-gradient(
      155deg,
      #ffffff,
      #f7f5ef
    );

  box-shadow:
    0 32px 90px
    rgba(7, 15, 18, .30);

  text-align: center;
}


.mf-identity-gate-close {
  position: absolute;

  top: 13px;

  right: 13px;

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 11px;

  background: #eef1ef;

  color: #394346;

  cursor: pointer;
}


.mf-identity-logo {
  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  margin:
    0
    auto
    13px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #0d7165,
      #17a092
    );

  color: #ffffff;

  box-shadow:
    0 12px 26px
    rgba(19, 141, 131, .18);

  font-size: 16px;

  font-weight: 950;

  letter-spacing: .07em;
}


.mf-identity-kicker {
  display: block;

  margin-bottom: 8px;

  color: #c48617;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .17em;
}


.mf-identity-gate-card h2 {
  margin:
    0
    0
    10px;

  color: #172025;

  font-size:
    clamp(
      25px,
      4vw,
      31px
    );

  line-height: 1.02;
}


.mf-identity-gate-card > p {
  max-width: 340px;

  margin:
    0
    auto
    21px;

  color: #657073;

  font-size: 11px;

  line-height: 1.55;
}


/* =========================================================
   GOOGLE BUTTON CONTAINER
========================================================= */

.mf-google-button-wrap {
  width: 100%;

  min-height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.mf-google-button-wrap > div {
  max-width: 100%;
}


/* =========================================================
   GOOGLE PLACEHOLDER
   Used until real Google Client ID is configured.
========================================================= */

.mf-identity-google-placeholder {
  width: 100%;

  min-height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    0
    16px;

  border:
    1px solid
    #d8dcdc;

  border-radius: 999px;

  background: #ffffff;

  color: #262d30;

  font-size: 11px;

  font-weight: 800;

  cursor: pointer;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.mf-identity-google-placeholder:hover {
  transform:
    translateY(-1px);

  border-color: #b9c2c0;

  box-shadow:
    0 8px 20px
    rgba(23, 32, 37, .07);
}


.mf-google-g {
  width: 25px;

  height: 25px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #e1e3e3;

  border-radius: 50%;

  background: #ffffff;

  color: #4285f4;

  font-size: 13px;

  font-weight: 900;
}


.mf-google-status {
  display: block;

  min-height: 14px;

  margin-top: 8px;

  color: #788183;

  font-size: 8px;

  line-height: 1.4;
}


/* =========================================================
   OR DIVIDER
========================================================= */

.mf-identity-divider {
  display: flex;

  align-items: center;

  gap: 10px;

  margin:
    14px
    0;
}


.mf-identity-divider::before,
.mf-identity-divider::after {
  content: "";

  height: 1px;

  flex: 1;

  background: #e0e5e3;
}


.mf-identity-divider span {
  color: #88918f;

  font-size: 8px;

  font-weight: 800;

  text-transform: uppercase;
}


/* =========================================================
   GUEST BUTTON
========================================================= */

.mf-identity-guest-button {
  width: 100%;

  min-height: 46px;

  border: 0;

  border-radius: 999px;

  background: #172025;

  color: #ffffff;

  font-size: 11px;

  font-weight: 850;

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.mf-identity-guest-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 25px
    rgba(23, 32, 37, .16);
}


.mf-identity-note {
  display: block;

  max-width: 340px;

  margin:
    13px
    auto
    0;

  color: #8a9290;

  font-size: 8px;

  line-height: 1.5;
}


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

@media (max-width: 980px) {

  .mf-customer-chat-shell {
    width:
      min(
        600px,
        100%
      );
  }


  .mf-identity-gate-card {
    width:
      min(
        420px,
        100%
      );
  }

}


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

@media (max-width: 780px) {

  /* ---------------------------------------------------------
     Mobile bottom nav now has 5 items.
  --------------------------------------------------------- */

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


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

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    min-width: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    cursor: pointer;
  }


  .mobile-bottom-nav
  [data-mf-mobile-chat]
  span {
    font-size: 17px;

    line-height: 1;
  }


  /* ---------------------------------------------------------
     Desktop Chat floating button not needed on mobile
  --------------------------------------------------------- */

  .mf-customer-chat-fab {
    display: none;
  }


  /* ---------------------------------------------------------
     WhatsApp remains separate on mobile.
  --------------------------------------------------------- */

  .mf-whatsapp-support-fab {
    right: 12px;

    bottom:
      calc(
        78px +
        env(
          safe-area-inset-bottom
        )
      );

    width: 46px;

    height: 46px;

    min-height: 46px;

    padding: 0;

    display: grid;

    place-items: center;

    border-radius: 15px;
  }


  .mf-whatsapp-icon {
    width: 100%;

    height: 100%;

    border-radius: inherit;

    background: transparent;

    font-size: 9px;
  }


  .mf-whatsapp-copy {
    display: none;
  }


  /* ---------------------------------------------------------
     Chat = full-screen app style
  --------------------------------------------------------- */

  .mf-customer-chat-overlay {
    padding: 0;

    background: #f4f7f6;

    backdrop-filter: none;
  }


  .mf-customer-chat-shell {
    width: 100%;

    height: 100dvh;

    max-height: none;

    border: 0;

    border-radius: 0;

    box-shadow: none;
  }


  .mf-customer-chat-header {
    position: sticky;

    top: 0;

    z-index: 5;

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


  .mf-customer-chat-mark {
    width: 39px;

    height: 39px;

    flex-basis: 39px;

    border-radius: 12px;
  }


  .mf-customer-chat-brand h2 {
    font-size: 15px;
  }


  .mf-customer-chat-brand p {
    font-size: 7px;
  }


  .mf-customer-chat-body {
    min-height: 0;

    padding: 12px;
  }


  .mf-cc-bubble {
    max-width: 90%;

    padding:
      9px
      11px;

    font-size: 10px;
  }


  .mf-cc-product {
    grid-template-columns:
      46px
      minmax(0, 1fr);

    gap: 8px;
  }


  .mf-cc-product img,
  .mf-cc-product-mark {
    width: 46px;

    height: 46px;
  }


  .mf-customer-chat-footer {
    position: sticky;

    bottom: 0;

    padding:
      9px
      9px
      calc(
        9px +
        env(
          safe-area-inset-bottom
        )
      );
  }


  .mf-customer-chat-footer button {
    min-height: 40px;

    font-size: 9px;
  }


  /* ---------------------------------------------------------
     Identity popup mobile
  --------------------------------------------------------- */

  .mf-identity-gate-overlay {
    padding: 12px;
  }


  .mf-identity-gate-card {
    width: 100%;

    max-width: 390px;

    padding:
      27px
      17px
      20px;

    border-radius: 23px;
  }


  .mf-identity-logo {
    width: 52px;

    height: 52px;

    border-radius: 16px;
  }


  .mf-identity-gate-card h2 {
    font-size: 25px;
  }


  .mf-identity-gate-card > p {
    font-size: 10px;
  }


  .mf-identity-google-placeholder,
  .mf-identity-guest-button {
    min-height: 44px;

    font-size: 10px;
  }

}


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

@media (max-width: 430px) {

  .mf-customer-chat-brand p {
    max-width: 190px;
  }


  .mf-cc-active-order {
    align-items: flex-start;

    flex-direction: column;
  }


  .mf-cc-active-order button {
    width: 100%;
  }


  .mf-cc-identity-strip {
    align-items: flex-start;

    flex-direction: column;

    gap: 3px;
  }


  .mf-cc-identity-strip strong {
    max-width: 100%;
  }


  .mf-identity-gate-card {
    padding:
      25px
      15px
      18px;
  }

}


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

@media (max-width: 360px) {

  .mf-customer-chat-brand small {
    font-size: 6px;
  }


  .mf-customer-chat-brand h2 {
    font-size: 14px;
  }


  .mf-customer-chat-brand p {
    max-width: 165px;
  }


  .mf-identity-gate-overlay {
    padding: 8px;
  }


  .mf-identity-gate-card h2 {
    font-size: 23px;
  }

}