@import url('../../../commons/blocks/ew-ccp/ew-faq/ew-faq.css');

/* Arena-specific styles */
.ew-faq {
  &::before {
    display: none;
  }

  .ew-faq__container {
    background-color: var(--tertiary-white);
    padding: 40px 20px;
    min-height: auto;
    @media (width>=1024px) {
      padding: 56px 42px 56px 70px;
    }
    .ew-faq__content-wrapper .ew-faq__title {
      :is(h1, h2, h3, h4, h5, h6) {
        color: var(--secondary-black);
        font-weight: var(--fw-700);
        font-size: var(--body-font-size-l);
        line-height: var(--heading-lh-19-mob-text-small);
        margin-bottom: var(--space-24px);

        @media (width>=1024px) {
          font-size: var(--heading-font-1-des);
          line-height: var(--heading-lh-1--mob-display);
          letter-spacing: normal;
          margin-bottom: 3.75rem;
        }
      }
    }

    &:has(.ew-faq__side-image) {
      @media (width >= 1024px) {
        flex-direction: row-reverse;
        align-items: end;
        gap: 2.5rem;
      }
    }

    .ew-faq__background-image {
      &.ew-faq__side-image {
        background: var(--gradients-accent-section-bg-1);
        @media (width >= 1024px) {
          position: static;
          min-height: auto;
          z-index: auto;
          align-self: end;
        }
        img.ew-faq__bg-img {
          @media (width >= 1024px) {
            width: 100%;
            height: auto;
            object-fit: contain;
          }
          @media (width >= 1200px) {
            width: 721px;
            height: 360px;
          }
        }

        &::after {
          @media (width >= 1024px) {
            display: none;
          }
        }
      }
    }

    .ew-faq__content-wrapper {
      .ew-faq__desktop-layout {
        min-height: auto;
      }
      .ew-faq__mobile-layout {
        min-height: auto;
      }
      .ew-faq__container:has(.ew-faq__side-image) & {
        @media (width >= 1024px) {
          flex: 1;
          max-width: 50%;
        }
      }

      .ew-faq__mobile-layout.ew-faq__mobile-accordion {
        display: block;

        @media (width >= 1024px) {
          display: none;
        }
      }
      .ew-faq__mobile-layout {
        .ew-faq__mobile-image {
          background: var(--gradients-accent-section-bg-1);
          height: 17.5rem;
          img.ew-faq__mobile-img {
            margin-bottom: var(--space-28px);
            height: 100%;
          }
        }
      }
      .ew-faq__mobile-layout.ew-faq__mobile-accordion .ew-faq__mobile-items ul.ew-faq__items-container .ew-faq__item,
      .ew-faq__desktop-layout .ew-faq__items-container .ew-faq__items ul.ew-faq__items-container .ew-faq__item {
        display: flex;
        flex-direction: column;
        padding: var(--space-12px) 0;
        background: var(--gradient-8);
        border-bottom: none;
        position: relative;

        @media (width >= 1024px) {
          padding: 16px 0;
          padding-bottom: 20px;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, rgba(178, 178, 178, 0) 0%, #b2b2b2 50.5%, rgba(178, 178, 178, 0) 100%);
        }

        .ew-faq__item-title {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          background: unset;
          border: unset;
          width: 100%;
          padding: 0;
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-500);
          line-height: var(--heading-lh-6-des);

          p {
            font-size: var(--body-font-size-xxs);
            font-weight: var(--fw-600);
            line-height: var(--heading-lh-6-des);
            margin: 0;
            color: var(--raisin-black);

            @media (width>=1024px) {
              font-size: var(--heading-font-1-mob);
              line-height: var(--heading-lh-5--mob);
            }
          }

          > :is(h1, h2, h3, h4, h5, h6) {
            margin: 0;
            color: var(--primary-main);
            font-size: var(--body-font-size-xxs);
            line-height: var(--heading-lh-19-mob-text-small);
            font-weight: var(--fw-600);
            text-align: left;

            @media (width >= 1024px) {
              line-height: var(--heading-lh-4--mob-text-medium);
            }
          }

          .ew-faq__toggle-icon {
            background: url('/icons/add-blue.svg') no-repeat right / cover;
            height: 1.5rem;
            width: 1.5rem;
            flex-shrink: 0;

            @media (width >= 1024px) {
              width: 2rem;
              height: 2rem;
            }
          }
        }

        &[data-expanded='true'] .ew-faq__item-title .ew-faq__toggle-icon {
          background-image: url('/icons/minus-blue.svg');
        }

        .ew-faq__item-description {
          color: var(--primary-main);
          max-height: 0;
          overflow: hidden;
          transition:
            max-height 0.2s ease-out,
            padding 0.2s ease-out;
          font-size: var(--body-font-size-xxxs);
          line-height: var(--heading-lh-4--mob-text-medium);
          font-weight: var(--fw-400);

          p {
            font-size: var(--body-font-size-xxxxs);
            font-weight: var(--fw-300);
            line-height: 0.75rem;
            text-align: justify;
            padding-top: var(--space-4px);
            color: var(--primary-black);
            margin: 0;

            @media (width >= 1024px) {
              font-size: var(--body-font-size-xs);
              font-weight: var(--fw-300);
              line-height: var(--heading-lh-6-des);
              text-align: justify;
              padding-top: var(--space-12px);
            }
          }
        }

        &[data-expanded='true'] .ew-faq__item-description {
          opacity: 1;
          max-height: none;
          height: auto;
        }

        &:first-child {
          @media (width >= 1024px) {
            padding-top: 34px;
          }
        }

        &:last-child {
          @media (width < 1024px) {
            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
}