/* :root{
    --max-faq-content-height: 340px;
  } */
  
  .faq-block * {
      box-sizing: border-box;
  }
  .faq-block {
      display: flex;
      height: var(--max-faq-content-height);
      overflow: hidden;
      width: 100%;
      gap: 42px;
    }
    
    .faq-block__menu {
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 0 1 33%;
      overflow-y: auto;
      padding-right: 12px;
      scrollbar-color: var(--wp--preset--color--maka-zytnia) var(--wp--preset--color--maczna-biel);
    }
  
    .faq-block__text h2,
    .faq-block__text-mobile h2{
      color: var(--wp--preset--color--new-red);
      margin-block-start: 0;
      margin-block-end: 16px;
    }
  
    .faq-block__text p,
    .faq-block__text-mobile p{
      margin-block-start: 16px;
      margin-block-end: 36px;
    }
    
    .faq-block__text-mobile{
      display: none;
      padding: 10px;
    }
    
    .faq-block__content {
      flex: 1 0 66%;
      position: relative;
      min-width: 0;
      border: 1px solid var(--wp--preset--color--zlote-zboze);
    }
  
    .faq-block__menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px;
      justify-content: space-between;
      transition: all 0.3s ease;
      cursor: pointer;
      border: 1px solid transparent;
    }
  
    .faq-block__menu-item svg path{
      transition: all 0.3s ease;
    }
  
  
    .faq-block__menu-item .item-content{
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .faq-block__menu-item .item-arrow {
        display: flex;
    }

    .faq-block__menu-item .item-arrow svg{
        transition: all 0.3s ease;
    }

    .faq-block__menu-item .item-arrow svg:nth-child(2) {
        margin-left: -14px;
        transform: rotate(90deg);
    }

    .faq-block__menu-item.active .item-arrow svg:nth-child(2){
        transform: rotate(0deg);
    }
  
    .faq-block__menu-item.active{
      background-color: var(--wp--preset--color--new-red);
      color: var(--wp--preset--color--maczna-biel);
      border: 1px solid var(--wp--preset--color--new-red);
    }
  
    .faq-block__menu-item.active svg path{
      fill: var(--wp--preset--color--maczna-biel);
    }
  
    .faq-block__menu-item:hover:not(.active){
      color: var(--wp--preset--color--new-red);
      border: 1px solid var(--wp--preset--color--new-red);
    }
  
    .faq-block__menu-item:hover:not(.active) svg path{
      fill: var(--wp--preset--color--new-red);
    }
  
  
    
    /* dropdown (mobile) */
    .faq-block__dropdown {
      display: none;
      position: relative;
    }
  
    .faq-block__dropdown .item-content {
      display: flex;
      align-items: center;
      gap: 16px;
    }
  
    .faq-block__dropdown-toggle,
    .faq-block__dropdown-list-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      gap: 12px;
    }

    .faq-block__dropdown-list-item .item-arrow {
        display: flex;
    }

    .faq-block__dropdown-list-item .item-arrow svg:nth-child(2) {
        margin-left: -14px;
        transform: rotate(90deg);
    }
  
    .faq-block__dropdown-toggle{
      border: 1px solid var(--wp--preset--color--zlote-zboze);
    }
  
    .faq-block__dropdown-toggle .item-arrow {
      display: none;
    }
  
    .faq-block__dropdown.is-open .faq-block__dropdown-toggle{
      border: 1px solid var(--wp--preset--color--new-red);
      background-color: var(--wp--preset--color--new-red);
    }
  
    .faq-block__dropdown.is-open .faq-block__dropdown-toggle .item-content{
      color: var(--wp--preset--color--maczna-biel);
    }
  
    .faq-block__dropdown.is-open .faq-block__dropdown-toggle > svg {
      transform: rotate(180deg);
    }
  
    .faq-block__dropdown.is-open .faq-block__dropdown-toggle svg path {
      fill: var(--wp--preset--color--maczna-biel);
    }
  
    .faq-block__dropdown-list {
      display: none;
      list-style: none;
      margin: 0;
      padding: 0;
      border: 1px solid var(--wp--preset--color--new-red);
      border-top: none;
      background: #fff;
      position: absolute;
      width: 100%;
      z-index: 10;
      max-height: 260px;
      overflow-y: auto;
    }
    .faq-block__dropdown.is-open .faq-block__dropdown-list {
      display: block;
    }
    
    /* standard swiper container */
    .faq-block__content-item {
      display: none;
      width: 100%;
      padding: 64px;
    }
    .faq-block__content-item.is-active {
      display: block;
    }

    .faq-block__content-item h4 {
        margin-block-start: 0;
        margin-block-end: 36px;
    }

    .faq-block__content-item p {
        margin-block-start: 10px;
        margin-block-end: 10px;
    }
    
    @media(max-width: 1100px){
      .faq-block__menu{
        padding: 24px;
      }
    }
  
    @media (max-width: 782px) {
      .faq-block__menu {
        display: none;
      }
      .faq-block__dropdown {
        display: block;
      }
      .faq-block {
        display: block;
        height: auto;
      }
      .faq-block__content {
        border-top: none;
      }
      .faq-block__content-item {
        padding: 16px;
      }
    }