/* ========================================================================= */
/* Maya Pet Toy - Custom Static Stylesheet */
/* ========================================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Custom Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f8f4f0; /* brand-cream */
}

::-webkit-scrollbar-thumb {
  background: #ebdcd0; /* brand-beige */
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cfa054; /* brand-gold */
}

/* Keyframes for animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(0.97);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Nav Link indicators */
.active-tab-nav {
  color: #cfa054 !important; /* brand-gold */
  border-bottom: 2px solid #cfa054;
  padding-bottom: 4px;
}

/* Scroll lock when modal/drawer is open */
.overflow-hidden-lock {
  overflow: hidden !important;
}

/* FAQ Accordion active height */
.faq-content.open {
  display: block !important;
  max-height: 500px !important;
  margin-top: 4px;
}

/* Drawer panel transitions */
#drawer-catalog-panel, #drawer-quote-panel {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#drawer-catalog-backdrop, #drawer-quote-backdrop, #modal-process-backdrop, #modal-auth-backdrop {
  transition: opacity 0.3s ease-out;
}

#modal-process-card, #modal-auth-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom shadow effects */
.shadow-gold-glow {
  box-shadow: 0 10px 25px -5px rgba(207, 160, 84, 0.15);
}

.shadow-inner-subtle {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
}

/* Category pills horizontal scrollbar custom height */
.scrollbar-thin::-webkit-scrollbar {
  height: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #ebdcd0;
}