/* =============================================================================
   SLS Label Studio – designer.css  v2.3.1
   Ground-up rewrite: stable grid, no reflow, production-ready
   ============================================================================= */

/* 1. RESET */
.sls-container *,
.sls-container *::before,
.sls-container *::after { box-sizing: border-box; }

/* 2. VARIABLES */
.sls-container {
    --p:    #0066ff;
    --acc:  #00d2ff;
    --ok:   #22c55e;
    --err:  #ef4444;
    --warn: #f59e0b;
    --bg:   #ffffff;
    --bg2:  #f8fafc;
    --glass:rgba(255,255,255,0.82);
    --bdr:  #e2e8f0;
    --txt:  #0f172a;
    --muted:#64748b;
    --sh1:  0 1px 4px rgba(15,23,42,.08);
    --sh2:  0 4px 16px rgba(15,23,42,.10);
    --sh3:  0 12px 40px rgba(15,23,42,.12);
    --sh4:  0 20px 60px rgba(15,23,42,.15);
    --r1:   8px;
    --r2:   12px;
    --r3:   18px;
    --cw:   640px;
    --ch:   820px;
    --pl:   290px;
    --pr:   320px;
    --gap:  16px;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--txt);
    position: relative;
    background: linear-gradient(135deg,#f0f7ff 0%,#fafcff 60%,#f5f0ff 100%);
    min-height: 100vh;
}

/* 3. AMBIENT BG */
.sls-container .bg-blob {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.sls-container .bg-blob::before {
    content:""; position:absolute;
    width:600px; height:600px; top:-100px; left:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,102,255,.12),transparent 70%);
    filter:blur(80px);
}
.sls-container .bg-blob::after {
    content:""; position:absolute;
    width:500px; height:500px; bottom:-100px; right:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,210,255,.10),transparent 70%);
    filter:blur(80px);
}

/* 4. APP SHELL */
.sls-container .app-shell {
    position:relative; z-index:1;
    display:flex; flex-direction:column;
    min-height:100vh;
}

