/* DiamondSMP Radiant Blue Theme */
/* Keeps Tebex real login, basket, checkout, package buttons working. */

:root {
  --ds-dark: #020817;
  --ds-blue-1: #00152f;
  --ds-blue-2: #003e86;
  --ds-blue-3: #009dff;
  --ds-cyan: #67f6ff;
  --ds-green: #35f06f;
  --ds-green-2: #08a947;
  --ds-border: rgba(103, 246, 255, .32);
  --ds-shadow: 0 18px 45px rgba(0, 0, 0, .42);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #020817 !important;
  color: #fff !important;
  overflow-x: hidden !important;
}

body.ds-theme-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(180deg, rgba(0, 42, 110, .28), rgba(0, 6, 20, .88) 60%, #000),
    var(--ds-bg-image) center top / cover fixed no-repeat,
    radial-gradient(circle at 50% 8%, rgba(0, 194, 255, .30), transparent 34%),
    linear-gradient(135deg, #001437, #004ca8 45%, #000b22);
}

body.ds-theme-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(103, 246, 255, .12), transparent 26%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .72));
}

/* Particles */
.ds-particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.ds-particle {
  position: absolute;
  top: -40px;
  width: 6px;
  height: 14px;
  border-radius: 999px;
  background: rgba(103, 246, 255, .75);
  box-shadow: 0 0 15px rgba(103, 246, 255, .9);
  animation: ds-fall linear infinite;
  opacity: .7;
}

@keyframes ds-fall {
  to {
    transform: translate3d(var(--move-x), 110vh, 0) rotate(360deg);
    opacity: .08;
  }
}

/* Keep Tebex header working */
header,
.header,
.site-header,
.navbar,
.navigation,
[class*="header"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative;
  z-index: 9500;
}

/* Real Tebex login/account button */
a[href*="login"],
a[href*="username"],
a[href*="account"],
button[class*="login"],
button[class*="account"] {
  background: rgba(255, 255, 255, .96) !important;
  color: #061222 !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
}

/* Real Tebex basket/checkout button */
a[href*="basket"],
a[href*="cart"],
a[href*="checkout"],
button[class*="basket"],
button[class*="cart"],
button[class*="checkout"] {
  background: linear-gradient(180deg, var(--ds-green), var(--ds-green-2)) !important;
  color: #001d0b !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  border: 0 !important;
  box-shadow: 0 8px 0 rgba(0, 82, 28, .55), 0 14px 26px rgba(49, 233, 111, .25) !important;
}

/* Top nav */
.ds-top-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 9px 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 58, 125, .62), rgba(0, 9, 34, .78));
  border: 1px solid rgba(103, 246, 255, .28);
  box-shadow: 0 0 28px rgba(0, 180, 255, .22), inset 0 0 18px rgba(103, 246, 255, .08);
  backdrop-filter: blur(8px);
}

.ds-top-nav a {
  color: #a5fbff !important;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(103, 246, 255, .7);
  position: relative;
}

.ds-top-nav a.active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -8px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #67f6ff, #008cff);
  box-shadow: 0 0 18px #67f6ff;
}

/* Hero only home/donators */
.ds-hero {
  width: min(1220px, 94vw);
  margin: 78px auto 32px;
  min-height: 250px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  position: relative;
}

body:not(.ds-page-home):not(.ds-page-donators) .ds-hero {
  display: none !important;
}

.ds-hero-logo {
  display: grid;
  place-items: center;
}

.ds-hero-logo img {
  width: min(480px, 40vw);
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(103, 246, 255, .85))
    drop-shadow(0 20px 28px rgba(0, 0, 0, .55));
  animation: ds-logo-pop 1.9s ease-in-out infinite;
  transform-origin: center;
}

@keyframes ds-logo-pop {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-13px) scale(1.07);
  }
}

.ds-hero-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .7px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .6);
}

.ds-hero-stat.left {
  justify-self: start;
}

.ds-hero-stat.right {
  justify-self: end;
  text-align: right;
  flex-direction: row-reverse;
}

.ds-stat-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #67f6ff, #008cff);
  color: #001b35;
  font-size: 25px;
  box-shadow: 0 0 26px rgba(0, 190, 255, .45), inset 0 0 14px rgba(255, 255, 255, .2);
}

.ds-stat-main {
  display: block;
  color: #67f6ff;
  font-size: 14px;
}

.ds-stat-sub {
  display: block;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  margin-top: 3px;
}

/* Hide original home category cards only on home */
body.ds-page-home .categories,
body.ds-page-home .category-list,
body.ds-page-home [class*="categories"],
body.ds-page-home .category-card,
body.ds-page-home [class*="category-card"] {
  display: none !important;
}

