/* Property9ja — polished stylesheet v5 (logo + well-placed menu header + homepage hero)
   Drop-in replacement for public_html/style.css.
   Uses banner.jpg and logo.png in the same public_html folder.
   Colours: primary green #0b5a2e, dark green #073d1f, warm gold #d4a017.
   System fonts only, no external fonts or images. Mobile-first. */

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1c241c;
  background: #f3f6f3;
  line-height: 1.6;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header: marketplace masthead, not a plain bar */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0b5a2e;
  background: linear-gradient(180deg, rgba(7, 61, 31, 0.82) 0%, rgba(11, 90, 46, 0.55) 55%, rgba(7, 61, 31, 0.85) 100%), url('banner.jpg') center 62% / cover no-repeat;
  color: #ffffff;
  padding: 28px 0 14px;
  border-bottom: 4px solid #d4a017;
  box-shadow: 0 4px 18px rgba(7, 61, 31, 0.25);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Header layout v4: logo left, menu right on desktop; menu below on phones */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
}

.logo {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

header nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  flex: 0 1 auto;
}

header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand {
  font-size: 32px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-decoration: none;
}

.tag {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #d9ead9;
}

nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px 16px;
}

nav a {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

nav a:hover {
  background: #d4a017;
  color: #1c241c;
}

main {
  padding: 26px 0 48px;
}

h1 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #073d1f;
  margin: 6px 0 14px;
}

h2 {
  font-size: 22px;
  line-height: 1.25;
  color: #073d1f;
  margin: 22px 0 10px;
}

h3 {
  font-size: 18px;
  line-height: 1.3;
  color: #073d1f;
  margin: 4px 0 10px;
}

/* Cards: search form, listing detail, dashboard and admin panels */
form.card,
div.card,
section.card {
  background: #ffffff;
  border: 1px solid #e0e7e0;
  border-radius: 16px;
  padding: 20px;
  margin: 18px 0;
  box-shadow: 0 6px 22px rgba(7, 61, 31, 0.08);
}

label {
  display: block;
  margin: 14px 0 5px;
  font-weight: 700;
  font-size: 15px;
  color: #243024;
}

input,
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #cbd5cb;
  border-radius: 10px;
  background: #ffffff;
  color: #1c241c;
  font-size: 16px;
  line-height: 1.4;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #0b5a2e;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.35);
}

textarea {
  resize: vertical;
  min-height: 110px;
}

/* Buttons: large, tappable, clearly primary */
button,
.btn {
  display: inline-block;
  min-height: 48px;
  padding: 13px 22px;
  border: 0;
  border-radius: 10px;
  background: #0b5a2e;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
  box-shadow: 0 3px 10px rgba(7, 61, 31, 0.22);
}

button:hover,
.btn:hover {
  background: #084d27;
}

.btn.secondary {
  background: #eef2ee;
  color: #073d1f;
  border: 1.5px solid #cbd5cb;
  box-shadow: none;
}

.btn.secondary:hover {
  background: #e2ece2;
}

.btn.danger {
  background: #b42318;
  box-shadow: 0 3px 10px rgba(180, 35, 24, 0.22);
}

.btn.danger:hover {
  background: #93201a;
}

/* Listings: one column on phones, more on larger screens */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

.listing {
  background: #ffffff;
  border: 1px solid #e0e7e0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(7, 61, 31, 0.08);
}

.listing:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(7, 61, 31, 0.14);
}

.listing img,
.gallery img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  background: #e9f0e9;
}

.listing .body {
  padding: 16px 18px 18px;
}

.price {
  font-size: 21px;
  font-weight: 850;
  line-height: 1.3;
  color: #9a7b00;
}

.placeholder {
  background: #e9f0e9;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6b5a;
  font-weight: 750;
  text-align: center;
  padding: 16px;
}

/* Status badges and messages */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}

.badge.pending {
  background: #fff3cd;
  color: #7a5a00;
  border-color: #f0d98c;
}

.badge.approved {
  background: #d4edda;
  color: #0b5a2e;
  border-color: #a3d9a5;
}

.badge.rejected {
  background: #f8d7da;
  color: #8a1f1a;
  border-color: #f5c6cb;
}

.note {
  background: #fff8e1;
  border: 1px solid #f0d98c;
  border-left: 5px solid #d4a017;
  padding: 14px 16px;
  border-radius: 12px;
  margin: 14px 0;
}

.error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  border-left: 5px solid #b42318;
  padding: 14px 16px;
  border-radius: 12px;
  margin: 14px 0;
}

.success {
  background: #e6f4ea;
  border: 1px solid #a3d9a5;
  border-left: 5px solid #0b5a2e;
  padding: 14px 16px;
  border-radius: 12px;
  margin: 14px 0;
}

/* Admin / dashboard tables: tidy, readable, scrollable on phones */
table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #e0e7e0;
  border-radius: 12px;
  font-size: 15px;
}

td,
th {
  border-bottom: 1px solid #eef2ee;
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: #eef5ef;
  color: #073d1f;
  font-weight: 800;
}

footer {
  background: #073d1f;
  color: #d9ead9;
  padding: 26px 0;
  margin-top: 20px;
}

small {
  color: #5a6b5a;
  font-size: 14px;
}

