/*
 * Sefid Off-Plan Properties — off-plan / new-project listings.
 * Hero + filter-field styling reuses the same visual language as the
 * Pixxi Real Estate Listings plugin (Sefid brand, pill fields, navy),
 * but the filter set and card layout are modelled on the Off-Plan
 * reference page (payment plan / property type / developer badges,
 * price "from AED …", Developer + Handover rows, Discover + WhatsApp).
 * Everything is scoped under .pol so the WordPress theme is not affected.
 */
.pol{
  --pol-navy:#0a1128;
  --pol-price:#0b1836;
  --pol-ink:#111;
  --pol-border:#cfcfcf;
  --pol-card-border:#dedede;
  --pol-gray:#f1f1f1;
  --pol-wa:#25d366;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--pol-ink);
  width:100%;
  margin:0;
  padding:0;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  /* Force light-themed native form controls (select dropdowns, etc.) so the
     explicit dark text below always pairs with a light background — without
     this, a device/browser in dark mode can render select popups with a
     dark background and the same dark text, making them unreadable. */
  color-scheme:light;
}
.pol *,.pol *::before,.pol *::after{box-sizing:border-box}
.pol a{text-decoration:none;box-shadow:none;color:inherit}
.pol h1,.pol h3,.pol p{font-family:inherit}
.pol button{font-family:inherit}

/* ---------- Content wrapper ---------- */
.pol .pol-wrap{
  max-width:1920px;
  margin:0 auto;
  padding:clamp(30px,3.6vw,64px) 3.3vw 90px;
}

