@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/passion-one');

:root {
  /* Surfaces */
  --bg: #101010;
  --surface: #161616;
  --surface-2: #181818;
  --surface-3: #202020;
  --surface-4: #252525;
  --line: rgba(255, 255, 255, .06);

  /* Text */
  --text: rgb(189, 189, 189);
  --heading: #ffffff;
  --muted: rgba(255, 255, 255, .45);

  /* Accent */
  --primary: #fa4949;
  --primary-soft: rgba(250, 73, 73, .18);

  /* Fill for the Current Deals cards. Lands around #2d2d2d - midway between the
     grey that read too bright and the near-black that read too dark. */
  --tile: rgba(39, 39, 39, .88);


  /* Money - sourced from the Current Deals block, which uses #adff56 for the
     current price and Bootstrap's .text-danger for the struck original. */
  --price: #adff56;
  --price-old: #dc3545;

  --content-primary: var(--surface);
}
[x-cloak] { display: none; }

/* Global */
a,
a:hover {
  text-decoration: none;
}

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

#view {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans', sans-serif;
  min-height: 100vh;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-family: 'Passion One', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Layout */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 1240px;
}

div#content {
  flex:1;
  background: var(--bg);
  position: relative;
}

#content .container {
  padding-bottom: 60px;
  padding-top: 60px;
}

.with-hero #content {
  padding-top: 40px;
}

/* Navigation */
#nav {
  position: relative;
  z-index: 5;
}

#nav .navbar {
  background: var(--content-primary) !important;
}

#nav .nav-link .inline-icon {
  color: var(--primary);
  font-size: 12px;
  margin-left: 3px;
}

.nav-link {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.navbar-expand-lg .navbar-nav {
  align-items: center;
  font-weight: 600;
  gap: 20px;
  text-transform: uppercase;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--primary) !important;
  border-radius: 7px !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color: white !important;
  padding: 14px 20px;
}

/* Three columns so the logo sits dead centre regardless of what's beside it. */
.nav-grid {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}

.nav-left {
  align-items: center;
  display: flex;
  gap: 15px;
}

.copy-ip-btn {
  align-items: center;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 17px;
  height: 48px;
  justify-content: center;
  transition: all .2s ease;
  width: 48px;
}

.copy-ip-btn:hover {
  filter: brightness(.88);
  transform: translateY(-2px);
}

.copy-ip-btn.copied {
  background: #52c956;
}

.store-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-ip {
  color: var(--heading);
  cursor: pointer;
  font-family: 'Passion One', sans-serif;
  font-size: 23px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.store-subtitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

/* The live player count sits inside the subtitle. */
.store-subtitle strong {
  color: var(--primary);
  font-weight: 700;
}

.nav-right {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.nav-btn {
  align-items: center;
  border-radius: 8px;
  color: white !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 1.25px;
  padding: 14px 20px;
  text-transform: uppercase;
  transition: all .2s ease;
  white-space: nowrap;
}

.nav-btn i {
  font-size: 15px;
}

.nav-btn:hover {
  filter: brightness(.88);
  transform: translateY(-2px);
}

.nav-btn-patron {
  background: var(--primary);
}

.nav-btn-discord {
  background: #5865f2;
}

/* The logo is taller than the bar, so it's pinned to the bar's bottom edge and
   pulled down to overhang onto the hero. That keeps the bar short while the
   logo stays large: bar height + 68px overhang = the logo's 180px, leaving 8px
   of clearance above it. An explicit height (rather than max-height) keeps the
   logo's intrinsic width from inflating the grid's centre track. */
.nav-center {
  align-self: end;
  /* block + fit-content shrink-wraps the link to the logo. As a flex container
     it stretched across the whole centre grid track, so the link was clickable
     far to either side of the image. line-height: 0 kills the inline gap. */
  display: block;
  justify-self: center;
  line-height: 0;
  margin-bottom: -60px;
  width: fit-content;
}

.nav-center img {
  display: block;
  height: 180px;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 40px;
  width: auto;
}

/* Header */
#header {
  background: #0c0c0c;
  min-height: 48vh;
  padding: 58px 0px;
  position: relative;
}

#header > .bg {
  overflow: hidden;
}

#header .bg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#header .bg img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

#header .btn-primary {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 18px 20px;
}

#header .header-wrapper {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  overflow: hidden;
}

#header .header-wrapper:after {
  background: linear-gradient(360deg, #161616, #161616e6, transparent);
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#header .header-wrapper .text {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  text-align: center;
  z-index: 5;
}

