@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap");

:root {
  --color-primary: #88DA21;
  --bg-image: none;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background-color: #080c0e;
  color: #c8d8e0;
}

/* Animated scanline effect overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.03) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.01), rgba(0,255,0,0.02), rgba(0,0,255,0.01)),
    #080c0e;
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
}

/* Neon glow utility */
.neon-text {
  color: #88DA21;
  text-shadow: 0 0 8px rgba(136, 218, 33, 0.8), 0 0 20px rgba(136, 218, 33, 0.4);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #88DA21, #6FB81A) !important;
  color: #080c0e !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(136, 218, 33, 0.4), 0 0 30px rgba(136, 218, 33, 0.1);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #9BE93A, #88DA21) !important;
  box-shadow: 0 0 25px rgba(136, 218, 33, 0.7), 0 0 50px rgba(136, 218, 33, 0.3) !important;
  transform: translateY(-1px);
  color: #080c0e !important;
}

.btn-secondary {
  background: transparent !important;
  border: 1px solid #88DA21 !important;
  color: #88DA21 !important;
  box-shadow: 0 0 8px rgba(136, 218, 33, 0.2), inset 0 0 8px rgba(136, 218, 33, 0.05);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: rgba(136, 218, 33, 0.1) !important;
  box-shadow: 0 0 20px rgba(136, 218, 33, 0.5), inset 0 0 15px rgba(136, 218, 33, 0.1) !important;
  color: #88DA21 !important;
}

.btn-tertiary {
  background: rgba(136, 218, 33, 0.05) !important;
  border: 1px solid rgba(136, 218, 33, 0.2) !important;
  color: #c8d8e0 !important;
  border-radius: 10px;
}

.btn-tertiary:hover,
.btn-tertiary:focus {
  background: rgba(136, 218, 33, 0.1) !important;
  border-color: rgba(136, 218, 33, 0.5) !important;
  color: #88DA21 !important;
}

/* Header */
.site-header {
  background: linear-gradient(180deg, #0d1214 0%, rgba(8,12,14,0.95) 100%);
  border-bottom: 1px solid rgba(136, 218, 33, 0.2);
  box-shadow: 0 4px 30px rgba(136, 218, 33, 0.05), 0 1px 0 rgba(136, 218, 33, 0.1);
  backdrop-filter: blur(10px);
}

.site-header::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #88DA21, transparent);
  margin-top: -1px;
  opacity: 0.5;
}

.site-header-inner {
  padding: 12px 24px;
}

.site-title a {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #88DA21 !important;
  text-shadow: 0 0 10px rgba(136, 218, 33, 0.6), 0 0 30px rgba(136, 218, 33, 0.2);
  text-decoration: none;
}

.site-title img {
  max-height: 50px;
  filter: drop-shadow(0 0 8px rgba(136, 218, 33, 0.6)) drop-shadow(0 0 20px rgba(136, 218, 33, 0.3));
  transition: filter 0.3s ease;
}

.site-title img:hover {
  filter: drop-shadow(0 0 15px rgba(136, 218, 33, 0.9)) drop-shadow(0 0 40px rgba(136, 218, 33, 0.5));
}

/* Navigation */
.site-nav {
  background: rgba(8,12,14,0.9);
  border-bottom: 1px solid rgba(136, 218, 33, 0.1);
}

.site-nav a,
.site-nav .nav-link {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8aa4ae !important;
  transition: all 0.2s ease;
  position: relative;
  padding: 8px 16px;
}

.site-nav a::after,
.site-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #88DA21;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(136, 218, 33, 0.8);
}

.site-nav a:hover::after,
.site-nav a.active::after,
.site-nav .nav-link:hover::after {
  width: 100%;
}

.site-nav a:hover,
.site-nav a.active,
.site-nav .nav-link:hover {
  color: #88DA21 !important;
  text-shadow: 0 0 8px rgba(136, 218, 33, 0.5);
}

