:root{
  --bg-0:#0b0f14;
  --bg-1:#0f1620;
  --bg-2:#121b27;
  --card:rgba(255,255,255,.04);
  --card-b:rgba(255,255,255,.08);

  --nav-h:55px;
  --dd-gap:0px;

  --text-color:#e8e8e8;
  --nav-text-color:#e0e0e0;
  --nav-bg-color:#171718;
  --bg-color:#272b32;
  --dark-bg-color:#0b0b0b;
}

body{
  background:var(--bg-color);
  color:var(--text-color);
}

/* Breadcrumb */
.breadcrumb{ --bs-breadcrumb-divider:'›'; }
.breadcrumb-item+.breadcrumb-item::before{ color:rgba(255,255,255,.35); }
.breadcrumb-item.active{ color:rgba(255,255,255,.45); }

/* ── Home page ─────────────────────────────────────── */

/* ── Home: Search ── */
.fp-search-home{
  padding:1rem 0;
  position:relative;
  z-index:3;
}
.fp-search-home-wrapper{
  width:100% !important;
  min-width:0 !important;
}
.fp-search-home-wrapper .input-group{
  height:auto !important;
  min-width:0 !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  overflow:visible !important;
}
.fp-search-home-wrapper .input-group:focus-within,
.fp-search-home-wrapper .input-group.search-focused{
  background:#d3d3d3 !important;
  border-color:rgba(0,0,0,.15) !important;
}
.fp-search-home-wrapper .input-group-text{
  height:auto !important;
  padding:.7rem .9rem .7rem 1.2rem !important;
  font-size:1.1rem;
}
.fp-search-home-wrapper .form-control.search-input{
  height:auto !important;
  font-size:1rem;
  padding:.7rem .75rem !important;
}
.fp-search-home-wrapper .search-clear{
  top:50%;
  transform:translateY(-50%);
  height:auto;
}
.fp-search-home-wrapper .search-suggestions{
  border-radius:0 0 24px 24px;
}
.fp-search-home-wrapper .search-suggestions a:last-child{
  border-radius:0 0 24px 24px;
}
.fp-search-home .fp-search-home-wrapper.search-open .input-group{
  border-radius:24px 24px 0 0 !important;
  border-bottom-color:transparent !important;
}

/* ── Home: Hero Boxes (3 equal) ── */
.fp-hero-box{
  display:block;
  position:relative;
  border-radius:.75rem;
  overflow:hidden;
  height:220px;
  background:#1a1f28;
  text-decoration:none;
  color:#fff;
  z-index:1;
}
.fp-hero-box-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s;
}
.fp-hero-box:hover .fp-hero-box-img{ transform:scale(1.04); }
.fp-hero-box-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1rem;
}
.fp-hero-box-badge{
  display:inline-block;
  align-self:flex-start;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.2rem .6rem;
  border-radius:999px;
  background:rgba(59,130,246,.3);
  color:#b3d4fc;
  border:1px solid rgba(59,130,246,.35);
  margin-bottom:.5rem;
}
.fp-hero-box-badge--featured{
  background:rgba(234,179,8,.25);
  color:#fde68a;
  border-color:rgba(234,179,8,.4);
}
.fp-hero-box-title{
  font-size:.95rem;
  font-weight:700;
  line-height:1.3;
  margin:0 0 .25rem;
}
.fp-hero-box-date{
  font-size:.7rem;
  color:rgba(255,255,255,.5);
}

