.rug-visualizer-wrap{
    direction:rtl;
    max-width:1280px;
    margin:30px auto;
    padding:28px;
    text-align:center;
    font-family:tahoma, Arial, sans-serif !important;
    background:#f7f3e8;
    border:2px solid #0D2142;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(13,33,66,0.10);
}

.rug-visualizer-wrap *{
    box-sizing:border-box;
}

.rug-visualizer-layout{
    display:flex;
    gap:22px;
    align-items:flex-start;
    justify-content:center;
}

.rug-visualizer-main{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.rug-visualizer-sidebar{
    width:300px;
    flex:0 0 300px;
    background:#fcf9f0;
    border:1px solid rgba(13,33,66,0.15);
    border-radius:14px;
    padding:14px;
    box-shadow:0 8px 22px rgba(13,33,66,0.07);
    position:sticky;
    top:20px;
}

.rug-visualizer-sidebar-title{
    font-weight:800;
    font-size:17px;
    color:#0D2142;
    margin-bottom:12px;
    text-align:center;
}

.rug-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:12px;
}

.rug-nav-btn{
    width:40px;
    height:38px;
    border:1px solid #d73b6a;
    border-radius:9px;
    background:#ffffff;
    color:#d73b6a;
    font-size:22px;
    font-weight:900;
    cursor:pointer;
    line-height:1;
    box-shadow:0 5px 12px rgba(13,33,66,0.08);
}

.rug-nav-btn:hover{
    background:#d73b6a;
    color:#ffffff;
}

.rug-current-label{
    flex:1;
    min-width:0;
    padding:8px 6px;
    border-radius:8px;
    background:#f7f3e8;
    color:#0D2142;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    direction:ltr;
    text-align:center;
}

.rug-gallery{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:9px;
    margin-bottom:14px;
}

.rug-gallery-item{
    border:2px solid transparent;
    border-radius:11px;
    background:#f7f3e8;
    padding:5px;
    cursor:pointer;
    transition:all .18s ease;
    position:relative;
    width:100%;
}

.rug-gallery-item:hover{
    border-color:#98906f;
    transform:translateY(-1px);
}

.rug-gallery-item.active{
    border-color:#0D2142;
    box-shadow:0 0 0 3px rgba(152,144,111,0.25);
}

.rug-gallery-item img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    display:block;
    border-radius:8px;
    background:#eee;
}

.rug-gallery-code{
    margin-top:5px;
    font-size:9px;
    font-weight:700;
    color:#0D2142;
    direction:ltr;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
}

.rug-gallery-empty{
    grid-column:1 / -1;
    font-size:14px;
    line-height:1.8;
    color:#0D2142;
    background:#f7f3e8;
    border-radius:10px;
    padding:12px;
}

.rug-pagination{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    align-items:center;
    border-top:1px solid rgba(13,33,66,0.12);
    padding-top:12px;
}

.rug-page-btn{
    min-width:32px;
    height:32px;
    padding:0 8px;
    border:1px solid rgba(13,33,66,0.18);
    border-radius:8px;
    background:#ffffff;
    color:#0D2142;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.rug-page-btn:hover{
    background:#f7f3e8;
}

.rug-page-btn.active{
    background:#0D2142;
    color:#ddd3ad;
    border-color:#0D2142;
}

.rug-visualizer-wrap .step-box{
    width:100%;
    margin-bottom:18px;
    padding:20px 22px;
    background:#fcf9f0;
    border-radius:14px;
    font-size:18px !important;
    line-height:2.05;
    color:#0D2142 !important;
    border-right:7px solid #98906f;
    box-shadow:0 6px 18px rgba(13,33,66,0.06);
    text-align:right;
}

.rug-visualizer-wrap .step-title{
    font-weight:800;
    font-size:24px !important;
    margin-bottom:10px;
    color:#0D2142 !important;
}

.canvas-stage{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    position:relative;
    margin:18px auto 22px;
    direction:ltr;
}

.rug-visualizer-wrap .canvas-wrapper{
    border:5px solid #0D2142;
    border-radius:14px;
    overflow:visible;
    background:#efe7d4;
    position:relative;
    display:inline-block;
    max-width:100%;
    box-shadow:0 10px 26px rgba(13,33,66,0.12);
    direction:ltr;
}

.rug-visualizer-wrap .canvas-wrapper canvas{
    display:block;
}

.canvas-side-btn{
    position:static;
    flex:0 0 auto;
    width:46px;
    height:58px;
    border:none;
    border-radius:14px;
    background:#0D2142;
    color:#ddd3ad;
    font-size:32px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(13,33,66,0.22);
    opacity:.92;
}

