#eplf-box{
    --eplf-teal:#005957;
    --eplf-teal-dark:#00413f;
    --eplf-teal-light:#0a7a6d;
    --eplf-mint:#e5f5f1;
    --eplf-green:#16a34a;
    --eplf-green-soft:#dcfce7;
    --eplf-red:#dc2626;
    --eplf-red-soft:#fee2e2;
    --eplf-ink:#111827;
    --eplf-muted:#64748b;
    --eplf-line:#e2e8f0;
    position:relative;
    margin:26px 0 10px;
    padding:24px 24px 18px;
    background:#ffffff;
    border:1px solid var(--eplf-line);
    border-radius:18px;
    box-shadow:0 16px 36px -16px rgba(6,59,58,.18);
    font-family:'Cairo','IBM Plex Sans Arabic',-apple-system,sans-serif;
    text-align:right;
    direction:rtl;
    overflow:hidden;
}
#eplf-box::before{
    content:'';
    position:absolute;
    top:0;right:0;left:0;
    height:4px;
    background:linear-gradient(90deg,var(--eplf-teal-light),var(--eplf-teal));
}
#eplf-box.is-loading{pointer-events:none}
#eplf-box.is-loading::after{
    content:'';
    position:absolute;
    inset:0;z-index:3;
    border-radius:18px;
    background:rgba(255,255,255,.55);
}
#eplf-box.is-loading::before{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:26px;height:26px;
    margin:-13px 0 0 -13px;z-index:4;
    border:3px solid var(--eplf-mint);
    border-top-color:var(--eplf-teal);
    border-radius:50%;
    animation:eplf-spin .7s linear infinite;
}
@keyframes eplf-spin{to{transform:rotate(360deg)}}

#eplf-box .eplf-box__head{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
}
#eplf-box .eplf-box__icon{
    width:48px;height:48px;border-radius:14px;flex-shrink:0;
    background:linear-gradient(135deg,var(--eplf-mint),#cdeee8);
    color:var(--eplf-teal-dark);
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(0,89,87,.08);
}
#eplf-box .eplf-box__title{flex:1;min-width:0}
#eplf-box .eplf-box__title strong{
    display:block;
    font-size:16px;font-weight:800;color:var(--eplf-ink);
    letter-spacing:.2px;
}
#eplf-box .eplf-box__sub{
    display:block;
    font-size:12.5px;color:var(--eplf-muted);
    margin-top:3px;line-height:1.7;
}

#eplf-box .eplf-box__actions{
    display:flex;gap:12px;flex-wrap:wrap;
}
#eplf-box .eplf-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    flex:1;min-height:50px;
    padding:12px 18px;border-radius:13px;
    border:2px solid transparent;
    font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;
    font-size:14px;font-weight:800;cursor:pointer;
    transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,opacity .2s;
}
#eplf-box .eplf-btn:focus-visible{
    outline:3px solid rgba(0,89,87,.35);outline-offset:2px;
}
#eplf-box .eplf-btn:active:not(:disabled){transform:scale(.97)}
#eplf-box .eplf-btn:disabled{cursor:not-allowed;opacity:.6}

#eplf-box .eplf-btn--yes{
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    box-shadow:0 8px 18px -8px rgba(22,163,74,.55);
}
#eplf-box .eplf-btn--yes:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 12px 24px -8px rgba(22,163,74,.62);
}
#eplf-box .eplf-btn--no{
    background:#ffffff;color:var(--eplf-red);border-color:#fecaca;
}
#eplf-box .eplf-btn--no:hover:not(:disabled){
    background:var(--eplf-red-soft);transform:translateY(-2px);
}
#eplf-box .eplf-btn.is-selected{box-shadow:0 0 0 4px rgba(13,148,136,.14)}
#eplf-box .eplf-btn--yes.is-selected{box-shadow:0 0 0 4px rgba(22,163,74,.2)}

#eplf-box .eplf-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:32px;height:26px;padding:0 10px;border-radius:99px;
    font-size:12.5px;font-weight:800;
    font-variant-numeric:tabular-nums;
}
#eplf-box .eplf-btn--yes .eplf-count{
    background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.4);
}
#eplf-box .eplf-btn--no .eplf-count{
    background:var(--eplf-red-soft);
    border:1px solid #fecaca;
}

#eplf-box .eplf-box__bar{
    margin-top:18px;padding-top:14px;
    border-top:1px dashed var(--eplf-line);
}
#eplf-box .eplf-box__bar-top{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:8px;gap:10px;
}
#eplf-box .eplf-box__bar-label{
    font-size:12px;font-weight:700;color:var(--eplf-muted);
}
#eplf-box .eplf-box__bar-pct{
    font-size:13px;font-weight:800;color:var(--eplf-teal-dark);
    font-variant-numeric:tabular-nums;
}
#eplf-box .eplf-box__bar-track{
    height:9px;border-radius:99px;
    background:#eef2f6;overflow:hidden;
}
#eplf-box .eplf-box__bar-fill{
    display:block;height:100%;border-radius:99px;
    background:linear-gradient(90deg,var(--eplf-teal-light),var(--eplf-teal));
    transition:width .6s cubic-bezier(.22,1,.36,1);
}

#eplf-box .eplf-box__note{
    display:none;margin-top:14px;padding:11px 14px;border-radius:11px;
    font-size:13px;font-weight:700;line-height:1.8;text-align:center;
}
#eplf-box .eplf-box__note.is-yes,
#eplf-box .eplf-box__note.is-no,
#eplf-box .eplf-box__note.is-error{
    display:flex;align-items:center;justify-content:center;gap:9px;
}
#eplf-box .eplf-box__note-ico{
    display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;
}
#eplf-box .eplf-box__note.is-yes{
    background:var(--eplf-green-soft);color:#15803d;border:1px solid #bbf7d0;
}
#eplf-box .eplf-box__note.is-no{
    background:#fef3c7;color:#b45309;border:1px solid #fde68a;
}
#eplf-box .eplf-box__note.is-error{
    background:var(--eplf-red-soft);color:#b91c1c;border:1px solid #fecaca;
}

@media(max-width:560px){
    #eplf-box{padding:18px 16px}
    #eplf-box .eplf-box__actions{flex-direction:column}
    #eplf-box .eplf-btn{width:100%}
}
