/* Custom resets & variables */
:root {
  --color-dark-bg: #030712;
  --color-card-bg: #0a0f1d;
  --color-gold: #d4af37;
  --color-gold-hover: #f3cd5f;
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #20ba56;
}

body {
  background-color: var(--color-dark-bg);
  background-image: radial-gradient(
      ellipse at 50% -20%,
      rgba(212, 175, 55, 0.08),
      rgba(3, 7, 18, 0) 50%
    ),
    radial-gradient(
      circle at 10% 40%,
      rgba(37, 211, 102, 0.02),
      rgba(3, 7, 18, 0) 40%
    );
  background-attachment: fixed;
}

/* Dynamic glow elements */
.bg-radial-gradient {
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.05) 0%,
    rgba(3, 7, 18, 0) 70%
  );
}

/* WhatsApp Neon Glow Effect on Hover */
.cta-whatsapp {
  background-color: var(--color-whatsapp);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.8), 0 0 35px rgba(37, 211, 102, 0.4);
  transform: translateY(-2px) scale(1.02);
}

/* Telegram CTA */
.cta-telegram {
  background-color: #229ED9;
  box-shadow: 0 4px 14px rgba(34, 158, 217, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-telegram:hover {
  background-color: #1a8dc5;
  box-shadow: 0 0 20px rgba(34, 158, 217, 0.8), 0 0 35px rgba(34, 158, 217, 0.4);
  transform: translateY(-2px) scale(1.02);
}

@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 0.25s ease-out both; }

/* Active tab styles */
.tab-btn.active {
  background-color: var(--color-gold);
  color: #000000;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.2);
}

/* Interactive Accordion Custom Animations */
.faq-content {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active {
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.04);
}

.faq-item.active button i {
  transform: rotate(180deg);
}

/* Carousel active slide */
.testimonial-slide {
  animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style for interactive slider range */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Mobile action bar (fixed bottom) — 3 items */
.mobile-actionbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
}
.mobile-actionbar-item {
  color: #9ca3af;
  position: relative;
  transition: color 0.2s ease, transform 0.15s ease;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-actionbar-item:active { transform: scale(0.94); }
.mobile-actionbar-item.active {
  color: var(--color-gold);
}
.mobile-actionbar-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* Reserve space below content so the fixed bar never masks anything */
@media (max-width: 1023px) {
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}