/* CF7 Conditional Sections CSS */
.wpcf7cs-section {
  display: none;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.wpcf7cs-section[data-open] {
  display: grid;
}

/* Animation states - applied via inline styles during transition */
.wpcf7cs-section[data-animating] {
  display: grid;
  overflow: hidden;
}

/* Ensure animations are smooth */
.wpcf7cs-section * {
  box-sizing: border-box;
}

/* Hide CF7 validation errors for fields in hidden sections */
.wpcf7cs-section[aria-hidden="true"] .wpcf7-not-valid-tip {
  display: none !important;
}

.wpcf7cs-section[aria-hidden="true"] .wpcf7-not-valid {
  border-color: inherit !important;
}

/**
 * Layout: contents mode
 * For use within CSS Grid parents - the wrapper becomes invisible to layout
 * Animation uses opacity/visibility instead of height
 */
.wpcf7cs-section.wpcf7cs-contents {
  display: contents;
}

/* Contents mode: hidden state - hide all direct children */
.wpcf7cs-section.wpcf7cs-contents[aria-hidden="true"] > * {
  display: none !important;
}

/* Contents mode: visible state with fade animation */
.wpcf7cs-section.wpcf7cs-contents[data-open] > * {
  animation: cf7cs-fade-in 200ms ease forwards;
}

/* Contents mode: animating out */
.wpcf7cs-section.wpcf7cs-contents[data-animating="out"] > * {
  animation: cf7cs-fade-out 200ms ease forwards;
}

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

@keyframes cf7cs-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}