/**
 * Unified Styles for Landing Page Collapsible Panels
 * Used on Course landing page, Discounts landing page, etc.
 * Uses generic semantic classes and pattern selectors (no hardcoded panel IDs).
 */

/* Header sticky positioning & typography */
.landingpage-panel-header,
[id$="-collapse-header"] {
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    position: -webkit-sticky;
    position: sticky;
    top: var(--landingpage-sticky-top, 49px);
    z-index: 5;
}

.landingpage-panel-header.is-open,
.landingpage-panel-header.is-collapsing,
[id$="-collapse-header"].is-open,
[id$="-collapse-header"].is-collapsing {
    margin-bottom: 0 !important;
}

/* Panel Body Containers: zero vertical padding to ensure exact 0px collapse animation */
.landingpage-panel-collapse,
[id$="-collapse"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

/* Inner content wrapper holds the vertical padding */
.landingpage-panel-content {
    padding-top: 15px;
    padding-bottom: 15px;
}

.landingpage-panel-content.summary-table-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Performance optimization: smooth easing and layout isolation */
.form-panel-collapse.collapsing {
    -webkit-transition-property: height;
    transition-property: height;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    will-change: height;
}

/* Header chevron icon */
.landingpage-panel-header > a > i,
.landingpage-panel-header > a > .clickable i,
[id$="-collapse-header"] > a > i,
[id$="-collapse-header"] > a > .clickable i {
    font-size: 17px;
}

.landingpage-panel-header span:not(.clickable),
[id$="-collapse-header"] span:not(.clickable) {
    margin-right: 10px;
}