/* Home layout */
.ds-radiant-home {
  width: min(1320px, 94vw);
  margin: 0 auto 110px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ds-left-panel {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(0, 12, 30, .94), rgba(0, 7, 18, .96));
  border: 1px solid rgba(103, 246, 255, .20);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
  padding-top: 8px;
}

.ds-welcome-label {
  margin: 21px 21px 8px;
  color: #67f6ff;
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(103, 246, 255, .55);
}

.ds-menu {
  padding: 18px 21px 22px;
}

.ds-menu-item {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 17px;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 21px;
  font-weight: 900;
  border-radius: 14px;
  padding: 8px 10px;
  margin: 8px 0;
  transition: .2s;
  position: relative;
}

.ds-menu-item:hover {
  background: rgba(103, 246, 255, .08);
  transform: translateX(4px);
}

.ds-menu-item.active::after {
  content: "";
  position: absolute;
  left: 82px;
  right: 36px;
  bottom: 7px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #67f6ff, #008cff);
  box-shadow: 0 0 16px rgba(103, 246, 255, .75);
}

.ds-menu-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .3));
}

.ds-menu-caret {
  margin-left: auto;
  color: #fff;
  font-size: 20px;
  opacity: .9;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

.ds-left-live {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 21px;
}

.ds-main-panel {
  min-height: 570px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 20, 52, .94), rgba(0, 116, 205, .27), rgba(0, 10, 27, .96));
  border: 1px solid rgba(103, 246, 255, .28);
  box-shadow: var(--ds-shadow), inset 0 0 35px rgba(103, 246, 255, .07);
  position: relative;
  overflow: hidden;
  padding: 44px 390px 44px 46px;
}

.ds-main-panel h1 {
  margin: 0 0 8px !important;
  color: #67f6ff !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: .3px;
  text-shadow: 0 0 14px rgba(103, 246, 255, .55);
}

.ds-main-panel h2 {
  color: rgba(255, 255, 255, .55) !important;
  margin: 0 0 24px !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.ds-main-panel p {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  max-width: 720px;
  font-weight: 650;
}

.ds-featured-bubble {
  position: absolute;
  right: 28px;
  top: 64px;
  width: 350px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
  transition: opacity .35s, transform .35s;
}

.ds-featured-bubble.fade {
  opacity: .15;
  transform: scale(.92);
}

.ds-featured-small {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(0, 120, 255, .38);
  border: 6px solid rgba(103, 246, 255, .55);
  display: grid;
  place-items: center;
  margin-right: -22px;
}

.ds-featured-small img {
  max-width: 94px;
  max-height: 94px;
  object-fit: contain;
}

.ds-featured-big {
  width: 198px;
  height: 198px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 184, 255, .78), rgba(0, 67, 160, .94));
  border: 7px solid rgba(103, 246, 255, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.05;
  padding: 22px;
}

.ds-featured-big span {
  font-size: 11px;
  text-transform: uppercase;
  opacity: .8;
  letter-spacing: 1px;
}

.ds-highlight-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

.ds-recent-customers {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #67f6ff;
  font-weight: 850;
  font-style: italic;
}

.ds-star {
  font-size: 52px;
  color: #67f6ff;
  text-shadow: 0 0 22px rgba(103, 246, 255, .75);
}

.ds-heads {
  display: flex;
  gap: 7px;
}

.ds-heads img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  image-rendering: pixelated;
}

.ds-payment-goal {
  display: flex;
  gap: 15px;
  align-items: center;
}

.ds-goal-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#67f6ff 0 49%, rgba(255, 255, 255, .16) 49%);
  font-weight: 900;
  color: #fff;
  box-shadow: inset 0 0 0 10px rgba(0, 0, 0, .22);
}

.ds-info-boxes {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.ds-info-box {
  position: relative;
  text-align: center;
  border-radius: 17px;
  padding: 30px 22px 18px;
  background: rgba(0, 8, 28, .52);
  border: 3px solid #1cbcff;
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  font-weight: 650;
}

.ds-info-box strong {
  color: #fff;
}

.ds-info-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #67f6ff, #007bff);
  color: #002040;
  font-weight: 900;
}

.ds-info-box.support {
  border-color: #25ff7a;
}

.ds-info-box.support .ds-info-label {
  background: linear-gradient(180deg, #35f06f, #08aa48);
  color: #001f0d;
}

/* Category/package pages blue */
body:not(.ds-page-home) .sidebar,
body:not(.ds-page-home) .site-sidebar,
body:not(.ds-page-home) aside,
body:not(.ds-page-home) [class*="sidebar"] {
  background: linear-gradient(180deg, rgba(0, 12, 30, .96), rgba(0, 7, 18, .98)) !important;
  border: 1px solid rgba(103, 246, 255, .26) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42) !important;
}