/* 5. TOP HEADER */
.sls-container .top-header {
    flex-shrink:0;
    background:var(--glass);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--bdr);
}
.sls-container .steps-bar {
    border-bottom:1px solid var(--bdr);
    padding:8px 0;
}
.sls-container .step-item {
    display:flex; align-items:center; gap:8px;
    color:#94a3b8; font-weight:700; font-size:.82rem; white-space:nowrap;
}
.sls-container .step-item.active { color:var(--p); }
.sls-container .step-icon {
    width:24px; height:24px; border-radius:50%;
    background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:800;
}
.sls-container .step-item.active .step-icon { background:var(--p); color:#fff; }

/* 6. PRODUCT CAROUSEL */
.sls-container .wc-image-strip {
    flex-shrink:0;
    display:flex;
    align-items:center;
    background:#f8fafc;
    border-bottom:2px solid #dbeafe;
    padding:6px 0; width:100%;
    position:relative; z-index:5;
    overflow:hidden;
    box-sizing:border-box;
}

.sls-container .wc-strip-track {
    flex:1; min-width:0;
    display:flex; align-items:center; gap:4px;
    overflow-x:auto; overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    padding:2px 4px;
    cursor:grab;
    user-select:none;
}
.sls-container .wc-strip-track::-webkit-scrollbar { display:none; }
.sls-container .wc-strip-track.dragging { cursor:grabbing; }

.sls-container .wc-strip-item {
    flex:0 0 auto;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    cursor:pointer; padding:4px 5px;
    border-radius:var(--r1); border:2px solid var(--bdr);
    background:#fff; width:70px;
    transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
    user-select:none;
}
.sls-container .wc-strip-item:hover {
    border-color:var(--p); background:#eff6ff;
    transform:translateY(-2px); box-shadow:var(--sh2);
}
.sls-container .wc-strip-item.active {
    border-color:var(--p); background:#dbeafe;
    box-shadow:0 0 0 3px rgba(0,102,255,.18);
}
.sls-container .wc-strip-item img {
    width:46px; height:46px; object-fit:cover;
    border-radius:6px; border:1px solid var(--bdr);
    background:#f1f5f9; display:block; pointer-events:none;
}
.sls-container .wc-strip-label {
    font-size:9px; font-weight:600; color:var(--muted);
    text-align:center; width:60px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none;
}
.sls-container .wc-strip-item.active .wc-strip-label { color:var(--p); }
.sls-container .wc-strip-item.active img { border-color:#93c5fd; }

/* Carousel arrows — absolutely pinned to left/right edges of the strip.
   This makes them 100% immune to wpautop injecting extra <p> elements between
   flex/grid children, which was causing the right arrow to disappear. */
.sls-container .wc-strip-arrow {
    flex-shrink:0 !important;
    width:34px !important; height:34px !important;
    border-radius:50% !important;
    border:2px solid var(--p) !important;
    background:#fff !important; color:var(--p) !important;
    font-size:13px !important; cursor:pointer !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    transition:background .15s,color .15s,transform .15s,opacity .2s;
    box-shadow:0 2px 8px rgba(0,102,255,.2) !important;
    visibility:visible !important;
    pointer-events:auto !important;
    position:relative !important; z-index:10 !important;
    opacity:1 !important;
    /* Prevent flex from squishing the arrows */
    min-width:34px !important;
    max-width:34px !important;
}
.sls-container .wc-strip-arrow:hover {
    background:var(--p) !important; color:#fff !important; transform:scale(1.1);
}
.sls-container .wc-strip-prev {
    order:-1 !important;
    margin:0 4px 0 6px !important;
}
.sls-container .wc-strip-next {
    order:9999 !important;
    margin:0 6px 0 4px !important;
}
.sls-container .wc-strip-track {
    order:1 !important;
}

/* 7. THREE-COLUMN DESIGNER GRID
   KEY: flex:1 + min-height:0 makes the grid fill remaining viewport height
   without allowing content to push it taller. This prevents canvas jump. */
.sls-container .designer-layout {
    flex:1; min-height:0;
    display:grid;
    grid-template-columns:var(--pl) 1fr var(--pr);
    align-items:stretch;
    gap:var(--gap);
    padding:var(--gap);
    overflow:hidden;
}

/* 8. PANELS */
.sls-container .panel {
    display:flex; flex-direction:column;
    background:var(--glass);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-radius:var(--r3);
    border:1px solid rgba(226,232,240,.85);
    box-shadow:var(--sh3);
    overflow:hidden;
    min-height:0; max-height:100%;
}
.sls-container .panel-header {
    flex-shrink:0;
    padding:12px 14px;
    border-bottom:1px solid rgba(226,232,240,.85);
    font-weight:800; font-size:.72rem;
    text-transform:uppercase; letter-spacing:1.2px; color:#475569;
    background:rgba(248,250,252,.75);
    display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.sls-container .panel-body {
    flex:1; min-height:0;
    overflow-y:auto; overflow-x:hidden;
    padding:12px 14px;
    scroll-behavior:smooth;
}
.sls-container .panel-body::-webkit-scrollbar { width:4px; }
.sls-container .panel-body::-webkit-scrollbar-track { background:transparent; }
.sls-container .panel-body::-webkit-scrollbar-thumb {
    background:rgba(148,163,184,.4); border-radius:99px;
}

/* 9. LEFT PANEL – TOOLBOX */
.sls-container .tools-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;
}
.sls-container .tool-card {
    background:#fff; border:1px solid var(--bdr);
    border-radius:var(--r1); padding:10px 8px; text-align:center;
    cursor:pointer;
    transition:border-color .15s,transform .15s,box-shadow .15s;
    user-select:none;
}
.sls-container .tool-card:hover {
    border-color:var(--p); transform:translateY(-2px); box-shadow:var(--sh2);
}
.sls-container .tool-card i {
    font-size:1.3rem; color:#334155; display:block; margin-bottom:5px;
}
.sls-container .tool-card span { font-size:.72rem; font-weight:800; color:var(--muted); }

.sls-container .template-scroller {
    display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none;
}
.sls-container .template-scroller::-webkit-scrollbar { display:none; }
.sls-container .template-thumb {
    flex:0 0 auto; width:72px; height:46px;
    border-radius:var(--r1); cursor:pointer;
    position:relative; overflow:hidden;
    border:2px solid var(--bdr); box-shadow:var(--sh1);
    transition:transform .15s,border-color .15s;
}
.sls-container .template-thumb:hover {
    transform:translateY(-2px); border-color:rgba(0,102,255,.5);
}
.sls-container .template-thumb::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.35));
}
.sls-container .template-label {
    position:absolute; bottom:3px; left:5px; z-index:1;
    color:#fff; font-size:.58rem; font-weight:800;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* 10. CENTER STAGE */
.sls-container .center-stage {
    display:flex; flex-direction:column; gap:10px;
    min-height:0; overflow:hidden;
}
.sls-container .action-bar {
    flex-shrink:0;
    background:#fff; border:1px solid var(--bdr);
    border-radius:var(--r2); padding:6px 10px;
    display:flex; align-items:center; justify-content:space-between;
    gap:6px; flex-wrap:wrap; box-shadow:var(--sh1);
}
.sls-container .action-left,
.sls-container .action-right {
    display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.sls-container .icon-btn {
    width:34px; height:34px;
    border-radius:var(--r1); border:1px solid var(--bdr);
    background:#fff; color:#475569;
    display:inline-grid; place-items:center; cursor:pointer;
    transition:background .12s,color .12s,border-color .12s,transform .1s;
    font-size:.85rem;
}
.sls-container .icon-btn:hover {
    color:var(--p); background:#f0f6ff; border-color:rgba(0,102,255,.3);
}
.sls-container .icon-btn.active {
    background:rgba(219,234,254,.9); border-color:rgba(0,102,255,.4); color:var(--p);
}
.sls-container .icon-btn.danger:hover {
    color:var(--err); background:#fff1f1; border-color:rgba(239,68,68,.3);
}
.sls-container .vr-separator {
    width:1px; height:22px; background:var(--bdr); margin:0 2px; flex-shrink:0;
}

/* Canvas area fills remaining height in center-stage */
.sls-container .canvas-area {
    flex:1; min-height:0;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg,rgba(255,255,255,.7) 0%,#e8f2ff 100%);
    border-radius:var(--r2); border:1px solid rgba(226,232,240,.9);
    box-shadow:var(--sh4); overflow:hidden;
}
.sls-container .canvas-wrapper {
    position:relative;
    transition:transform .2s ease;
    transform-origin:center center;
}
.sls-container .canvas-card {
    border-radius:14px; overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.22),0 0 0 1px rgba(226,232,240,.8);
    background:#fff;
}
.sls-container canvas#c { display:block; }

/* Canvas overlays */
.sls-container .grid-overlay {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(148,163,184,.35) 1px,transparent 1px),
        linear-gradient(90deg,rgba(148,163,184,.35) 1px,transparent 1px);
    background-size:20px 20px;
    pointer-events:none; opacity:0; z-index:20;
    transition:opacity .15s; border-radius:var(--r2);
}
.sls-container .grid-overlay.show { opacity:1; }

