/* Accordion + — i2t3 component styles
 * The richer accordion (vs. the Bootstrap "accordion"): style variants, sizes,
 * per-item icon and per-item initial-open. Built on the Bootstrap 5 accordion.
 * Style variants ported faithfully from Karma ns-accordions (styles 0–11).
 */

.i2t3-accordion-plus__icon {
    width: 1.25em;
    text-align: center;
    color: var(--i2t3-accplus-accent, var(--i2t3-primary, #0d6efd));
}

/* Sizes */
.i2t3-accordion-plus--sm .accordion-button { padding: .5rem .85rem; font-size: .9rem; }
.i2t3-accordion-plus--lg .accordion-button { padding: 1.25rem 1.5rem; font-size: 1.15rem; }

/* Sharp border — square corners instead of the Bootstrap rounded look (Karma enableSharpBorder) */
.i2t3-accordion-plus--sharp .accordion-item,
.i2t3-accordion-plus--sharp .accordion-item:first-of-type,
.i2t3-accordion-plus--sharp .accordion-item:last-of-type,
.i2t3-accordion-plus--sharp .accordion-button {
    border-radius: 0;
}

/* Style: faq — subtle question emphasis */
.i2t3-accordion-plus--faq .accordion-button { font-weight: 600; }

/* Style: flush — fully borderless (Bootstrap-flush look) */
.i2t3-accordion-plus--flush .accordion-item { border-left: 0; border-right: 0; border-radius: 0; }
.i2t3-accordion-plus--flush .accordion-item:first-child { border-top: 0; }
.i2t3-accordion-plus--flush .accordion-button { background: transparent; padding-left: 0; padding-right: 0; }

/* Style: without-bg — transparent header background, borders REMAIN (Karma style 2) */
.i2t3-accordion-plus--without-bg .accordion-button { background: transparent; }
.i2t3-accordion-plus--without-bg .accordion-button:not(.collapsed) { box-shadow: none; }
.i2t3-accordion-plus--without-bg .accordion-body { padding-top: 0; }

/* Style: borderless — no borders AND transparent background (Karma style 3) */
.i2t3-accordion-plus--borderless .accordion-item { border: 0; border-radius: 0; }
.i2t3-accordion-plus--borderless .accordion-button {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.i2t3-accordion-plus--borderless .accordion-body { padding-left: 0; padding-right: 0; }

/* Style: modern — separated cards, 4px grey border, grey header (Karma style 4) */
.i2t3-accordion-plus--modern .accordion-item,
.i2t3-accordion-plus--modern-dark .accordion-item,
.i2t3-accordion-plus--modern-transparent .accordion-item {
    border: 4px solid var(--i2t3-grey-100, #f4f4f4);
    border-radius: .25rem;
    margin-bottom: .75rem;
    overflow: hidden;
}
.i2t3-accordion-plus--modern .accordion-button,
.i2t3-accordion-plus--modern-dark .accordion-button {
    background-color: var(--i2t3-grey-100, #f4f4f4);
    border-radius: 0;
    color: var(--i2t3-accplus-accent, var(--i2t3-primary, #0d6efd));
}

/* Style: modern-dark — modern look but dark heading text (Karma style 5) */
.i2t3-accordion-plus--modern-dark .accordion-button {
    color: var(--i2t3-body-color, #212529);
    font-weight: 700;
}

/* Style: modern-transparent — modern frame, transparent header (Karma style 6) */
.i2t3-accordion-plus--modern-transparent .accordion-button {
    background-color: transparent;
    border-radius: 0;
    font-weight: 700;
}

/* Style: filled — active header in the accent colour (Karma style 7 color) */
.i2t3-accordion-plus--filled .accordion-button:not(.collapsed) {
    background: var(--i2t3-accplus-accent, var(--i2t3-primary, #0d6efd));
    color: #fff;
}
.i2t3-accordion-plus--filled .accordion-button:not(.collapsed) .i2t3-accordion-plus__icon { color: #fff; }
.i2t3-accordion-plus--filled .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }

/* Style: status — animated "+" indicator that rotates 45° to "×" on open (Karma style 10).
 * Replaces the Bootstrap chevron with a typographic plus sign. Cards are borderless with a
 * grey header; the active header is coloured in the accent colour. */
.i2t3-accordion-plus--status .accordion-item,
.i2t3-accordion-plus--status-arrow .accordion-item {
    border: 1px solid transparent;
    border-radius: 0;
    margin-bottom: 17px;
    transition: border-color 300ms ease;
}
.i2t3-accordion-plus--status .accordion-button,
.i2t3-accordion-plus--status-arrow .accordion-button {
    position: relative;
    padding: 23px 30px;
    background-color: var(--i2t3-grey-100, #f4f4f4);
    transition: background-color 300ms ease, color 300ms ease;
}
/* Active header takes the accent colour */
.i2t3-accordion-plus--status .accordion-button:not(.collapsed),
.i2t3-accordion-plus--status-arrow .accordion-button:not(.collapsed) {
    background-color: var(--i2t3-accplus-accent, var(--i2t3-primary, #0d6efd));
    color: #fff;
    box-shadow: none;
}
.i2t3-accordion-plus--status .accordion-button:not(.collapsed) .i2t3-accordion-plus__icon,
.i2t3-accordion-plus--status-arrow .accordion-button:not(.collapsed) .i2t3-accordion-plus__icon { color: #fff; }
/* Hover hint on a collapsed card */
.i2t3-accordion-plus--status .accordion-item:hover .accordion-button.collapsed,
.i2t3-accordion-plus--status-arrow .accordion-item:hover .accordion-button.collapsed {
    color: var(--i2t3-accplus-accent, var(--i2t3-primary, #0d6efd));
}
/* status: typographic "+" indicator, rotates 45° when open */
.i2t3-accordion-plus--status .accordion-button::after {
    content: '+';
    background-image: none;
    width: auto;
    height: auto;
    font-size: 1.5rem;
    line-height: 1;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    transition: transform 300ms ease;
}
.i2t3-accordion-plus--status .accordion-button.collapsed::after {
    transform: rotate(0deg);
}

/* status-arrow: Font Awesome chevron, rotates 180° when open (Karma style 11).
 * Cards keep a subtle border instead of the grey filled header. */
.i2t3-accordion-plus--status-arrow .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.085);
}
.i2t3-accordion-plus--status-arrow .accordion-button {
    background-color: transparent;
}
.i2t3-accordion-plus--status-arrow .accordion-button::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background-image: none;
    width: auto;
    height: auto;
    line-height: 1;
    transform: rotate(180deg);
    transform-origin: 50% 50%;
    transition: transform 300ms ease;
}
.i2t3-accordion-plus--status-arrow .accordion-button.collapsed::after {
    transform: rotate(0deg);
}