/* === Toolbar Layout === */
.listfront-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 8px 12px;
}

/* Sort buttons */
.sector-sortbutton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

@media (max-width: 768px) {
  .sector-sortbutton {
    flex-direction: column;   /* <-- FIX UTAMA */
    gap: 10px;
    width: 100%;
  }
}


.sort-section,
.sort-location {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .sort-section,
  .sort-location {
    width: 100%;
    margin: 0;
  }
}


.listfront-toolbar button.sort-up,
.listfront-toolbar button.sort-down,
.listfront-toolbar button.sort-date {
  background:#302C83;
  color:#fff;
  border:none;
  border-radius:20px;
  padding:8px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  margin: 0 6px;
}

@media (max-width: 768px) {
  .listfront-toolbar button.sort-up,
  .listfront-toolbar button.sort-down,
  .listfront-toolbar button.sort-date {
    width: 100%;    /* <-- NICE MOBILE BUTTONS */
    margin: 5px 0;
  }
}
.sort-location select.filter-select {
  width: auto;
}

@media (max-width: 768px) {
  .sort-location select.filter-select {
    width: 100%;
    max-width: 250px;
  }
}


/* Filter buttons */
.sector-filters {
  display:flex;
  flex-wrap:wrap;
  padding-top:10px;
  gap:8px;
  justify-content:center;
  align-items:center;
}

.filter-btn {
  background:#e9ecef;
  color:#333;
  border:1px solid #ccc;
  border-radius:30px;
  padding:7px 15px;
  font-size:14px;
  cursor:pointer;
}

.filter-btn:hover,
.filter-btn.active {
  background:#e81c48;
  color:#fff;
  border-color:#e81c48;
}

/* Listing Grid */
.listfront-listing {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.listfront-item {
  flex:1 1 calc(33.333% - 20px);
  max-width:33.333%;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
  transition:transform .2s ease;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

.listfront-item:hover { transform:translateY(-3px); }

@media (max-width:768px){
  .listfront-item { flex:1 1 100%; max-width:100%; }
}

/* Thumbnail */
.listfront-thumb{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
}
.listfront-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Sector Badge */
span.sector {
  position:absolute;
  top:10px;
  right:10px;
  background:#E81C48;
  color:#fff;
  padding:3px 10px;
  border-radius:20px;
  font-size:12px;
}

/* Title */
.listfront-listing h3 { margin: 20px; }
.listfront-listing h3,
.listfront-listing h3 a {
  font-size:18px;
  font-weight:bold;
  color:#000;
  font-family:'Gotham', sans-serif;
}

/* Numbers */
.listfront-listing p { padding:0 20px; line-height: 1em; text-align: right;}
.listfront-listing p strong {
  float:left;
}

/* Progress bar */
.listfront-bar-track {
  width:88%;
  height:10px;
  background:#ccc;
  border-radius:10px;
  overflow:hidden;
  margin:10px 20px 10px;
}

.listfront-bar {
  height:100%;
  width:0;
  background:linear-gradient(90deg, #ED1C24, #e81c48);
  border-radius:10px;
  transition:width 1.2s ease-out;
}

/* Percent */
.listfront-percent-wrap {
  margin:0 10px 10px;
  text-align:right;
  padding-right:10px;
}

.listfront-percent {
  font-size:14px;
  font-weight:600;
  color:#333;
}

/* Button */
.listfront-wakafbutton {
  margin-top:auto;
  padding:15px 20px;
}

.listfront-wakafbutton a.wakafinfo {
  display:block;
  background:#302C83;
  color:#fff;
  text-align:center;
  padding:12px 18px;
  border-radius:8px;
  font-weight:bold;
}
.listfront-wakafbutton a.wakafbutton {
  display:block;
  background:#e81c48;
  color:#fff;
  text-align:center;
  padding:12px 14px;
  border-radius:8px;
  font-weight:bold;
}
a.wakafinfo, a.wakafbutton { width: 48%; }
a.wakafinfo { float: left; }
a.wakafbutton { float: right; }

/* Uniform Select Styling (Chrome + Safari + Firefox) */
.filter-select {
  background:#fff;
  border:1px solid #ccc;
  border-radius:25px;
  padding:8px 14px;
  font-size:14px;
  cursor:pointer;

  /* IMPORTANT untuk Safari / Mac */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* optional kalau perlu fix height consistent */
  line-height: 1.2;

  /* Tambah ruang untuk arrow custom */
  padding-right: 35px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='14' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M2 4 l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Hover / Focus */
.filter-select:hover,
.filter-select:focus {
  border-color:#e81c48;
  outline:none;
}





.wakafppz-project .wakafppz-circle { display:block !important; }
.wakafppz-project .wakafppz-bar-wrap { display:none !important; }
/* Ensure progress path has default stroke to avoid black fill before gradient applied */
.wakafppz-circle path.progress { stroke: #ED1C24 !important; }


/* v1.7: SVG fix – prevent black fill */
.wakafppz-circle svg,
.wakafppz-circle svg path {
    fill: none !important;
    background: transparent !important;
}


/* v1.7.1 Responsive Circle */
.circle .wakafppz-circle {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    background: transparent !important;
}

.circle .wakafppz-circle svg {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

.circle .wakafppz-circle svg path {
    fill: none !important;
}

.circle .wakafppz-circle-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: clamp(14px, 2vw, 28px) !important;
    font-weight: bold;
    z-index: 10;
}


/* circle css */
/* --- Bar & Circle warna baru --- */

/* Default: tunjuk BAR, sembunyi CIRCLE */
.wakafppz-project .wakafppz-bar-wrap { display:block; }
.wakafppz-project .wakafppz-circle { display:none; }

/* Kalau parent ada class .circle → tunjuk CIRCLE, sembunyi BAR */
.circle .wakafppz-project .wakafppz-bar-wrap { display:none; }
.circle .wakafppz-project .wakafppz-circle { display:block; }

/* === BAR === */
.wakafppz-bar-wrap {
  background: #cccccc; /* warna track kelabu */
  border-radius: 20px;
  overflow: hidden;
  height: 20px;
  position: relative;
}
.wakafppz-bar {
  height: 100%;
  width: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #ED1C24 0%, #2E3192 100%);
  transition: width 1.5s ease;
}
.wakafppz-bar-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: #000;
}

/* === CIRCLE === */
.wakafppz-circle {
  width: 120px; height: 120px;
  position: relative;
  margin: 10px auto;
}
.wakafppz-circle svg {
  transform: rotate(-90deg);
  width: 100%; height: 100%;
}
.wakafppz-circle path.bg {
  fill: none;
  stroke: #cccccc; /* track kelabu */
  stroke-width: 3.8;
}
.wakafppz-circle path.progress {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s ease;
}
.wakafppz-circle-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}