@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
  /* Elite Premium Red Theme */
  --color-primary: #D62828; 
  --color-primary-glow: rgba(214, 40, 40, 0.6); /* Stronger glow for dark bg */
  
  /* Upgraded Dark Mode Card Backgrounds */
  --color-card-bg: linear-gradient(145deg, rgba(35, 35, 35, 0.85), rgba(15, 15, 15, 0.95));
  --color-card-hover: linear-gradient(145deg, rgba(45, 45, 45, 0.9), rgba(20, 20, 20, 1));
  
  /* Apple-Style Depth & Glass Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-hover-glow: 0 15px 45px var(--color-primary-glow);
  
  /* Apple-Style Snappy & Fluid Easing */
  --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 6px; 
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: #b51f1f;
}

/* --- Selection Color (small detail, big feel) --- */
::selection {
  background: var(--color-primary);
  color: #ffffff;
}

body {
  font-family: Lato, sans-serif;
  scroll-behavior: smooth; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "lnum" 1; /* even, aligned numerals on prices */
}

/* --- Refined Focus States (premium sites never skip this) --- */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Floating & Glowing Logo ---
   NOTE: Tebex's Exo template swaps the logo IN for the store-name text,
   so it isn't always a plain <img class="logo">. The selectors below
   cast a wide net to catch it structurally. If it STILL doesn't
   animate, inspect the element and send me the real class/tag and
   I'll target it exactly. */
@keyframes floatLogo {
  0%, 100% {
    transform: translateY(0px) scale(1.18);
  }
  50% {
    transform: translateY(-14px) scale(1.2);
  }
}

.logo, .site-logo, .site-header-inner .info,
.navbar-brand, .site-title, .header-logo, .brand {
  display: inline-block;
  overflow: visible;
}

.logo img, .site-logo img, .site-header-inner .info .image, .navbar-brand img,
.site-title img, .header-logo img, .brand img,
header a[href="/"] img, header img:first-of-type, nav a img {
  animation: floatLogo 4s ease-in-out infinite !important;
  will-change: transform;
  border-radius: 0 !important;
  display: inline-block;
  transform-origin: center center;
  filter: drop-shadow(0 0 18px rgba(214, 40, 40, 0.5));
  transition: filter 0.3s var(--ease-smooth);
}

/* covers the case where the "logo" is a background-image div, not an <img> */
.logo:not(:has(img)), .site-title:not(:has(img)), .header-logo:not(:has(img)) {
  animation: floatLogo 4s ease-in-out infinite !important;
  will-change: transform;
  filter: drop-shadow(0 0 18px rgba(214, 40, 40, 0.5));
  transition: filter 0.3s var(--ease-smooth);
}

.logo:hover img, .site-logo:hover img, .navbar-brand:hover img,
.site-title:hover img, .header-logo:hover img {
  filter: drop-shadow(0 0 32px rgba(214, 40, 40, 0.9));
}

/* --- Layout Outline / Finishing Lines ---
   Thin, faded-edge divider lines under section headers and between
   major regions. This is the detail that makes a layout look designed
   rather than just "cards floating on black." */
.store-text h1, .store-text h2, .store-text h3,
.widget-title {
  position: relative;
  padding-bottom: 14px;
}

.store-text h1::after, .store-text h2::after, .store-text h3::after,
.widget-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* faint outline seam between the hero/header zone and the content below */
.site-header, header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(214, 40, 40, 0.15);
}

/* crisp 1px hairline around every card, sitting just outside the existing
   glass border, plus a corner accent for a "finished panel" feel */
.site-home-categories .category,
.store-products-list .store-product,
.store-products-images .store-product,
.category-description,
.store-text,
.store-product-full,
.widget {
  outline: 1px solid rgba(255, 255, 255, 0.04);
  outline-offset: 3px;
}

/* thin accent line down the left of nav items for structure */
.site-home-categories .category, nav li, .navigation li {
  border-left: 2px solid transparent;
  transition: border-color 0.3s var(--ease-smooth), background 0.3s ease;
}

.site-home-categories .category:hover, nav li:hover, .navigation li:hover {
  border-left: 2px solid var(--color-primary);
}

