/* Haitian Corner Browse Community — v1 */

#browse.hc-browse-screen{
  position:relative;
  min-height:100%;
  padding-bottom:calc(112px + env(safe-area-inset-bottom));
  color:#071f49;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(8,104,232,.09),
      transparent 25%
    ),
    #f4f7fb;
}

.hc-browse-hero{
  padding:
    calc(18px + env(safe-area-inset-top))
    14px
    16px;
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #f7faff 100%
    );
}

.hc-browse-eyebrow,
.hc-browse-section-kicker{
  color:#0868e8;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:1.65px;
}

.hc-browse-hero h1{
  margin:5px 0 3px;
  font-size:27px;
  line-height:1.06;
  letter-spacing:-.8px;
  color:#071f49;
}

.hc-browse-hero > p{
  margin:0 0 15px;
  color:#667895;
  font-size:13px;
  line-height:1.4;
}

.hc-browse-search{
  height:48px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #dbe4f1;
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 20px rgba(8,31,69,.06);
}

.hc-browse-search > i{
  color:#687a96;
  font-size:16px;
}

.hc-browse-search input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  color:#10284c;
  background:transparent;
  font:inherit;
  font-size:14px;
}

.hc-browse-search input::placeholder{
  color:#8b9bb2;
}

#hcBrowseSearchClear{
  display:none;
  border:0;
  padding:6px;
  color:#8b9bb2;
  background:transparent;
}

#hcBrowseSearchClear.is-visible{
  display:block;
}

