@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;
}
::-webkit-scrollbar-thumb:hover {
  background: #b51f1f;
}

body {
  font-family: Lato, sans-serif;
  scroll-behavior: smooth; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

/* --- Floating & Glowing Logo Animation FIX --- */
@keyframes floatAndGlow {
  0%, 100% {
    transform: translateY(0px);
    filter: drop-shadow(0 0 15px rgba(214, 40, 40, 0.4));
  }
  50% {
    transform: translateY(-12px); /* Higher float */
    filter: drop-shadow(0 0 35px rgba(214, 40, 40, 0.9)); /* Much brighter glow */
  }
}

/* Broader target to ensure we hit the exact Tebex logo image */
.logo, .site-logo, .site-header-inner .info {
  display: inline-block; /* Required for transforms to work */
}

.logo img, .site-logo img, .site-header-inner .info .image, .navbar-brand img {
  animation: floatAndGlow 4s ease-in-out infinite !important;
  will-change: transform, filter; 
  border-radius: 0 !important; /* Removes unwanted borders on the logo */
  display: inline-block;
}

/* --- 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);
}

.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 */
}

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

/* --- 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;
}

.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;
}

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

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

/* --- 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);
}