body:not(.ds-page-home) .content,
body:not(.ds-page-home) .main-content,
body:not(.ds-page-home) .site-content,
body:not(.ds-page-home) .panel,
body:not(.ds-page-home) .card,
.panel,
.card,
.module,
.widget,
.category,
.package,
.package-card,
.product,
[class*="package-card"] {
  background: linear-gradient(135deg, rgba(0, 28, 70, .94), rgba(0, 105, 180, .42), rgba(0, 9, 28, .96)) !important;
  border: 1px solid var(--ds-border) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35), inset 0 0 24px rgba(103, 246, 255, .08) !important;
}

.sidebar a,
.site-sidebar a,
aside a,
[class*="sidebar"] a {
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Real Tebex package buttons green */
.package button,
.package .button,
.package .btn,
.package-card button,
.package-card .button,
.package-card .btn,
.product button,
.product .button,
.product .btn,
form[action*="basket"] button,
form[action*="checkout"] button,
a[href*="basket/add"],
a[href*="checkout/packages/add"] {
  background: linear-gradient(180deg, #35f06f, #08a947) !important;
  color: #001d0b !important;
  border: 0 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 rgba(0, 82, 28, .55), 0 14px 26px rgba(49, 233, 111, .25) !important;
}

/* Donators */
body.ds-page-donators .sidebar,
body.ds-page-donators .site-sidebar,
body.ds-page-donators aside,
body.ds-page-donators [class*="sidebar"] {
  display: none !important;
}

.ds-donator-page {
  width: min(1050px, 94vw);
  margin: 0 auto 110px;
  color: #fff;
}

.ds-donor-title {
  position: relative;
  min-height: 92px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 35, 90, .96), rgba(0, 166, 255, .46), rgba(0, 8, 28, .96));
  border: 1px solid rgba(111, 237, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35), inset 0 0 35px rgba(81, 225, 255, .15);
}

.ds-donor-title a {
  position: absolute;
  left: 18px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #74f5ff, #008cff);
  color: #001629 !important;
  text-decoration: none !important;
  font-size: 23px;
  font-weight: 900;
}

.ds-donor-title h1 {
  margin: 0 !important;
  font-size: clamp(34px, 5vw, 54px) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 18px rgba(97, 242, 255, .95), 0 4px 0 rgba(0, 0, 0, .22);
}

.ds-donor-tier {
  margin: 0 0 22px;
  padding: 18px;
  border-radius: 18px;
  border: 2px solid rgba(188, 249, 255, .35);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .36), inset 0 0 22px rgba(255, 255, 255, .08);
}

.ds-donor-tier.t20 {
  background: linear-gradient(135deg, #00d4ff, #006fff 58%, #003a9c);
}

.ds-donor-tier.t10 {
  background: linear-gradient(135deg, #55edff, #008cff 58%, #004ab8);
}

.ds-donor-tier.t5 {
  background: linear-gradient(135deg, #27b7ff, #006be6 55%, #002d89);
}

.ds-donor-tier.t1 {
  background: linear-gradient(135deg, #006dff, #0042b8 55%, #001f68);
}

.ds-donor-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
  border-bottom: 2px solid rgba(255,255,255,.25);
  padding-bottom: 12px;
}

.ds-donor-tier-head h2 {
  margin: 0 !important;
  color: #001f38 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.ds-donor-tier-head p {
  margin: 3px 0 0 !important;
  color: rgba(0, 20, 40, .72) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.ds-donor-tier-head strong {
  color: rgba(0, 25, 50, .62);
  font-size: 26px;
  font-weight: 900;
}

.ds-donor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ds-donor-slot {
  min-height: 78px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.09));
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 0 18px rgba(255,255,255,.12), 0 7px 0 rgba(0,0,0,.16);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
}

.ds-donor-slot img {
  width: 50px;
  height: 50px;
  image-rendering: pixelated;
  border-radius: 10px;
}

.ds-donor-slot span {
  color: #001b33;
  font-size: 15px;
  font-weight: 900;
}

.ds-auto-payments {
  margin-top: 20px;
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(0, 28, 70, .95), rgba(0, 120, 220, .38), rgba(0, 8, 28, .95));
  border: 1px solid rgba(111, 237, 255, .34);
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
}

.ds-auto-payments h2 {
  margin: 0 0 6px !important;
  color: #67f5ff !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 14px rgba(92, 239, 255, .7);
}

.ds-auto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ds-auto-grid > * {
  display: block !important;
  background: linear-gradient(135deg, rgba(0, 34, 84, .95), rgba(0, 130, 235, .38)) !important;
  border: 1px solid rgba(111, 237, 255, .32) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  color: #fff !important;
}

@media (max-width: 1150px) {
  .ds-radiant-home {
    grid-template-columns: 1fr;
  }

  .ds-main-panel {
    padding: 42px !important;
  }

  .ds-featured-bubble {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin: 0 auto 28px;
  }
}

@media (max-width: 900px) {
  .ds-top-nav {
    gap: 16px;
    padding: 8px 18px;
  }

  .ds-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ds-hero-stat,
  .ds-hero-stat.right {
    justify-self: center;
    flex-direction: row;
    text-align: left;
  }

  .ds-radiant-home,
  .ds-highlight-row,
  .ds-info-boxes,
  .ds-auto-grid,
  .ds-donor-grid {
    grid-template-columns: 1fr;
  }
}
/* === Make category page black content boxes blue only === */

/* Category description/info box */
body:not(.ds-page-home) .content .panel,
body:not(.ds-page-home) .content .card,
body:not(.ds-page-home) .content .module,
body:not(.ds-page-home) .content .category-description,
body:not(.ds-page-home) .content [class*="description"],
body:not(.ds-page-home) .content [class*="category"] {
  background: linear-gradient(
    135deg,
    rgba(0, 34, 84, 0.96),
    rgba(0, 105, 180, 0.42),
    rgba(0, 10, 30, 0.96)
  ) !important;
  border: 1px solid rgba(103, 246, 255, 0.32) !important;
  border-radius: 16px !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.35),
    inset 0 0 24px rgba(103, 246, 255, 0.08) !important;
}

