@font-face {
  font-family: 'Noto Sans Myanmar';
  src: url('../../assets/fonts/NotoSansMyanmar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Myanmar';
  src: url('../../assets/fonts/NotoSansMyanmar-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../../assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
body, button, input, optgroup, select, textarea {
  font-family: 'Noto Sans Myanmar', sans-serif;
}
.font-Poppins {
  font-family: 'Poppins', sans-serif;
}
select {
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
#map {
  width: 100%;
  height: 400px;
}
#gridBtn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  gap: 10px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(112, 112, 112, 0.6);
  border-radius: 8px;
  flex: none;
  order: 2;
  flex-grow: 0;
}

#gridBtn svg {
  flex: none;
  order: 0;
  flex-grow: 0;
}

#listBtn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 12px;
  gap: 10px;
  width: 45.33px;
  height: 40.67px;
  border: 1px solid rgba(112, 112, 112, 0.6);
  border-radius: 8px;
  flex: none;
  order: 4;
  flex-grow: 0;
}

#listBtn svg {
/* Vector */
  width: 26.33px;
  height: 35.67px;

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;

}

.property-details-row {
  box-sizing: border-box;
  flex-direction: row;
  padding: 12px;
  height: 42px;
  background: #F5F5F5;
  border-radius: 8px;
  align-self: stretch;
}

.property-card{
  border-color: #E2E2E2;
}

/* Pagination Styles - Matching Figma Design */
/* Pagination container */
.custom-pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  padding: 0px;
  gap: 0px 7px;
}

/* Page number buttons container */
.pagination-numbers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0px 7px;
}

/* Page number links - matching Figma specs */
.pagination-numbers > a,
.pagination-numbers > span[class*="flex"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 8px 12px !important;
  gap: 10px !important;
  width: 34px !important;
  height: 32px !important;
  border-radius: 4px !important;
  flex: none !important;
  flex-grow: 0 !important;
  font-family: 'Noto Sans', 'Noto Sans Myanmar', sans-serif !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 16px !important;
  text-decoration: none !important;
  color: #1C1F22 !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: none !important;
}

/* Active page - dark background */
.pagination-numbers > span[class*="bg-\[#1C1F22\]"] {
  background: #1C1F22 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Hover state for page links */
.pagination-numbers > a:hover {
  background: rgba(28, 31, 34, 0.1) !important;
}

/* Ellipsis dots */
.pagination-numbers > span:not([class*="flex"]):not([class*="px"]):not([class*="py"]) {
  background: transparent !important;
  color: #1C1F22 !important;
  font-weight: 400 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Previous/Next arrow buttons */
.custom-pagination > button,
.custom-pagination > a[class*="w-10"] {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

.custom-pagination svg {
  width: 12px !important;
  height: 24px !important;
}

@media only screen and (max-width: 767px) {
  .lh-14 {
    line-height: 3.25rem !important;
  }
  .bg-image-none {
    background-image: none !important;
    padding: 25px !important;
  }
}