@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;800;900&display=swap');

#glass-builder *{box-sizing:border-box;font-family:'Vazirmatn',tahoma,sans-serif;}

#glass-builder{
  max-width:1300px;margin:0 auto;direction:rtl;
  padding:28px 18px 130px;
  position:relative;
}

#glass-builder .glass{
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(25px);
  backdrop-filter:blur(25px);
  border:1px solid rgba(255,255,255,.38);
  border-radius:30px;
  box-shadow:0 15px 40px rgba(0,0,0,.07);
}

#glass-builder h3,#glass-builder h4{
  text-align:center;margin:0 0 24px;font-weight:800;font-size:20px;
  background:linear-gradient(120deg,#32D1C3,#368F8B,#9D8420);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.builder{display:flex;gap:28px;align-items:flex-start;}

/* Sidebar */
.sidebar{width:230px;padding:22px 15px;flex-shrink:0;position:sticky;top:18px;max-height:92vh;overflow-y:auto;}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(50,209,195,.3);border-radius:3px;}

.location-item{
  padding:11px 14px;margin-bottom:9px;border-radius:16px;cursor:pointer;
  font-size:17px;font-weight:600;transition:.22s;
  background:rgba(255,255,255,.38);border:1px solid transparent;
  display:flex;align-items:center;gap:8px;
}
.location-item:hover{transform:translateY(-2px);background:rgba(255,255,255,.7);border-color:rgba(50,209,195,.25);}
.location-item.active{
  background:linear-gradient(135deg,rgba(0,193,120,.18),rgba(50,209,195,.18));
  border:1px solid rgba(0,193,120,.35);color:#009966;
  box-shadow:0 8px 18px rgba(0,193,120,.08);
}

.main{flex:1;min-width:0;}

.slots-wrap{margin-bottom:22px;}
.slots{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;}

.slot{
  width:170px;height:170px;border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;transition:.26s;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.38));
  border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(16px);overflow:hidden;
}
.slot:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 35px rgba(0,0,0,.08);}
.slot img{width:100%;height:100%;object-fit:cover;border-radius:26px;}
.slot-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  color:#fff;font-size:11px;font-weight:700;
  padding:22px 8px 8px;border-radius:0 0 26px 26px;text-align:center;
}
.slot-empty{font-size:38px;color:rgba(50,209,195,.45);}

.del-slot,.dup-slot{
  position:absolute;top:7px;
  width:28px;height:28px;border-radius:50%;
  color:#fff;border:none;
  font-size:14px;cursor:pointer;display:none;
  align-items:center;justify-content:center;z-index:10;transition:.2s;
}
.del-slot{left:7px;background:rgba(255,60,60,.88);font-size:16px;}
.dup-slot{left:41px;background:rgba(0,150,220,.88);}
.slot:hover .del-slot,.slot:hover .dup-slot{display:flex;}
.del-slot:hover{background:#d00;transform:scale(1.12);}
.dup-slot:hover{background:#0077b3;transform:scale(1.12);}

.add-slot{
  width:170px;height:170px;border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  font-size:60px;font-weight:200;cursor:pointer;transition:.26s;
  color:#00C178;border:2px dashed rgba(0,193,120,.4);
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.2));
}
.add-slot:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 35px rgba(0,0,0,.06);}

