/* ===== Root Variables ===== */
:root{
  --brand:#5E2B97;
  --brand-light:#7D3FC6;
  --accent:#FF6F61; /* coral */
  --accent-dark:#e85b4d;
  --bg:#f9f7ff;
  --text:#333;
  --muted:#666;
  --border:#ddd;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,0.08);
  --wrap:1100px;

  /* Accent border thickness */
  --accent-border:3px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
h1,h2,h3{color:var(--brand); margin:0 0 10px}
p{margin:0 0 12px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}
.flex-between{display:flex; justify-content:space-between; align-items:center}
.inline-actions{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#f2ecff; border:1px solid var(--border); font-size:12px; margin-right:6px}
.help{color:var(--muted); font-size:13px}

/* ===== Navbar ===== */
.navbar{background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:10px 0}
.logo-img{height:84px; width:auto; display:block}
.nav-links{display:flex; gap:12px; align-items:center}

/* ===== Buttons ===== */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid transparent; background:var(--brand); color:#fff;
  font-weight:600; transition:.15s ease; box-shadow:var(--shadow)
}
.btn:hover{background:var(--brand-light); transform:translateY(-1px); text-decoration:none}
.btn-outline{background:#fff; color:var(--brand); border:1px solid var(--brand)}
.btn-outline:hover{background:var(--brand); color:#fff}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:var(--accent-dark)}
.btn-admin{background:#d62828}
.btn-admin:hover{background:#b51f1f}

/* ===== Cards & Forms ===== */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; margin:18px 0
}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex; flex-direction:column}
.field .label{font-weight:600; margin-bottom:6px}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{
  padding:10px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:#fff
}

/* Inline labels variant for compact search form */
.form-compact-labels .label-inline{
  font-weight:600; display:inline-block; margin-bottom:6px; margin-right:10px
}

/* Preferences row spacing */
.prefs-row{display:flex; gap:18px; flex-wrap:wrap}

/* Center the hero intro text */
.hero-centered{text-align:center}

/* Accent helpers */
.card--accent-l{ border-left: var(--accent-border) solid var(--brand); }
.card--accent-r{ border-right: var(--accent-border) solid var(--brand); }
.card--accent-lr{
  border-left: var(--accent-border) solid var(--brand);
  border-right: var(--accent-border) solid var(--brand);
}

/* Normalize old inline 6px styles to match new thickness */
.card[style*="border-left:6px"]{ border-left: var(--accent-border) solid var(--brand) !important; }
.card[style*="border-right:6px"]{ border-right: var(--accent-border) solid var(--brand) !important; }

/* ===== Tables ===== */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border:1px solid var(--border); text-align:left}
.table th{background:#f2ecff}

/* ===== Flash ===== */
.flash{padding:10px 12px; border-radius:10px; margin:10px 0; font-weight:600; border:1px solid}
.flash.ok,.flash.success{background:#e5f9f5; color:#0f5132; border-color:#a7e3d4}
.flash.error{background:#ffe5e5; color:#7f1d1d; border-color:#f7caca}

/* ===== Footer ===== */
.footer{background:#fff; border-top:1px solid var(--border); padding:14px 0; color:#666}
.small{font-size:12px}

/* ===== Search inline (legacy small filter bars) ===== */
.search-inline{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0}
.search-inline select{min-width:140px}
.check{display:flex; align-items:center; gap:6px}

/* ===== City Grid ===== */
.city-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}
.city-card{display:block; text-decoration:none}
.city-thumb{
  position:relative;
  width:100%;
  padding-top:100%; /* square */
  background-size:cover;
  background-position:center;
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.city-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.45) 100%);
}
.city-name{
  position:absolute; right:10px; bottom:8px;
  z-index:2; color:#fff; font-weight:700; font-size:16px;
  padding:4px 8px; border-radius:8px;
  background:rgba(0,0,0,0.25); backdrop-filter:saturate(1.2);
}
.city-thumb--placeholder{
  background:linear-gradient(135deg, #ede8ff, #f8f6ff);
  display:flex; align-items:center; justify-content:center;
}
.city-initial{
  position:absolute; font-size:42px; font-weight:800; color:#c6b6ff; opacity:.45;
}

/* ===== Responsive ===== */
@media (max-width:720px){
  .flex-between{flex-direction:column; align-items:flex-start; gap:8px}
  .logo-img{height:64px}
}





####### added by matthew for public house page ############

/* Facilities grid (icon + label, 3 columns desktop, 1–2 on mobile) */
.facilities-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px 18px;
}
@media (max-width: 900px){ .facilities-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .facilities-grid{ grid-template-columns: 1fr; } }

.facility{
  display:flex; align-items:center; gap:10px;
  font-size:1.05rem; line-height:1.4;
}
.facility .ico{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  font-size:20px;
}

/* Bills list */
.bills-list{ margin:0; padding-left:18px; line-height:1.5; }