/* ==========================================================
   NetBall Central – Homepage Layout CSS
   Flat, modern, community-first
   ========================================================== */

:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #667085;
  --border: rgba(15, 23, 42, .12);

  --radius: 6px;
  --gap: 18px;
  --max: 1200px;
  --topbar: 64px;

  --text-xs: 11px;
  --text-sm: 13px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-size: var(--text-xs);
  line-height:1.55;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}


/* ==========================================================
   Topbar
   ========================================================== */

.nbc-topbar{
  position: sticky;
  top:0;
  height: var(--topbar);
  background:#fff;
  border-bottom:1px solid var(--border);
  pointer-events: auto;
  z-index: 100;
}
.nbc-topbar * {
  pointer-events: auto;
}


.nbc-topbar-inner{
  max-width: var(--max);
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 14px;
}

.nbc-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
}
.nbc-logo{
  height: 42px;
  width: auto;
  display: block;
}

.nbc-brand-mark{
  width:38px;
  height:38px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  background:#f1f5f9;
  border:1px solid var(--border);
}

/* =========================================================
   MAIN NAV (DESKTOP)
========================================================= */

.nbc-nav-wrap{
  flex:1;
  display:flex;
  align-items:center;
}
.nbc-nav a{
  text-decoration:none;
  color:var(--muted);
  font-size:var(--text-sm);
  font-weight:600;
  padding:8px 10px;
  border-radius:var(--radius);
}

.nbc-nav a:hover{
  background:#f1f5f9;
  color:var(--text);
}

/* =========================================================
   HAMBURGER BUTTON
========================================================= */

.nbc-nav-toggle{
  display:none;
  width:32px;
  height:24px;
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
}

.nbc-nav-toggle span{
  display:block;
  height:3px;
  width:100%;
  background:var(--text);
  border-radius:2px;
  margin:5px 0;
  transition:.25s ease;
}

/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width: 768px){

  /* show hamburger */
  .nbc-nav-toggle{
    display:block;
  }

  /* dropdown panel */
  .nbc-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    display:none;
    flex-direction:column;

    background:#fff;
    padding:10px 0;
    margin:0;

    box-shadow:0 10px 25px rgba(0,0,0,.12);
    border-bottom:1px solid var(--border);

    z-index:999;
  }

  .nbc-nav.is-open{
    display:flex;
  }

  .nbc-nav a{
    padding:14px 20px;
    text-align:left;
  }
}

.nbc-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.nbc-search input{
  width:260px;
  max-width:38vw;
  padding:8px 10px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  font-size:var(--text-xs);
  outline:none;
}

.nbc-btn{
  text-decoration:none;
  color:var(--text);
  font-size:var(--text-xs);
  font-weight:700;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:var(--radius);
  background:#fff;
  cursor: pointer;
}

/* ==========================================================
   Shell
   ========================================================== */