/* --- Tactile Buttons --- */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 8px; 
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.3s var(--ease-apple);
  will-change: transform, box-shadow;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* subtle diagonal sheen sweep on hover, the kind of detail that reads as expensive */
.btn-primary::after,
.btn-secondary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-smooth);
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-secondary:hover::after {
  left: 125%;
}

.btn-primary:hover, 
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  transform: translateY(-2px) scale(1.02); 
  box-shadow: 0 10px 24px rgb(from var(--btn-color-bg-hover) r g b/0.5);
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px) scale(0.98); 
  box-shadow: 0 2px 8px rgb(from var(--btn-color-bg-hover) r g b/0.4);
}

/* --- Categories & Products (The Dark Glass Cards) --- */
.site-home-categories .category,
.store-products-list .store-product,
.store-products-images .store-product,
.category-description,
.store-text,
.store-product-full,
.widget {
  border-radius: 16px; 
  padding: 24px var(--widget-padding);
  background: var(--color-card-bg); /* Dark gradient from variables */
  box-shadow: var(--shadow-md);
  transition: all 0.4s var(--ease-apple); 
  will-change: transform, box-shadow, border-color;
  /* Top rim light to simulate polished glass */
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.8) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Hover effect for all cards */
.site-home-categories .category:hover,
.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  background: var(--color-card-hover);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-hover-glow);
  border-top: 1px solid var(--color-primary) !important; /* Glow transfers to the rim */
}

/* Fix product text alignment */
.store-text h1, .store-text h2, .store-text h3, 
.store-text h4, .store-text h5, .store-text h6,
.widget-title {
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.5px; 
  color: #ffffff; /* Ensure headers are white */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* subtle lift off the dark bg */
}

.widget-title {
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

/* --- Price styling: small polish, reads premium instantly --- */
.price, .store-product .price, .basket-item .price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* --- 3D TOP PURCHASER FIX --- */
.widget-top-donator {
  text-align: center;
  overflow: visible; /* Prevents clipping of the 3D hover */
}

.widget-top-donator .avatar,
.widget-top-donator img {
  border-radius: 12px !important; /* REMOVED 50% CIRCLE to show full skin */
  width: auto;
  max-width: 120px; /* Let the skin size properly */
  height: auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1); 
  transition: all 0.5s var(--ease-apple);
  will-change: transform;
  margin: 0 auto 15px auto;
  display: block;
  image-rendering: pixelated; /* keeps Minecraft skins crisp, not blurred, when scaled */
}

.widget-top-donator .avatar:hover,
.widget-top-donator img:hover {
  transform: translateY(-12px) scale(1.1); /* 3D float forward effect */
  box-shadow: 0 20px 40px var(--color-primary-glow);
  border-color: var(--color-primary);
}

/* --- Quantity Fields & Inputs --- */
.quantity-field,
.store-product .quantity-field {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.store-product .quantity-field:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

.store-product .quantity-field input[type=number] {
  border: none;
  font-weight: 700;
  color: white;
  background: transparent;
}

.store-product .quantity-field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.15);
}

/* --- Progress Bars --- */
.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
  height: 14px; 
}

.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 10px;
  background: linear-gradient(90deg, #8B0000, var(--color-primary));
  box-shadow: 0 0 15px var(--color-primary-glow);
  transition: width 1.5s var(--ease-apple);
}

/* --- Popups & Baskets --- */
.popup-content {
  border-radius: 20px; 
  background: var(--color-card-bg);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08); 
}

.popup-close {
  border-radius: 0 20px 0 16px;
  transition: all 0.3s var(--ease-smooth);
}

.popup-close:hover {
  background-color: var(--color-primary);
  color: white;
}

.basket-item {
  border-radius: 10px;
  transition: background-color 0.3s var(--ease-apple), transform 0.3s var(--ease-apple);
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
}

.basket-item:hover {
  transform: translateX(6px); 
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--color-primary);
}

/* --- Media Sliders --- */
.media-slider .slider,
.media-slider .thumb {
  border-radius: 16px;
  transition: opacity 0.3s var(--ease-smooth), transform 0.4s var(--ease-apple);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.media-slider .thumb:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-hover-glow);
  border-color: var(--color-primary);
}