/* Ordergroove PDP styling */

/* One-time option */
og-offer[location^="pdp"] og-when .og-regular-offer-content > div:first-child {
  display: flex;
  align-items: center;
  justify-content: between;
  padding: 1rem;
  border: 1px solid var(--body-text-color);
  border-radius: 1rem;
}

/* Subscription Option */
og-offer[location^="pdp"] og-when .og-regular-offer-content > div:last-child {
  padding: 1rem;
  margin-top: 1.5rem;
  border: 1px solid var(--body-text-color);
  border-bottom: 0px;
  border-radius: 1rem;
  border-end-end-radius: 0px;
  border-end-start-radius: 0px;
  position: relative;
  background-color: #F1FBFC;

  &::before {
    content: var(--og-choice-text, 'Popular Choice');
    color: var(--body-text-color);
    font-family: var(--font-heading-family);
    position: absolute;
    top: -1rem;
    left: 1rem;
    background-color: #FFC658;
    border-radius: 9999px;
    padding: .25rem .75rem;
    font-weight: var(--font-heading-bold-weight);
  }

  og-optin-button {
    margin-top: 0;
    color: var(--body-text-color);
    --og-checkbox-border-color: var(--body-text-color);
  }

  og-optout-button, og-optin-button {
    font-weight: var(--font-body-bold-weight);
  }

  /* float the price elements to the right */
  og-price {
    float: right;

    &[subscription] {
      margin-right: .5rem;
      color: var(--body-text-color);
    }

    &[regular] {
      font-weight: normal;
      color: #686868;
      font-style: normal;
      font-size: 14px !important;
    }
  }

  /* hide the tooltip */
  og-tooltip {
    display: none;
  }
}

og-price {
  font-weight: var(--font-heading-bold-weight);
  font-family: var(--font-heading-family);
  color: var(--body-text-color);
  opacity: 1 !important;
  font-size: 18px !important;
}

/* subscription info and frequency selector */
og-offer[location^="pdp"] og-when .og-regular-offer-content + div {
  padding: 1rem;
  padding-top: 0;
  margin-left: 0 !important;
  border: 1px solid var(--body-text-color);
  border-top: 0;
  border-radius: 1rem;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-top: -1px;
  background-color: #F1FBFC;
  margin-bottom: 0px !important;

  .og-benefits li {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    font-size: 14px;
    color: var(--body-text-color);
    &:first-child {
      margin-top: 0;
    }
  }

  .og-benefits li:before {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iI2ZlYzU1OCIgZD0iTTE4LjAzMSA0LjI4MSAxNS44ODcgMi41OWEuMzguMzggMCAwIDAtLjI0Mi0uMDk0Yy0uMDk0IDAtLjE4LjA0LS4yNDcuMDk4bC03LjggMTAuMDIzUzQuNTMgOS42NjggNC40NDUgOS41ODJzLS4xOTktLjIzLS4zNy0uMjNjLS4xNzMgMC0uMjUuMTItLjM0LjIxbC0xLjcgMS43OWMtLjAzMS4wMzUtLjA1LjA1NC0uMDc4LjA4MmEuNC40IDAgMCAwLS4wNzguMjIyYzAgLjA4Ni4wMzEuMTU2LjA3OC4yMjNsLjExLjEwMXM1LjQ0IDUuMjI3IDUuNTMgNS4zMTcuMi4yMDMuMzYuMjAzYy4xNTYgMCAuMjg1LS4xNjguMzYtLjI0Mmw5LjczLTEyLjVhLjQuNCAwIDAgMCAuMDc4LS4yMjdjMC0uMDk3LS4wNC0uMTgtLjA5NC0uMjUiLz48L3N2Zz4=');
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }

  [key="offerEveryLabel"] {
    display: none;
  }

  og-select-frequency {
    display: block;
    margin-top: 1rem;
    border-radius: 9999px;
    box-shadow: 0 0 #0000;
    color: var(--body-text-color);
  }
}