.code-tab-wrapper {
    max-width: 1200px;
    margin: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    background-color: #2d2d2d;
}

/* Top header with mac buttons and tabs */
.code-tab-header {
    display: flex;
    align-items: center;
    background: #1f1f1f;
    padding: 8px 16px 0px 16px;
    gap: 8px;
}

/* Mac-style buttons */
.mac-buttons {
    display: flex;
    gap: 4px;
    margin-right: 6px;
    margin-bottom: 6px;
}

/* Mac-style buttons */
.mac-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.mac-btn.red { background-color: #ff5f56; }
.mac-btn.yellow { background-color: #ffbd2e; }
.mac-btn.green { background-color: #27c93f; }

/* Hover effects */
.mac-btn:hover {
    filter: brightness(1.2); /* brightens the button slightly */
    transform: scale(1.15);   /* slightly enlarges for feedback */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* subtle shadow */
}

/* Optional: active/click feedback */
.mac-btn:active {
    transform: scale(1.05);
    filter: brightness(1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Tabs next to buttons */
.tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
    scroll-behavior: smooth;

    /* Hide scrollbars visually but keep functionality */
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}

.tabs::-webkit-scrollbar {
    display: none;
}


.tab {
    position: relative;
    display: flex;              /* ← THIS is the key */
    align-items: center;        /* vertical centering */
    gap: 8px;
    height: 35px;
    padding: 10px 16px 10px 16px;
    cursor: pointer;
    background: #1f1f1f;
    color: #fff;
    border-radius: 6px 6px 0 0;
    font-weight: 400;
    font-size: 0.8rem;
    z-index: 1;
    flex: 0 0 auto;   /* 🔥 prevents shrinking */
    white-space: nowrap; /* prevents text wrapping */
}

.tab.active {
    background: #2d2d2d;          /* same as code block */
    z-index: 3;
}

/* Hover effect for non-active tabs */
.tab:not(.active):hover {
    background-color: #353535; /* slightly lighter */
    z-index: 2; /* make sure it stays above other tabs */
}

/* Make the icon fully visible on hover */
.tab:not(.active):hover .tab-icon {
    opacity: 1;
}


/* Container for the icon */
.tab-icon {
    display: inline-flex;   /* ensures svg fits */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* Default size & color for inline generic icon */
.tab-icon svg {
    width: 14px;
    height: 14px;
    stroke: #ffffff; /* fallback color */
}


/* Optional: dim inactive tabs */
.tab:not(.active) .tab-icon {
    opacity: 0.7;
}

/* Code containers */
.code-container {
    position: relative;
    background: #2d2d2d;
    padding: 16px;
    z-index: 1;
}

pre {
    margin: 0;
}

.copy-btn {
    flex-shrink: 0;
    margin-left: auto;
    background: #2d2d2d;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.copy-btn:hover {
    background: #3a3a3a;
}

.copy-btn.copied {
    background: #adadad;
    color: #000;
}


/* Phones: max width 480px (common breakpoint) */
@media (max-width: 576px) {

    .tab {
        font-size: 0.75rem;  /* smaller tab text */
        padding: 8px 12px;   /* adjust tab padding for mobile */
    }

    .copy-btn {
        font-size: 0.7rem;   /* smaller copy button */
        padding: 4px 8px;
    }

    .tab-icon svg {
        width: 12px;  /* slightly smaller icons */
        height: 12px;
    }

    .code-container {
        padding: 12px; /* less padding inside code block */
    }
}