.quintain-promo-code-title-wrapper {
  --promo-code-link-color: #000000;
  --promo-code-tooltip-color: #345262;
  --promo-code-tooltip-text-color: #ffffff;

  position: relative;
  display: inline-flex;
  align-items: center;

  .quintain-promo-code-label {
    font-family: ITC Avant Garde Gothic W05 Bol, helvetica, arial, sans-serif !important;
  }

  .quintain-promo-code-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    font-size: 9px !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;

    &::before {
      content: '';
      position: absolute;
      top: calc(100% - 6px);
      left: calc(100% - 18px);
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: var(--promo-code-tooltip-color);
      opacity: 0;
      visibility: hidden;
      z-index: 21;
    }

    .quintain-promo-code-tooltip__icon {
      pointer-events: none;
    }

    .promo_code_link,
    .promo_code_link a,
    .promo_code_link a:visited,
    .promo_code_link a:hover,
    .promo_code_link a:focus {
      color: var(--promo-code-link-color) !important;
      text-decoration: underline;
    }

    /* Positioned flush against the icon (no gap) with padding as an invisible
       hover bridge, so moving the pointer down into the bubble keeps it open. */
    .quintain-promo-code-tooltip__text {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      padding-top: 0;
      width: 500px;
      max-width: 90vw;
      opacity: 0;
      visibility: hidden;
      transition: opacity .15s ease;
      z-index: 20;
      border-radius: 4px;

      a,
      a:visited,
      a:hover,
      a:focus {
        color: var(--promo-code-tooltip-text-color);
        text-decoration: underline;

        &.promo_code_link {
          color: var(--promo-code-link-color) !important;
        }
      }
    }

    .quintain-promo-code-tooltip__bubble {
      font-size: 16px;
      position: relative;
      display: block;
      padding: 12px 16px;
      background: var(--promo-code-tooltip-color);
      color: var(--promo-code-tooltip-text-color);
      font-weight: normal;
      line-height: 1.5;
      text-align: left;
      border-radius: 6px;
      font-family: ITC Avant Garde Gothic W05 Boo, helvetica, arial, sans-serif;

      p {
        margin: 0 0 0 0;
      }

    }

    &:hover,
    &:focus,
    &:focus-within {
      &::before {
        opacity: 1;
        visibility: visible;
      }

      .quintain-promo-code-tooltip__text {
        opacity: 1;
        visibility: visible;
      }
    }

    .quintain-promo-code-tooltip__text:hover {
      opacity: 1;
      visibility: visible;
    }
  }
}

.promo_code_link,
.promo_code_link a,
.promo_code_link a:visited,
.promo_code_link a:hover,
.promo_code_link a:focus {
  color: #000000 !important;
  text-decoration: underline;
}