/* Scope everything to the block */
.wp-block-acf-people-archive {
  --dropdown-bg: var(--wp--preset--color--white);
  --dropdown-border: color-mix(in srgb, currentColor 20%, transparent);
  --text: var(--wp--preset--color--dark);
  --pill-bg: var(--wp--preset--color--white);
  --pill-active-bg: var(--wp--preset--color--cyan);

  /* Dropdown container */
  .wrap-drop {
    flex: 1 1 25%;
    background: #fff;
    border: 1px solid var(--wp--preset--color--light, #ddd);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    user-select: none;
    min-width: 220px;
    padding: 1rem;
    transition: all 0.4s ease-out !important;

    > span {
      display: block;
      position: relative;
      /*z-index: 99;*/
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      white-space: nowrap;
      padding-right: 20px;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 1rem;
      width: 0;
      height: 0;
      margin-top: -4px;
      border-style: solid;
      border-width: 7px 7px 0;
      border-color: var(--wp--preset--color--cyan) transparent;
      transition: transform 0.2s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    }

    /* Dropdown list */
    ul.drop {
      display: none;
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      max-height: 280px;
      overflow-y: auto;
      background: #fff;
      border: 1px solid var(--light, #ddd);
      border-radius: 4px;
      z-index: 1;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      margin: 0;
      padding: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;

      li {
        list-style: none;
        margin: 0;
        padding: 0;

        a {
          display: block;
          padding: 8px 10px;
          font-size: 14px;
          color: var(--wp--preset--color--dark);
          text-decoration: none;
          transition: background 0.4s ease-out, color 0.4s ease-out;

          &:hover,
          &:focus {
            transition: none;
            color: var(--wp--preset--color--dark);
            background: var(--wp--preset--color--light);
          }
        }

        &.selected a {
          font-weight: 600;
        }
      }
    }

    /* Hover + active states */
    &:hover {
      transition: all 0.1s !important;
      color: var(--wp--preset--color--dark);
      background: var(--wp--preset--color--light);
    }

    &.filled {
      background: var(--wp--preset--color--cyan);
      color: var(--wp--preset--color--dark);
      border-color: var(--wp--preset--color--pink);

      &::after {
        border-color: var(--wp--preset--color--dark) transparent;
      }
    }

    &.active {
      z-index: 10;
      &::after {
        transform: rotate(-90deg);
      }

      ul.drop {
        display: block;
        opacity: 1;
        pointer-events: auto;
      }
    }
  }

  /* Cards grid container */
  #peopleResults {
    margin-top: 2rem;
  }

  /* Search input */
  input {
    font-size: 1rem;
    background: #fff;
    border: 1px solid var(--wp--preset--color--light, #ddd);
    border-radius: 4px;
    position: relative;
    min-width: 220px;
    padding: 1rem;
    transition: all 0.4s ease-out !important;
  }

  /* Loading state */
  #peopleResults.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 1s;
  }
}


.wp-block-button.is-active .wp-block-button__link {
  background-color: var(--wp--preset--color--cyan) !important;
  border-color: var(--wp--preset--color--cyan) !important;
}