.picker{display:none;padding:26px;margin-top:20px;animation:dpb-fade .3s ease;}
@keyframes dpb-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.breadcrumb .bc-item{font-size:13px;font-weight:700;color:#368F8B;cursor:pointer;}
.breadcrumb .bc-item:hover{text-decoration:underline;}
.breadcrumb .bc-sep{color:#ccc;font-size:13px;}
.breadcrumb .bc-cur{font-size:13px;font-weight:700;color:#9D8420;cursor:default;}

.grid{display:flex;flex-wrap:wrap;gap:18px;}

.cat-card{
  width:160px;padding:18px 14px;border-radius:22px;cursor:pointer;text-align:center;transition:.28s;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.38));
  border:1px solid rgba(255,255,255,.6);
}
.cat-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 30px rgba(0,0,0,.08);}
.cat-card img{width:72px;height:72px;object-fit:cover;border-radius:14px;margin-bottom:10px;}
.cat-card .cat-icon{font-size:40px;margin-bottom:10px;}
.cat-card h5{font-size:14px;font-weight:800;color:#222;margin:0;}
.cat-card .cat-count{font-size:12px;color:#888;margin-top:4px;}

.prod-card{
  width:195px;padding:15px;border-radius:22px;cursor:pointer;text-align:center;transition:.28s;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.38));
  border:1px solid rgba(255,255,255,.6);position:relative;
}
.prod-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 30px rgba(0,0,0,.08);}
.prod-card.selected{border-color:#00C178;background:rgba(0,193,120,.08);}
.prod-card .prod-img-wrap{position:relative;}
.prod-card img{width:100%;height:155px;object-fit:cover;border-radius:16px;margin-bottom:10px;}
.prod-card .no-img{width:100%;height:155px;border-radius:16px;background:#f0f8f7;display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:10px;}
.prod-card h5{font-size:14px;font-weight:800;color:#222;margin:0 0 6px;}
.prod-card .price{font-size:14px;font-weight:800;color:#00C178;}
.prod-card .unavail{font-size:12px;color:#e74c3c;font-weight:700;}
.prod-card .badge-var{display:inline-block;font-size:11px;padding:2px 8px;border-radius:8px;background:rgba(50,209,195,.15);color:#368F8B;font-weight:700;margin-top:4px;}

.zoom-btn{
  position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:zoom-in;z-index:5;
}
.zoom-btn:hover{background:rgba(0,0,0,.8);}

/* Lightbox */
.dpb-lightbox{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);
  z-index:99999;align-items:center;justify-content:center;padding:30px;
}
.dpb-lightbox.open{display:flex;}
.dpb-lightbox img{max-width:90%;max-height:88%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.dpb-lightbox-close{
  position:absolute;top:22px;left:26px;color:#fff;font-size:34px;cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.12);
}
.dpb-lightbox-close:hover{background:rgba(255,255,255,.25);}

.variable-box{display:none;margin-top:20px;padding:26px;}

#variableContent label{display:block;margin-bottom:5px;font-weight:700;color:#333;font-size:14px;}
#variableContent select{
  width:100%;padding:12px 15px;margin-bottom:15px;
  border-radius:16px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.28);backdrop-filter:blur(18px);
  font-family:'Vazirmatn',tahoma,sans-serif;font-size:14px;cursor:pointer;outline:none;transition:.22s;
}
#variableContent select:focus{border-color:#00C178;box-shadow:0 0 0 3px rgba(0,193,120,.15);}
#variableContent .var-loading{text-align:center;padding:14px;color:#888;font-size:13px;}

.selected-prod-info{
  display:flex;align-items:center;gap:14px;padding:14px;
  border-radius:16px;background:rgba(0,193,120,.07);
  border:1px solid rgba(0,193,120,.2);margin-bottom:18px;
}
.selected-prod-info img{width:55px;height:55px;border-radius:12px;object-fit:cover;}
.selected-prod-info .spi-name{font-weight:800;font-size:15px;color:#222;}
.selected-prod-info .spi-price{font-size:14px;color:#00C178;font-weight:700;margin-top:3px;}
.selected-prod-info .spi-stock{font-size:12px;color:#e67e22;font-weight:700;margin-top:3px;}

.qty-row{display:flex;align-items:center;gap:14px;margin-top:16px;}
.qty-label{font-weight:700;color:#333;}
.qty-input{
  width:85px;padding:10px;border:none;outline:none;border-radius:12px;
  text-align:center;background:rgba(255,255,255,.65);font-size:16px;font-weight:700;
}

#glass-builder button{font-family:'Vazirmatn',tahoma,sans-serif;}
.btn-add{
  padding:12px 28px;border-radius:16px;cursor:pointer;
  font-weight:800;font-size:14px;background:#00C178;color:#fff;border:none;transition:.22s;
  margin-top:18px;
}
.btn-add:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,193,120,.3);}
.btn-add:disabled{background:#aaa;cursor:not-allowed;transform:none;box-shadow:none;}

.cart-panel{margin-top:22px;padding:22px;}
.cart-item-row{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  margin-bottom:9px;border-radius:16px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);
}
.cart-item-row img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.cart-no-img{width:46px;height:46px;border-radius:10px;background:#f0f8f7;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.ci-info{flex:1;min-width:0;}
.ci-name{font-size:13px;font-weight:800;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ci-attrs{font-size:11px;color:#888;margin-top:2px;}
.ci-qty{font-size:11px;color:#aaa;margin-top:1px;}
.ci-price{font-size:14px;font-weight:800;color:#00C178;white-space:nowrap;flex-shrink:0;}
.ci-del{background:none;border:none;cursor:pointer;font-size:20px;color:#ff4444;transition:.2s;flex-shrink:0;padding:0 4px;}
.ci-del:hover{transform:scale(1.2);}

.spinner{width:32px;height:32px;border:3px solid rgba(50,209,195,.2);border-top-color:#32D1C3;border-radius:50%;animation:dpb-spin .8s linear infinite;margin:28px auto;}
@keyframes dpb-spin{to{transform:rotate(360deg);}}

.empty-state{text-align:center;padding:36px 18px;color:#bbb;font-size:14px;}
.empty-state .ei{font-size:46px;margin-bottom:10px;}

.bottom-bar{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  width:86%;padding:15px 40px;
  display:flex;justify-content:space-between;align-items:center;
  border-radius:26px;z-index:999;
}
.total-lbl{font-size:13px;font-weight:600;color:#666;}
.total-price{font-size:24px;font-weight:900;color:#00C178;}
.discount-hint{font-size:12px;font-weight:700;color:#e67e22;margin-top:2px;min-height:16px;}
.bottom-actions{display:flex;gap:10px;align-items:center;}

.btn-cart{
  padding:13px 30px;border-radius:16px;cursor:pointer;
  font-weight:800;font-size:15px;background:#00C178;color:#fff;border:none;transition:.22s;
}
.btn-cart:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,193,120,.3);}
.btn-cart:disabled{background:#aaa;cursor:not-allowed;transform:none;box-shadow:none;}

.btn-print{
  padding:13px 20px;border-radius:16px;cursor:pointer;
  font-weight:700;font-size:13px;background:rgba(255,255,255,.6);color:#368F8B;
  border:1px solid rgba(54,143,139,.3);transition:.22s;
}
.btn-print:hover{background:rgba(255,255,255,.9);}

/* Progress overlay هنگام افزودن به سبد */
.dpb-progress-overlay{
  position:fixed;inset:0;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  z-index:100000;display:none;align-items:center;justify-content:center;
}
.dpb-progress-overlay.open{display:flex;}
.dpb-progress-box{
  width:340px;padding:30px;border-radius:24px;text-align:center;
  background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.dpb-progress-box h4{margin-bottom:16px;}
.dpb-progress-track{width:100%;height:10px;border-radius:6px;background:#eee;overflow:hidden;margin-bottom:12px;}
.dpb-progress-fill{height:100%;background:linear-gradient(90deg,#32D1C3,#00C178);width:0%;transition:width .3s;}
.dpb-progress-text{font-size:13px;color:#555;font-weight:700;}
.dpb-progress-fail{font-size:12px;color:#e74c3c;margin-top:8px;}

@media(max-width:900px){
  .builder{flex-direction:column;}
  .sidebar{width:100%;position:relative;max-height:none;overflow-y:unset;}
  .sidebar h3{font-size:18px;}
  .slot,.add-slot{width:calc(50% - 10px);height:150px;}
  .bottom-bar{flex-direction:column;gap:10px;padding:16px;}
}
@media(max-width:540px){
  #glass-builder{padding:14px 10px 150px;}
  .slot,.add-slot{width:100%;height:160px;}
  .prod-card{width:100%;}
  .bottom-actions{flex-direction:column;width:100%;}
  .bottom-actions button{width:100%;}
}