.canvas-side-btn:hover{
    opacity:1;
    background:#132b52;
}

.rug-visualizer-wrap .controls{
    width:100%;
    background:#fcf9f0;
    padding:22px;
    border-radius:14px;
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    border:1px solid rgba(13,33,66,0.15);
}

.rug-visualizer-wrap .btn-visualizer{
    padding:14px 28px;
    cursor:pointer;
    border:none;
    border-radius:10px;
    background:#0D2142 !important;
    color:#98906f !important;
    font-weight:800;
    font-family:tahoma, Arial, sans-serif !important;
    font-size:18px !important;
    line-height:1.5;
    transition:all .25s ease;
    box-shadow:0 8px 18px rgba(13,33,66,0.18);
}

.rug-visualizer-wrap .btn-visualizer:hover{
    background:#132b52 !important;
    color:#ddd3ad !important;
    transform:translateY(-2px);
}

.rug-visualizer-wrap .btn-visualizer:focus,
.rug-nav-btn:focus,
.rug-gallery-item:focus,
.rug-page-btn:focus,
.canvas-side-btn:focus{
    outline:none;
    box-shadow:0 0 0 4px rgba(152,144,111,0.25), 0 8px 18px rgba(13,33,66,0.18);
}

.rug-visualizer-wrap .hidden{
    display:none !important;
}

.rug-visualizer-wrap #step1,
.rug-visualizer-wrap #step2{
    font-size:18px;
}

@media (max-width: 992px){
    .rug-visualizer-layout{
        flex-direction:column;
    }

    .rug-visualizer-sidebar{
        width:100%;
        flex:auto;
        position:static;
    }

    .rug-gallery{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .rug-visualizer-wrap{
        margin:18px 10px;
        padding:16px;
    }

    .rug-visualizer-wrap .step-box{
        font-size:16px !important;
        padding:16px;
    }

    .rug-visualizer-wrap .step-title{
        font-size:20px !important;
    }

    .rug-visualizer-wrap .controls{
        padding:16px;
    }

    .rug-visualizer-wrap .btn-visualizer{
        width:100%;
        font-size:16px !important;
    }

    .canvas-stage{
        gap:8px;
    }

    .canvas-side-btn{
        width:38px;
        height:48px;
        font-size:26px;
    }
}


html,body{margin:0;padding:0;background:#fff;}
body{font-family:tahoma,Arial,sans-serif;}
.rug-code-loader{display:flex;gap:8px;margin-bottom:12px;direction:ltr;}
.rug-code-input{flex:1;min-width:0;height:40px;border:1px solid rgba(13,33,66,.22);border-radius:9px;padding:0 10px;font:700 13px tahoma,Arial,sans-serif;color:#0D2142;background:#fff;text-transform:uppercase;outline:none;}
.rug-code-input:focus{border-color:#98906f;box-shadow:0 0 0 3px rgba(152,144,111,.18);}
.rug-code-load-btn{height:40px;padding:0 14px;border:0;border-radius:9px;background:#0D2142;color:#ddd3ad;font:800 13px tahoma,Arial,sans-serif;cursor:pointer;white-space:nowrap;}
.rug-code-help{font-size:11px;line-height:1.8;color:#667085;margin:-4px 0 12px;text-align:right;}
.fabric-status{font-size:11px;color:#667085;margin-top:10px;direction:ltr;text-align:center;}
@media(max-width:520px){.rug-code-loader{flex-direction:column}.rug-code-load-btn{width:100%}}



#dima-rug-visualizer-root .canvas-wrapper{position:relative;}
#dima-rug-visualizer-root .dima-canvas-hint{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:20px; pointer-events:none; color:#0D2142; font-weight:800; font-size:16px;
    background:linear-gradient(135deg,rgba(247,243,232,.92),rgba(252,249,240,.78));
    z-index:5;
}
#dima-rug-visualizer-root.dima-room-loaded .dima-canvas-hint{display:none;}


/* v4.0.3 — Live perspective overlay */
#dima-rug-visualizer-root .canvas-container{position:relative !important;}
#dima-rug-visualizer-root .lower-canvas{z-index:1 !important;}
#dima-rug-visualizer-root .dima-rug-overlay{
    position:absolute;
    inset:0 auto auto 0;
    display:block;
    pointer-events:none !important;
    z-index:2 !important;
}
#dima-rug-visualizer-root .upper-canvas{z-index:3 !important;}