/* Archive grid: filter bar, pagination, and mobile modal */

/* Desktop filter visible from 960px (UIkit @m) */
.archive-grid-filter-desktop {
  padding-top: 30px;
  padding-bottom: 60px;
  .uk-subnav {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    .js-archive-grid-filter-btn {
      all: unset;
      cursor: pointer;
      border-radius: 62.4375rem;
      border: 1px solid rgb(0, 0, 0);
      padding: 0.625rem 0.875rem;
      opacity: 0.6;
      line-height: 1 !important;

      &:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease-in-out;
        a {
          background-color: rgba(0, 0, 0, 0);
        }
        a::after {
          all: unset;
        }
      }

      a {
        all: unset;
        color: #000;
        display: inline-block;
        font-family: "neue-kabel";
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.035rem;
        text-transform: uppercase;
        padding: 0 !important;
      }

      &.uk-active {
        background-color: #d93b0b;
        border-color: #d93b0b;
        opacity: 1;
        a {
          color: white;
          position: relative;
        }
        &::after {
          content: "✖";
          height: 12px;
          width: 12px;
          color: white;
          padding-left: 8px;
        }
      }
    }
  }
}

/* Mobile filter button visible below 960px */
.archive-grid-filter-mobile {
  display: block;
}

/* Pagination: hide items on next pages until "Load more" */
.js-archive-grid-item.hidden-page {
  visibility: hidden;
  position: absolute;
  display: none;
}

/* Card image cover */
.contica-archive-grid .uk-cover-container {
  aspect-ratio: 4 / 3;
  min-height: 100px;
}

.contica-archive-grid .uk-cover-container img {
  object-fit: cover;
}

@media (max-width: 960px) {
  .js-archive-grid-clear-filters {
    display: none !important;
  }
}

/* Mobile modal for filter options */
.mobile-modal-button-div {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;

  .mobile-modal-button {
    all: unset;
    background-color: transparent !important;
    border: 1.5px solid #2d2e33 !important;
    border-radius: 999px !important;
    color: #2d2e33 !important;
    cursor: pointer;
    font-family: "neue-kabel" !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04rem !important;
    line-height: 1;
    padding: 16px 30px !important;
    position: relative;
    text-transform: uppercase !important;

    .js-archive-grid-filter-mobile-label {
      margin-left: 30px;
    }
  }

  .mobile-modal-button::before {
    content: "";
    background-image: url("/wp-content/themes/conticachild/img/filter.svg");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 18px;
    position: absolute;
    left: 30px;
    top: 17px;
    width: 18px;
  }
}

.mobile-filter-modal {
  .uk-modal-body,
  .uk-modal-footer {
    background-color: #401938 !important;
    color: #ffffff !important;
  }

  .uk-modal-close-default {
    color: #ffffff !important;
    margin: 5px 14px;
    top: 20px;
    right: 0;
  }

  .uk-modal-body {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02rem;
    line-height: 1;
    padding: 20px 0 0 0;
    text-transform: uppercase;

    .uk-modal-title {
      color: #ffffff !important;
      font-family: "neue-kabel";
      font-size: 28px;
      font-weight: 500;
      line-height: 1.1;
      padding-left: 20px;
    }

    .uk-checkbox:checked {
      background-color: #f58962;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%23401938%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%3C%2Fsvg%3E") !important;
    }

    .modal-items-list {
      background-color: #401938;
      height: 397px;
      overflow-y: auto;
      overflow-x: hidden;
      margin: 0 !important;
      padding: 0 !important;
      width: 100%;
      -webkit-overflow-scrolling: touch;

      .uk-list {
        margin: 0;
        li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          margin: 0;
          width: calc(100vw - 30px);
          background-color: transparent;

          input {
            margin: 0;
            margin-left: 20px;
          }

          span {
            padding: 15px 0;
          }
        }
      }
    }

    .modal-items-list::-webkit-scrollbar {
      width: 4px;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .modal-items-list::-webkit-scrollbar-thumb {
      background-color: #ffffff;
      border-radius: 3px;
    }
  }

  .uk-modal-footer {
    border-top: 1px solid #f58962;
    height: 88px;
    display: flex;
    align-items: center;
    padding: 0;

    .js-archive-grid-clear-filters-modal {
      all: unset;
      background-color: transparent !important;
      border: 1.5px solid #ffffff !important;
      border-radius: 999px !important;
      color: #ffffff !important;
      cursor: pointer;
      font-family: "neue-kabel" !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      letter-spacing: 0.04rem !important;
      line-height: 1;
      padding: 16px 30px !important;
      position: relative;
      text-transform: uppercase !important;

      span {
        margin-left: 8px;
      }
    }

    .js-archive-grid-clear-filters-modal:hover::before,
    .js-archive-grid-clear-filters-modal:focus::before {
      border: none !important;
      transition: none !important;
      transform: none !important;
      transition-property: none !important;
      left: 22px;
    }

    .js-archive-grid-clear-filters-modal::before {
      content: "";
      background-image: url("/wp-content/themes/conticachild/img/trash.svg");
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
      height: 13px;
      position: absolute;
      left: 22px;
      top: 17px;
      width: 12px;
      z-index: 3;
      border: none !important;
      transition: none !important;
      transform: none !important;
    }

    .js-archive-grid-modal-apply {
      background-color: #ffffff !important;
      border: 1.5px solid #ffffff !important;
      border-radius: 999px !important;
      color: #2d2e33 !important;
      font-family: "neue-kabel" !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      letter-spacing: 0.04rem !important;
      line-height: 1;
      padding: 16px 30px !important;
      text-transform: uppercase !important;
    }
  }
}

