@import url('../../commons/blocks/policy-terms/policy-terms.css');

.section.policy-terms-container.contact-container {
  background-color: var(--secondary-gray-10);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;

  .policy-terms__container {
    padding: 0px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    * {
      margin: 0;
      padding: 0px;
    }

    .header {
      display: flex;
      padding-top: 36px;
      flex-direction: column;
      gap: 30px;
      position: sticky;
      background-color: var(--tertiary-white);
      top: 0px;
      .pre-title {
        color: var(--secondary-black);
        font-family: var(--body-font-arena);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: var(--fw-700);
        line-height: 1.75rem;
        @media (width >=1024px) {
          font-size: 2rem;
          line-height: 2.5rem;
        }
      }

      .tab-list {
        display: flex;
        flex-direction: row;
        gap: 8px;

        .tab-item {
          display: flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          flex: 1;
          cursor: pointer;
          border: none;
          border-bottom: 1px solid var(--tertiary-deep-Grey);
          padding-bottom: 16px;
          margin-bottom: 24px;

          :is(h1, h2, h3, h4, h5, h6, p) {
            color: var(--secondary-black);
            font-size: 1rem;
            font-family: var(--body-font-arena);
            font-weight: var(--fw-400);
            line-height: 1.125rem;
            padding: 0;
            letter-spacing: normal;
            gap: 0;
            border-left: none;
            height: fit-content;
          }
          @media (width >=1024px) {
            :is(h1, h2, h3, h4, h5, h6, p) {
              font-size: 0.875rem;
              line-height: 1.25rem;
            }
          }

          &.active {
            border: none;
            position: relative;
            border-bottom: 1px solid var(--primary-blue-700);

            :is(h1, h2, h3, h4, h5, h6, p) {
              color: var(--primary-blue-700);
              font-size: 16px;
              font-weight: 700;
              gap: unset;
              gap: 0;
              border-left: none;
              &:after {
                content: '';
                height: 2px;
                background-color: var(--primary-blue-700);
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
              }
            }
            .vector-icon {
              display: none;
            }
          }
        }
      }
    }

    .body {
      flex: 1;
    }

    .content {
      color: var(--secondary-main);
      font-family: var(--body-font-family);

      .tab-content {
        display: none;

        &.active {
          display: block;
        }
      }

      h4 {
        color: var(--tertiary-black);
        font-size: 0.875rem;
        line-height: 1.125rem;
        margin-bottom: 10px;
        font-weight: var(--fw-700);
        font-family: var(--body-font-arena);
        @media (width >=1024px) {
          font-size: 0.75rem;
        }
        strong {
          font-weight: var(--fw-700);
        }
      }

      p,
      ul li,
      ol li {
        font-weight: var(--fw-400);
        margin-bottom: 16px;
        font-family: var(--body-font-arena);
        font-size: 0.75rem;
        font-style: normal;
        line-height: 1rem;
        text-align: justify;
        color: var(--tertiary-black);
        @media (width >=1024px) {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
      }

      ol li {
        list-style-type: auto;
        margin-left: 14px;
      }
    }
  }

  @media (width >=768px) {
    gap: 60px;
    margin-bottom: -1px;
    padding-bottom: 0;

    .policy-terms__container {
      padding: 0px 56px 0px 56px;
      gap: 0px;

      .header {
        gap: 40px;
        padding-top: 56px;
        .pre-title {
          font-size: 32px;
          line-height: 38px;
        }

        .tab-list {
          gap: 24px;
          .tab-item {
            padding-bottom: 24px;
            margin-bottom: 32px;
            :is(h1, h2, h3, h4, h5, h6, p) {
              font-size: 24px;
              line-height: 28px;
              cursor: pointer;
              font-weight: 400;
            }
            &.active {
              :is(h1, h2, h3, h4, h5, h6, p) {
                font-size: 24px;
                line-height: 28px;
                font-weight: 700;
              }
              .vector-icon {
                display: none;
              }
            }
          }
        }
      }

      .content {
        h4 {
          font-size: 1.125rem;
          line-height: 32px;
          margin-bottom: 18px;
        }

        p,
        ul li,
        ol li {
          font-size: 0.875rem;
          line-height: 20px;
        }
      }
    }
  }
}

header.show-header + main {
  .section.policy-terms-container.contact-container {
    .header {
      top: 64px;
    }
  }
}