/* The “No packages to display” black box */
body:not(.ds-page-home) .content .empty,
body:not(.ds-page-home) .content .empty-state,
body:not(.ds-page-home) .content .alert,
body:not(.ds-page-home) .content [class*="empty"],
body:not(.ds-page-home) .content [class*="no-packages"],
body:not(.ds-page-home) .content p:has(+ .package),
body:not(.ds-page-home) .content div:has(> p) {
  background: linear-gradient(
    135deg,
    rgba(0, 34, 84, 0.96),
    rgba(0, 105, 180, 0.38),
    rgba(0, 10, 30, 0.96)
  ) !important;
  border: 1px solid rgba(103, 246, 255, 0.28) !important;
  border-radius: 14px !important;
}
/* === FINAL FIX: turn category page black boxes blue === */

/* Main category content wrapper */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) main,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .main,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .content,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .main-content,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .site-content {
  background: transparent !important;
}

/* Category description black box */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .content > div,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .main-content > div,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .site-content > div,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) main > div,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .panel,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .card,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .module,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .category-description,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) [class*="description"] {
  background-color: rgba(0, 28, 70, 0.96) !important;
  background-image: linear-gradient(
    135deg,
    rgba(0, 34, 84, 0.98),
    rgba(0, 110, 190, 0.42),
    rgba(0, 10, 30, 0.96)
  ) !important;
  border: 1px solid rgba(103, 246, 255, 0.34) !important;
  border-radius: 16px !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.35),
    inset 0 0 24px rgba(103, 246, 255, 0.10) !important;
}

/* Package/rank cards below */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .package,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .package-card,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .product,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) [class*="package"],
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) [class*="product"] {
  background-color: rgba(0, 28, 70, 0.96) !important;
  background-image: linear-gradient(
    135deg,
    rgba(0, 34, 84, 0.98),
    rgba(0, 105, 180, 0.45),
    rgba(0, 9, 28, 0.98)
  ) !important;
  border: 1px solid rgba(103, 246, 255, 0.34) !important;
  border-radius: 16px !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.35),
    inset 0 0 24px rgba(103, 246, 255, 0.10) !important;
}

/* Keep images inside cards normal */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .package img,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .package-card img,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .product img {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* No packages box */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .empty,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .empty-state,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .alert,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) [class*="empty"],
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) [class*="alert"] {
  background-color: rgba(0, 28, 70, 0.96) !important;
  background-image: linear-gradient(
    135deg,
    rgba(0, 34, 84, 0.98),
    rgba(0, 105, 180, 0.38),
    rgba(0, 10, 30, 0.96)
  ) !important;
  border: 1px solid rgba(103, 246, 255, 0.30) !important;
  border-radius: 14px !important;
}
/* === Clean DiamondSMP Small Hover Popup === */

