/* ROOT */
.ptm-main-filter-wrapper {
  --h: 48px;
}

/* WRAPPER */
.ptm-main-filter-wrapper {
  background: #52a918;
  padding: 40px;
}

/* GRID */
.ptm-main-filter-wrapper .row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ptm-main-filter-wrapper .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.ptm-main-filter-wrapper .row-80 {
  display: grid;
  grid-template-columns: 79% 20%;
  gap: 16px;
  margin-top: 20px;
}

/* ================= COMMON FIELD STYLE ================= */

.ptm-main-filter-wrapper .select-box,
.ptm-main-filter-wrapper .search-box input,
.ptm-main-filter-wrapper .clear-btn {
  height: var(--h);
  border: none;
  border-radius: 8px;
  outline: none;
  box-shadow: none;
}

/* SELECT BOX */
.ptm-main-filter-wrapper .select-box {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px 0 12px;
  position: relative;
  cursor: pointer;
}

/* ARROW */
.ptm-main-filter-wrapper .select-box::after {
  content: "⌄";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #00b3a7;
}

/* PLACEHOLDER */
.ptm-main-filter-wrapper .placeholder,
.ptm-main-filter-wrapper .search-box input::placeholder {
  color: #b4b4b4;
}

/* REMOVE FOCUS */
.ptm-main-filter-wrapper input:focus,
.ptm-main-filter-wrapper .select-box:focus,
.ptm-main-filter-wrapper button:focus {
  outline: none;
  box-shadow: none;
}

/* ================= MULTI SELECT ================= */

.ptm-main-filter-wrapper .multi-select {
  position: relative;
}

.ptm-main-filter-wrapper .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 85%;
}

