/* ================================
   CORE
================================ */

.quc-code-wrapper{
    position:relative;
    padding-left:10px;
padding-right:10px;
padding-bottom:10px;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:#fafafa;
}

.quc-code-inner{
    position:relative;
}

.quc-wrapper{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    margin-top:15px;
}

/* ================================
   ICON
================================ */

.quc-icon{
    cursor:pointer;
    z-index:10;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
}

.quc-icon svg{
    width:20px;
    height:20px;
    display:block;
    fill:currentColor;
}

.quc-icon i{
    font-size:20px;
}

/* ================================
   CODE BLOCK
================================ */

.quc-code{
    margin:0;
    font-family:monospace;
    font-size:14px;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.quc-code code{
    white-space:inherit;
}

/* ================================
   TEXT MODE
================================ */

.quc-text-wrapper{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:#fafafa;
    margin-bottom:12px;
    min-width:120px;
   }

.quc-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.quc-wrapper > .quc-icon,
.quc-wrapper > .quc-button:not(.quc-code-copy){
    position:static;
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
}

/* ================================
   HOVER EFFECTS
================================ */

.quc-code-inner .quc-icon{
    opacity:0.45;
    transition:opacity .2s ease, transform .15s ease;
    padding:6px 8px;
    border-radius:4px;
}

.quc-code-inner:hover .quc-icon{
    opacity:1;
}

.quc-code-inner .quc-icon:hover{
    transform:scale(1.08);
    background:rgba(0,0,0,0.06);
}

.quc-wrapper > .quc-icon,
.quc-wrapper > .quc-button:not(.quc-code-copy){
    opacity:0.55;
    transition:opacity .2s ease, transform .15s ease;
}

.quc-wrapper:hover > .quc-icon,
.quc-wrapper:hover > .quc-button:not(.quc-code-copy){
    opacity:1;
}

.quc-wrapper > .quc-icon:hover,
.quc-wrapper > .quc-button:not(.quc-code-copy):hover{
    transform:scale(1.05);
}

/* ================================
   COPY SUCCESS
================================ */

.quc-copied{
    background:#2ecc71 !important;
    color:#fff !important;
    transition:all .2s ease;
}

/* ================================
   TOOLTIP
================================ */

.quc-button{
    position:relative;
}

.quc-copy-container{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.quc-tooltip{
    position:absolute;
    top:-34px;
    left:50%;
    transform:translate(-50%,5px);
    background:#0f172a;
    color:#fff;
    padding:4px 8px;
    font-size:12px;
    border-radius:4px;
    white-space:nowrap;
    opacity:0;
    transition:all .2s ease;
    pointer-events:none;
}

.quc-tooltip.quc-show{
    opacity:1;
    transform:translate(-50%,0);
}

.quc-tooltip::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border-width:5px;
    border-style:solid;
    border-color:#0f172a transparent transparent transparent;
}

/* ================================
   LAYOUTS
================================ */

/* INLINE */

.quc-layout-inline{
    display:flex;
    align-items:center;
    gap:12px;
}

.quc-layout-inline pre{
    flex:1;
    margin:0;
}

.quc-layout-inline .quc-code{
    flex:1;
}

.quc-layout-inline .quc-button,
.quc-layout-inline .quc-icon{
    flex-shrink:0;
    margin-left:10px;
    cursor:pointer;
}

/* TOP RIGHT */

.quc-layout-topright{
    position:relative;
}

.quc-layout-topright .quc-code{
    padding-right:50px;
}

.quc-layout-topright .quc-button,
.quc-layout-topright .quc-icon{
    position:absolute;
    top:8px;
    right:8px;
}

/* ================================
   DEFAULT ICON VISIBILITY
================================ */

.quc-code-wrapper:not(.quc-layout-inline):not(.quc-layout-topright) .quc-icon{
    opacity:1;
    color:#374151;
}

/* ================================
   OPTIONAL POSITIONS (future)
================================ */

.quc-pos-top-right .quc-icon{
    top:10px;
    right:10px;
}

.quc-pos-top-left .quc-icon{
    top:10px;
    left:10px;
}

.quc-pos-bottom-right .quc-icon{
    bottom:10px;
    right:10px;
}

.quc-pos-bottom-left .quc-icon{
    bottom:10px;
    left:10px;
}

/* ================================
   HOVER BORDER
================================ */

.quc-text-wrapper:hover,
.quc-code-wrapper:hover{
    border-color:#2563eb;
}

.quc-layout-topright .quc-copy-container{
    position:absolute;
    top:8px;
    right:8px;
}