.ds-cursor-tip {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 10px) scale(0.94);
  transition: opacity 0.12s ease, transform 0.12s ease;
  max-width: 260px;

  padding: 7px 12px;
  border-radius: 999px;

  background: rgba(0, 34, 84, 0.86);
  border: 1px solid rgba(103, 246, 255, 0.55);

  box-shadow:
    0 0 16px rgba(103, 246, 255, 0.35),
    inset 0 0 12px rgba(103, 246, 255, 0.12);

  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(103, 246, 255, 0.65);
  backdrop-filter: blur(8px);
}

.ds-cursor-tip.show {
  opacity: 1;
  transform: translate(12px, 10px) scale(1);
}

.ds-cursor-tip::before {
  content: "✦";
  color: #67f6ff;
  margin-right: 6px;
}

/* No big desc text anymore */
.ds-cursor-tip strong,
.ds-cursor-tip span {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
  margin: 0 !important;
}

/* Slight hover glow only */
.ds-tooltip-target:hover {
  filter: brightness(1.08);
}

/* === Fix black “in basket” quantity box === */

.package .input-group,
.package-card .input-group,
.product .input-group,
[class*="package"] .input-group,
[class*="product"] .input-group,
.package form,
.package-card form,
.product form {
  background: linear-gradient(
    135deg,
    rgba(0, 34, 84, 0.96),
    rgba(0, 120, 210, 0.42),
    rgba(0, 10, 30, 0.96)
  ) !important;
  border: 1px solid rgba(103, 246, 255, 0.38) !important;
  border-radius: 14px !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.28),
    inset 0 0 18px rgba(103, 246, 255, 0.10) !important;
}

/* quantity minus / plus buttons */
.package .input-group button,
.package-card .input-group button,
.product .input-group button,
[class*="package"] .input-group button,
[class*="product"] .input-group button {
  background: linear-gradient(180deg, #67f6ff, #008cff) !important;
  color: #001629 !important;
  border: 0 !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

/* “1 in Basket” middle part */
.package .input-group input,
.package-card .input-group input,
.product .input-group input,
[class*="package"] .input-group input,
[class*="product"] .input-group input,
.package .input-group span,
.package-card .input-group span,
.product .input-group span,
[class*="package"] .input-group span,
[class*="product"] .input-group span {
  background: linear-gradient(180deg, #35f06f, #08a947) !important;
  color: #001d0b !important;
  border: 0 !important;
  font-weight: 950 !important;
  text-align: center !important;
}

/* If Tebex uses a black basket state button instead of input-group */
.package [class*="basket"],
.package-card [class*="basket"],
.product [class*="basket"],
[class*="package"] [class*="basket"] {
  background: linear-gradient(180deg, #35f06f, #08a947) !important;
  color: #001d0b !important;
  border-color: rgba(103, 246, 255, 0.35) !important;
}

/* small hover glow on target buttons/cards */
.ds-tooltip-target:hover {
  filter: brightness(1.08);
}
/* === REMOVE TOOLTIP BOX COMPLETELY === */
.ds-cursor-tip,
.ds-cursor-tip.show {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Remove tooltip hover filter */
.ds-tooltip-target:hover {
  filter: none !important;
}

/* === Smooth hover pop effect for rank/package cards === */
.package,
.package-card,
.product,
[class*="package-card"],
[class*="package"],
[class*="product"] {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
  transform-origin: center !important;
}

.package:hover,
.package-card:hover,
.product:hover,
[class*="package-card"]:hover,
[class*="package"]:hover,
[class*="product"]:hover {
  transform: scale(1.025) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(103, 246, 255, 0.28),
    inset 0 0 24px rgba(103, 246, 255, 0.12) !important;
}

/* === Smooth hover pop effect for Add to Basket buttons === */
.package button,
.package .button,
.package .btn,
.package-card button,
.package-card .button,
.package-card .btn,
.product button,
.product .button,
.product .btn,
form[action*="basket"] button,
form[action*="checkout"] button,
a[href*="basket/add"],
a[href*="checkout/packages/add"] {
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease !important;
  transform-origin: center !important;
}

.package button:hover,
.package .button:hover,
.package .btn:hover,
.package-card button:hover,
.package-card .button:hover,
.package-card .btn:hover,
.product button:hover,
.product .button:hover,
.product .btn:hover,
form[action*="basket"] button:hover,
form[action*="checkout"] button:hover,
a[href*="basket/add"]:hover,
a[href*="checkout/packages/add"]:hover {
  transform: scale(1.06) !important;
  filter: brightness(1.1) !important;
  box-shadow:
    0 10px 0 rgba(0, 82, 28, 0.55),
    0 18px 32px rgba(49, 233, 111, 0.35) !important;
}

/* Quantity / in-basket box hover should also pop nicely */
.package .input-group:hover,
.package-card .input-group:hover,
.product .input-group:hover,
[class*="package"] .input-group:hover,
[class*="product"] .input-group:hover {
  transform: scale(1.035) !important;
  filter: brightness(1.08) !important;
}

/* Make sure hover returns smoothly */
.package .input-group,
.package-card .input-group,
.product .input-group,
[class*="package"] .input-group,
[class*="product"] .input-group {
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease !important;
}
/* === Category/Product Page Animated Home Logo === */

.ds-category-home-logo {
  width: min(430px, 70vw);
  margin: 34px auto 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  position: relative;
  z-index: 20;
}

.ds-category-home-logo img {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 18px rgba(103, 246, 255, 0.85))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
  animation: ds-logo-pop 1.9s ease-in-out infinite;
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.ds-category-home-logo:hover img {
  transform: scale(1.08) translateY(-6px);
  filter:
    drop-shadow(0 0 25px rgba(103, 246, 255, 1))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.65));
}

/* keep logo only on non-home pages */
body.ds-page-home .ds-category-home-logo,
body.ds-page-donators .ds-category-home-logo {
  display: none !important;
}

@media (max-width: 900px) {
  .ds-category-home-logo {
    width: min(330px, 78vw);
    margin-top: 26px;
  }
}
/* === Remove big DiamondSMP text title on category/product pages === */

body:not(.ds-page-home):not(.ds-page-donators) .ds-store-name-title,
body:not(.ds-page-home):not(.ds-page-donators) .store-title,
body:not(.ds-page-home):not(.ds-page-donators) .site-title,
body:not(.ds-page-home):not(.ds-page-donators) .page-title,
body:not(.ds-page-home):not(.ds-page-donators) .header-title {
  display: none !important;
}

/* reduce the huge empty top spacing left by that title */
body:not(.ds-page-home):not(.ds-page-donators) .site,
body:not(.ds-page-home):not(.ds-page-donators) main,
body:not(.ds-page-home):not(.ds-page-donators) .main,
body:not(.ds-page-home):not(.ds-page-donators) .content,
body:not(.ds-page-home):not(.ds-page-donators) .main-content {
  padding-top: 20px !important;
  margin-top: 0 !important;
}
/* Disable smooth scroll on category/product pages so button clicks do not glide to top */
body:not(.ds-page-home):not(.ds-page-donators) {
  scroll-behavior: auto !important;
}
/* === Shrink huge top space on category/product pages === */

body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) header,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .header,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .site-header,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) [class*="header"] {
  min-height: 80px !important;
  height: 80px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}

/* remove empty banner/title spacing */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .banner,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .hero,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .store-header,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .header-content,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .header-inner {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* move the animated logo closer to the top */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .ds-category-home-logo {
  margin-top: 4px !important;
  margin-bottom: 18px !important;
}

/* make page content start higher */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .site,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) main,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .main,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .content,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* keep Tebex login/basket buttons clickable */
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) header a,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) header button,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .header a,
body.ds-theme-active:not(.ds-page-home):not(.ds-page-donators) .header button {
  position: relative !important;
  z-index: 99999 !important;
}
/* === DiamondSMP Home About V2 Blue Gradient Section === */