/* ── Home: Panels (Users / Footballizer) ── */
.fp-panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:.75rem;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}
.fp-panel-header{
  padding:.5rem .85rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.fp-panel-header h2{ font-size:.8rem; }
.fp-panel-body{ flex:1; }

.fp-user-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.35rem .85rem;
  text-decoration:none;
  color:var(--text-color);
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;
  font-size:.78rem;
}
.fp-user-row:last-child{ border-bottom:0; }
.fp-user-row:hover{ background:rgba(255,255,255,.05); color:#fff; }
.fp-user-avatar{
  width:22px; height:22px;
  border-radius:50%;
  background:rgba(59,130,246,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem; color:#7cb3f7; flex-shrink:0;
}
.fp-user-name{ flex:1; font-weight:500; }
.fp-user-date{ font-size:.65rem; color:rgba(255,255,255,.35); flex-shrink:0; }

.fp-fbl-pos{
  display:inline-block;
  width:28px;
  font-size:.65rem;
  font-weight:700;
  color:#7cb3f7;
  text-align:center;
  flex-shrink:0;
}
.fp-fbl-ovr{
  font-size:.75rem;
  font-weight:700;
  color:rgba(255,255,255,.6);
  flex-shrink:0;
}

/* ── Home: Football Rows ── */
.fp-football-row{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.45rem .65rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:.5rem;
  text-decoration:none;
  color:var(--text-color);
  transition:background .12s, border-color .12s;
}
.fp-football-row:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}
.fp-football-thumb{
  width:40px; height:40px;
  border-radius:.4rem;
  overflow:hidden;
  flex-shrink:0;
  background:#1a1f28;
}
.fp-football-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.fp-football-thumb--empty{
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:rgba(255,255,255,.15);
}
.fp-football-title{
  font-size:.8rem;
  font-weight:600;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Home: Horizontal Scroll Cards ── */
.fp-scroll-wrap{
  position:relative;
}
.fp-scroll-track{
  display:flex;
  gap:.75rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.fp-scroll-track::-webkit-scrollbar{ display:none; }

.fp-scroll-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(30,35,44,.9);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:opacity .15s, background .15s;
}
.fp-scroll-btn:hover{ background:rgba(59,130,246,.25); }
.fp-scroll-btn--left{ left:-6px; }
.fp-scroll-btn--right{ right:-6px; }

.fp-scroll-card{
  flex:0 0 220px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:.75rem;
  overflow:hidden;
  text-decoration:none;
  color:var(--text-color);
  transition:border-color .15s, transform .15s;
}
.fp-scroll-card:hover{
  border-color:rgba(255,255,255,.15);
  transform:translateY(-2px);
  color:#fff;
}
.fp-scroll-card-img{
  height:120px;
  overflow:hidden;
  background:#1a1f28;
}
.fp-scroll-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.fp-scroll-card-placeholder{
  width:100%; height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem; color:rgba(255,255,255,.15);
}
.fp-scroll-card-body{ padding:.65rem .75rem; }
.fp-scroll-card-title{
  font-size:.78rem;
  font-weight:600;
  line-height:1.3;
  margin:0 0 .25rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fp-scroll-card-date{
  font-size:.65rem;
  color:rgba(255,255,255,.35);
}

/* Quick-access cards */
.fp-quick-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:1.1rem .75rem;
  text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:.75rem;
  text-decoration:none;
  color:var(--text-color);
  transition:background .15s, border-color .15s, transform .15s;
}
.fp-quick-card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
  transform:translateY(-2px);
  color:#fff;
}
.fp-quick-card i{ font-size:1.5rem; opacity:.7; }
.fp-quick-card span{ font-weight:600; font-size:.85rem; }
.fp-quick-card small{ font-size:.7rem; color:rgba(255,255,255,.4); }

/* Stats banner */
.fp-stats-banner{
  background:linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(139,92,246,.06) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:.75rem;
  padding:1.5rem 1rem;
}
.fp-stat-num{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
}
.fp-stat-label{
  font-size:.78rem;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
  letter-spacing:.04em;
}

main{ padding:0; }
.breadcrumb{ font-size:.75rem; }

.content-prose{ max-width:760px; }
.content-prose p{
  line-height:1.8;
  color:rgba(255,255,255,.85);
}
.content-prose h2,
.content-prose h3{ scroll-margin-top:110px; }

.glass{
  background:var(--card);
  backdrop-filter:blur(10px);
}

#content img{
  width:100%;
  height:auto;
}