/* ---------- Filter bar (same field styling as the sister plugin) ---------- */
.pol .pol-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:13px;
  margin:0 0 clamp(22px,2.2vw,38px);
  position:relative;
  z-index:5;
  align-items:stretch;
}
.pol .pol-field{
  display:block;
  width:100%;
  height:56px;
  margin:0;
  border:1px solid var(--pol-border);
  border-radius:8px;
  background-color:#fff;
  color:var(--pol-navy);
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  box-shadow:none;
  padding:0 16px;
  color-scheme:light;
}
.pol select.pol-field{cursor:pointer}
.pol input.pol-field{font-weight:400}
.pol input.pol-field::placeholder{color:#6b6b6b;font-weight:400}
.pol .pol-field:focus-visible,.pol .pol-filter-btn:focus-visible{outline:2px solid var(--pol-navy);outline-offset:2px}

.pol .pol-filter-btn{
  height:56px;
  margin:0;padding:0 20px;
  border:0;
  border-radius:8px;
  background:var(--pol-navy);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
.pol .pol-filter-btn:hover{background:#18213f}

/* ---------- Results bar: count left, currency + sort right ---------- */
.pol .pol-listbar{
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
  margin:0 0 22px;
}
.pol .pol-results{font-size:15px;color:#555}
.pol .pol-listbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pol .pol-currency{display:inline-flex;border:1px solid var(--pol-border);border-radius:8px;overflow:hidden}
.pol .pol-cur-btn{
  height:44px;padding:0 16px;border:0;background:#fff;color:var(--pol-navy);
  font-size:14px;font-weight:700;cursor:pointer;border-right:1px solid var(--pol-border);
}
.pol .pol-cur-btn:last-child{border-right:0}
.pol .pol-cur-btn.active{background:var(--pol-navy);color:#fff}
.pol .pol-sort{width:auto;min-width:160px;height:44px;font-size:14px}

/* ---------- Card grid ---------- */
.pol .pol-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  min-height:300px;
}
.pol .pol-grid.loading{opacity:.5;transition:opacity .2s}
.pol .pol-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid var(--pol-card-border);
  border-radius:12px;
  overflow:hidden;
  color:inherit;
  box-shadow:0 2px 10px rgba(10,17,40,.05);
  cursor:pointer;
  transition:box-shadow .2s,transform .2s;
}
.pol .pol-card:hover{box-shadow:0 8px 22px rgba(10,17,40,.14)}
.pol .pol-card:focus-visible{outline:2px solid var(--pol-navy);outline-offset:2px}

/* image + over-image badges */
.pol .pol-image{position:relative;aspect-ratio:4/3;background:#e9e9e9;overflow:hidden}
.pol .pol-image img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;margin:0;border:0}
.pol .pol-noimg{display:grid;place-items:center;width:100%;height:100%;color:#9a9a9a;font-size:14px}
.pol .pol-badges-left{position:absolute;left:13px;top:13px;right:13px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:2}
.pol .pol-badge-payment{
  display:inline-block;max-width:100%;height:32px;padding:0 14px;border-radius:5px;
  background:var(--pol-navy);color:#fff;font-size:12px;font-weight:700;
  line-height:32px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;
}
/* Property type — stacked directly under the payment plan badge, same slot. */
.pol .pol-badge-dev{
  display:inline-block;max-width:100%;
  padding:8px 16px;
  color:#333;font-size:13px;font-weight:600;line-height:15px;
  background-color:#fff;border-radius:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}

.pol .pol-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.pol .pol-price{margin:0 0 12px;font-size:20px;line-height:26px;font-weight:700;color:var(--pol-price)}
.pol .pol-price .pol-price-from{font-size:13px;font-weight:400;color:#777;text-transform:uppercase;margin-right:4px}
.pol .pol-price-alt{display:none}
.pol .pol-title{
  margin:0 0 14px;
  font-size:18px;
  font-weight:600;
  line-height:25px;
  color:var(--pol-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:50px;
}
.pol .pol-location{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:14.5px;color:#444}
.pol .pol-location svg{width:14px;height:14px;flex:none;fill:var(--pol-navy)}
.pol .pol-facts{display:flex;flex-direction:column;gap:6px;margin:0 0 20px;padding-top:14px;border-top:1px solid #ececec}
.pol .pol-fact{font-size:14.5px;line-height:20px;color:var(--pol-ink)}
.pol .pol-fact .pol-fact-label{color:#959595;font-weight:400;margin-right:6px}
.pol .pol-fact .pol-fact-val{font-weight:600}

.pol .pol-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;max-width:100%}
.pol .pol-discover-btn{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  height:48px;min-height:48px;border-radius:6px;border:1px solid var(--pol-navy);
  background:#fff;color:var(--pol-navy);font-size:14.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;padding:0 10px;box-sizing:border-box;
}
.pol .pol-discover-btn[disabled]{opacity:.45;cursor:default}
.pol .pol-discover-btn:hover{background:var(--pol-navy);color:#fff}
.pol .pol-wa-btn{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;min-height:48px;border-radius:6px;background:var(--pol-wa);color:#fff;
  font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 10px;box-sizing:border-box;
}
.pol .pol-wa-btn:hover{background:#1ebea5}
.pol .pol-wa-btn svg{width:20px;height:20px;flex:none;fill:#fff}

.pol .pol-status{text-align:center;color:#666;font-size:15px;padding:28px 0 0}
.pol .pol-empty{grid-column:1/-1;text-align:center;padding:70px 0;color:#666;font-size:18px}

/* ---------- Pagination ---------- */
.pol .pol-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:44px}
.pol .pol-pagination button{
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--pol-border);border-radius:8px;
  background:#fff;color:var(--pol-navy);
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;box-shadow:none;
}
.pol .pol-pagination button:hover{border-color:var(--pol-navy)}
.pol .pol-pagination button.active{background:var(--pol-navy);border-color:var(--pol-navy);color:#fff}
.pol .pol-pagination button[disabled]{opacity:.4;cursor:default}
.pol .pol-pagination .pol-dots{display:grid;place-items:center;min-width:22px;color:#666}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .pol .pol-body{padding:20px 20px 22px}
  .pol .pol-title{font-size:17px;line-height:23px;min-height:46px}
}
@media (max-width:1024px){
  .pol .pol-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .pol .pol-filters{grid-template-columns:repeat(2,1fr)}
  .pol .pol-filter-btn{grid-column:1/-1}
  .pol .pol-wrap{padding-left:24px;padding-right:24px}
  /* Stack the card buttons full-width any time the grid isn't 3-up desktop —
     side-by-side buttons get squeezed once cards are this narrow. */
  .pol .pol-actions{flex-direction:column}
  .pol .pol-discover-btn,.pol .pol-wa-btn{width:100%}
}
@media (max-width:640px){
  .pol .pol-grid{grid-template-columns:1fr;gap:22px}
  .pol .pol-filters{grid-template-columns:1fr}
  .pol .pol-wrap{padding:26px 16px 60px}
  .pol .pol-body{padding:18px 18px 20px}
  .pol .pol-field,.pol .pol-filter-btn{height:52px;font-size:15px}
  .pol .pol-listbar{flex-direction:column;align-items:flex-start}
  .pol .pol-pagination button{min-width:40px;height:40px}
}
@media (max-width:400px){
  .pol .pol-discover-btn,.pol .pol-wa-btn{font-size:14px}
}