: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:3px;
}
*{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;margin-bottom:18px}
.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}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(0,0,0,0.03);
  color: var(--brand);
  transform: none;
}

.btn-basket {
  background: #1f9f55;      /* closer to ✅ green */
  border-color: #1f9f55;
  color: #fff;
}

.btn-basket:hover {
  background: #188048;      /* slightly darker on hover */
  border-color: #188048;
}

/* 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))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grid-5{grid-template-columns:repeat(auto-fit,minmax(140px,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}
/* Accent rails */
.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)}
.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 */
.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%;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}
/* Facilities grid */
.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}
/* Responsive */
@media (max-width:720px){
  .flex-between{flex-direction:column;align-items:flex-start;gap:8px}
  .logo-img{height:64px}
}



/* Wallet tiles: image left, text right */
.wallet-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.wallet-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.wallet-coin {
  width: 96px;         /* cap so it never grows huge */
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
  border: 1px solid var(--accent);   /* thin orange border */
  border-radius: 50%;                /* optional: keeps it circular */
  padding: 2px;                      /* keeps border neat around coin */
}

.wallet-text {
  display: grid;
  gap: 2px;
  align-content: center;
}

.wallet-qty {
  font-weight: 700;
  font-size: 1.05rem;   /* match with name/sub for balanced look */
  line-height: 1.2;
  margin-bottom: 2px;
  color: var(--brand);
}

.wallet-name { font-weight: 700; }
.wallet-sub  { font-size: 0.92rem; color: var(--muted); }
.wallet-meta { font-size: 0.85rem; color: var(--muted); }

/* Mobile: allow stacking but keep coin capped */
@media (max-width: 640px) {
  .wallet-grid-2 { grid-template-columns: 1fr; }
  .wallet-card   { grid-template-columns: auto 1fr; }
  .wallet-coin   { width: 84px; }
}





/* === Global accent rails (applied to all cards site-wide) === */
.card{
  border-left: var(--accent-border) solid var(--brand);
  border-right: var(--accent-border) solid var(--brand);
}

/* Hero section */
.hero-centered {
  text-align: center;
}
.hero-centered h1 {
  margin-bottom: 6px;
}
.hero-centered p {
  margin: 0 0 4px 0;
}

.btn, .btn-sm {
  display: inline-flex;
  align-items: center;    /* vertical centering */
  justify-content: center; /* horizontal centering */
  line-height: 1;         /* avoids baseline offset */
}

/* Small button tweak */
.btn-sm {
  padding: 6px 12px;      /* slimmer for balance */
  font-size: 14px;        /* slightly smaller text */
}


/* === Compatibility for legacy base.html === */
.container{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.nav{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow);padding:10px 0;margin-bottom:18px}
.nav .logo{display:flex;gap:10px;align-items:center;color:var(--brand);font-weight:800;font-size:22px;text-decoration:none}
.nav .nav-links{display:flex;gap:12px;align-items:center}
.nav .nav-links a{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--brand);color:var(--brand);text-decoration:none;font-weight:700;box-shadow:var(--shadow);background:#fff}
.nav .nav-links a:hover{background:var(--brand);color:#fff;text-decoration:none}

/* Auto-capitalise short human-friendly inputs */
input[type="text"],
input[type="url"],
textarea {
  text-transform: capitalize;
}

/* Explicitly exclude long-form areas (like About Us) */
textarea.no-capitalize {
  text-transform: none;
}

/* Explicitly keep machine-like inputs neutral */
input[type="email"],
input[type="number"],
input[type="search"] {
  text-transform: none;
}

/* =======================================
   GLOBAL RESPONSIVE TABLES
   ======================================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border, #ddd);
  background: #fff;
}

/* Ensure all tables inside wrapper scroll instead of overflowing */
.table-wrapper > table {
  width: 100%;
  min-width: 720px; /* adjust if you want tighter mobile fit */
  border-collapse: collapse;
}

/* Optional styling for table cells */
.table-wrapper th,
.table-wrapper td {
  padding: 10px 12px;
  white-space: nowrap; /* stops text wrapping awkwardly */
  vertical-align: middle;
}

@media (max-width: 600px) {
  .table-wrapper > table {
    min-width: 520px;
  }
  .table-wrapper th,
  .table-wrapper td {
    padding: 8px 10px;
  }
}

/* Make all tables globally responsive */
table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.badge-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}
.pill{
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  line-height:1;
  white-space:nowrap;
}

/* Available pill */
.pill.is-yes {
  background: #EDE8FF;        /* same soft lavender background as before */
  color: #000;                /* black text */
  border: 1px solid #D8CCFF;  /* matching border */
  font-weight: normal;        /* no bold */
}

/* Unavailable pill */
.pill.is-no {
  background: #F8F8F8;        /* light neutral background */
  color: #000;                /* black text */
  border: 1px solid #E0E0E0;  /* subtle border */
  font-weight: normal;        /* no bold */
}


/* ===========================
   Collapsible Filters Bar
   =========================== */
.filters-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
}
@media (max-width: 920px) {
  .filters-wrap { position: static; }
}

.filters-bar {
  padding: 12px 14px;
  margin: 10px 0 12px;
  background: #fff;
  border-left: var(--accent-border) solid var(--brand);
  border-right: var(--accent-border) solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease;
}

.filters-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.filters-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Purple “pills” like trial site */
.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f2ecff;        /* same lavender tone */
  color: var(--brand);        /* brand purple text */
  font-size: 13px;
  font-weight: 500;
}

/* Hidden panel until expanded */
.filters-panel {
  display: none;
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.filters-wrap[data-open="true"] .filters-panel {
  display: block;
}

/* Filters grid layout */
.filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .filters-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 920px) {
  .filters-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 560px) {
  .filters-grid { grid-template-columns: 1fr; }
}

/* Filter action buttons */
.filters-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}


.btn-orange-red {
  background-color: #e14b3f;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.25s ease;
}

.btn-orange-red:hover {
  background-color: #c63e34;
  color: white;
}


/* 8-line clamp for room-card descriptions */
.desc-clamp {
  position: relative;
  margin-top: 8px;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.desc-clamp .readmore-tape {
  position: absolute;
  bottom: 0;
  right: 0;

  padding-left: 8px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 40%);
  font-weight: 600;
  color: var(--brand);
}

/* Favourites (heart) state */
.fav-toggle__icon--active {
  color: var(--brand); /* or var(--accent) if you prefer orange */
}

/* FORCE basket button to stay green always */
.nav-links .btn-basket,
.nav-links .btn-basket:link,
.nav-links .btn-basket:visited,
.nav-links .btn-basket:hover,
.nav-links .btn-basket:active,
.nav-links .btn-basket:focus {
  background: #1f9f55 !important;
  border-color: #1f9f55 !important;
  color: #fff !important;
}