.toc a{
  text-decoration:none;
  color:rgba(255,255,255,.75);
}
.toc a:hover{ color:#fff; }

.tag-pill{
  background:rgba(13,110,253,.12);
  border:1px solid rgba(13,110,253,.25);
  color:rgba(255,255,255,.85);
}

.soft-hr{
  border-color:rgba(255,255,255,.10);
  opacity:1;
}

/* Poll component */
.fp-poll-option{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  transition:background .15s, border-color .15s;
}
.fp-poll-option:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}

.fp-poll-result{
  border:1px solid rgba(255,255,255,.06);
}
.fp-poll-bar-track{
  height:6px;
  background:rgba(255,255,255,.06);
}
.fp-poll-bar{
  height:100%;
  background:rgba(13,110,253,.5);
  transition:width .4s ease;
}

@media (min-width:992px){
  .sticky-aside{
    position:sticky;
    top:96px;
  }
}

/* Navbar + dropdowns */
.navbar{
  height:var(--nav-h);
  background:rgba(21,21,21,.88);
  backdrop-filter:blur(12px);
  font-size:.88rem;
  padding:0;
}

.navbar .container{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  --mobile-left-safe:90px;
  --mobile-right-safe:59px;
}

.navbar-brand{
  display:flex;
  align-items:center;
  height:var(--nav-h);
}
.navbar-brand img{
  height:33px;
  display:block;
}

.navbar-toggler{
  width:38px;
  height:35px;
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible{
  outline:none;
  box-shadow:none;
  border:0;
}
.navbar-toggler:not(.collapsed){ background-color:transparent; }

.navbar-nav{
  height:var(--nav-h);
  display:flex;
  align-items:stretch;
}
.nav-item{
  height:var(--nav-h);
  display:flex;
  align-items:stretch;
  padding:0 9px;
  position:relative;
}
.nav-link{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  padding:0 .75rem;
  line-height:1;
  white-space:nowrap;
  transition:color .12s ease;
}
.navbar .nav-item:hover > .nav-link,
.navbar .nav-link:focus-visible{ color:var(--text-color); }
.nav-item:hover{ background:var(--dark-bg-color); }

.dropdown-toggle::after{ display:none; }

@media (min-width:992px){
  .navbar .dropdown.dropdown-hover:hover .dropdown-menu{ display:block; }
}

.dropdown-menu{
  background:var(--dark-bg-color);
  border:0;
  border-radius:0 0 9px 9px;
  top:calc(100% + var(--dd-gap));
  margin-left:-9px;
  padding:12px;
}

.dropdown-menu-end{ transform:translateY(8px); }

.dropdown-item{
  color:#e8e8e8;
  border-radius:8px;
  font-size:.88em;
  padding:.55rem .65rem;
}
.dropdown-item:hover{
  background:var(--bg-color);
  border-radius:6px;
}
.dropdown-header{
  color:rgba(255,255,255,.85);
  font-weight:600;
  padding:.25rem .65rem .5rem;
}
.dropdown-divider{
  opacity:.15;
  margin:.5rem 0;
}

/* Search */
form[role="search"]{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  margin:0;
}

.input-group{
  height:35px;
  border-radius:999px;
  overflow:hidden;
  min-width:280px;
  background:#202128;
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  transition:background .12s, border-color .12s;
}

.input-group-text{
  height:35px;
  display:flex;
  align-items:center;
  background:transparent !important;
  border:0 !important;
  color:#ccc;
  padding-left:1rem;
  padding-right:.5rem;
}
.input-group-text i{ transform:translateY(-1px); }

.input-group .form-control{
  height:35px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  color:#fff;
  font-size:.85rem;
  padding-left:.25rem;
  padding-right:1rem;
}
.input-group .form-control::placeholder{ color:#aaa; }

.input-group:focus-within{
  background:#d3d3d3;
  border-color:rgba(0,0,0,.15);
}
.input-group:focus-within .form-control{ color:#111; }
.input-group:focus-within .form-control::placeholder{ color:rgba(0,0,0,.65); }
.input-group:focus-within .input-group-text{ color:#111; }

@media (max-width:991.98px){
  .d-lg-none[role="search"]{
    position:absolute;
    left:var(--mobile-left-safe);
    right:var(--mobile-right-safe);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:center;
    pointer-events:none;
    margin:0;
  }
  .d-lg-none[role="search"] .search-wrapper{
    pointer-events:auto;
    width:100%;
    max-width:260px;
    min-width:0;
  }
  .d-lg-none[role="search"] .input-group{
    pointer-events:auto;
    width:100%;
    min-width:0;
    max-width:260px;
  }
  .d-lg-none[role="search"] .form-control{ font-size:16px !important; }
}

@media (max-width:360px){
  .d-lg-none[role="search"] .input-group{ max-width:210px; }
}

/* Buttons + form radius */
.btn,
.btn.btn-sm{ border-radius:999px !important; }

.form-control,
.form-select,
textarea.form-control{ border-radius:.6rem !important; }

#comments .form-control{ border-radius:.75rem !important; }

.navbar form[role="search"] .input-group{ border-radius:999px !important; }
.navbar form[role="search"] .search-wrapper.search-open .input-group{
  border-radius:18px 18px 0 0 !important;
  border-bottom-color:transparent !important;
  transition:none !important;
}

/* User buttons + sign in */
.btn-user{
  width:35px;
  height:35px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
}
.btn-user:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.45);
}
.btn-user i{ font-size:1.2rem; }
.btn-user:focus,
.btn-user:focus-visible{
  outline:none;
  box-shadow:none;
}

.btn-signin{
  height:35px;
  padding:0 15px 0 5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;
  color:#fff;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:.75rem;
  text-decoration:none;
  transition:.15s;
  white-space:nowrap;
}
.btn-signin:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.45);
}
.signin-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.signin-icon i{ font-size:1.1rem; }

