/* ==========================================================================
   ProjectGaming unified navbar  (pg-navbar)
   --------------------------------------------------------------------------
   Shared design language for projectgaming.gg + vip.projectgaming.gg.
   Keyed on the `.pg-navbar` class so it overrides Bootstrap's defaults
   without fighting Ember's theme variables. This same block is mirrored in
   the homepage's assets/css/projectgaming.css so both navbars are identical.

   Loaded via partials/_style.twig as a plain static file — no webpack
   rebuild required. Safe to remove by deleting that one <link> line.
   ========================================================================== */
:root {
  /* ProjectGaming brand tokens — shared with projectgaming.gg.
     --pg-accent is the exact homepage purple (#5d00ff). */
  --pg-accent:    #5d00ff;
  --pg-accent-2:  #9359ff;
  --pg-ink:       #0b0712;
  --pg-ink-soft:  rgba(17, 12, 26, 0.97);
  --pg-card-bg:   rgba(15, 11, 24, 0.72);
  --pg-border:    rgba(93, 0, 255, 0.30);
  --pg-text:      #f3eefe;
  --pg-text-dim:  rgba(243, 238, 254, 0.66);
}

.pg-navbar {
  --pg-accent:   #5d00ff;
  --pg-accent-2: #9359ff;
  --pg-ink:      #0b0712;

  background: rgba(11, 7, 18, 0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 0 !important;
  border-bottom: 1px solid rgba(122, 43, 255, 0.35) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 0.4rem 0 !important;
  text-shadow: none !important;
}

/* Brand / logo ----------------------------------------------------------- */
.pg-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff !important;
}
.pg-navbar .navbar-brand img {
  max-height: 40px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(122, 43, 255, 0.55));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.pg-navbar .navbar-brand:hover img {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 16px rgba(122, 43, 255, 0.9));
}

/* Links ------------------------------------------------------------------ */
.pg-navbar .navbar-nav .nav-link {
  position: relative;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
  padding: 0.65rem 1rem !important;
  margin: 0 0.1rem;
  border: 0 !important;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.pg-navbar .navbar-nav .nav-link i {
  color: var(--pg-accent-2);
  transition: color 0.2s ease, transform 0.2s ease;
}
/* center-out animated underline */
.pg-navbar .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  height: 2px;
  width: 0;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent-2));
  border-radius: 2px;
  box-shadow: 0 0 10px var(--pg-accent);
  transition: width 0.25s ease;
}
.pg-navbar .navbar-nav .nav-link:hover,
.pg-navbar .navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(122, 43, 255, 0.10);
}
.pg-navbar .navbar-nav .nav-link:hover::after,
.pg-navbar .navbar-nav .nav-link.active::after {
  width: 60%;
}
.pg-navbar .navbar-nav .nav-link:hover i {
  transform: translateY(-1px);
  color: #fff;
}

/* The full link row needs about 1150px, more with the cart, credits and
   avatar, but Bootstrap's container is only 1140px from 1200px to 1399px
   wide, so the links ran into the sign-in button / avatar. Tighten them in
   that range. Below 1200px the links fold into the menu button instead
   (navbar-expand-xl in _navbar.twig). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pg-navbar .navbar-nav .nav-link {
    padding: 0.6rem 0.5rem !important;
    font-size: 0.86rem;
    letter-spacing: 0.035em;
  }
}

/* Dropdowns -------------------------------------------------------------- */
.pg-navbar .dropdown-menu {
  background: rgba(17, 12, 26, 0.97);
  border: 1px solid rgba(122, 43, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  padding: 0.4rem;
}
.pg-navbar .dropdown-item {
  color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  font-weight: 600;
  padding: 0.55rem 0.8rem;
}
.pg-navbar .dropdown-item:hover,
.pg-navbar .dropdown-item:focus {
  background: rgba(122, 43, 255, 0.18);
  color: #fff;
}

/* Buttons (sign in, etc.) ------------------------------------------------ */
.pg-navbar .btn-outline-custom,
.pg-navbar .btn-outline-light {
  border: 1px solid rgba(176, 107, 255, 0.6) !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(122, 43, 255, 0.18), rgba(176, 107, 255, 0.08));
  font-weight: 700;
  border-radius: 10px;
  padding: 0.45rem 1.1rem;
  transition: all 0.2s ease;
}
.pg-navbar .btn-outline-custom:hover,
.pg-navbar .btn-outline-light:hover {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2));
  box-shadow: 0 8px 24px rgba(122, 43, 255, 0.45);
  transform: translateY(-1px);
}

/* Mobile toggler --------------------------------------------------------- */
.pg-navbar .navbar-toggler,
.pg-navbar .navbar-toggler-custom {
  border: 1px solid rgba(122, 43, 255, 0.4) !important;
  border-radius: 10px;
  color: #fff !important;
}
.pg-navbar .navbar-toggler:focus,
.pg-navbar .navbar-toggler-custom:focus {
  box-shadow: 0 0 0 0.2rem rgba(122, 43, 255, 0.35);
  outline: none;
}

/* ==========================================================================
   ProjectGaming component polish (Ember store)
   --------------------------------------------------------------------------
   Light, override-safe accents so the store's cards / buttons / headers /
   footer share the homepage's purple gaming feel. Uses the brand tokens
   above. Nothing here changes Ember's layout, Appearance settings, or theme
   variables — it only restyles surface appearance. Tip: for the cleanest
   result also set Appearance > Primary color to #5D00FF in the admin so
   Bootstrap's own .bg-primary / .text-primary match these accents.
   ========================================================================== */

/* Primary action buttons get the brand gradient + glow */
.btn-custom,
.btn-primary {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2)) !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(93, 0, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-custom:hover,
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(93, 0, 255, 0.5);
}

.btn-outline-custom {
  border: 1px solid rgba(147, 89, 255, 0.6) !important;
  color: var(--pg-accent-2) !important;
  font-weight: 700;
  transition: all 0.18s ease;
}
.btn-outline-custom:hover {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(93, 0, 255, 0.4);
}

/* Cards: subtle purple edge + lift on hover (store packages, panels) */
.card {
  border: 1px solid rgba(147, 89, 255, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(147, 89, 255, 0.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(93, 0, 255, 0.25);
}

/* Page header: brand-tinted glow under the hero/title strip */
.page-header {
  box-shadow: inset 0 -1px 0 rgba(147, 89, 255, 0.25);
}

/* Section/heading accents */
.title {
  letter-spacing: 0.01em;
}

/* Sale / accent badges pick up the brand purple when not custom-colored */
.badge.bg-primary {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2)) !important;
}

/* Footer: faint top divider in brand purple */
.footer {
  border-top: 1px solid rgba(93, 0, 255, 0.25);
}