#header .header-wrapper .text h1 {
  color: white;
  font-size: 64px;
  margin-bottom: -10px;
  text-shadow: 2px 3px 0px #00000057;
}

#header .header-wrapper .text p {
  text-shadow: 1px 2px 0px #00000057;
}

.header-wrapper {
  align-items: center;
  background: var(--surface);
  border-radius: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 450px;
  justify-content: center;
  margin-bottom: -160px;
  position: relative;
  z-index: 5;
}

/* Footer */
#foot {
  background: #0a0a0a;
  color: var(--text);
  margin-top: auto;
  padding: 60px 0px;
  position: relative;
}

#foot a {
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

#foot .extras {
  display: flex;
  gap: 40px;
  opacity: .55;
}

#foot .footer-bottom {
  align-items: center;
}

#foot .footer-bottom .ms-auto {
  text-align: right;
}

#foot .footer-bottom h1 {
  align-items: center;
  color: white;
  display: flex;
  font-size: 28px;
  height: 50px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

#foot .footer-bottom p {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.25px;
  margin: 0px;
  opacity: .45;
  text-transform: uppercase;
}

#foot .footer-top {
  padding-bottom: 50px;
  padding-top: 20px;
}

#foot .footer-top .links {
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: center;
}

#foot .socials {
  align-items: center;
  display: flex;
  gap: 30px;
  height: 50px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#foot .socials a {
  font-size: 20px;
}

/* Buttons */
.btn-primary {
  align-items: center;
  background: var(--primary) !important;
  border-radius: 7px !important;
  color: white !important;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 1.24px;
  min-width: 170px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
}

/* Feed */
.meta {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 12px;
  letter-spacing: 1.25px;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.meta.muted time {
  color: inherit !important;
}

.meta time {
  font-size: inherit !important;
}

.muted {
  color: var(--muted);
}

.post-feed .indicators {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.post-feed .indicators > div {
  background: var(--surface-4);
  border-radius: 100px;
  cursor: pointer;
  display: block;
  height: 12px;
  width: 12px;
}

.post-feed .indicators > div.active {
  background: var(--primary);
  border-radius: 6px;
  height: 20px;
  transform: rotate(45deg);
  width: 20px;
}
.placeholder-image {
  background: url(../images/placeholder.jpeg);
  background-size: cover;
  height: 100%;
  width: 100%;
}

/* Cards / Items */
.item .image {
  border-radius: 10px;
  height: 306px;
  overflow: hidden;
  width: 592px;
}

.item .read-more a {
  align-items: center;
  color: var(--primary);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  letter-spacing: 1.25px;
  margin-top: 15px;
  text-transform: uppercase;
}

.item .text {
  flex: 1;
}

.item .text h1 {
  font-size: 51px;
  letter-spacing: 0;
}

.item .text p {
  font-size: 14px;
  line-height: 26px;
  margin: 0px;
}

.item .text time {
  color: var(--primary);
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.25px;
  margin-bottom: 3px;
  text-transform: uppercase;
}

/* Small Cards */
.small .item {
  flex: 1;
}

.small .item .image {
  height: 205px;
  width: 100%;
}

.small .item .image img {
  height: 100%;
  width: 100%;
}

.small .item h1 {
  font-size: 32px;
}

.small .placeholder-image {
  background-position: center;
}

/* Server Wrapper */
.server-wrapper {
  display: flex;
}

.server-wrapper > .col {
  flex: 1;
  text-align: center;
}

.server-wrapper .col {
  border-radius: 7px;
  flex: 1;
  padding: 20px;
}

/* ============================================== */
#header .muted {
    color: rgba(255, 255, 255, .55);
}
.card {
    background: var(--surface);
    color: var(--text);
    border: none;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 35%), 0 8px 10px -6px rgb(0 0 0 / 25%);
    border-radius: 10px;
}
.card .card-body {
    padding: 30px;
}
.card.page .card-body {
    padding: 40px;
}

.card .text {
    line-height: 2;
    font-weight: 600;
    color: var(--text);
}

.no-hero #content .container {
    padding-top: 40px;
}

.sidebar .nav-link.active {
    color: var(--primary);
}

.sidebar .nav-link {
    color: var(--text);
}

.user-card h3 {
    margin: 0px;
    font-size: 26px;
}

.user-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-card img {
    max-width: 105px;
}

.user-card p {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    margin:0;
}