/* Mobile offcanvas nav */
#mobileNavMount .accordion-item{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#mobileNavMount .accordion-button{
  background:transparent;
  color:rgba(255,255,255,.92);
  border:0;
  box-shadow:none;
  padding:.85rem 14px;
  border-radius:10px;
  font-weight:600;
  transition:.15s;
}
#mobileNavMount .accordion-button:not(.collapsed){
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:10px 10px 0 0;
}
#mobileNavMount .accordion-body{ padding:0; }
#mobileNavMount .mobile-expand{
  background:rgba(255,255,255,.06);
  border-radius:0 0 10px 10px;
  padding:8px;
  margin-top:-2px;
}
#mobileNavMount a.mobile-subitem{
  display:block;
  padding:.55rem .65rem;
  color:#e8e8e8;
  font-size:.88em;
  text-decoration:none;
  border-radius:8px;
  margin:2px 0;
  background:transparent;
  transition:.12s;
}
#mobileNavMount a.mobile-subitem:hover{
  color:#fff;
  background:rgba(255,255,255,.04);
}

/* Footer */
.footer-top{
  background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform .12s ease, opacity .12s ease, filter .12s ease;
}
.social-btn img{
  width:37px;
  height:37px;
  display:block;
  filter:brightness(1.35) contrast(1.15);
  opacity:1;
  transition:filter .12s ease, transform .12s ease;
}
.social-btn:hover img{
  filter:brightness(1.55) contrast(1.2);
  transform:translateY(-2px);
}

