/* Tabs + — i2t3 component styles
 * Richer tabs (vs. the Bootstrap "tab"): layout (tabs/big icons/navigation),
 * style (tabs/pills/underline), position (top/bottom/left/right), horizontal
 * alignment, optional justified nav, square corners and an icon per tab. Tab
 * switching uses the global Bootstrap bundle (no own JS).
 */

.i2t3-tab-plus__content { padding-top: 1rem; }

/* Position: bottom — nav under the content */
.i2t3-tab-plus--pos-bottom .i2t3-tab-plus__wrap { display: flex; flex-direction: column-reverse; }
.i2t3-tab-plus--pos-bottom .i2t3-tab-plus__content { padding-top: 0; padding-bottom: 1rem; }

/* Position: left / right — vertical nav beside the content */
.i2t3-tab-plus--pos-left .i2t3-tab-plus__wrap,
.i2t3-tab-plus--pos-right .i2t3-tab-plus__wrap { display: flex; gap: 1.5rem; align-items: flex-start; }
.i2t3-tab-plus--pos-right .i2t3-tab-plus__wrap { flex-direction: row-reverse; }
.i2t3-tab-plus--pos-left .i2t3-tab-plus__nav,
.i2t3-tab-plus--pos-right .i2t3-tab-plus__nav { flex: 0 0 auto; min-width: 12rem; }
.i2t3-tab-plus--pos-left .i2t3-tab-plus__content,
.i2t3-tab-plus--pos-right .i2t3-tab-plus__content { flex: 1 1 auto; padding-top: 0; }

/* ---------------------------------------------------------------------------
 * Accent colour on the DEFAULT "tabs" style.
 * Bootstrap leaves the active .nav-tabs link in its default colour, so the
 * chosen accent was invisible for the most common variant. Karma colours the
 * top border + text of the active (and hovered) tab — reproduce that here.
 * ------------------------------------------------------------------------- */
.i2t3-tab-plus--tabs .nav-tabs .nav-link {
    border-top: 3px solid transparent;
    color: var(--i2t3-tab-accent, #0d6efd);
}
.i2t3-tab-plus--tabs .nav-tabs .nav-link:hover,
.i2t3-tab-plus--tabs .nav-tabs .nav-link:focus {
    border-top-color: var(--i2t3-tab-accent, #0d6efd);
    color: var(--i2t3-tab-accent, #0d6efd);
}
.i2t3-tab-plus--tabs .nav-tabs .nav-link.active {
    border-top-color: var(--i2t3-tab-accent, #0d6efd);
    color: var(--i2t3-tab-accent, #0d6efd);
}
/* Vertical (left/right): accent the side border instead of the top border */
.i2t3-tab-plus--tabs.i2t3-tab-plus--pos-left .nav-tabs .nav-link {
    border-top: 0;
    border-left: 3px solid transparent;
}
.i2t3-tab-plus--tabs.i2t3-tab-plus--pos-left .nav-tabs .nav-link.active,
.i2t3-tab-plus--tabs.i2t3-tab-plus--pos-left .nav-tabs .nav-link:hover {
    border-left-color: var(--i2t3-tab-accent, #0d6efd);
}
.i2t3-tab-plus--tabs.i2t3-tab-plus--pos-right .nav-tabs .nav-link {
    border-top: 0;
    border-right: 3px solid transparent;
}
.i2t3-tab-plus--tabs.i2t3-tab-plus--pos-right .nav-tabs .nav-link.active,
.i2t3-tab-plus--tabs.i2t3-tab-plus--pos-right .nav-tabs .nav-link:hover {
    border-right-color: var(--i2t3-tab-accent, #0d6efd);
}

/* Style: underline fallback (for Bootstrap < 5.3) */
.i2t3-tab-plus--underline .nav-underline { gap: 1rem; }
.i2t3-tab-plus--underline .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.i2t3-tab-plus--underline .nav-link.active {
    border-bottom-color: var(--i2t3-tab-accent, #0d6efd);
    color: var(--i2t3-tab-accent, #0d6efd);
    background: transparent;
}

/* Pills active state uses the chosen accent */
.i2t3-tab-plus--pills .nav-link.active {
    background-color: var(--i2t3-tab-accent, #0d6efd);
}

/* ---------------------------------------------------------------------------
 * Square corners (when i2t3_rounded is unchecked): kill the rounded radius on
 * the tabs and the content pane.
 * ------------------------------------------------------------------------- */
.i2t3-tab-plus.is-sharp .nav-link,
.i2t3-tab-plus.is-sharp .tab-content,
.i2t3-tab-plus.is-sharp .i2t3-tab-plus__bigicon {
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Layout: big icons — large circled icon box above the tab title
 * (Karma featured-boxes-style-6 / featured-box-effect-6).
 * ------------------------------------------------------------------------- */
.i2t3-tab-plus--layout-bigicons .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
}
.i2t3-tab-plus__bigicon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin-bottom: .25rem;
    border: 1px solid #cecece;
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    color: var(--i2t3-tab-accent, #0d6efd);
    font-size: 2em;
    transition: transform .2s;
}
.i2t3-tab-plus__bigicon::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    width: 100%;
    height: 100%;
    padding: 1px;
    box-sizing: content-box;
    border: 5px solid rgba(var(--i2t3-tab-accent-rgb, 13,110,253), .15);
    border-radius: 50%;
    transition: transform .2s;
}
.i2t3-tab-plus--layout-bigicons .nav-link:hover .i2t3-tab-plus__bigicon::after,
.i2t3-tab-plus--layout-bigicons .nav-link.active .i2t3-tab-plus__bigicon::after {
    transform: scale(1.1);
}
.i2t3-tab-plus--layout-bigicons .nav-link.active .i2t3-tab-plus__bigicon {
    border-color: var(--i2t3-tab-accent, #0d6efd);
}

/* ---------------------------------------------------------------------------
 * Layout: navigation — vertical list of links in a col-lg-4 / col-lg-8 grid
 * with a chevron indicator on the active entry (Karma tabs-navigation).
 * ------------------------------------------------------------------------- */
.i2t3-tab-plus--layout-navigation .i2t3-tab-plus__nav { gap: 1px; }
.i2t3-tab-plus--layout-navigation .nav-link {
    position: relative;
    width: 100%;
    text-align: left;
    padding: 18px;
    color: var(--bs-body-color, #212529);
    border-radius: 0;
    border-left: 3px solid transparent;
}
.i2t3-tab-plus--layout-navigation .nav-link::after {
    font-family: "Font Awesome 6 Free", "bootstrap-icons";
    font-weight: 900;
    content: "\f054";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0;
    transition: opacity .2s;
}
.i2t3-tab-plus--layout-navigation .nav-link.active {
    color: var(--i2t3-tab-accent, #0d6efd);
    border-left-color: var(--i2t3-tab-accent, #0d6efd);
    background-color: rgba(var(--i2t3-tab-accent-rgb, 13,110,253), .08);
}
.i2t3-tab-plus--layout-navigation .nav-link.active::after {
    opacity: 1;
}
.i2t3-tab-plus--layout-navigation .i2t3-tab-plus__content { padding-top: 0; }