/* Sale banner */
.site-sale-banner {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(136, 218, 33, 0.15), rgba(136, 218, 33, 0.05));
  border: 1px solid rgba(136, 218, 33, 0.3);
  color: #88DA21;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.8rem;
  box-shadow: 0 0 20px rgba(136, 218, 33, 0.1);
}

/* Quantity field */
.quantity-field {
  border-radius: 10px;
  background: #0d1214;
  border: 1px solid rgba(136, 218, 33, 0.2);
  color: #c8d8e0;
}

.site-header-inner .info .image {
  border-radius: 10px;
}

/* Categories */
.site-home-categories .category {
  border-radius: 10px;
  padding: 20px var(--widget-padding);
  background: linear-gradient(135deg, #0d1214, #111618);
  border: 1px solid rgba(136, 218, 33, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.site-home-categories .category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #88DA21, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-home-categories .category:hover::before {
  opacity: 1;
}

.site-home-categories .category:hover {
  color: #88DA21;
  background: linear-gradient(135deg, #111618, #141b1e);
  border-color: rgba(136, 218, 33, 0.3);
  box-shadow: 0 0 20px rgba(136, 218, 33, 0.08), inset 0 0 20px rgba(136, 218, 33, 0.03);
  transform: translateY(-2px);
}

.category-description {
  border-radius: 10px;
  background: linear-gradient(135deg, #0d1214, #111618);
  border: 1px solid rgba(136, 218, 33, 0.1);
  border-left: 3px solid #88DA21;
  padding: 16px 20px;
}

/* Store text */
.store-text {
  border-radius: 10px;
  background: linear-gradient(135deg, #0d1214, #111618);
  border: 1px solid rgba(136, 218, 33, 0.1);
  position: relative;
}

.store-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #88DA21, transparent);
}

.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  color: #88DA21;
  text-shadow: 0 0 10px rgba(136, 218, 33, 0.4);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Products */
.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 10px;
  background: linear-gradient(135deg, #0d1214, #111618);
  border: 1px solid rgba(136, 218, 33, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.store-products-list .store-product::before,
.store-products-images .store-product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #88DA21, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.store-products-list .store-product:hover::before,
.store-products-images .store-product:hover::before {
  opacity: 1;
}

.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  border-color: rgba(136, 218, 33, 0.35);
  box-shadow: 0 0 25px rgba(136, 218, 33, 0.1), inset 0 0 25px rgba(136, 218, 33, 0.03);
  transform: translateY(-3px);
}

.store-products-images .store-product {
  text-align: center;
}

/* Product name/title */
.store-product .name,
.store-product .title,
.store-product h2,
.store-product h3 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #e0eef5;
}

/* Price */
.store-product .price,
.price {
  color: #88DA21 !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(136, 218, 33, 0.5);
}

/* Footer */
.site-footer {
  background: linear-gradient(0deg, #060a0c 0%, #0d1214 100%);
  border-top: 1px solid rgba(136, 218, 33, 0.15);
  padding: 30px 0;
}

.site-footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #88DA21, transparent);
  margin-bottom: 30px;
  opacity: 0.3;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.copyright {
  color: #4a6472;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Sidebar */
.site-sidebar {
  background: linear-gradient(180deg, #0d1214, #0a0e10);
  border: 1px solid rgba(136, 218, 33, 0.1);
}

/* Input fields */
input, textarea, select {
  background: #0d1214 !important;
  border: 1px solid rgba(136, 218, 33, 0.2) !important;
  border-radius: 8px !important;
  color: #c8d8e0 !important;
  font-family: 'Rajdhani', sans-serif;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(136, 218, 33, 0.6) !important;
  box-shadow: 0 0 10px rgba(136, 218, 33, 0.15) !important;
  outline: none !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  color: #e0eef5;
}

/* Links */
a {
  color: #88DA21;
  transition: all 0.2s ease;
}

a:hover {
  color: #9BE93A;
  text-shadow: 0 0 8px rgba(136, 218, 33, 0.5);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #080c0e;
}

::-webkit-scrollbar-thumb {
  background: rgba(136, 218, 33, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 218, 33, 0.6);
}

/* Discord/server info */
.info {
  background: rgba(136, 218, 33, 0.05);
  border: 1px solid rgba(136, 218, 33, 0.15);
  border-radius: 10px;
  padding: 8px 14px;
  transition: all 0.3s ease;
}

.info:hover {
  background: rgba(136, 218, 33, 0.1);
  border-color: rgba(136, 218, 33, 0.35);
  box-shadow: 0 0 15px rgba(136, 218, 33, 0.1);
}

.info .title {
  color: #88DA21;
  font-weight: 600;
  letter-spacing: 1px;
}

/* User actions / login button */
.user-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Toast notifications */
.toast {
  background: #0d1214;
  border: 1px solid rgba(136, 218, 33, 0.3);
  border-radius: 10px;
  color: #c8d8e0;
  box-shadow: 0 0 20px rgba(136, 218, 33, 0.1);
}

/* Module widgets */
.widget {
  background: linear-gradient(135deg, #0d1214, #111618);
  border: 1px solid rgba(136, 218, 33, 0.1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #88DA21, transparent);
}

.widget-title, .widget h3 {
  font-family: 'Orbitron', sans-serif;
  color: #88DA21;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(136, 218, 33, 0.15);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* Progress bars (goal) */
.progress, progress {
  background: #0d1214;
  border: 1px solid rgba(136, 218, 33, 0.2);
  border-radius: 10px;
  height: 8px;
}

.progress-bar, progress::-webkit-progress-value {
  background: linear-gradient(90deg, #88DA21, #6FB81A);
  box-shadow: 0 0 10px rgba(136, 218, 33, 0.5);
}

/* Badges / tags */
.badge {
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Table */
table {
  border-color: rgba(136, 218, 33, 0.1);
}

th {
  background: rgba(136, 218, 33, 0.05);
  color: #88DA21;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-color: rgba(136, 218, 33, 0.1);
}

td {
  border-color: rgba(136, 218, 33, 0.05);
  color: #c8d8e0;
}

tr:hover td {
  background: rgba(136, 218, 33, 0.03);
}

/* Checkout */
.checkout-container,
.checkout-summary {
  background: #0d1214;
  border: 1px solid rgba(136, 218, 33, 0.1);
  border-radius: 10px;
}

/* Package featured image */
.package-image, .store-product-image {
  border-radius: 10px;
  border: 1px solid rgba(136, 218, 33, 0.1);
}

/* Nav toggle button */
.toggle-navigation {
  color: #88DA21 !important;
  border-color: rgba(136, 218, 33, 0.3) !important;
}

/* "We accept" payment icons */
.we-accept {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin-bottom: 15px;
}

.we-accept img {
  opacity: 0.5;
  transition: opacity 0.3s;
  filter: grayscale(0.5);
}

.we-accept img:hover {
  opacity: 0.8;
}

/* ========== V2 POLISH ========== */

/* Compact header (stock template reserves 355px for logo + server info) */
@media (width > 960px) {
  .site-header-inner { height: 90px !important; }
  .site-header-inner .site-title { inset: 0 280px !important; }
  .site-header-inner .site-title img { max-height: 56px !important; }
  .site-header-inner .actions,
  .site-header-inner .log-in,
  .site-header-inner .user-actions { top: 50% !important; transform: translateY(-50%); }
}

/* Fix invisible glyph icons (person, remove, etc.) on dark buttons */
.btn-secondary { --btn-color-text: #88DA21; --btn-color-text-hover: #0a0e10; }
.btn-tertiary { --btn-color-text: #c8d8e0; --btn-color-text-hover: #88DA21; }

/* Product rows (list view) */
.store-products-list .store-product { display: flex; align-items: center; gap: 18px; padding: 14px 18px; }
.store-products-list .store-product .image-link { flex: 0 0 auto; }
.store-products-list .store-product img.image { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(136, 218, 33, 0.25); }
.store-product .product-title { flex: 1 1 auto; margin: 0; }
.store-product .product-title a { color: #e0eef5; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 600; text-decoration: none; text-shadow: none; }
.store-product .product-title a:hover { color: #88DA21; }
.product-actions { display: flex; align-items: center; gap: 14px; }

/* Add to Basket button */
.product-actions .add.btn-primary,
.package-actions .add.btn-primary { padding: 12px 22px; font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }

/* "in Basket" state button */
.quantity-field .open-basket { background: rgba(136, 218, 33, 0.12); color: #88DA21; border: 1px solid rgba(136, 218, 33, 0.45); border-radius: 8px; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.5px; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; }
.quantity-field .open-basket:hover { background: #88DA21; color: #0a0e10; }

/* Basket panel / page */
.basket-popup-content { background: #0b1013 !important; border-left: 1px solid rgba(136, 218, 33, 0.25); }
.basket .basket-header { padding: 16px; border-bottom: 1px solid rgba(136, 218, 33, 0.2); }
.basket .basket-second-header { padding: 12px 16px; color: #8aa4ae; }
.basket .basket-item { background: #10161a; border: 1px solid rgba(136, 218, 33, 0.2); border-radius: 12px; padding: 14px; }
.basket .basket-item .title, .basket .basket-item .title a { color: #e0eef5 !important; font-family: 'Rajdhani', sans-serif; font-weight: 600; text-shadow: none; }
.basket .basket-item .title a:hover { color: #88DA21 !important; }
.basket .basket-item .price { color: #88DA21 !important; }

/* Remove button - visible, red on hover */
.basket .basket-item .remove, .store-product .remove { --btn-color-text: #ff7a7a; --btn-color-text-hover: #0a0e10; background: transparent !important; border: 1px solid rgba(255, 90, 90, 0.4) !important; border-radius: 8px !important; transition: all 0.2s ease; }
.basket .basket-item .remove:hover, .store-product .remove:hover { background: #ff5c5c !important; border-color: #ff5c5c !important; }

/* Checkout button */
.basket .checkout.btn-primary { width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; letter-spacing: 1.5px; }


/* Basket item thumbnail */
.basket .basket-item .basket-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(136, 218, 33, 0.3); flex: 0 0 auto; }


/* ========== V3 FIXES ========== */

/* Center button labels vertically (stock 46px line-height + padding pushed text down) */
.btn-primary:not(.btn-glyph):not(.btn-glyph-text):not(.btn-icon),
.btn-secondary:not(.btn-glyph):not(.btn-glyph-text):not(.btn-icon),
.btn-tertiary:not(.btn-glyph):not(.btn-glyph-text):not(.btn-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

/* Never override hidden elements */
[hidden] { display: none !important; }

/* Quantity input: value was cut off (37px wide with 15px side padding) */
.quantity-field .quantity {
  width: 48px !important;
  min-width: 48px;
  padding: 0 4px !important;
  text-align: center !important;
  font-weight: 600;
}

/* Basket total row */
.basket .basket-checkout h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: #8aa4ae;
  margin-bottom: 12px;
}
.basket .basket-checkout .total { color: #88DA21; font-size: 22px; }

/* Tighter quantity input when "in Basket" pill is present */
.quantity-field.with-open-basket .quantity { width: 34px !important; min-width: 34px; }
.quantity-field .open-basket { padding: 8px 10px; }

/* Quantity stepper order: [-] [value] [+] then "in Basket" pill */
.quantity-field.with-open-basket { display: inline-flex; align-items: center; gap: 6px; }
.quantity-field.with-open-basket .adjust.decrease { order: 1; margin-right: 0 !important; }
.quantity-field.with-open-basket .quantity { order: 2; }
.quantity-field.with-open-basket .adjust.increase { order: 3; margin-left: 0 !important; }
.quantity-field.with-open-basket .open-basket { order: 4; margin-left: 4px; }

/* Let the stepper size to its content so "in Basket" never truncates */
.quantity-field.with-open-basket { width: max-content !important; }
.quantity-field.with-open-basket .open-basket { flex: 0 0 auto; }

/* Quantity value: remove stock negative margins that made it overlap the +/- buttons,
   and drop its own pill so it sits cleanly inside the stepper */
.quantity-field .quantity {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}