/* @format */

#bl_pricing {
  .hero {
    background-color: #000;
    color: #fff;
  }

  @media (max-width: 1024px) {
    .hero {
      gap: 16px;
      padding-bottom: 42px;
      padding-top: 32px;
      text-align: center;
    }

    .hero-title {
      margin-bottom: 16px;
    }

    .hero-subtitle {
      margin: auto;
      max-width: 320px;
    }
  }

  @media (min-width: 1024px) {
    .hero {
      background-image: url(../../../images/bandlab/sullivan/hero-background.svg);
      background-position: center;
      background-repeat: no-repeat;
      padding-bottom: 48px;
      padding-top: 112px;
    }

    .hero-title {
      letter-spacing: 0.16px;
      margin-bottom: 24px;
    }

    .hero-subtitle {
      letter-spacing: 0.16px;
      max-width: 700px;
    }
  }

  .hero .pricing-table {
    margin-top: 108px;
  }

  .pricing-selection {
    --switch-thumb-background-color: #fff;
    --switch-off-button-background-color: #d330c3;
    --switch-on-button-background-color: #d330c3;
    --switch-button-height: 24px;
    --switch-button-width: 40px;
    --switch-container-gap: 8px;
    --switch-thumb-size: 20px;
    --switch-button-background: var(--switch-off-button-background-color);
    align-items: center;
    display: inline-flex;
    gap: 24px;
    margin-top: 32px;
  }

  .pricing-selection-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pricing-selection-option {
    align-items: center;
    display: flex;
    gap: 8px;
  }

  .pick-your-plan {
    margin-bottom: 32px;
  }

  [id="pricing_monthly"]:not(:checked) ~ .pricing-switch::after {
    --switch-button-background: var(--switch-on-button-background-color);
    --switch-thumb-left: calc(100% - 2px - var(--switch-thumb-size));
  }

  .pricing-radio-button {
    --radio-button-background-color: tranparent;
    --radio-button-border-color: #fff;
    --radio-button-hover-background-color: #f035ddaa;
    --radio-button-hover-border-color: #fff;
    --radio-button-checked-background-color: transparent;
    --radio-button-checked-border-color: #fff;
    --radio-button-checked-indicator-color: #f035dd;
    align-items: center;
    -webkit-appearance: none;
    background: var(--radio-button-background-color);
    border: 2px solid var(--radio-button-border-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 18px;
    justify-content: center;
    margin: 0;
    width: 18px;
  }

  .pricing-radio-button::after {
    background-color: var(--radio-button-indicator-background-color, #0000);
    border-radius: 50%;
    content: "";
    height: 8px;
    transform: var(--radio-button-indicator-transform, scale(0));
    transition: all 0.1s ease-out;
    visibility: var(--radio-button-indicator-visibility, hidden);
    width: 8px;
  }

  .pricing-radio-button:checked {
    --radio-button-indicator-background-color: var(
      --radio-button-checked-indicator-color
    );
    --radio-button-indicator-transform: scale(1);
    --radio-button-indicator-visibility: visible;
    background: var(--radio-button-checked-background-color);
    border-color: var(--radio-button-checked-border-color);
  }

  .pricing-radio-button:not(:checked, :disabled):hover {
    background: var(--radio-button-hover-background-color);
    border-color: var(--radio-button-hover-border-color);
  }

  .pricing-switch {
    align-items: center;
    background-color: var(--switch-button-background);
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--switch-button-height);
    position: relative;
    width: var(--switch-button-width);
  }

  .pricing-switch::after {
    background-color: var(--switch-thumb-background-color);
    border-radius: 9999px;
    content: "";
    display: block;
    height: var(--switch-thumb-size);
    left: var(--switch-thumb-left, 2px);
    position: absolute;
    transition: all 0.1s ease-out;
    width: var(--switch-thumb-size);
  }

  .pricing-radio-label {
    align-items: center;
    display: flex;
    gap: 16px;
  }

  .pricing-comparison {
    margin-bottom: 48px;
    margin-top: 48px;
  }

  .pricing-table {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(auto, 280px));
  }

  .pricing-column {
    padding-bottom: 24px;
    position: relative;
  }

  .pricing-column::before {
    background: var(--pricing-column-background);
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    opacity: var(--pricing-column-background-opacity);
    position: absolute;
    right: 0;
    top: 0;
  }

  .pricing-column * {
    position: relative;
  }

  .pricing-column-primary {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .pricing-column-price {
    margin-bottom: 4px;
  }

  .pricing-column-subtitle {
    margin-bottom: 32px;
    margin-top: 14px;
  }

  @media (max-width: 1280px) {
    .pricing-column-subtitle {
      height: 40px;
    }
  }

  .pricing-column-primary .pricing-table-cell-56 {
    align-items: flex-end;
    flex: 1;
  }

  .pricing-columns-primary {
    background-image: url(../../../images/bandlab/sullivan/hero-pricing-border.svg);
    background-size: 100% 100%;
    display: grid;
    gap: 16px;
    grid-column: 3 / 5;
    grid-template-columns: repeat(2, 1fr);
    margin: -70px -8px -8px;
    padding: 70px 8px 8px;
    position: relative;
  }

  .pricing-columns-primary-annual {
    bottom: calc(100% - 70px);
    display: flex;
    left: 0;
    padding: 16px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
  }

  .pricing-columns-primary-annual div {
    margin: auto;
  }

  .pricing-free {
    --pricing-column-background: linear-gradient(
      180deg,
      #efe0fb 0%,
      rgba(239, 224, 251, 0) 85.94%
    );
    --pricing-column-background-opacity: 1;
  }

  .pricing-card-free {
    --pricing-card-background: linear-gradient(
      180deg,
      #efe0fb 0%,
      rgba(239, 224, 251, 0) 85.94%
    );
  }

  .pricing-free-primary {
    --pricing-column-background: radial-gradient(
        71.01% 28.59% at 87.5% 6.61%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(180deg, #efe0fb 43.7%, #c1a1da 100%);
    box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.25);
    color: #000;
  }

  .pricing-basic {
    --pricing-column-background: linear-gradient(
      180deg,
      #f035dd 58.38%,
      rgba(240, 53, 221, 0.6) 100%
    );
    --pricing-column-background-opacity: 0.3;
  }

  .pricing-card-basic {
    --pricing-card-background: linear-gradient(
      180deg,
      rgba(240, 53, 221, 0.3) 58.38%,
      rgba(240, 53, 221, 0.18) 100%
    );
  }

  .pricing-basic-primary {
    --pricing-column-background: radial-gradient(
        71.01% 28.59% at 87.5% 6.61%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(180deg, #f035dd 58.38%, #c915b7 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
      inset -1px 1px 0px rgba(255, 255, 255, 0.25);
  }

  .pricing-card-premium {
    --pricing-card-background: linear-gradient(
      180deg,
      rgba(92, 111, 255, 0.3) 60.49%,
      rgba(92, 111, 255, 0.18) 100%
    );
  }

  .pricing-premium {
    --pricing-column-background: linear-gradient(
      180deg,
      #5c6fff 60.49%,
      rgba(92, 111, 255, 0.6) 100%
    );
    --pricing-column-background-opacity: 0.3;
  }

  .pricing-premium-primary {
    --pricing-column-background: radial-gradient(
        71.01% 28.59% at 87.5% 6.61%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(180deg, #5c6fff 60.49%, #3f51da 100%);
    box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.25);
  }

  .pricing-table-cell-48 {
    align-items: center;
    display: flex;
    height: 48px;
    margin-left: -16px;
    padding-left: 16px;
  }

  .pricing-table-cell-56 {
    align-items: center;
    display: flex;
    height: 56px;
    margin-top: 34px;
  }

  .pricing-feature > :last-child,
  .pricing-column > :last-child {
    margin-top: 34px;
  }

  .pricing-feature .pricing-column-title span {
    position: relative;
  }

  .pricing-feature .pricing-column-title svg {
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
  }

  .pricing-column .pricing-button-primary {
    margin-left: 28px;
    margin-right: 28px;
  }

  .more-tools {
    display: grid;
    gap: 16px 32px;
    grid-template-columns: 1fr 1fr;
    margin-top: 48px;
  }

  .more-tool {
    background-color: #f7f8ff;
    border-radius: 8px;
    padding: 32px 40px 26px;
  }

  .tool-subtitle {
    margin-bottom: 14px;
    margin-top: 12px;
  }

  .tool-actions {
    display: flex;
    gap: 22px;
    margin-top: 48px;
  }

  .pricing-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }

  .pricing-card {
    background: var(--pricing-card-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }

  .pricing-card-yearly {
    margin-top: -12px;
  }

  .pricing-card-prelist {
    display: inline-flex;
    margin-bottom: -12px;
  }

  .pricing-card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pricing-card-list-item {
    align-items: center;
    display: flex;
    gap: 8px;
  }

  .pricing-column-title {
    padding-bottom: 14px;
    padding-top: 30px;
  }

  .pricing-feature .pricing-table-cell-48 {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }

  .pricing-table:has([feature="1"]:hover) [feature="1"],
  .pricing-table:has([feature="2"]:hover) [feature="2"],
  .pricing-table:has([feature="3"]:hover) [feature="3"],
  .pricing-table:has([feature="4"]:hover) [feature="4"],
  .pricing-table:has([feature="5"]:hover) [feature="5"],
  .pricing-table:has([feature="6"]:hover) [feature="6"],
  .pricing-table:has([feature="7"]:hover) [feature="7"],
  .pricing-table:has([feature="8"]:hover) [feature="8"],
  .pricing-table:has([feature="9"]:hover) [feature="9"],
  .pricing-table:has([feature="10"]:hover) [feature="10"],
  .pricing-table:has([feature="11"]:hover) [feature="11"],
  .pricing-table:has([feature="12"]:hover) [feature="12"],
  .pricing-table:has([feature="13"]:hover) [feature="13"],
  .pricing-table:has([feature="14"]:hover) [feature="14"],
  .pricing-table:has([feature="15"]:hover) [feature="15"] {
    background-color: rgba(92, 111, 255, 0.1);
  }
}