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

:root {
  --color-primary: #41C4C3;
  --color-primary-hover: #5dd6d5;
  --color-bg: #0a0a0a;
  --color-brighter-bg: #141414;
  --color-secondary: rgba(255, 255, 255, 0.12);
  --color-secondary-hover: rgba(255, 255, 255, 0.2);
  --color-secondary-text: #fff;
  --color-secondary-text-hover: #fff;
  --color-tertiary-hover: rgba(255, 255, 255, 0.06);
  --bg-image: url("https://template-assets.tebex.io/images/page-bg.jpg");
}

body {
  font-family: 'Inter', sans-serif;
  background: #0a0a0a;
}

/* ── Background image ── */
body::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  width: 100%;
  height: 550px;
  z-index: -1;
  background: var(--bg-image) center center/cover no-repeat;
  mask-image: linear-gradient(rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* ── Floating particles ── */
.hero-particles {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 450px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.site-header-inner,
.site-sale-banner {
  position: relative;
  z-index: 2;
}
@media (min-width: 961px) {
  .navigation-horizontal {
    position: relative;
    z-index: 2;
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(65, 196, 195, 0.7),
    rgba(65, 196, 195, 0.2));
  box-shadow: 0 0 4px rgba(65, 196, 195, 0.4);
  animation: particle-float linear infinite;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-200px) translateX(15px) scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-450px) translateX(-10px) scale(0.3);
    opacity: 0;
  }
}

/* ── Buttons ── */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 6px;
}

.btn-primary {
  transition: all 0.2s ease;
}
.btn-primary:hover, .btn-primary:focus {
  box-shadow: 0 4px 16px rgba(65, 196, 195, 0.3);
}

.btn-secondary:hover, .btn-secondary:focus {
  box-shadow: none;
}

/* ── Quantity field ── */
.quantity-field {
  border-radius: 6px;
}

/* ── Header info boxes ── */
.site-header-inner .info .image {
  border-radius: 6px;
}

.site-header-inner .info .player-count {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #41C4C3;
}

/* ── Hide store logo (bg image already has it) ── */
.site-header-inner .site-title {
  display: none;
}

/* ── Header info boxes ── */
@media (width > 960px) {
  .site-header-inner .info {
    margin-bottom: 8px;
  }
}

/* ── Sale banner ── */
.site-sale-banner {
  border-radius: 6px;
}

/* ── Category description ── */
.category-description {
  border-radius: 8px;
  background: var(--color-brighter-bg);
}

/* ── Store text / description ── */
.store-text {
  border-radius: 8px;
  background: var(--color-brighter-bg);
}
.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  text-align: center;
}

/* ── Product cards ── */
.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 8px;
  background: var(--color-brighter-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-products-images .store-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

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

/* ── Widget / Sidebar ── */
.widget-title {
  text-align: center;
}

.widget .store-product {
  text-align: center;
}

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border-radius: 8px;
}

/* ── Full product page ── */
.store-product-full {
  border-radius: 8px;
  background: var(--color-brighter-bg);
}

/* ── Product quantity in basket ── */
.store-product .quantity-field {
  border-radius: 6px;
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

/* ── Navigation ── */
.navigation-horizontal a:hover,
.navigation-horizontal a:focus,
.navigation-horizontal .link-active {
  color: #41C4C3;
}

@media (max-width: 960px) {
  /* Mobile drawer: submenu styling */
  .navigation-horizontal .has-children > ul {
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }
}

@media (min-width: 961px) {
  .navigation-horizontal > ul {
    border-radius: 0;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(20px);
    margin: 0 calc(var(--content-padding) * -1);
    padding: 0 var(--content-padding);
  }

  .navigation-horizontal .has-children > ul {
    border-radius: 8px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(20px);
  }

  /* Hide toggle button on desktop, show dropdown on hover */
  .navigation-horizontal .has-children > .toggle {
    display: none;
  }
  .navigation-horizontal .has-children > a {
    overflow: visible;
  }
  .navigation-horizontal .has-children > a::after {
    content: "\25BE";
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.7;
  }
  .navigation-horizontal .has-children:hover > ul {
    display: block;
  }
}

/* ── Sidebar widgets ── */
.widget {
  border-radius: 8px;
  background: var(--color-brighter-bg);
}
@media (width <= 960px) {
  .widget.site-navigation {
    border-radius: 0;
    background: transparent;
  }
}

.widget-gift-card .gift-card-input {
  border-radius: 6px;
}

.widget-top-donator .avatar {
  border-radius: 50%;
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 6px;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 6px;
  background: linear-gradient(90deg, #2ea3a2, #41C4C3);
}

/* ── Popups ── */
.popup-content {
  border-radius: 10px;
}

.popup-close {
  border-radius: 0 10px 0 6px;
}

.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0;
}

.basket-items {
  padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding));
}

.basket-item {
  border-radius: 8px;
}
.basket-item .quantity {
  border-radius: 4px;
}