.sls-container .safe-overlay {
    position:absolute; inset:18px;
    border:2px dashed rgba(34,197,94,.75);
    box-shadow:0 0 0 4px rgba(34,197,94,.08);
    border-radius:12px; pointer-events:none;
    opacity:0; transition:opacity .15s; z-index:21;
}
.sls-container .safe-overlay.show { opacity:1; }

.sls-container .center-guides-overlay {
    position:absolute; inset:0;
    pointer-events:none; z-index:22;
    opacity:0; transition:opacity .15s;
}
.sls-container .center-guides-overlay.show { opacity:1; }
.sls-container .center-guides-overlay::before,
.sls-container .center-guides-overlay::after {
    content:""; position:absolute; background:rgba(0,102,255,.5);
}
.sls-container .center-guides-overlay::before {
    top:50%; left:0; right:0; height:1px; margin-top:-.5px;
}
.sls-container .center-guides-overlay::after {
    left:50%; top:0; bottom:0; width:1px; margin-left:-.5px;
}
.sls-container .bleed-overlay {
    position:absolute; inset:-6px;
    border:2px dashed rgba(249,115,22,.65);
    pointer-events:none; opacity:0; transition:opacity .15s;
    z-index:23; border-radius:8px;
}
.sls-container .bleed-overlay.show { opacity:1; }

/* Zoom bar */
.sls-container .zoom-bar {
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    gap:8px; padding:6px 0 0;
}
.sls-container .pill-btn {
    display:inline-flex; align-items:center; gap:6px;
    border-radius:999px; border:1px solid var(--bdr);
    background:#fff; padding:5px 14px;
    font-weight:800; font-size:.82rem; color:#475569;
    cursor:pointer;
    transition:color .12s,transform .1s,box-shadow .1s;
    user-select:none;
}
.sls-container .pill-btn:hover {
    color:var(--p); transform:translateY(-1px); box-shadow:var(--sh2);
}

/* 11. RIGHT PANEL – EDITOR */
.sls-container .nav-pills .nav-link {
    border-radius:999px !important; font-weight:800; font-size:.82rem;
    color:var(--muted); border:1px solid rgba(226,232,240,.9);
    background:rgba(255,255,255,.75); padding:5px 14px; transition:all .15s;
}
.sls-container .nav-pills .nav-link.active {
    background:linear-gradient(135deg,var(--p),var(--acc)) !important;
    color:#fff !important; border-color:transparent;
    box-shadow:0 6px 18px rgba(0,102,255,.22);
}

.sls-container .hint-card {
    border:1.5px dashed rgba(148,163,184,.55);
    background:rgba(248,250,252,.8);
    border-radius:var(--r2); padding:14px;
    color:var(--muted); font-size:.88rem; line-height:1.5;
}

.sls-container .prop-label {
    display:inline-block; font-size:.65rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; color:#475569;
    background:rgba(255,255,255,.8); border:1px solid rgba(226,232,240,.9);
    border-radius:6px; padding:2px 7px; margin-bottom:6px;
}
.sls-container .prop-row { margin-bottom:12px; }

