/* ============================================================
   Nested Tabs Active State Fix — Sitewide
   Targets: Elementor Pro 4.x Nested Tabs Widget
   Brand: Primary #082553 | Secondary #0BA9AE
   Root cause: Elementor often uses CSS vars, need extreme specificity
   ============================================================ */

/* Force Elementor CSS variables for nested tabs active state */
.elementor-widget-n-tabs {
    --e-n-tab-title-color-active: #ffffff !important;
    --e-n-tab-title-background-color-active: #0BA9AE !important;
    --e-n-tab-title-border-color-active: #0BA9AE !important;
    --n-tabs-title-color-active: #ffffff !important;
    --n-tabs-title-background-color-active: #0BA9AE !important;
    --n-tabs-title-border-color-active: #0BA9AE !important;
}

/* --- Active Tab Title (aria-selected, e-active, focus) --- */
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"],
body .elementor-widget-n-tabs .e-n-tab-title.e-active,
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"]:focus {
    background-color: #0BA9AE !important;
    color: #ffffff !important;
    border-color: #0BA9AE !important;
    box-shadow: none !important;
}

/* --- Active Tab Title inner text/icon --- */
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] i,
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] svg,
body .elementor-widget-n-tabs .e-n-tab-title.e-active .e-n-tab-title-text,
body .elementor-widget-n-tabs .e-n-tab-title.e-active i,
body .elementor-widget-n-tabs .e-n-tab-title.e-active svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* --- Active Tab indicator/border accent --- */
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"]::before,
body .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"]::after,
body .elementor-widget-n-tabs .e-n-tab-title.e-active::before,
body .elementor-widget-n-tabs .e-n-tab-title.e-active::after {
    background-color: #0BA9AE !important;
    border-color: #0BA9AE !important;
}

/* --- Hover state on non-active tabs --- */
body .elementor-widget-n-tabs .e-n-tab-title:not([aria-selected="true"]):hover,
body .elementor-widget-n-tabs .e-n-tab-title:not(.e-active):hover {
    color: #0BA9AE !important;
    border-color: #0BA9AE !important;
}

body .elementor-widget-n-tabs .e-n-tab-title:not([aria-selected="true"]):hover .e-n-tab-title-text,
body .elementor-widget-n-tabs .e-n-tab-title:not(.e-active):hover i {
    color: #0BA9AE !important;
}

/* --- Legacy tabs widget fallback --- */
body .elementor-widget-tabs .elementor-tab-title.elementor-active,
body .elementor-widget-tabs .elementor-tab-desktop-title.elementor-active,
body .elementor-widget-tabs .elementor-tab-mobile-title.elementor-active {
    background-color: #0BA9AE !important;
    color: #ffffff !important;
    border-color: #0BA9AE !important;
}