:root{--primary-color2:#1a1b1e;--primary-color3:#5f51fb;--primary-color4:#c9c9d0;--primary-color5:#f0f2f5;--primary-color6:#00000033;--primary-color7:#8e8e9d;--primary-color8:#f0f0f094;--primary-color11:#fff;--primary-color12:#fff;--primary-color17:#d2d2d2;--primary-color18:#ff3636}
.is_dark{--primary-color2:#eeeff5;--primary-color3:#5f51fb;--primary-color4:#09090c;--primary-color5:#1e1e1f;--primary-color6:#00000033;--primary-color7:#8e8ea3;--primary-color8:#252569e2;--primary-color11:#2c2c2f;--primary-color12:#ff2121;--primary-color17:#424245;--primary-color18:#ff3636}























/* TIP4SERV-ADDITIONAL-CSS DONT TOUCH ME */
/* ========== 0. Page background: dark grey ========== */
body {
  background: #1e1e1e !important;
  background-attachment: fixed;
}

/* ========== 0b. Fade purple hero into grey content ========== */
/* Gradient at bottom of .flat-title-page so it fades into the grey section below */
.flat-title-page {
  position: relative;
}
.flat-title-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--body-bg, #1e1e1e));
  pointer-events: none;
}

/* ========== 1. Only "Minecraft" heading → "Tiktok Username" ========== */
.d-flex.justify-content-between:has(+ #minecraft_link_btn) .title-create-item {
  font-size: 0 !important;
  position: relative;
}
.d-flex.justify-content-between:has(+ #minecraft_link_btn) .title-create-item::after {
  content: "Tiktok Username";
  font-size: 18px;
  font-weight: 600;
  color: inherit;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.d-flex.justify-content-between:has(+ #minecraft_friend_link_btn) .title-create-item {
  font-size: 0 !important;
  position: relative;
}
.d-flex.justify-content-between:has(+ #minecraft_friend_link_btn) .title-create-item::after {
  content: "Tiktok Username";
  font-size: 18px;
  font-weight: 600;
  color: inherit;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

/* ========== 2. Button: "Link Minecraft account" → "Link Tiktok Account" (one line) ========== */
#minecraft_link_btn span,
#minecraft_friend_link_btn span {
  visibility: hidden;
  position: relative;
}
#minecraft_link_btn span::after,
#minecraft_friend_link_btn span::after {
  content: "Link Tiktok Account";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

/* When a username is linked, show the real username instead of "Link Tiktok Account" */
#minecraft_link_btn:has(.fa-times) span,
#minecraft_friend_link_btn:has(.fa-times) span {
  visibility: visible !important;
}
#minecraft_link_btn:has(.fa-times) span::after,
#minecraft_friend_link_btn:has(.fa-times) span::after {
  display: none !important;
}

/* ========== 3. Popup: image + title "Enter Tiktok @Username" ========== */
/* Image at top of popup */
#popup_minecraft_account .modal-body::before,
#popup_minecraft_friend_account .modal-body::before {
  content: "";
  display: block;
  width: 300px;
  height: 150px;
  margin: 0 auto 20px;
  background-image: url('https://i.imgur.com/QedIQ47.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

#popup_minecraft_account .modal-body h3,
#popup_minecraft_friend_account .modal-body h3 {
  font-size: 0 !important;
  position: relative;
}
#popup_minecraft_account .modal-body h3::after,
#popup_minecraft_friend_account .modal-body h3::after {
  content: "Enter Tiktok @Username";
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
}

/* ========== 4. Payment Types as third footer column (like Infocraft | Social Media) ========== */
#footer .row {
  display: flex;
  flex-wrap: wrap;
}
#footer .row::after {
  content: "Payment Types";
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 16px;
  margin-bottom: 12px;
  padding: 0 15px 70px 15px;
  width: 100%;
  max-width: 160px;
  text-align: left;
  box-sizing: border-box;
  background-image: url('https://i.imgur.com/zvOCB1l.png'), url('https://i.imgur.com/msWODmr.png');
  background-repeat: no-repeat;
  background-size: auto 32px, auto 32px;
  background-position: 15px 100%, 15px 52px;
  background-origin: border-box;
}
/* Match footer column width (e.g. col-lg-4) so it sits in the same row */
@media (min-width: 992px) {
  #footer .row::after {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
/* Try multiple selectors in case structure differs */
}

#footer .row:last-child:not(:has(.title-create-item)),
/* ========== 5. Hide "Powered by Tip4Serv.com - Terms of Use & Privacy Policy - Create on Tip4Serv" ========== */
/* Add your exact selector below after inspecting: right-click the text → Inspect → copy the element's class or id.
   Example: .footer-credits { display: none !important; }  or  #footer-bottom { display: none !important; } */
#footer div:has(a[href*="privacy" i]),
footer div:has(a[href*="privacy" i]),
footer .row:has(a[href*="tip4serv" i]),
#footer [class*="footer-bottom"],
#footer p:has(a[href*="tip4serv" i]),
#footer small:has(a[href*="tip4serv" i]),
#footer div:has(a[href*="tip4serv" i]),
#footer .row:has(a[href*="tip4serv" i]),
#footer div:has(a[href*="terms" i]),
footer div:has(a[href*="tip4serv" i]),
footer div:has(a[href*="terms" i]),
#footer [class*="copyright"],
#footer [class*="powered"],
footer [class*="copyright"],
  line-height: 0 !important;
  font-size: 0 !important;
footer [class*="powered"],
#footer > div > div:last-child:not(.row),
footer > div > div:last-child:not(.row) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* TIP4SERV-ADDITIONAL-CSS DONT TOUCH ME */