.pixel-ospfw-popup {
  position: fixed;
  background: #ffffff;
  padding: 0;
  border: 1px solid #dddddd;
  box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.1);
  max-width: 350px;
  min-height: 94.79px;
  min-width: 300px;

/* Default opacity for fade-in animations. */
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index: 99999;

/* Switch to flex */
  display: flex;
  /* Align items to center */
  align-items: center;

/* Position Classes. */

  &.pixel-ospfw-position-bottom-left {
    bottom: 20px;
    left: 20px;
  }

  /* <fs_premium_only> */
  &.pixel-ospfw-position-bottom-right {
    bottom: 20px;
    right: 20px;
  }


  &.pixel-ospfw-position-top-left {
    top: 20px;
    left: 20px;
  }

  &.pixel-ospfw-position-top-right {
    top: 20px;
    right: 20px;
  }
  /* </fs_premium_only> */

  &.pixel-ospfw-popup-show {
    opacity: 1;
  }

 /* For slide animations, reduce the opacity change so more of the slide is visible. */
  &.pixel-ospfw-animation-slide-vertical,
  &.pixel-ospfw-animation-slide-horizontal {
    /* Starting opacity is increased to 0.2 instead of 0. */
    opacity: 0.2;
    /* Separately animate transform and opacity. */
    transition: transform 1s ease-in-out, opacity 0.3s ease-in-out;

    /* Ensure that on show it goes to full opacity. */
    &.pixel-ospfw-popup-show {
      opacity: 1;
    }
  }
/* <fs_premium_only> */
  /* Slide Vertical Animation. */
  &.pixel-ospfw-animation-slide-vertical {
    &.pixel-ospfw-position-top-left,
    &.pixel-ospfw-position-top-right {
      transform: translateY(-1000px);
    }

    &.pixel-ospfw-position-bottom-left,
    &.pixel-ospfw-position-bottom-right {
      transform: translateY(1000px);
    }

    &.pixel-ospfw-popup-show {
      transform: translateY(0);
    }
  }
/* </fs_premium_only> */

  /* Slide Horizontal Animation. */
  &.pixel-ospfw-animation-slide-horizontal {
    &.pixel-ospfw-position-top-left,
    &.pixel-ospfw-position-bottom-left {
      transform: translateX(-1000px);
    }

    &.pixel-ospfw-position-top-right,
    &.pixel-ospfw-position-bottom-right {
      transform: translateX(1000px);
    }

    &.pixel-ospfw-popup-show {
      transform: translateX(0);
    }
  }

  /* Popup style variations */
  &.pixel-ospfw-style-square {
    border-radius: 0;
    .pixel-ospfw-popup-img {
      border-radius: 0;
      margin-left: 8px;
    }

    .pixel-ospfw-popup-close {
      top: 3px;
      right: 3px;
    }
  }

  &.pixel-ospfw-style-rounded {
    border-radius: 5px;
    .pixel-ospfw-popup-img {
      border-radius: 5px;
      margin-left: 8px;
    }

    .pixel-ospfw-popup-close {
      top: 3px;
      right: 3px;
    }
  }

  &.pixel-ospfw-style-bubble {
    border-radius: 50px;
    .pixel-ospfw-popup-img {
      border-radius: 50%;
      margin-left: 5px;
      margin-top: 0;
      max-width: inherit;
      flex-shrink: 0;
    }

    .pixel-ospfw-popup-close {
      top: -0px;
      right: -3px;
    }
  }

  /* If we have a link wrapping the main content: */
  .pixel-ospfw-popup-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

}

/* Styles image - border-radius: 100%; for rounded */
.pixel-ospfw-popup-img {
  border: 1px solid #FFF;
  height: 80px;
  width: 80px;
  margin: 0;
  max-width: inherit;
  flex-shrink: 0;
}

/* Adjust the text so it doesn't wrap and only grows to its content. */
.pixel-ospfw-popup-text {
  flex-grow: 1;
  margin: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pixel-ospfw-popup-title {
  color: #41495b;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  max-width: 250px;
  overflow: hidden;
  padding-right: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixel-ospfw-popup-body {
  color: #8993aa;
  font-family: Lato, sans-serif;
  font-size: 12px;
  margin: 0;
  max-width: 250px;
  overflow: hidden;
  padding-right: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

/* Close Button Styles with strict overrides */
.pixel-ospfw-popup .pixel-ospfw-popup-close {
  /* --- Positioning & Box Model --- */
  position: absolute !important;
  /* top/right are set dynamically by user or in specific style overrides */
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  max-width: none !important;
  min-height: auto !important; /* Reset theme min-height */

  /* --- Display & Alignment --- */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: baseline !important; /* Reset theme vertical-align */

  /* --- Appearance --- */
  background: transparent !important;
  color: #888 !important; /* Ensure SVG inherits or text fallback has color */
  font-size: initial !important; /* Reset theme font-size */
  font-weight: normal !important; /* Reset theme font-weight */
  line-height: normal !important; /* Reset theme line-height */
  text-align: initial !important; /* Reset theme text-align */
  text-decoration: none !important;
  text-transform: none !important; /* Reset theme text-transform */
  text-shadow: none !important;
  letter-spacing: normal !important; /* Reset theme letter-spacing */
  text-rendering: auto !important; /* Reset theme text-rendering */
  box-shadow: none !important;
  cursor: pointer !important;
  opacity: 0;
  transition: opacity 0.2s ease-in-out !important; /* Override theme transitions */
  outline: none !important;

  &:hover,
  &:focus,
  &:active {
    background: transparent !important;
    color: #888 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    /* Ensure no unwanted transitions apply on hover/focus */
    transition: opacity 0.2s ease-in-out !important;
  }
}

/* Show close button when hovering over the popup */
.pixel-ospfw-popup:hover .pixel-ospfw-popup-close {
  opacity: 1;
}

/* Style the timestamp text. */
.pixel-ospfw-popup-timestamp {
  color: #b0bbd7;
  font-family: Lato, sans-serif;
  font-size: 10px;
  margin-top: 2px;
}

/* Responsive adjustments to prevent popups from being smushed on small screens. */
@media (max-width: 450px) {
  .pixel-ospfw-popup {
    /* Reset max-width so that the popup uses full viewport width minus margins. */
    max-width: calc(100% - 40px);
    /* Center the popup by adjusting left/right */
    left: 25px;
    right: 25px;
    padding: 0;
  }

  /* Allow text to break lines and wrap properly. */
  .pixel-ospfw-popup-text {
    white-space: normal;
    overflow-wrap: break-word; /* break long words if needed */
  }

  /* Override the title's no-wrap behavior on small screens. */
  .pixel-ospfw-popup-title {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Optionally adjust the positioning classes if needed. */
  .pixel-ospfw-position-bottom-left {
    right: 20px;
  }
  /* <fs_premium_only> */
  .pixel-ospfw-position-bottom-right {
    left: 20px;
  }
  .pixel-ospfw-position-top-left {
    right: 20px;
  }
  .pixel-ospfw-position-top-right {
    left: 20px;
  }
  /* </fs_premium_only> */
}