/* Pagination styling */
.archive-pagination {
  .pagination-numbers:has(.pagination-page.uk-hidden) {
    display: none;
  }

  .pagination-page.uk-hidden {
    display: none !important;
  }

  .pagination-numbers {
    display: flex;
    list-style: none;
    margin: 0 1px;
    padding: 0;

    &:hover a {
      background-color: rgba(225, 209, 193, 0.2);
    }
  }

  .pagination-numbers a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    border-radius: 50%;
  }

  .uk-active {
    background-color: #e1d1c1;
    border-radius: 50%;
  }

  .pagination-prev-page,
  .pagination-next-page,
  .pagination-prev-page.uk-hidden,
  .pagination-next-page.uk-hidden {
    all: unset;
    cursor: pointer;
    position: relative;

    border: #d93b0b solid 2px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 40px;
    box-sizing: border-box;
  }

  .pagination-prev,
  .pagination-next {
    all: unset;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Lager_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 54 30' style='enable-background:new 0 0 54 30;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23D93B0B;stroke-width:3.0282;%7D .st1%7Bfill:none;stroke:%23D93B0B;stroke-width:2.9835;%7D%0A%3C/style%3E%3Cline id='Line_2' class='st0' x1='54' y1='15' x2='0' y2='15'/%3E%3Cpath class='st1' d='M43.5,0c0,7,4.4,12.9,10.5,15'/%3E%3Cpath class='st1' d='M54,15c-6.2,2.1-10.6,8-10.6,15'/%3E%3C/svg%3E%0A");
    background-size: 21px 16px;
    background-position: center;
  }

  .pagination-prev {
    transform: rotate(180deg);
  }

  .pagination-prev-page.uk-hidden,
  .pagination-next-page.uk-hidden {
    display: inline-block !important;
    border-color: #e1d1c1 !important;

    .pagination-prev,
    .pagination-next,
    .pagination-prev.uk-hidden,
    .pagination-next.uk-hidden {
      display: inline-block !important;
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Lager_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 54 30' style='enable-background:new 0 0 54 30;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23e1d1c1;stroke-width:3.0282;%7D .st1%7Bfill:none;stroke:%23e1d1c1;stroke-width:2.9835;%7D%0A%3C/style%3E%3Cline id='Line_2' class='st0' x1='54' y1='15' x2='0' y2='15'/%3E%3Cpath class='st1' d='M43.5,0c0,7,4.4,12.9,10.5,15'/%3E%3Cpath class='st1' d='M54,15c-6.2,2.1-10.6,8-10.6,15'/%3E%3C/svg%3E%0A") !important;
    }
  }

  .pagination-prev-page:not(.uk-hidden),
  .pagination-next-page:not(.uk-hidden) {
    .pagination-prev:hover,
    .pagination-next:hover {
      background-color: #d93b0b;
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Lager_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 54 30' style='enable-background:new 0 0 54 30;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:3.0282;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:2.9835;%7D%0A%3C/style%3E%3Cline id='Line_2' class='st0' x1='54' y1='15' x2='0' y2='15'/%3E%3Cpath class='st1' d='M43.5,0c0,7,4.4,12.9,10.5,15'/%3E%3Cpath class='st1' d='M54,15c-6.2,2.1-10.6,8-10.6,15'/%3E%3C/svg%3E%0A");
    }

    background-color: none;
    a {
      border: none !important;
    }
  }
  .pagination-prev-page:not(.uk-hidden):hover,
  .pagination-next-page:not(.uk-hidden):hover {
    a {
      border: none !important;
    }
  }
}

/* Hide pagination numbers on mobile */
@media (max-width: 800px) {
  .pagination-numbers {
    display: none !important;
  }
}