.card.page .card-header {
    border: none;
    padding: 25px;
}

.rule-sections .card.page .card-body {
    padding: 25px;
}

.rule-sections .card.page .card-body p {
    margin: 0px;
}

.avatar {
    overflow: hidden;
    max-width: 24px;
    border-radius: 6px;
}

.avatar img {
    max-width: 100%;
}

.meta.muted {
    align-items: center;
}

.meta.muted time {
    margin-bottom: 0px !important;
}
.featured-packages .package:first-child {
    outline: 2px solid var(--primary);
    box-shadow: 0px 0px 30px rgba(250, 73, 73, .25);
}
.active>.page-link, .page-link.active {
    background: var(--primary);
    border-color: transparent;
    color: white !important;
    box-shadow: none !important;
}
.space-y-4 > * {
    margin-bottom: 25px;
}
.with-sidebar .page {
    margin-bottom: 30px;
}
.comment {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 0px;
    border-left: 3px var(--primary) solid !important;
}

.comment .small.mb-0.ms-2 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    font-size: 12px;
    color: var(--muted);
}

.comment img {
    border-radius: 6px;
}

.font-bold {
    font-weight: 600;
    font-size: 15px;
}

.comment .card-body {
    padding: 20px 25px;
}

.comment .card-footer {
    border-color: var(--line) !important;
    padding: 14px 25px;
}
@media only screen and (max-width: 768px) {
    .col.store-sidebar {
        margin-top: 0px !important;
    }
    
    .recent-block,.top-donor-block {
        display: none !important;
    }
    
    /* The hero stays on phones - Current Deals is the main merchandising slot,
       and hiding the header took the promoted packages with it. Everything here
       just trades the fixed desktop geometry for auto height: the wrapper is a
       fixed 450px (250px when .small) and overlaps the content below by -160px,
       neither of which survives stacked cards on a narrow screen. */
    div#header,
    div#header.small {
        min-height: 0;
        padding: 20px 0 28px;
    }

    /* Beats the later `.small .header-wrapper` height on ID specificity. */
    #header .header-wrapper {
        height: auto;
        margin-bottom: 0;
        padding: 22px 16px 26px;
        gap: 12px;
    }

    #header .header-wrapper .text h1 {
        font-size: 38px;
        margin-bottom: 0;
    }

    #content .container {
        padding-top: 0px !important;
    }
    
    #foot .footer-top {
        display: none !important;
    }
    
    #foot .footer-bottom {
        flex-direction: column;
    }
    
    #foot .footer-bottom .ms-auto {
        text-align: center;
        margin: 0 auto;
        justify-content: center;
    }
    
    #foot .socials {
        justify-content: center;
        margin-top: 10px;
    }
    
    #foot .footer-bottom h1, #foot .footer-bottom p {
        margin: 0 auto;
        text-align: center;
        flex: 1;
        justify-content: center;
    }
  .package-actions {flex-wrap:wrap;flex: 0 0 100%;}
  .package-actions .btn-primary {
      flex: 1;
  }
  .crate-amounts {
      flex: 0 0 100%;
  }
  .crate-amount {
      flex: 1;
  }
  /* Bootstrap's .col wants equal-width columns in a row; stack them instead so
     each deal card gets the full width. Scoped to #header because the base
     .featured-packages rule sits further down the file and would otherwise win
     the padding on source order. */
  #header .featured-packages {
    flex-direction: column;
    padding: 0;
  }
  #header .featured-packages .col {
    flex: 0 0 auto;
    width: 100%;
  }
  div#user-stats .row {
      flex-direction: column;
      gap: 25px;
  }
  .stats-grid {
    display: block !important;
  }
  .store-sidebar, .stats-sidebar {
      width: 100% !important;
      margin-top: 30px !important;
  }
  .stats-sidebar {
    margin-bottom:30px !important;
  }
  .card-icon {
      display: none !important;
  }
  .card-icon {
      display: none !important;
  }
  .store-header .text-left {
      display: none !important;
  }
  .store-header .ml-auto {
      margin-right: auto !important;
      flex: 1 !important;
  }
  .user-btn {
      text-align: left !important;
  }
  .user-btn .avatar {
      order: -1 !important;
  }
  .store-header .divider {
      display: none !important;
  }
  .card-btn {
      margin-left: auto !important;
  }
  .category-list {
    flex-direction: column;
    width: 100%;
}
    .category-item {
        width: 100%;
    }
    .with-hero #content {
        padding-top: 25px !important;
    }
    /* Stack the bar: logo on top, copy button and store text centred beneath. */
    .nav-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 14px 0;
        row-gap: 14px;
    }
    /* No overhang on mobile: the bar stacks with the logo on top, so the -60px
       would drop it onto the copy button and nav buttons rather than the hero. */
    .nav-center {
        align-self: center;
        margin-bottom: 0;
        order: -1;
    }
    .nav-center img {
        height: 124px;
    }
    .nav-left {
        justify-content: center;
    }
    .nav-right {
        justify-content: center;
    }
    .nav-btn {
        padding: 12px 16px;
    }
    #nav .navbar {
        border-bottom: 2px solid var(--line);
    }
    
    .navbar-nav li {
        flex: 1;
        width: 100%;
    }
    
    #nav .navbar-nav li a {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 17px;
        border-top: 1px solid var(--line);
        text-align: center;
        justify-content: center;
        font-family: 'Passion One', sans-serif;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 20px;
    }
    
    #nav .navbar-nav {
        gap: 0px !important;
        margin-bottom: 0px !important;
    }
    
    #nav .navbar-nav li a i {
        display: none !important;
    }
    
    #nav ul.navbar-nav.nav.nav-pills {
        width: 100%;
    }
    #sidebarNav {
      display:none;
    }
    #store-toggle {
        display: block !important;
    }
}
@media only screen and (min-width: 768px) {
    #store-toggle {
        display: none !important;
    }
    #header .bg img {
        object-position: center -108px;
    }
    /* Short bar; the logo overhangs it rather than being contained by it.
       Padding zeroed so the full 120px is usable and the logo sits flush with
       the top of the bar instead of being pushed down by navbar padding. */
    #nav .navbar {
        height: 120px;
        padding-bottom: 0;
        padding-top: 0;
      }
  .sticky-sidebar {
    position: sticky;
    top: 2rem; 
    align-self: flex-start; 
    z-index: 2; 
  }
  #sidebarNav {
    display:block;
  }
}
.dropdown-toggle::after {
    display: none;
}

