/* ============================================================
   TrustEmpire Brokers Network — WhatsApp-style dedicated page
   Reuses the TrustEmpire brand palette for headers/CTAs, and a
   WhatsApp-style chat aesthetic for the deal feed itself.
   ============================================================ */

:root{
  --wa-dark:#075E54;
  --wa-mid:#128C7E;
  --wa-green:#25D366;
  --wa-bg:#ECE5DD;
  --wa-bubble-out:#DCF8C6;
  --wa-bubble-in:#FFFFFF;
  --wa-req:#D9F1FF;
  --wa-req-accent:#0284c7;
  --navy:#0b1f45;
  --blue:#2563eb;
  --amber:#f59e0b;
  --muted:#64748b;
  --r-md:10px;
  --r-lg:16px;
  --shadow-md:0 4px 16px rgba(11,31,69,0.10);
}

*{box-sizing:border-box;}
body.brokers-body{
  margin:0;
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  background:var(--wa-bg);
  color:#111b21;
}

/* ── Top bar (matches TrustEmpire nav so it feels connected) ── */
.bk-topbar{
  background:var(--navy);
  color:#fff;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.bk-topbar-left .bk-brand{font-weight:700;font-size:.9rem;letter-spacing:.02em;}
.bk-topbar-left .bk-brand em{color:#25D366;font-style:normal;}
.bk-topbar-right{display:flex;gap:8px;flex-wrap:wrap;}
.bk-topbar a.bk-back{
  color:#cfe0ff;
  text-decoration:none;
  font-size:.88rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.bk-topbar a.bk-back:hover{color:#fff;}
.bk-topbar .bk-download{
  color:#fff;
  text-decoration:none;
  font-size:.82rem;
  background:rgba(255,255,255,0.12);
  padding:6px 12px;
  border-radius:20px;
  font-family:inherit;
  border:none;
  cursor:pointer;
}
.bk-topbar .bk-download:hover{background:rgba(255,255,255,0.22);}

/* ── Secondary-site promo card ── */
.hni-promo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  text-decoration:none;
  background:linear-gradient(90deg,#0b1f45,#132a5e);
  color:#fff;padding:14px 20px;margin:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.hni-promo-text{display:flex;flex-direction:column;gap:2px;max-width:640px;}
.hni-promo-text strong{font-size:.85rem;color:#93c5fd;}
.hni-promo-text span{font-size:.76rem;color:#cbd5e1;line-height:1.4;}
.hni-promo-cta{
  flex-shrink:0;background:rgba(255,255,255,0.12);padding:7px 14px;border-radius:20px;
  font-size:.78rem;font-weight:700;white-space:nowrap;
}
.hni-promo:hover .hni-promo-cta{background:rgba(255,255,255,0.22);}

/* ── Toast ── */
.bk-toast-container{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center;}
.bk-toast{
  background:#0b1f45;color:#fff;padding:10px 18px;border-radius:24px;font-size:.82rem;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);opacity:1;transition:opacity .3s,transform .3s;
}
.bk-toast.success{background:#075E54;}
.bk-toast.error{background:#991b1b;}
.bk-toast.out{opacity:0;transform:translateY(8px);}


/* ── Unified single-line top bar (white background) ── */
.top-bar-unified{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#ffffff; color:#0b1f45; padding:10px 20px;
  border-bottom:1px solid #e2e8f0;
}
.tbu-brand{
  margin:0; font-size:.95rem; font-weight:700; letter-spacing:.01em; color:#0b1f45;
  white-space:nowrap; flex-shrink:0;
}
.tbu-brand em{ color:#128C7E; font-style:normal; }
.tbu-links{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.tbu-actions{ display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; margin-left:auto; }
.tbu-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:20px; font-size:.78rem; font-weight:600;
  background:#f1f5fd; color:#0b1f45; border:1px solid #dbe3f0; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.tbu-btn:hover{ background:#e2e8f0; }
.ps-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:20px; font-size:.78rem; font-weight:700;
  text-decoration:none; background:#f1f5fd; color:#334155;
  border:1px solid #dbe3f0; white-space:nowrap;
}
.ps-btn:hover{ background:#e2e8f0; }
.ps-btn.active{ background:var(--wa-green); color:#fff; border-color:var(--wa-green); }
@media (max-width:760px){
  .top-bar-unified{ padding:10px 14px; }
  .tbu-links{ order:3; width:100%; }
}

/* ── Compact platform switcher (legacy, kept for reference) ── */
.platform-switch{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--navy); color:#fff; padding:10px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.ps-brand{
  margin:0; font-size:.95rem; font-weight:700; letter-spacing:.01em; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw;
}
.ps-links{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── WhatsApp-style group header ── */
.wa-header{
  background:var(--wa-dark);
  color:#fff;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.wa-group-icon{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--wa-mid),var(--wa-dark));
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.25);
}
.wa-header-text{flex:1;min-width:180px;}
.wa-header-text h1{margin:0;font-size:1.15rem;font-weight:700;}
.wa-header-text p{margin:2px 0 0;font-size:.8rem;color:#cfe8e3;}
.wa-free-badge{
  background:var(--wa-green);
  color:#fff;
  font-weight:700;
  font-size:.75rem;
  padding:5px 12px;
  border-radius:20px;
  white-space:nowrap;
}

/* ── City selector chips ── */
.city-bar{
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  padding:10px 16px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.city-bar::-webkit-scrollbar{height:4px;}
.city-chip{
  display:inline-block;
  padding:7px 16px;
  border-radius:20px;
  background:#f1f5fd;
  color:var(--navy);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  flex-shrink:0;
}
.city-chip.active{
  background:var(--wa-dark);
  color:#fff;
}

/* ── Broker directory strip (WhatsApp "group members" style) ── */
.broker-strip{
  background:#fff;
  padding:14px 16px 16px;
  border-bottom:1px solid #e2e8f0;
}
.broker-strip h3{margin:0 0 10px;font-size:.9rem;color:var(--navy);display:flex;align-items:center;gap:8px;}
.broker-row{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}
.broker-avatar-wrap{
  flex-shrink:0;text-align:center;cursor:pointer;width:68px;
}
.broker-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.1rem;
  overflow:hidden;
  border:2px solid #fff;
  box-shadow:0 0 0 2px var(--wa-green);
  margin:0 auto 4px;
}
.broker-avatar img{width:100%;height:100%;object-fit:cover;}
.broker-avatar-wrap span{font-size:.68rem;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.broker-add-btn{
  flex-shrink:0;width:56px;height:56px;border-radius:50%;
  border:2px dashed #94a3b8;background:#fff;color:#64748b;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  cursor:pointer;margin:0 auto;
}

/* ── Matching deals rotator (highlighted, top) ── */
.match-zone{
  margin:16px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fff7e6,#fff2cc);
  border:1.5px solid #f2c94c;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.match-zone-head{
  background:linear-gradient(90deg,var(--amber),#d97706);
  color:#fff;
  padding:9px 16px;
  font-weight:700;
  font-size:.85rem;
  display:flex;
  align-items:center;
  gap:8px;
}
.match-zone-body{padding:14px 16px;min-height:96px;}
.match-pair{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;animation:fadeMatch .5s ease;}
@keyframes fadeMatch{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.match-card{
  flex:1;min-width:200px;
  background:#fff;border-radius:10px;padding:10px 12px;
  border-left:4px solid var(--wa-mid);
}
.match-card.req{border-left-color:var(--wa-req-accent);}
.match-card .mc-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--wa-mid);}
.match-card.req .mc-tag{color:var(--wa-req-accent);}
.match-card .mc-name{font-weight:700;font-size:.88rem;color:var(--navy);margin:2px 0;}
.match-card .mc-detail{font-size:.78rem;color:#475569;}
.match-arrow{
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--amber);flex-shrink:0;
}
.match-empty{color:#92400e;font-size:.85rem;text-align:center;padding:20px 0;}
.match-dots{display:flex;justify-content:center;gap:6px;margin-top:10px;}
.match-dots span{width:6px;height:6px;border-radius:50%;background:#e5c158;}
.match-dots span.on{background:#d97706;}

/* ── Advertisement blocks ── */
.ad-block{
  position:relative;
  margin:16px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#f1f5fd repeating-linear-gradient(45deg,#e8eef8,#e8eef8 10px,#f1f5fd 10px,#f1f5fd 20px);
  min-height:90px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #b6c6e8;
}
.ad-block img{width:100%;display:block;max-height:220px;object-fit:cover;}
.ad-block .ad-placeholder{color:#7c8bab;font-size:.8rem;text-align:center;padding:24px;}
.ad-edit-btn{
  position:absolute;top:8px;right:8px;
  background:rgba(11,31,69,0.75);
  color:#fff;border:none;border-radius:6px;
  padding:5px 10px;font-size:.72rem;cursor:pointer;
}

/* ── Two-column deal feed ── */
.deal-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 16px 16px;
}
@media (max-width:760px){
  .deal-columns{grid-template-columns:1fr;}
}
.deal-col{
  background:var(--wa-bg);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;
}
.deal-col-head{
  padding:12px 14px;
  font-weight:700;
  font-size:.9rem;
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
}
.deal-col-head.avail{background:var(--wa-dark);}
.deal-col-head.req{background:var(--wa-req-accent);}
.deal-col-head .count-pill{
  background:rgba(255,255,255,0.25);
  border-radius:12px;padding:1px 9px;font-size:.72rem;
}
.deal-viewport{
  height:480px;
  overflow:hidden;
  position:relative;
  padding:10px;
}
.deal-viewport:hover .deal-track{animation-play-state:paused;}
.deal-track{
  display:flex;flex-direction:column;gap:10px;
  animation:scrollUp 28s linear infinite;
}
@keyframes scrollUp{
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}
.deal-card{
  background:var(--wa-bubble-in);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
  border-left:4px solid var(--wa-mid);
}
.deal-card.req{border-left-color:var(--wa-req-accent);background:var(--wa-req);}
.dc-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.dc-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff;font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
.dc-avatar img{width:100%;height:100%;object-fit:cover;}
.dc-name{font-weight:700;font-size:.82rem;color:var(--navy);}
.dc-time{font-size:.65rem;color:#8b98a8;margin-left:auto;flex-shrink:0;}
.dc-tags{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0;}
.dc-tag{
  font-size:.64rem;font-weight:700;
  background:#eef2ff;color:var(--blue);
  padding:2px 7px;border-radius:10px;
}
.dc-budget{font-size:.72rem;color:#059669;font-weight:700;}
.dc-desc{font-size:.76rem;color:#334155;margin-top:3px;}
.dc-wa-btn{
  margin-top:6px;display:inline-flex;align-items:center;gap:5px;
  background:var(--wa-green);color:#fff;font-size:.7rem;font-weight:700;
  padding:5px 10px;border-radius:14px;text-decoration:none;
}

/* ── Floating action buttons ── */
.bk-fab-wrap{
  position:fixed;right:18px;bottom:18px;
  display:flex;flex-direction:column;gap:10px;z-index:500;
}
.bk-fab{
  border:none;color:#fff;font-weight:700;font-size:.82rem;
  padding:12px 16px;border-radius:30px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  display:flex;align-items:center;gap:8px;
}
.bk-fab.reg{background:var(--wa-green);}
.bk-fab.deal{background:var(--blue);}

/* ── Modal ── */
.bk-modal-overlay{
  position:fixed;inset:0;background:rgba(11,31,69,0.55);
  display:none;align-items:center;justify-content:center;
  z-index:1000;padding:16px;
}
.bk-modal-overlay.open{display:flex;}
.bk-modal{
  background:#fff;border-radius:16px;max-width:440px;width:100%;
  max-height:88vh;overflow-y:auto;padding:22px;
}
.bk-modal h3{margin:0 0 4px;color:var(--navy);}
.bk-modal p.sub{margin:0 0 16px;font-size:.82rem;color:var(--muted);}
.bk-field{margin-bottom:12px;}
.bk-field label{display:block;font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:4px;}
.bk-field input,.bk-field select,.bk-field textarea{
  width:100%;padding:10px 12px;border:1px solid #dbe3f0;border-radius:8px;font-size:.88rem;font-family:inherit;
}
.bk-field textarea{resize:vertical;min-height:60px;}
.bk-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bk-type-toggle{display:flex;gap:8px;margin-bottom:14px;}
.bk-type-toggle button{
  flex:1;padding:10px;border-radius:8px;border:1.5px solid #dbe3f0;
  background:#fff;font-weight:700;font-size:.82rem;cursor:pointer;color:#475569;
}
.bk-type-toggle button.on.avail{background:var(--wa-dark);color:#fff;border-color:var(--wa-dark);}
.bk-type-toggle button.on.req{background:var(--wa-req-accent);color:#fff;border-color:var(--wa-req-accent);}
.bk-submit{
  width:100%;padding:12px;border:none;border-radius:8px;
  background:var(--navy);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;margin-top:4px;
}
.bk-close{position:absolute;top:14px;right:18px;cursor:pointer;font-size:1.2rem;color:#94a3b8;background:none;border:none;}
.bk-modal{position:relative;}
.bk-msg{font-size:.8rem;margin-top:8px;padding:8px 10px;border-radius:6px;display:none;}
.bk-msg.ok{background:#dcfce7;color:#166534;display:block;}
.bk-msg.err{background:#fee2e2;color:#991b1b;display:block;}

/* ── Footer strip ── */
.bk-footer{
  text-align:center;padding:20px;color:#64748b;font-size:.78rem;background:#fff;
}
.bk-footer a{color:var(--wa-mid);text-decoration:none;font-weight:600;}