.ptm-main-filter-wrapper .tag {
  background: #18a999;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* ================= DROPDOWN ================= */

.ptm-main-filter-wrapper .dropdown {
  position: absolute;
  top: 110%;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  display: none;
  z-index: 99;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.ptm-main-filter-wrapper .multi-select.active .dropdown,
.ptm-main-filter-wrapper .custom-select.active .dropdown {
  display: block;
}

/* ================= OPTIONS ================= */

.ptm-main-filter-wrapper .custom-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.ptm-main-filter-wrapper .custom-option input {
  display: none;
}

.ptm-main-filter-wrapper .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CHECKBOX */
.ptm-main-filter-wrapper .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #b4b4b4;
  border-radius: 4px;
}

.ptm-main-filter-wrapper .custom-option input:checked ~ .left .checkmark {
  background: #18a999;
  border-color: #18a999;
}

.ptm-main-filter-wrapper
  .custom-option
  input:checked
  ~ .left
  .checkmark::after {
  content: "✔";
  color: #fff;
  position: absolute;
  font-size: 12px;
  margin-left: 4px;
}

/* ICON */
.ptm-main-filter-wrapper .right-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* HOVER */
.ptm-main-filter-wrapper .custom-option:hover,
.ptm-main-filter-wrapper .option:hover {
  background: #f5f5f5;
}

/* ================= CUSTOM SELECT ================= */

.ptm-main-filter-wrapper .custom-select {
  position: relative;
}

.ptm-main-filter-wrapper .option {
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* ================= SEARCH ================= */

.ptm-main-filter-wrapper .search-box {
  position: relative;
}

.ptm-main-filter-wrapper .search-box input {
  width: 100%;
  padding: 0 40px 0 12px;
	border-radius: 8px;
}

.ptm-main-filter-wrapper .search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.search-box input{
	border-radius: 8px;
}
/* ================= BUTTON ================= */

.ptm-main-filter-wrapper .clear-btn {
  width: 100%;
  background: #fff;
  cursor: pointer;
  color: #0e0e55;
  font-family: "Roboto", Sans-serif;
  transition: all 0.4s ease;
  text-transform: capitalize;
  font-weight: 800;
}
.ptm-main-filter-wrapper .clear-btn:hover {
  background-color: #fccf17;
}

/* ================= RESULT ================= */

.ptm-main-filter-wrapper + .result {
  padding: 40px;
  background: #eecaca;
}

.ptm-main-filter-wrapper + .result .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ptm-main-filter-wrapper + .result .card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

.ptm-main-filter-wrapper + .result .no-result {
  display: none;
}

/* CONTAINER WRAPPER */
.ptm-full-width-filter-sec .ptm-main-filter-wrapper {
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* SEARCH ICON */
.ptm-main-filter-wrapper .search-icon i {
  color: #00b4a7;
  font-size: 16px;
}

/* DROPDOWN ICON */
.ptm-main-filter-wrapper .dropdown-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.ptm-main-filter-wrapper .dropdown-icon i {
  color: #00b4a7;
  font-size: 16px;
}

.ptm-main-filter-wrapper .select-box {
  padding: 0 35px 0 12px;
}

/* FULL WIDTH BG */
/* .ptm-full-width-filter-sec {
  width: 100%;
  background: #253b63;
  padding: 60px 0;
} */

/* CENTER CONTAINER */
.ptm-container {
  max-width: 1320px;
  margin: auto;
  padding: 0 20px;
}

/* REMOVE EXTRA BG */
.ptm-main-filter-wrapper {
  padding: 0;
}

/* RESULT FULL WIDTH BG */
.result {
  width: 100%;
  background: #f4f4f4;
  padding: 60px 0;
}

/* INNER CONTAINER SAME AS FILTER */
.result-inner {
  max-width: 1320px;
  margin: auto;
  padding: 0 20px;
}
/* ================= RESPONSIVE ================= */
/* ================= FULL WIDTH SECTIONS ================= */

/* FILTER FULL WIDTH */
.ptm-filter-section {
  width: 100%;
  background: #1e3059;
  padding: 60px 0;
}

/* RESULT FULL WIDTH */
.ptm-result-section {
  width: 100%;
  background: #ffffff;
  padding: 60px 0;
}

/* ================= CONTAINER ================= */

.ptm-container {
  max-width: 1320px;
  margin: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* REMOVE OLD BG */
.ptm-main-filter-wrapper {
  background: transparent;
  padding: 0;
}

.result {
  background: transparent;
  padding: 0;
}

/* ================= CARDS GRID ================= */
.result h3 {
  font-family: "Roboto", Sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 3.2rem;
  color: #0e0e55;
  padding-bottom: 2rem;
}
.result .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop */
  gap: 20px;
}
.card-tags {
  display: flex;
  gap: 10px;
	 flex-wrap: wrap;
  align-items: center;
	justify-content: center;
}
.card-tags p {
  font-family: "Roboto", Sans-serif;
  font-size: 0.85rem;
  color: #706e6e;
  line-height: 1.2rem;
  margin-bottom: 0px;
  padding: 4px 8px;
	background-color: #e8e8e8;
}
.hidden-card {
    display: none;
}

.load-more-wrap {
    text-align: center;
    margin-top: 30px;
}

.load-more-btn {
    padding: 10px 24px;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
}
.load-more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* HIDE LOADER DEFAULT */
.btn-loader {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  display: none;
  animation: spin 0.6s linear infinite;
}

/* SHOW LOADER WHEN ACTIVE */
.load-more-btn.loading .btn-loader {
  display: inline-block;
}

.load-more-btn.loading .btn-text {
  opacity: 0.7;
}

/* SPIN ANIMATION */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* TABLET */
@media (max-width: 1024px) {
  .result .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .result .cards {
    grid-template-columns: 1fr;
  }
}
.search-box input {
	border-radius: 8px !important;
}
/* ================= NO RESULT ================= */

.no-result {
  display: none;
}
@media (max-width: 768px) {
  .ptm-main-filter-wrapper .row-3,
  .ptm-main-filter-wrapper .row-2,
  .ptm-main-filter-wrapper .row-80 {
    grid-template-columns: 1fr;
  }

  .ptm-main-filter-wrapper + .result .cards {
    grid-template-columns: 1fr;
  }
}