.hc-browse-chips{
  margin-top:12px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.hc-browse-chips::-webkit-scrollbar{
  display:none;
}

.hc-browse-chip{
  min-height:38px;
  padding:0 14px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #dce5f2;
  border-radius:999px;
  color:#385275;
  background:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
  box-shadow:0 4px 12px rgba(8,31,69,.04);
}

.hc-browse-chip.is-active{
  border-color:#0868e8;
  color:#fff;
  background:linear-gradient(135deg,#075ed4,#1185f3);
  box-shadow:0 7px 17px rgba(8,104,232,.23);
}

.hc-browse-online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#29bd72;
}

#browseSort{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.hc-browse-featured,
.hc-browse-directory{
  padding:16px 14px 0;
}

.hc-browse-section-head{
  margin-bottom:10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.hc-browse-section-head h2{
  margin:3px 0 0;
  color:#071f49;
  font-size:19px;
  line-height:1.1;
  letter-spacing:-.35px;
}

.hc-browse-section-head > button{
  border:0;
  padding:8px 0 3px 10px;
  color:#0868e8;
  background:transparent;
  font:inherit;
  font-size:12px;
  font-weight:850;
}

.hc-browse-featured-track{
  display:flex;
  gap:13px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.hc-browse-featured-track::-webkit-scrollbar{
  display:none;
}

.hc-browse-featured-person{
  width:68px;
  padding:0;
  flex:0 0 68px;
  border:0;
  color:#071f49;
  background:transparent;
  text-align:center;
  font:inherit;
}

.hc-browse-featured-avatar{
  position:relative;
  width:64px;
  height:64px;
  margin:0 auto 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border:3px solid #fff;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#075ed4,#d7193f);
  box-shadow:0 4px 13px rgba(8,31,69,.15);
  font-size:21px;
  font-weight:900;
}

.hc-browse-featured-avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

.hc-browse-featured-avatar i{
  position:absolute;
  right:-1px;
  bottom:1px;
  width:12px;
  height:12px;
  border:2px solid #fff;
  border-radius:50%;
  background:#24c873;
}

.hc-browse-featured-person strong,
.hc-browse-featured-person small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.hc-browse-featured-person strong{
  font-size:11px;
  line-height:1.2;
}

.hc-browse-featured-person small{
  margin-top:2px;
  color:#71829d;
  font-size:9px;
}

.hc-browse-featured-loading,
.hc-browse-featured-empty{
  width:100%;
  padding:22px;
  color:#8b9bb2;
  text-align:center;
  font-size:12px;
}

.hc-browse-directory{
  padding-bottom:10px;
}

.hc-browse-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.hc-browse-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #e1e8f2;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 16px rgba(8,31,69,.055);
}

.hc-browse-card-photo{
  position:relative;
  width:100%;
  aspect-ratio:1/1.02;
  display:block;
  overflow:hidden;
  border:0;
  padding:0;
  background:linear-gradient(145deg,#075ed4,#d7193f);
}

.hc-browse-card-photo > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hc-browse-card-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:32px;
  font-weight:900;
}

.hc-browse-card-online{
  position:absolute;
  top:6px;
  right:6px;
  padding:4px 6px;
  display:flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  color:#fff;
  background:rgba(7,28,61,.72);
  backdrop-filter:blur(7px);
  font-size:8px;
  font-weight:850;
}

.hc-browse-card-online i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2bd177;
}

.hc-browse-card-verified{
  position:absolute;
  left:6px;
  top:6px;
  width:19px;
  height:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#0868e8;
  font-size:8px;
}

.hc-browse-card-video{
  position:absolute;
  right:6px;
  bottom:6px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:rgba(7,28,61,.7);
  font-size:9px;
}

.hc-browse-card-body{
  padding:8px 7px 7px;
}

.hc-browse-card-topline{
  min-width:0;
  display:flex;
  align-items:center;
  gap:2px;
}

.hc-browse-card-name{
  min-width:0;
  flex:1;
  overflow:hidden;
  border:0;
  padding:0;
  color:#071f49;
  background:transparent;
  text-align:left;
  white-space:nowrap;
  text-overflow:ellipsis;
  font:inherit;
  font-size:11px;
  font-weight:900;
}

.hc-browse-card-more{
  width:22px;
  height:20px;
  flex:0 0 22px;
  border:0;
  padding:0;
  color:#71829d;
  background:transparent;
  font-size:10px;
  letter-spacing:-1px;
}

.hc-browse-card-city{
  min-width:0;
  margin-top:3px;
  display:flex;
  align-items:center;
  gap:3px;
  color:#647792;
  font-size:9px;
}

.hc-browse-card-city span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.hc-browse-card-role{
  max-width:100%;
  margin-top:6px;
  padding:4px 6px;
  display:inline-block;
  overflow:hidden;
  border-radius:999px;
  color:#0868e8;
  background:#eaf3ff;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8px;
  font-weight:800;
}

.hc-browse-card-reason{
  min-width:0;
  height:22px;
  margin-top:5px;
  display:flex;
  align-items:center;
  gap:4px;
  overflow:hidden;
  color:#667895;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8px;
}

.hc-browse-card-reason i{
  color:#31547e;
  font-size:8px;
}

.hc-browse-card-reason .fa-circle{
  color:#27c877;
  font-size:6px;
}

.hc-browse-connect{
  width:100%;
  min-height:31px;
  margin-top:4px;
  border:0;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#fff;
  background:linear-gradient(135deg,#075ed4,#1185f3);
  font:inherit;
  font-size:9px;
  font-weight:900;
  box-shadow:0 5px 11px rgba(8,104,232,.18);
}

.hc-browse-connect.is-friends{
  background:#071f49;
}

.hc-browse-connect.is-pending{
  color:#61748f;
  background:#eef2f7;
  box-shadow:none;
}

.hc-browse-connect.is-respond{
  background:#dc6b1f;
}

.hc-browse-grid-status{
  grid-column:1/-1;
  padding:45px 20px;
  color:#0868e8;
  text-align:center;
  font-size:23px;
}

.hc-browse-empty{
  grid-column:1/-1;
  padding:52px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#71829d;
  text-align:center;
}

.hc-browse-empty > i{
  margin-bottom:12px;
  color:#bdd0e9;
  font-size:37px;
}

.hc-browse-empty strong{
  color:#071f49;
  font-size:16px;
}

.hc-browse-empty span{
  margin-top:5px;
  font-size:12px;
}

.hc-browse-empty button{
  margin-top:14px;
  border:0;
  border-radius:999px;
  padding:10px 18px;
  color:#fff;
  background:#0868e8;
  font:inherit;
  font-size:12px;
  font-weight:850;
}

.hc-browse-sentinel{
  min-height:45px;
  padding:17px;
  color:#0868e8;
  text-align:center;
}

.hc-browse-end{
  color:#71829d;
  font-size:11px;
}

.hc-browse-filter-fab{
  position:fixed;
  left:50%;
  bottom:calc(71px + env(safe-area-inset-bottom));
  z-index:85;
  min-width:112px;
  min-height:43px;
  transform:translateX(-50%);
  border:1px solid #dbe4f1;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#071f49;
  background:rgba(255,255,255,.96);
  box-shadow:0 9px 28px rgba(8,31,69,.17);
  backdrop-filter:blur(13px);
  font:inherit;
  font-size:12px;
  font-weight:900;
}

.hc-browse-filter-sheet{
  position:fixed;
  inset:0;
  z-index:10020;
  display:flex;
  align-items:flex-end;
  background:rgba(5,20,45,.47);
  backdrop-filter:blur(3px);
}

.hc-browse-filter-panel{
  width:100%;
  max-height:78vh;
  overflow-y:auto;
  padding:
    8px
    16px
    calc(22px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;
  background:#fff;
  box-shadow:0 -16px 40px rgba(8,31,69,.19);
}

.hc-browse-filter-handle{
  width:42px;
  height:4px;
  margin:0 auto 15px;
  border-radius:99px;
  background:#d7dfeb;
}

.hc-browse-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.hc-browse-filter-title span{
  color:#0868e8;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
}

.hc-browse-filter-title h3{
  margin:3px 0 0;
  color:#071f49;
  font-size:21px;
}

.hc-browse-filter-title button{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  color:#526985;
  background:#f0f4f9;
}

.hc-browse-filter-panel > p{
  margin:7px 0 13px;
  color:#71829d;
  font-size:12px;
}

.hc-browse-filter-options{
  display:grid;
  gap:8px;
}

.hc-browse-filter-option{
  width:100%;
  min-height:63px;
  padding:10px 12px;
  border:1px solid #e0e7f1;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#60738e;
  background:#fff;
  text-align:left;
  font:inherit;
}

.hc-browse-filter-option > i{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0868e8;
  background:#eaf3ff;
}

.hc-browse-filter-option > span{
  min-width:0;
  flex:1;
}

.hc-browse-filter-option strong,
.hc-browse-filter-option small{
  display:block;
}

.hc-browse-filter-option strong{
  color:#071f49;
  font-size:13px;
}

.hc-browse-filter-option small{
  margin-top:3px;
  color:#71829d;
  font-size:10px;
}

.hc-browse-filter-option > b{
  color:#0868e8;
  opacity:0;
}

.hc-browse-filter-option.is-active{
  border-color:#a6cafa;
  background:#f5f9ff;
}

.hc-browse-filter-option.is-active > b{
  opacity:1;
}

.hc-browse-filter-done{
  width:100%;
  min-height:47px;
  margin-top:14px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:#0868e8;
  font:inherit;
  font-size:14px;
  font-weight:900;
}

@media (max-width:350px){
  .hc-browse-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hc-browse-card-name{
    font-size:12px;
  }

  .hc-browse-card-role,
  .hc-browse-card-reason{
    font-size:9px;
  }
}

/* Browse header and larger nearby members — v2 */
.hc-browse-hero{
  padding-top:calc(12px + env(safe-area-inset-top));
}

.hc-browse-brandbar{
  margin-bottom:15px;
  display:flex;
  align-items:center;
  gap:10px;
}

.hc-browse-brandbar img{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  object-fit:cover;
  box-shadow:0 7px 18px rgba(8,31,69,.14);
}

.hc-browse-brandbar strong,
.hc-browse-brandbar small{
  display:block;
}

.hc-browse-brandbar strong{
  color:#071f49;
  font-size:17px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.3px;
}

.hc-browse-brandbar small{
  margin-top:3px;
  color:#71829d;
  font-size:9px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.15px;
}

.hc-browse-tagline{
  margin:0 0 14px!important;
  color:#526985!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:750;
}

.hc-browse-featured-track{
  gap:16px;
}

.hc-browse-featured-person{
  width:90px;
  flex-basis:90px;
}

.hc-browse-featured-avatar{
  width:84px;
  height:84px;
  margin-bottom:8px;
  border-width:3px;
}

.hc-browse-featured-avatar i{
  right:-3px;
  bottom:-1px;
  width:14px;
  height:14px;
  border-width:2.5px;
}

.hc-browse-featured-person strong{
  font-size:12px;
  line-height:1.25;
}

.hc-browse-featured-person small{
  margin-top:3px;
  font-size:10px;
  line-height:1.2;
}

/* Blue Browse header and two-column directory — v3 */
.hc-browse-hero{
  color:#fff;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(255,255,255,.13),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #002d63 0%,
      #003f87 52%,
      #075fc7 100%
    );
  box-shadow:0 8px 24px rgba(0,45,99,.16);
}

.hc-browse-brandbar strong{
  color:#fff;
}

.hc-browse-brandbar small{
  color:rgba(255,255,255,.73);
}

.hc-browse-tagline{
  color:rgba(255,255,255,.92)!important;
}

.hc-browse-search{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 9px 23px rgba(0,25,62,.18);
}

.hc-browse-chip{
  border-color:rgba(255,255,255,.24);
  color:#fff;
  background:rgba(255,255,255,.13);
  box-shadow:none;
  backdrop-filter:blur(10px);
}

.hc-browse-chip.is-active{
  border-color:#fff;
  color:#003f87;
  background:#fff;
  box-shadow:0 7px 18px rgba(0,25,62,.18);
}

.hc-browse-chip.is-active .hc-browse-online-dot{
  background:#24c873;
}

.hc-browse-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.hc-browse-card{
  border-radius:16px;
}

.hc-browse-card-photo{
  aspect-ratio:1/1.04;
}

.hc-browse-card-body{
  padding:10px 9px 9px;
}

.hc-browse-card-name{
  font-size:13px;
}

.hc-browse-card-city{
  margin-top:4px;
  font-size:10px;
}

.hc-browse-card-role{
  margin-top:7px;
  padding:5px 8px;
  font-size:9px;
}

.hc-browse-card-reason{
  height:24px;
  margin-top:6px;
  font-size:9px;
}

.hc-browse-connect{
  min-height:35px;
  margin-top:5px;
  font-size:10px;
}

@media (max-width:350px){
  .hc-browse-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
}

/* Browse verified badge emphasis — v4 */
.hc-browse-card-verified{
  left:7px;
  top:7px;
  width:27px;
  height:27px;
  border:3px solid #fff;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #0868e8,
      #004db5
    );
  box-shadow:
    0 4px 12px rgba(0,63,135,.42),
    0 0 0 2px rgba(8,104,232,.14);
  font-size:12px;
  animation:hcBrowseVerifiedPop .35s ease-out both;
}

.hc-browse-card-verified i{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

@keyframes hcBrowseVerifiedPop{
  0%{
    opacity:0;
    transform:scale(.55) rotate(-12deg);
  }

  70%{
    transform:scale(1.12) rotate(3deg);
  }

  100%{
    opacity:1;
    transform:scale(1) rotate(0);
  }
}

@media (prefers-reduced-motion:reduce){
  .hc-browse-card-verified{
    animation:none;
  }
}



/* HC PWA MUTUAL FRIENDS — v1 */
.hc-browse-card-mutual{
  min-width:0;
  height:24px;
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  color:#536985;
  font-size:9px;
  font-weight:800;
  line-height:1;
}

.hc-browse-mutual-stack{
  height:23px;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding-left:1px;
  overflow:visible;
}

.hc-browse-mutual-avatar{
  position:relative;
  width:23px;
  min-width:23px;
  max-width:23px;
  height:23px;
  min-height:23px;
  max-height:23px;
  margin-left:-7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 23px;
  overflow:hidden;
  border:2px solid #fff;
  border-radius:50%;
  background:#075ebf;
  box-sizing:border-box;
  box-shadow:0 1px 4px rgba(7,31,73,.25);
}

.hc-browse-mutual-avatar:first-child{
  margin-left:0;
}

.hc-browse-mutual-avatar i{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:8px;
  font-style:normal;
  font-weight:900;
}

.hc-browse-mutual-avatar > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  object-fit:cover !important;
  transform:none !important;
}

.hc-browse-mutual-label{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

@media (max-width:350px){
  .hc-browse-card-mutual{
    gap:4px;
    font-size:8px;
  }

  .hc-browse-mutual-avatar{
    width:21px;
    min-width:21px;
    max-width:21px;
    height:21px;
    min-height:21px;
    max-height:21px;
    flex-basis:21px;
  }
}