.ds-home-info-v2 {
  width: min(1120px, 94vw) !important;
  margin: 50px auto 80px !important;
  padding: 42px !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(103, 246, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(0, 38, 95, 0.98), rgba(0, 130, 220, 0.42), rgba(0, 8, 28, 0.98)) !important;

  border: 1px solid rgba(103, 246, 255, 0.42) !important;

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 45px rgba(103, 246, 255, 0.10) !important;

  color: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

.ds-home-info-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(103, 246, 255, 0.08) 35%, transparent 65%),
    radial-gradient(circle at 15% 20%, rgba(103, 246, 255, 0.12), transparent 24%);
}

.ds-home-info-v2 > * {
  position: relative !important;
  z-index: 2 !important;
}

.ds-home-hero-v2 {
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto 36px !important;
}

.ds-home-hero-v2 span {
  display: inline-block !important;
  margin-bottom: 12px !important;
  color: #67f6ff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 16px rgba(103, 246, 255, 0.8) !important;
}

.ds-home-hero-v2 h1 {
  margin: 0 0 16px !important;
  color: #67f6ff !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.04 !important;
  font-weight: 950 !important;
  text-shadow:
    0 0 20px rgba(103, 246, 255, 0.72),
    0 6px 0 rgba(0, 0, 0, 0.28) !important;
}

.ds-home-hero-v2 p {
  margin: 0 auto !important;
  max-width: 820px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

/* Feature boxes */
.ds-feature-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 36px 0 46px !important;
}

