/*
--------------------
Whatsapp widget rev1
--------------------
*/

.wa-widget {
  position: fixed;
  bottom: 5rem;
  right: 1.2rem;
  z-index: 997;
  width: 100%;
}

.wa-widget .wa-popup {
  display: flex;
  gap: 1rem;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 998;
}
.wa-widget .wa-popup .wa-popup-text {
  background-color: #fff;
  padding: .6rem;
  border-radius: .5rem;
  box-shadow: 0 .15rem 1rem 0 rgb(0 0 0 / 15%);
  font-size: .8rem;
  will-change: visibility, opacity, transform;
  transition:
    visibility .3s ease,
    opacity .3s ease, 
    transform .3s ease;

}
.wa-widget .wa-popup .wa-popup-text .wa-popup-p {
  margin-bottom: 0;
}
.wa-widget .wa-popup .wa-btn {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #2db742;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
}

.wa-widget .wa-popup .wa-btn::before {
  content: '';
  position: absolute;
  background: url('../img/wa.svg') scroll center center;
  background-size: cover;
  width: 2rem;
  height: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wa-widget .wa-popup-window {
  background-color: #fff;
  box-shadow: 0 .15rem 1rem 0 rgb(0 0 0 / 15%);
  border-radius: .5rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

/*
* This fixes a problem with small resolutions
*   where the left side of the window goes outside
*     the boundries.
*/
@media screen and (max-width: 376px) {
  .wa-widget .wa-popup-window {
    left: 2rem;
  }
}

.wa-widget .wa-popup-window .wa-popup-window-header {
  background-color: #2db742;
  padding: 1rem;
  text-align: center;
  color: #fff;
  font-weight: 500;
  border-radius: .5rem .5rem 0 0 ;
}

.wa-widget .wa-popup-window .wa-popup-window-body {
  padding: 1rem;
}

.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-notice {
  font-size: 0.7rem;
  font-weight: 500;
  color: #a5abb7;
}

.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-items-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-item .wa-popup-window-item-hyperlink {
  display: flex;
  background-color: #fafafa;
  padding: .5rem;
  border-radius: 2px 4px 2px 4px;
  /* border: 1px solid #d8d8d8; */
  border-left: 2px solid #2db742;
  align-items: center;
  gap: .75rem;
  transition: background-color .3s ease,
    box-shadow .3s ease;
}
.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-item .wa-popup-window-item-hyperlink:hover {
  background-color: #fff;
  box-shadow: 0 .15rem 1rem 0 rgb( 0 0 0 / 10%);
}
.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-item .wa-popup-window-item-hyperlink .wa-popup-window-text {

}
.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-item .wa-popup-window-item-hyperlink .wa-popup-window-text .wa-popup-window-text-title {
  margin-bottom: 0;
  color: #1c1c1c;
  font-size: 0.9rem;
}
.wa-widget .wa-popup-window .wa-popup-window-body .wa-popup-window-item .wa-popup-window-item-hyperlink .wa-popup-window-text .wa-popup-window-text-p {
  margin-bottom: 0;
  font-size: .7rem;
  color: #989b9f;
}

[data-wa-visible] {
  will-change: visibility, opacity, transform;
  transition:
    visibility .3s ease,
    opacity .3s ease, 
    transform .3s ease;
}

[data-wa-visible="false"] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
}

[data-wa-visible="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(-5rem);
}

.wa-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(2rem);
}