
/* WC Mawashik Frontend CSS v5.9 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
:root{
  --g:#27ae60; --gd:#1a8a4a; --gbg:#f0faf5; --gbr:#c8e6d4;
  --dk:#1a3a2a; --mu:#6c7a7d; --red:#e74c3c; --or:#f39c12;
}
.wccs-box{
  font-family:'Cairo',Tahoma,sans-serif!important;
  direction:rtl; max-width:700px;
  background:#fff; border:2px solid var(--gbr);
  border-radius:16px; padding:24px; margin:24px 0;
  box-shadow:0 6px 30px rgba(0,0,0,.1);
}
.wccs-box *{font-family:'Cairo',Tahoma,sans-serif!important;box-sizing:border-box;}

/* Header */
.wccs-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--gbr);}
.wccs-title{font-size:18px;font-weight:900;color:var(--dk);flex:1;}
.wccs-pills{display:flex;gap:6px;flex-wrap:wrap;}
.wccs-pill{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}
.pill-slaughter{background:var(--gbg);border:1px solid var(--gbr);color:var(--g);}
.pill-end{background:#fff8e1;border:1px solid #ffe082;color:#b7791f;}

/* Progress */
.wccs-progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.wccs-progress-bg{flex:1;background:#e8f5e9;border-radius:10px;height:14px;overflow:hidden;}
.wccs-progress-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--gd));border-radius:10px;transition:width .8s ease;}
.wccs-pct-label{font-size:13px;font-weight:700;color:var(--g);white-space:nowrap;min-width:40px;}

/* Stats */
.wccs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--gbr);border-radius:12px;overflow:hidden;margin-bottom:18px;}
.wccs-stat{text-align:center;padding:14px 8px;border-left:1px solid var(--gbr);transition:background .2s;}
.wccs-stat:last-child{border-left:none;}
.wccs-stat:hover{background:var(--gbg);}
.wccs-stat-n{display:block;font-size:24px;font-weight:900;color:var(--g);line-height:1;}
.wccs-stat-l{display:block;font-size:11px;color:var(--mu);margin-top:4px;}
.stat-buyers .wccs-stat-n{color:#8e44ad;}

/* Notes */
.wccs-notes{background:#fffde7;border:1px solid #ffe082;border-radius:10px;padding:12px 16px;font-size:14px;color:#7d6608;line-height:1.8;margin-bottom:16px;}

/* Soldout */
.wccs-soldout{background:var(--gbg);border:2px dashed var(--g);border-radius:12px;padding:24px;text-align:center;font-size:18px;font-weight:700;color:var(--g);}

/* Section */
.wccs-section{margin-bottom:18px;}
.wccs-section-title{font-size:15px;font-weight:700;color:var(--dk);margin-bottom:10px;}
.wccs-section-title small{font-weight:400;color:var(--mu);font-size:12px;}

/* Parts */
.wccs-parts{display:flex;flex-direction:column;gap:10px;}
.wccs-part{background:#fff;border:2px solid #e8f0eb;border-radius:12px;padding:14px;transition:border-color .2s,background .2s;}
.wccs-part.part-gone{opacity:.55;}
.wccs-part.part-checked{border-color:var(--g);background:var(--gbg);}
.wccs-part-label{display:flex;align-items:center;gap:12px;cursor:pointer;}
.wccs-pcb{width:20px;height:20px;accent-color:var(--g);flex-shrink:0;cursor:pointer;}
.wccs-part-name{flex:1;font-size:15px;font-weight:700;color:var(--dk);}
.wccs-part-stock{font-size:12px;font-weight:600;}
.s-ok{color:var(--g);}.s-low{color:#e65100;}.s-gone{color:var(--red);}

/* Part qty stepper */
.wccs-pqty-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--gbr);}
.pqty-lbl{font-size:13px;color:var(--mu);}

/* Stepper shared */
.wccs-stepper,.wccs-qty-stepper{display:inline-flex;align-items:center;border:2px solid var(--g);border-radius:12px;overflow:hidden;}
.stp-btn,.wccs-qty-btn{background:none;border:none;width:36px;height:36px;font-size:20px;font-weight:900;color:var(--g);cursor:pointer;transition:background .15s,color .15s;}
.stp-btn:hover,.wccs-qty-btn:hover{background:var(--g);color:#fff;}
.wccs-pqty-inp,.wccs-qty-inp{width:52px;height:36px;border:none;border-right:1px solid var(--gbr);border-left:1px solid var(--gbr);text-align:center;font-size:15px;font-weight:700;color:var(--dk);-moz-appearance:textfield;}
.wccs-pqty-inp::-webkit-inner-spin-button,.wccs-pqty-inp::-webkit-outer-spin-button,
.wccs-qty-inp::-webkit-inner-spin-button,.wccs-qty-inp::-webkit-outer-spin-button{-webkit-appearance:none;}

/* Parts summary */
.wccs-parts-summary{background:var(--gbg);border:1px dashed var(--gbr);border-radius:10px;padding:10px 14px;font-size:13px;color:#1a6b3c;margin-top:8px;}

/* Price */
.wccs-fixed-price{font-size:20px;font-weight:900;color:var(--g);}
.wccs-opt-btns{display:flex;flex-wrap:wrap;gap:8px;}
.wccs-opt-btn{padding:10px 18px;border:2px solid var(--gbr);border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:var(--dk);cursor:pointer;transition:all .18s;}
.wccs-opt-btn:hover{border-color:var(--g);color:var(--g);}
.wccs-opt-btn.is-active{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 4px 14px rgba(39,174,96,.35);}
.wccs-cust-btn.is-active{background:var(--or);border-color:var(--or);}
.wccs-cust-wrap{margin-top:10px;}
.wccs-cust-inp{width:100%;padding:10px 14px;border:2px solid var(--gbr);border-radius:10px;font-size:15px;color:var(--dk);outline:none;}
.wccs-cust-inp:focus{border-color:var(--g);}
.wccs-cust-wrap small{font-size:12px;color:var(--mu);margin-top:4px;display:block;}

/* Total */
.wccs-total-bar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--gbg),#e8f5e9);border:2px solid var(--gbr);border-radius:14px;padding:16px 20px;margin-top:6px;}
.wccs-total-bar span{font-size:15px;font-weight:600;color:var(--dk);}
.wccs-total-val{font-size:26px!important;font-weight:900!important;color:var(--g)!important;}

@media(max-width:480px){
  .wccs-stats{grid-template-columns:repeat(2,1fr);}
  .wccs-stat{border-left:none;border-bottom:1px solid var(--gbr);}
  .wccs-stat:nth-child(odd){border-left:1px solid var(--gbr);}
  .wccs-total-val{font-size:20px!important;}
}

/* حالات الصندوق */
.wccs-ended{
  background:linear-gradient(135deg,#fce4e4,#ffeaea);
  border:2px dashed #e74c3c;
  border-radius:12px;padding:24px;text-align:center;
  font-size:18px;font-weight:700;color:#c0392b;
}
.wccs-pending{
  background:linear-gradient(135deg,#fff8e1,#fffde7);
  border:2px dashed #f39c12;
  border-radius:12px;padding:24px;text-align:center;
  font-size:18px;font-weight:700;color:#b7791f;
}
