.ce-tabs {
    margin: 2rem 0;

    .tab-nav {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 2px solid #e5e5e5;
        margin-bottom: 1.5rem;
        gap: 0;

        .tab-button {
            background: #f8f9fa;
            border: 1px solid #e5e5e5;
            border-bottom: none;
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 0.9rem;
            color: #6c757d;
            transition: all 0.3s ease;
            border-radius: 0.5rem 0.5rem 0 0;
            margin-right: 0.125rem;
            position: relative;

            &:hover {
                background: #e9ecef;
                color: #495057;
            }

            &.active {
                background: #fff;
                color: #212529;
                border-color: #007bff;
                border-bottom: 2px solid #fff;
                margin-bottom: -2px;
                z-index: 1;
                font-weight: 600;
            }
        }
    }

    .tab-content {
        .tab-panel {
            display: none;
            /* Hide all panels by default */

            &.active {
                display: block;
                /* Show only active panel */
            }

            .tab-panel-inner {
                /* padding: 1rem 0; */

                .tab-content-title {
                    margin-top: 0;
                    margin-bottom: 1rem;
                    color: #212529;
                    font-weight: 600;
                }

                .tab-content-body {
                    line-height: 1.6;
                    color: #495057;

                    header {
                        display: none;
                        visibility: hidden;
                    }

                    >.frame {
                        padding-inline: 0;
                    }

                    p {
                        margin-bottom: 1rem;
                    }

                    ul,
                    ol {
                        margin-bottom: 1rem;
                        padding-left: 1.5rem;
                    }

                    img {
                        max-width: 100%;
                        height: auto;
                    }
                }
            }
        }
    }
}

/* Responsive Design - Mobile First */
@media (min-width: 769px) {
    .ce-tabs {
        .tab-nav {
            flex-wrap: nowrap;

            .tab-button {
                padding: 0.75rem 1.5rem;
                font-size: 1rem;
                margin-right: 0.25rem;
            }
        }

        .tab-content {
            .tab-panel {
                .tab-panel-inner {
                    padding: 1.5rem 0;
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    .ce-tabs {
        .tab-nav {
            .tab-button {
                padding: 1rem 2rem;
                font-size: 1.1rem;
            }
        }

        .tab-content {
            .tab-panel {
                .tab-panel-inner {
                    padding: 2rem 0;
                }
            }
        }
    }
}