.dropdown-toggle h4 i {margin-left: auto;position: relative;top: -2px;font-size: 18px;color: rgba(250, 73, 73, .35);transition: all .15s ease;}
img.package-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.dropdown-toggle h4 {
    flex: 1;
    display: flex;
    align-items: center;
}
@media (min-width: 200px) {
    .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
    }
  }
  
  @keyframes slideIn {
    0% {
      transform: translateY(-10px);
      opacity: 0;
    }
    100% {
      transform: translateY(0rem);
      opacity: 1;
    }
    0% {
      transform: translateY(-10px);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
    }
    0% {
      -webkit-transform: translateY(-10px);
      -webkit-opacity: 0;
    }
  }
  
  .slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
  }
.dropdown-menu {
    width: 100%;
    background: var(--primary);
    border: none !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    margin-bottom: 0px !important;
    margin-top: -5px !important;
    padding: 0px !important;
}

.dropdown-toggle.show h4 i {
    transform: rotate(180deg);
}

.dropdown-item {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: transparent !important;
    color: white !important;
    font-size: 19px;
    padding: 15px 20px !important;
    border-top: 2px solid #ffffff24 !important;
    text-shadow: 0px 2px 1px #00000026;
}

li:first-child .dropdown-item {
    border: none !important;
}
#sidebarNav {
    margin-bottom: 25px;
    padding: 0px;
}

#sidebarNav .category-item {
    border-color: transparent !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 35%), 0 8px 10px -6px rgb(0 0 0 / 25%);
    background: var(--surface) !important;
    padding: 20px !important;
}
.Ranks.category-item {
    order: -1;
}
.category-package-price-disc {
    text-decoration: line-through !important;
    color: var(--price-old) !important;
}
.page-link {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text) !important;
    font-weight: 600;
    font-size: 14px;
    box-shadow: none !important;
    padding: 10px 15px;
}

.disabled>.page-link, .page-link.disabled {
    background: var(--surface-2);
    color: var(--muted) !important;
}

.btn-primary h2 {
    color: inherit;
    margin: 0;
    font-size: 26px;
}

.page-link {
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 1px;
}