.ds-feature-box-v2 {
  min-height: 210px !important;
  padding: 28px 22px !important;
  border-radius: 24px !important;
  text-align: center !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(103, 246, 255, 0.18), transparent 40%),
    linear-gradient(145deg, rgba(0, 48, 115, 0.98), rgba(0, 115, 210, 0.42), rgba(0, 9, 30, 0.98)) !important;

  border: 1px solid rgba(103, 246, 255, 0.44) !important;

  box-shadow:
    0 14px 0 rgba(0, 0, 0, 0.22),
    0 22px 38px rgba(0, 0, 0, 0.36),
    inset 0 0 28px rgba(103, 246, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease !important;
}

.ds-feature-box-v2:hover {
  transform: translateY(-6px) scale(1.025) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 18px 0 rgba(0, 0, 0, 0.22),
    0 28px 46px rgba(0, 0, 0, 0.42),
    0 0 30px rgba(103, 246, 255, 0.25),
    inset 0 0 34px rgba(103, 246, 255, 0.16) !important;
}

.ds-feature-icon-v2 {
  width: 68px !important;
  height: 68px !important;
  margin: 0 auto 16px !important;
  border-radius: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(180deg, #67f6ff, #008cff) !important;
  box-shadow:
    0 0 26px rgba(103, 246, 255, 0.45),
    inset 0 0 14px rgba(255, 255, 255, 0.18) !important;

  font-size: 32px !important;
}

.ds-feature-box-v2 h3 {
  margin: 0 0 10px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

.ds-feature-box-v2 p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

/* Realm title */
.ds-realms-heading-v2 {
  text-align: center !important;
  margin: 8px auto 24px !important;
}

.ds-realms-heading-v2 h2 {
  margin: 0 0 8px !important;
  color: #67f6ff !important;
  font-size: 36px !important;
  font-weight: 950 !important;
  text-shadow: 0 0 18px rgba(103, 246, 255, 0.68) !important;
}

.ds-realms-heading-v2 p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.66) !important;
  font-weight: 750 !important;
}

/* Realm cylinder boxes */
.ds-realm-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 26px !important;
}

.ds-realm-pill-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 118px !important;
  padding: 20px 24px !important;
  border-radius: 999px !important;

  background:
    linear-gradient(145deg, rgba(0, 50, 120, 0.98), rgba(0, 128, 215, 0.46), rgba(0, 10, 31, 0.98)) !important;

  border: 1px solid rgba(103, 246, 255, 0.42) !important;

  box-shadow:
    0 12px 0 rgba(0, 0, 0, 0.22),
    0 22px 34px rgba(0, 0, 0, 0.34),
    inset 0 0 24px rgba(103, 246, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;

  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease !important;

  transform-origin: center !important;
}

/* only realm boxes pop bigger on hover */
.ds-realm-pill-v2:hover {
  transform: scale(1.045) translateY(-5px) !important;
  filter: brightness(1.1) !important;

  box-shadow:
    0 16px 0 rgba(0, 0, 0, 0.22),
    0 28px 44px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(103, 246, 255, 0.32),
    inset 0 0 30px rgba(103, 246, 255, 0.16) !important;
}

.ds-realm-icon-v2 {
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(180deg, #67f6ff, #008cff) !important;
  box-shadow:
    0 0 26px rgba(103, 246, 255, 0.42),
    inset 0 0 14px rgba(255, 255, 255, 0.18) !important;

  font-size: 31px !important;
}

.ds-realm-pill-v2 h3 {
  margin: 0 0 5px !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

.ds-realm-pill-v2 p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .ds-home-info-v2 {
    padding: 28px 18px !important;
  }

  .ds-feature-grid-v2,
  .ds-realm-grid-v2 {
    grid-template-columns: 1fr !important;
  }

  .ds-realm-pill-v2 {
    border-radius: 24px !important;
  }
}
/* === FORCE HOME PAGE CUSTOM SECTION BLUE BACKGROUND === */

/* The Tebex wrapper behind your Home page content */
body.ds-theme-active.ds-page-home .content,
body.ds-theme-active.ds-page-home .main-content,
body.ds-theme-active.ds-page-home .site-content,
body.ds-theme-active.ds-page-home .page-content,
body.ds-theme-active.ds-page-home .body,
body.ds-theme-active.ds-page-home .panel,
body.ds-theme-active.ds-page-home .card,
body.ds-theme-active.ds-page-home .module,
body.ds-theme-active.ds-page-home .widget,
body.ds-theme-active.ds-page-home [class*="content"],
body.ds-theme-active.ds-page-home [class*="page"],
body.ds-theme-active.ds-page-home [class*="panel"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(103, 246, 255, 0.22), transparent 34%),
    linear-gradient(
      135deg,
      rgba(0, 35, 90, 0.78),
      rgba(0, 120, 205, 0.34) 48%,
      rgba(0, 10, 30, 0.82)
    ) !important;

  border-color: rgba(103, 246, 255, 0.30) !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.38),
    inset 0 0 42px rgba(103, 246, 255, 0.10) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* The actual DiamondSMP home section */
