:root {
    --stfm-tab-spacing: 0.25rem;
    --stfm-tab-image-max-height: 280px;
    --stfm-muted-text: #6c757d; /* Bootstrap text-muted */
    --stfm-light-gray-active: #e9ecef;
}

/* ==========================================================================
   Tab Section Styles
   ========================================================================== */
.stfm-tab-section {
    /* Uses pt-4 pb-5 */
}

.stfm-vertical-tabs.row {
    /* No special styling needed */
}

/* --- Tab Navigation UL --- */
.stfm-vertical-tabs .stfm-tab-nav {
    background-color: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    width: 100%;
}

/* OPTION 2: Border + Background Enhancement */
/* Replace the existing tab button styles in stfmtabs.css with these updated styles */

/* --- Tab Buttons (Nav Links) --- */
.stfm-vertical-tabs .nav-pills .nav-link {
    color: var(--stfm-primary);
    font-family: var(--stfm-body-font);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8rem 1.25rem;
    margin-bottom: var(--stfm-tab-spacing);
    background-color: var(--stfm-light-gray);
    border: none;
    border-left: 4px solid transparent; /* Add transparent left border for all tabs */
    border-radius: 0;
    width: 100%;
    text-align: left;
    line-height: 1.4;
    transition: all 0.3s ease; /* Enhanced transition for all properties */
    position: relative;
}

    .stfm-vertical-tabs .nav-pills .nav-link:last-child {
        margin-bottom: 0;
    }

    /* --- Tab Button Hover State --- */
    .stfm-vertical-tabs .nav-pills .nav-link:hover,
    .stfm-vertical-tabs .nav-pills .nav-link:focus {
        background-color: var(--stfm-light-gray-hover);
        color: var(--stfm-primary);
        border-left-color: rgba(0, 150, 210, 0.3); /* Subtle blue border on hover */
        transform: translateX(2px); /* Slight movement on hover */
    }

    /* --- Tab Button Active State --- */
    .stfm-vertical-tabs .nav-pills .nav-link.active,
    .stfm-vertical-tabs .nav-pills .show > .nav-link {
        background-color: #ffffff; /* White background for selected tab */
        color: var(--stfm-primary);
        font-weight: 700; /* Bolder font weight */
        border-left-color: var(--stfm-tertiary); /* Thick blue left border */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Drop shadow for elevation */
        transform: translateX(4px); /* Slight movement to show selection */
    }

        /* --- Optional: Add a subtle gradient to active tab --- */
        .stfm-vertical-tabs .nav-pills .nav-link.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 4px; /* Start after the border */
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 150, 210, 0.03) 0%, rgba(0, 150, 210, 0.01) 100%);
            pointer-events: none;
            border-radius: 0 0 0 0;
        }

/* --- Tab Content Area --- */
.stfm-tab-content {
    padding: 1.5rem 2rem;
    border: none;
    border-radius: 0.375rem; /* Match panel radius */
    background-color: #ffffff;
    width: 100%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07); /* Final shadow value */
}

/* Constrain video container width */
.video-container {
    max-width: 720px; /* Adjust this value as needed */
}

/* --- Content Styling within Tabs --- */
.stfm-tab-content .tab-content-title {
    font-size: 1.6rem;
    color: var(--stfm-primary);
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-family: var(--stfm-heading-font);
}

.stfm-tab-content h4 {
    font-size: 1.2rem;
    color: var(--stfm-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.stfm-tab-content p,
.stfm-tab-content ul,
.stfm-tab-content ol {
    font-family: var(--stfm-body-font);
    color: var(--stfm-text);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.stfm-tab-content ul,
.stfm-tab-content ol {
    padding-left: 2rem;
}

.stfm-tab-content li {
    margin-bottom: 0.5rem;
}

.tab-content-bullet-list-header {
    color: var(--stfm-secondary) !important;
}

/* Image styling */
.stfm-tab-content img.img-fluid {
    display: block;
    max-height: var(--stfm-tab-image-max-height);
    width: auto;
    object-fit: contain;
    border-radius: 0;
    border: none;
}

.tab-content-minimal-image-description {
    color: var(--stfm-muted-text) !important;
    font-size: .85rem !important;
    font-style: italic;
    margin-bottom: 1rem !important;
}

/* Constrain video container width */
.video-container {
    max-width: 720px; /* Adjust this value as needed */
}

/* Responsive Iframe */
.ratio iframe {
    border-radius: 0;
}


@media (max-width: 991.98px) {

    .stfm-tab-content {
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 767.98px) {

    .stfm-vertical-tabs .stfm-tab-nav {
        margin-bottom: 1rem;
    }

    .stfm-tab-content {
        padding: 1rem 1.2rem;
        box-shadow: none;
    }

    .stfm-panel {
        padding: 1rem 1.2rem;
    }


    .stfm-vertical-tabs .nav-pills .nav-link {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .stfm-tab-content .tab-content-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .stfm-panel-title,
    .section-header .section-title { /* Adjust section title size on mobile too */
        font-size: 1.25rem !important; /* Add !important if needed to override base */
        padding-left: 15px; /* Adjust padding if needed */
    }

        .section-header .section-title::before {
            width: 4px; /* Adjust accent bar size */
        }


    .stfm-tab-content h4 {
        font-size: 1.1rem;
    }

    .stfm-tab-content img.img-fluid {
        max-height: 220px;
    }
}