/**
 * Unified Animation Styles for HRF Donation Form
 * ===============================================
 * Provides consistent expand/collapse animations for all sections
 * Following DRY and KISS principles
 */

/* Base expandable section - hidden by default */
.expandable-section,
.recurring-options,
.organization-name,
.address-fields,
.stripe-fields,
.platform-fees-row,
.total-amount-row,
.loading-state,
.donation-result {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
}

/* Expanded state */
.expandable-section.show,
.recurring-options.show,
.organization-name.show,
.address-fields.show,
.stripe-fields.show,
.platform-fees-row.show,
.total-amount-row.show,
.loading-state.show,
.donation-result.show {
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
    overflow: unset;
}

/* Special case for stripe container which may need extra height */
.stripe-card-container {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
}

.stripe-card-container.show {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
    overflow: unset;
}

/* Ensure proper spacing when elements are shown */
.recurring-options.show,
.organization-name.show {
    margin-top: 15px;
    margin-bottom: 15px;
}
/*
.address-fields.show {
    padding-top: 20px;
}*/

/* Loading state specific styling */
.loading-state.show {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* Result div specific styling */
.donation-result.show {
    margin-top: 20px;
    padding: 15px;
}