/* ============================================================
   eStudy247 — Code Block Enhancement 
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.code-block-wrapper {
    position: relative;
    margin: 1.75rem 0;
    border-radius: 8px;
    border: 1.5px solid #d0d7de;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    overflow: hidden;
    font-family: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
}

/* ── Copy button — icon only, top-right corner ───────────── */
.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    color: #57606a;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    outline: none;
}
.code-copy-btn:hover {
    background: #0969da;
    border-color: #0969da;
    color: #ffffff;
}

/* Icons */
.code-copy-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.code-copy-btn .icon-copy  { display: flex; }
.code-copy-btn .icon-check { display: none; }
.code-copy-btn.copied .icon-copy  { display: none; }
.code-copy-btn.copied .icon-check { display: flex; }

/* Copied state */
.code-copy-btn.copied {
    background: #1a7f37;
    border-color: #1a7f37;
    color: #ffffff;
}

/* Tooltip */
.code-copy-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: #24292f;
    color: #ffffff;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s;
    z-index: 10;
}
.code-copy-btn:hover::after { opacity: 1; }

/* ── The <pre> element ───────────────────────────────────── */
.code-block-wrapper pre {
    margin: 0 !important;
    padding: 16px 50px 16px 20px !important; /* right padding leaves room for button */
    overflow-x: auto;
    background: #F5F5F5 !important;  /*previous: f6f8fa*/
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    color: #24292f !important;
    tab-size: 4;
}

/* ── Scrollbar ───────────────────────────────────────────── */
.code-block-wrapper pre::-webkit-scrollbar       { height: 6px; }
.code-block-wrapper pre::-webkit-scrollbar-track { background: #f6f8fa; } 
.code-block-wrapper pre::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }
.code-block-wrapper pre::-webkit-scrollbar-thumb:hover { background: #0969da; }