/* Pricing Table Shortcode Styling */
.bdt-pricing-table-shortcode {
  --primary-border-color: rgba(188, 188, 189, 0.188);
  --primary-color: #5385ff;
  --primary-border-radius: 10px;

  --product-title-color: #282930;
  --product-tab-active-bg: #f8f8f8;

  --tab-price-duration-wrap-bg: #fff;
  --tab-price-duration-text-color: #59595d;
  --tab-price-duration-active-bg: #5385ff;
  --tab-price-duration-active-text-color: #fff;
  --tab-price-duration-radius: 6px;

  --price-item-bg: #fff;
  --price-item-filter: 0px;
  --price-item-logo-opacity: 0.3;
  --price-item-title-color: #3f4a58;
  --price-item-original-color: #a7a7a7;
  --price-item-sale-color: #2a2b31;
  --price-item-duration-color: #595e66;

  --price-item-feature-list-text-color: #758391;
  --price-item-tooltip-text-color: #c5c5c5;
  --price-item-tooltip-bg-color: black;

  --price-item-check-icon-bg-color: #e5ecfd;
  --price-item-check-icon-color: #5385ff;

  --price-item-badge-bg: #5385ff;
  --price-item-badge-radius: 6px;
  --price-item-badge-color: #fff;

  --price-item-btn-text-color: #fff;
  --price-item-btn-bg: #5385ff;
  --price-item-btn-radius: 6px;
  --price-item-btn-text-color-hover: #fff;
  --price-item-btn-bg-hover: #3166eb;
  --price-item-btn-shadow-hover: rgba(96, 141, 255, 0.3);
  --price-item-footer-text-color: #5e5e6f;

  overflow: hidden;

  /* Pricing Tabs */
  .pricing-tabs {
    --price-tab-mask-offset: 70px;
    .tab-list {
      display: flex;
      list-style: none;
      padding: 0 0 7px;
      margin: 0 auto;
      width: 316px;
      overflow-x: scroll;
      mask-image: linear-gradient(
        to right,
        transparent,
        black var(--price-tab-mask-offset),
        black calc(100% - var(--price-tab-mask-offset)),
        transparent
      );
    }

    .tab {
      padding: clamp(5px, 2.5vw, 20px);
      cursor: pointer;
      background: transparent;
      border: 1px solid var(--primary-border-color);
      width: 100%;
      box-sizing: border-box;
      border-right: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      text-align: center;
      min-height: clamp(100px, 10vw, 130px);
      min-width: 110px;
      &:first-child {
        border-top-left-radius: var(--primary-border-radius);
        border-bottom-left-radius: var(--primary-border-radius);
      }

      &:nth-last-child(1) {
        border-right: 1px solid var(--primary-border-color);
        border-top-right-radius: var(--primary-border-radius);
        border-bottom-right-radius: var(--primary-border-radius);
      }

      &.active {
        background: var(--product-tab-active-bg);
        .bdt-pd-title {
          opacity: 1;
          transform: translateY(0);
          visibility: visible;
        }
        .bdt-pd-icon {
          transform: translateY(0);
        }
      }
      .bdt-pd-icon {
        transform: translateY(15px);
        transition: all 0.3s;
        svg {
          width: clamp(36px, 6vw, 50px);
          height: auto;
          display: block;
          border-radius: 6px;
          &.combo {
            width: 65px;
          }
        }
      }
      /* Pricing Title */
      .bdt-pd-title {
        pointer-events: none;
        font-size: clamp(12px, 1vw, 14px);
        font-weight: 600;
        text-transform: capitalize;
        color: var(--product-title-color);
        transform: translateY(-10px);
        transition: all 0.3s;
        opacity: 0;
        visibility: hidden;
        white-space: nowrap;
      }
    }
  }

  /* Tab Duration */
  .tab-list-duration {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 10px;
    margin: 0 auto;
    margin-top: clamp(25px, 4vw, 40px);
    background: var(--tab-price-duration-wrap-bg);
    width: fit-content;
    border: 1px solid var(--primary-border-color);
    border-radius: var(--primary-border-radius);
    .tab-duration {
      font-size: 14px;
      padding: clamp(8px, 1vw, 10px) clamp(14px, 2vw, 20px);
      cursor: pointer;
      border-radius: var(--tab-price-duration-radius);
      font-weight: 600;
      color: var(--tab-price-duration-text-color);
      &.active {
        background: var(--tab-price-duration-active-bg);
        color: var(--tab-price-duration-active-text-color);
      }
    }
  }

  /* Pricing Table Wrap */
  .bdt-pricing-table-wrap {
    /* Price Grid */
    .bdt-price-table-grid {
      display: grid;
      gap: clamp(15px, 4vw, 30px);
      grid-template-columns: repeat(1, 1fr);
      margin-top: clamp(25px, 4vw, 40px);
    }

    .bdt-price-item {
      width: 100%;
      background: var(--price-item-bg);
      backdrop-filter: blur(var(--price-item-filter));
      padding: clamp(30px, 5vw, 40px);
      box-sizing: border-box;
      border-radius: var(--primary-border-radius);
      border: 1px solid var(--primary-border-color);
      position: relative;
      display: none;

      &.active {
        display: block;
      }

      svg {
        position: absolute;
        opacity: var(--price-item-logo-opacity);
        width: 90px;
        right: 34px;
        top: clamp(106px, 16vw, 140px);
      }
    }

    .bdt-price-title {
      margin: 0 0 20px;
      font-size: clamp(20px, 3vw, 32px);
      color: var(--price-item-title-color);
    }

    .bdt-price-header {
      position: relative;
      padding-bottom: clamp(20px, 3vw, 30px);
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 60%;
        height: 1px;
        background: var(--primary-border-color);
        left: 0;
      }
    }

    .bdt-price-price {
      display: inline-flex;
      flex-direction: column;
      gap: 6px;

      .bdt-price-original {
        font-size: 16px;
        text-decoration: line-through;
        color: var(--price-item-original-color);
        font-weight: 600;
      }

      .bdt-price-sale {
        font-size: clamp(30px, 4vw, 34px);
        font-weight: 800;
        color: var(--price-item-sale-color);
        line-height: 1;
      }

      .bdt-price-duration {
        color: var(--price-item-duration-color);
        font-size: 14px;
      }
    }

    .bdt-pricing-list-wrap {
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 2vw, 14px);
      list-style: none;
      padding: 0;
      margin: clamp(20px, 3vw, 30px) 0;

      li {
        font-size: clamp(14px, 1.5vw, 15px);
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
      }

      .bdt-pricing-list-item-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        position: relative;
        background: var(--price-item-check-icon-bg-color);
        &::before {
          content: "";
          position: absolute;
          width: 6px;
          height: 9px;
          border: solid var(--price-item-check-icon-color);
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
          top: 6px;
          left: 9px;
        }
      }

      .bdt-pricing-list-item-tooltip {
        position: relative;
        color: var(--price-item-feature-list-text-color);
        &:hover .bdt-tooltiptext {
          visibility: visible;
        }
      }

      .bdt-tooltiptext {
        visibility: hidden;
        bottom: 150%;
        left: -13%;
        background-color: var(--price-item-tooltip-bg-color);
        color: var(--price-item-tooltip-text-color);
        border-radius: 6px;
        padding: 8px 12px;
        position: absolute;
        display: block;
        z-index: 1;
        font-size: 12px;
        min-width: 260px;
        box-sizing: border-box;
        &::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 14%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: var(--price-item-tooltip-bg-color) transparent
            transparent transparent;
        }
      }
    }

    .bdt-price-footer {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 15px;

      .bdt-price-btn {
        display: block;
        background: var(--price-item-btn-bg);
        padding: clamp(14px, 1.5vw, 16px);
        text-decoration: none;
        border-radius: var(--price-item-btn-radius);
        font-size: clamp(12px, 1.5vw, 14px);
        text-transform: uppercase;
        font-weight: 700;
        color: var(--price-item-btn-text-color);
        transition: 0.3s;

        &:focus,
        &:hover {
          color: var(--price-item-btn-text-color-hover);
          background-color: var(--price-item-btn-bg-hover);
          box-shadow: 0 0 0 4px var(--price-item-btn-shadow-hover);
        }
      }

      .bdt-footer-text {
        font-size: 12px;
        color: var(--price-item-footer-text-color);
      }
    }

    .bdt-price-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      background: var(--price-item-badge-bg);
      padding: 8px 10px;
      font-size: 12px;
      text-transform: capitalize;
      font-weight: 700;
      color: var(--price-item-badge-color);
      border-radius: var(--price-item-badge-radius);
    }
  }

  /* Default styles */
  .bdt-pricing-list-wrap {
    max-height: 110px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: relative;
    &::before {
      background: linear-gradient(180deg, #fff0, #fff);
      bottom: 0;
      content: "";
      height: 100px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 1;
    }
    .bdt-tooltiptext {
      opacity: 0;
    }
    &.active {
      max-height: 1000px; /* Adjust this value based on your content */
      overflow: unset;
      &::before {
        display: none;
      }
      .bdt-tooltiptext {
        opacity: 1;
      }
    }
  }
  .toggle-button {
    margin: 20px auto;
    margin-top: -16px;
    cursor: pointer;
    display: block;
    background: transparent;
    border: 0;
    color: #727786;
    font-weight: 600;
    text-transform: capitalize;
    transition: color 0.3s;
    &:hover {
      color: #1a1b1f;
    }
    span {
      font-size: 14px;
    }
  }
}

@media (min-width: 768px) {
  .bdt-pricing-table-shortcode {
    .bdt-pricing-table-wrap {
      .bdt-price-table-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .pricing-tabs {
      .tab-list {
        width: 700px;
      }
    }
    .bdt-pricing-list-wrap {
      max-height: 230px;
    }

    [data-product="spin-wheel"] {
      .bdt-pricing-list-wrap {
        max-height: unset;
        &::before {
          display: none;
        }
      }
      .toggle-button {
        display: none;
      }
    }
  }
}

@media (min-width: 1024px) {
  .bdt-pricing-table-shortcode {
    .bdt-pricing-table-wrap {
      .bdt-price-table-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .pricing-tabs {
      .tab-list {
        width: auto;
        overflow-x: unset;
        mask-image: none;
        tab {
          min-width: auto;
        }
      }
    }
  }
}