/* صندوق «كم تطابق سيرتك هذه الوظيفة؟» آخر الوظيفة، والودجت الجانبي — كما في التصور. */
.athar-ckbox{--a-soft:color-mix(in srgb,var(--a) 8%,var(--surface,#fff));border-radius:14px;padding:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--a-soft);border:1px solid color-mix(in srgb,var(--a) 30%,var(--line,#E2DED6));margin:16px 0;direction:rtl;text-align:right}
.athar-ckbox .ring{width:54px;height:54px;position:relative;flex:none}
.athar-ckbox .ring svg{width:54px;height:54px;transform:rotate(-90deg);display:block}
.athar-ckbox .ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display,inherit);font-size:15px;color:var(--a)}
.athar-ckbox b.t{font-family:var(--f-display,inherit);font-size:16px;display:block;line-height:1.5}
.athar-ckbox span{font-size:13px;color:var(--muted,#6B645C);line-height:1.7}
.athar-ckbox .btn,.athar-mini-ck .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:9px 16px;font-weight:600;font-size:14px;background:var(--a);border:1px solid var(--a);color:#fff!important;text-decoration:none!important;white-space:nowrap}
.athar-ckbox .btn:hover,.athar-mini-ck .btn:hover{filter:brightness(1.08)}
.athar-mini-ck{border:1px solid var(--line,#E2DED6);border-radius:14px;background:var(--surface,#fff);padding:16px;display:grid;gap:8px;direction:rtl;text-align:right;margin-bottom:14px}
.athar-mini-ck b{font-family:var(--f-display,inherit);font-size:15px}
.athar-mini-ck span{font-size:12.5px;color:var(--muted,#6B645C);line-height:1.7}
@media (max-width:700px){.athar-ckbox{grid-template-columns:auto minmax(0,1fr)}.athar-ckbox .btn{grid-column:1/-1}}