.sls-container .layer-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 10px;
    border:1px solid var(--bdr); border-radius:var(--r1);
    margin-bottom:4px; font-size:.8rem; cursor:pointer; background:#fff;
    transition:transform .1s,box-shadow .1s,border-color .1s;
    user-select:none;
}
.sls-container .layer-item:hover {
    transform:translateY(-1px); box-shadow:var(--sh2);
}
.sls-container .layer-item.active {
    border-color:rgba(0,102,255,.4);
    box-shadow:0 0 0 2px rgba(0,102,255,.12);
}
.sls-container .layer-type {
    font-size:.7rem; color:var(--muted); font-weight:600;
}

/* 12. CHECKOUT */
.sls-container .sls-variant-select {
    width:100%; border-radius:var(--r1);
    border:1px solid var(--bdr); padding:8px 12px;
    font-size:.88rem; background:#fff; cursor:pointer;
}
.sls-container .sls-variant-select:disabled {
    background:#f1f5f9; cursor:not-allowed; opacity:.65;
}
.sls-container .sls-qty-wrapper {
    display:flex; align-items:center;
    border:1px solid var(--bdr); border-radius:var(--r1);
    overflow:hidden; background:#fff; width:fit-content;
}
.sls-container .sls-qty-btn {
    width:36px; height:36px; border:none; background:#f8fafc;
    color:#334155; font-size:1rem; font-weight:800; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s,color .12s; flex-shrink:0;
}
.sls-container .sls-qty-btn:hover { background:var(--p); color:#fff; }
.sls-container .sls-qty-input {
    width:50px; border:none;
    border-left:1px solid var(--bdr); border-right:1px solid var(--bdr);
    text-align:center; font-size:.92rem; font-weight:700;
    background:#fff; color:var(--txt); padding:0; height:36px;
    -moz-appearance:textfield;
}
.sls-container .sls-qty-input::-webkit-inner-spin-button,
.sls-container .sls-qty-input::-webkit-outer-spin-button { -webkit-appearance:none; }

.sls-container .sls-price-row {
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(135deg,#eff6ff,#e0f2fe);
    border-radius:var(--r1); padding:10px 14px; margin-bottom:10px;
}
.sls-container .sls-price-label {
    font-size:.8rem; font-weight:700; color:var(--muted);
    display:flex; align-items:center; gap:6px;
}
.sls-container .sls-price-amount {
    font-size:1.2rem; font-weight:900; color:var(--p); letter-spacing:-.02em;
}

.sls-container #swp-ls-add-to-cart {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px; border:none; border-radius:var(--r2);
    background:linear-gradient(135deg,var(--p),#0052cc);
    color:#fff; font-size:.95rem; font-weight:800; cursor:pointer;
    transition:opacity .15s,transform .12s,box-shadow .12s;
    box-shadow:0 6px 20px rgba(0,102,255,.3); margin-bottom:8px;
}
.sls-container #swp-ls-add-to-cart:hover {
    transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,102,255,.38);
}
.sls-container #swp-ls-add-to-cart:active { transform:scale(.98); }
.sls-container #swp-ls-add-to-cart:disabled {
    opacity:.65; cursor:not-allowed; transform:none;
}
.sls-container .price-box {
    flex-shrink:0; border-top:1px solid var(--bdr);
    padding:14px; background:rgba(248,250,252,.8);
}
.sls-container .status-dot {
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--ok); margin-right:6px;
}
.sls-container .status-dot.dirty { background:var(--warn); }

/* 13. KBD */
.kbd, .sls-container .kbd {
    font-family:monospace; background:#f1f5f9;
    border:1px solid #e2e8f0; border-radius:4px;
    padding:1px 6px; font-size:.78rem;
}

/* 14. RESPONSIVE */
@media (max-width:1100px) {
    .sls-container { --pl:240px; --pr:280px; }
}
@media (max-width:900px) {
    .sls-container .designer-layout {
        grid-template-columns:1fr;
        overflow-y:auto; overflow-x:hidden;
    }
    .sls-container .panel { max-height:480px; }
    .sls-container .canvas-area { height:520px; }
}

/* 15. WPAUTOP GUARD
   Covers both empty <p> and <p><!-- comment --></p> injected by WordPress/Elementor */
.sls-container > p,
.sls-container .app-shell > p,
.sls-container .designer-layout > p,
.sls-container .center-stage > p,
.sls-container .top-header > p,
.sls-container .wc-image-strip > p,
.sls-container .zoom-bar > p,
.sls-container .action-bar > p {
    display:none !important; margin:0 !important; padding:0 !important;
    height:0 !important; width:0 !important; font-size:0 !important; overflow:hidden !important;
}