/* =========================================================
   BabbosNL theme - loaded after main.css
   Palette: deep navy / royal purple with gold accents
   ========================================================= */
:root {
  --bb-navy: #0e1330;
  --bb-indigo: #1a2150;
  --bb-card: #20285e;
  --bb-purple: #4a2f8a;
  --bb-violet: #5b3fa6;
  --bb-gold: #e2b450;
  --bb-gold-dark: #9a6f1e;
  --bb-text: #ece9f7;
  --bb-muted: #b9b4d6;
}

body { color: #4a4766; }
h1, h2, h3, .title h1, .banner-content h1, .video-left h1 {
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .5px;
}

/* ---------- Header / nav ---------- */
#header.header-scrolled { background: rgba(14, 19, 48, .96); }
.nav-menu a { color: #fff; }
.nav-menu li:hover > a, .nav-menu > .menu-active > a { color: var(--bb-gold); }
#mobile-nav { background: rgba(14, 19, 48, .97); }
#mobile-nav ul li a:hover { color: var(--bb-gold); }

.bb-logo {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  letter-spacing: .5px;
}
.bb-logo span { color: var(--bb-gold); }
.bb-logo:hover { color: #fff; }

/* ---------- Server status (top-left of the header) ---------- */
#header { padding: 14px 0; }
.banner-area .banner-content { margin-top: -210px; padding-top: 150px !important; }
.bb-status {
  display: inline-flex; flex-direction: column; gap: 9px;
  padding: 13px 20px 12px; border-radius: 18px;
  background: rgba(12, 18, 46, .80);
  border: 1.5px solid rgba(100, 180, 255, .55);
  box-shadow: 0 0 24px rgba(60, 140, 255, .38), inset 0 0 14px rgba(60, 140, 255, .12);
  font-family: "Poppins", sans-serif; color: #dfe8ff !important; line-height: 1.1;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: border-color .3s, box-shadow .3s;
}
.bb-status:hover { border-color: rgba(140, 200, 255, .85); box-shadow: 0 0 30px rgba(60, 140, 255, .55); }
.bb-pill { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.bb-dot { width: 14px; height: 14px; border-radius: 50%; background: #8a93b5; box-shadow: 0 0 6px rgba(138, 147, 181, .6); flex: none; }
.bb-players { font-weight: 600; letter-spacing: .3px; text-transform: none; color: #e4ebff; }
.bb-players:not(:empty)::before { content: "\00b7"; margin-right: 10px; color: #8e9cd0; }
.bb-detail { display: flex; align-items: center; gap: 16px; font-size: 13.5px; font-weight: 500; letter-spacing: .4px; color: #e6ecff; white-space: nowrap; }
.bb-srv { display: inline-flex; align-items: center; gap: 7px; }
.bb-srv i { width: 11px; height: 11px; border-radius: 50%; background: #a3abc8; box-shadow: 0 0 0 2px rgba(163, 171, 200, .25); display: inline-block; }
.bb-srv.up i { background: #3ee07a; box-shadow: 0 0 7px #3ee07a, 0 0 0 2px rgba(62, 224, 122, .25); }
.bb-srv.down i { background: #ff4d5e; box-shadow: 0 0 7px #ff4d5e, 0 0 0 2px rgba(255, 77, 94, .3); }
.bb-srv.down { color: #ffc2c8; }
.bb-peak { color: #d3dcfa; padding-left: 14px; border-left: 1px solid rgba(170, 185, 230, .45); }
.bb-peak:empty { display: none; }
/* states */
.bb-status.is-checking .bb-dot { animation: bbPulse 1.2s ease-in-out infinite; }
.bb-status.is-online .bb-dot { background: #3ee07a; box-shadow: 0 0 6px #3ee07a, 0 0 14px rgba(62, 224, 122, .8); animation: bbGlow 2.4s ease-in-out infinite; }
.bb-status.is-online .bb-state { color: #7dffad; text-shadow: 0 0 8px rgba(62, 224, 122, .45); }
.bb-status.is-offline .bb-dot { background: #ff4d5e; box-shadow: 0 0 6px #ff4d5e, 0 0 14px rgba(255, 77, 94, .7); }
.bb-status.is-offline .bb-state { color: #ff8a95; }
.bb-status.is-offline { border-color: rgba(255, 100, 120, .6); box-shadow: 0 0 24px rgba(255, 70, 90, .3); }
.bb-status.is-local .bb-dot { background: #e2b04a; box-shadow: 0 0 8px rgba(226, 176, 74, .7); }
.bb-status.is-checking .bb-detail, .bb-status.is-local .bb-detail { opacity: .8; }
@keyframes bbPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bbGlow { 0%, 100% { box-shadow: 0 0 5px #3ee07a, 0 0 10px rgba(62, 224, 122, .6); } 50% { box-shadow: 0 0 8px #3ee07a, 0 0 20px rgba(62, 224, 122, .95); } }
@media (prefers-reduced-motion: reduce) { .bb-dot { animation: none !important; } }
#header.header-scrolled .bb-status { padding: 9px 18px 8px; gap: 7px; }
@media (max-width: 768px) {
  #header { padding: 10px 0; }
  .bb-status, #header.header-scrolled .bb-status { padding: 9px 15px; border-radius: 30px; }
  .bb-detail { display: none; }
  .bb-pill { font-size: 14px; letter-spacing: 1px; gap: 8px; }
  .bb-dot { width: 12px; height: 12px; }
}

/* ---------- Big logo in the hero (right side) ---------- */
.banner-area { background-image: url(../img/header-bg-logo.jpg) !important; }
.bb-hero-logo { margin-top: -210px; padding-top: 150px; text-align: center; }
.bb-hero-logo img {
  width: 100%; max-width: 500px; height: auto;
  filter: drop-shadow(0 0 28px rgba(60, 160, 255, .55));
}
@media (max-width: 991.98px) {
  .banner-area .banner-content, .bb-hero-logo { margin-top: 0; }
  .bb-hero-logo { order: -1; padding-top: 110px; }
  .bb-hero-logo img { max-width: 240px; }
  .banner-area .banner-content { padding-top: 10px !important; }
}
@media (max-width: 768px) {
  #header #logo .bb-logo-img img { height: 80px; max-height: none; }
  #header.header-scrolled #logo .bb-logo-img img { height: 64px; }
  .bb-hero-logo { padding-top: 80px; }
  .bb-hero-logo img { max-width: 170px; }
  .banner-area { background-size: cover !important; background-position: 30% bottom !important; }
  .banner-area .fullscreen { height: auto !important; padding-bottom: 300px; }
}

/* ---------- Logo in About ---------- */
.bb-about-logo {
  display: block; width: 170px; height: auto; margin: 0 0 16px -4px;
  filter: drop-shadow(0 4px 10px rgba(20, 30, 80, .25));
}
@media (max-width: 991px) {
  .bb-about-logo { width: 160px; margin: 30px auto 18px; }
}

/* ---------- Hero ---------- */
.banner-area { position: relative; }
.banner-area::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14, 19, 48, .92) 0%, rgba(40, 26, 90, .75) 42%, rgba(74, 47, 138, .15) 70%, rgba(74, 47, 138, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 80%);
  pointer-events: none;
}
.banner-area .container { position: relative; z-index: 1; }
.banner-content h6 { color: var(--bb-gold) !important; letter-spacing: 3px; }
.banner-content .bb-lead { color: var(--bb-text); font-size: 17px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); max-width: 520px; }
.banner-content .primary-btn { margin: 0 6px 10px 0; }
.primary-btn { background: #fff; color: var(--bb-navy); font-weight: 600; }
.primary-btn.bb-gold, .bb-gold { background: var(--bb-gold); color: var(--bb-navy); border: 1px solid var(--bb-gold); }
.primary-btn:hover, .primary-btn.bb-gold:hover { background: var(--bb-violet); border-color: var(--bb-violet); color: #fff; }

/* ---------- Light sections ---------- */
.video-left h6 { color: var(--bb-gold-dark); font-weight: 600; }
.video-left h1 { color: var(--bb-navy); }
.video-left p { color: #4a4766; }
.video-left p span { color: var(--bb-violet); font-weight: 600; }
.video-right .overlay-bg { background: linear-gradient(135deg, rgba(14, 19, 48, .55), rgba(74, 47, 138, .35)); }
.title h1 { color: var(--bb-navy); }
.title p { color: #6b6890; }

/* ---------- Server info (dark) ---------- */
.menu-area {
  background: linear-gradient(rgba(14, 19, 48, .94), rgba(26, 33, 80, .94)), url(../img/menu-bg.jpg) center / cover;
}
.menu-area .title h1 { color: #fff; }
.menu-area .title p { color: var(--bb-muted); }
.single-menu {
  background: var(--bb-card);
  border: 1px solid rgba(226, 180, 80, .25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  color: var(--bb-muted);
  height: calc(100% - 30px);
}
.single-menu h4 { color: #fff; margin: 4px 0; }
.single-menu p { color: var(--bb-muted); }
.single-menu .bb-val { color: var(--bb-gold); font-weight: 600; }
.menu-area .row > [class*="col-"] { display: flex; flex-direction: column; }

/* Round icons in the Server Info cards (blue like the logo) */
.bb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1d2a6b 0%, #111a48 55%, #0a1033 100%);
  border: 2px solid #5fb4ff;
  box-shadow: 0 0 0 3px rgba(95, 180, 255, .18), 0 0 18px rgba(80, 170, 255, .55), inset 0 0 14px rgba(80, 170, 255, .35);
  transition: box-shadow .3s, transform .3s;
}
.bb-icon img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.single-menu:hover .bb-icon { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(95, 180, 255, .28), 0 0 26px rgba(80, 170, 255, .8), inset 0 0 16px rgba(80, 170, 255, .45); }
@media (max-width: 575.98px) {
  .bb-icon { width: 92px; height: 92px; }
  .bb-icon img { width: 70px; height: 70px; }
}

/* ---------- Features ---------- */
.bb-features { background: #fff; }
.bb-feature {
  background: #f6f4fc;
  border-left: 4px solid var(--bb-violet);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 30px;
  height: calc(100% - 30px);
}
.bb-feature h4 { color: var(--bb-navy); margin-bottom: 10px; }
.bb-feature h4 i { color: var(--bb-violet); margin-right: 8px; }
.bb-feature ul { padding-left: 18px; margin: 0; }
.bb-feature li { list-style: disc; color: #4a4766; margin-bottom: 4px; }
.bb-feature li b { color: var(--bb-navy); }
.bb-feature code { color: var(--bb-violet); background: #ebe6f8; padding: 1px 5px; border-radius: 4px; }
.bb-note { font-size: 14px; color: #6b6890; }

/* ---------- Get started (dark purple) ---------- */
.review-area { background: linear-gradient(135deg, #1a2150 0%, #4a2f8a 100%); color: var(--bb-text); }
.review-area .title h1, .review-area h1, .review-area h2, .review-area h4 { color: #fff; }
.review-area .title p, .review-area p { color: var(--bb-text); }
.review-area strong { color: var(--bb-gold); }
.review-area a:not(.genric-btn) { color: var(--bb-gold); text-decoration: underline; }
.review-area .genric-btn.primary-border { background: var(--bb-gold); color: var(--bb-navy); border-color: var(--bb-gold); font-weight: 600; }
.review-area .genric-btn.primary-border:hover { background: #fff; border-color: #fff; color: var(--bb-navy); }
.review-area .single-counter h2 { color: var(--bb-gold); font-size: 22px; }
.bb-steps { background: rgba(14, 19, 48, .35); border-radius: 10px; padding: 24px 26px; }
.bb-steps p { margin-bottom: 10px; }

/* ---------- Community ---------- */
.blog-area .primary-btn { background: var(--bb-violet); color: #fff; border: 1px solid var(--bb-violet); }
.blog-area .primary-btn:hover { background: var(--bb-gold); border-color: var(--bb-gold); color: var(--bb-navy); }

/* ---------- Footer ---------- */
.footer-area { position: relative; }
.footer-area::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(14, 19, 48, .88), rgba(14, 19, 48, .95));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, #000 230px);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, #000 230px);
  pointer-events: none;
}
.footer-area .container { position: relative; z-index: 1; }
.bb-footer-heroes { width: 260px; max-width: 100%; height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
.footer-area p { color: var(--bb-muted); }
.footer-area a, .footer-area .footer-text a, .footer-area .footer-text i { color: var(--bb-gold); }
.footer-area a:hover { color: #fff; }

/* ---------- Download pop-up ---------- */
.bb-modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; align-items: center; justify-content: center; padding: 16px; }
.bb-modal:target, .bb-modal.is-open { display: flex; }
.bb-modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(5, 8, 25, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: default; }
.bb-modal-box {
  position: relative; width: 100%; max-width: 580px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 32px 34px 26px; border-radius: 18px; color: #dfe6ff;
  background: linear-gradient(160deg, #18225a 0%, #0f1640 60%, #0b1033 100%);
  border: 1.5px solid rgba(100, 180, 255, .6);
  box-shadow: 0 0 0 4px rgba(95, 180, 255, .12), 0 0 40px rgba(60, 140, 255, .45), 0 20px 60px rgba(0, 0, 0, .6);
  animation: bbModalIn .22s ease-out; outline: none;
}
@keyframes bbModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bb-modal-box { animation: none; } }
.bb-modal-close {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; line-height: 36px; text-align: center;
  font-size: 28px; color: #cfe2ff !important; border-radius: 50%; border: 1px solid rgba(120, 190, 255, .35);
  transition: background .2s, box-shadow .2s;
}
.bb-modal-close:hover, .bb-modal-close:focus { background: rgba(95, 180, 255, .15); box-shadow: 0 0 12px rgba(95, 180, 255, .5); }
.bb-modal-box h3 { color: #fff; font-size: 26px; margin: 0 40px 6px 0; }
.bb-modal-size { color: #8fd0ff; font-weight: 600; margin-bottom: 18px; }
.bb-modal-size i { margin-right: 6px; }
.bb-modal-steps { padding-left: 0; margin: 0 0 22px; list-style: none; counter-reset: bbstep; }
.bb-modal-steps li { position: relative; padding: 0 0 12px 44px; color: #dfe6ff; line-height: 1.55; counter-increment: bbstep; }
.bb-modal-steps li::before {
  content: counter(bbstep); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; line-height: 28px; text-align: center;
  border-radius: 50%; font-weight: 700; color: #fff; background: #111a48; border: 1.5px solid #5fb4ff; box-shadow: 0 0 10px rgba(95, 180, 255, .5);
}
.bb-modal-steps b { color: #fff; }
.bb-modal-steps code { color: var(--bb-gold); background: rgba(255, 255, 255, .07); padding: 1px 6px; border-radius: 4px; }
.bb-modal-box a:not(.primary-btn):not(.bb-modal-close) { color: var(--bb-gold); text-decoration: underline; }
.bb-modal-dl { display: block; text-align: center; font-size: 17px; padding-top: 6px; padding-bottom: 6px; margin-bottom: 14px; box-shadow: 0 0 18px rgba(226, 180, 80, .45); }
.bb-modal-dl i { margin-right: 8px; }
.bb-modal-help { text-align: center; margin: 0; color: #aab6dc; font-size: 14px; }
html.bb-modal-lock, html.bb-modal-lock body { overflow: hidden; }
@media (max-width: 575.98px) {
  .bb-modal { padding: 10px; }
  .bb-modal-box { padding: 26px 18px 20px; max-height: calc(100vh - 20px); }
  .bb-modal-box h3 { font-size: 21px; }
  .bb-modal-steps li { padding-left: 40px; font-size: 14px; }
}