.wrapper--art:before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    background-color: inherit;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-position: bottom;
    -webkit-mask-position: bottom;
}
.blocky:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointedSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointed:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 12px;
    mask-size: 181px 12px;
    height: 12px;
    top: -12px;
}
.curveSm:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 7px;
    mask-size: 76px 7px;
    height: 7px;
    top: -7px;
}
.curve:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 140px 15px;
    mask-size: 140px 15px;
    height: 15px;
    top: -15px;
}
.curveLg:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 20px;
    mask-size: 181px 20px;
    height: 20px;
    top: -20px;
}
.waveXs:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 37px 7px;
    mask-size: 37px 7px;
    height: 7px;
    top: -7px;
}
.waveSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 8px;
    mask-size: 76px 8px;
    height: 8px;
    top: -8px;
}
.wave:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 11px;
    mask-size: 76px 11px;
    height: 11px;
    top: -11px;
}
.waveLg:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 144px 21px;
    mask-size: 144px 21px;
    height: 21px;
    top: -21px;
}

#header.small {
    min-height: 27vh;
}

.small .header-wrapper {
    height: 250px;
}

/* */
.card-header {
    padding: 25px;
    text-align: center;
    background: transparent;
    border-color: var(--line);
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: var(--heading);
    font-family: 'Passion One', sans-serif;
    font-size: 23px;
    line-height: 1;
}
.user-meta {
    display: flex;
    gap: 10px;
    flex: 1;
    align-items: center;
}

.stat-col .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    padding: 18px 25px;
    justify-content: space-between;
}

.stat-col .card-body {
    padding: 0px;
}

.list-group-numbered>.list-group-item::before {
    font-size: 13px;
    color: var(--muted);
}

.stat-col span.float-right {
    background: var(--surface-3);
    min-width: 56px;
    text-align: center;
    border-radius: 100px;
    color: var(--text);
    font-size: 13px;
    position: relative;
    padding: 3px;
    top: 0px;
    font-weight: 800;
}

.user-meta a {
    font-weight: 600;
    font-size: 15px;
}

.stat-dd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

.stat-dd small {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    display: block;
    color: var(--muted);
}

.stat-dd dd {
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 0px;
    line-height: 1;
    font-family: 'Passion One', sans-serif;
}

.top-stats .stat-col .card-body {
    padding: 25px;
    display: flex;
    align-items: center;
}

.top-stats .user {
    line-height: 1;
    flex: 1;
}

.top-stats .user h3 {
    margin: 0px;
}

.top-stats .avatar {width: 84px;position: relative;height: 84px;max-width: none;}

.top-stats .user .label {
    display: inline-flex;
    padding: 5px 20px;
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    color: white;
    background: var(--primary) !important;
    border-radius: 6px;
}
/* ======================= */
div#store-toggle {
    background: var(--primary);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    margin-bottom: 25px;
    text-shadow: 1px 2px 0px #0000003b;
    cursor: pointer;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

div#store-toggle * {
    margin: 0;
    line-height: 1;
}

div#store-toggle h1 {
  font-size: 30px;
    color: white;
}

#store-toggle p {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    opacity: .75;
}

.ml-auto {
    margin-left: auto;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.store .card-header h1, .store .card-header p {
    margin: 0;
    line-height: 1;
}

.store .card-header h1 {
    font-size: 24px;
}

.store .card-header p {
    font-size: 17px;
    color: var(--primary);
}
.store-sidebar, .stats-sidebar {
    flex: 0 0 auto;
    width: 30%;
}
.user-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.user-btn .avatar {
    order: 5;
    max-width: 39px;
}

.card-btn {
    width: 42px;
    height: 42px;
    background: var(--primary-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 19px;
    cursor: pointer;
}

.store .card-header .divider {
    width: 1px;
    height: 42px;
    background: var(--line);
}

.store .card-header {
    align-items: center;
    gap: 20px;
}

.card-icon {
    max-width: 50px;
}

.card-icon img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
}

.card-text h3 {font-size:40px;position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;}

.card-text h3:after {
    content: "";
    width: 65px;
    height: 5px;
    background: var(--primary);
    margin-top: 5px;
}

.recent-users {
    align-items: center;
    justify-content: center;
}
.recent-block {
    display: flex;
    align-items: center;
    background: var(--surface);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 35%), 0 8px 10px -6px rgb(0 0 0 / 25%);
    padding: 15px !important;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.recent-users {
    display: flex;
    width: 100%;
}

.recent-users img {
    max-width: 100%;
    border-radius: 4px;
}

.r-user {
    width: 24px;
    text-align: center;
    margin-right: 10px;
    border-radius: 5px;
}

.recent-block .icon i {
    font-size: 17px;
    position: relative;
    top: 0px;
    color: var(--text);
}

.recent-block .icon {
    display: flex;
    margin-right: 15px;
}
.top-donor-block {
    display: flex;
    background: var(--surface);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 35%), 0 8px 10px -6px rgb(0 0 0 / 25%);
    align-items: center;
    border-radius: 10px;
}
.checkout-view .card.category-header {
    margin-bottom: 25px;
}
.u-avatar {
    width: 90px;
    height: 90px;
    overflow: hidden;
    margin-top: -10px;
}
.featured-packages .package-icon {
    position: relative;
}
#header .alert.alert-info {
    text-align: center;
    background: var(--primary-soft);
    color: white;
    border-color: var(--primary) !important;
}
a.nav-link.nav-active {
    color: var(--primary);
}
.u-avatar img {
    width: 64px;
    margin-left: 10px;
}
.quantity input {
    height: 52px;
    margin: 0px;
    max-width: 52px;
    text-align: center;
}
.featured-packages .package-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.featured-packages .package-icon i {
    color: white !important;
    font-size: 26px;
}
.s-name {
    font-size: 18px;
    color: var(--heading);
    font-family: 'Passion One', sans-serif;
    font-weight: 700 !important;
    font-size: 21px;
    line-height: 1;
    text-transform: uppercase;
}

