/* =========================================================
   Malazi theme — Bootstrap 5.3 overrides + components
   Palette: ocean teal, lagoon, savanna gold, sunset coral, sand
   ========================================================= */
:root {
  --mz-ocean: #0B4F4A; --mz-ocean-d: #073640; --mz-lagoon: #13A3A1;
  --mz-gold: #F2A33A; --mz-coral: #E8633A; --mz-coral-d: #CF5129;
  --mz-cream: #FBF6EE; --mz-sand: #F3E9D8; --mz-ink: #152028; --mz-muted: #5F6B73; --mz-line: #E6DCCB;
  --mz-accent: var(--mz-ocean);
  --mz-radius: 16px; --mz-shadow: 0 10px 30px rgba(11, 79, 92, .12);

  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bs-body-bg: var(--mz-cream);
  --bs-body-color: var(--mz-ink);
  --bs-secondary-color: var(--mz-muted);
  --bs-border-color: var(--mz-line);
  --bs-primary: #0B4F4A; --bs-primary-rgb: 11, 79, 74;
  --bs-link-color: #0B4F4A; --bs-link-hover-color: #E8633A; --bs-link-color-rgb: 11, 79, 74;
  --bs-border-radius: 12px; --bs-border-radius-lg: 16px;
}
h1, h2, h3, .font-serif { font-family: 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.text-muted { color: var(--mz-muted) !important; }
.bg-sand { background: var(--mz-sand); }
.text-coral { color: var(--mz-coral) !important; }
.text-ocean { color: var(--mz-ocean) !important; }

/* Buttons */
.btn { border-radius: 999px; font-weight: 600; padding: .65rem 1.25rem; }
.btn-sm { padding: .4rem .9rem; }
.btn-coral { --bs-btn-color:#fff; --bs-btn-bg: var(--mz-coral); --bs-btn-border-color: var(--mz-coral);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--mz-coral-d); --bs-btn-hover-border-color: var(--mz-coral-d);
  --bs-btn-active-bg: var(--mz-coral-d); --bs-btn-active-color:#fff; }
.btn-ocean { --bs-btn-color:#fff; --bs-btn-bg: var(--mz-accent); --bs-btn-border-color: var(--mz-accent);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--mz-ocean-d); --bs-btn-hover-border-color: var(--mz-ocean-d);
  --bs-btn-active-bg: var(--mz-ocean-d); --bs-btn-active-color:#fff; }
.btn-light-outline { background:#fff; border:1.5px solid var(--mz-line); }
.btn-light-outline:hover { border-color: var(--mz-ocean); }

/* Forms */
.form-label { font-size: .75rem; font-weight: 700; color: var(--mz-muted); text-transform: uppercase; letter-spacing: .05em; }
.form-control, .form-select { border: 1.5px solid var(--mz-line); padding: .7rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--mz-lagoon); box-shadow: 0 0 0 .2rem rgba(19,163,161,.15); }
.form-range::-webkit-slider-thumb { background: var(--mz-coral); }
.form-range::-moz-range-thumb { background: var(--mz-coral); }

/* Chips & cards */
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; background: var(--mz-sand); color: var(--mz-ocean); }
.chip-ok { background:#E0F3EA; color:#2E9E6A; } .chip-warn { background:#FCEEDD; color:#D9822B; } .chip-bad { background:#F8E1DF; color:#C8463D; }
.mz-card { background:#fff; border-radius: var(--mz-radius); box-shadow: var(--mz-shadow); border:0; }
.eyebrow { color: var(--mz-coral); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; }
.stars { color: var(--mz-gold); letter-spacing: 1px; }

/* Navbar */
.mz-nav { transition: background .3s, box-shadow .3s; padding: .9rem 0; }
.mz-nav .navbar-brand { font-family:'Fraunces',serif; font-weight:700; font-size:1.55rem; display:flex; align-items:center; gap:10px; }
.mz-nav .nav-link { font-weight:500; }
.mz-nav.is-solid { background: rgba(251,246,238,.96); backdrop-filter: blur(8px); box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.mz-nav.is-transparent:not(.is-solid) .navbar-brand,
.mz-nav.is-transparent:not(.is-solid) .nav-link { color:#fff; }
.mz-nav.is-transparent:not(.is-solid) .navbar-toggler { filter: invert(1); }
.lang-switch { display:inline-flex; background: var(--mz-sand); border-radius:999px; padding:3px; }
.mz-nav.is-transparent:not(.is-solid) .lang-switch { background: rgba(255,255,255,.2); }
.lang-switch a { padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:700; text-decoration:none; color: var(--mz-ocean); }
.mz-nav.is-transparent:not(.is-solid) .lang-switch a { color:#fff; }
.lang-switch a.active { background: var(--mz-gold); color: var(--mz-ink) !important; }
@media (max-width: 991px) { .mz-nav .navbar-collapse { background:#fff; border-radius:16px; padding:12px; margin-top:10px; box-shadow: var(--mz-shadow);} .mz-nav .navbar-collapse .nav-link { color: var(--mz-ink) !important; } }

/* Hero slider */
.hero { position:relative; height: 92vh; min-height: 600px; overflow:hidden; color:#fff; }
.hero-slide { position:absolute; inset:0; opacity:0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity:1; }
.hero-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slide.active img { animation: mz-kenburns 9s ease-out forwards; }
@keyframes mz-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-slide.active img { animation:none; } .hero-slide { transition:none; } }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(7,54,64,.55) 0%, rgba(7,54,64,.15) 40%, rgba(7,54,64,.78) 100%); }
.hero-text { position:absolute; z-index:2; left:0; right:0; top:25%; }
.hero-caption { position:absolute; opacity:0; transform: translateY(16px); transition: .6s; max-width: 760px; }
.hero-caption.show { opacity:1; transform:none; position:relative; }
.hero-caption .tag { display:inline-block; background: rgba(242,169,59,.95); color: var(--mz-ink); padding:6px 14px; border-radius:999px; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.hero-caption h1 { font-size: clamp(2.3rem, 5.5vw, 4.4rem); line-height:1.05; margin:16px 0; }
.hero-caption p { font-size:1.15rem; max-width:560px; opacity:.92; }
.hero-controls { position:absolute; z-index:3; bottom:150px; right:24px; display:flex; gap:10px; align-items:center; }
.hero-controls .arrow { width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); color:#fff; }
.hero-controls .arrow:hover { background: var(--mz-gold); color: var(--mz-ink); }
.hero-dots { display:flex; gap:8px; margin-right:12px; }
.hero-dots button { width:10px; height:10px; border-radius:999px; border:0; background: rgba(255,255,255,.5); transition:.3s; padding:0; }
.hero-dots button.active { width:34px; background: var(--mz-gold); }
.hero-location { position:absolute; z-index:3; bottom:150px; left:24px; font-size:.85rem; background: rgba(0,0,0,.3); padding:6px 12px; border-radius:999px; backdrop-filter: blur(4px); }
@media (max-width: 600px) { .hero-controls { bottom:130px; } .hero-location { display:none; } }

/* Search card */
.search-card { position:relative; z-index:5; margin-top:-110px; padding:22px; }
.search-tabs .nav-link { border-radius:999px; font-weight:600; color: var(--mz-muted); padding:.5rem 1rem; }
.search-tabs .nav-link.active { background: var(--mz-ocean); color:#fff; }

/* Sections */
.section { padding: 80px 0; }
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.stat { padding:22px; border-radius: var(--mz-radius); background:#fff; border:1px solid var(--mz-line); height:100%; }
.stat b { font-family:'Fraunces',serif; font-size:2.1rem; color: var(--mz-ocean); display:block; }

.cat-tile { position:relative; display:block; border-radius: var(--mz-radius); overflow:hidden; height:220px; color:#fff; transition:.3s; }
.cat-tile:hover { transform: translateY(-4px); color:#fff; }
.cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.6s; }
.cat-tile:hover img { transform: scale(1.08); }
.cat-tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 35%, rgba(7,54,64,.85)); }
.cat-tile .label { position:absolute; bottom:16px; left:16px; z-index:2; }
.cat-tile h3 { font-size:1.3rem; margin:0; }

.prop-card { overflow:hidden; transition:.3s; height:100%; display:block; color: inherit; text-decoration:none; }
.prop-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11,79,92,.18); color: inherit; }
.prop-card .thumb { position:relative; height:200px; overflow:hidden; background: var(--mz-sand); }
.prop-card .thumb img { width:100%; height:100%; object-fit:cover; }
.prop-card .thumb .chip { position:absolute; top:12px; left:12px; background:#fff; }
.prop-card .body { padding:16px 18px 18px; }
.prop-card h3 { font-size:1.15rem; margin:0; }
.price { font-weight:700; color: var(--mz-ocean); }
.price small { font-weight:500; color: var(--mz-muted); }

.step { padding:26px; border-radius: var(--mz-radius); background:#fff; position:relative; height:100%; }
.step .num { position:absolute; top:-16px; left:22px; width:36px; height:36px; border-radius:50%; background: var(--mz-gold); display:grid; place-items:center; font-weight:800; font-family:'Fraunces',serif; }
.step i { font-size:1.8rem; color: var(--mz-ocean); }

.section-dark { background: var(--mz-ocean-d); color:#fff; }
.section-dark .text-muted { color:#A9C3C6 !important; }
.pkg { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--mz-radius); padding:24px 20px; display:flex; flex-direction:column; height:100%; }
.pkg.featured { background: linear-gradient(160deg, var(--mz-gold), var(--mz-coral)); color: var(--mz-ink); border:0; }
.pkg.featured .text-muted { color: rgba(21,32,40,.75) !important; }
.pkg .amount { font-family:'Fraunces',serif; font-size:1.7rem; margin:10px 0 2px; }
.pkg ul { list-style:none; padding:0; margin:16px 0 20px; font-size:.88rem; flex:1; }
.pkg li { padding:5px 0 5px 22px; position:relative; }
.pkg li::before { content:"✓"; position:absolute; left:0; color: var(--mz-gold); font-weight:800; }
.pkg.featured li::before { color: var(--mz-ocean-d); }

.cta { border-radius:28px; padding:48px; background: linear-gradient(120deg, var(--mz-lagoon), var(--mz-ocean)); color:#fff; }
.cta .feature { background: rgba(255,255,255,.14); padding:16px; border-radius:14px; font-weight:600; }
.pay-badge { padding:10px 18px; border-radius:12px; background:#fff; border:1px solid var(--mz-line); font-weight:700; }

footer.mz-footer { background: var(--mz-ink); color:#C9D2D6; padding:56px 0 28px; font-size:.92rem; }
footer.mz-footer h5 { color:#fff; font-size:1rem; }
footer.mz-footer a { color:#C9D2D6; text-decoration:none; } footer.mz-footer a:hover { color: var(--mz-gold); }

/* Inner pages */
.page { padding-top: 110px; padding-bottom: 60px; min-height: 80vh; }
.filters { padding:22px; position:sticky; top:96px; }
.list-row { display:grid; grid-template-columns: 260px 1fr auto; gap:18px; overflow:hidden; color: inherit; text-decoration:none; transition:.2s; }
.list-row:hover { box-shadow: 0 16px 40px rgba(11,79,92,.18); color: inherit; }
.list-row img { width:100%; height:100%; min-height:170px; object-fit:cover; }
.list-row .side { padding:16px 18px; text-align:right; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
@media (max-width: 767px) { .list-row { grid-template-columns: 1fr; } .list-row .side { align-items:flex-start; text-align:left; } .list-row .info { padding: 0 16px; } }

.gallery { display:grid; grid-template-columns: 2fr 1fr; grid-template-rows: 200px 200px; gap:10px; border-radius: var(--mz-radius); overflow:hidden; }
.gallery figure { position:relative; margin:0; overflow:hidden; }
.gallery figure:first-child { grid-row: span 2; }
.gallery img { width:100%; height:100%; object-fit:cover; }
.gallery figcaption { position:absolute; bottom:10px; left:10px; background: rgba(0,0,0,.5); color:#fff; padding:3px 10px; border-radius:999px; font-size:.75rem; }
@media (max-width: 767px) { .gallery { grid-template-columns: 1fr; grid-template-rows: 220px; } .gallery figure:not(:first-child) { display:none; } }

.room-row { display:grid; grid-template-columns: 150px 1fr auto; gap:16px; align-items:center; padding:12px; border:1px solid var(--mz-line); border-radius:14px; background:#fff; margin-bottom:12px; }
.room-row img { width:150px; height:100px; object-fit:cover; border-radius:10px; }
@media (max-width: 575px) { .room-row { grid-template-columns: 1fr; } .room-row img { width:100%; } }

.auth-wrap { min-height: 100vh; display:grid; grid-template-columns: 1fr 1fr; }
.auth-art { position:relative; overflow:hidden; }
.auth-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.auth-art::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,54,64,.2), rgba(7,54,64,.8)); }
.auth-art .quote { position:absolute; z-index:2; bottom:48px; left:48px; right:48px; color:#fff; }
.auth-form { display:flex; align-items:center; justify-content:center; padding: 110px 24px 40px; }
.auth-form .inner { width: min(440px, 100%); }
@media (max-width: 991px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display:none; } }

.timeline { display:flex; overflow-x:auto; gap:0; padding:6px 0; }
.timeline .st { flex:1; min-width:90px; text-align:center; position:relative; font-size:.75rem; }
.timeline .st .dot { width:30px; height:30px; border-radius:50%; margin:0 auto 4px; display:grid; place-items:center; font-weight:700; background:#EFE7DA; color: var(--mz-muted); position:relative; z-index:1; }
.timeline .st.done .dot { background: var(--mz-accent); color:#fff; }
.timeline .st:not(:last-child)::after { content:""; position:absolute; top:14px; left:50%; width:100%; height:3px; background:#EFE7DA; }
.timeline .st.done:not(:last-child)::after { background: var(--mz-accent); }

/* Business registration: selectable package cards */
.pkg-option { display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--mz-line); border-radius:14px; padding:14px 16px; background:#fff; cursor:pointer; transition:.15s; }
.pkg-option:hover { border-color: var(--mz-lagoon); }
.pkg-option .form-check-input { margin-top:4px; flex:none; }
.pkg-option:has(input:checked) { border-color: var(--mz-coral); background:#FFF6F1; box-shadow: 0 0 0 3px rgba(232,99,58,.15); }
.pkg-option .form-check-input:checked { background-color: var(--mz-coral); border-color: var(--mz-coral); }
[data-pkg][hidden] { display:none !important; }

/* =================== Dashboards =================== */
.dash { display:grid; grid-template-columns: 250px 1fr; min-height:100vh; padding-top:72px; }
.dash-side { background: var(--mz-accent); color:#fff; padding:22px 14px; position:sticky; top:72px; height: calc(100vh - 72px); overflow:auto; }
.dash-biz { display:flex; gap:10px; align-items:center; padding:6px 10px 18px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:12px; min-width:0; }
.dash-biz .lg { width:42px; height:42px; flex:none; border-radius:12px; background: var(--mz-gold); color: var(--mz-ink); display:grid; place-items:center; font-weight:800; font-family:'Fraunces',serif; font-size:1.2rem; }
.dash-menu a { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; margin-bottom:2px; color:#fff; opacity:.85; text-decoration:none; }
.dash-menu a:hover { background: rgba(255,255,255,.1); opacity:1; }
.dash-menu a.active { background: rgba(255,255,255,.2); opacity:1; font-weight:600; }
.dash-main { padding:28px 32px 60px; min-width:0; }
.dash-main h1 { font-size:1.8rem; }
.dash-banner { padding:12px 16px; border-radius:14px; background:#FFF4E2; border:1px solid #F6D9A8; }
.kpi { padding:18px 20px; background:#fff; border-radius: var(--mz-radius); box-shadow: var(--mz-shadow); height:100%; }
.kpi .lbl { font-size:.8rem; color: var(--mz-muted); font-weight:600; }
.kpi .val { font-family:'Fraunces',serif; font-size:1.7rem; margin:4px 0; }
.kpi .sub { font-size:.8rem; font-weight:700; color:#2E9E6A; }
.panel { background:#fff; border-radius: var(--mz-radius); box-shadow: var(--mz-shadow); padding:20px 22px; height:100%; }
.panel h2 { font-size:1.1rem; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.panel .table { --bs-table-bg: transparent; font-size:.9rem; }
.panel .table th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--mz-muted); font-weight:700; }
.room-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap:8px; }
.room-tile { border-radius:10px; padding:10px 6px; text-align:center; color:#fff; font-weight:700; font-size:.9rem; border:0; width:100%; }
.room-tile small { display:block; font-weight:500; font-size:.68rem; opacity:.9; }
.rs-Vacant { background:#13A3A1; } .rs-Occupied { background:#0B4F4A; } .rs-OnHold { background:#F2A93B; color:#152028; } .rs-Maintenance { background:#E8633A; }
.swatch { width:40px; height:40px; border-radius:12px; border:3px solid #fff; box-shadow:0 0 0 1px var(--mz-line); cursor:pointer; }
.swatch-input:checked + .swatch { box-shadow:0 0 0 3px var(--mz-ink); }
.svc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
.svc-grid label { border:1.5px solid var(--mz-line); border-radius:14px; padding:14px 10px; text-align:center; font-weight:600; cursor:pointer; background:#fff; }
.svc-grid label:has(input:checked) { border-color: var(--mz-coral); color: var(--mz-coral); background:#FFF6F1; }
.svc-grid input { display:none; }
.svc-grid i { display:block; font-size:1.5rem; margin-bottom:4px; }
.countdown { font-family:'Fraunces',serif; font-size:2rem; color: var(--mz-coral); }
@media print {
  .mz-nav, .dash-side, .no-print { display:none !important; }
  .dash { display:block; padding:0; } .dash-main { padding:0; } .panel { box-shadow:none; }
}
@media (max-width: 991px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { position:static; height:auto; padding:10px; }
  .dash-biz { display:none; }
  .dash-menu { display:flex; overflow-x:auto; gap:4px; }
  .dash-menu a { white-space:nowrap; margin:0; }
  .dash-main { padding:20px 14px 50px; }
}

/* Contact (home page) */
.contact-band { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; border-radius:18px;
  background: linear-gradient(110deg, var(--mz-ocean), var(--mz-lagoon)); color:#fff; box-shadow: var(--mz-shadow); }
.contact-ico { width:48px; height:48px; border-radius:14px; background: var(--mz-gold); color: var(--mz-ink); display:grid; place-items:center; font-size:1.4rem; flex:none; }
.btn-whatsapp { --bs-btn-color:#fff; --bs-btn-bg:#25D366; --bs-btn-border-color:#25D366; --bs-btn-hover-bg:#1EBE5A; --bs-btn-hover-border-color:#1EBE5A; --bs-btn-hover-color:#fff; }
.call-fab { position:fixed; right:18px; bottom:18px; z-index:1040; display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  background: var(--mz-coral); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 10px 24px rgba(232,99,58,.35); transition:.2s; }
.call-fab:hover { color:#fff; transform: translateY(-2px); background: var(--mz-coral-d); }
@media (max-width: 575px) { .call-fab span { display:none; } .call-fab { padding:14px; } }

/* MalaziConnect brand: light logo on light backgrounds, white logo over the hero photo */
.brand-logo { height:40px; width:auto; display:block; }
.brand-on-dark { display:none; }
.mz-nav.is-transparent:not(.is-solid) .brand-on-light { display:none; }
.mz-nav.is-transparent:not(.is-solid) .brand-on-dark { display:block; }
@media (max-width: 400px) { .brand-logo { height:32px; } }

/* Notifications: bell + dashboard quick actions */
.notif-btn { width:38px; height:38px; padding:0; display:inline-grid; place-items:center; }
.notif-btn .bi-bell-fill { color: var(--mz-ocean); }
.notif-badge { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background: var(--mz-gold);
  color: var(--mz-ink); font-size:.7rem; font-weight:800; display:grid; place-items:center; border:2px solid #fff; }
.notif-badge.urgent { background: var(--mz-coral); color:#fff; animation: mz-pulse 2s infinite; }
@keyframes mz-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(232,99,58,.5); } 50% { box-shadow:0 0 0 6px rgba(232,99,58,0); } }
@media (prefers-reduced-motion: reduce) { .notif-badge.urgent { animation:none; } }
.notif-menu { width: min(360px, 92vw); }
.notif-item { display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; color: var(--mz-ink); text-decoration:none; font-size:.9rem; }
.notif-item:hover { background: var(--mz-sand); color: var(--mz-ink); }
.notif-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:#E3F4F3; color: var(--mz-ocean); }
.notif-item.tone-bad .notif-ico { background:#F8E1DF; color:#C8463D; }
.notif-item.tone-warn .notif-ico { background:#FCEEDD; color:#D9822B; }
.quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.qa { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; font-weight:600; font-size:.88rem; text-decoration:none;
  background:#E3F4F3; color: var(--mz-ocean); border:1px solid transparent; transition:.15s; }
.qa:hover { transform: translateY(-1px); box-shadow: var(--mz-shadow); }
.qa.tone-bad { background:#F8E1DF; color:#B23A30; border-color:#F1C7C2; }
.qa.tone-warn { background:#FCEEDD; color:#A8601A; border-color:#F6D9A8; }
.mz-nav.is-transparent:not(.is-solid) .notif-btn { background: rgba(255,255,255,.9); }