/* Larger screens: roomier header, cards and grids */
@media (min-width: 640px) {
  .wrap {
    padding: 0 22px;
  }

  .brand {
    font-size: 36px;
  }

  h1 {
    font-size: 36px;
  }

  form.card,
  div.card,
  section.card {
    padding: 24px;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .listing img,
  .gallery img {
    height: 230px;
  }

  .placeholder {
    height: 230px;
  }

  button,
  .btn {
    width: auto;
  }
}

@media (min-width: 980px) {
  main {
    padding: 32px 0 56px;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .listing img,
  .gallery img {
    height: 240px;
  }

  .placeholder {
    height: 240px;
  }
}

/* Phones: full-width primary actions in cards, tables scroll sideways */
@media (max-width: 639px) {
  button,
  .btn {
    width: 100%;
    text-align: center;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}

/* Header on phones (v4): logo + wordmark on top, menu full-width below */
@media (max-width: 720px) {
  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .logo {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .brand {
    font-size: 30px;
  }

  header nav {
    width: 100%;
    justify-content: flex-start;
    padding-top: 2px;
  }
}

/* Homepage hero v5: full-bleed banner above the search card */
.hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  background: linear-gradient(180deg, rgba(7, 61, 31, 0.82) 0%, rgba(11, 90, 46, 0.55) 55%, rgba(7, 61, 31, 0.88) 100%), url('banner.jpg') center 55% / cover no-repeat;
  color: #ffffff;
  border-bottom: 4px solid #d4a017;
  box-shadow: 0 6px 24px rgba(7, 61, 31, 0.25);
}
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 16px 48px;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #ffffff;
}
.hero p {
  font-size: 18px;
  line-height: 1.55;
  margin: 0 auto 12px;
  max-width: 720px;
  color: #ffffff;
}
.hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0;
}
.hero-links a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.hero-links a:hover,
.hero-links a.active {
  background: #d4a017;
  border-color: #d4a017;
  color: #073d1f;
  text-shadow: none;
}
/* Search card overlaps the hero so the form stands out */
.hero + form.card {
  position: relative;
  z-index: 2;
  margin-top: -24px;
  box-shadow: 0 12px 32px rgba(7, 61, 31, 0.22);
}
@media (max-width: 720px) {
  .hero-inner {
    padding: 26px 16px 40px;
  }
  .hero h1 {
    font-size: 29px;
  }
  .hero p {
    font-size: 16px;
  }
  .hero + form.card {
    margin-top: -18px;
  }
}
/* Prevent any horizontal scroll from the full-bleed hero */
body { overflow-x: clip; }

/* Property9ja Phase 1A+1B additions (on top of v5) */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: 10px 12px; }
.fact span { display: block; font-size: 12px; color: #666; }
.fact strong { display: block; margin-top: 4px; }
.amenities { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.amenities li { background: #eef6ef; border: 1px solid #cfe3d2; border-radius: 20px; padding: 6px 12px; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.specs { color: #444; margin: 4px 0; }
.discovery { margin: 28px 0; }
.discovery-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .discovery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .discovery-grid { grid-template-columns: repeat(4, 1fr); } }
.discovery-card { display: block; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; padding: 14px; color: inherit; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.discovery-card strong { display: block; }
.discovery-card span { display: block; color: #555; margin-top: 4px; }
.agent-card { display: block; }

/* Clean-interface update: compact search, contact buttons under the image */
.search-form { padding: 16px; }
.search-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.search-row label { margin: 0; }
.search-row .search-submit { margin: 0; }
.search-row .search-submit button { width: 100%; }
.more-filters { margin-top: 14px; border-top: 1px solid #eef2ee; padding-top: 10px; }
.more-filters summary { cursor: pointer; font-weight: 750; color: #073d1f; padding: 8px 0; }
.more-filters summary:hover { color: #0b5a2e; }
@media (max-width: 720px) {
  .search-row { grid-template-columns: 1fr; }
  .search-row .search-submit button { width: 100%; }
}
.card-actions { display: flex; gap: 10px; padding: 12px 14px; background: #ffffff; border-bottom: 1px solid #eef2ee; }
.card-actions .btn { flex: 1; width: auto; text-align: center; min-height: 44px; padding: 11px 10px; font-size: 15px; }
.btn-wa { background: #1da851; color: #ffffff; box-shadow: 0 3px 10px rgba(29, 168, 81, 0.25); }
.btn-wa:hover { background: #158a40; }
.btn-call { background: #d4a017; color: #073d1f; border: 1.5px solid #b98a0a; box-shadow: none; }
.btn-call:hover { background: #c2950e; color: #073d1f; }
.detail-actions { border: 1px solid #e0e7e0; border-radius: 12px; margin: 0 0 16px; box-shadow: 0 4px 16px rgba(7, 61, 31, 0.08); }
.agent-name { color: #5a6b5a; font-size: 14px; margin: 4px 0; }
.share-links { font-size: 14px; color: #5a6b5a; margin: 16px 0; }
.share-links a { color: #0b5a2e; }
.share-link { background: none; border: 0; padding: 0; box-shadow: none; min-height: auto; font-size: 14px; font-weight: 400; color: #0b5a2e; text-decoration: underline; cursor: pointer; }
.share-link:hover { background: none; }

/* Property gallery: large cover photo + clickable thumbnails */
.gallery .cover-photo { width: 100%; height: 420px; object-fit: cover; border-radius: 12px; display: block; }
.gallery .thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gallery .thumb { border: 2px solid #ddd; border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.gallery .thumb img { width: 110px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
@media (max-width: 720px) {
  .gallery .cover-photo { height: 280px; }
  .gallery .thumb img { width: 84px; height: 62px; }
}