.s-desc {
    font-size: 14px;
    margin-top: -3px;
}

.featured-packages {
    position: relative;
    z-index: 5;
    color: white;
    width: 100%;
    padding: 0 30px;
    margin-top: 10px;
}
.product-buttons {
    flex: 1;
}
#notification-alert {
    margin-bottom: 20px;
    text-align: center;
    background: var(--primary);
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: #ffffff;
    font-family: 'Passion One', sans-serif;
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 4%), 0 8px 10px -6px rgb(0 0 0 / 3%);
    border-radius: 10px;
    border: none !important;
    padding: 25px !important;
}
.modal-body p {
    margin: 0px;
    text-align: center;
}
.featured-packages h4 {color: inherit;}

.featured-packages .package {
    cursor: pointer;
    /* Neutral grey: a white tint glowed against the hero, pure black went too
       heavy. Slightly translucent so the frosted-glass blur still reads. */
    background: var(--tile);
    border: 1px solid var(--line);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(7px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 4%), 0 8px 10px -6px rgb(0 0 0 / 3%);
    /* Anchors the corner ribbons and clips them to the card. The :first-child
       highlight uses outline, which is drawn outside the box and survives. */
    position: relative;
    overflow: hidden;
}

/* Tag-driven corner ribbons. Colours are set inline from the theme settings;
   everything here is geometry. */