/* ── Toast ── */
.toast {
  border-radius: 8px;
}

.toast-close {
  border-radius: 4px;
}

/* ── Tiered categories ── */
.store-category-tiered {
  border-radius: 8px;
  background: var(--color-brighter-bg);
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 {
  text-align: center;
}

.store-product-tiered {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease;
}
.store-product-tiered:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.store-product-tiered.subscribed {
  outline: 2px solid #41C4C3;
  outline-offset: -2px;
}

/* ── Requirement notice ── */
.requirement-notice {
  color: #e05555;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}



/* ── Media slider ── */
.media-slider .slider,
.media-slider .thumb {
  border-radius: 8px;
}
.media-slider .open-lightbox {
  border-radius: 4px;
}

.popup.popup-media-slider .thumb {
  border-radius: 8px;
}
.popup.popup-media-slider .popup-close {
  border-radius: 8px;
}

/* ── Eternity redirect card ── */
.eternity-redirect {
  position: relative;
  overflow: hidden;
}
.eternity-redirect::after {
  content: "SUBSCRIPTION";
  position: absolute;
  top: 12px;
  right: -32px;
  transform: rotate(45deg);
  padding: 4px 40px;
  background: #41C4C3;
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  z-index: 2;
}

.eternity-redirect .eternity-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background: rgba(65, 196, 195, 0.06);
  border-radius: 6px;
  font-size: 42px;
  font-weight: 900;
  color: #41C4C3;
  text-shadow: 0 0 30px rgba(65, 196, 195, 0.3);
}

/* ── Smaller product popup ── */
.store-product-popup-content {
  max-width: 560px;
}

/* ── Scrollbar ── */
html {
  scrollbar-color: rgba(65, 196, 195, 0.25) #0a0a0a;
}

/* ── Discount price ── */
.discount {
  color: var(--color-removed);
}

/* ── Links in content ── */
.text-content a {
  color: #41C4C3;
  transition: color 0.15s ease;
}
.text-content a:hover {
  color: #5dd6d5;
}

/* ── Responsive ── */

/* Fluid heading sizes that scale with viewport */
.text-content h1 { font-size: clamp(20px, 5vw, 32px); }
.text-content h2 { font-size: clamp(18px, 4vw, 26px); }
.text-content h3 { font-size: clamp(16px, 3.5vw, 20px); }

/* ── Tablet & below (≤960px) ── */
@media (max-width: 960px) {
  /* Nav drawer */
  .site-navigation .menu {
    width: 280px;
    max-width: 85vw;
    background: #0a0a0a;
    padding: 60px var(--widget-padding) var(--widget-padding);
  }
  .site-navigation li a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
  }
  .site-navigation li a:hover,
  .site-navigation .link-active {
    color: #41C4C3;
  }

  /* Header */
  .site-header-inner {
    padding: 70px 0 20px;
  }
  .site-header-inner .info .player-count {
    font-size: 13px;
  }

  /* Background + particles */
  body::before {
    height: 350px;
    top: -30px;
  }
  .hero-particles {
    height: 280px;
  }

  /* Product grid - 2 columns */
  .store-products-images {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Popup - slide up style on mobile */
  .popup-content {
    border-radius: 12px 12px 0 0;
    margin: 0;
  }
  .store-product-popup-content {
    max-width: 100%;
  }

  /* Content areas */
  .store-text,
  .category-description {
    padding: var(--widget-padding);
    font-size: 15px;
  }

  /* Tiered products */
  .store-products-tiered {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  }
  .store-category-tiered {
    padding: var(--widget-padding);
  }

  /* Full product page */
  .store-product-full {
    padding: var(--widget-padding);
  }
  .store-product-full .product-title {
    font-size: 22px;
  }

  /* Basket */
  .basket-items {
    padding: var(--widget-padding);
  }
}

/* ── Phone (≤600px) ── */
@media (max-width: 600px) {
  /* Single column products */
  .store-products-images {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Header - tighter */
  .site-header-inner {
    padding: 56px 0 16px;
  }
  .site-header-inner .info {
    padding-left: 36px;
  }
  .site-header-inner .info.discord {
    padding-left: 0;
    padding-right: 36px;
  }
  .site-header-inner .info .image {
    width: 26px;
    height: 26px;
  }
  .site-header-inner .info .title {
    font-size: 11px;
  }
  .site-header-inner .info .player-count {
    font-size: 11px;
  }
  .site-header-inner .info .action {
    font-size: 10px;
  }

  /* Background */
  body::before {
    height: 300px;
  }
  .hero-particles {
    height: 220px;
  }

  /* Content text */
  .store-text,
  .category-description {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Tiered single column */
  .store-products-tiered {
    grid-template-columns: 1fr;
  }

  /* Product title in popup */
  .store-product-full .product-title {
    font-size: 20px;
  }

  /* Eternity badge */
  .eternity-redirect::after {
    font-size: 8px;
    padding: 3px 30px;
    top: 10px;
    right: -28px;
  }
}