/* ======================================================
   GLOBAL
====================================================== */
body{
    margin:0;
    font-family:sans-serif;
}

.container{
    display:flex;
    height:100vh;
}

.sidebar{
    width:300px;
    background:#f5f5f5;
	/*     background:#f5f5f5;*/
    padding:20px;
    overflow-y:auto;
    box-shadow:2px 0 5px rgba(0,0,0,0.1);
}

.control-group{
    margin-bottom:15px;
}

/* ======================================================
   PREVIEW AREA  (DO NOT CHANGE STRUCTURE)
====================================================== */
.preview-wrapper{
    position:relative;
    width:70%;
    max-width:700px;
    margin:auto;
    display:flex;
    justify-content:center;
}

.preview-wrapper img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    transition:opacity .5s ease;
}

.svg-layer{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:auto;
}

.svg-layer svg{
    width:100% !important;
    height:100% !important;
    display:block;
    position:absolute;
    top:0;
    left:0;
}

/* ======================================================
   COLORS & PATTERNS
====================================================== */
.pattern-bar{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.pattern-thumb{
    width:40px;
    height:40px;
    background-size:cover;
    border:1px solid #ccc;
    border-radius:4px;
    cursor:pointer;
}

.color-bar{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding-bottom:10px;
}

.color-swatch{
    width:20px;
    height:20px;
    border-radius:3px;
    border:2px solid transparent;
    cursor:pointer;
}

.color-swatch:hover,
.color-swatch.selected{
    border:2px solid black;
}

/* ======================================================
   LOGOS
====================================================== */
.logo-thumbnails{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}

.logo-thumbnail-container,
.thumb-wrapper{
    position:relative;
    display:inline-block;
}

.logo-thumbnail{
    width:50px;
    height:50px;
    object-fit:contain;
    border:2px solid #ccc;
    border-radius:5px;
    cursor:pointer;
}

.logo-thumb{
    width:80px;
    height:80px;
    object-fit:contain;
    border:1px solid #ccc;
    border-radius:8px;
}

.logo-thumb.active,
.selected-thumb{
    border-color:blue;
}

.delete-thumb{
    position:absolute;
    top:-6px;
    right:-6px;
    background:#ff4d4f;
    color:white;
    border:none;
    border-radius:50%;
    width:20px;
    height:20px;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}

.delete-thumb:hover{
    background:#d9363e;
}

.logo-overlay{
    position:absolute;
    width:100px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    cursor:move;
}

.selected-logo{
    outline:2px dashed #21f333;
    outline-offset:6px;
}

.draggable-logo{
    cursor:move;
}

/* ======================================================
   UI CONTROLS
====================================================== */
.accordion{
    background:#333;
    color:#fff;
    padding:10px;
    width:100%;
    border:none;
    text-align:left;
    cursor:pointer;
    margin-top:5px;
}

.comboSelect{
    width:100%;
    height:30px;
    padding:5px;
    margin-bottom:10px;
    box-sizing:border-box;
}

label{
    font-size:12px;
    font-weight:bold;
    color:#333;
    margin-bottom:5px;
    display:block;
}

.panel{
    display:none;
    padding-top:10px;
}

/* ======================================================
   RANGE SLIDER
====================================================== */
input[type="range"]{
    -webkit-appearance:none;
    width:100%;
    height:8px;
    border-radius:4px;
    background:linear-gradient(to right,#4caf50,#81c784);
    outline:none;
}

input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    height:20px;
    width:20px;
    background:#fff;
    border:2px solid #4caf50;
    border-radius:50%;
    cursor:pointer;
}

input[type="range"]::-moz-range-thumb{
    height:20px;
    width:20px;
    background:#fff;
    border:2px solid #4caf50;
    border-radius:50%;
    cursor:pointer;
}

/* ======================================================
   BUTTONS
====================================================== */
.btn{
    background:gray;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    border:none;
    padding:8px 12px;
    cursor:pointer;
    border-radius:5px;
    display:inline-block;
    text-align:center;
    transition:background .3s;
}

.btn:hover{
    background:black;
}

/* ======================================================
   ELEMENT ACCORDION
====================================================== */
.element-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.element-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    width:60px;
    transition:transform .2s;
}

.element-item:hover{
    transform:scale(1.05);
}

.element-swatch{
    width:40px;
    height:40px;
    border:2px solid #ccc;
    border-radius:6px;
    margin-bottom:4px;
}

.element-item.selected .element-swatch{
    border-color:black;
}

.element-name{
    font-size:11px;
    text-align:center;
    color:#333;
}

.elements-accordion-container{
    margin-top:12px;
}

.element-accordion{
    background:#444;
    color:#fff;
    padding:10px;
    width:100%;
    border:none;
    text-align:left;
    cursor:pointer;
    margin-top:8px;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.element-panel{
    display:none;
    padding:10px;
    border:2px solid #ddd;
    border-top:none;
    background:#fafafa;
    margin-bottom:6px;
}

.pattern-thumb.small{
    width:36px;
    height:36px;
    border-radius:4px;
    background-size:cover;
    border:2px solid #ddd;
    cursor:pointer;
}

.pattern-thumb.small.selected{
    border-color:#333;
}

/* ======================================================
   RESPONSIVE (UNCHANGED)

}

======================================
*/
#systemHiddenUI{
    position:absolute;
    left:-99999px;
    top:-99999px;
}
.hidden-system{
    display:none !important;
    visibility:hidden;
    height:0;
    overflow:hidden;
}