/*
 * Gravity Forms uses a 12-column CSS grid. The accordion is generated as a
 * direct child of that grid, so it must explicitly span every column.
 * !important is intentional here because some themes assign widths to the
 * generic Bootstrap .accordion class after this stylesheet is loaded.
 */
.sm-gfba-accordion,
.gform_wrapper .gform_fields > .sm-gfba-accordion,
.gform_wrapper.gravity-theme .gform_fields > .sm-gfba-accordion,
.gform_wrapper .gform_page_fields .gform_fields > .sm-gfba-accordion {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    margin: 0 0 1.5rem;
}

.sm-gfba-accordion > .accordion-item,
.sm-gfba-accordion .accordion-header,
.sm-gfba-accordion .accordion-button,
.sm-gfba-accordion .accordion-collapse,
.sm-gfba-accordion .accordion-body {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

.sm-gfba-accordion .accordion-item {
    overflow: hidden;
}

/*
 * Restore the Gravity Forms 12-column layout inside every accordion panel.
 * Fields are moved out of the original .gform_fields wrapper by JavaScript,
 * so the accordion body must become a new field grid.
 */
.gform_wrapper .sm-gfba-accordion .sm-gfba-accordion-body,
.gform_wrapper.gravity-theme .sm-gfba-accordion .sm-gfba-accordion-body,
.sm-gfba-accordion .sm-gfba-accordion-body {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: var(--gf-form-gap-x, 2%) !important;
    row-gap: var(--gf-form-gap-y, 1rem) !important;
    align-items: start;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.sm-gfba-accordion-body > .sm-gfba-panel-description,
.sm-gfba-accordion-body > .gfield {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Current Gravity Forms field-width classes. */
.sm-gfba-accordion-body > .gfield.gfield--width-twelfth {
    grid-column: span 1 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-sixth {
    grid-column: span 2 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-quarter {
    grid-column: span 3 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-third {
    grid-column: span 4 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-five-twelfths {
    grid-column: span 5 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-half {
    grid-column: span 6 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-seven-twelfths {
    grid-column: span 7 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-two-thirds {
    grid-column: span 8 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-three-quarter {
    grid-column: span 9 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-five-sixths {
    grid-column: span 10 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-eleven-twelfths {
    grid-column: span 11 !important;
}

.sm-gfba-accordion-body > .gfield.gfield--width-full {
    grid-column: 1 / -1 !important;
}

/* Legacy Gravity Forms Ready Classes. */
.sm-gfba-accordion-body > .gfield.gf_left_half,
.sm-gfba-accordion-body > .gfield.gf_right_half {
    grid-column: span 6 !important;
}

.sm-gfba-accordion-body > .gfield.gf_left_third,
.sm-gfba-accordion-body > .gfield.gf_middle_third,
.sm-gfba-accordion-body > .gfield.gf_right_third {
    grid-column: span 4 !important;
}

.sm-gfba-accordion-body > .gfield.gf_first_quarter,
.sm-gfba-accordion-body > .gfield.gf_second_quarter,
.sm-gfba-accordion-body > .gfield.gf_third_quarter,
.sm-gfba-accordion-body > .gfield.gf_fourth_quarter {
    grid-column: span 3 !important;
}

/* Optional Bootstrap column classes added in a field's CSS Class Name box. */
.sm-gfba-accordion-body > .gfield.col-1 { grid-column: span 1 !important; }
.sm-gfba-accordion-body > .gfield.col-2 { grid-column: span 2 !important; }
.sm-gfba-accordion-body > .gfield.col-3 { grid-column: span 3 !important; }
.sm-gfba-accordion-body > .gfield.col-4 { grid-column: span 4 !important; }
.sm-gfba-accordion-body > .gfield.col-5 { grid-column: span 5 !important; }
.sm-gfba-accordion-body > .gfield.col-6 { grid-column: span 6 !important; }
.sm-gfba-accordion-body > .gfield.col-7 { grid-column: span 7 !important; }
.sm-gfba-accordion-body > .gfield.col-8 { grid-column: span 8 !important; }
.sm-gfba-accordion-body > .gfield.col-9 { grid-column: span 9 !important; }
.sm-gfba-accordion-body > .gfield.col-10 { grid-column: span 10 !important; }
.sm-gfba-accordion-body > .gfield.col-11 { grid-column: span 11 !important; }
.sm-gfba-accordion-body > .gfield.col-12 { grid-column: 1 / -1 !important; }

@media (min-width: 576px) {
    .sm-gfba-accordion-body > .gfield.col-sm-3 { grid-column: span 3 !important; }
    .sm-gfba-accordion-body > .gfield.col-sm-4 { grid-column: span 4 !important; }
    .sm-gfba-accordion-body > .gfield.col-sm-6 { grid-column: span 6 !important; }
    .sm-gfba-accordion-body > .gfield.col-sm-8 { grid-column: span 8 !important; }
    .sm-gfba-accordion-body > .gfield.col-sm-9 { grid-column: span 9 !important; }
    .sm-gfba-accordion-body > .gfield.col-sm-12 { grid-column: 1 / -1 !important; }
}

@media (min-width: 768px) {
    .sm-gfba-accordion-body > .gfield.col-md-3 { grid-column: span 3 !important; }
    .sm-gfba-accordion-body > .gfield.col-md-4 { grid-column: span 4 !important; }
    .sm-gfba-accordion-body > .gfield.col-md-6 { grid-column: span 6 !important; }
    .sm-gfba-accordion-body > .gfield.col-md-8 { grid-column: span 8 !important; }
    .sm-gfba-accordion-body > .gfield.col-md-9 { grid-column: span 9 !important; }
    .sm-gfba-accordion-body > .gfield.col-md-12 { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
    .sm-gfba-accordion-body > .gfield {
        grid-column: 1 / -1 !important;
    }
}

.sm-gfba-accordion .accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
}

.sm-gfba-title {
    flex: 1 1 auto;
}

.sm-gfba-title-icon {
    flex: 0 0 auto;
    line-height: 1;
}

.sm-gfba-panel-description {
    margin: 0 0 1rem;
    color: var(--bs-secondary-color, #6c757d);
}

.sm-gfba-accordion-body > .gfield:last-child {
    margin-bottom: 0;
}

/*
 * Minimal Bootstrap-compatible fallback styling.
 * A Bootstrap theme can override these rules naturally.
 */
.sm-gfba-accordion .accordion-item {
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.sm-gfba-accordion .accordion-item + .accordion-item {
    border-top: 0;
}

.sm-gfba-accordion .accordion-item:first-of-type,
.sm-gfba-accordion .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--bs-border-radius, 0.375rem);
    border-top-right-radius: var(--bs-border-radius, 0.375rem);
}

.sm-gfba-accordion .accordion-item:last-of-type,
.sm-gfba-accordion .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
}

.sm-gfba-accordion .accordion-button {
    position: relative;
    padding: var(--bs-accordion-btn-padding-y, 1rem) var(--bs-accordion-btn-padding-x, 1.25rem);
    font: inherit;
    font-weight: 600;
    color: var(--bs-accordion-btn-color, var(--bs-body-color, #212529));
    background: var(--bs-accordion-btn-bg, var(--bs-body-bg, #fff));
    border: 0;
    cursor: pointer;
}

.sm-gfba-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color, #052c65);
    background-color: var(--bs-accordion-active-bg, #cfe2ff);
    box-shadow: inset 0 calc(-1 * var(--bs-border-width, 1px)) 0 var(--bs-border-color, #dee2e6);
}

.sm-gfba-accordion .accordion-button::after {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.2s ease-in-out;
}

.sm-gfba-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.sm-gfba-accordion .accordion-collapse.collapse:not(.show) {
    display: none;
}

.sm-gfba-accordion .accordion-body {
    padding: var(--bs-accordion-body-padding-y, 1rem) var(--bs-accordion-body-padding-x, 1.25rem);
}

.sm-gfba-accordion.accordion-flush .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.sm-gfba-accordion.accordion-flush .accordion-item:first-child {
    border-top: 0;
}

.sm-gfba-accordion.accordion-flush .accordion-item:last-child {
    border-bottom: 0;
}