<style>
#cyop-sf *{box-sizing:border-box;margin:0;padding:0}
#cyop-sf .sf-head{text-align:center;margin-bottom:20px}
#cyop-sf .sf-logo{font-size:22px;font-weight:700;color:#C8A855;letter-spacing:3px}
#cyop-sf .sf-sub{font-size:13px;color:#999;margin-top:4px}
#cyop-sf .sf-box{background:#0f0f0f;border:1px solid rgba(200,168,85,0.25);border-radius:14px;padding:22px}
#cyop-sf .sf-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
#cyop-sf .sf-fld label{display:block;font-size:12px;color:rgba(232,224,204,0.6);margin-bottom:6px}
#cyop-sf .sf-fld input{width:100%;height:44px;padding:0 14px;border:1px solid rgba(200,168,85,0.2);border-radius:8px;background:#1a1a1a;color:#fff;font-size:17px;font-family:inherit;outline:none}
#cyop-sf .sf-fld input:focus{border-color:#C8A855}
#cyop-sf .sf-lbl{font-size:12px;color:rgba(232,224,204,0.6);margin-bottom:8px}
#cyop-sf .sf-btrow{display:flex;gap:6px;margin-bottom:20px}
#cyop-sf .sf-bt{flex:1;padding:11px 4px;text-align:center;font-size:13px;border:1px solid rgba(200,168,85,0.2);border-radius:8px;cursor:pointer;color:rgba(232,224,204,0.5);background:transparent;font-family:inherit;transition:all .15s}
#cyop-sf .sf-bt.on{border-color:#C8A855;color:#C8A855;background:rgba(200,168,85,0.08);font-weight:600}
#cyop-sf .sf-go{width:100%;height:48px;border-radius:8px;border:none;background:#C8A855;color:#0f0f0f;font-size:15px;cursor:pointer;font-family:inherit;font-weight:700;letter-spacing:.5px}
#cyop-sf .sf-go:hover{background:#d4b460}
#cyop-sf .sf-pb{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1a1a1a;border-radius:8px;margin-bottom:16px}
#cyop-sf .sf-pbt{font-size:13px;color:rgba(232,224,204,0.7)}
#cyop-sf .sf-pbt strong{color:#C8A855}
#cyop-sf .sf-eb{font-size:12px;color:rgba(232,224,204,0.5);background:none;border:none;cursor:pointer;text-decoration:underline;font-family:inherit}
#cyop-sf .sf-ml{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
#cyop-sf .sf-fc{display:flex;flex-direction:column;align-items:center;gap:6px}
#cyop-sf .sf-bmi{font-size:11px;color:rgba(232,224,204,0.4)}
#cyop-sf .sf-card{background:#1a1a1a;border:1px solid rgba(200,168,85,0.12);border-radius:12px;padding:13px 15px;margin-bottom:10px}
#cyop-sf .sf-ch{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
#cyop-sf .sf-cn{font-size:11px;color:rgba(232,224,204,0.45);letter-spacing:1px}
#cyop-sf .sf-cs{font-size:32px;font-weight:800;color:#C8A855;line-height:1}
#cyop-sf .sf-mms{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
#cyop-sf .sf-mm{font-size:11px;background:#0f0f0f;border-radius:5px;padding:4px 9px;color:rgba(232,224,204,0.6)}
#cyop-sf .sf-mm strong{color:#e8e0cc;font-weight:600}
#cyop-sf .sf-tip{font-size:12px;color:rgba(232,224,204,0.7);padding:8px 12px;background:#0f0f0f;border-radius:8px;border-right:2px solid #C8A855;line-height:1.6;margin-bottom:6px}
#cyop-sf .sf-tip strong{color:#C8A855}
#cyop-sf .sf-rec{font-size:12px;color:rgba(232,224,204,0.7);padding:8px 12px;background:rgba(200,168,85,0.07);border-radius:8px;border-right:2px solid #C8A855;line-height:1.6;margin-bottom:6px}
#cyop-sf .sf-rec strong{color:#C8A855}
#cyop-sf .sf-note{font-size:11px;color:rgba(232,224,204,0.4);line-height:1.6;padding:0 2px}
@media(max-width:520px){#cyop-sf .sf-ml{grid-template-columns:1fr}#cyop-sf .sf-fc{margin-bottom:10px}}
</style>
CYOP
Smart Size Guide — Enter your details and we'll give you your most suitable size
=t)return i;}return cat.keys.length-1;};
window.cyopBuildCard=function(cat,idx,body){
var size=cat.keys[idx];
var surplus=Math.round((cat.ref[idx]-body)*10)/10;
var nextSize=idx
هو الأقرب لك — فيت معتدل.';
else if(surplus<7)txt='مقاس <strong>'+size+'</strong> مناسب لك — فيت مريح.';
else txt='مقاس <strong>'+size+'</strong> — فيت واسع ومريح.';
var html='<div class="sf-tip">'+txt+'</div>';
if(nextSize)html+='<div class="sf-rec">للراحة الأعلى: ننصحك بمقاس <strong>'+nextSize+'</strong> كخيار مفضّل.</div>';
html+='<div class="sf-note">'+window.cyopNOTE+'</div>';
return html;
};
window.cyopFig=function(h,w,bmi){
var cx=73,sw=146;
var sc=Math.min(1.15,Math.max(0.85,h/175));
var fat=Math.min(1,Math.max(0,(bmi-18)/22));
if(window.cyopBT==='broad')fat=Math.min(1,fat+0.12);
if(window.cyopBT==='athletic')fat=Math.max(0,fat-0.05);
var hr=12,hy=25,nw=5+fat*3,nh=7;
var shW=26+fat*13,wW=16+fat*17,hW=22+fat*15;
var tH=Math.round(61*sc),lH=Math.round(81*sc),aW=6+fat*5;
var tt=hy+hr+nh,tb=tt+tH,lb=tb+lH,my=(tt+tb)/2,shh=lb+14;
var sk='#D4A574',cl='#2a2a2a',gd='#C8A855',lg=hW*0.27;
var v='<svg viewBox="0 0 '+sw+' '+shh+'" width="'+sw+'" height="'+shh+'" xmlns="http://www.w3.org/2000/svg">';
v+='<path d="M'+(cx-lg)+' '+tb+' Q'+(cx-lg-4)+' '+(tb+lH*.5)+' '+(cx-lg-2)+' '+lb+' L'+(cx-2)+' '+lb+' Q'+cx+' '+(tb+lH*.5)+' '+cx+' '+tb+' Z" fill="'+cl+'"/>';
v+='<path d="M'+(cx+lg)+' '+tb+' Q'+(cx+lg+4)+' '+(tb+lH*.5)+' '+(cx+lg+2)+' '+lb+' L'+(cx+2)+' '+lb+' Q'+cx+' '+(tb+lH*.5)+' '+cx+' '+tb+' Z" fill="'+cl+'"/>';
v+='<path d="M'+(cx-shW)+' '+tt+' Q'+(cx-wW)+' '+my+' '+(cx-hW)+' '+tb+' L'+(cx+hW)+' '+tb+' Q'+(cx+wW)+' '+my+' '+(cx+shW)+' '+tt+' Z" fill="'+cl+'"/>';
v+='<path d="M'+(cx-shW)+' '+tt+' L'+(cx-shW-aW)+' '+(tt+tH*.6)+' L'+(cx-shW-aW+5)+' '+(tt+tH*.6)+' L'+(cx-shW+5)+' '+tt+' Z" fill="'+sk+'"/>';
v+='<path d="M'+(cx+shW)+' '+tt+' L'+(cx+shW+aW)+' '+(tt+tH*.6)+' L'+(cx+shW+aW-5)+' '+(tt+tH*.6)+' L'+(cx+shW-5)+' '+tt+' Z" fill="'+sk+'"/>';
v+='<rect x="'+(cx-nw)+'" y="'+(hy+hr)+'" width="'+(nw*2)+'" height="'+nh+'" fill="'+sk+'"/>';
v+='<ellipse cx="'+cx+'" cy="'+hy+'" rx="'+hr+'" ry="'+(hr*1.12)+'" fill="'+sk+'"/>';
v+='<line x1="'+(cx-wW-2)+'" y1="'+my+'" x2="'+(cx+wW+2)+'" y2="'+my+'" stroke="'+gd+'" stroke-width="1" stroke-dasharray="3,2" opacity="0.5"/>';
v+='</svg>';
return v;
};
window.cyopCalc=function(){
var h=parseFloat(document.getElementById('sf-h').value);
var w=parseFloat(document.getElementById('sf-w').value);
if(!h||!w||h<140||h>210||w<40||w>180){alert('الرجاء إدخال طول ووزن صحيحين');return;}
var bmi=Math.round(w/((h/100)*(h/100))*10)/10;
document.getElementById('sf-form').style.display='none';
var ra=document.getElementById('sf-result');ra.style.display='block';
var bc=window.cyopBodyChest(h,w),bw=window.cyopBodyWaist(h,w);
var cards='';
var keys=Object.keys(window.cyopCAT);
for(var p=0;p<keys.length;p++){
var cat=window.cyopCAT[keys[p]];
var body=cat.type==='top'?bc:bw;
var idx=window.cyopPick(cat,body);
var s=cat.data[cat.keys[idx]];
var meass='';
var mk=Object.keys(s);
for(var m=0;m<mk.length;m++){meass+='<span class="sf-mm"><strong>'+s[mk[m]]+'</strong> '+mk[m]+'</span>';}
cards+='<div class="sf-card"><div class="sf-ch"><span class="sf-cn">'+cat.label+'</span><span class="sf-cs">'+cat.keys[idx]+'</span></div><div class="sf-mms">'+meass+'</div>'+window.cyopBuildCard(cat,idx,body)+'</div>';
}
ra='<div class="sf-pb"><span class="sf-pbt"><strong>'+h+'</strong> سم · <strong>'+w+'</strong> كغ · '+window.cyopBTL[window.cyopBT]+'</span><button type="button" class="sf-eb">تعديل</button></div><div class="sf-ml"><div class="sf-fc">'+window.cyopFig(h,w,bmi)+'<div class="sf-bmi">BMI '+bmi+'</div></div><div>'+cards+'</div></div>';
};
window.cyopReset=function(){
document.getElementById('sf-result').style.display='none';
document.getElementById('sf-form').style.display='block';
};
