/* GrowCart Ecom | FAQ click-pop animation | 2026-11-09
   Visual-only progressive enhancement of all existing FAQ controls.
   Preserves native <details>, custom accordion logic, copy, and links. */

.gc-faq-pop {
  --gc-faq-blue: #0077FC;
  transform-origin: center top;
  backface-visibility: hidden;
}

.gc-faq-pop > summary,
.gc-faq-pop .faq-q,
.gc-faq-pop .elementor-tab-title,
.gc-faq-pop .eael-accordion-header,
.gc-faq-pop .eael-accordion-tab-title {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Every click briefly lifts the entire FAQ bar, then softly settles. */
@media (prefers-reduced-motion: no-preference) {
  .gc-faq-pop.gc-faq-burst {
    position: relative;
    z-index: 2;
    will-change: transform;
    animation: gc-faq-pop-bounce .38s cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes gc-faq-pop-bounce {
    0%   { transform: perspective(900px) scale(.987) rotateX(1.8deg); }
    42%  { transform: perspective(900px) scale(1.013) rotateX(-.8deg); }
    72%  { transform: perspective(900px) scale(.996) rotateX(0); }
    100% { transform: perspective(900px) scale(1) rotateX(0); }
  }

  /* Content appears with a restrained upward pop, not a jarring jump. */
  .gc-faq-pop[open] > p,
  .gc-faq-pop[open] > :not(summary),
  .gc-faq-pop.is-open .faq-a,
  .gc-faq-pop .elementor-tab-content.elementor-active,
  .gc-faq-pop .eael-accordion-content.eael-accordion-content-active {
    animation: gc-faq-answer-in .38s cubic-bezier(.22, 1, .36, 1) both;
    transform-origin: top center;
  }

  @keyframes gc-faq-answer-in {
    from { opacity: .62; transform: translateY(-6px) scale(.989); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .gc-faq-pop > summary h3,
  .gc-faq-pop .faq-q .faq-icon,
  .gc-faq-pop > summary::after,
  .gc-faq-pop > summary .e-n-accordion-item-title-icon {
    transition: color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
  }
}

/* Keep the existing selected/open visual treatment and brand colors. */
.gc-faq-pop[open] > summary h3,
.gc-faq-pop.is-open .faq-q {
  color: #040037;
}
.gc-faq-pop[open] > summary::after,
.gc-faq-pop.is-open .faq-q .faq-icon {
  color: #0077FC;
}

/* Don't animate when users request reduced motion, or in print. */
@media (prefers-reduced-motion: reduce) {
  .gc-faq-pop,
  .gc-faq-pop.gc-faq-burst,
  .gc-faq-pop[open] > :not(summary),
  .gc-faq-pop.is-open .faq-a,
  .gc-faq-pop .elementor-tab-content.elementor-active,
  .gc-faq-pop .eael-accordion-content.eael-accordion-content-active {
    animation: none !important;
    transform: none !important;
  }
}
@media print {
  .gc-faq-pop,
  .gc-faq-pop.gc-faq-burst,
  .gc-faq-pop[open] > :not(summary),
  .gc-faq-pop.is-open .faq-a,
  .gc-faq-pop .elementor-tab-content.elementor-active,
  .gc-faq-pop .eael-accordion-content.eael-accordion-content-active {
    animation: none !important;
    transform: none !important;
  }
}