/* =========================================================
   MITA CONTACT TOOLBAR
========================================================= */

.mita-contact-toolbar {
  position: fixed;
  top: 50%;
  right: max(16px, env(safe-area-inset-right));
  z-index: 99990;
  font-family: var(--mita-font-main, "Be Vietnam Pro", Arial, sans-serif);
  transform: translateY(-50%);
  pointer-events: none;
}

.mita-contact-toolbar--ready {
  opacity: 0;
  visibility: hidden;
  transform: translate(18px, -50%) scale(.98);
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.mita-contact-toolbar--ready.mita-contact-toolbar--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
}

.mita-contact-toolbar__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: var(--mita-radius-pill, 999px);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

.mita-contact-toolbar__item {
  --mita-contact-color: #111111;
  position: relative;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mita-contact-color);
  color: #ffffff;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  -webkit-tap-highlight-color: transparent;
}

.mita-contact-toolbar__item:hover,
.mita-contact-toolbar__item:focus-visible {
  color: #ffffff;
  transform: translateX(-4px) scale(1.04);
  box-shadow: 0 16px 30px rgba(15, 23, 42, .24);
  filter: saturate(1.08);
}

.mita-contact-toolbar__item:focus-visible {
  outline: 3px solid rgba(244, 196, 0, .38);
  outline-offset: 3px;
}

