.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: 1000;
  background-color: #0000006e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup {
  background-color: #fff;
  position: relative;
  width: 750px;
  padding: 1em;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  /* text-align: center; */
  /* font-family: var(--neue-reg-font); */
  /* text-transform: uppercase; */
  /* letter-spacing: 5px; */
  /* font-size: large; */
  font-size: var(--font-size-lg);

  margin: 10px 0;
}

.close_icon_popup {
  color: #000;
  font-size: 1.2rem;
  cursor: pointer;
}

.body {
  max-height: 75vh;
  overflow-y: scroll;
}
/** MOBILE BREAKPOINT */

.share_copy {
  margin-bottom: 1em;
}

.join_affiliate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 1em;
  background-color: var(--au_color);
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 2px 1px rgb(0 0 0 / 25%);
}
.join_affiliate .arrow_icon {
  color: #101820;
  font-size: 1.5rem;
  display: flex;
}
.join_affiliate:hover {
  background-color: #e0e0e0;
}
.or_share_link,
.share_on_social_media {
  color: #876094;
  margin: 1em 0;
  text-align: center;
}
.wishlist_message {
  text-align: center;
  margin-bottom: 1em;
  font-size: var(--font-size-md);
}

.join_button {
  background-color: #876094;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.join_button:hover {
  background-color: #6a4a7b;
}

.share_buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.copy_button {
  background-color: #101820;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  margin-bottom: 1em;
  transition: background-color 0.3s ease;
}
.copy_button span {
  margin-left: 0.5em;
}
.copy_button:hover {
  background-color: #333;
}

.copy_button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.copy_button:disabled:hover {
  background-color: #ccc;
}

.social_buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.social_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0.5em;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  transition: background-color 0.3s ease;
}

.whatsapp_button {
  background-color: #25d366;
}

.twitter_button {
  background-color: #1da1f2;
}

.facebook_button {
  background-color: #3b5998;
}

.telegram_button {
  background-color: #0088cc;
}

.line_button {
  background-color: #00c300;
}

.social_button:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 1023px) {
  .popup {
    width: 650px;
  }
}
@media only screen and (max-width: 650px) {
  .popup {
    width: 90%;
    flex-direction: column-reverse;
  }

  .title {
    font-size: var(--font-size-md);
  }

  .wishlist_message, .share_on_social_media {
    font-size: var(--font-size-sm);
    color: #000;
  }

  .copy_button {
    font-size: var(--font-size-sm);
    padding: 0.5em 1em;
    margin-bottom: 0px;
  }

  .close_icon_popup {
    color: #000;
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin-right: 10px;
  }


}