.pkg-ribbon {
    position: absolute;
    width: 150px;
    padding: 3px 0;
    text-align: center;
    /* letter-spacing leaves a trailing gap after the last glyph, which drags
       centred text a hair left. Indent by the same amount to cancel it. */
    text-indent: 1px;
    font-family: 'Passion One', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* The visible strip is whatever the card corner doesn't clip, and that piece is
   symmetrical about the corner's 45 degree bisector. So the band's centre has to
   sit ON that bisector - equal distance from both edges - or the text reads
   off-centre even though it is centred in its own box. Anchoring with
   translate(-50%, -50%) puts the centre on the offset point exactly, whatever
   height the font and padding work out to.

   text-shadow offsets rotate with the band as well, so each side carries its
   own hard offset - both work out to a straight-down shadow on screen. The
   second, blurred layer is what actually buys legibility: it sits at 0 0, so it
   is rotation-independent and reads the same on either side, and it separates
   the text from busy or light-coloured ribbon fills. */
.pkg-ribbon--left {
    top: 30px;
    left: 30px;
    transform: translate(-50%, -50%) rotate(-45deg);
    text-shadow: -1px 1px 0 #000000b3, 0 0 4px #00000099;
}

.pkg-ribbon--right {
    top: 30px;
    right: 30px;
    transform: translate(50%, -50%) rotate(45deg);
    text-shadow: 1px 1px 0 #000000b3, 0 0 4px #00000099;
}

/* Icon column. Only ever holds the icon plus an optional under-icon band, so it
   hugs its contents and lets the flex gap on .package handle the space to the
   text block. */
.featured-packages .package-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Straight horizontal band under the icon - no rotation, so it stays in normal
   flow instead of being anchored to a corner. width:auto plus align-self:stretch
   makes the column size to whichever is wider, the 72px icon or the label, so
   short text still reads as a full-width band under the icon and longer text
   widens the column rather than being ellipsised. */
.featured-packages .pkg-ribbon--under {
    position: static;
    width: auto;
    max-width: 150px;
    align-self: stretch;
    transform: none;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 6px;
    text-shadow: 0 1px 0 #000000b3, 0 0 4px #00000099;
}
.checkout-view .packages.row.mt-4 {
    margin: 0px !important;
    padding: 0px !important;
}
.featured-packages .package-text h4,.featured-packages .package-text p {
    margin: 0;
}

.featured-packages .package-text h4 {
    font-size: 19px;
}

.featured-packages .package-text p {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.featured-packages .package-icon {
    /* A hair lighter than the tile behind it so it still reads as its own
       square, without the old 10% white wash glowing against the dark card. */
    background: rgba(255, 255, 255, .07);
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.featured-packages .price {
    color: var(--price) !important;
}

.store #header .header-wrapper .text h1 {
    font-size: 46px;
}

.modal-content {
    border: none !important;
}

.modal-header {
    text-align: center;
    justify-content: center;
    display: flex;
}

.modal-title {
    font-size: 30px !important;
    flex: 1;
}

.modal-header .btn-close {
    position: absolute;
    right: 20px;
    display: none;
}

.modal-dialog {
    margin-top: 100px !important;
    max-width: 580px !important;
}

.modal-body {
    padding: 25px;
}

.form-control-lg {
    font-size: 20px;
    text-align: center;
    color: #ffffff;
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.form-control {
    box-shadow: none !important;
    border: 2px solid var(--primary) !important;
    background: rgba(250, 73, 73, .14) !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
}

.form-control::placeholder {
    color: var(--primary);
}

.btn {
    border-color: transparent !important;
}

.btn-block {
    width: 100%;
}

.category-list .icon {
    width: 42px;
    height: 42px;
    background: var(--primary-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 19px;
    cursor: pointer;
}

.category-item h4 {margin: 0px;}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.category-item {
    border: 1px solid var(--line);
    flex: 1;
    background: var(--primary);
    padding: 16px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    min-width:200px;
}

/* */
.stats-sidebar {
    text-align: center;
}

.stats-sidebar .user-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
    margin-top: 15px;
}

.stats-sidebar .rank span {
    background: var(--primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 20px;
    min-width: 140px;
    border-radius: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.stats-sidebar .username {
    font-weight: 900;
    font-size: 20px;
    color: var(--heading);
}

.stats-sidebar .user-small-meta {
    font-weight: 600;
    font-size: 14px;
    margin-top: 5px;
    color: var(--muted);
}

.stats-sidebar .stats-avatar {
    width: 120px;
    height: 120px;
    background: var(--surface-3);
    border-radius: 100px;
    margin: 0 auto;
}

.stats-sidebar .stats-avatar {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18px;
}

.stats-sidebar .stats-avatar img {
    max-width: 70px;
}

.stats-sidebar {
    position: relative;
}

.player-indcation {
    position: absolute;
    background: #f32d1e;
    width: 12PX;
    height: 12PX;
    border-radius: 100PX;
    TOP: 0;
    RIGHT: 0;
    MARGIN: 25px;
    box-shadow: 0px 0px 30px red;
}

.player-indcation.online {
    background: #52c956;
    box-shadow: 0px 0px 30px #52c956;
}
.modal-body {
    max-height: 500px;
    overflow-y: auto;
}
li.list-group-item.header {
    border: none;
    background: var(--surface-3);
    color: var(--muted);
    padding: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.list-group-item {
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    background: transparent;
    border-color: var(--line);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-bg-primary {
    background: var(--primary) !important;
}

.list-group .badge {
    padding: 5px 6px;
}

.package-text h2,.package-text p {
    margin: 0;
}

.packages {
    gap: 25px;
    flex-direction: column;
}
.package-image {
    background: rgba(250, 73, 73, .22) !important;
}
.package-image.placeholder-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 26px;
}
.package-image {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
}
strong.total {
    color: var(--price);
}
.login-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

a,a:hover,a:focus {
    color: var(--primary);
}

.package .card-body {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    gap: 20px;
}

.package-text .price {
    font-weight: 700;
    margin-top: -3px;
    color: var(--price);
}

.package-text h2 {
    font-size: 26px;
}
.checkout-actions .btn {
    padding: 20px !important;
    height: auto;
}

.btn-success {
    background: var(--primary) !important;
}
.btn {
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    font-size:14px;
    padding: 15px 20px;
    height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.package-actions {
    gap: 15px;
    display: flex;
}

.btn-info {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* ===== Patron page ===== */

.patron-tier {
    margin-bottom: 35px;
}

.patron-tier-bar {
    border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 35%), 0 8px 10px -6px rgb(0 0 0 / 25%);
    color: #101010;
    font-family: 'Passion One', sans-serif;
    font-size: 25px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    padding: 18px 25px;
    text-align: center;
    text-transform: uppercase;
}

.patron-grid {
    row-gap: 25px;
}

.patron-card {
    height: 100%;
}

.patron-card .card-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px 20px;
    text-align: center;
}

.patron-icon {
    color: var(--primary);
    font-size: 20px;
}

.patron-image img {
    height: 120px;
    object-fit: contain;
    width: 120px;
}

.patron-player-name {
    color: var(--primary);
    font-family: 'Passion One', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
    word-break: break-word;
}

.patron-subtitle {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.25px;
    margin: 0;
    text-transform: uppercase;
}

/* ===== Login platform picker (Java / Bedrock) ===== */

.platform-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.platform-btn {
    align-items: center;
    background: var(--surface-3);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    letter-spacing: 1.25px;
    padding: 16px 20px;
    text-transform: uppercase;
    transition: all .2s ease;
}

.platform-btn i {
    font-size: 16px;
}

.platform-btn:hover {
    background: var(--surface-4);
    color: var(--heading);
}

.platform-btn.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--heading);
}

.platform-hint {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: -6px;
}

.platform-hint strong {
    color: var(--primary);
}

/* ===== Money =====
   These spots had no colour rule and were inheriting body/heading text. */

.category-package-price,
.product-price h3,
.subtotal p,
.cart-table td.price span,
.cart-table td.total > span,
.money {
    color: var(--price);
}

/* Original price on sale. The template marks this up with Tailwind's
   line-through class, which never applied because Tailwind isn't loaded. */
.product-price .line-through {
    color: var(--price-old);
    text-decoration: line-through;
}

/* On the cart the card-header subtitle holds the order total. */
.checkout-view .card-header p {
    color: var(--price);
}

/* ===== Crate upsell ===== */

/* Tailwind isn't loaded, so the flex-1 class on .package-text was inert and the
   text block sized to the product name. Without it the pickers sit wherever the
   name ends instead of hugging the actions. */
.flex-1 {
    flex: 1 1 auto;
    min-width: 0;
}

.crate-package .card-body {
    row-gap: 15px;
}

.crate-amounts {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.crate-amounts:empty {
    display: none;
}

.crate-amount {
    background: var(--surface-3);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    min-width: 54px;
    padding: 15px 12px;
    transition: all .2s ease;
}

.crate-amount:hover {
    background: var(--surface-4);
    color: var(--heading);
}

.crate-amount.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--heading);
}

.crate-tag {
    background: var(--surface-3);
    border-radius: 6px;
    color: var(--muted);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.25px;
    margin-top: 8px;
    padding: 6px 12px;
    text-transform: uppercase;
    transition: all .2s ease;
}

.crate-tag:empty {
    display: none;
}

.crate-tag.is-bonus {
    background: var(--primary);
    color: #ffffff;
}

/* ===== Dark palette: Bootstrap defaults ===== */

.modal-content {
    background: var(--surface);
    color: var(--text);
}

/* The package modal's contents are wrapped one level deeper so the purchase
   scope survives being copied out of the product page. Keep the header/body/
   footer stacking the way Bootstrap expects. */
.modal-content > .pn-modal-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

.modal-header,
.modal-footer,
.card-footer,
.dropdown-divider,
hr {
    border-color: var(--line) !important;
}

.card-footer {
    background: rgba(255, 255, 255, .03);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--heading);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--text);
    --bs-list-group-border-color: var(--line);
}

input,
textarea,
select,
.form-select {
    background-color: var(--surface-3);
    border: none;
    color: var(--text);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdbdbd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

::placeholder {
    color: rgba(255, 255, 255, .4);
    opacity: 1;
}

.text-muted,
.text-body-secondary {
    color: var(--muted) !important;
}

.alert {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
}

.alert-danger { border-color: #dc3545; }
.alert-info { border-color: #17a2b8; }
.alert-success { border-color: #28a745; }
.alert-warning { border-color: #b38706; }

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--surface-4);
}