.mita-contact-toolbar__content {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.mita-contact-toolbar__icon {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.mita-contact-toolbar__icon i {
  font-size: 23px;
  line-height: 1;
}

.mita-contact-toolbar__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  min-width: max-content;
  max-width: 150px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none;
}

.mita-contact-toolbar__item:hover .mita-contact-toolbar__label,
.mita-contact-toolbar__item:focus-visible .mita-contact-toolbar__label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.mita-contact-toolbar__item--messenger {
  --mita-contact-color: #168aff;
  order: 1;
}

.mita-contact-toolbar__item--phone {
  --mita-contact-color: #ef4444;
  order: 2;
}

.mita-contact-toolbar__item--zalo {
  --mita-contact-color: #0068ff;
  order: 3;
}

.mita-contact-toolbar__item--contact {
  --mita-contact-color: #16a34a;
  order: 4;
}

.mita-contact-toolbar__item--custom {
  --mita-contact-color: var(--mita-primary, #f4c400);
  order: 5;
  color: #111111;
}

.mita-contact-toolbar__item--custom:hover,
.mita-contact-toolbar__item--custom:focus-visible {
  color: #111111;
}

.mita-contact-toolbar__zalo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 767px) {
  body.has-mita-contact-toolbar {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  body.has-mita-contact-toolbar #top-link,
  body.has-mita-contact-toolbar .back-to-top {
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  .mita-contact-toolbar {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 14px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    box-sizing: border-box;
    background-color: transparent;
    background-image:
      url("../images/contact-toolbar-mobile-bg.svg"),
      linear-gradient(to bottom, transparent 0, transparent 60px, #ffffff 60px, #ffffff 100%);
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 90px, 100% 100%;
    transform: none;
    pointer-events: auto;
  }

  .mita-contact-toolbar--ready {
    transform: translateY(calc(100% + 18px));
  }

  .mita-contact-toolbar--ready.mita-contact-toolbar--visible {
    transform: translateY(0);
  }

  .mita-contact-toolbar__list {
    position: relative;
    z-index: 1;
    max-width: 560px;
    min-height: 60px;
    margin: 0 auto;
    padding: 5px 6px 7px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }

  .mita-contact-toolbar__item {
    position: relative;
    z-index: 2;
    width: 20%;
    min-width: 0;
    height: 52px;
    flex: 0 1 20%;
    align-items: center;
    justify-content: center;
    padding: 3px 2px 0;
    border-radius: 10px;
    background: transparent;
    color: #263445;
    box-shadow: none;
    transform: none;
  }

  .mita-contact-toolbar__content {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
  }

  .mita-contact-toolbar__item--custom {
    --mita-contact-color: #2d9cff;
    color: #333333;
    order: 1;
  }

  .mita-contact-toolbar__item--contact {
    --mita-contact-color: #2096e8;
    order: 2;
  }

  .mita-contact-toolbar__item--phone {
    order: 3;
    z-index: 3;
    height: 52px;
    align-items: flex-end;
    padding-top: 0;
    transform: none;
  }

  .mita-contact-toolbar__item--zalo {
    order: 4;
  }

  .mita-contact-toolbar__item--messenger {
    order: 5;
  }

  .mita-contact-toolbar__item:hover,
  .mita-contact-toolbar__item:focus-visible {
    color: #263445;
    transform: translateY(-2px);
    box-shadow: none;
    filter: none;
  }

  .mita-contact-toolbar__item--phone:hover,
  .mita-contact-toolbar__item--phone:focus-visible {
    transform: none;
  }

  .mita-contact-toolbar__icon {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--mita-contact-color);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .15);
  }

  .mita-contact-toolbar__item--custom .mita-contact-toolbar__icon {
    color: #ffffff;
  }

  .mita-contact-toolbar__item--phone .mita-contact-toolbar__icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border: 3px solid #ffffff;
    background: linear-gradient(135deg, #ffb000 0%, #ff7a00 52%, #ff4d1d 100%);
    box-shadow: 0 14px 30px rgba(255, 122, 0, .35);
    animation: mita-contact-phone-pulse 1.45s ease-out infinite;
    top: -20px;
  }

  .mita-contact-toolbar__item--phone .mita-contact-toolbar__content {
    height: 66px;
    gap: 0;
  }

  .mita-contact-toolbar__icon i {
    position: relative;
    z-index: 1;
    font-size: 18px;
  }

  .mita-contact-toolbar__item--phone .mita-contact-toolbar__icon i {
    font-size: 25px;
  }

  .mita-contact-toolbar__label {
    position: static;
    width: 100%;
    max-width: 74px;
    min-width: 0;
    padding: 0 2px;
    background: transparent;
    color: #263445;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mita-contact-toolbar__item--phone .mita-contact-toolbar__label {
    max-width: 78px;
    margin-top: -10px;
    padding: 5px 10px 5px;
    border-radius: var(--mita-radius-pill, 999px);
    background: linear-gradient(92.83deg, #0e68c8 0%, #02a4a5 100%);
    color: #ffffff;
    font-size: 10px;
    box-shadow: 0 8px 16px rgba(14, 104, 200, .24);
  }

  .mita-contact-toolbar__zalo-mark {
    width: auto;
    height: auto;
    border: 0;
    font-size: 9.5px;
  }

  @keyframes mita-contact-phone-pulse {
    0% {
      box-shadow: 0 14px 30px rgba(255, 122, 0, .35), 0 0 0 0 rgba(255, 144, 1, .42);
    }

    70% {
      box-shadow: 0 14px 30px rgba(255, 122, 0, .35), 0 0 0 11px rgba(255, 144, 1, 0);
    }

    100% {
      box-shadow: 0 14px 30px rgba(255, 122, 0, .35), 0 0 0 0 rgba(255, 144, 1, 0);
    }
  }
}

@media (max-width: 360px) {
  .mita-contact-toolbar {
    padding-right: 4px;
    padding-left: 4px;
  }

  .mita-contact-toolbar__list {
    padding-right: 3px;
    padding-left: 3px;
  }

  .mita-contact-toolbar__label {
    font-size: 10px;
  }

  .mita-contact-toolbar__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .mita-contact-toolbar__item--phone .mita-contact-toolbar__icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;

  }
}

@media (prefers-reduced-motion: reduce) {
  .mita-contact-toolbar,
  .mita-contact-toolbar__item,
  .mita-contact-toolbar__label,
  .mita-contact-toolbar__item--phone .mita-contact-toolbar__icon {
    animation: none;
    transition: none;
  }
}