body.ds-theme-active.ds-page-home .ds-home-info-v2 {
  background:
    radial-gradient(circle at 50% 0%, rgba(103, 246, 255, 0.28), transparent 36%),
    radial-gradient(circle at 12% 18%, rgba(0, 180, 255, 0.20), transparent 32%),
    linear-gradient(
      135deg,
      rgba(0, 36, 92, 0.88),
      rgba(0, 130, 220, 0.42) 48%,
      rgba(0, 10, 32, 0.88)
    ) !important;

  border: 1px solid rgba(103, 246, 255, 0.42) !important;
  border-radius: 28px !important;

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(103, 246, 255, 0.18),
    inset 0 0 48px rgba(103, 246, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

  padding: 42px !important;
  overflow: hidden !important;
}

/* If the hero text is inside a separate black block, force that blue too */
body.ds-theme-active.ds-page-home .ds-home-hero-v2 {
  background:
    linear-gradient(
      135deg,
      rgba(0, 35, 90, 0.42),
      rgba(0, 130, 220, 0.18),
      rgba(0, 10, 30, 0.42)
    ) !important;

  border: 1px solid rgba(103, 246, 255, 0.18) !important;
  border-radius: 24px !important;
  padding: 28px 24px !important;
  box-shadow: inset 0 0 28px rgba(103, 246, 255, 0.08) !important;
}

/* Make sure the section does not inherit black from old Tebex styles */
body.ds-theme-active.ds-page-home .ds-home-info-v2 *,
body.ds-theme-active.ds-page-home .ds-home-hero-v2 *,
body.ds-theme-active.ds-page-home .ds-feature-box-v2 *,
body.ds-theme-active.ds-page-home .ds-realm-pill-v2 * {
  background-color: transparent !important;
}
/* === FIX: stop big package background/container from expanding === */

/* Cancel hover scaling on large wrappers/containers */
body.ds-theme-active .packages:hover,
body.ds-theme-active .package-list:hover,
body.ds-theme-active .products:hover,
body.ds-theme-active .content:hover,
body.ds-theme-active .main-content:hover,
body.ds-theme-active .site-content:hover,
body.ds-theme-active [class*="packages"]:hover,
body.ds-theme-active [class*="package-list"]:hover,
body.ds-theme-active [class*="products"]:hover {
  transform: none !important;
  filter: none !important;
}

/* Cancel the too-broad old rule that used [class*="package"] */
body.ds-theme-active [class*="package"]:hover,
body.ds-theme-active [class*="product"]:hover {
  transform: none !important;
}

/* Only the real item/card should pop */
body.ds-theme-active .package-card:hover,
body.ds-theme-active .package:hover,
body.ds-theme-active .product:hover,
body.ds-theme-active .store-product:hover,
body.ds-theme-active .listing-item:hover {
  transform: scale(1.025) !important;
  filter: brightness(1.08) !important;
  z-index: 5 !important;
  position: relative !important;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(103, 246, 255, 0.28),
    inset 0 0 24px rgba(103, 246, 255, 0.12) !important;
}

/* Smooth animation only on actual cards */
body.ds-theme-active .package-card,
body.ds-theme-active .package,
body.ds-theme-active .product,
body.ds-theme-active .store-product,
body.ds-theme-active .listing-item {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
  transform-origin: center !important;
}

/* Add to Basket / Subscribe button pop only */
body.ds-theme-active .package button:hover,
body.ds-theme-active .package .button:hover,
body.ds-theme-active .package .btn:hover,
body.ds-theme-active .package-card button:hover,
body.ds-theme-active .package-card .button:hover,
body.ds-theme-active .package-card .btn:hover,
body.ds-theme-active .product button:hover,
body.ds-theme-active .product .button:hover,
body.ds-theme-active .product .btn:hover,
body.ds-theme-active form[action*="basket"] button:hover,
body.ds-theme-active form[action*="checkout"] button:hover {
  transform: scale(1.055) !important;
  filter: brightness(1.1) !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Quantity/in-basket box pops only itself, not parent background */
body.ds-theme-active .package .input-group:hover,
body.ds-theme-active .package-card .input-group:hover,
body.ds-theme-active .product .input-group:hover {
  transform: scale(1.025) !important;
  filter: brightness(1.08) !important;
  z-index: 10 !important;
  position: relative !important;
}