/*
 * WhatsApp button component
 */
.cdmwp-btn {
  font-size: 14px;
  letter-spacing: normal;
  line-height: 1;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

.cdmwp-btn--fixed {
  position: fixed;
  z-index: 100;
  padding: 1em;
}

.cdmwp-btn--disabled {
  display: none;
}

.cdmwp-btn--fixed.cdmwp-btn--topLeft {
  top: 0;
  left: 20px;
}

.cdmwp-btn--fixed.cdmwp-btn--topRight {
  top: 0;
  right: 20px;
}

.cdmwp-btn--fixed.cdmwp-btn--bottomLeft {
  bottom: 12px;
  left: 20px;
}

.cdmwp-btn--fixed.cdmwp-btn--bottomRight {
  bottom: 12px;
  right: 20px;
}

/*
 * Component inner
 */
.cdmwp-btn__inner {
  position: relative;
}

/*
 * Button
 */
.cdmwp-btn__button {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cdmwp-btn__button__svg > svg {
  vertical-align: top;
}

.cdmwp-btn__button__label {
  margin-left: 0.55em;
  font-weight: 600;
  white-space: nowrap;
}

.cdmwp-btn--with-label .cdmwp-btn__button {
  padding: 0.5em 1em;
  border-radius: 0.5em;
}

/*
 * Chatbox
 */
.cdmwp-btn__chatbox {
  position: absolute;
  z-index: 1;
  width: 280px;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.1s ease-in-out,
    transform 0.1s ease-in-out;
}

.cdmwp-btn--bottomRight .cdmwp-btn__chatbox {
  transform: translateY(1em);
  right: 0;
  bottom: 100%;
  margin-bottom: 1em;
}

.cdmwp-btn--bottomLeft .cdmwp-btn__chatbox {
  transform: translateY(1em);
  left: 0;
  bottom: 100%;
  margin-bottom: 1em;
}

.cdmwp-btn--topRight .cdmwp-btn__chatbox {
  transform: translateY(-1em);
  right: 0;
  top: 100%;
  margin-top: 1em;
}

.cdmwp-btn--topLeft .cdmwp-btn__chatbox {
  transform: translateY(-1em);
  left: 0;
  top: 100%;
  margin-top: 1em;
}

.cdmwp-btn--chatbox-visible .cdmwp-btn__chatbox {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/*
 * Chatbox header
 */
.cdmwp-btn__chatbox-header {
  position: relative;
  padding: 1.1em 1em;
  background-color: #28292b;
  color: #fff;
}

.cdmwp-btn__chatbox-title {
  font-size: 1.0714em;
}

.cdmwp-btn__chatbox-close-button {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 8px;
  border-radius: 0.5em;
  transition: background-color 0.1s ease-in-out;
}

.cdmwp-btn__chatbox-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.cdmwp-btn__chatbox-close > svg {
  vertical-align: top;
}

/*
* Chatbox content
*/
.cdmwp-btn__chatbox-content {
  padding: 16px 24px;
  background-color: #e5ddd4;
}

.cdmwp-btn__chatbox-message {
  position: relative;
  padding: 8px 12px 12px 12px;
  border-radius: 0 0.6em 0.6em 0.6em;
  /* background-color: #e5e5ea; */
  background-color: #fff;
  color: #28292b;
  line-height: 1.4;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.cdmwp-btn__chatbox-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  border-right: 8px solid #fff;
  border-bottom: 8px solid transparent;
}

.cdmwp-btn__chatbox-footer {
  padding: 10px 16px;
  background-color: #fff;
}

.cdmwp-btn__chatbox-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0.7em 1em;
  border-radius: 0.5em;
  background-color: #2aa81a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color 0.1s ease-in-out;
  cursor: pointer;
}

.cdmwp-btn__chatbox-button:hover {
  background-color: #279e17;
}

.cdmwp-btn__chatbox-button > svg {
  vertical-align: top;
}