.nbc-shell {
  min-height: 100%;
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Hero (Background Banner Version)
   ========================================================== */
/* Hero text colour scheme */
.nbc-hero{
  min-height: 260px;
  --hero-text: #ffffff;
  --hero-muted: rgba(255,255,255,.78);
  --hero-faint: rgba(255,255,255,.6);
  background-size: cover;
  background-position: center;
  position: relative;
}

.nbc-hero{
  position: relative;
  padding: 34px 0 26px;
  background-image: url("../imgs/hero-netball.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.nbc-hero-small{
  min-height: 90px;
  --hero-text: #ffffff;
  --hero-muted: rgba(255,255,255,.78);
  --hero-faint: rgba(255,255,255,.6);
  background-size: cover;
  background-position: center;
  position: relative;
}

.nbc-hero-small{
  position: relative;
  padding: 34px 0 26px;
  background-image: url("../imgs/hero-netball-small.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Soft overlay for readability */
.nbc-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15,23,42,.65),
    rgba(15,23,42,.35)
  );
}

/* Inner content stays above overlay */
.nbc-hero-inner{
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  gap: var(--gap);
}

/* Left text card */
.nbc-hero-left{
  flex: 1.2;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.nbc-hero-left h1{
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: 800;
}

.nbc-hero-left p{
  margin: 0;
  font-size: var(--text-xs);
  color: #ffffff;
}

/* Right stats */
.nbc-hero-right{
  flex: .8;
  display: flex;
}

.nbc-mini-stats{
  width: 100%;
  display: grid;
  gap: var(--gap);
}

.nbc-mini-stat{
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.nbc-mini-stat .k{
  display: block;
  font-size: var(--text-xs);
  color: #f1f1f1;
  font-weight: 700;
  margin-bottom: 4px;
}

.nbc-mini-stat strong{
  display: block;
  font-size: var(--text-sm);
}

.nbc-mini-stat .s{
  display: block;
  font-size: var(--text-xs);
  color: #ffffff;
  margin-top: 2px;
}

/* Mobile refinement */
@media (max-width: 780px){
  .nbc-hero{
    padding: 24px 0 18px;
  }

  .nbc-hero-inner{
    flex-direction: column;
  }

  .nbc-hero-left{
    max-width: 100%;
  }
}
.nbc-glass{
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
}
.nbc-hero .nbc-results-head{
  color: var(--hero-faint);
  border-bottom-color: rgba(255,255,255,.25);
}

.nbc-hero .nbc-result-row{
  border-bottom-color: rgba(255,255,255,.2);
}

.nbc-hero .nbc-result-row .date,
.nbc-hero .nbc-result-row .division{
  color: var(--hero-muted);
}

.nbc-hero .nbc-result-row .match{
  color: var(--hero-text);
}

.nbc-hero .nbc-result-row .match strong{
  color: var(--hero-text);
}

.nbc-hero .nbc-result-row .score{
  color: #fff;
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
}
.nbc-hero .nbc-mini-stat{
  color: var(--hero-text);
}

.nbc-hero .nbc-mini-stat strong{
  color: var(--hero-text);
}

.nbc-hero .nbc-mini-stat .k{
  color: var(--hero-faint);
}

.nbc-hero .nbc-mini-stat .s{
  color: var(--hero-muted);
}
.nbc-hero .nbc-glass{
  color: var(--hero-text);
}
/* Leader card becomes positioning context */
.nbc-leader-card{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Medal container */
.nbc-leader-medal{
  position: absolute;
  top: -1px;          /* touches the top edge */
  right: 10px;        /* inset from right */
  display: flex;
  align-items: flex-start;
  pointer-events: none; /* avoids hover conflicts */
}

/* Medal image */
.nbc-leader-medal img{
  height: 88px;       /* slightly taller for hang */
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* ==========================================================
   Results List
   ========================================================== */

/* Header row */
.nbc-results-head{
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}

.nbc-results-head .right{
  text-align: right;
}

.nbc-result-row{
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.nbc-result-row:last-child{
  border-bottom: none;
}

/* Columns */
.nbc-result-row .date{
  color: var(--muted);
  white-space: nowrap;
}

.nbc-result-row .match{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 600;
}
.nbc-result-row .match strong:first-child{
  text-align: right;
}

.nbc-result-row .match strong:last-child{
  text-align: left;
}

.nbc-result-row .match strong{
  font-weight: 700;
}
/* Hero results: team links */
.nbc-hero .nbc-results-list a{
  color: #ffffff;
  text-decoration: none;
  font-weight: 700; /* keeps them readable */
}

/* Hover state – subtle, not shouty */
.nbc-hero .nbc-results-list a:hover{
  text-decoration: none;
  opacity: 0.85;
}

.nbc-result-row .score{
  display: inline-block;
  min-width: 42px;
  text-align: center;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 700;
  background: rgba(255,255,255,.9);
}

.nbc-result-row .division{
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
/* Text-only fade for division leader */
.nbc-leader-text{
  transition: opacity .25s ease;
}

.nbc-leader-text.fade-out{
  opacity: 0;
}

.nbc-leader-text.fade-in{
  opacity: 1;
}

/* ==========================================================
   Main Grid
   ========================================================== */

.nbc-main{padding:14px 0 30px}

.nbc-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 14px;
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 320px;
  gap:var(--gap);
  align-items:start;
}

/* ==========================================================
   Cards
   ========================================================== */

.nbc-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:10px;
}

.nbc-card-h{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}

.nbc-card-h h2{
  margin:0;
  font-size:var(--text-sm);
  font-weight:700;
}

.nbc-card-b{padding:12px}

.nbc-advert-left{
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:10px;
}
.nbc-advert-right{
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:10px;
}


/* ==========================================================
   Left Column
   ========================================================== */

.nbc-pill-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nbc-pill{
  display:flex;
  text-decoration:none;
  color:var(--text);
  font-size:var(--text-xs);
  font-weight:700;
  padding:8px 10px;
  border-radius:var(--radius);
  background:#f8fafc;
  border:1px solid var(--border);
}

.nbc-pill:hover{background:#fff}

.nbc-link-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nbc-link-list a{
  color:var(--text);
  text-decoration:none;
  font-size:var(--text-xs);
  font-weight:600;
  padding:8px 10px;
  border-radius:var(--radius);
}

.nbc-link-list a:hover{background:#f1f5f9}

.nbc-muted{
  color:var(--muted);
  font-size:var(--text-xs);
  margin-top:8px;
}

/* ==========================================================
   Feed
   ========================================================== */

.nbc-feed{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.nbc-composer-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.nbc-avatar{
  width:36px;
  height:36px;
  border-radius:var(--radius);
}

.nbc-composer-input{
  width:100%;
  padding:8px 10px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  font-size:var(--text-xs);
}

.nbc-composer-actions{
  display:flex;
  gap:8px;
  padding-top:8px;
}

.nbc-chip{
  border:1px solid var(--border);
  background:#f8fafc;
  padding:6px 10px;
  border-radius:999px;
  font-size:var(--text-xs);
  font-weight:700;
}

/* Feed items */

.nbc-feed-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.nbc-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-xs);
  font-weight:700;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f8fafc;
}

.nbc-badge-result{background:#ecfeff}
.nbc-badge-fixture{background:#eff6ff}
.nbc-badge-team{background:#f0fdf4}
.nbc-badge-blog{background:#fff7ed}

.nbc-feed-title{
  display:block;
  text-decoration:none;
  color:var(--text);
  font-size:var(--text-sm);
  font-weight:700;
  line-height:1.3;
}

.nbc-feed-title:hover{text-decoration:underline}

.nbc-feed-sub{
  margin-top:4px;
  font-size:var(--text-xs);
  color:var(--muted);
}

.nbc-feed-text{
  margin-top:8px;
  font-size:var(--text-xs);
}

.nbc-score{
  display:inline-block;
  padding:2px 6px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  margin:0 4px;
}

.nbc-vs{color:var(--muted)}

.nbc-media-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}

.nbc-media{
  height:80px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#f1f5f9;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* the image inside */
.nbc-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.nbc-feed-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}

.nbc-feed-actions button{
  border:1px solid var(--border);
  background:#fff;
  padding:6px 10px;
  border-radius:var(--radius);
  font-size:var(--text-xs);
  font-weight:700;
  cursor:pointer;
}

.nbc-feed-actions button:hover{background:#f8fafc}

/* ==========================================================
   Right Column
   ========================================================== */

.nbc-mini-list{
  display:flex;
  flex-direction:column;
  border-radius:4px;
  overflow:hidden;
}

/* row base */
.nbc-mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 8px;
  text-decoration:none;
  font-size:11px;
  color:#111;
  transition:background .15s ease;
}

/* alternating backgrounds */
.nbc-mini-row:nth-child(odd){
  background:#f6f7f9;
}

.nbc-mini-row:nth-child(even){
  background:#ffffff;
}

/* hover */
.nbc-mini-row:hover{
  background:#e9edf3;
}

/* left text */
.nbc-mini-row .t{
  font-weight:600;
  line-height:1.2;
}

/* right meta */
.nbc-mini-row .m{
  font-size:12px;
  color:#666;
  white-space:nowrap;
}

/* "no fixtures" row */
.nbc-mini-row:not([href]){
  cursor:default;
  color:#666;
}

.nbc-side-link{
  display:inline-block;
  margin-top:8px;
  text-decoration:none;
  font-size:var(--text-xs);
  font-weight:700;
  color:var(--text);
}

/* ==========================================================
   Footer
   ========================================================== */

.nbc-footer{
  padding:20px 0 10px;
  background:#fff;
  border-top:1px solid var(--border);

}
.nbc-footer a{
  text-decoration:none;
  color:var(--muted);
}

.nbc-footer a:hover{
  color:var(--text);
}

.nbc-footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 14px;
  display:flex;
  justify-content:space-between;
  font-size:var(--text-xs);
  color:var(--muted);
  font-weight:700;
  text-decoration:none;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:1050px){
  .nbc-grid{
    grid-template-columns:260px minmax(0,1fr);
  }
  .nbc-right{display:none}
}

@media (max-width:780px){
  .nbc-nav{display:none}
  .nbc-hero-inner{flex-direction:column}
  .nbc-grid{grid-template-columns:1fr}
  .nbc-left{order:2}
  .nbc-feed{order:1}
  .nbc-search input{width:180px}
}
.nbc-team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

/* laptops */
@media (max-width: 1200px){
  .nbc-team-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* tablets */
@media (max-width: 900px){
  .nbc-team-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* phones */
@media (max-width: 600px){
  .nbc-team-grid{
    grid-template-columns:1fr;
  }
}

.nbc-team-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.nbc-team-header{
  height:110px;
  background-size:cover;
  background-position:center;
}

.nbc-team-body{
  padding:14px;
  text-align:center;
}

.nbc-team-kit img{
  max-height:80px;
  width:50px;
  margin-top:-36px;
  background:#fff;
  border-radius:6px;
  padding:4px;
}

.nbc-team-body h3{
  margin:8px 0 4px;
  font-size:16px;
}

.nbc-team-meta{
  font-size:13px;
  color:#666;
  margin-bottom:12px;
}

.nbc-btn-soft{
  display:inline-block;
  background:#eafaf5;
  color:#0a7c66;
  padding:8px 14px;
  border-radius:6px;
  font-size:13px;
}
.nbc-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:30px 0 10px;
  flex-wrap:wrap;
}

.nbc-pagination a,
.nbc-pagination span{
  min-width:34px;
  height:34px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:14px;
  text-decoration:none;
}

.nbc-pagination a{
  background:#f1f3f6;
  color:#222;
}

.nbc-pagination a:hover{
  background:#e6e9ef;
}

.nbc-pagination .current{
  background:#1e88e5;
  color:#fff;
  font-weight:600;
}

.nbc-pagination .nav{
  font-weight:600;
}
/* member row layout */
.nbc-member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 20x20 avatar */
.nbc-member img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* optional hover polish */
.nbc-member-row:hover img {
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}
.nbc-kit-card {
  text-align: center;
}

.nbc-kit-card img {
  max-width: 90px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.nbc-player-card img {
  max-width: 160px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.nbc-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.nbc-stat {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.nbc-stat .k {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.nbc-stat strong {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

/* subtle meaning */
.nbc-stat.win strong {
  color: #16a34a;
}

.nbc-stat.loss strong {
  color: #dc2626;
}
/* wrapper */
.nbc-result-stack {
  display: block;
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  transition: background .15s ease;
  text-decoration:none;
}

.nbc-result-stack:last-child {
  border-bottom: none;
}

.nbc-result-stack:hover {
  background: #f8fafc;
}

/* team names */
.nbc-result-team {
  font-weight: 500;
  color: #0f172a;
  line-height: 1.3;
}

.nbc-result-team.top {
  margin-bottom: 2px;
}

.nbc-result-team.bottom {
  margin-top: 2px;
}

/* score */
.nbc-result-score {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0;
}

.nbc-result-score .vs {
  font-size: 13px;
  font-weight: 400;
  margin: 0 6px;
  color: #64748b;
}

/* meta */
.nbc-result-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.nbc-result-meta .dot {
  margin: 0 6px;
}
.nbc-filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nbc-select{
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  font-size:13px;
}
/* =========================================================
   COMMENTS
========================================================= */

.nbc-comments {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.nbc-comment {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.nbc-comment-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.nbc-comment-body {
  flex: 1;
}

.nbc-comment-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.nbc-comment-head strong {
  font-weight: 700;
}

.nbc-comment-body p {
  margin: 4px 0;
  font-size: 12.5px;
}

.nbc-comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.nbc-comment-actions button {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: #2563eb;
  cursor: pointer;
}

.nbc-comment-actions button:hover {
  text-decoration: underline;
}

/* ---------- Replies ---------- */

.nbc-comment-reply {
  margin-left: 44px;
  padding-left: 12px;
  border-left: 2px solid #e5e7eb;
}

.nbc-comment-reply .nbc-comment-avatar img {
  width: 28px;
  height: 28px;
}

.nbc-comment-reply p {
  font-size: 12.5px;
}

/* ---------- Danger ---------- */

.nbc-danger {
  color: #dc2626 !important;
}.nbc-comment-actions {
  margin-top: 4px;
}

.nbc-reply-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.nbc-reply-btn:hover {
  text-decoration: underline;
}

.nbc-reply-form-wrap {
  margin-left: 44px;
  margin-top: 6px;
}

.nbc-reply-form {
  display: flex;
  gap: 6px;
}

.nbc-reply-form input {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
}

.nbc-reply-form button {
  font-size: 12px;
}

.nbc-comment-reply {
  opacity: 0.95;
}

.nbc-comment-reply .nbc-comment-avatar img {
  width: 28px;
  height: 28px;
}


.nbc-composer-row {
  display: flex;
  gap: 10px;
}

.nbc-composer-input {
  flex: 1;
  resize: none;
  min-height: 60px;
  padding: 8px;
  font-size: 14px;
}

.nbc-avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.nbc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.nbc-modal[hidden] {
  display: none !important;
  pointer-events: none;
}
/* ==========================================================
   Modal Box
   ========================================================== */

.nbc-modal-box {
  background: #ffffff;
  border-radius: 10px;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  position: relative;
  animation: modalFade .15s ease-out;
}

/* Close button */
.nbc-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}
@keyframes modalFade {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ==========================================================
   Modal Forms
   ========================================================== */

.nbc-modal-box h2 {
  margin: 0 0 6px;
}

.nbc-modal-box p {
  margin: 0 0 16px;
}

.nbc-modal-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nbc-modal-box label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.nbc-modal-box input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
}

.nbc-modal-box input:focus {
  outline: none;
  border-color: #3b82f6;
}
.nbc-btn-primary {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  background: #2f42be;
  color: #ffffff;
}

.nbc-btn-primary:hover {
  background: #1142a1;
}

.nbc-btn-progress {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  background: #344771;
  color: #ffffff;
}

.nbc-btn-progress:hover {
  background: #23304d;
}
.nbc-btn-danger {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  background: #713434;
  color: #ffffff;
}

.nbc-btn-danger:hover {
  background: #441e1e;
}

.nbc-links {
  margin-top: 8px;
  font-size: 12px;
}

.nbc-links a {
  color: #2563eb;
  text-decoration: none;
}

.nbc-links a:hover {
  text-decoration: underline;
}
/* ==========================================================
   Inline Form Errors
   ========================================================== */

.nbc-form-success,
.nbc-form-error {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
}

.nbc-form-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.nbc-form-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
/* ==========================================================
   User Dropdown
========================================================== */

.nbc-user {
  position: relative;
}
.nbc-user-btn{
  text-decoration:none;
  color:var(--text);
  font-size:var(--text-xs);
  font-weight:700;
  padding:6px;
  border-radius:var(--radius);
  background:transparent;   /* important */
  border:0;                 /* important */
  box-shadow:none;          /* important */
  outline:none;             /* important */
  cursor:pointer;
  margin-left:auto;
}

.nbc-user-btn img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.nbc-user-menu {
  position: absolute;
  right: 0;
  top: 46px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 160px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 200;
}

.nbc-user-menu a,
.nbc-user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.nbc-user-menu a:hover,
.nbc-user-menu button:hover {
  background: #f1f5f9;
}
/* ==========================================================
   Reply Composer
========================================================== */

.nbc-reply-form-wrap {
  margin-top: 6px;
}

.nbc-reply-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nbc-reply-form input {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fafc;
  outline: none;
}

.nbc-reply-form input::placeholder {
  color: #9ca3af;
}

.nbc-reply-form input:focus {
  background: #fff;
  border-color: #2563eb;
}

/* Reply button */
.nbc-reply-form button {
  border: none;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.nbc-reply-form button:hover {
  background: #1e40af;
}
/* ==========================================================
   Main Comment Composer
========================================================== */

.nbc-comment-form {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.nbc-comment-form input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fafc;
  outline: none;
}

.nbc-comment-form input:focus {
  background: #fff;
  border-color: #2563eb;
}

.nbc-comment-form button {
  border: none;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.nbc-comment-form button:hover {
  background: #1e40af;
}
.nbc-feed-author{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.nbc-feed-author-avatar img{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
}

.nbc-feed-author-text strong{
  display:block;
  font-size:13px;
}

.nbc-feed-author-text .nbc-muted{
  font-size:11px;
}
.nbc-feed-author{
  display:flex;
  align-items:center;
  gap:12px;
}

.nbc-feed-author-text{
  display:flex;
  flex-direction:column;
}

.nbc-feed-author-text strong{
  line-height:1.2;
}
.nbc-media{
  position:relative;
  overflow:hidden;
}

.nbc-media-more{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:22px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* LIGHTBOX */
.nbc-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
}

.nbc-lightbox[hidden]{display:none}

.nbc-lightbox-img{
  max-width:90vw;
  max-height:90vh;
  border-radius:8px;
}

.nbc-lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  font-size:30px;
  background:none;
  border:0;
  color:#fff;
  cursor:pointer;
}

.nbc-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:0;
  color:#fff;
  font-size:40px;
  cursor:pointer;
  padding:10px;
}

.nbc-lightbox-nav.prev{left:20px}
.nbc-lightbox-nav.next{right:20px}
.nbc-upload-preview{
  display:flex;
  gap:8px;
  margin:10px 0;
  flex-wrap:wrap;
}

.nbc-upload-preview img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--border);
}
.nbc-honeypot{
  position:absolute;
  left:-9999px;
  top:-9999px;
  visibility:hidden;
}
.nbc-pill{
  display:inline-flex;
  align-items:right;
  gap:2px;
}

.nbc-pill-role{
  font-size:10px;
  font-weight:600;
  color:#374151;
  white-space:nowrap;
}



.nbc-like-btn{
  position:relative;
  overflow: visible;
  cursor:pointer;
  transition:transform .15s ease;
  z-index:1;
}

.nbc-like-btn.is-liked{
  color:#e11d48;
}

/* POP animation */
.nbc-like-btn.is-liked{
  animation:heart-pop .35s ease-out;
}

@keyframes heart-pop{
  0%   { transform:scale(1); }
  40%  { transform:scale(1.35); }
  70%  { transform:scale(.95); }
  100% { transform:scale(1); }
}

@keyframes heart-float{
  0%{
    transform:translate(-50%, -50%) scale(.6);
    opacity:0;
  }
  30%{
    opacity:1;
  }
  100%{
    transform:translate(-50%, -140%) scale(1.4);
    opacity:0;
  }
}
.nbc-like-btn.is-liked span{
  animation:count-bounce .25s ease;
}

@keyframes count-bounce{
  0%{transform:scale(1)}
  50%{transform:scale(1.25)}
  100%{transform:scale(1)}
}
/* Container for burst hearts */
.nbc-heart-burst{
  position: fixed;
  left:50%;
  top:50%;
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9999;
}

/* Individual heart */
.nbc-heart{
  position:absolute;
  width:16px;
  height:16px;
  background:no-repeat center / contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e11d48'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  animation:heart-burst 700ms ease-out forwards;
  opacity:0;
}

/* Motion */
@keyframes heart-burst{
  0%{
    transform:translate(0,0) scale(.4);
    opacity:0;
  }
  20%{
    opacity:1;
  }
  100%{
    transform:translate(var(--x), var(--y)) scale(1.2);
    opacity:0;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .nbc-heart{ animation:none; display:none; }
}
/* ===============================
   PLAYERS PAGE ONLY
   =============================== */

.scs-players .nbc-grid{
  grid-template-columns:260px 1fr;
}

.scs-players .nbc-player-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

@media(max-width:1100px){
  .scs-players .nbc-player-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:800px){
  .scs-players .nbc-player-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:520px){
  .scs-players .nbc-player-grid{
    grid-template-columns:1fr;
  }
}

.scs-players .nbc-player-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:214px;
}

.scs-players .nbc-player-head{
  display:flex;
  gap:12px;
  align-items:center;
}

.scs-players .nbc-player-head img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.scs-players .nbc-player-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  font-size:12px;
}

.scs-players .nbc-player-meta .k{
  font-size:11px;
  color:var(--muted);
}

.scs-players .nbc-player-meta .full{
  grid-column:1 / -1;
}

/* clickable card */
.scs-players .nbc-player-link-wrap{
  display:block;
  text-decoration:none;
  color:inherit;
}

.scs-players .nbc-player-link-wrap:hover .nbc-player-card{
  border-color:#c7d2fe;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
/* avatar online ring */
.scs-players .nbc-avatar-wrap{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
}

.scs-players .nbc-avatar-wrap img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

/* online state */
.scs-players .nbc-avatar-wrap.is-online{
  box-shadow:0 0 0 2px #22c55e;
}
.scs-players .nbc-avatar-wrap.is-online{
  box-shadow:0 0 0 2px #22c55e;
  animation:onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse{
  0%{ box-shadow:0 0 0 1px #22c55e }
  50%{ box-shadow:0 0 0 4px rgba(34,197,94,.9) }
  100%{ box-shadow:0 0 0 1px #22c55e }
}
/* ===============================
   MODAL HEADER (NBC STYLE)
   =============================== */

.nbc-modal-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

.nbc-modal-icon{
  width:82px;
  height:38px;
  flex-shrink:0;
}

.nbc-modal-title h2{
  margin:0;
  font-size:16px;
}

.nbc-modal-title p{
  margin:2px 0 0;
  font-size:13px;
  color:var(--muted);
}


.nbc-user-welcome{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  margin-left:auto;
}

.nbc-user-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #e5e7eb;
}

.nbc-user-welcome-text{
  white-space:nowrap;
  color:var(--muted);
  font-size:var(--text-sm);
  font-weight:600;

}
.nbc-ad {
  display: block;
  overflow: hidden;
}

.nbc-ad img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Sitewide banner (top / footer) */
.nbc-ad-sitewide {
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: 320px;
  max-height: 180px;
}

/* Community feed ads */
.nbc-ad-community_feed {
  max-width: 536px;
  max-height: 146px;
}

/* Team page sidebar ads */
.nbc-ad-team_pages {
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: 320px;
  max-height: 180px;
}
/* Profile page sidebar ads */
.nbc-ad-profile_pages {
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: 320px;
  max-height: 180px;
}



.nbc-emoji {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

.nbc-emoji-wrap{
  width:100%;
}

.nbc-emoji-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:16px;
}

.nbc-emoji-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px;
  text-align:center;
}

.nbc-emoji-card img{
  width:56px;
  height:56px;
  margin-bottom:10px;
}
/* ==========================================================
   FINAL HARD FIX – STOP STAGGERING
   ========================================================== */

.nbc-match-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 0;
  border-bottom:1px solid var(--border);
}

/* LOCK main line into ONE ROW */
.nbc-match-main{
  display:grid !important;
  grid-template-columns:24px 1fr auto 1fr 24px;
  align-items:center;
  column-gap:6px;
  width:100%;
}


.nbc-match-main > img,
.nbc-match-main > span:first-child,
.nbc-match-main > span:last-child{
  width:24px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Team blocks */
.nbc-match-main .nbc-side{
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.nbc-match-main .nbc-side.left{
  justify-content:flex-end;
  text-align:right;
}

.nbc-match-main .nbc-side.right{
  justify-content:flex-start;
  text-align:left;
}

/* Score / vs – plain text, locked */
.nbc-match-main .nbc-score{
  white-space:nowrap;
  font-weight:600;
  background:none !important;
  border:0 !important;
  padding:0 !important;
}

/* Center meta + location */
.nbc-match-meta,
.nbc-match-location{
  text-align:center;
  font-size:12px;
  color:var(--muted);
}
/* ==========================================================
   HARD RESET: REMOVE SCORE / VS PILLS
   ========================================================== */

.nbc-match-main .nbc-score{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
}
/* SUPPORT TEAM */
.nbc-support-card{
  text-align:center;
}

.nbc-support-btn{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  transition:.25s ease;
}

.nbc-support-btn.is-active{
  background:#ad5aef;
}

.nbc-support-meta{
  margin-top:8px;
  font-size:12px;
  color:#64748b;
}
/* CAPTAIN CONTROLS */
.nbc-captain-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.nbc-file-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}

.nbc-file-label input[type="file"]{
  display:none;
}

.nbc-file-btn{
  padding:10px 14px;
  border-radius:8px;
  background:#f1f5f9;
  border:1px dashed #cbd5e1;
  font-size:13px;
  font-weight:600;
  text-align:center;
  color:#0f172a;
  transition:.2s ease;
}

.nbc-file-label:hover .nbc-file-btn{
  background:#e2e8f0;
  border-color:#94a3b8;
}

.nbc-file-hint{
  font-size:11px;
  color:#64748b;
  text-align:center;
}

.nbc-btn-block{
  width:100%;
}
/* MODERATOR INBOX */
.nbc-inbox-card{
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  margin-bottom:14px;
  background:#fff;
}

.nbc-inbox-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.nbc-inbox-body{
  font-size:13px;
  line-height:1.6;
  margin-bottom:10px;
}

.nbc-inbox-meta{
  font-size:11px;
  color:var(--muted);
  margin-bottom:10px;
}

.nbc-inbox-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* STATUS BADGES */
.nbc-status{
  font-size:11px;
  padding:2px 6px;
  border-radius:4px;
  font-weight:600;
}

.nbc-status-open{
  background:#fee2e2;
  color:#991b1b;
}

.nbc-status-in_progress{
  background:#fef3c7;
  color:#92400e;
}

.nbc-status-closed{
  background:#dcfce7;
  color:#166534;
}
/* DASHBOARD BADGE */
.nbc-dashbadge-alert{
  display:inline-block;
  margin-left:6px;
  padding:4px 8px;
  font-size:11px;
  font-weight:700;
  border-radius:4px;
  background:#b6f3bc;
  color:#000000;
  line-height:1;
}
/* ----------------------------------------------------------
   NBC Search Input
---------------------------------------------------------- */

.nbc-search-input{
  width:100%;
  padding:10px 12px;
  font-size:13px;
  line-height:1.4;

  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;

  color:var(--text);
  outline:none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* Placeholder */
.nbc-search-input::placeholder{
  color:var(--muted);
  opacity:1;
}

/* Focus state */
.nbc-search-input:focus{
  border-color:#477cdb;
  box-shadow:0 0 0 3px rgba(71,124,219,.15);
}

/* Hover (subtle) */
.nbc-search-input:hover{
  border-color:rgba(15,23,42,.25);
}

/* Remove native search chrome */
.nbc-search-input::-webkit-search-decoration,
.nbc-search-input::-webkit-search-cancel-button,
.nbc-search-input::-webkit-search-results-button,
.nbc-search-input::-webkit-search-results-decoration{
  display:none;
}
.nbc-mod-action {
  font-size: 11px;
  color: #dc2626;           /* soft red */
  text-decoration: none;
  margin-left: 8px;
  cursor: pointer;
}

.nbc-mod-action:hover {
  text-decoration: underline;
  color: #b91c1c;
}
.nbc-mod-action {
  opacity: 0.7;
}
.nbc-mod-action:hover {
  opacity: 1;
}


.nbc-mlist-card{
  background:#fff;
  border-radius:6px;
  border:1px solid var(--border);
  overflow:hidden;
  text-align:center;
  transition:.25s ease;
  height:240px;
}

.nbc-mlist-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.1);
}

.nbc-mlist-header{
  height:90px;
  background-image:url('/assets/imgs/memberlist-card.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.nbc-mlist-header::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
/* Head */
.nbc-mlist-head{
  display:flex;
  gap:12px;
  padding:0 16px;
  margin-top:-40px;
  align-items:center;
}

.nbc-mlist-name strong{
  font-size:15px;
  display:block;
}
.nbc-mlist-body{
  padding:0 16px 18px;
  margin-top:-55px;
}

.nbc-avatar-wrap{
  width:80px;
  height:80px;
  margin:0 auto 2px;
  border-radius:50%;
  background:#e5e7eb;
  overflow:hidden;
  position:relative;
}
.nbc-mlist-card .nbc-avatar-wrap{
  width:80px;
  height:80px;
}

.nbc-avatar-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.nbc-avatar-wrap.is-online{
  box-shadow:0 0 0 3px #22c55e;
}
.nbc-mlist-name{
  font-size:15px;
  margin-top:4px;
  display:block;
}

.nbc-role-chip{
  display:inline-block;
  margin:6px auto 8px;
  padding:2px 16px;
  font-size:11px;
  border-radius:1px;
  background:#577c8e;
  color:#f5f5f5;
}
.nbc-mlist-active{
  font-size:12px;
  color:#0284c7;
  margin-bottom:6px;
}

.nbc-mlist-bday{
  font-size:12px;
  color:#111827;
}
.nbc-mini-row{
  position:relative;
  cursor:help;
}

/* Tooltip bubble */
.nbc-mini-row::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:115%;
  transform:translateX(-50%);
  white-space:pre-line;

  background:#0f172a;
  color:#fff;
  padding:8px 10px;
  border-radius:6px;
  font-size:11px;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  min-width:160px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:50;
}

/* Arrow */
.nbc-mini-row::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:105%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#0f172a;
  opacity:0;
  transition:.2s ease;
}

/* Show on hover */
.nbc-mini-row:hover::after,
.nbc-mini-row:hover::before{
  opacity:1;
}
.nbc-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nbc-social-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  font-size:10px;
  font-weight:400;
  text-decoration:none;
  border-radius:4px;
  background:#f1f3f6;
  color:#0f172a;
  transition:all .2s ease;
  border:1px solid rgba(0,0,0,.08);
  margin-top:5px;
}

.nbc-social-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* Brand hover colours */
.nbc-social-btn.website:hover{
  background:#0f172a;
  color:#fff;
}

.nbc-social-btn.facebook:hover{
  background:#1877f2;
  color:#fff;
}

.nbc-social-btn.x:hover{
  background:#000;
  color:#fff;
}

.nbc-social-btn.instagram:hover{
  background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);
  color:#fff;
}

.nbc-social-btn.other:hover{
  background:#64748b;
  color:#fff;
}