/* Commercial Builder — styles on top of /assets/garage-designer/designer.css
   (panels, cards, badges, toolbar buttons are shared gd-* classes). */

/* Product category tabs */
.cb-groups{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.cb-group-tab{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.42rem .85rem;font-family:var(--ff-body);font-size:.78rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cb-group-tab:hover{border-color:var(--blue);color:var(--blue)}
.cb-group-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.cb-group-tab .n{font-size:.68rem;font-weight:700;opacity:.65}
.cb-empty{font-size:.84rem;color:var(--text-2);background:#F1F3F0;border-radius:var(--r-sm);padding:1rem;text-align:center;line-height:1.5}

/* Angle step select */
.cb-angle{display:inline-flex;align-items:center;gap:.4rem;background:#F1F3F0;border-radius:9px;padding:.3rem .5rem .3rem .75rem;font-size:.8rem;font-weight:600;color:var(--text)}
.cb-angle select{border:none;background:transparent;font-family:var(--ff-body);font-size:.8rem;font-weight:700;color:var(--blue);cursor:pointer;outline:none}

/* Align group */
.cb-align{display:inline-flex;background:#F1F3F0;border-radius:9px;overflow:hidden}
.cb-align button{border:none;background:transparent;color:var(--text);width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:background .2s,color .2s}
.cb-align button:hover:not(:disabled){background:var(--blue-tint);color:var(--blue)}
.cb-align button:disabled{opacity:.4;cursor:not-allowed}
.cb-align button+button{border-left:1px solid var(--line)}

/* Wall edit toggle */
.gd-tool-btn.active{background:var(--blue);color:#fff}
.gd-tool-btn.active:hover{background:var(--blue-deep);color:#fff}

/* Door manager rows */
.cb-door-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .2rem;border-bottom:1px solid var(--line)}
.cb-door-row:last-child{border-bottom:none}
.cb-door-name{font-weight:700;font-size:.85rem;color:var(--text);white-space:nowrap}
.cb-door-where{font-size:.76rem;color:var(--text-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-door-row input{width:70px;padding:.4rem .5rem;border:1.5px solid var(--line);border-radius:8px;font-family:var(--ff-body);font-size:.85rem;font-weight:600;color:var(--text);text-align:right}
.cb-door-row input:focus{outline:none;border-color:var(--blue)}
.cb-door-row .gd-tool-btn{padding:.4rem .55rem}

/* Canvas toolbar can get busy — let it wrap nicely */
.cb-toolbar-note{font-size:.74rem;color:var(--text-2);padding:.4rem 1.1rem .7rem;border-bottom:1px solid var(--line)}

/* Zoom controls (floating, bottom-right of the canvas) */
.cb-zoom{position:absolute;right:.9rem;bottom:.9rem;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-card);overflow:hidden;z-index:6}
.cb-zoom button{border:none;background:#fff;width:36px;height:32px;font-family:var(--ff-body);font-size:1.05rem;font-weight:700;color:var(--text);cursor:pointer;transition:background .15s,color .15s}
.cb-zoom button:hover{background:var(--blue-tint);color:var(--blue)}
.cb-zoom .pct{font-size:.62rem;font-weight:700;text-align:center;color:var(--text-2);padding:.18rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);user-select:none}
.cb-zoom #cbZoomFit{font-size:.58rem;letter-spacing:.06em;border-top:1px solid var(--line)}