@import url('https://googleapis.com');

:root {
  --bg-color: #07110d;
  --text-color: #ffffff;
  --muted-color: rgba(255, 255, 255, 0.65);
  --accent-color: #00d67f;
  --button-hover: #32de98;
  --track-bg: #2b394a;
  --panel-color: rgba(255, 255, 255, 0.04);
  --panel-hover: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.12);
  --border-gradient: linear-gradient(90deg, #00d67f, #4dff88, #00ffcc);
}

body {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

nav.navbar.navbar-main {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1001 !important;
  width: 90% !important;
  margin: 12px auto !important;
  padding: 10px 40px !important;
  border: 3px solid transparent !important;
  border-radius: 60px !important;
  background:
    linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
    var(--border-gradient) border-box !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

nav.navbar .nav-link {
  color: var(--text-color) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

nav.navbar .nav-link:hover {
  color: #07110d !important;
  background: var(--accent-color) !important;
}

nav.navbar .nav-link i {
  color: inherit !important;
  margin-right: 6px;
}

main.bg-elegant-dark {
  padding-top: 120px !important;
  background: var(--bg-color) !important;
}

.btn, .btn-primary, .btn-theme, .shop-section .donate-button {
  padding: 12px 24px !important;
  border-radius: 999px !important;
  color: #07110d !important;
  background: linear-gradient(90deg, #00d67f, #7cff6b, #00ffcc) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-family: 'Montserrat', sans-serif !important;
  border: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn:hover, .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 214, 127, 0.35) !important;
  background: linear-gradient(90deg, #00d67f, #7cff6b, #00ffcc) !important;
  color: #07110d !important;
}
.product-card, .shop-item, .card {
  background: var(--panel-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 30px !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.product-card:hover, .shop-item:hover {
  transform: translateY(-4px) !important;
  background: var(--panel-hover) !important;
  border-color: rgba(0, 214, 127, 0.55) !important;
}

.shop-name, .display-1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text-color) !important;
}

.stripe-loading-indicator .stripe, 
.stripe-loading-indicator .stripe-loaded {
  background: var(--accent-color) !important;
}