.coupon-service-option {
  display: flex;
}

@media (max-width: 1024px) {
  .coupon-service-option {
    position: relative;
  }
}

.coupon-service-option__trigger {
  cursor: pointer;
}

@media (max-width: 1024px) {
  .coupon-service-option__trigger {
    position: relative;
  }

  .coupon-service-option__trigger:after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -10px;
    border: 12px solid;
    pointer-events: none;
    border-color: transparent transparent #4c678d transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease-in-out;
  }

  .coupon-service-option__wrapper--open .coupon-service-option__trigger:after {
    opacity: 1;
    visibility: visible;
  }
}

.coupon-service-option__wrapper {
  margin-left: 5px;
}

@media (min-width: 1025px) {
  .coupon-service-option__wrapper {
    position: relative;
  }
}

.coupon-service-option__extra-info {
  position: absolute;
  top: 35px;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #4c678d;
  background-color: #d9e5ee;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out;
}

.coupon-service-option__wrapper--open .coupon-service-option__extra-info {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1025px) {
  .coupon-service-option__extra-info {
    width: 100%;
    min-width: 400px;
  }
}

@media (min-width: 651px) and (max-width: 1024px) {
  .coupon-service-option__extra-info {
    left: 0;
    width: 75vw;
  }
}

@media (max-width: 651px) {
  .coupon-service-option__extra-info {
    left: -50px;
    width: 100vw;
  }
}

@media (min-width: 1025px) {
  .coupon-service-option__extra-info--right {
    right: -14px;
  }

  .coupon-service-option__extra-info--left {
    left: -14px;
  }

  .coupon-service-option__extra-info:after {
    content: '';
    position: absolute;
    top: -25px;
    border: 12px solid;
    pointer-events: none;
    border-color: transparent transparent #4c678d transparent;
  }

  .coupon-service-option__extra-info--right:after {
    right: 9px;
  }

  .coupon-service-option__extra-info--left:after {
    left: 9px;
  }
}

@media (min-width: 1025px) {
  .coupon-service-option__close {
    display: none;
  }
}

@media (max-width: 1024px) {
  .coupon-service-option__close {
    position: absolute;
    top: 5px;
    right: 3px;
    height: 15px;
    width: 15px;
    cursor: pointer;
  }

  .coupon-service-option__close:before,
  .coupon-service-option__close:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 1px;
    width: 15px;
    background-color: var(--pen);
    transform-origin: top;
  }

  .coupon-service-option__close:before {
    transform: rotate(45deg) translateY(-50%);
  }

  .coupon-service-option__close:after {
    transform: rotate(-45deg) translateY(-50%);
  }
}