/* BC Battery - "انتخاب تنوع" popup (assets/js/variant-picker.js). Phones: bottom sheet. Tablet and up: centred card. */
dialog.bcvp{box-sizing:border-box;position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#242424;font-family:inherit;overflow:hidden}
dialog.bcvp[open]{display:flex;align-items:flex-end;justify-content:center}
dialog.bcvp::backdrop{background:rgba(20,24,36,.55)}
.bcvp *,.bcvp *::before,.bcvp *::after{box-sizing:border-box}
.bcvp__box{display:flex;flex-direction:column;width:100%;max-height:min(640px,92dvh);border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -8px 40px rgba(0,0,0,.18);animation:bcvp-up .24s cubic-bezier(.2,.8,.2,1)}
.bcvp__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;min-height:60px;padding:6px 16px 6px 8px;border-bottom:1px solid #EBEBEB}
.bcvp__head b{font-size:16px;font-weight:800}
.bcvp__x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:none;color:#242424;cursor:pointer}
.bcvp__x:hover{background:#F7F8FA}
.bcvp__body{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.bcvp__hint{margin:0;color:#5B5B5B;font-size:13px;line-height:1.8}
.bcvp__label{font-size:14px;font-weight:500}
.bcvp__label b{font-weight:800}
.bcvp__opts{display:flex;flex-wrap:wrap;gap:8px}
.bcvp__opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 14px 0 12px;border:1.5px solid #D5D8DE;border-radius:10px;background:#fff;color:#242424;font:inherit;font-size:13.5px;font-weight:500;line-height:1.3;cursor:pointer;transition:border-color .15s,background .15s}
.bcvp__opt:hover{border-color:#9AA1AD}
.bcvp__tick{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border:1.5px solid #D5D8DE;border-radius:50%;color:transparent}
.bcvp__opt.is-on{border-color:var(--wd-primary-color,#1D57D0);background:#EEF3FD;font-weight:700}
.bcvp__opt.is-on .bcvp__tick{border-color:var(--wd-primary-color,#1D57D0);background:var(--wd-primary-color,#1D57D0);color:#fff}
.bcvp__opt:focus-visible,.bcvp__x:focus-visible,.bcvp__add:focus-visible{outline:2px solid var(--wd-primary-color,#1D57D0);outline-offset:2px}
.bcvp__prod{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #EBEBEB;border-radius:12px}
.bcvp__img{display:flex;flex:none;width:64px;height:64px;border-radius:8px;background:#fff;overflow:hidden}
.bcvp__img img{display:block;width:100%;height:100%;object-fit:contain}
.bcvp__info{display:flex;flex-direction:column;gap:6px;min-width:0}
.bcvp__name{display:-webkit-box;overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.6;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bcvp__price{font-size:15px;font-weight:800}
.bcvp__price small{font-size:12px;font-weight:500;color:#5B5B5B}
.bcvp__foot{flex:0 0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #EBEBEB}
.bcvp__add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin:0;border:0;border-radius:10px;background:var(--wd-primary-color,#1D57D0);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.bcvp__add:hover{opacity:.92}
.bcvp__add:disabled{background:#C5CAD3;cursor:not-allowed;opacity:1}
.bcvp__add.is-loading{background:var(--wd-primary-color,#1D57D0);opacity:.7;cursor:progress}
.bcvp__add.is-loading::after{content:'';width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:bcvp-spin .7s linear infinite}
html.bcvp-open{overflow:hidden}
@keyframes bcvp-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes bcvp-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes bcvp-spin{to{transform:rotate(360deg)}}
@media (min-width:768px){
dialog.bcvp[open]{align-items:center}
.bcvp__box{width:560px;max-width:calc(100% - 32px);max-height:90dvh;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:bcvp-pop .2s ease}
.bcvp__head{padding:8px 20px 8px 12px}
.bcvp__body{gap:16px;padding:20px 24px}
.bcvp__foot{padding:16px 24px 24px;border-top:0}
}
@media (prefers-reduced-motion:reduce){.bcvp__box{animation:none}}