/* ===== Consistent max content width across the whole site =====
   The site has two page families:
   - "GBR design-system" pages (register, member_home, search_*, payment,
     register_confirmation) are full-bleed via <main>.
   - Bootstrap-container pages (index, about, company, etc.) cap content with
     .container, which Bootstrap limits to 1320px and centres.
   Both converge on one content cap (1600px), centred, while page/strip
   BACKGROUNDS stay full-bleed. */
:root { --gbr-max-width: 1600px; }

/* Bootstrap-container pages: widen the default 1320px cap to 1600px and let
   .container fill the width from 1200px up. The section/main backgrounds
   bleed full-width; only the content column is capped. */
@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl { max-width: var(--gbr-max-width); }
}

/* Full-bleed GBR pages: keep the coloured strips edge-to-edge but centre their
   CONTENT in the same 1600px column on very wide screens. From 1652px up the
   horizontal padding equals the strips' default (26px) and grows past it, so
   content centres while each strip's background still spans the full width. */
@media (min-width: 1652px) {
  .welcome-strip,
  .greeting-strip,
  .hero-row,
  .reg-main,
  .main-section {
    padding-inline: calc((100% - var(--gbr-max-width)) / 2) !important;
  }
}
/* ===== End max content width ===== */

/* Start Map */

#map {
  height: 800px;
  border: 2px solid #ccc;
}

/* Map (and the guest locked-map card) are far too tall on small screens —
   800px swallows a whole phone viewport. Scale them down responsively. */
@media (max-width: 991.98px) {
  #map, #mapLocked { height: 420px !important; }
}
@media (max-width: 575.98px) {
  #map, #mapLocked { height: 320px !important; }
}

/* End Map */

/* Start Chat */
/* GBR live-chat widget (shared across all pages that show the chat).
   Markup: .chat-card > .chat-head / .chat-body (.bubble-them / .bubble-me) / .chat-input
   Colours are literal GBR tokens so the widget works even on pages that
   don't define the --gbr-* CSS custom properties. */
.chat-card { background: #fff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.06); border: 1px solid #e3e6e8; }
.chat-head { background: #0083ae; color: #fff; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #59d27d; box-shadow: 0 0 0 2px rgba(255,255,255,.4); flex-shrink: 0; }
.chat-head .who { flex: 1; font-weight: 500; }
.chat-head .actions { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.chat-head .actions i { cursor: pointer; }
.chat-body { padding: 14px 12px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 82%; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; border-radius: 0; }
.bubble-them { background: #0083ae; color: #fff; align-self: flex-start; }
.bubble-me { background: #fff; color: #212529; align-self: flex-end; border: 1px solid #d6dadd; text-align: right; }
.chat-input { background: #f7f7f7; display: flex; align-items: stretch; border-top: 1px solid #e3e6e8; }
.chat-input input { flex: 1; border: 0; background: transparent; padding: 11px 12px; font-size: 13px; color: #495057; outline: none; font-family: inherit; }
.chat-input button { background: #0083ae; color: #fff; border: 0; padding: 0 16px; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-input button:hover { background: #046c8e; }
/* End Chat */

/* Fundraising badge — marks startup (US fundraising) companies in search result lists */
.badge-fund { display: inline-block; background: #0083ae; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; vertical-align: middle; letter-spacing: .02em; }

/* ===== Company search: Established vs Startup (fundraising) sub-type =====
   Shared by search_company.html and member_home.html. A small JS handler
   toggles body.startup-mode; everything below is driven by that class. */
.subtype-toggle { background: #f3f4f5; padding: 10px 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.subtype-pill { background: #fff; border: 1px solid #b6bcc0; color: #495057; font-size: 13px; font-weight: 500; padding: 5px 14px; border-radius: 20px; cursor: pointer; font-family: inherit; }
.subtype-pill.active { background: #0083ae; border-color: #0083ae; color: #fff; }
.startup-filter { display: none; }   /* shown only in startup mode */
.startup-only { display: none; }     /* startup-mode-only text */
body.startup-mode .est-filter { display: none; }
body.startup-mode .startup-filter { display: block; }
body.startup-mode .est-only { display: none; }
body.startup-mode .startup-only { display: inline; }
/* Append a "Fundraising" tag to each company result name in startup mode.
   Scoped to the company search list, not member_home's phone-style contacts. */
body.startup-mode .contacts-list:not(.contacts-list-phones) .contact-item .name::after {
  content: "Fundraising";
  display: inline-block;
  background: #0083ae; color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 9px;
  margin-left: 8px; vertical-align: middle;
}
body.startup-mode .contacts-list:not(.contacts-list-phones) .contact-item { cursor: pointer; }
/* ===== End company sub-type ===== */

/* ========== GBR Navbar ========== */
.gbr-navbar {
  background: #043443;
  padding: 0;
}
.gbr-navbar .container-fluid {
  padding: 14px 26px;
}
.gbr-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}
.gbr-navbar .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}
.gbr-nav-link {
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  position: relative;
}
.gbr-nav-link i {
  font-size: 22px;
  line-height: 1;
}
.gbr-nav-link:hover { color: #cce6ef; }
.gbr-nav-link.active { color: #cce6ef; opacity: 0.85; }
.gbr-nav-link .badge-dot {
  position: absolute;
  top: 2px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: #dc3545;
  border-radius: 50%;
  border: 1.5px solid #043443;
}
.gbr-accent-rule {
  height: 8px;
  background: #0083ae;
}

/* Mobile collapse styling */
@media (max-width: 991px) {
  .gbr-navbar .navbar-collapse {
    padding: 10px 0;
  }
  .gbr-navbar .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .gbr-nav-link {
    flex-direction: row;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    white-space: normal;
  }
  .gbr-nav-link i { font-size: 18px; }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .gbr-nav-link { padding: 6px 10px; font-size: 11.5px; }
  .gbr-nav-link i { font-size: 20px; }
}
/* ========== End GBR Navbar ========== */

/* ========== GBR Footer ========== */
.gbr-footer {
  background: #e6e7e8;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.gbr-footer img { height: 38px; }
.gbr-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.gbr-footer a {
  color: #0083ae;
  text-decoration: none;
  font-size: 15px;
}
.gbr-footer a:hover { color: #046c8e; text-decoration: underline; }
/* ========== End GBR Footer ========== */