/* Frontend styles */
.sp-container{
    position:fixed;
    z-index:10001;
    color:transparent;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif
}
.sp-container .sp-bar{
    background:transparent;
    display:flex;
    gap:8px;
    z-index:3;
    position:relative
}
.sp-container .sp-tabbtn,
.sp-container .sp-tab-link,.sp-container .sp-tab-link a{

    /* ---------------------------
       FIXED RESET COLOR
       When tab color is empty "",
       fallback to parent color var(--sp-bg)
    ----------------------------*/
    background:var(--sp-tab-color, var(--sp-bg));

    padding:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--sp-bar,56px);
    height:var(--sp-bar,56px);
    outline:0;

    /* ---------------------------
       FIXED RESET TEXT COLOR
       When fg is "", fallback = parent var(--sp-fg)
    ----------------------------*/
    color:var(--sp-tab-fg, var(--sp-fg));

    border:0;
    border-radius:8px;
    text-decoration:none
}
.sp-container .sp-tabbtn.is-active{
    filter:brightness(1.15)
}
.sp-container .sp-tabbtn .dashicons,
.sp-container .sp-tab-link .dashicons{
    font-size:var(--sp-icon,24px);
    height:var(--sp-icon,24px);
    width:var(--sp-icon,24px)
}
.sp-container .sp-panel{
    position:fixed;
    background:var(--sp-bg,#111827);
    color:var(--sp-fg,#fff);
    width:var(--sp-w,min(520px,92vw));
    height:var(--sp-h,min(520px,92vh));
    padding:0;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transform:translate3d(0,0,0);
    transition:transform .28s ease,opacity .2s ease;
    opacity:0;
    pointer-events:none;
    border-radius:10px;
    display:block;
    z-index:2
}
.sp-container.is-open .sp-panel{
    opacity:1;
    pointer-events:auto
}
.sp-container .sp-panel-inner{
    width:100%;
    height:100%;
    padding:20px 24px;
    box-sizing:border-box;
    overflow:auto
}
.sp-container.is-full.sp-pos-left .sp-panel-inner,
.sp-container.is-full.sp-pos-right .sp-panel-inner{
    display:block
}
.sp-container.is-full.sp-pos-left .sp-panel-inner.is-centered,
.sp-container.is-full.sp-pos-right .sp-panel-inner.is-centered{
    display:flex;
    align-items:center
}
.sp-container .sp-content{
    line-height:1.5;
    max-width:900px;
    margin:0 auto
}
.sp-container .sp-title,
.sp-container .sp-panel,
.sp-container .sp-panel a,
.sp-container .sp-panel p,
.sp-container .sp-panel li,
.sp-container .sp-panel h1,
.sp-container .sp-panel h2,
.sp-container .sp-panel h3,
.sp-container .sp-panel h4,
.sp-container .sp-panel h5,
.sp-container .sp-panel h6{
    color:var(--sp-fg,#fff)
}
.sp-container .sp-close{
    position:absolute;
    top:8px;
    right:10px;
    background:transparent;
    border:0;
    color:var(--sp-fg,#fff);
    font-size:28px;
    cursor:pointer;
    z-index:4
}
.sp-container .sp-pane{
    display:none
}
.sp-container .sp-title{
    margin:8px 0 12px;
    font-size:18px
}

/* Positions */
.sp-pos-right{
    top:50%;
    right:0;
    transform:translateY(-50%)
}
.sp-pos-right .sp-bar{
    flex-direction:column;
    align-items:center
}
.sp-pos-right .sp-panel{
    right:calc(var(--sp-bar,56px) + 12px);
    top:50%;
    transform:translateY(-50%) translateX(16px)
}
.sp-pos-right.is-open .sp-panel{
    transform:translateY(-50%) translateX(0)
}
.sp-pos-left{
    top:50%;
    left:0;
    transform:translateY(-50%)
}
.sp-pos-left .sp-bar{
    flex-direction:column;
    align-items:center
}
.sp-pos-left .sp-panel{
    left:calc(var(--sp-bar,56px) + 12px);
    top:50%;
    transform:translateY(-50%) translateX(-16px)
}
.sp-pos-left.is-open .sp-panel{
    transform:translateY(-50%) translateX(0)
}
.sp-pos-top{
    left:50%;
    top:0;
    transform:translateX(-50%)
}
.sp-pos-top .sp-bar{
    flex-direction:row
}
.sp-pos-top .sp-panel{
    top:calc(var(--sp-bar,56px) + 12px);
    left:50%;
    transform:translateX(-50%) translateY(-16px)
}
.sp-pos-top.is-open .sp-panel{
    transform:translateX(-50%) translateY(0)
}
.sp-pos-bottom{
    left:50%;
    bottom:0;
    transform:translateX(-50%)
}
.sp-pos-bottom .sp-bar{
    flex-direction:row
}
.sp-pos-bottom .sp-panel{
    bottom:calc(var(--sp-bar,56px) + 12px);
    left:50%;
    transform:translateX(-50%) translateY(16px)
}
.sp-pos-bottom.is-open .sp-panel{
    transform:translateX(-50%) translateY(0)
}

/* Overlay */
.sp-global-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,var(--sp-overlay,.25));
    opacity:0;
    display:none;
    z-index:1;
    transition:opacity .2s ease
}

/* Tooltip */
.sp-tooltip{
    position:fixed;
    background:rgba(17,24,39,.98);
    color:#fff;
    font-size:14px;
    line-height:1.4;
    padding:6px 10px;
    border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    z-index:10002;
    pointer-events:none;
    opacity:0;
    transform:translateY(0);
    transition:opacity .12s ease-out,transform .12s ease-out;
    max-width:280px;
    word-wrap:break-word;
}
.sp-tooltip.is-visible{
    opacity:1;
    transform:translateY(-2px);
}

.sp-container .sp-tabbtn,
.sp-container .sp-tab-link {
    border-style: solid;
    border-width: var(--sp-tab-border-width, 0px);
    border-color: currentColor;
}

.sp-container .sp-tabbtn .sp-tab-label,
.sp-container .sp-tab-link .sp-tab-label {
    font-size: var(--sp-tab-label-font-size, 12px);
    line-height: 1.2;
}

.sp-container .sp-tabbtn,
.sp-container .sp-tab-link {
    border-radius: var(--sp-tab-radius, 8px);
}

/* Remove Kadence focus outline */
.sp-container .sp-tabbtn:focus,
.sp-container .sp-tab-link:focus,
.sp-container .sp-tabbtn:focus-visible,
.sp-container .sp-tab-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}