.footer-mid{ background:#23252a; }

.footer-h{
  font-size:1.2rem;
  font-weight:700;
  color:rgba(255,255,255,.95);
  margin-bottom:.9rem;
}
.footer-list a{
  font-size:.88rem;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  transition:color .12s ease;
}
.footer-list a:hover{ color:#fff; }

.footer-bottom{
  background:var(--nav-bg-color);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-logo{
  height:21px;
  width:auto;
  opacity:.95;
}
.footer-copy{
  font-size:.88rem;
  color:rgba(255,255,255,.70);
}

@media (max-width:575.98px){
  .footer-h{ font-size:1.1rem; }
}

/* Sidebar promo widget */
.side-promo{
  width:100%;
  aspect-ratio:16 / 10;
}
.side-promo-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .15s ease, filter .15s ease;
}
a.side-promo-link:hover .side-promo-img{
  transform:scale(1.02);
  filter:brightness(1.05);
}

/* ── Search: unified Google-style suggestions ──────── */

/* Wrapper that holds input + clear + suggestions */
.search-wrapper{
  position:relative;
  min-width:280px;
}

/* No transition for search forms — instant focus/blur like Google */
.search-wrapper .input-group{
  transition:none !important;
}
/* JS adds .search-focused when input is focused */
.search-wrapper .input-group.search-focused{
  background:#d3d3d3;
  border-color:rgba(0,0,0,.15);
}
.search-wrapper .input-group.search-focused .form-control{ color:#111; }
.search-wrapper .input-group.search-focused .form-control::placeholder{ color:rgba(0,0,0,.65); }
.search-wrapper .input-group.search-focused .input-group-text{ color:#111; }
.search-wrapper.search-open .input-group{
  border-radius:18px 18px 0 0 !important;
  border-bottom-color:transparent !important;
}

/* Clear button */
.search-clear{
  position:absolute;
  right:10px;
  top:0;
  height:35px;
  z-index:5;
  background:none;
  border:none;
  color:#999;
  font-size:.9rem;
  cursor:pointer;
  padding:0;
  display:none;
  align-items:center;
  justify-content:center;
}
.search-clear.visible{ display:flex; }
.search-wrapper .input-group:focus-within ~ .search-clear{ color:#555; }

/* Dropdown container */
.search-suggestions{
  position:absolute;
  top:100%;
  left:0; right:0;
  z-index:1055;
  background:#d3d3d3;
  border:1px solid rgba(0,0,0,.15);
  border-top:0;
  border-radius:0 0 18px 18px;
  max-height:380px;
  overflow-y:auto;
  display:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.search-suggestions.show{ display:block; }

/* Separator line between input and suggestions */
.search-suggestions::before{
  content:'';
  display:block;
  height:1px;
  margin:0 14px;
  background:rgba(0,0,0,.12);
}

/* Suggestion row */
.search-suggestions a{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.55rem 1rem;
  color:#333;
  text-decoration:none;
  font-size:.875rem;
  transition:background .1s;
}
.search-suggestions a:last-child{ border-radius:0 0 18px 18px; }
.search-suggestions a:hover,
.search-suggestions a.active{
  background:rgba(0,0,0,.06);
}

/* Left search icon */
.search-suggestions .sug-search-icon{
  font-size:.85rem;
  opacity:.55;
  flex-shrink:0;
  width:1.1rem;
  text-align:center;
}

/* Title */
.search-suggestions .sug-title{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-suggestions .sug-title b{ font-weight:600; }

/* Type icon (right side) */
.search-suggestions .sug-icon{
  font-size:.9rem;
  opacity:.35;
  flex-shrink:0;
}

/* Empty state */
.search-suggestions .sug-empty{
  padding:.75rem 1rem;
  text-align:center;
  color:rgba(0,0,0,.4);
  font-size:.85rem;
}

/* search results page highlight */
.list-group-item mark{
  background:rgba(59,130,246,.3);
  color:inherit;
  padding:.05em .15em;
  border-radius:2px;
}

/* responsive video embed */
.video-container{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  border-radius:.75rem;
  overflow:hidden;
}
.video-container iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:0;
}